feature(wallet): hook up new wallet modal

app/components/Wallet/ReceiveModal.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import copy from 'copy-to-clipboard'
 import QRCode from 'qrcode.react'
-import { FaCopy } from 'react-icons/lib/fa'
+import copyIcon from 'icons/copy.svg'
 import Isvg from 'react-inlinesvg'
 
 import x from 'icons/x.svg'
@@ -44,6 +44,7 @@ class ReceiveModal extends React.Component {
     const { qrCodeType } = this.state
     
     if (!isOpen) { return null }
+
     return (
       <div className={styles.container}>
         <div className={styles.closeContainer}>
@@ -51,42 +52,51 @@ class ReceiveModal extends React.Component {
             <Isvg src={x} />
           </span>
         </div>
-        <header className={styles.header}>
-          <div className={styles.qrcodes}>
-            <QRCode value={qrCodeType === 1 ? address : pubkey} />
-          </div>
 
-          <ul className={styles.tabs}>
-            <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</h4>
-            <span className={styles.newAddress} onClick={() => newAddress('np2wkh')}>New Address</span>
-          </div>
-          <p>
-            <span>{address}</span>
-            <span onClick={() => copyOnClick(address)} className='hint--left' data-hint='Copy address'>
-              <FaCopy />
-            </span>
-          </p>
-        </section>
+        <div className={styles.content}>
+          <section className={styles.left}>
+            <header className={styles.header}>
+              <h2>JimmyMow</h2>
+
+              <div className={styles.qrCodeOptions}>
+                <div className={qrCodeType === 1 && styles.active} onClick={changeQrCode}>Node Pubkey</div>
+                <div className={qrCodeType === 2 && styles.active} onClick={changeQrCode}>Deposit Address</div>
+              </div>
+            </header>
 
-        <section>
-          <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 className={styles.qrCodeContainer}>
+              <QRCode
+                value={qrCodeType === 1 ? pubkey : address}
+                renderAs='svg'
+                size={150}
+                bgColor='transparent'
+                fgColor='white'
+                level='L'
+              />
+            </div>
+          </section>
+          <section className={styles.right}>
+            <div className={styles.pubkey}>
+              <h4>Node Public Key</h4>
+              <p>
+                <span className={styles.data}>{pubkey}</span>
+                <span onClick={() => copyOnClick(pubkey)} className={`${styles.copy} hint--left`} data-hint='Copy pubkey'>
+                  <Isvg src={copyIcon} />
+                </span>
+              </p>
+            </div>
+
+            <div className={styles.address}>
+              <h4>Deposit Address</h4>
+              <p>
+                <span className={styles.data}>{address}</span>
+                <span onClick={() => copyOnClick(address)} className={`${styles.copy} hint--left`} data-hint='Copy address'>
+                  <Isvg src={copyIcon} />
+                </span>
+              </p>
+            </div>
+          </section>
+        </div>
       </div>
     )
   }

app/components/Wallet/ReceiveModal.scss

@@ -25,93 +25,105 @@
   }
 }
 
-.header {
-  background: $lightgrey;
-  padding: 10px 40px 40px;
-  text-align: center;
-
-  .qrcodes {
-    text-align: center;
-    margin-top: 20px;
-  }
-
-  .tabs {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-
-    li {
-      margin: 0 20px;
-      color: $darkestgrey;
-      transition: all 0.25s;
-
-      &:hover {
-        color: $black;
+.content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: $spaceblue;
+  width: 85%;
+  margin: 15% auto 50px auto;
+  color: $white;
+
+  .left {
+    width: 25%;
+    padding: 30px 40px;
+
+    .header {
+      
+      h2 {
+        text-align: center;
       }
 
-      &.active {
-        color: $black;
-        font-weight: bold;
+      .qrCodeOptions {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        margin: 20px 0;
+
+        div {
+          font-size: 10px;
+          opacity: 0.5;
+          cursor: pointer;
+          transition: all 0.25s;
+
+          &:hover {
+            opacity: 0.75;
+          }
+
+          &.active {
+            opacity: 1.0;
+          }
+        }
       }
     }
-  }
-}
-
-section {
-  margin: 25px 0;
-  padding: 25px;
-
-  h4 {
-    font-size: 14px;
-    font-weight: bold;
-    letter-spacing: 1.5px;
-    margin-bottom: 10px;
-
-    span {
-      color: $blue;
-      cursor: pointer;
+    
+    .qrCodeContainer {
+      text-align: center;
     }
   }
 
-  p {
-    display: flex;
-    flex-direction: row;
-    font-family: 'Roboto';
-    font-size: 14px;
-    font-weight: 200;
-    background: $lightgrey;
+  .right {
+    width: 75%;
+    min-height: 220px;
+    border-left: 1px solid $spaceborder;
+    padding: 30px 40px;
 
-    span {
-      padding: 15px;
-    }
+    .pubkey, .address {
+      padding: 25px;
 
-    span:nth-child(1) {
-      flex: 9;
-      overflow-x: scroll;
-    }
-
-    span:nth-child(2) {
-      background: $darkgrey;
-      color: $black;
-      cursor: pointer;
-      transition: all 0.25s;
+      h4 {
+        font-size: 12px;
+        margin-bottom: 10px;
 
-      &:hover {
-        background: $darkestgrey;
+        span {
+          cursor: pointer;
+        }
       }
     }
-  }
-}
+    
+    p {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-family: 'Roboto';
+      font-size: 10px;
+      font-weight: 200;
+      background: $bluegrey;
+
+      .data, .copy {
+        padding: 15px;
+      }
 
-.addressHeader {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+      .data {
+        flex: 9;
+        overflow-x: scroll;
+      }
+
+      .copy {
+        background: #383b47;
+        color: $white;
+        cursor: pointer;
+        transition: all 0.25s;
 
-  .newAddress {
-    text-decoration: underline;
-    font-size: 12px;
+        &:hover {
+          background: lighten(#383b47, 5%);
+        }
+
+        svg {
+          height: 12px;
+          width: 12px;
+        }
+      }
+    }    
   }
 }

app/icons/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>