fix(wallet modal): redesign wallet modal

app/components/Wallet/ReceiveModal.js

@@ -5,9 +5,10 @@ import copy from 'copy-to-clipboard'
 import QRCode from 'qrcode.react'
 import { showNotification } from 'notifications'
 import { MdClose } from 'react-icons/lib/md'
+import { FaCopy } from 'react-icons/lib/fa'
 import styles from './ReceiveModal.scss'
 
-const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress }) => {
+const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress, qrCodeType, changeQrCode }) => {
   const customStyles = {
     overlay: {
       cursor: 'pointer'
@@ -48,28 +49,39 @@ const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress }
       <div className={styles.container}>
         <header>
           <div className={styles.qrcodes}>
-            <QRCode value={address} />
+            <QRCode value={qrCodeType === 1 ? address : pubkey} />
           </div>
 
           <ul className={styles.tabs}>
-            <li className={styles.active}>Wallet address</li>
-            <li>Node pubkey</li>
+            <li className={qrCodeType === 1 && styles.active} onClick={changeQrCode}>
+              Wallet address
+            </li>
+            <li className={qrCodeType === 2 && styles.active} onClick={changeQrCode}>
+              Node pubkey
+            </li>
           </ul>
         </header>
         <section>
           <div className={styles.addressHeader}>
-            <h4>Deposit Address (<span onClick={() => copyOnClick(address)}>Copy</span>)</h4>
+            <h4>Deposit Address</h4>
             <span className={styles.newAddress} onClick={() => newAddress('p2pkh')}>New Address</span>
           </div>
           <p>
-            {address}
-            <span>hi</span>
+            <span>{address}</span>
+            <span onClick={() => copyOnClick(address)} className='hint--left' data-hint='Copy address'>
+              <FaCopy />
+            </span>
           </p>
         </section>
 
         <section>
-          <h4>Node Public Key (<span onClick={() => copyOnClick(pubkey)}>Copy</span>)</h4>
-          <p>{pubkey}</p>
+          <h4>Node Public Key</h4>
+          <p>
+            <span>{pubkey}</span>
+            <span onClick={() => copyOnClick(pubkey)} className='hint--left' data-hint='Copy pubkey'>
+              <FaCopy />
+            </span>
+          </p>
         </section>
       </div>
     </ReactModal>

app/components/Wallet/ReceiveModal.scss

@@ -41,6 +41,7 @@
 
         &.active {
           color: $black;
+          font-weight: bold;
         }
       }
     }
@@ -63,12 +64,32 @@
     }
 
     p {
+      display: flex;
+      flex-direction: row;
       font-family: 'Roboto';
-      text-align: center;
       font-size: 14px;
       font-weight: 200;
       background: $lightgrey;
-      padding: 15px;
+
+      span {
+        padding: 15px;
+      }
+
+      span:nth-child(1) {
+        flex: 9;
+        overflow-x: scroll;
+      }
+
+      span:nth-child(2) {
+        background: $darkgrey;
+        color: $black;
+        cursor: pointer;
+        transition: all 0.25s;
+
+        &:hover {
+          background: $darkestgrey;
+        }
+      }
     }
   }
 }

app/components/Wallet/Wallet.js

@@ -13,7 +13,8 @@ class Wallet extends Component {
     super(props)
 
     this.state = {
-      modalOpen: false
+      modalOpen: false,
+      qrCodeType: 1
     }
   }
 
@@ -25,7 +26,13 @@ class Wallet extends Component {
       newAddress
     } = this.props
 
-    const { modalOpen } = this.state
+    const { modalOpen, qrCodeType } = this.state
+
+    const changeQrCode = () => {
+      const qrCodeType = this.state.qrCodeType === 1 ? 2 : 1
+
+      this.setState({ qrCodeType })
+    }
 
     return (
       <div className={styles.wallet}>
@@ -38,6 +45,8 @@ class Wallet extends Component {
               pubkey={info.data.identity_pubkey}
               address={address}
               newAddress={newAddress}
+              qrCodeType={qrCodeType}
+              changeQrCode={changeQrCode}
             />
           )
         }