feature(wallet mock): wallet mock of new wallet header

7 years ago · cca8d4e574
12 changed files with 168 additions and 61 deletions
--- a/app/components/Channels/Channels.js
+++ b/app/components/Channels/Channels.js
@ -69,7 +69,7 @@ const Channels = ({
            }
            return (
              <Channel
-                key={channel.chan_id}
+                key={index}
                ticker={ticker}
                channel={channel}
                setChannel={setChannel}
--- a/app/components/Nav/Nav.js
+++ b/app/components/Nav/Nav.js
@ -11,48 +11,6 @@ import styles from './Nav.scss'

 const Nav = ({ ticker, balance, setCurrency, currentTicker, openPayForm, openRequestForm }) => (
  <nav className={styles.nav}>
-    <ul className={styles.info}>
-      <li className={`${styles.currencies} ${styles.link}`}>
-        <span
-          data-hint={currentTicker ? usd.formatUsd(currentTicker.price_usd) : null}
-          className={`${styles.currency} ${ticker.currency === ticker.crypto ? styles.active : ''} hint--bottom`}
-          onClick={() => setCurrency(ticker.crypto)}
-        >
-          <CryptoIcon currency={ticker.crypto} />
-        </span>
-        <span
-          className={`${styles.currency} ${ticker.currency === 'usd' ? styles.active : ''}`}
-          onClick={() => setCurrency('usd')}
-        >
-          <FaDollar />
-        </span>
-      </li>
-      <li className={`${styles.balance} ${styles.link}`}>
-        <p data-hint='Wallet balance' className='hint--bottom-left'>
-          <span><CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} /></span>
-          <span>
-            {
-              ticker.currency === 'usd' ?
-                btc.satoshisToUsd(balance.walletBalance, currentTicker.price_usd)
-                :
-                btc.satoshisToBtc(balance.walletBalance)
-            }
-          </span>
-        </p>
-        <p data-hint='Channel balance' className='hint--bottom-left'>
-          <span><CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} /></span>
-          <span>
-            {
-              ticker.currency === 'usd' ?
-                btc.satoshisToUsd(balance.channelBalance, currentTicker.price_usd)
-                :
-                btc.satoshisToBtc(balance.channelBalance)
-            }
-          </span>
-        </p>
-      </li>
-    </ul>
-
    <div className={styles.logo}>
      <ReactSVG path='../resources/zap_2.svg' />
    </div>
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@ -0,0 +1,53 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import copy from 'copy-to-clipboard'
+import { showNotification } from 'notifications'
+import CryptoIcon from 'components/CryptoIcon'
+import { btc, usd } from 'utils'
+import styles from './Wallet.scss'
+
+const Wallet = ({ ticker, currentTicker, balance, address, pubkey }) => {
+  const copyOnClick = data => {
+    copy(data)
+    showNotification('Noice', 'Successfully copied to clipboard')
+  }
+
+  return (
+    <div className={styles.wallet}>
+      <div className={styles.content}>
+        <div className={styles.left}>
+          <div className={styles.leftContent}>
+            <CryptoIcon currency={ticker.crypto} />
+            <div className={styles.details}>
+              <h1>{btc.satoshisToBtc(parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance))} BTC</h1>
+              <span>{btc.satoshisToBtc(balance.walletBalance)} available</span>
+              <span>{btc.satoshisToBtc(balance.channelBalance)} in channels</span>
+            </div>
+          </div>
+        </div>
+        <div className={styles.right}>
+          <div className={styles.rightContent}>
+            <div className={styles.data}>
+              <h2>Node public key (<span onClick={() => copyOnClick(pubkey)}>copy</span>)</h2>
+              <p>{pubkey}</p>
+            </div>
+            <div className={styles.data}>
+              <h2>Deposit address (<span onClick={() => copyOnClick(address)}>copy</span>)</h2>
+              <p>{address}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Wallet.propTypes = {
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired,
+  balance: PropTypes.object.isRequired,
+  address: PropTypes.string.isRequired,
+  pubkey: PropTypes.string.isRequired
+}
+
+export default Wallet
--- a/app/components/Wallet/Wallet.scss
+++ b/app/components/Wallet/Wallet.scss
@ -0,0 +1,78 @@
+@import '../../variables.scss';
+
+.wallet {
+  cursor: pointer;
+  background: $lightgrey;
+  transition: background 0.25s;
+
+  &:hover {
+    background: $darkgrey;
+  }
+}
+
+.left, .right {
+  display: inline-block;
+  vertical-align: top;
+  width: 50%;
+
+  .leftContent, .rightContent {
+    padding: 25px;
+  }  
+}
+
+.leftContent {
+  display: flex;
+  flex-direction: row;
+
+  .details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    h1 {
+      font-size: 24px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      letter-spacing: 1.5px;
+    }
+
+    span {
+      margin: 2.5px 0;
+    }
+  }
+
+  svg {
+    font-size: 100px;
+    color: $main;
+  }
+}
+
+.rightContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .data {
+    margin: 10px 0;
+
+    h2 {
+      margin-bottom: 5px;
+      text-transform: uppercase;
+      font-size: 10px;
+      letter-spacing: 1.5px;
+
+      span {
+        color: #1DA1F2;
+        // text-decoration: underline;
+      }
+    }
+
+    p {
+      font-size: 14px;
+      padding-bottom: 5px;
+      border-bottom: 1px solid $main;
+    }
+  }
+}
+
+
--- a/app/components/Wallet/index.js
+++ b/app/components/Wallet/index.js
@ -0,0 +1,3 @@
+import Wallet from './Wallet'
+
+export default Wallet
--- a/app/lnd/methods/walletController.js
+++ b/app/lnd/methods/walletController.js
@ -72,7 +72,10 @@ export function getTransactions(lnd) {
 export function sendCoins(lnd, { addr, amount }) {
  return new Promise((resolve, reject) => {
    lnd.sendCoins({ addr, amount }, (err, data) => {
-      if (err) { reject(err) }
+      if (err) { 
+        console.log('err: ', err)
+        reject(err) 
+      }

      resolve(data)
    })
--- a/app/main.dev.js
+++ b/app/main.dev.js
@ -106,6 +106,7 @@ app.on('ready', async () => {
    // There was an error checking for the LND process
    if (err) { throw new Error( err ) }

+    console.log('results: ', results)
    // No LND process was found
    if (!results.length) {
      // Let the front end know we have started syncing LND
--- a/app/routes/app/components/App.js
+++ b/app/routes/app/components/App.js
@ -5,11 +5,12 @@ import LoadingBolt from 'components/LoadingBolt'
 import Form from 'components/Form'
 import ModalRoot from 'components/ModalRoot'
 import Nav from 'components/Nav'
+import Wallet from 'components/Wallet'
 import styles from './App.scss'

 class App extends Component {
  componentWillMount() {
-    const { fetchTicker, fetchBalance, fetchInfo, lnd: { syncing } } = this.props
+    const { fetchTicker, fetchBalance, fetchInfo, newAddress, lnd: { syncing } } = this.props

    if (syncing) {
      fetchBlockHeight()
@ -19,6 +20,7 @@ class App extends Component {
      fetchTicker()
      fetchBalance()
      fetchInfo()
+      newAddress('p2pkh')
    }
  }

@ -31,7 +33,9 @@ class App extends Component {
      modal: { modalType, modalProps },
      hideModal,
      ticker,
+      address: { address },
      balance,
+      info,
      form,
      setCurrency,
      currentTicker,
@ -78,6 +82,13 @@ class App extends Component {
        />

        <div className={styles.content}>
+          <Wallet
+            ticker={ticker}
+            currentTicker={currentTicker}
+            balance={balance}
+            address={address}
+            pubkey={info.data.identity_pubkey}
+          />
          {children}
        </div>
      </div>
@ -88,6 +99,7 @@ class App extends Component {
 App.propTypes = {
  modal: PropTypes.object.isRequired,
  ticker: PropTypes.object.isRequired,
+  address: PropTypes.object.isRequired,
  balance: PropTypes.object.isRequired,
  form: PropTypes.object.isRequired,
  formProps: PropTypes.object.isRequired,
--- a/app/routes/app/containers/AppContainer.js
+++ b/app/routes/app/containers/AppContainer.js
@ -1,6 +1,7 @@
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
 import { fetchTicker, setCurrency, tickerSelectors } from 'reducers/ticker'
+import { newAddress } from 'reducers/address'
 import { fetchBalance } from 'reducers/balance'

 import { fetchInfo } from 'reducers/info'
@ -23,6 +24,7 @@ import App from '../components/App'
 const mapDispatchToProps = {
  fetchTicker,
  setCurrency,
+  newAddress,
  fetchBalance,

  fetchInfo,
@ -52,7 +54,9 @@ const mapStateToProps = state => ({
  lnd: state.lnd,

  ticker: state.ticker,
+  address: state.address,
  balance: state.balance,
+  info: state.info,
  payment: state.payment,
  transaction: state.transaction,

--- a/package.json
+++ b/package.json
@ -199,6 +199,7 @@
    "axios": "^0.16.2",
    "bitcoinjs-lib": "^3.2.0",
    "bitcore-lib": "^0.14.0",
+    "copy-to-clipboard": "^3.0.8",
    "devtron": "^1.4.0",
    "electron-debug": "^1.2.0",
    "font-awesome": "^4.7.0",
--- a/resources/bin/darwin/lnd
+++ b/resources/bin/darwin/lnd
--- a/yarn.lock
+++ b/yarn.lock
@ -2170,10 +2170,6 @@ connect-history-api-fallback@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.3.0.tgz#e51d17f8f0ef0db90a64fdb47de3051556e9f169"

-connected-domain@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/connected-domain/-/connected-domain-1.0.0.tgz#bfe77238c74be453a79f0cb6058deeb4f2358e93"
-
 console-browserify@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@ -2216,6 +2212,12 @@ cookie@0.3.1:
  version "0.3.1"
  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"

+copy-to-clipboard@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9"
+  dependencies:
+    toggle-selection "^1.0.3"
+
 core-js@^1.0.0:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@ -6964,12 +6966,6 @@ prr@~0.0.0:
  version "0.0.0"
  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"

-ps-node@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/ps-node/-/ps-node-0.1.6.tgz#9af67a99d7b1d0132e51a503099d38a8d2ace2c3"
-  dependencies:
-    table-parser "^0.1.3"
-
 pseudomap@^1.0.1, pseudomap@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
@ -8396,12 +8392,6 @@ synesthesia@^1.0.1:
  dependencies:
    css-color-names "0.0.3"

-table-parser@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/table-parser/-/table-parser-0.1.3.tgz#0441cfce16a59481684c27d1b5a67ff15a43c7b0"
-  dependencies:
-    connected-domain "^1.0.0"
-
 table@^3.7.8:
  version "3.8.3"
  resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
@ -8570,6 +8560,10 @@ to-fast-properties@^1.0.1:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"

+toggle-selection@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+
 toposort@^1.0.0:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.3.tgz#f02cd8a74bd8be2fc0e98611c3bacb95a171869c"