Refactor UI

This commit is contained in:
Germán Martínez 2019-09-02 09:55:28 +02:00
parent e0544241ae
commit b471a5e056
8 changed files with 158 additions and 138 deletions

View File

@ -36,7 +36,7 @@ type TxStateType =
| Object
const styles = () => ({
smallerModalWindow: {
scalableModalWindow: {
height: 'auto',
position: 'static',
},
@ -57,30 +57,33 @@ const Send = ({
}: Props) => {
const [activeScreen, setActiveScreen] = useState<ActiveScreen>(activeScreenType || 'chooseTxType')
const [tx, setTx] = useState<TxStateType>({})
const smallerModalSize = activeScreen === 'chooseTxType'
const handleTxCreation = (txInfo) => {
setActiveScreen('reviewTx')
setTx(txInfo)
}
const handleCustomTxCreation = (customTxInfo) => {
setActiveScreen('reviewCustomTx')
setTx(customTxInfo)
}
useEffect(() => {
setActiveScreen(activeScreenType || 'chooseTxType')
setTx({})
}, [isOpen])
const scalableModalSize = activeScreen === 'chooseTxType' || activeScreen === 'sendCustomTx'
const handleTxCreation = (txInfo) => {
setActiveScreen('reviewTx')
setTx(txInfo)
}
const handleCustomTxCreation = (customTxInfo) => {
setActiveScreen('reviewCustomTx')
setTx(customTxInfo)
}
return (
<Modal
title="Send Tokens"
description="Send Tokens Form"
handleClose={onClose}
open={isOpen}
paperClassName={cn(smallerModalSize && classes.smallerModalWindow)}
paperClassName={cn(scalableModalSize && classes.scalableModalWindow)}
>
<React.Fragment>
<>
{activeScreen === 'chooseTxType' && <ChooseTxType onClose={onClose} setActiveScreen={setActiveScreen} />}
{activeScreen === 'sendFunds' && (
<SendFunds
@ -118,7 +121,7 @@ const Send = ({
initialValues={tx}
/>
)}
</React.Fragment>
</>
</Modal>
)
}

View File

@ -2,6 +2,7 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
import Close from '@material-ui/icons/Close'
import InputAdornment from '@material-ui/core/InputAdornment'
import IconButton from '@material-ui/core/IconButton'
import Paragraph from '~/components/layout/Paragraph'
import Row from '~/components/layout/Row'
@ -10,6 +11,7 @@ import Col from '~/components/layout/Col'
import Button from '~/components/layout/Button'
import Block from '~/components/layout/Block'
import Hairline from '~/components/layout/Hairline'
import ButtonLink from '~/components/layout/ButtonLink'
import Field from '~/components/forms/Field'
import TextField from '~/components/forms/TextField'
import TextareaField from '~/components/forms/TextareaField'
@ -17,6 +19,9 @@ import {
composeValidators,
required,
mustBeEthereumAddress,
mustBeFloat,
maxValue,
greaterThan,
} from '~/components/forms/validator'
import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
import ArrowDown from '../assets/arrow-down.svg'
@ -47,10 +52,14 @@ const SendCustomTx = ({
onSubmit(values)
}
const formMutators = {}
const formMutators = {
setMax: (args, state, utils) => {
utils.changeValue(state, 'amount', () => ethBalance)
},
}
return (
<React.Fragment>
<>
<Row align="center" grow className={classes.heading}>
<Paragraph weight="bolder" className={classes.manage} noMargin>
Send custom transactions
@ -72,8 +81,11 @@ const SendCustomTx = ({
</Col>
</Row>
<GnoForm onSubmit={handleSubmit} formMutators={formMutators} initialValues={initialValues}>
{() => (
<React.Fragment>
{(...args) => {
const mutators = args[3]
return (
<>
<Row margin="md">
<Col xs={12}>
<Field
@ -87,6 +99,36 @@ const SendCustomTx = ({
/>
</Col>
</Row>
<Row margin="xs">
<Col between="lg">
<Paragraph size="md" color="disabled" style={{ letterSpacing: '-0.5px' }} noMargin>
Amount
</Paragraph>
<ButtonLink weight="bold" onClick={mutators.setMax}>
Send max
</ButtonLink>
</Col>
</Row>
<Row margin="md">
<Col>
<Field
name="amount"
component={TextField}
type="text"
validate={composeValidators(
mustBeFloat,
greaterThan(0),
maxValue(ethBalance),
)}
placeholder="Value*"
text="Value*"
className={classes.addressInput}
inputAdornment={{
endAdornment: <InputAdornment position="end">ETH</InputAdornment>,
}}
/>
</Col>
</Row>
<Row margin="sm">
<Col>
<TextareaField
@ -113,11 +155,12 @@ const SendCustomTx = ({
Review
</Button>
</Row>
</React.Fragment>
)}
</>
)
}}
</GnoForm>
</Block>
</React.Fragment>
</>
)
}

View File

@ -6,13 +6,14 @@ import Checkbox from '@material-ui/core/Checkbox'
import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'
import { withStyles } from '@material-ui/core/styles'
import CallMade from '@material-ui/icons/CallMade'
import CallReceived from '@material-ui/icons/CallReceived'
import { type Token } from '~/logic/tokens/store/model/token'
import Col from '~/components/layout/Col'
import Row from '~/components/layout/Row'
import Button from '~/components/layout/Button'
import ButtonLink from '~/components/layout/ButtonLink'
import Paragraph from '~/components/layout/Paragraph'
import Img from '~/components/layout/Img'
import Modal from '~/components/Modal'
import { type Column, cellWidth } from '~/components/Table/TableHead'
import Table from '~/components/Table'
@ -25,9 +26,6 @@ import SendModal from './SendModal'
import Receive from './Receive'
import { styles } from './style'
const ReceiveTx = require('../assets/tx-receive.svg')
const SendTx = require('../assets/tx-send.svg')
export const MANAGE_TOKENS_BUTTON_TEST_ID = 'manage-tokens-btn'
export const BALANCE_ROW_TEST_ID = 'balance-row'
@ -171,17 +169,6 @@ class Balances extends React.Component<Props, State> {
))}
<TableCell component="td">
<Row align="end" className={classes.actions}>
<Button
variant="contained"
size="small"
color="primary"
className={classes.receive}
onClick={this.onShow('Receive')}
rounded
>
<Img src={ReceiveTx} alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Receive
</Button>
{granted && (
<Button
variant="contained"
@ -191,7 +178,7 @@ class Balances extends React.Component<Props, State> {
onClick={() => this.showSendFunds(row.asset.name)}
testId="balance-send-btn"
>
<Img src={SendTx} alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
<CallMade alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Send
</Button>
)}
@ -202,7 +189,7 @@ class Balances extends React.Component<Props, State> {
className={classes.receive}
onClick={this.onShow('Receive')}
>
<CallReceived className={classNames(classes.leftIcon, classes.iconSmall)} />
<CallReceived alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Receive
</Button>
</Row>

View File

@ -33,11 +33,11 @@ export const styles = (theme: Object) => ({
receive: {
width: '95px',
minWidth: '95px',
marginLeft: sm,
},
send: {
width: '75px',
minWidth: '75px',
marginLeft: sm,
},
leftIcon: {
marginRight: sm,

View File

@ -4,6 +4,8 @@ import classNames from 'classnames/bind'
import OpenInNew from '@material-ui/icons/OpenInNew'
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'
import CallMade from '@material-ui/icons/CallMade'
import CallReceived from '@material-ui/icons/CallReceived'
import { withStyles } from '@material-ui/core/styles'
import Hairline from '~/components/layout/Hairline'
import Block from '~/components/layout/Block'
@ -13,7 +15,6 @@ import Row from '~/components/layout/Row'
import Button from '~/components/layout/Button'
import Link from '~/components/layout/Link'
import Paragraph from '~/components/layout/Paragraph'
import Img from '~/components/layout/Img'
import Modal from '~/components/Modal'
import SendModal from './Balances/SendModal'
import Receive from './Balances/Receive'
@ -21,7 +22,7 @@ import NoSafe from '~/components/NoSafe'
import { type SelectorProps } from '~/routes/safe/container/selector'
import { getEtherScanLink } from '~/logic/wallets/getWeb3'
import {
sm, xs, secondary, smallFontSize, border, secondaryText,
secondary, border,
} from '~/theme/variables'
import { copyToClipboard } from '~/utils/clipboard'
import { type Actions } from '../container/actions'
@ -30,9 +31,6 @@ import Transactions from './Transactions'
import Settings from './Settings'
import { styles } from './style'
const ReceiveTx = require('./assets/tx-receive.svg')
const SendTx = require('./assets/tx-send.svg')
export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
export const TRANSACTIONS_TAB_BTN_TEST_ID = 'transactions-tab-btn'
@ -59,40 +57,6 @@ const openIconStyle = {
color: secondary,
}
const styles = () => ({
container: {
display: 'flex',
alignItems: 'center',
},
name: {
marginLeft: sm,
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
},
user: {
justifyContent: 'left',
},
open: {
paddingLeft: sm,
width: 'auto',
'&:hover': {
cursor: 'pointer',
},
},
readonly: {
fontSize: smallFontSize,
letterSpacing: '0.5px',
color: '#ffffff',
backgroundColor: secondaryText,
textTransform: 'uppercase',
padding: `0 ${sm}`,
marginLeft: sm,
borderRadius: xs,
lineHeight: '28px',
},
})
class Layout extends React.Component<Props, State> {
constructor(props) {
super(props)
@ -166,17 +130,6 @@ class Layout extends React.Component<Props, State> {
</Block>
<Block className={classes.balance}>
<Row align="end" className={classes.actions}>
<Button
variant="contained"
size="small"
color="primary"
className={classes.receive}
onClick={onShow('Receive')}
rounded
>
<Img src={ReceiveTx} alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Receive
</Button>
{granted && (
<Button
variant="contained"
@ -187,10 +140,21 @@ class Layout extends React.Component<Props, State> {
rounded
testId="balance-send-btn"
>
<Img src={SendTx} alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
<CallMade alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Send
</Button>
)}
<Button
variant="contained"
size="small"
color="primary"
className={classes.receive}
onClick={onShow('Receive')}
rounded
>
<CallReceived alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
Receive
</Button>
</Row>
</Block>
</Block>
@ -241,6 +205,31 @@ class Layout extends React.Component<Props, State> {
createTransaction={createTransaction}
/>
)}
<SendModal
onClose={hideSendFunds}
isOpen={sendFunds.isOpen}
etherScanLink={etherScanLink}
safeAddress={address}
safeName={name}
ethBalance={ethBalance}
tokens={activeTokens}
selectedToken={sendFunds.selectedToken}
createTransaction={createTransaction}
activeScreenType="chooseTxType"
/>
<Modal
title="Receive Tokens"
description="Receive Tokens Form"
handleClose={onHide('Receive')}
open={showReceive}
>
<Receive
safeName={name}
safeAddress={address}
etherScanLink={etherScanLink}
onClose={onHide('Receive')}
/>
</Modal>
</>
)
}

View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" fill-rule="nonzero" d="M1.778 0h12.444C15.204 0 16 .796 16 1.778v12.444c0 .982-.796 1.778-1.778 1.778H1.778A1.778 1.778 0 0 1 0 14.222V1.778C0 .796.796 0 1.778 0zM8.5 12L13 7.556h-2.7V4H6.7v3.556H4L8.5 12z"/>
</svg>

Before

Width:  |  Height:  |  Size: 322 B

View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#FFF" fill-rule="nonzero" d="M1.778 16h12.444c.982 0 1.778-.796 1.778-1.778V1.778C16 .796 15.204 0 14.222 0H1.778C.796 0 0 .796 0 1.778v12.444C0 15.204.796 16 1.778 16zM8 3.556L12.444 8H9.778v3.556H6.222V8H3.556L8 3.556z"/>
</svg>

Before

Width:  |  Height:  |  Size: 331 B

View File

@ -1,5 +1,7 @@
// @flow
import { sm, xs, smallFontSize } from '~/theme/variables'
import {
sm, xs, smallFontSize, secondaryText,
} from '~/theme/variables'
export const styles = () => ({
container: {
@ -26,14 +28,16 @@ export const styles = () => ({
fontSize: smallFontSize,
letterSpacing: '0.5px',
color: '#ffffff',
backgroundColor: '#a2a8ba',
fontFamily: 'Roboto Mono, monospace',
backgroundColor: secondaryText,
textTransform: 'uppercase',
padding: `0 ${sm}`,
marginLeft: sm,
borderRadius: xs,
lineHeight: '28px',
},
iconSmall: {
fontSize: 16,
},
balance: {
marginLeft: 'auto',
overflow: 'hidden',
@ -44,11 +48,11 @@ export const styles = () => ({
receive: {
width: '95px',
minWidth: '95px',
marginLeft: sm,
},
send: {
width: '75px',
minWidth: '75px',
marginLeft: sm,
},
leftIcon: {
marginRight: sm,