Skip to content

Commit

Permalink
WIP for a new Receive Modal / Send Modal / Initial work for token bal…
Browse files Browse the repository at this point in the history
…ances
  • Loading branch information
evgenyboxer committed Nov 19, 2017
1 parent cc2b1f5 commit 856318c
Show file tree
Hide file tree
Showing 35 changed files with 475 additions and 217 deletions.
22 changes: 5 additions & 17 deletions __tests__/components/__snapshots__/Logout.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,18 @@
exports[`Logout should render without crashing 1`] = `
<div
className="logout"
data-for="logoutTip"
data-tip={true}
id="logout"
onClick={[Function]}
>
<Link
replace={false}
to=""
>
<MdPowerSettingsNew />
<Tooltip
title="Logout"
>
<MdPowerSettingsNew />
</Tooltip>
</Link>
<ReactTooltip
class="solidTip"
effect="solid"
id="logoutTip"
insecure={true}
place="bottom"
resizeHide={true}
type="dark"
wrapper="div"
>
<span>
Logout
</span>
</ReactTooltip>
</div>
`;
53 changes: 53 additions & 0 deletions app/components/CopyToClipboard/CopyToClipboard.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
// @flow
import React, { Component } from 'react'
import styles from './CopyToClipboard.scss'
import Tooltip from '../Tooltip'
import { clipboard } from 'electron'
import Copy from 'react-icons/lib/md/content-copy'
import CheckCircle from 'react-icons/lib/md/check-circle'
import classNames from 'classnames'
import { ONE_SECOND_MS } from '../../core/time'

type Props = {
text: string,
tooltip?: string,
className?: string,
style?: Object
}

type State = {
copyIconShown: boolean
}

class CopyToClipboard extends Component<Props, State> {
state = {
copyIconShown: true
}

copyText = (text: string) => {
clipboard.writeText(text)
this.setState({
copyIconShown: false
})
setTimeout(() => {
this.setState({
copyIconShown: true
})
}, ONE_SECOND_MS)
}

render () {
const { text, tooltip = '', className = '', style } = this.props
const { copyIconShown } = this.state
return (
<span
onClick={() => this.copyText(text)}
className={classNames(styles.copyKey, className)}
style={style}
>
{tooltip ? <Tooltip title={tooltip}>{copyIconShown ? <Copy /> : <CheckCircle />}</Tooltip> : <Copy />}
</span>)
}
}

export default CopyToClipboard
8 changes: 8 additions & 0 deletions app/components/CopyToClipboard/CopyToClipboard.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.copyKey {
margin-left: 5px;
color: #000;
&:hover {
opacity: .7;
cursor: pointer;
}
}
1 change: 1 addition & 0 deletions app/components/CopyToClipboard/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './CopyToClipboard'
24 changes: 5 additions & 19 deletions app/components/DisplayWalletKeys/DisplayWalletKeys.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import QRCode from 'qrcode/lib/browser'
import { clipboard } from 'electron'
import Copy from 'react-icons/lib/md/content-copy'
import ReactTooltip from 'react-tooltip'
import CopyToClipboard from '../CopyToClipboard'

type Props = {
resetKey: Function,
Expand Down Expand Up @@ -59,23 +57,23 @@ class DisplayWalletKeys extends Component<Props, State> {
<div className='keyListItem'>
<span className='label'>Passphrase:</span>
<span className='key'>{passphrase}</span>
<span className='copyKey' onClick={() => clipboard.writeText(passphrase)}><Copy data-tip data-for='copyPassphraseTip' /></span>
<CopyToClipboard text={passphrase} tooltip='Copy Passphrase' />
</div>
<br />
<div className='keyListItem'>
<span className='label'>Public Address:</span>
<span className='key'>{address}</span>
<span className='copyKey' onClick={() => clipboard.writeText(address)}><Copy data-tip data-for='copyPublicKeyTip' /></span>
<CopyToClipboard text={address} tooltip='Copy Public Key' />
</div>
<div className='keyListItem'>
<span className='label'>Encrypted key:</span>
<span className='key'>{passphraseKey}</span>
<span className='copyKey' onClick={() => clipboard.writeText(passphraseKey)}><Copy data-tip data-for='copyPassphraseKeyTip' /></span>
<CopyToClipboard text={passphraseKey} tooltip='Copy Passphrase Encrypted Key' />
</div>
<div className='keyListItem'>
<span className='label'>Private Key:</span>
<span className='key'>{wif}</span>
<span className='copyKey' onClick={() => clipboard.writeText(wif)}><Copy data-tip data-for='copyPrivateKeyTip' /></span>
<CopyToClipboard text={passphraseKey} tooltip='Copy Private Key' />
</div>
</div>
<div className='saveKey'>
Expand All @@ -84,18 +82,6 @@ class DisplayWalletKeys extends Component<Props, State> {
</div>
<Link onClick={() => resetKey()} to='/'><button>Back</button></Link>
<button onClick={() => window.print()}>Print</button>
<ReactTooltip class='solidTip' id='copyPublicKeyTip' place='bottom' type='dark' effect='solid'>
<span>Copy Public Key</span>
</ReactTooltip>
<ReactTooltip class='solidTip' id='copyPrivateKeyTip' place='bottom' type='dark' effect='solid'>
<span>Copy Private Key</span>
</ReactTooltip>
<ReactTooltip class='solidTip' id='copyPassphraseTip' place='bottom' type='dark' effect='solid'>
<span>Copy Passphrase</span>
</ReactTooltip>
<ReactTooltip class='solidTip' id='copyPassphraseKeyTip' place='bottom' type='dark' effect='solid'>
<span>Copy Passphrase Encrypted Key</span>
</ReactTooltip>
</div>
)
}
Expand Down
9 changes: 3 additions & 6 deletions app/components/Logout/Logout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import React from 'react'
import { Link } from 'react-router-dom'
import Power from 'react-icons/lib/md/power-settings-new'
import ReactTooltip from 'react-tooltip'
import Tooltip from '../../components/Tooltip'
import { ROUTES } from '../../core/constants'
import styles from './Logout.scss'

Expand All @@ -11,11 +11,8 @@ type Props = {
}

const Logout = ({ logout }: Props) =>
<div id='logout' className={styles.logout} data-tip data-for='logoutTip' onClick={logout}>
<Link to={ROUTES.HOME}><Power /></Link>
<ReactTooltip class='solidTip' id='logoutTip' place='bottom' type='dark' effect='solid'>
<span>Logout</span>
</ReactTooltip>
<div id='logout' className={styles.logout} onClick={logout}>
<Link to={ROUTES.HOME}><Tooltip title='Logout'><Power /></Tooltip></Link>
</div>

export default Logout
6 changes: 3 additions & 3 deletions app/components/Logout/Logout.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@import '../../styles/variables';

.logout {
position: absolute;
font-size: 1.5em;
right: 20px;
top: 3px;
cursor: pointer;
padding-left: 38px;
position: relative;
top: -10px;
color: $default-text;
a {
font-size: inherit;
Expand Down
6 changes: 4 additions & 2 deletions app/components/Modals/BaseModal/BaseModal.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,11 @@ type Props = {
style: {
content: Object,
overlay: Object
}
},
onAfterOpen?: Function
}

const BaseModal = ({ hideModal, title, children, width, height, className, style }: Props) => (
const BaseModal = ({ hideModal, title, children, width, height, className, style, onAfterOpen }: Props) => (
<ReactModal
isOpen
onRequestClose={hideModal}
Expand All @@ -40,6 +41,7 @@ const BaseModal = ({ hideModal, title, children, width, height, className, style
}
}}
className={className}
onAfterOpen={onAfterOpen}
>
<div className={styles.modalHeader}>
<div className={styles.modalHeaderTitle}>{title}</div>
Expand Down
49 changes: 49 additions & 0 deletions app/components/Modals/ReceiveModal/ReceiveModal.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// @flow
import React, { Component } from 'react'
import BaseModal from '../BaseModal'
import styles from './ReceiveModal.scss'
import QRCode from 'qrcode/lib/browser'
import CopyToClipboard from '../../CopyToClipboard'

type Props = {
address: string,
hideModal: Function,
}

class ReceiveModal extends Component<Props> {
canvas: ?HTMLCanvasElement

render () {
const { hideModal, address } = this.props
return (
<BaseModal
onAfterOpen={() => {
QRCode.toCanvas(this.canvas, address, { version: 5 }, (err) => {
if (err) console.log(err)
})
}}
title='NEO/GAS Wallet Address'
hideModal={hideModal}
style={{
content: {
width: '420px',
height: '390px'
}
}}
>
<div className={styles.textContainer}>
<div>Your Public Neo Address:</div>
<div className={styles.address}>
<strong>{address}</strong>
<CopyToClipboard text={address} tooltip='Copy Public Address' />
</div>
<div className={styles.canvas}><canvas ref={(node) => { this.canvas = node }} /></div>
<div>Only send NEO/GAS to this address</div>
<div>Sending any other digital asset will result in permanent loss.</div>
</div>
</BaseModal>
)
}
}

export default ReceiveModal
8 changes: 8 additions & 0 deletions app/components/Modals/ReceiveModal/ReceiveModal.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.textContainer {
padding: 20px 0;
}

.canvas {
margin: 10px 0;
text-align: center;
}
1 change: 1 addition & 0 deletions app/components/Modals/ReceiveModal/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './ReceiveModal'
73 changes: 73 additions & 0 deletions app/components/Modals/SendModal/SendModal.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
// @flow
import React, { Component } from 'react'
import BaseModal from '../BaseModal'
import styles from './SendModal.scss'

type Props = {
neo: number,
gas: number,
hideModal: Function,
}

class SendModal extends Component<Props> {
canvas: ?HTMLCanvasElement
state = {
sendAmount: '',
sendAddress: '',
sendAsset: ''
}

render () {
const { hideModal, neo, gas } = this.props
const { sendAddress, sendAmount, sendAsset } = this.state

return (
<BaseModal
title='Send'
hideModal={hideModal}
style={{
content: {
width: '420px',
height: '390px'
}
}}
>
<div className={styles.textContainer}>
<div id='sendAddress' className={styles.row}>
<label className={styles.label}>Address:</label>
<input
autoFocus
type='text'
placeholder='Where to send the asset (address)'
value={sendAddress}
onChange={(e) => this.setState({ sendAddress: e.target.value })}
/>
</div>
<div id='sendAmount' className={styles.row}>
<label className={styles.label}>Amount:</label>
<input
type='text'
value={sendAmount}
placeholder='Amount'
onChange={(e) => this.setState({ sendAmount: e.target.value })}
/>
</div>
<div id='sendAmount' className={styles.row}>
<label className={styles.label}>Amount:</label>
<div className={styles.sendAmount}>
<select className={styles.sendAmountSelect}>
<option value='NEO'>NEO</option>
<option value='GAS'>GAS</option>
<option value='RPX'>RPX</option>
</select>
<div>{neo} NEO</div>
</div>
</div>
<button className={styles.sendButton} id='doSend' onClick={this.openAndValidate}>Send Asset</button>
</div>
</BaseModal>
)
}
}

export default SendModal
28 changes: 28 additions & 0 deletions app/components/Modals/SendModal/SendModal.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.textContainer {
}

.canvas {
margin: 10px 0;
text-align: center;
}

.row {
display: flex;
flex-direction: column;
}

.label {
padding: 10px 0;
}

.sendAmount {
display: flex;
}

.sendAmountSelect {
margin-right: 10px;
}

.sendButton {
margin-top: 20px;
}
1 change: 1 addition & 0 deletions app/components/Modals/SendModal/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './SendModal'
3 changes: 0 additions & 3 deletions app/components/PriceDisplay/PriceDisplay.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
@import '../../styles/variables';

.container {
position: absolute;
font-size: .8em;
opacity: 0.6;
right: 463px;
top: 13px;
}

.label {
Expand Down
Loading

0 comments on commit 856318c

Please sign in to comment.