diff --git a/app/assets/images/eye.png b/app/assets/images/eye.png
new file mode 100644
index 0000000..147c41d
Binary files /dev/null and b/app/assets/images/eye.png differ
diff --git a/app/components/button.js b/app/components/button.js
index 3211d82..21b9120 100644
--- a/app/components/button.js
+++ b/app/components/button.js
@@ -57,12 +57,19 @@ const Secondary = styled(DefaultButton)`
}
`;
+const Icon = styled.img`
+ height: 9px;
+ width: 12px;
+ margin-right: 10px;
+`;
+
type Props = {
label: string,
onClick?: () => void,
to?: string,
variant?: 'primary' | 'secondary',
disabled?: boolean,
+ icon?: string,
className?: string,
isLoading?: boolean,
};
@@ -73,25 +80,41 @@ export const Button = ({
to,
variant,
disabled,
+ icon,
className,
isLoading,
}: Props) => {
if (to && onClick) throw new Error('Should define either "to" or "onClick"');
- const props = { onClick, disabled: disabled || isLoading, className };
+ const props = {
+ onClick, disabled: disabled || isLoading, icon: null, className,
+ };
const buttonLabel = isLoading ? 'Loading...' : label;
const component = variant === 'primary' ? (
- {buttonLabel}
+
+ {icon
+ ?
+ : null
+ }
+ {buttonLabel}
+
) : (
- {buttonLabel}
+
+ {icon
+ ?
+ : null
+ }
+ {buttonLabel}
+
);
return to ? {component} : component;
};
Button.defaultProps = {
- to: null,
+ to: '',
+ icon: null,
variant: 'primary',
onClick: null,
disabled: false,
diff --git a/app/components/dropdown.js b/app/components/dropdown.js
index 115ccc2..c90ff91 100644
--- a/app/components/dropdown.js
+++ b/app/components/dropdown.js
@@ -9,6 +9,8 @@ import ClickOutside from 'react-click-outside';
import { TextComponent } from './text';
+import truncateAddress from '../utils/truncateAddress';
+
/* eslint-disable max-len */
const MenuWrapper = styled.div`
background-image: ${props => `linear-gradient(to right, ${darken(
@@ -18,6 +20,7 @@ const MenuWrapper = styled.div`
border-radius: ${props => props.theme.boxBorderRadius};
margin-left: -10px;
max-width: 400px;
+ overflow: hidden;
`;
const MenuItem = styled.button`
@@ -30,6 +33,7 @@ const MenuItem = styled.button`
padding: 15px;
cursor: pointer;
font-weight: 700;
+ overflow: hidden;
width: 100%;
text-align: left;
@@ -50,6 +54,18 @@ const MenuItem = styled.button`
}
`;
+const OptionItem = styled(MenuItem)`
+ &:hover {
+ background-color: #F9D114;
+ }
+`;
+
+const Option = styled(TextComponent)`
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+`;
+
const PopoverWithStyle = styled(Popover)`
& > .Popover-tip {
fill: ${props => props.theme.colors.activeItem};
@@ -60,6 +76,7 @@ type Props = {
renderTrigger: (toggleVisibility: () => void, isOpen: boolean) => Node,
options: Array<{ label: string, onClick: () => void }>,
label?: string | null,
+ truncate?: boolean,
};
type State = {
@@ -73,11 +90,14 @@ export class DropdownComponent extends Component {
static defaultProps = {
label: null,
+ truncate: false,
};
render() {
const { isOpen } = this.state;
- const { label, options, renderTrigger } = this.props;
+ const {
+ label, options, truncate, renderTrigger,
+ } = this.props;
const body = [
{
)}
{options.map(({ label: optionLabel, onClick }) => (
-
+
+
+
))}
,
diff --git a/app/components/wallet-address.js b/app/components/wallet-address.js
new file mode 100644
index 0000000..c15b29e
--- /dev/null
+++ b/app/components/wallet-address.js
@@ -0,0 +1,103 @@
+// @flow
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { ColumnComponent } from './column';
+import { Button } from './button';
+import { QRCode } from './qrcode';
+
+import truncateAddress from '../utils/truncateAddress';
+
+import eyeIcon from '../assets/images/eye.png';
+
+const AddressWrapper = styled.div`
+ align-items: center;
+ display: flex;
+ background-color: #000;
+ border-radius: 6px;
+ padding: 7px 13px;
+ width: 100%;
+`;
+
+const Input = styled.input`
+ border-radius: ${props => props.theme.boxBorderRadius};
+ border: none;
+ background-color: ${props => props.theme.colors.inputBackground};
+ color: ${props => props.theme.colors.text};
+ padding: 15px;
+ width: 100%;
+ outline: none;
+ font-family: ${props => props.theme.fontFamily};
+
+ ::placeholder {
+ opacity: 0.5;
+ }
+`;
+
+const QRCodeWrapper = styled.div`
+ align-items: center;
+ display: flex;
+ background-color: #000;
+ border-radius: 6px;
+ padding: 20px;
+ margin-top: 10px;
+ width: 100%;
+`;
+
+type Props = {
+ address: string,
+};
+
+type State = {
+ isVisible: boolean,
+};
+
+export class WalletAddress extends Component {
+ state = {
+ isVisible: false,
+ };
+
+ show = () => {
+ this.setState(
+ () => ({ isVisible: true }),
+ );
+ };
+
+ hide = () => {
+ this.setState(
+ () => ({ isVisible: false }),
+ );
+ };
+
+
+ render() {
+ const { address } = this.props;
+ const { isVisible } = this.state;
+ const toggleVisibility = isVisible ? this.hide : this.show;
+
+ return (
+
+
+ {}}
+ onFocus={event => event.currentTarget.select()}
+ />
+
+
+ {isVisible
+ ? (
+
+
+
+ )
+ : null}
+
+ );
+ }
+}
diff --git a/app/components/wallet-address.mdx b/app/components/wallet-address.mdx
new file mode 100644
index 0000000..c7a7c84
--- /dev/null
+++ b/app/components/wallet-address.mdx
@@ -0,0 +1,28 @@
+---
+name: Wallet Address
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { WalletAddress } from './wallet-address.js'
+import { DoczWrapper } from '../theme.js'
+
+# Wallet Address
+
+## Properties
+
+
+
+## Basic usage
+
+
+
+ {() => (
+
+
+
+ )}
+
+
diff --git a/app/theme.js b/app/theme.js
index 28ea0f0..867aa8e 100644
--- a/app/theme.js
+++ b/app/theme.js
@@ -7,11 +7,11 @@ import { normalize } from 'polished'; // eslint-disable-line
import { DARK } from './constants/themes';
-const darkOne = '#7B00DD';
+const darkOne = '#F4B728';
const lightOne = '#ffffff';
const brandOne = '#000';
const brandTwo = '#3B3B3F';
-const activeItem = '#F5CB00';
+const activeItem = '#F4B728';
const text = '#FFF';
const cardBackgroundColor = '#000';
const sidebarLogoGradientBegin = '#F4B728';
diff --git a/app/views/receive.js b/app/views/receive.js
index 0ec6e95..ceadafc 100644
--- a/app/views/receive.js
+++ b/app/views/receive.js
@@ -3,10 +3,8 @@ import React from 'react';
import styled from 'styled-components';
import { InputLabelComponent } from '../components/input-label';
-import { InputComponent } from '../components/input';
-import { QRCode } from '../components/qrcode';
import { RowComponent } from '../components/row';
-import { ColumnComponent } from '../components/column';
+import { WalletAddress } from '../components/wallet-address';
type Props = {
addresses: Array,
@@ -27,21 +25,14 @@ const Label = styled(InputLabelComponent)`
export const ReceiveView = ({ addresses }: Props) => (
+
{(addresses || []).map(address => (
-
-
- {}}
- onFocus={event => event.currentTarget.select()}
- />
-
-
+
))}