From 7864c5d7bf32d6565929c2ed6609d6ee9b892b18 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Thu, 16 Aug 2018 15:56:39 +0200 Subject: [PATCH] Refactored whole folder structure --- .../components/wallet/account/AccountTabs.js | 105 --------- .../wallet/account/SelectedAccount.js | 114 ---------- .../wallet/account/receive/Receive.js | 101 --------- .../wallet/account/receive/index.js | 45 ---- .../wallet/account/send/SendForm.js | 207 ------------------ .../components/wallet/account/send/index.js | 47 ---- .../wallet/account/sign/SignVerify.js | 66 ------ .../wallet/account/summary/Summary.js | 120 ---------- .../wallet/account/summary/SummaryDetails.js | 75 ------- .../wallet/account/summary/SummaryTokens.js | 54 ----- .../wallet/account/summary/index.js | 52 ----- src/js/components/wallet/index.js | 55 ----- src/js/support/ErrorBoundary.js | 1 + .../components/Receive/Container.js | 2 +- .../Account => }/components/Receive/index.js | 0 .../components/SelectedAccount/index.js | 0 .../Account => }/components/Send/Container.js | 2 +- .../Send/components}/AdvancedForm.js | 0 .../Send/components}/CoinSelectOption.js | 0 .../components/Send/components}/FeeSelect.js | 0 .../Send/components}/PendingTransactions.js | 0 .../Account => }/components/Send/index.js | 0 .../Account => }/components/Sign/index.js | 0 .../components/Summary/Container.js | 0 .../Summary/components/Details/index.js | 0 .../Summary/components/Tokens/index.js | 0 .../Account => }/components/Summary/index.js | 0 .../Account => }/components/Tabs/index.js | 0 src/js/views/Device/index.js | 56 +++++ .../Send/components/AdvancedForm.js | 191 ---------------- .../Send/components/CoinSelectOption.js | 51 ----- .../components/Send/components/FeeSelect.js | 61 ------ .../Send/components/PendingTransactions.js | 95 -------- src/js/views/index.js | 21 +- 34 files changed, 71 insertions(+), 1450 deletions(-) delete mode 100644 src/js/components/wallet/account/AccountTabs.js delete mode 100644 src/js/components/wallet/account/SelectedAccount.js delete mode 100644 src/js/components/wallet/account/receive/Receive.js delete mode 100644 src/js/components/wallet/account/receive/index.js delete mode 100644 src/js/components/wallet/account/send/SendForm.js delete mode 100644 src/js/components/wallet/account/send/index.js delete mode 100644 src/js/components/wallet/account/sign/SignVerify.js delete mode 100644 src/js/components/wallet/account/summary/Summary.js delete mode 100644 src/js/components/wallet/account/summary/SummaryDetails.js delete mode 100644 src/js/components/wallet/account/summary/SummaryTokens.js delete mode 100644 src/js/components/wallet/account/summary/index.js delete mode 100644 src/js/components/wallet/index.js rename src/js/views/Device/{views/Account => }/components/Receive/Container.js (97%) rename src/js/views/Device/{views/Account => }/components/Receive/index.js (100%) rename src/js/views/Device/{views/Account => }/components/SelectedAccount/index.js (100%) rename src/js/views/Device/{views/Account => }/components/Send/Container.js (97%) rename src/js/{components/wallet/account/send => views/Device/components/Send/components}/AdvancedForm.js (100%) rename src/js/{components/wallet/account/send => views/Device/components/Send/components}/CoinSelectOption.js (100%) rename src/js/{components/wallet/account/send => views/Device/components/Send/components}/FeeSelect.js (100%) rename src/js/{components/wallet/account/send => views/Device/components/Send/components}/PendingTransactions.js (100%) rename src/js/views/Device/{views/Account => }/components/Send/index.js (100%) rename src/js/views/Device/{views/Account => }/components/Sign/index.js (100%) rename src/js/views/Device/{views/Account => }/components/Summary/Container.js (100%) rename src/js/views/Device/{views/Account => }/components/Summary/components/Details/index.js (100%) rename src/js/views/Device/{views/Account => }/components/Summary/components/Tokens/index.js (100%) rename src/js/views/Device/{views/Account => }/components/Summary/index.js (100%) rename src/js/views/Device/{views/Account => }/components/Tabs/index.js (100%) delete mode 100644 src/js/views/Device/views/Account/components/Send/components/AdvancedForm.js delete mode 100644 src/js/views/Device/views/Account/components/Send/components/CoinSelectOption.js delete mode 100644 src/js/views/Device/views/Account/components/Send/components/FeeSelect.js delete mode 100644 src/js/views/Device/views/Account/components/Send/components/PendingTransactions.js diff --git a/src/js/components/wallet/account/AccountTabs.js b/src/js/components/wallet/account/AccountTabs.js deleted file mode 100644 index f8b85375..00000000 --- a/src/js/components/wallet/account/AccountTabs.js +++ /dev/null @@ -1,105 +0,0 @@ -/* @flow */ - - -import React, { Component } from 'react'; -import { NavLink } from 'react-router-dom'; - - -type Props = { - pathname: string; -} -type State = { - style: { - width: number, - left: number - }; -} - -class Indicator extends Component { - reposition: () => void; - - state: State; - - constructor(props: Props) { - super(props); - - this.state = { - style: { - width: 0, - left: 0, - }, - }; - - this.reposition = this.reposition.bind(this); - } - - handleResize() { - this.reposition(); - } - - componentDidMount() { - this.reposition(); - window.addEventListener('resize', this.reposition, false); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.reposition, false); - } - - componentDidUpdate(newProps: Props) { - this.reposition(); - } - - reposition() { - const tabs = document.querySelector('.account-tabs'); - if (!tabs) return; - const active = tabs.querySelector('.active'); - if (!active) return; - const bounds = active.getBoundingClientRect(); - - const left = bounds.left - tabs.getBoundingClientRect().left; - - if (this.state.style.left !== left) { - this.setState({ - style: { - width: bounds.width, - left, - }, - }); - } - } - - render() { - return ( -
{ this.props.pathname }
- ); - } -} - -const AccountTabs = (props: any) => { - const urlParams = props.match.params; - const basePath = `/device/${urlParams.device}/network/${urlParams.network}/account/${urlParams.account}`; - - return ( -
- {/* - History - */} - - Summary - - - Send - - - Receive - - {/* - Sign & Verify - */} - -
- ); -}; - -export default AccountTabs; \ No newline at end of file diff --git a/src/js/components/wallet/account/SelectedAccount.js b/src/js/components/wallet/account/SelectedAccount.js deleted file mode 100644 index 1fdd6c92..00000000 --- a/src/js/components/wallet/account/SelectedAccount.js +++ /dev/null @@ -1,114 +0,0 @@ -/* @flow */ - - -import * as React from 'react'; -import { Notification } from 'components/common/Notification'; - -import type { - State, TrezorDevice, Action, ThunkAction, -} from 'flowtype'; -import type { Account } from 'reducers/AccountsReducer'; -import type { Discovery } from 'reducers/DiscoveryReducer'; - -export type StateProps = { - className: string; - selectedAccount: $ElementType, - wallet: $ElementType, - children?: React.Node -} - -export type DispatchProps = { - -} - -export type Props = StateProps & DispatchProps; - -const SelectedAccount = (props: Props) => { - const device = props.wallet.selectedDevice; - if (!device || !device.state) { - return (
); - } - - const accountState = props.selectedAccount; - - const { - account, - discovery, - } = accountState; - - // account not found (yet). checking why... - if (!account) { - if (!discovery || discovery.waitingForDevice) { - if (device.connected) { - // case 1: device is connected but discovery not started yet (probably waiting for auth) - if (device.available) { - return ( -
- -
- ); - } - // case 2: device is unavailable (created with different passphrase settings) account cannot be accessed - return ( -
- -
- ); - } - // case 3: device is disconnected - return ( -
- -
- ); - } if (discovery.waitingForBackend) { - // case 4: backend is not working - return ( -
- -
- ); - } if (discovery.completed) { - // case 5: account not found and discovery is completed - return ( -
- -
- ); - } - // case 6: discovery is not completed yet - return ( -
- -
- ); - } - - let notification: ?React$Element = null; - if (!device.connected) { - notification = ; - } else if (!device.available) { - notification = ; - } - - if (discovery && !discovery.completed && !notification) { - notification = ; - } - - return ( -
- { notification } - { props.children } -
- ); -}; - -export default SelectedAccount; \ No newline at end of file diff --git a/src/js/components/wallet/account/receive/Receive.js b/src/js/components/wallet/account/receive/Receive.js deleted file mode 100644 index 4873496c..00000000 --- a/src/js/components/wallet/account/receive/Receive.js +++ /dev/null @@ -1,101 +0,0 @@ -/* @flow */ -import React, { Component } from 'react'; -import styled from 'styled-components'; -import { H2 } from 'components/common/Heading'; - -import Tooltip from 'rc-tooltip'; -import { QRCode } from 'react-qr-svg'; - -import { Notification } from 'components/common/Notification'; -import SelectedAccount from '../SelectedAccount'; - -import type { Props } from './index'; - -const Wrapper = styled.div``; -const StyledH2 = styled(H2)` - padding: 20px 48px; -`; - -const Receive = (props: Props) => { - const device = props.wallet.selectedDevice; - const { - account, - network, - discovery, - } = props.selectedAccount; - - if (!device || !account || !discovery) return null; - - const { - addressVerified, - addressUnverified, - } = props.receive; - - let qrCode = null; - let address = `${account.address.substring(0, 20)}...`; - let className = 'address hidden'; - let button = ( - - ); - - if (addressVerified || addressUnverified) { - qrCode = ( - - ); - address = account.address; - className = addressUnverified ? 'address unverified' : 'address'; - - const tooltip = addressUnverified - ? (
Unverified address.
{ device.connected && device.available ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.' }
) - : (
{ device.connected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.' }
); - - button = ( - } - overlay={tooltip} - placement="bottomRight" - > - - - ); - } - - let ver = null; - if (props.modal.opened && props.modal.windowType === 'ButtonRequest_Address') { - className = 'address verifying'; - address = account.address; - ver = (
Confirm address on TREZOR
); - button = (
{ account.network } account #{ (account.index + 1) }
); - } - - return ( - - Receive Ethereum or tokens -
- { ver } -
- { address } -
- { button } -
- { qrCode } - - ); -}; - -export default (props: Props) => ( - - - -); \ No newline at end of file diff --git a/src/js/components/wallet/account/receive/index.js b/src/js/components/wallet/account/receive/index.js deleted file mode 100644 index 6285193f..00000000 --- a/src/js/components/wallet/account/receive/index.js +++ /dev/null @@ -1,45 +0,0 @@ -/* @flow */ - - -import React, { Component, PropTypes } from 'react'; -import { bindActionCreators } from 'redux'; -import { connect } from 'react-redux'; - -import { default as ReceiveActions } from 'actions/ReceiveActions'; -import * as TokenActions from 'actions/TokenActions'; -import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; -import type { State, Dispatch } from 'flowtype'; -import Receive from './Receive'; - -import type { - StateProps as BaseStateProps, - DispatchProps as BaseDispatchProps, -} from '../SelectedAccount'; - -type OwnProps = { } - -type StateProps = BaseStateProps & { - receive: $ElementType, - modal: $ElementType, -} - -type DispatchProps = BaseDispatchProps & { - showAddress: typeof ReceiveActions.showAddress -}; - -export type Props = StateProps & BaseStateProps & DispatchProps & BaseDispatchProps; - -const mapStateToProps: MapStateToProps = (state: State, own: OwnProps): StateProps => ({ - className: 'receive', - selectedAccount: state.selectedAccount, - wallet: state.wallet, - - receive: state.receive, - modal: state.modal, -}); - -const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ - showAddress: bindActionCreators(ReceiveActions.showAddress, dispatch), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(Receive); \ No newline at end of file diff --git a/src/js/components/wallet/account/send/SendForm.js b/src/js/components/wallet/account/send/SendForm.js deleted file mode 100644 index 5d9ca9ce..00000000 --- a/src/js/components/wallet/account/send/SendForm.js +++ /dev/null @@ -1,207 +0,0 @@ -/* @flow */ - -import React, { Component } from 'react'; -import styled from 'styled-components'; -import Select from 'react-select'; -import { H2 } from 'components/common/Heading'; -import { findAccountTokens } from 'reducers/TokensReducer'; -import { calculate, validation } from 'actions/SendFormActions'; -import { findToken } from 'reducers/TokensReducer'; -import type { Token } from 'flowtype'; -import AdvancedForm from './AdvancedForm'; -import PendingTransactions from './PendingTransactions'; -import { FeeSelectValue, FeeSelectOption } from './FeeSelect'; -import SelectedAccount from '../SelectedAccount'; - - -import type { Props } from './index'; - -export default class SendContainer extends Component { - componentWillReceiveProps(newProps: Props) { - calculate(this.props, newProps); - validation(newProps); - - this.props.saveSessionStorage(); - } - - render() { - return ( - - - - ); - } -} - -const StyledH2 = styled(H2)` - padding: 20px 48px; -`; - -const Send = (props: Props) => { - const device = props.wallet.selectedDevice; - const { - account, - network, - discovery, - tokens, - } = props.selectedAccount; - - if (!device || !account || !discovery || !network) return null; - - const { - address, - amount, - setMax, - networkSymbol, - currency, - feeLevels, - selectedFeeLevel, - gasPriceNeedsUpdate, - total, - errors, - warnings, - infos, - advanced, - data, - sending, - } = props.sendForm; - - const { - onAddressChange, - onAmountChange, - onSetMax, - onCurrencyChange, - onFeeLevelChange, - updateFeeLevels, - onSend, - } = props.sendFormActions; - - const fiatRate = props.fiat.find(f => f.network === network); - - const tokensSelectData = tokens.map(t => ({ value: t.symbol, label: t.symbol })); - tokensSelectData.unshift({ value: network.symbol, label: network.symbol }); - - const setMaxClassName: string = setMax ? 'set-max enabled' : 'set-max'; - - let updateFeeLevelsButton = null; - if (gasPriceNeedsUpdate) { - updateFeeLevelsButton = ( - Recommended fees updated. Click here to use them - ); - } - - let addressClassName: ?string; - if (errors.address) { - addressClassName = 'not-valid'; - } else if (warnings.address) { - addressClassName = 'warning'; - } else if (address.length > 0) { - addressClassName = 'valid'; - } - - let buttonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending; - let buttonLabel: string = 'Send'; - if (networkSymbol !== currency && amount.length > 0 && !errors.amount) { - buttonLabel += ` ${amount} ${currency.toUpperCase()}`; - } else if (networkSymbol === currency && total !== '0') { - buttonLabel += ` ${total} ${network.symbol}`; - } - - if (!device.connected) { - buttonLabel = 'Device is not connected'; - buttonDisabled = true; - } else if (!device.available) { - buttonLabel = 'Device is unavailable'; - buttonDisabled = true; - } else if (!discovery.completed) { - buttonLabel = 'Loading accounts'; - buttonDisabled = true; - } - - return ( -
- Send Ethereum or tokens -
- - onAddressChange(event.target.value)} - /> - - { errors.address ? ({ errors.address }) : null } - { warnings.address ? ({ warnings.address }) : null } - { infos.address ? ({ infos.address }) : null } -
- -
- -
- onAmountChange(event.target.value)} - /> - - Set max - - 0} - optionClassName="fee-option" - options={feeLevels} - /> -
- - - - - - - -
- ); -}; diff --git a/src/js/components/wallet/account/send/index.js b/src/js/components/wallet/account/send/index.js deleted file mode 100644 index c37f2556..00000000 --- a/src/js/components/wallet/account/send/index.js +++ /dev/null @@ -1,47 +0,0 @@ -/* @flow */ - - -import * as React from 'react'; -import { bindActionCreators } from 'redux'; -import { connect } from 'react-redux'; - -import { default as SendFormActions } from 'actions/SendFormActions'; -import * as SessionStorageActions from 'actions/SessionStorageActions'; -import type { MapStateToProps, MapDispatchToProps } from 'react-redux'; -import type { State, Dispatch } from 'flowtype'; -import SendForm from './SendForm'; - -import type { StateProps as BaseStateProps, DispatchProps as BaseDispatchProps } from '../SelectedAccount'; - -type OwnProps = { } - -export type StateProps = BaseStateProps & { - sendForm: $ElementType, - fiat: $ElementType, - localStorage: $ElementType, - children?: React.Node; -} - -export type DispatchProps = BaseDispatchProps & { - sendFormActions: typeof SendFormActions, - saveSessionStorage: typeof SessionStorageActions.save -} - -export type Props = StateProps & BaseStateProps & DispatchProps & BaseDispatchProps; - -const mapStateToProps: MapStateToProps = (state: State, own: OwnProps): StateProps => ({ - className: 'send-from', - selectedAccount: state.selectedAccount, - wallet: state.wallet, - - sendForm: state.sendForm, - fiat: state.fiat, - localStorage: state.localStorage, -}); - -const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ - sendFormActions: bindActionCreators(SendFormActions, dispatch), - saveSessionStorage: bindActionCreators(SessionStorageActions.save, dispatch), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(SendForm); \ No newline at end of file diff --git a/src/js/components/wallet/account/sign/SignVerify.js b/src/js/components/wallet/account/sign/SignVerify.js deleted file mode 100644 index 566cfa69..00000000 --- a/src/js/components/wallet/account/sign/SignVerify.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; - -import { H2 } from 'components/common/Heading'; -import colors from 'config/colors'; - -const Wrapper = styled.div` - display: flex; - flex: 1; - flex-direction: row; - background: ${colors.WHITE}; - padding: 50px; -`; - -const StyledH2 = styled(H2)` - padding-bottom: 10px; -`; - -const Column = styled.div` - display: flex; - flex: 1; - flex-direction: column; -`; - -const Sign = styled(Column)``; - -const Verify = styled(Column)` - padding-left: 20px; -`; - -const Label = styled.div` - color: ${colors.LABEL}; - padding: 5px 0px; -`; - -const Textarea = styled.textarea` - resize: vertical; - width: 100%; -`; - -const Input = styled.input``; - -const SignVerify = () => ( - - - Sign message - -