feat(pixel-perfecting): add show/hide address button on receive view

app/components/wallet-address.js

@@ -0,0 +1,104 @@
+// @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';
+
+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<Props, State> {
+  state = {
+    isVisible: false,
+  };
+
+  componentDidMount() {
+
+  }
+
+  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 (
+      <ColumnComponent width='100%'>
+        <AddressWrapper>
+          <Input
+            value={isVisible ? address : truncateAddress(address)}
+            onChange={() => {}}
+            onFocus={event => event.currentTarget.select()}
+          />
+          <Button
+            label={`${isVisible ? 'Hide' : 'Show'} full address and QR Code`}
+            onClick={toggleVisibility}
+            variant='secondary'
+          />
+        </AddressWrapper>
+        {isVisible
+          ? (
+            <QRCodeWrapper>
+              <QRCode value={address} />
+            </QRCodeWrapper>
+          )
+          : null}
+      </ColumnComponent>
+    );
+  }
+}

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
+
+<PropsTable of={WalletAddress} />
+
+## Basic usage
+
+<Playground>
+  <DoczWrapper>
+    {() => (
+      <div style={{ width: '700px' }}>
+        <WalletAddress
+          address='t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1'
+        />
+      </div>
+    )}
+  </DoczWrapper>
+</Playground>

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<string>,
@@ -27,21 +25,14 @@ const Label = styled(InputLabelComponent)`
 
 export const ReceiveView = ({ addresses }: Props) => (
   <Wrapper>
+    <Label value='Addresses: ' />
     {(addresses || []).map(address => (
       <Row
         key={address}
         alignItems='center'
         justifyContent='space-between'
       >
-        <ColumnComponent width='85%'>
-          <Label value='Your Address: ' />
-          <InputComponent
-            value={address}
-            onChange={() => {}}
-            onFocus={event => event.currentTarget.select()}
-          />
-        </ColumnComponent>
-        <QRCode value={address} />
+        <WalletAddress address={address} />
       </Row>
     ))}
   </Wrapper>