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}>
+        <div className={styles.content}>
-            <QRCode value={qrCodeType === 1 ? address : pubkey} />
+          <section className={styles.left}>
-          </div>
+            <header className={styles.header}>
-
+              <h2>JimmyMow</h2>
-          <ul className={styles.tabs}>
+
-            <li className={qrCodeType === 1 && styles.active} onClick={changeQrCode}>
+              <div className={styles.qrCodeOptions}>
-              Wallet address
+                <div className={qrCodeType === 1 && styles.active} onClick={changeQrCode}>Node Pubkey</div>
-            </li>
+                <div className={qrCodeType === 2 && styles.active} onClick={changeQrCode}>Deposit Address</div>
-            <li className={qrCodeType === 2 && styles.active} onClick={changeQrCode}>
+              </div>
-              Node pubkey
+            </header>
-            </li>
+
-          </ul>
+            <div className={styles.qrCodeContainer}>
-        </header>
+              <QRCode
-        <section>
+                value={qrCodeType === 1 ? pubkey : address}
-          <div className={styles.addressHeader}>
+                renderAs='svg'
-            <h4>Deposit Address</h4>
+                size={150}
-            <span className={styles.newAddress} onClick={() => newAddress('np2wkh')}>New Address</span>
+                bgColor='transparent'
-          </div>
+                fgColor='white'
-          <p>
+                level='L'
-            <span>{address}</span>
+              />
-            <span onClick={() => copyOnClick(address)} className='hint--left' data-hint='Copy address'>
+            </div>
-              <FaCopy />
+          </section>
-            </span>
+          <section className={styles.right}>
-          </p>
+            <div className={styles.pubkey}>
-        </section>
+              <h4>Node Public Key</h4>
-
+              <p>
-        <section>
+                <span className={styles.data}>{pubkey}</span>
-          <h4>Node Public Key</h4>
+                <span onClick={() => copyOnClick(pubkey)} className={`${styles.copy} hint--left`} data-hint='Copy pubkey'>
-          <p>
+                  <Isvg src={copyIcon} />
-            <span>{pubkey}</span>
+                </span>
-            <span onClick={() => copyOnClick(pubkey)} className='hint--left' data-hint='Copy pubkey'>
+              </p>
-              <FaCopy />
+            </div>
-            </span>
+
-          </p>
+            <div className={styles.address}>
-        </section>
+              <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 {
+.content {
-  background: $lightgrey;
+  display: flex;
-  padding: 10px 40px 40px;
+  flex-direction: row;
-  text-align: center;
+  align-items: center;
-
+  background: $spaceblue;
-  .qrcodes {
+  width: 85%;
-    text-align: center;
+  margin: 15% auto 50px auto;
-    margin-top: 20px;
+  color: $white;
-  }
 
-  .tabs {
+  .left {
-    display: flex;
+    width: 25%;
-    flex-direction: row;
+    padding: 30px 40px;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
 
-    li {
+    .header {
-      margin: 0 20px;
-      color: $darkestgrey;
-      transition: all 0.25s;
       
-      &:hover {
+      h2 {
-        color: $black;
+        text-align: center;
       }
 
-      &.active {
+      .qrCodeOptions {
-        color: $black;
+        display: flex;
-        font-weight: bold;
+        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 {
+    .qrCodeContainer {
-  margin: 25px 0;
+      text-align: center;
-  padding: 25px;
-
-  h4 {
-    font-size: 14px;
-    font-weight: bold;
-    letter-spacing: 1.5px;
-    margin-bottom: 10px;
-
-    span {
-      color: $blue;
-      cursor: pointer;
     }
   }
 
-  p {
+  .right {
-    display: flex;
+    width: 75%;
-    flex-direction: row;
+    min-height: 220px;
-    font-family: 'Roboto';
+    border-left: 1px solid $spaceborder;
-    font-size: 14px;
+    padding: 30px 40px;
-    font-weight: 200;
-    background: $lightgrey;
 
-    span {
+    .pubkey, .address {
-      padding: 15px;
+      padding: 25px;
-    }
 
-    span:nth-child(1) {
+      h4 {
-      flex: 9;
+        font-size: 12px;
-      overflow-x: scroll;
+        margin-bottom: 10px;
+
+        span {
+          cursor: pointer;
+        }
+      }
     }
     
-    span:nth-child(2) {
+    p {
-      background: $darkgrey;
+      display: flex;
-      color: $black;
+      flex-direction: row;
-      cursor: pointer;
+      align-items: center;
-      transition: all 0.25s;
+      font-family: 'Roboto';
+      font-size: 10px;
+      font-weight: 200;
+      background: $bluegrey;
+
+      .data, .copy {
+        padding: 15px;
+      }
 
-      &:hover {
+      .data {
-        background: $darkestgrey;
+        flex: 9;
+        overflow-x: scroll;
       }
-    }
-  }
-}
 
-.addressHeader {
+      .copy {
-  display: flex;
+        background: #383b47;
-  flex-direction: row;
+        color: $white;
-  justify-content: space-between;
+        cursor: pointer;
+        transition: all 0.25s;
+
+        &:hover {
+          background: lighten(#383b47, 5%);
+        }
 
-  .newAddress {
+        svg {
-    text-decoration: underline;
+          height: 12px;
-    font-size: 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>