Refactor UI

2019-09-02 09:55:28 +02:00 · 2019-09-02 09:55:28 +02:00 · b471a5e056
parent e0544241ae
commit b471a5e056
8 changed files with 158 additions and 138 deletions
--- a/src/routes/safe/components/Balances/SendModal/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/index.jsx
@ -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>
  )
 }
--- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx
@ -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,52 +81,86 @@ const SendCustomTx = ({
          </Col>
        </Row>
        <GnoForm onSubmit={handleSubmit} formMutators={formMutators} initialValues={initialValues}>
-          {() => (
-            <React.Fragment>
-              <Row margin="md">
-                <Col xs={12}>
-                  <Field
-                    name="recipientAddress"
-                    component={TextField}
-                    type="text"
-                    validate={composeValidators(required, mustBeEthereumAddress)}
-                    placeholder="Recipient*"
-                    text="Recipient*"
-                    className={classes.addressInput}
-                  />
-                </Col>
-              </Row>
-              <Row margin="sm">
-                <Col>
-                  <TextareaField
-                    name="data"
-                    type="text"
-                    placeholder="Data interface (ABI / JSON)*"
-                    text="Data interface (ABI / JSON)*"
-                  />
-                </Col>
-              </Row>
-              <Hairline />
-              <Row align="center" className={classes.buttonRow}>
-                <Button minWidth={140} minHeight={42} onClick={onClose}>
-                    Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  variant="contained"
-                  minHeight={42}
-                  minWidth={140}
-                  color="primary"
-                  data-testid="review-tx-btn"
-                >
-                    Review
-                </Button>
-              </Row>
-            </React.Fragment>
-          )}
+          {(...args) => {
+            const mutators = args[3]
+
+            return (
+              <>
+                <Row margin="md">
+                  <Col xs={12}>
+                    <Field
+                      name="recipientAddress"
+                      component={TextField}
+                      type="text"
+                      validate={composeValidators(required, mustBeEthereumAddress)}
+                      placeholder="Recipient*"
+                      text="Recipient*"
+                      className={classes.addressInput}
+                    />
+                  </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
+                      name="data"
+                      type="text"
+                      placeholder="Data interface (ABI / JSON)*"
+                      text="Data interface (ABI / JSON)*"
+                    />
+                  </Col>
+                </Row>
+                <Hairline />
+                <Row align="center" className={classes.buttonRow}>
+                  <Button minWidth={140} minHeight={42} onClick={onClose}>
+                      Cancel
+                  </Button>
+                  <Button
+                    type="submit"
+                    variant="contained"
+                    minHeight={42}
+                    minWidth={140}
+                    color="primary"
+                    data-testid="review-tx-btn"
+                  >
+                      Review
+                  </Button>
+                </Row>
+              </>
+            )
+          }}
        </GnoForm>
      </Block>
-    </React.Fragment>
+    </>
  )
 }

--- a/src/routes/safe/components/Balances/index.jsx
+++ b/src/routes/safe/components/Balances/index.jsx
@ -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>
--- a/src/routes/safe/components/Balances/style.js
+++ b/src/routes/safe/components/Balances/style.js
@ -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,
--- a/src/routes/safe/components/Layout.jsx
+++ b/src/routes/safe/components/Layout.jsx
@ -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>
      </>
    )
  }
--- a/src/routes/safe/components/assets/tx-receive.svg
+++ b/src/routes/safe/components/assets/tx-receive.svg
@ -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>
--- a/src/routes/safe/components/assets/tx-send.svg
+++ b/src/routes/safe/components/assets/tx-send.svg
@ -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>
--- a/src/routes/safe/components/style.js
+++ b/src/routes/safe/components/style.js
@ -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,