From 7997fce342abff84d027a5e9f74fcabb5495bc30 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Tue, 24 Oct 2017 16:17:32 -0500 Subject: [PATCH] fix(walletredesign): simpler wallet redesign for modal that has pubkey and address --- app/components/ModalRoot/WalletDetails.js | 33 ++++++- app/components/ModalRoot/WalletDetails.scss | 70 ++++++++++++++ app/components/Wallet/ReceiveModal.js | 61 ++++++++++++ app/components/Wallet/ReceiveModal.scss | 38 ++++++++ app/components/Wallet/Wallet.js | 92 ++++++++++++------- app/components/Wallet/Wallet.scss | 34 +++---- .../components/components/Modal/Modal.js | 2 +- app/routes/app/components/App.js | 2 +- app/variables.scss | 1 + 9 files changed, 277 insertions(+), 56 deletions(-) create mode 100644 app/components/Wallet/ReceiveModal.js create mode 100644 app/components/Wallet/ReceiveModal.scss diff --git a/app/components/ModalRoot/WalletDetails.js b/app/components/ModalRoot/WalletDetails.js index f7250e81..a2cad1aa 100644 --- a/app/components/ModalRoot/WalletDetails.js +++ b/app/components/ModalRoot/WalletDetails.js @@ -1,17 +1,44 @@ import React from 'react' import PropTypes from 'prop-types' +import QRCode from 'qrcode.react' import styles from './WalletDetails.scss' -const WalletDetails = () => { +const WalletDetails = ({ info, address }) => { return (
- wallet details +
+
+
+

Node Alias

+

Testing

+
+
+

Node Public Key

+

{info.data.identity_pubkey}

+
+
+

Deposit Address

+
+ +
+

{address}

+
+
+
+
+

+ Network +

+
+
+
) } WalletDetails.propTypes = { - + info: PropTypes.object.isRequired, + address: PropTypes.string.isRequired } export default WalletDetails diff --git a/app/components/ModalRoot/WalletDetails.scss b/app/components/ModalRoot/WalletDetails.scss index e69de29b..f9c8092e 100644 --- a/app/components/ModalRoot/WalletDetails.scss +++ b/app/components/ModalRoot/WalletDetails.scss @@ -0,0 +1,70 @@ +@import '../../variables.scss'; + +.walletdetails { +} + +.inner { + width: 75%; + margin: 0 auto; + display: flex; + flex-direction: row; +} + +.left, .right { + padding: 50px 0; + width: 100%; + + section { + position: relative; + margin: 0 20px; + padding: 20px 0; + } +} + +.left { + border-right: 1px solid $darkgrey; + + section { + border-bottom: 1px solid $main; + + h4 { + text-transform: uppercase; + letter-spacing: 1.5px; + font-size: 10px; + margin-bottom: 15px; + } + } + + h1 { + font-family: 'Roboto'; + font-weight: 300; + font-size: 24px; + } + + .qrcode { + text-align: center; + margin: 20px 0; + } + + .copytext { + font-family: 'Roboto'; + text-align: center; + font-size: 14px; + font-weight: 200; + border-radius: 7px; + background: $lightgrey; + border: 1px solid $darkestgrey; + padding: 10px; + } +} + +.right { + section { + h2 { + text-transform: uppercase; + font-family: 'Roboto'; + font-weight: 300; + font-size: 24px; + } + } +} \ No newline at end of file diff --git a/app/components/Wallet/ReceiveModal.js b/app/components/Wallet/ReceiveModal.js new file mode 100644 index 00000000..ccce08e8 --- /dev/null +++ b/app/components/Wallet/ReceiveModal.js @@ -0,0 +1,61 @@ +import React from 'react' +import PropTypes from 'prop-types' +import ReactModal from 'react-modal' +import copy from 'copy-to-clipboard' +import QRCode from 'qrcode.react' +import { showNotification } from 'notifications' +import styles from './ReceiveModal.scss' + +const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address }) => { + const customStyles = { + overlay: { + cursor: 'pointer' + }, + content: { + top: 'auto', + left: '20%', + right: '0', + bottom: 'auto', + width: '40%', + margin: '50px auto' + } + } + + const copyOnClick = data => { + copy(data) + showNotification('Noice', 'Successfully copied to clipboard') + } + + return ( + hideActivityModal()} + parentSelector={() => document.body} + style={customStyles} + > +
+
+

Node Public Key ( copyOnClick(pubkey)}>Copy)

+

{pubkey}

+
+ +
+

Deposit Address ( copyOnClick(address)}>Copy)

+

{address}

+
+ +
+
+
+ + ) +} + +ReceiveModal.propTypes = { + +} + +export default ReceiveModal diff --git a/app/components/Wallet/ReceiveModal.scss b/app/components/Wallet/ReceiveModal.scss new file mode 100644 index 00000000..960969aa --- /dev/null +++ b/app/components/Wallet/ReceiveModal.scss @@ -0,0 +1,38 @@ +@import '../../variables.scss'; + +.container { + section { + margin: 25px 0; + padding: 25px; + border-bottom: 1px solid $darkestgrey; + + h4 { + font-size: 14px; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1.5px; + margin-bottom: 10px; + + span { + color: $blue; + cursor: pointer; + } + } + + .qrcode { + text-align: center; + margin-top: 20px; + } + + p { + font-family: 'Roboto'; + text-align: center; + font-size: 14px; + font-weight: 200; + border-radius: 7px; + background: $lightgrey; + border: 1px solid $main; + padding: 10px; + } + } +} \ No newline at end of file diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index 8c1da301..0861c94c 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -1,54 +1,84 @@ -import React from 'react' +import React, { Component } from 'react' import PropTypes from 'prop-types' -import copy from 'copy-to-clipboard' -import { showNotification } from 'notifications' +import { FaQrcode } from 'react-icons/lib/fa' import CryptoIcon from 'components/CryptoIcon' import { btc, usd } from 'utils' +import ReceiveModal from './ReceiveModal' import styles from './Wallet.scss' -const Wallet = ({ ticker, currentTicker, balance, address, pubkey, showModal }) => { - const copyOnClick = data => { - copy(data) - showNotification('Noice', 'Successfully copied to clipboard') +class Wallet extends Component { + constructor(props) { + super(props) + + this.state = { + modalOpen: false + } } - return ( -
showModal('WALLET_DETAILS', {})}> -
-
-
- -
-

{btc.satoshisToBtc(parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance))} BTC

- {btc.satoshisToBtc(balance.walletBalance)} available - {btc.satoshisToBtc(balance.channelBalance)} in channels + render() { + const { + ticker, + currentTicker, + balance, + address, + info, + showModal + } = this.props + + const { modalOpen } = this.state + + return ( +
+ { + (modalOpen && + this.setState({ modalOpen: false })} + pubkey={info.data.identity_pubkey} + address={address} + />) + } +
+
+
+ +
+

{btc.satoshisToBtc(parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance))} BTC

+ {btc.satoshisToBtc(balance.walletBalance)} available + {btc.satoshisToBtc(balance.channelBalance)} in channels +
-
-
-
-
-

Node public key ( copyOnClick(pubkey)}>copy)

-

{pubkey}

-
-
-

Deposit address ( copyOnClick(address)}>copy)

-

{address}

+
+
+
this.setState({ modalOpen: true })}> + + Address +
-
- ) + ) + } } +// const Wallet = ({ ticker, currentTicker, balance, address, info, showModal }) => { +// const copyOnClick = data => { +// copy(data) +// showNotification('Noice', 'Successfully copied to clipboard') +// } + +// return ( +// ) +// } Wallet.propTypes = { ticker: PropTypes.object.isRequired, currentTicker: PropTypes.object.isRequired, balance: PropTypes.object.isRequired, address: PropTypes.string.isRequired, - pubkey: PropTypes.string.isRequired, + info: PropTypes.object.isRequired, showModal: PropTypes.func.isRequired } -export default Wallet \ No newline at end of file +export default Wallet diff --git a/app/components/Wallet/Wallet.scss b/app/components/Wallet/Wallet.scss index f7146f2c..a2d84794 100644 --- a/app/components/Wallet/Wallet.scss +++ b/app/components/Wallet/Wallet.scss @@ -4,16 +4,14 @@ cursor: pointer; background: $lightgrey; transition: background 0.25s; - - &:hover { - background: $darkgrey; - } + height: 150px; } .left, .right { display: inline-block; vertical-align: top; width: 50%; + height: 150px; .leftContent, .rightContent { padding: 25px; @@ -51,26 +49,22 @@ display: flex; flex-direction: column; justify-content: center; + align-items: center; + height: calc(100% - 50px); - .data { - margin: 10px 0; - - h2 { - margin-bottom: 5px; - text-transform: uppercase; - font-size: 10px; - letter-spacing: 1.5px; + div { + font-size: 20px; + padding: 10px 25px; + background: $main; + transition: background 0.25s; - span { - color: #1DA1F2; - // text-decoration: underline; - } + &:hover { + background: darken($main, 10%); } - p { - font-size: 14px; - padding-bottom: 5px; - border-bottom: 1px solid $main; + svg { + font-size: 35px; + margin-right: 10px; } } } diff --git a/app/routes/activity/components/components/Modal/Modal.js b/app/routes/activity/components/components/Modal/Modal.js index 58722e21..2225a420 100644 --- a/app/routes/activity/components/components/Modal/Modal.js +++ b/app/routes/activity/components/components/Modal/Modal.js @@ -11,8 +11,8 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker TRANSACTION: Transaction, PAYMENT: Payment, INVOICE: Invoice - } + const customStyles = { overlay: { cursor: 'pointer' diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js index 035ea296..1c842028 100644 --- a/app/routes/app/components/App.js +++ b/app/routes/app/components/App.js @@ -88,7 +88,7 @@ class App extends Component { currentTicker={currentTicker} balance={balance} address={address} - pubkey={info.data.identity_pubkey} + info={info} showModal={showModal} /> {children} diff --git a/app/variables.scss b/app/variables.scss index 760ee4f8..4948c218 100644 --- a/app/variables.scss +++ b/app/variables.scss @@ -12,4 +12,5 @@ $bluegrey: #555459; $green: #0bb634; $red: #ff0b00; +$blue: #007bb6; $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000); \ No newline at end of file