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,