Jack Mallers
7 years ago
33 changed files with 636 additions and 210 deletions
@ -0,0 +1,42 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import QRCode from 'qrcode.react' |
|||
import styles from './WalletDetails.scss' |
|||
|
|||
const WalletDetails = ({ info, address }) => ( |
|||
<div className={styles.walletdetails}> |
|||
<div className={styles.inner}> |
|||
<div className={styles.left}> |
|||
<section> |
|||
<h4>Node Alias</h4> |
|||
<h1>Testing</h1> |
|||
</section> |
|||
<section> |
|||
<h4>Node Public Key</h4> |
|||
<p className={styles.copytext}>{info.data.identity_pubkey}</p> |
|||
</section> |
|||
<section> |
|||
<h4>Deposit Address</h4> |
|||
<div className={styles.qrcode}> |
|||
<QRCode value={address} /> |
|||
</div> |
|||
<p className={styles.copytext}>{address}</p> |
|||
</section> |
|||
</div> |
|||
<div className={styles.right}> |
|||
<section> |
|||
<h2> |
|||
Network |
|||
</h2> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
|
|||
WalletDetails.propTypes = { |
|||
info: PropTypes.object.isRequired, |
|||
address: PropTypes.string.isRequired |
|||
} |
|||
|
|||
export default WalletDetails |
|||
@ -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; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,64 @@ |
|||
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 ( |
|||
<ReactModal |
|||
isOpen={isOpen} |
|||
ariaHideApp |
|||
shouldCloseOnOverlayClick |
|||
contentLabel='No Overlay Click Modal' |
|||
onRequestClose={() => hideActivityModal()} |
|||
parentSelector={() => document.body} |
|||
style={customStyles} |
|||
> |
|||
<div className={styles.container}> |
|||
<section> |
|||
<h4>Node Public Key (<span onClick={() => copyOnClick(pubkey)}>Copy</span>)</h4> |
|||
<p>{pubkey}</p> |
|||
</section> |
|||
|
|||
<section> |
|||
<h4>Deposit Address (<span onClick={() => copyOnClick(address)}>Copy</span>)</h4> |
|||
<p>{address}</p> |
|||
<div className={styles.qrcode}> |
|||
<QRCode value={address} /> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
</ReactModal> |
|||
) |
|||
} |
|||
|
|||
ReceiveModal.propTypes = { |
|||
isOpen: PropTypes.bool.isRequired, |
|||
hideActivityModal: PropTypes.func.isRequired, |
|||
pubkey: PropTypes.string.isRequired, |
|||
address: PropTypes.string.isRequired |
|||
} |
|||
|
|||
export default ReceiveModal |
|||
@ -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; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,71 @@ |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { FaQrcode } from 'react-icons/lib/fa' |
|||
import CryptoIcon from 'components/CryptoIcon' |
|||
import { btc } from 'utils' |
|||
import ReceiveModal from './ReceiveModal' |
|||
import styles from './Wallet.scss' |
|||
|
|||
class Wallet extends Component { |
|||
constructor(props) { |
|||
super(props) |
|||
|
|||
this.state = { |
|||
modalOpen: false |
|||
} |
|||
} |
|||
|
|||
render() { |
|||
const { |
|||
ticker, |
|||
balance, |
|||
address, |
|||
info |
|||
} = this.props |
|||
|
|||
const { modalOpen } = this.state |
|||
|
|||
return ( |
|||
<div className={styles.wallet}> |
|||
{ |
|||
(modalOpen && |
|||
<ReceiveModal |
|||
isOpen={modalOpen} |
|||
hideActivityModal={() => this.setState({ modalOpen: false })} |
|||
pubkey={info.data.identity_pubkey} |
|||
address={address} |
|||
/>) |
|||
} |
|||
<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 onClick={() => this.setState({ modalOpen: true })}> |
|||
<FaQrcode /> |
|||
Address |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
Wallet.propTypes = { |
|||
ticker: PropTypes.object.isRequired, |
|||
balance: PropTypes.object.isRequired, |
|||
address: PropTypes.string.isRequired, |
|||
info: PropTypes.object.isRequired |
|||
} |
|||
|
|||
export default Wallet |
|||
@ -0,0 +1,72 @@ |
|||
@import '../../variables.scss'; |
|||
|
|||
.wallet { |
|||
cursor: pointer; |
|||
background: $lightgrey; |
|||
transition: background 0.25s; |
|||
height: 150px; |
|||
} |
|||
|
|||
.left, .right { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
width: 50%; |
|||
height: 150px; |
|||
|
|||
.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; |
|||
align-items: center; |
|||
height: calc(100% - 50px); |
|||
|
|||
div { |
|||
font-size: 20px; |
|||
padding: 10px 25px; |
|||
background: $main; |
|||
transition: background 0.25s; |
|||
|
|||
&:hover { |
|||
background: darken($main, 10%); |
|||
} |
|||
|
|||
svg { |
|||
font-size: 35px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,3 @@ |
|||
import Wallet from './Wallet' |
|||
|
|||
export default Wallet |
|||
Loading…
Reference in new issue