From 048b8084df6bc02ac0fd83c7e89ac385f13369a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 26 Aug 2019 10:12:52 +0200 Subject: [PATCH 01/36] Update the style of the buttons in modal windows --- .../ManageOwners/AddOwnerModal/screens/Review/index.jsx | 4 ++-- .../AddOwnerModal/screens/ThresholdForm/index.jsx | 4 ++-- .../components/Settings/ManageOwners/EditOwnerModal/index.jsx | 4 ++-- .../RemoveOwnerModal/screens/CheckOwner/index.jsx | 3 ++- .../ManageOwners/RemoveOwnerModal/screens/Review/index.jsx | 4 ++-- .../RemoveOwnerModal/screens/ThresholdForm/index.jsx | 4 ++-- .../ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx | 4 ++-- src/routes/safe/components/Settings/RemoveSafeModal/index.jsx | 2 +- src/routes/safe/components/Settings/RemoveSafeModal/style.js | 1 + .../Settings/ThresholdSettings/ChangeThreshold/index.jsx | 4 ++-- .../Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.jsx | 3 +-- 11 files changed, 19 insertions(+), 18 deletions(-) diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx index 25217f5b..d7aa8ad3 100644 --- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx @@ -154,15 +154,15 @@ const ReviewAddOwner = ({ - - diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.jsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.jsx index ff2ff84f..06946a08 100644 --- a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.jsx @@ -79,13 +79,14 @@ const CheckOwner = ({ - - diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.jsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.jsx index 1acc998e..f44cf32a 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.jsx +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/ApproveTxModal/index.jsx @@ -104,12 +104,11 @@ const ApproveTxModal = ({ - {granted && ( )} diff --git a/src/routes/safe/components/Balances/style.js b/src/routes/safe/components/Balances/style.js index 628ddecb..a0cc0584 100644 --- a/src/routes/safe/components/Balances/style.js +++ b/src/routes/safe/components/Balances/style.js @@ -30,15 +30,13 @@ export const styles = (theme: Object) => ({ justifyContent: 'flex-end', visibility: 'hidden', }, - send: { - minWidth: '0px', - marginRight: sm, - width: '70px', - }, receive: { - minWidth: '0px', width: '95px', }, + send: { + width: '70px', + marginLeft: sm, + }, leftIcon: { marginRight: xs, }, diff --git a/src/routes/safe/components/Layout.jsx b/src/routes/safe/components/Layout.jsx index d7716453..95b2635a 100644 --- a/src/routes/safe/components/Layout.jsx +++ b/src/routes/safe/components/Layout.jsx @@ -1,5 +1,6 @@ // @flow import * as React from 'react' +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' @@ -9,8 +10,10 @@ import Block from '~/components/layout/Block' import Identicon from '~/components/Identicon' import Heading from '~/components/layout/Heading' 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 NoSafe from '~/components/NoSafe' import { type SelectorProps } from '~/routes/safe/container/selector' import { getEtherScanLink } from '~/logic/wallets/getWeb3' @@ -22,6 +25,10 @@ import { type Actions } from '../container/actions' import Balances from './Balances' 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' @@ -142,6 +149,35 @@ class Layout extends React.Component { + + + + {granted && ( + + )} + + diff --git a/src/routes/safe/components/Settings/RemoveSafeModal/style.js b/src/routes/safe/components/Settings/RemoveSafeModal/style.js index 6218de0f..99780564 100644 --- a/src/routes/safe/components/Settings/RemoveSafeModal/style.js +++ b/src/routes/safe/components/Settings/RemoveSafeModal/style.js @@ -3,7 +3,7 @@ import { lg, md, sm, error, background, } from '~/theme/variables' -export const styles = (theme: Object) => ({ +export const styles = () => ({ heading: { padding: `${sm} ${lg}`, justifyContent: 'space-between', diff --git a/src/routes/safe/components/assets/tx-receive.svg b/src/routes/safe/components/assets/tx-receive.svg new file mode 100644 index 00000000..ed5db3ba --- /dev/null +++ b/src/routes/safe/components/assets/tx-receive.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/safe/components/assets/tx-send.svg b/src/routes/safe/components/assets/tx-send.svg new file mode 100644 index 00000000..b782bd49 --- /dev/null +++ b/src/routes/safe/components/assets/tx-send.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/safe/components/style.js b/src/routes/safe/components/style.js new file mode 100644 index 00000000..14e11688 --- /dev/null +++ b/src/routes/safe/components/style.js @@ -0,0 +1,54 @@ +// @flow +import { sm, xs, smallFontSize } from '~/theme/variables' + +export 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: '#a2a8ba', + fontFamily: 'Roboto Mono, monospace', + textTransform: 'uppercase', + padding: `0 ${sm}`, + marginLeft: sm, + borderRadius: xs, + lineHeight: '28px', + }, + balance: { + marginLeft: 'auto', + overflow: 'hidden', + border: '1px solid #c8ced4', + borderRadius: '3px', + padding: '20px', + }, + receive: { + width: '95px', + }, + send: { + width: '70px', + marginLeft: sm, + }, + leftIcon: { + marginRight: xs, + }, +}) From fb95d6a6ffc5f4e6a308086b08522a7f5f58a11b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 26 Aug 2019 11:54:52 +0200 Subject: [PATCH 03/36] Fix style of buttons --- src/routes/safe/components/Balances/Receive/index.jsx | 5 +---- .../Balances/SendModal/screens/ReviewTx/index.jsx | 3 +-- .../Balances/SendModal/screens/SendFunds/index.jsx | 2 +- .../Balances/Tokens/screens/AddCustomToken/index.jsx | 4 ++-- .../Balances/Tokens/screens/AddCustomToken/style.js | 3 --- src/routes/safe/components/Balances/style.js | 8 +++++--- .../TxsTable/ExpandedTx/CancelTxModal/index.jsx | 3 +-- src/routes/safe/components/style.js | 6 ++++-- 8 files changed, 15 insertions(+), 19 deletions(-) diff --git a/src/routes/safe/components/Balances/Receive/index.jsx b/src/routes/safe/components/Balances/Receive/index.jsx index 50c3300a..414b6929 100644 --- a/src/routes/safe/components/Balances/Receive/index.jsx +++ b/src/routes/safe/components/Balances/Receive/index.jsx @@ -48,9 +48,6 @@ const styles = () => ({ height: '84px', justifyContent: 'center', }, - button: { - height: '42px', - }, addressContainer: { marginTop: '28px', }, @@ -109,7 +106,7 @@ const Receive = ({ - diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx index 9d233a14..a41c1c02 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx @@ -138,12 +138,11 @@ const ReviewTx = ({ - - diff --git a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js index b09dcabb..3dd3b0ab 100644 --- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js +++ b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/style.js @@ -28,7 +28,4 @@ export const styles = () => ({ height: '84px', justifyContent: 'center', }, - button: { - height: '42px', - }, }) diff --git a/src/routes/safe/components/Balances/style.js b/src/routes/safe/components/Balances/style.js index a0cc0584..5538c94f 100644 --- a/src/routes/safe/components/Balances/style.js +++ b/src/routes/safe/components/Balances/style.js @@ -1,5 +1,5 @@ // @flow -import { sm, xs } from '~/theme/variables' +import { sm } from '~/theme/variables' export const styles = (theme: Object) => ({ root: { @@ -32,13 +32,15 @@ export const styles = (theme: Object) => ({ }, receive: { width: '95px', + minWidth: '95px', }, send: { - width: '70px', + width: '75px', + minWidth: '75px', marginLeft: sm, }, leftIcon: { - marginRight: xs, + marginRight: sm, }, links: { textDecoration: 'underline', diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/CancelTxModal/index.jsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/CancelTxModal/index.jsx index ad18d01c..05c25121 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/CancelTxModal/index.jsx +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/CancelTxModal/index.jsx @@ -65,12 +65,11 @@ const CancelTxModal = ({ - + + + + )} + + + + ) +} + +export default withStyles(styles)(SendCustomTx) From 00d44a4c969985a8ec24f8fa6dd4c7b6575bdbeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Wed, 28 Aug 2019 18:16:29 +0200 Subject: [PATCH 11/36] Add send custom tx styles --- .../SendModal/screens/SendCustomTx/style.js | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js new file mode 100644 index 00000000..841c5d43 --- /dev/null +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js @@ -0,0 +1,37 @@ +// @flow +import { lg, md, sm } from '~/theme/variables' + +export const styles = () => ({ + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: '#a2a8ba', + marginRight: 'auto', + marginLeft: '20px', + }, + manage: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + formContainer: { + padding: `${md} ${lg}`, + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, + dataInput: { + '& TextField-root-294': { + lineHeight: 'auto', + border: 'green', + }, + }, +}) From e0544241aed44d72a1b4e790fa03a4a1e5373ec2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Wed, 28 Aug 2019 18:41:08 +0200 Subject: [PATCH 12/36] Remove props from SendModal --- src/routes/safe/components/Balances/SendModal/index.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx index cca7b405..b07b9ae2 100644 --- a/src/routes/safe/components/Balances/SendModal/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/index.jsx @@ -85,7 +85,6 @@ const Send = ({ {activeScreen === 'sendFunds' && ( Date: Mon, 2 Sep 2019 09:55:28 +0200 Subject: [PATCH 13/36] Refactor UI --- .../components/Balances/SendModal/index.jsx | 29 ++-- .../SendModal/screens/SendCustomTx/index.jsx | 135 ++++++++++++------ src/routes/safe/components/Balances/index.jsx | 21 +-- src/routes/safe/components/Balances/style.js | 2 +- src/routes/safe/components/Layout.jsx | 91 ++++++------ .../safe/components/assets/tx-receive.svg | 3 - src/routes/safe/components/assets/tx-send.svg | 3 - src/routes/safe/components/style.js | 12 +- 8 files changed, 158 insertions(+), 138 deletions(-) delete mode 100644 src/routes/safe/components/assets/tx-receive.svg delete mode 100644 src/routes/safe/components/assets/tx-send.svg diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx index b07b9ae2..abd535f1 100644 --- 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(activeScreenType || 'chooseTxType') const [tx, setTx] = useState({}) - 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 ( - + <> {activeScreen === 'chooseTxType' && } {activeScreen === 'sendFunds' && ( )} - + ) } diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx index 39b9a025..1369c392 100644 --- 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 ( - + <> Send custom transactions @@ -72,52 +81,86 @@ const SendCustomTx = ({ - {() => ( - - - - - - - - - - - - - - - - - - )} + {(...args) => { + const mutators = args[3] + + return ( + <> + + + + + + + + + Amount + + + Send max + + + + + + ETH, + }} + /> + + + + + + + + + + + + + + ) + }} - + ) } diff --git a/src/routes/safe/components/Balances/index.jsx b/src/routes/safe/components/Balances/index.jsx index eb781720..149ccc25 100644 --- 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 { ))} - {granted && ( )} @@ -202,7 +189,7 @@ class Balances extends React.Component { className={classes.receive} onClick={this.onShow('Receive')} > - + Receive diff --git a/src/routes/safe/components/Balances/style.js b/src/routes/safe/components/Balances/style.js index 5538c94f..224dac23 100644 --- 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, diff --git a/src/routes/safe/components/Layout.jsx b/src/routes/safe/components/Layout.jsx index e62d4b3a..5957e5fd 100644 --- 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 { constructor(props) { super(props) @@ -166,17 +130,6 @@ class Layout extends React.Component { - {granted && ( )} + @@ -241,6 +205,31 @@ class Layout extends React.Component { createTransaction={createTransaction} /> )} + + + + ) } diff --git a/src/routes/safe/components/assets/tx-receive.svg b/src/routes/safe/components/assets/tx-receive.svg deleted file mode 100644 index ed5db3ba..00000000 --- a/src/routes/safe/components/assets/tx-receive.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/routes/safe/components/assets/tx-send.svg b/src/routes/safe/components/assets/tx-send.svg deleted file mode 100644 index b782bd49..00000000 --- a/src/routes/safe/components/assets/tx-send.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/routes/safe/components/style.js b/src/routes/safe/components/style.js index 1ddc0acf..3a579e8a 100644 --- 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, From 1adeda041cbe467fc22560543a0cb1a244df3416 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 2 Sep 2019 10:34:19 +0200 Subject: [PATCH 14/36] Update data placeholder and text --- .../Balances/SendModal/screens/SendCustomTx/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx index 1369c392..169b8c45 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx @@ -134,8 +134,8 @@ const SendCustomTx = ({ From 256c78816f992a6b1a8d02d7a481dcd807284bbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 2 Sep 2019 11:21:56 +0200 Subject: [PATCH 15/36] Make send button disabled if not owner connected --- src/routes/safe/components/Layout.jsx | 27 +++++++++++++-------------- src/routes/safe/components/style.js | 1 - 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/routes/safe/components/Layout.jsx b/src/routes/safe/components/Layout.jsx index 5957e5fd..c4534d70 100644 --- a/src/routes/safe/components/Layout.jsx +++ b/src/routes/safe/components/Layout.jsx @@ -130,20 +130,19 @@ class Layout extends React.Component { - {granted && ( - - )} + From b88972e7a051246fbf17a3443c81d7ca937a51b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 2 Sep 2019 19:01:22 +0200 Subject: [PATCH 17/36] Add basic custom tx review --- .../components/Balances/SendModal/index.jsx | 24 ++- .../screens/ReviewCustomTx/index.jsx | 144 ++++++++++++++++++ .../SendModal/screens/ReviewCustomTx/style.js | 51 +++++++ 3 files changed, 217 insertions(+), 2 deletions(-) create mode 100644 src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx create mode 100644 src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx index abd535f1..8ffae44a 100644 --- a/src/routes/safe/components/Balances/SendModal/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/index.jsx @@ -9,6 +9,7 @@ import ChooseTxType from './screens/ChooseTxType' import SendFunds from './screens/SendFunds' import ReviewTx from './screens/ReviewTx' import SendCustomTx from './screens/SendCustomTx' +import ReviewCustomTx from './screens/ReviewCustomTx' type Props = { onClose: () => void, @@ -38,6 +39,9 @@ type TxStateType = const styles = () => ({ scalableModalWindow: { height: 'auto', + }, + scalableStaticModalWindow: { + height: 'auto', position: 'static', }, }) @@ -63,7 +67,8 @@ const Send = ({ setTx({}) }, [isOpen]) - const scalableModalSize = activeScreen === 'chooseTxType' || activeScreen === 'sendCustomTx' + const scalableModalSize = activeScreen === 'sendCustomTx' || activeScreen === 'reviewCustomTx' + const scalableStaticModalSize = activeScreen === 'chooseTxType' const handleTxCreation = (txInfo) => { setActiveScreen('reviewTx') @@ -81,7 +86,10 @@ const Send = ({ description="Send Tokens Form" handleClose={onClose} open={isOpen} - paperClassName={cn(scalableModalSize && classes.scalableModalWindow)} + paperClassName={cn( + scalableStaticModalSize && classes.scalableStaticModalWindow, + scalableModalSize && classes.scalableModalWindow, + )} > <> {activeScreen === 'chooseTxType' && } @@ -121,6 +129,18 @@ const Send = ({ initialValues={tx} /> )} + {activeScreen === 'reviewCustomTx' && ( + + )} ) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx new file mode 100644 index 00000000..e7767ce1 --- /dev/null +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx @@ -0,0 +1,144 @@ +// @flow +import React from 'react' +import OpenInNew from '@material-ui/icons/OpenInNew' +import { withStyles } from '@material-ui/core/styles' +import Close from '@material-ui/icons/Close' +import IconButton from '@material-ui/core/IconButton' +import { SharedSnackbarConsumer } from '~/components/SharedSnackBar' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import Link from '~/components/layout/Link' +import Col from '~/components/layout/Col' +import Button from '~/components/layout/Button' +import Img from '~/components/layout/Img' +import Block from '~/components/layout/Block' +import Identicon from '~/components/Identicon' +import { copyToClipboard } from '~/utils/clipboard' +import Hairline from '~/components/layout/Hairline' +import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo' +import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils' +import ArrowDown from '../assets/arrow-down.svg' +import { secondary } from '~/theme/variables' +import { styles } from './style' + +type Props = { + onClose: () => void, + setActiveScreen: Function, + classes: Object, + safeAddress: string, + etherScanLink: string, + safeName: string, + ethBalance: string, + tx: Object, +} + +const openIconStyle = { + height: '16px', + color: secondary, +} + +const ReviewCustomTx = ({ + onClose, + setActiveScreen, + classes, + safeAddress, + etherScanLink, + safeName, + ethBalance, + tx, +}: Props) => ( + + {() => { + const submitTx = async () => { + + } + + return ( + <> + + + Send Funds + + 2 of 2 + + + + + + + + + + Arrow Down + + + + + + + + Recipient + + + + + + + + + {tx.recipientAddress} + + + + + + + + + Value + + + + Ether + + {tx.value} + {'ETH'} + + + + + + {tx.data} + + + + + + + + + + + ) + }} + +) + +export default withStyles(styles)(ReviewCustomTx) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js new file mode 100644 index 00000000..cfb0904b --- /dev/null +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js @@ -0,0 +1,51 @@ +// @flow +import { + lg, md, sm, secondaryText, border, +} from '~/theme/variables' + +export const styles = () => ({ + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: secondaryText, + marginRight: 'auto', + marginLeft: '20px', + }, + headingText: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + container: { + padding: `${md} ${lg}`, + }, + value: { + marginLeft: sm, + }, + outerData: { + borderRadius: '5px', + border: `1px solid ${border}`, + padding: '11px', + }, + data: { + wordBreak: 'break-all', + overflow: 'auto', + fontSize: '14px', + fontFamily: 'Averta', + maxHeight: '100px', + letterSpacing: 'normal', + fontStretch: 'normal', + lineHeight: '1.43', + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, +}) From 0f38ebd60a5cd85b86023e900c754bf8ff9146ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 5 Sep 2019 11:15:53 +0200 Subject: [PATCH 18/36] Create transaction from review custome tx modal window --- .../SendModal/screens/ReviewCustomTx/index.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx index e7767ce1..80758280 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx @@ -17,6 +17,7 @@ import { copyToClipboard } from '~/utils/clipboard' import Hairline from '~/components/layout/Hairline' import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo' import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils' +import { getWeb3 } from '~/logic/wallets/getWeb3' import ArrowDown from '../assets/arrow-down.svg' import { secondary } from '~/theme/variables' import { styles } from './style' @@ -30,6 +31,7 @@ type Props = { safeName: string, ethBalance: string, tx: Object, + createTransaction: Function, } const openIconStyle = { @@ -46,11 +48,18 @@ const ReviewCustomTx = ({ safeName, ethBalance, tx, + createTransaction, }: Props) => ( - {() => { + {({ openSnackbar }) => { const submitTx = async () => { + const web3 = getWeb3() + const txRecipient = tx.recipientAddress + let txData = tx.data + let txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : 0 + createTransaction(safeAddress, txRecipient, txValue, txData, openSnackbar) + onClose() } return ( @@ -104,7 +113,7 @@ const ReviewCustomTx = ({ - Ether + {'Ether'} {tx.value} {'ETH'} From 6372674fa67128a28ae40c860203b61410a526aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 5 Sep 2019 11:36:15 +0200 Subject: [PATCH 19/36] Handle custom transactions in transaction list --- .../screens/ReviewCustomTx/index.jsx | 6 ++-- .../ExpandedTx/TxDescription/index.jsx | 28 +++++++++++++++++-- .../ExpandedTx/TxDescription/utils.js | 5 ++++ .../Transactions/TxsTable/columns.js | 2 ++ .../safe/store/actions/fetchTransactions.js | 4 +++ src/routes/safe/store/models/transaction.js | 2 ++ 6 files changed, 41 insertions(+), 6 deletions(-) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx index 80758280..bf7b607f 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx @@ -55,8 +55,8 @@ const ReviewCustomTx = ({ const submitTx = async () => { const web3 = getWeb3() const txRecipient = tx.recipientAddress - let txData = tx.data - let txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : 0 + const txData = tx.data + const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : 0 createTransaction(safeAddress, txRecipient, txValue, txData, openSnackbar) onClose() @@ -113,7 +113,7 @@ const ReviewCustomTx = ({ - {'Ether'} + Ether {tx.value} {'ETH'} diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx index 8508e9d3..b4123640 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx @@ -13,11 +13,15 @@ export const TRANSACTIONS_DESC_ADD_OWNER_TEST_ID = 'tx-description-add-owner' export const TRANSACTIONS_DESC_REMOVE_OWNER_TEST_ID = 'tx-description-remove-owner' export const TRANSACTIONS_DESC_CHANGE_THRESHOLD_TEST_ID = 'tx-description-change-threshold' export const TRANSACTIONS_DESC_SEND_TEST_ID = 'tx-description-send' +export const TRANSACTIONS_DESC_CUSTOM_TEST_ID = 'tx-description-custom' export const styles = () => ({ txDataContainer: { padding: `${lg} ${md}`, }, + txData: { + wordBreak: 'break-all', + }, }) type Props = { @@ -37,6 +41,11 @@ type DescriptionDescProps = { newThreshold?: string, } +type CustomDescProps = { + data: String, + classes: Obeject, +} + const TransferDescription = ({ value = '', symbol, recipient }: TransferDescProps) => ( @@ -46,7 +55,7 @@ const TransferDescription = ({ value = '', symbol, recipient }: TransferDescProp {' '} {symbol} {' '} -to: + to:
@@ -79,9 +88,19 @@ const SettingsDescription = ({ removedOwner, addedOwner, newThreshold }: Descrip ) +const CustomDescription = ({ data, classes }: CustomDescProps) => ( + <> + + Data (hex encoded): +
+ {data} + + +) + const TxDescription = ({ tx, classes }: Props) => { const { - recipient, value, modifySettingsTx, removedOwner, addedOwner, newThreshold, cancellationTx, + recipient, value, modifySettingsTx, removedOwner, addedOwner, newThreshold, cancellationTx, customTx, data, } = getTxData(tx) return ( @@ -89,7 +108,10 @@ const TxDescription = ({ tx, classes }: Props) => { {modifySettingsTx && ( )} - {!cancellationTx && !modifySettingsTx && ( + {customTx && ( + + )} + {!cancellationTx && !modifySettingsTx && !customTx && ( )} diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/utils.js b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/utils.js index dd9744da..affddad6 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/utils.js +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/utils.js @@ -10,6 +10,8 @@ type DecodedTxData = { newThreshold?: string, addedOwner?: string, cancellationTx?: boolean, + customTx?: boolean, + data: string, } export const getTxData = (tx: Transaction): DecodedTxData => { @@ -47,6 +49,9 @@ export const getTxData = (tx: Transaction): DecodedTxData => { } } else if (tx.cancellationTx) { txData.cancellationTx = true + } else if (tx.customTx) { + txData.data = tx.data + txData.customTx = true } return txData diff --git a/src/routes/safe/components/Transactions/TxsTable/columns.js b/src/routes/safe/components/Transactions/TxsTable/columns.js index 2a61828d..a908e375 100644 --- a/src/routes/safe/components/Transactions/TxsTable/columns.js +++ b/src/routes/safe/components/Transactions/TxsTable/columns.js @@ -50,6 +50,8 @@ export const getTxTableData = (transactions: List): List = Record({ cancelled: false, modifySettingsTx: false, cancellationTx: false, + customTx: false, status: 'awaiting', isTokenTransfer: false, decodedParams: {}, From 36b817d34fc4366d6cb2db16e2e2c5848913f349 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 5 Sep 2019 11:55:08 +0200 Subject: [PATCH 20/36] Add ethereum contract address validator --- src/components/forms/AddressInput/index.jsx | 4 ++++ src/components/forms/validator.js | 8 ++++++++ .../Balances/SendModal/screens/SendCustomTx/index.jsx | 1 + 3 files changed, 13 insertions(+) diff --git a/src/components/forms/AddressInput/index.jsx b/src/components/forms/AddressInput/index.jsx index 71217c95..1ad3ea3a 100644 --- a/src/components/forms/AddressInput/index.jsx +++ b/src/components/forms/AddressInput/index.jsx @@ -7,6 +7,7 @@ import { composeValidators, required, mustBeEthereumAddress, + mustBeEthereumContractAddress, } from '~/components/forms/validator' import { getAddressFromENS } from '~/logic/wallets/getWeb3' @@ -19,6 +20,7 @@ type Props = { testId?: string, validators?: Function[], inputAdornment?: React.Element, + mustBeContract?: boolean, } const isValidEnsName = (name) => /^([\w-]+\.)+(eth|test|xyz|luxe)$/.test(name) @@ -35,6 +37,7 @@ const AddressInput = ({ testId, inputAdornment, validators = [], + mustBeContract, }: Props): React.Element<*> => ( <> { return isAddress ? undefined : 'Address should be a valid Ethereum address or ENS name' }) +export const mustBeEthereumContractAddress = simpleMemoize(async (address: Field) => { + const contractCode: string = await getWeb3().eth.getCode(address) + + return (!contractCode || contractCode.replace('0x', '').replace(/0/g, '') === '') + ? 'Address should be a valid Ethereum contract address or ENS name' + : undefined +}) + export const minMaxLength = (minLen: string | number, maxLen: string | number) => (value: string) => (value.length >= +minLen && value.length <= +maxLen ? undefined : `Should be ${minLen} to ${maxLen} symbols`) export const ADDRESS_REPEATED_ERROR = 'Address already introduced' diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx index c580078d..76cc8d46 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx @@ -99,6 +99,7 @@ const SendCustomTx = ({ text="Recipient*" className={classes.addressInput} fieldMutator={mutators.setRecipient} + mustBeContract /> From 188b00fd622af96e85ea2d6f745568bb5b3cd01c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 5 Sep 2019 12:14:05 +0200 Subject: [PATCH 21/36] Fix labels --- .../Balances/SendModal/screens/ReviewCustomTx/index.jsx | 5 +++++ .../Balances/SendModal/screens/ReviewCustomTx/style.js | 1 + .../Balances/SendModal/screens/SendCustomTx/index.jsx | 2 +- 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx index bf7b607f..72546ede 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx @@ -119,6 +119,11 @@ const ReviewCustomTx = ({ {'ETH'} + + + Data (hex encoded) + + diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js index cfb0904b..374c1840 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js @@ -33,6 +33,7 @@ export const styles = () => ({ borderRadius: '5px', border: `1px solid ${border}`, padding: '11px', + minHeight: '21px', }, data: { wordBreak: 'break-all', diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx index 76cc8d46..bc1d47b5 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx @@ -106,7 +106,7 @@ const SendCustomTx = ({ - Amount + Value Send max From 425d481a7d143664946f4f3bff96309080242c05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 5 Sep 2019 12:32:00 +0200 Subject: [PATCH 22/36] Fix value icon in custom tx review modal --- .../Balances/SendModal/screens/ReviewCustomTx/index.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx index 72546ede..13208568 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx @@ -18,6 +18,7 @@ import Hairline from '~/components/layout/Hairline' import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo' import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils' import { getWeb3 } from '~/logic/wallets/getWeb3' +import { getEthAsToken } from '~/logic/tokens/utils/tokenHelpers' import ArrowDown from '../assets/arrow-down.svg' import { secondary } from '~/theme/variables' import { styles } from './style' @@ -113,7 +114,7 @@ const ReviewCustomTx = ({ - Ether + Ether {tx.value} {'ETH'} From a04757ab59fd5b43eac3c74ef1f379b7e1ce4a95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 9 Sep 2019 10:12:03 +0200 Subject: [PATCH 23/36] Fix composeValidators --- src/components/forms/validator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/forms/validator.js b/src/components/forms/validator.js index 119058ad..284c90e5 100644 --- a/src/components/forms/validator.js +++ b/src/components/forms/validator.js @@ -83,7 +83,7 @@ export const uniqueAddress = (addresses: string[] | List) => simpleMemoi return addressAlreadyExists ? ADDRESS_REPEATED_ERROR : undefined }) -export const composeValidators = (...validators: Function[]): FieldValidator => (value: Field) => validators.reduce((error, validator) => error || validator(value), undefined) +export const composeValidators = (...validators: Function[]): FieldValidator => (value: Field) => validators.reduce((error, validator) => error || (validator && validator(value)), undefined) export const inLimit = (limit: number, base: number, baseText: string, symbol: string = 'ETH') => (value: string) => { const amount = Number(value) From 277bbce1794b9a5605dfeaf3cfdd3499a1418cd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 9 Sep 2019 10:45:08 +0200 Subject: [PATCH 24/36] Remove React Fragments --- src/components/Header/component/CircleDot.jsx | 4 ++-- .../open/components/ReviewInformation/index.jsx | 8 ++++---- src/routes/open/components/SafeNameForm/index.jsx | 4 ++-- .../safe/components/Balances/Receive/index.jsx | 4 ++-- .../SendModal/screens/ChooseTxType/index.jsx | 4 ++-- .../safe/components/Balances/Tokens/index.jsx | 4 ++-- .../Tokens/screens/AddCustomToken/index.jsx | 8 ++++---- .../Balances/Tokens/screens/TokenList/index.jsx | 4 ++-- .../AddOwnerModal/screens/Review/index.jsx | 6 +++--- .../AddOwnerModal/screens/ThresholdForm/index.jsx | 14 +++++++------- .../Settings/ManageOwners/EditOwnerModal/index.jsx | 4 ++-- .../ReplaceOwnerModal/screens/Review/index.jsx | 6 +++--- src/routes/safeList/components/Layout.jsx | 7 +++---- 13 files changed, 38 insertions(+), 39 deletions(-) diff --git a/src/components/Header/component/CircleDot.jsx b/src/components/Header/component/CircleDot.jsx index 32ff7f54..7c54d1e2 100644 --- a/src/components/Header/component/CircleDot.jsx +++ b/src/components/Header/component/CircleDot.jsx @@ -77,7 +77,7 @@ const KeyRing = ({ const img = isWarning ? triangle : key return ( - + <> {!hideDot && } - + ) } diff --git a/src/routes/open/components/ReviewInformation/index.jsx b/src/routes/open/components/ReviewInformation/index.jsx index 056e72c0..0a142121 100644 --- a/src/routes/open/components/ReviewInformation/index.jsx +++ b/src/routes/open/components/ReviewInformation/index.jsx @@ -80,7 +80,7 @@ const ReviewComponent = ({ values, classes, network }: Props) => { const numOwners = getNumOwnersFrom(values) return ( - + <> @@ -151,18 +151,18 @@ const ReviewComponent = ({ values, classes, network }: Props) => { wallet. Make sure you have ETH in this wallet to fund this transaction. - + ) } const ReviewPage = withStyles(styles)(ReviewComponent) const Review = ({ network }: LayoutProps) => (controls: React.Node, { values }: Object) => ( - + <> - + ) export default Review diff --git a/src/routes/open/components/SafeNameForm/index.jsx b/src/routes/open/components/SafeNameForm/index.jsx index aade39f6..da603793 100644 --- a/src/routes/open/components/SafeNameForm/index.jsx +++ b/src/routes/open/components/SafeNameForm/index.jsx @@ -33,7 +33,7 @@ const styles = () => ({ }) const SafeName = ({ classes }: Props) => ( - + <> You are about to create a new Gnosis Safe wallet with one or more owners. First, let's give your new wallet @@ -67,7 +67,7 @@ const SafeName = ({ classes }: Props) => ( Ethereum blockchain. These funds cannot be accessed by Gnosis at any point. - + ) const SafeNameForm = withStyles(styles)(SafeName) diff --git a/src/routes/safe/components/Balances/Receive/index.jsx b/src/routes/safe/components/Balances/Receive/index.jsx index 414b6929..eabe9ef7 100644 --- a/src/routes/safe/components/Balances/Receive/index.jsx +++ b/src/routes/safe/components/Balances/Receive/index.jsx @@ -72,7 +72,7 @@ type Props = { const Receive = ({ classes, onClose, safeAddress, safeName, etherScanLink, }: Props) => ( - + <> Receive funds @@ -110,7 +110,7 @@ const Receive = ({ Done - + ) export default withStyles(styles)(Receive) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx index f9132350..96649b9d 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx @@ -39,7 +39,7 @@ type Props = { } const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => ( - + <> Send @@ -72,7 +72,7 @@ const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => ( - + ) export default withStyles(styles)(ChooseTxType) diff --git a/src/routes/safe/components/Balances/Tokens/index.jsx b/src/routes/safe/components/Balances/Tokens/index.jsx index b5ac8569..70f80291 100644 --- a/src/routes/safe/components/Balances/Tokens/index.jsx +++ b/src/routes/safe/components/Balances/Tokens/index.jsx @@ -40,7 +40,7 @@ const Tokens = (props: Props) => { } = props return ( - + <> Manage Tokens @@ -72,7 +72,7 @@ const Tokens = (props: Props) => { tokens={tokens} /> )} - + ) } diff --git a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx index babc3d8f..dbe9cc5d 100644 --- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx +++ b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx @@ -119,10 +119,10 @@ const AddCustomToken = (props: Props) => { } return ( - + <> {() => ( - + <> Add custom token @@ -196,10 +196,10 @@ const AddCustomToken = (props: Props) => { Save - + )} - + ) } diff --git a/src/routes/safe/components/Balances/Tokens/screens/TokenList/index.jsx b/src/routes/safe/components/Balances/Tokens/screens/TokenList/index.jsx index dd68c257..ad39c8cc 100644 --- a/src/routes/safe/components/Balances/Tokens/screens/TokenList/index.jsx +++ b/src/routes/safe/components/Balances/Tokens/screens/TokenList/index.jsx @@ -124,7 +124,7 @@ class Tokens extends React.Component { const filteredTokens = filterBy(filter, tokens) return ( - + <> @@ -179,7 +179,7 @@ class Tokens extends React.Component { ) })} - + ) } } diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx index d7aa8ad3..a952e8d6 100644 --- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx @@ -44,7 +44,7 @@ const ReviewAddOwner = ({ onSubmit() } return ( - + <> Add new owner @@ -97,7 +97,7 @@ const ReviewAddOwner = ({ - {owners.map(owner => ( + {owners.map((owner) => ( @@ -169,7 +169,7 @@ const ReviewAddOwner = ({ Submit - + ) } diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx index c68b3db8..0c5af1de 100644 --- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx @@ -39,7 +39,7 @@ const ThresholdForm = ({ } return ( - + <> Add new owner @@ -52,7 +52,7 @@ const ThresholdForm = ({ {() => ( - + <> @@ -68,8 +68,8 @@ const ThresholdForm = ({ ( - + render={(props) => ( + <> {[...Array(Number(owners.size + 1))].map((x, index) => ( @@ -82,7 +82,7 @@ const ThresholdForm = ({ {props.meta.error} )} - + )} validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(owners.size + 1))} data-testid="threshold-select-input" @@ -115,10 +115,10 @@ owner(s) Review - + )} - + ) } diff --git a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx index ce2d3e96..6fe47db6 100644 --- a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx @@ -73,7 +73,7 @@ const EditOwnerComponent = ({ {() => ( - + <> - + )} diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx index bfa72933..bfce4e73 100644 --- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx @@ -58,7 +58,7 @@ const ReviewRemoveOwner = ({ } return ( - + <> Replace owner @@ -112,7 +112,7 @@ const ReviewRemoveOwner = ({ {owners.map( - owner => owner.address !== ownerAddress && ( + (owner) => owner.address !== ownerAddress && ( @@ -215,7 +215,7 @@ const ReviewRemoveOwner = ({ Submit - + ) } diff --git a/src/routes/safeList/components/Layout.jsx b/src/routes/safeList/components/Layout.jsx index e684accf..a7dde521 100644 --- a/src/routes/safeList/components/Layout.jsx +++ b/src/routes/safeList/components/Layout.jsx @@ -14,12 +14,11 @@ const SafeList = ({ safes, provider }: Props) => { const safesAvailable = safes && safes.count() > 0 return ( - + <> { safesAvailable ? - : - } - + : } + ) } From efdba0fd57a42eca47848119a5f0f4dcbcd5d547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 9 Sep 2019 11:31:42 +0200 Subject: [PATCH 25/36] Fix modal window form footers --- .../SendModal/screens/SendCustomTx/index.jsx | 77 +++++++++-------- .../SendModal/screens/SendFunds/index.jsx | 82 ++++++++++--------- 2 files changed, 84 insertions(+), 75 deletions(-) diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx index bc1d47b5..82539198 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx @@ -74,22 +74,27 @@ const SendCustomTx = ({ - - - - - Arrow Down - - - - - - - {(...args) => { - const mutators = args[3] + + {(...args) => { + const mutators = args[3] - return ( - <> + return ( + <> + + + + + Arrow Down + + + + + - - - - - - - ) - }} - - + + + + + + + + ) + }} + ) } diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx index dbf7c6b8..21206abc 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx @@ -81,24 +81,28 @@ const SendFunds = ({ - - - - - Arrow Down - - - - - - - {(...args) => { - const formState = args[2] - const mutators = args[3] - const { token } = formState.values - - return ( - <> + + {(...args) => { + const formState = args[2] + const mutators = args[3] + const { token } = formState.values + return ( + <> + + + + + Arrow Down + + + + + - - - - - - - ) - }} - - + + + + + + + + ) + }} + ) } From bef4631c71733be4e893de4f8f47488b9b98d65d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 9 Sep 2019 14:51:04 +0200 Subject: [PATCH 26/36] Improve designs in Receive modal --- .../components/Balances/Receive/index.jsx | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/routes/safe/components/Balances/Receive/index.jsx b/src/routes/safe/components/Balances/Receive/index.jsx index eabe9ef7..53987fd6 100644 --- a/src/routes/safe/components/Balances/Receive/index.jsx +++ b/src/routes/safe/components/Balances/Receive/index.jsx @@ -14,13 +14,13 @@ import Row from '~/components/layout/Row' import Hairline from '~/components/layout/Hairline' import Col from '~/components/layout/Col' import { - xxl, lg, sm, md, background, secondary, + lg, md, secondary, secondaryText, } from '~/theme/variables' import { copyToClipboard } from '~/utils/clipboard' const styles = () => ({ heading: { - padding: `${sm} ${lg}`, + padding: `${md} ${lg}`, justifyContent: 'space-between', maxHeight: '75px', boxSizing: 'border-box', @@ -32,24 +32,27 @@ const styles = () => ({ height: '35px', width: '35px', }, - detailsContainer: { - backgroundColor: background, - }, qrContainer: { backgroundColor: '#fff', padding: md, - borderRadius: '3px', - boxShadow: '0 0 5px 0 rgba(74, 85, 121, 0.5)', + borderRadius: '6px', + border: `1px solid ${secondaryText}`, }, safeName: { - margin: `${xxl} 0 20px`, + margin: `${lg} 0 ${lg}`, }, buttonRow: { height: '84px', justifyContent: 'center', + '& > button': { + fontFamily: 'Averta', + fontSize: '16px', + boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)', + }, }, addressContainer: { - marginTop: '28px', + marginTop: '25px', + marginBottom: '25px', }, address: { marginLeft: '6px', @@ -81,7 +84,7 @@ const Receive = ({ - + {safeName} @@ -106,7 +109,7 @@ const Receive = ({ - From a43002787fcaf6120d6f402cc8f2cf013ec86727 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Mon, 9 Sep 2019 20:19:12 +0200 Subject: [PATCH 27/36] Improve designs in Send modal --- .../Balances/SendModal/SafeInfo/index.jsx | 2 +- .../components/Balances/SendModal/index.jsx | 6 ++-- .../SendModal/screens/ChooseTxType/index.jsx | 32 +++++++++++++++---- .../screens/ReviewCustomTx/index.jsx | 7 ++-- .../SendModal/screens/ReviewCustomTx/style.js | 10 +++++- .../SendModal/screens/ReviewTx/index.jsx | 7 ++-- .../SendModal/screens/ReviewTx/style.js | 13 +++++--- .../SendModal/screens/SendCustomTx/index.jsx | 5 +-- .../SendModal/screens/SendCustomTx/style.js | 12 +++++-- .../SendModal/screens/SendFunds/index.jsx | 5 +-- .../SendModal/screens/SendFunds/style.js | 12 +++++-- .../SendModal/screens/assets/code.svg | 3 ++ .../SendModal/screens/assets/token.svg | 3 ++ 13 files changed, 86 insertions(+), 31 deletions(-) create mode 100644 src/routes/safe/components/Balances/SendModal/screens/assets/code.svg create mode 100644 src/routes/safe/components/Balances/SendModal/screens/assets/token.svg diff --git a/src/routes/safe/components/Balances/SendModal/SafeInfo/index.jsx b/src/routes/safe/components/Balances/SendModal/SafeInfo/index.jsx index 0246c0bf..03084b4d 100644 --- a/src/routes/safe/components/Balances/SendModal/SafeInfo/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/SafeInfo/index.jsx @@ -24,7 +24,7 @@ const styles = () => ({ letterSpacing: -0.5, backgroundColor: border, width: 'fit-content', - padding: '6px', + padding: '5px 10px', marginTop: xs, borderRadius: '3px', }, diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx index 8ffae44a..ba0f93bb 100644 --- a/src/routes/safe/components/Balances/SendModal/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/index.jsx @@ -67,8 +67,7 @@ const Send = ({ setTx({}) }, [isOpen]) - const scalableModalSize = activeScreen === 'sendCustomTx' || activeScreen === 'reviewCustomTx' - const scalableStaticModalSize = activeScreen === 'chooseTxType' + const scalableModalSize = activeScreen === 'chooseTxType' const handleTxCreation = (txInfo) => { setActiveScreen('reviewTx') @@ -87,8 +86,7 @@ const Send = ({ handleClose={onClose} open={isOpen} paperClassName={cn( - scalableStaticModalSize && classes.scalableStaticModalWindow, - scalableModalSize && classes.scalableModalWindow, + scalableModalSize ? classes.scalableStaticModalWindow : classes.scalableModalWindow, )} > <> diff --git a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx index 96649b9d..3bb6e459 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.jsx @@ -1,5 +1,6 @@ // @flow import * as React from 'react' +import classNames from 'classnames/bind' import { withStyles } from '@material-ui/core/styles' import Close from '@material-ui/icons/Close' import IconButton from '@material-ui/core/IconButton' @@ -8,11 +9,14 @@ import Button from '~/components/layout/Button' import Row from '~/components/layout/Row' import Col from '~/components/layout/Col' import Hairline from '~/components/layout/Hairline' -import { lg, sm } from '~/theme/variables' +import Img from '~/components/layout/Img' +import Token from '../assets/token.svg' +import Code from '../assets/code.svg' +import { lg, md, sm } from '~/theme/variables' const styles = () => ({ heading: { - padding: `${sm} ${lg}`, + padding: `${md} ${lg}`, justifyContent: 'space-between', boxSizing: 'border-box', maxHeight: '75px', @@ -26,10 +30,22 @@ const styles = () => ({ }, buttonColumn: { padding: '52px 0', + '& > button': { + fontSize: '16px', + fontFamily: 'Averta', + }, }, - secondButton: { - marginTop: 10, + firstButton: { + boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)', + marginBottom: 15, }, + iconSmall: { + fontSize: 16, + }, + leftIcon: { + marginRight: sm, + }, + }) type Props = { @@ -57,18 +73,20 @@ const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => ( minHeight={52} onClick={() => setActiveScreen('sendFunds')} variant="contained" + className={classes.firstButton} > - SEND FUNDS + Send funds + Send funds diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx index 13208568..2a8c6d80 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx @@ -135,7 +135,7 @@ const ReviewCustomTx = ({ - diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js index 374c1840..75fc858a 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js @@ -5,7 +5,7 @@ import { export const styles = () => ({ heading: { - padding: `${sm} ${lg}`, + padding: `${md} ${lg}`, justifyContent: 'flex-start', boxSizing: 'border-box', maxHeight: '75px', @@ -48,5 +48,13 @@ export const styles = () => ({ buttonRow: { height: '84px', justifyContent: 'center', + '& > button': { + fontFamily: 'Averta', + fontSize: '16px', + }, + }, + submitButton: { + boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)', + marginLeft: '15px', }, }) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx index b330156d..c20fd85c 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx @@ -138,7 +138,7 @@ const ReviewTx = ({ - diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.js b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.js index 94c10bc8..6b44b167 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.js +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/style.js @@ -5,7 +5,7 @@ import { export const styles = () => ({ heading: { - padding: `${sm} ${lg}`, + padding: `${md} ${lg}`, justifyContent: 'flex-start', boxSizing: 'border-box', maxHeight: '75px', @@ -32,8 +32,13 @@ export const styles = () => ({ buttonRow: { height: '84px', justifyContent: 'center', - position: 'absolute', - bottom: 0, - width: '100%', + '& > button': { + fontFamily: 'Averta', + fontSize: '16px', + }, + }, + submitButton: { + boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)', + marginLeft: '15px', }, }) diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx index 82539198..9aba3543 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx @@ -151,16 +151,17 @@ const SendCustomTx = ({ - diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js index 841c5d43..96a1149e 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js @@ -1,9 +1,9 @@ // @flow -import { lg, md, sm } from '~/theme/variables' +import { lg, md } from '~/theme/variables' export const styles = () => ({ heading: { - padding: `${sm} ${lg}`, + padding: `${md} ${lg}`, justifyContent: 'flex-start', boxSizing: 'border-box', maxHeight: '75px', @@ -27,6 +27,14 @@ export const styles = () => ({ buttonRow: { height: '84px', justifyContent: 'center', + '& > button': { + fontFamily: 'Averta', + fontSize: '16px', + }, + }, + submitButton: { + boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)', + marginLeft: '15px', }, dataInput: { '& TextField-root-294': { diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx index 21206abc..22b1eff9 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx @@ -161,16 +161,17 @@ const SendFunds = ({ - diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/style.js b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/style.js index e1d9ef62..b2740346 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/style.js +++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/style.js @@ -1,11 +1,11 @@ // @flow import { - lg, md, sm, secondaryText, + lg, md, secondaryText, } from '~/theme/variables' export const styles = () => ({ heading: { - padding: `${sm} ${lg}`, + padding: `${md} ${lg}`, justifyContent: 'flex-start', boxSizing: 'border-box', maxHeight: '75px', @@ -29,5 +29,13 @@ export const styles = () => ({ buttonRow: { height: '84px', justifyContent: 'center', + '& > button': { + fontFamily: 'Averta', + fontSize: '16px', + }, + }, + submitButton: { + boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)', + marginLeft: '15px', }, }) diff --git a/src/routes/safe/components/Balances/SendModal/screens/assets/code.svg b/src/routes/safe/components/Balances/SendModal/screens/assets/code.svg new file mode 100644 index 00000000..ad056d55 --- /dev/null +++ b/src/routes/safe/components/Balances/SendModal/screens/assets/code.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/safe/components/Balances/SendModal/screens/assets/token.svg b/src/routes/safe/components/Balances/SendModal/screens/assets/token.svg new file mode 100644 index 00000000..f2abb8c5 --- /dev/null +++ b/src/routes/safe/components/Balances/SendModal/screens/assets/token.svg @@ -0,0 +1,3 @@ + + + From 8aad19bcf34b7dc12edd413e4ccb388b3e5d941d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Tue, 10 Sep 2019 12:58:21 +0200 Subject: [PATCH 28/36] Fix styles for send and receive funds buttons --- src/routes/safe/components/Balances/style.js | 8 ++++++++ src/routes/safe/components/style.js | 10 ++++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/routes/safe/components/Balances/style.js b/src/routes/safe/components/Balances/style.js index 224dac23..b49a7a1a 100644 --- a/src/routes/safe/components/Balances/style.js +++ b/src/routes/safe/components/Balances/style.js @@ -34,10 +34,18 @@ export const styles = (theme: Object) => ({ width: '95px', minWidth: '95px', marginLeft: sm, + borderRadius: '4px', + '& > span': { + fontSize: '14px', + }, }, send: { width: '75px', minWidth: '75px', + borderRadius: '4px', + '& > span': { + fontSize: '14px', + }, }, leftIcon: { marginRight: sm, diff --git a/src/routes/safe/components/style.js b/src/routes/safe/components/style.js index 8ef1345b..17d5315d 100644 --- a/src/routes/safe/components/style.js +++ b/src/routes/safe/components/style.js @@ -41,17 +41,23 @@ export const styles = () => ({ balance: { marginLeft: 'auto', overflow: 'hidden', - borderRadius: '3px', - padding: '20px', }, receive: { width: '95px', minWidth: '95px', marginLeft: sm, + borderRadius: '4px', + '& > span': { + fontSize: '14px', + }, }, send: { width: '75px', minWidth: '75px', + borderRadius: '4px', + '& > span': { + fontSize: '14px', + }, }, leftIcon: { marginRight: sm, From 1af8ffad4c45e7c756435a321c2950fd69cc8901 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Tue, 10 Sep 2019 13:15:04 +0200 Subject: [PATCH 29/36] Fix value validator in send custom transaction --- .../Balances/SendModal/screens/ReviewCustomTx/index.jsx | 4 ++-- .../Balances/SendModal/screens/SendCustomTx/index.jsx | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx index 2a8c6d80..a78d959f 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx @@ -116,8 +116,8 @@ const ReviewCustomTx = ({ Ether - {tx.value} - {'ETH'} + {tx.value || 0} + {' ETH'} diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx index 9aba3543..d1c9e8d5 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx @@ -20,7 +20,6 @@ import { composeValidators, mustBeFloat, maxValue, - greaterThan, } from '~/components/forms/validator' import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo' import ArrowDown from '../assets/arrow-down.svg' @@ -126,7 +125,6 @@ const SendCustomTx = ({ type="text" validate={composeValidators( mustBeFloat, - greaterThan(0), maxValue(ethBalance), )} placeholder="Value*" From 1429f837c918a78576fc0667ea0bd035fab80e34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= Date: Thu, 12 Sep 2019 17:21:22 +0200 Subject: [PATCH 30/36] Use default height for small buttons --- src/routes/safe/components/Balances/Receive/index.jsx | 2 +- .../Balances/SendModal/screens/ReviewCustomTx/index.jsx | 5 ++--- .../components/Balances/SendModal/screens/ReviewTx/index.jsx | 3 +-- .../Balances/SendModal/screens/SendCustomTx/index.jsx | 3 +-- .../Balances/SendModal/screens/SendFunds/index.jsx | 3 +-- 5 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/routes/safe/components/Balances/Receive/index.jsx b/src/routes/safe/components/Balances/Receive/index.jsx index 53987fd6..34f4cfb2 100644 --- a/src/routes/safe/components/Balances/Receive/index.jsx +++ b/src/routes/safe/components/Balances/Receive/index.jsx @@ -109,7 +109,7 @@ const Receive = ({ - diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx index a78d959f..e391ada9 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx @@ -127,7 +127,7 @@ const ReviewCustomTx = ({ - + {tx.data} @@ -135,7 +135,7 @@ const ReviewCustomTx = ({ -