diff --git a/src/components/AccountPage.js b/src/components/AccountPage.js index 72eeff71..6a2356cd 100644 --- a/src/components/AccountPage.js +++ b/src/components/AccountPage.js @@ -95,7 +95,7 @@ class AccountPage extends PureComponent { - + diff --git a/src/components/ReceiveBox.js b/src/components/ReceiveBox.js index f45707e0..08e76c99 100644 --- a/src/components/ReceiveBox.js +++ b/src/components/ReceiveBox.js @@ -1,19 +1,23 @@ // @flow -import React from 'react' +import React, { PureComponent } from 'react' +import { connect } from 'react-redux' import styled from 'styled-components' +import { ipcRenderer } from 'electron' + +import type { MapStateToProps } from 'react-redux' +import type { Device } from 'types/common' + +import { getCurrentDevice } from 'reducers/devices' +import { sendEvent } from 'renderer/events' import Box from 'components/base/Box' -import QRCode from 'components/base/QRCode' -import Icon from 'components/base/Icon' +import Button from 'components/base/Button' import CopyToClipboard from 'components/base/CopyToClipboard' -import Text from 'components/base/Text' +import Icon from 'components/base/Icon' import Print from 'components/base/Print' - -type Props = { - amount?: string, - address: string, -} +import QRCode from 'components/base/QRCode' +import Text from 'components/base/Text' export const AddressBox = styled(Box).attrs({ bg: 'cream', @@ -22,7 +26,7 @@ export const AddressBox = styled(Box).attrs({ border-radius: 3px; border: 1px solid ${p => p.theme.colors.mouse}; cursor: text; - text-alignitems: center; + text-align: center; user-select: text; word-break: break-all; ` @@ -35,7 +39,7 @@ const Action = styled(Box).attrs({ fontSize: 0, })` font-weight: bold; - text-alignitems: center; + text-align: center; cursor: pointer; text-transform: uppercase; @@ -44,44 +48,130 @@ const Action = styled(Box).attrs({ } ` -const ReceiveBox = ({ amount, address }: Props) => ( - - - - - - {'Current address'} - {address} - - - ( - - - {'Copy'} - - )} - /> - ( - - - {isLoading ? '...' : 'Print'} +const mapStateToProps: MapStateToProps<*, *, *> = state => ({ + currentDevice: getCurrentDevice(state), +}) + +type Props = { + currentDevice: Device | null, + address: string, + amount?: string, + path: string, +} + +type State = { + isVerified: null | boolean, + isDisplay: boolean, +} + +const defaultState = { + isVerified: null, + isDisplay: false, +} + +class ReceiveBox extends PureComponent { + static defaultProps = { + amount: undefined, + } + + state = { + ...defaultState, + } + + componentDidMount() { + ipcRenderer.on('msg', this.handleMsgEvent) + } + + componentWillUnmount() { + ipcRenderer.removeListener('msg', this.handleMsgEvent) + this.setState({ + ...defaultState, + }) + } + + handleMsgEvent = (e, { type }) => { + if (type === 'wallet.verifyAddress.success') { + this.setState({ + isVerified: true, + }) + } + + if (type === 'wallet.verifyAddress.fail') { + this.setState({ + isVerified: false, + }) + } + } + + handleVerifyAddress = () => { + const { currentDevice, path } = this.props + + if (currentDevice !== null) { + sendEvent('usb', 'wallet.verifyAddress', { + pathDevice: currentDevice.path, + path, + }) + + this.setState({ + isDisplay: true, + }) + } + } + + render() { + const { amount, address } = this.props + const { isVerified, isDisplay } = this.state + + if (!isDisplay) { + return ( + + + + ) + } + + return ( + + + isVerified:{' '} + {isVerified === null + ? 'not yet...' + : isVerified === true ? 'ok!' : '/!\\ contact support'} + + + + + + {'Current address'} + {address} + + + ( + + + {'Copy'} + + )} + /> + ( + + + {isLoading ? '...' : 'Print'} + + )} + /> + + + {'Share'} - )} - /> - - - {'Share'} - - - -) - -ReceiveBox.defaultProps = { - amount: undefined, + + + ) + } } -export default ReceiveBox +export default connect(mapStateToProps, null)(ReceiveBox) diff --git a/src/components/SelectAccount/stories.js b/src/components/SelectAccount/stories.js index fe379933..d9dc4bbb 100644 --- a/src/components/SelectAccount/stories.js +++ b/src/components/SelectAccount/stories.js @@ -17,6 +17,7 @@ const accounts = [...Array(20)].map(() => ({ address: chance.string(), balance: chance.floating({ min: 0, max: 20 }), currentIndex: chance.integer({ min: 0, max: 20 }), + path: '', transactions: [], }, })) diff --git a/src/components/base/Box/index.js b/src/components/base/Box/index.js index e4b045af..2f1f492a 100644 --- a/src/components/base/Box/index.js +++ b/src/components/base/Box/index.js @@ -56,11 +56,11 @@ const RawCard = styled(Box).attrs({ bg: 'white', p: 3, boxShadow: 0, borderRadiu export const Card = ({ title, ...props }: { title?: string }) => { if (title) { return ( - + {title} - + ) } diff --git a/src/components/modals/AddAccount/index.js b/src/components/modals/AddAccount/index.js index e074c907..c8e1745b 100644 --- a/src/components/modals/AddAccount/index.js +++ b/src/components/modals/AddAccount/index.js @@ -183,7 +183,7 @@ class AddAccountModal extends PureComponent { } sendEvent('usb', 'wallet.getAccounts', { - path: currentDevice.path, + pathDevice: currentDevice.path, wallet: inputValue.wallet, currentAccounts: accounts.map(acc => acc.id), }) diff --git a/src/components/modals/Receive.js b/src/components/modals/Receive.js index 962f4d26..eb9dd27b 100644 --- a/src/components/modals/Receive.js +++ b/src/components/modals/Receive.js @@ -62,6 +62,7 @@ class ReceiveModal extends PureComponent { onHide={this.handleHide} render={({ data, onClose }) => { const account = this.getAccount(data) + const accountData = get(account, 'data', {}) return ( @@ -72,21 +73,24 @@ class ReceiveModal extends PureComponent { - {account && - account.data && ( - - - - - - - - )} + {accountData && ( + + + + + + + + )}