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,43 +52,52 @@ class ReceiveModal extends React.Component {
             <Isvg src={x} />
           </span>
         </div>
+
+        <div className={styles.content}>
+          <section className={styles.left}>
             <header className={styles.header}>
-          <div className={styles.qrcodes}>
+              <h2>JimmyMow</h2>
-            <QRCode value={qrCodeType === 1 ? address : pubkey} />
-          </div>
 
-          <ul className={styles.tabs}>
+              <div className={styles.qrCodeOptions}>
-            <li className={qrCodeType === 1 && styles.active} onClick={changeQrCode}>
+                <div className={qrCodeType === 1 && styles.active} onClick={changeQrCode}>Node Pubkey</div>
-              Wallet address
+                <div className={qrCodeType === 2 && styles.active} onClick={changeQrCode}>Deposit Address</div>
-            </li>
+              </div>
-            <li className={qrCodeType === 2 && styles.active} onClick={changeQrCode}>
-              Node pubkey
-            </li>
-          </ul>
             </header>
-        <section>
+
-          <div className={styles.addressHeader}>
+            <div className={styles.qrCodeContainer}>
-            <h4>Deposit Address</h4>
+              <QRCode
-            <span className={styles.newAddress} onClick={() => newAddress('np2wkh')}>New Address</span>
+                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>{address}</span>
+                <span className={styles.data}>{pubkey}</span>
-            <span onClick={() => copyOnClick(address)} className='hint--left' data-hint='Copy address'>
+                <span onClick={() => copyOnClick(pubkey)} className={`${styles.copy} hint--left`} data-hint='Copy pubkey'>
-              <FaCopy />
+                  <Isvg src={copyIcon} />
                 </span>
               </p>
-        </section>
+            </div>
 
-        <section>
+            <div className={styles.address}>
-          <h4>Node Public Key</h4>
+              <h4>Deposit Address</h4>
               <p>
-            <span>{pubkey}</span>
+                <span className={styles.data}>{address}</span>
-            <span onClick={() => copyOnClick(pubkey)} className='hint--left' data-hint='Copy pubkey'>
+                <span onClick={() => copyOnClick(address)} className={`${styles.copy} hint--left`} data-hint='Copy address'>
-              <FaCopy />
+                  <Isvg src={copyIcon} />
                 </span>
               </p>
+            </div>
           </section>
         </div>
+      </div>
     )
   }
 }

app/components/Wallet/ReceiveModal.scss

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