+ 
{
+ copyToClipboard(content)
+ setClicked(true)
+ }}
+ />
+
+
{story()}
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/components/Header/component/Layout.stories.js b/src/components/Header/component/Layout.stories.js
index 7d0ccbe3..e8b235b7 100644
--- a/src/components/Header/component/Layout.stories.js
+++ b/src/components/Header/component/Layout.stories.js
@@ -8,7 +8,7 @@ import UserDetails from './ProviderDetails/UserDetails'
import ProviderDisconnected from './ProviderInfo/ProviderDisconnected'
import ConnectDetails from './ProviderDetails/ConnectDetails'
-const FrameDecorator = story => ,
}
const Controls = ({
- onPrevious, firstPage, penultimate, lastPage, disabled,
+ onPrevious,
+ firstPage,
+ penultimate,
+ lastPage,
+ disabled,
+ currentStep,
+ buttonLabels,
}: Props) => {
- // eslint-disable-next-line
- const next = firstPage ? 'Start' : penultimate ? 'Review' : lastPage ? 'Submit' : 'Next'
const back = firstPage ? 'Cancel' : 'Back'
+ let next
+ if (!buttonLabels) {
+ // eslint-disable-next-line
+ next = firstPage ? 'Start' : penultimate ? 'Review' : lastPage ? 'Submit' : 'Next'
+ } else {
+ // $FlowFixMe
+ next = buttonLabels[currentStep]
+ }
+
return (
diff --git a/src/routes/load/components/ReviewInformation/index.jsx b/src/routes/load/components/ReviewInformation/index.jsx
index 940586a3..72617944 100644
--- a/src/routes/load/components/ReviewInformation/index.jsx
+++ b/src/routes/load/components/ReviewInformation/index.jsx
@@ -2,29 +2,23 @@
import * as React from 'react'
import classNames from 'classnames'
import { withStyles } from '@material-ui/core/styles'
-import OpenInNew from '@material-ui/icons/OpenInNew'
import Block from '~/components/layout/Block'
import Identicon from '~/components/Identicon'
import OpenPaper from '~/components/Stepper/OpenPaper'
import Col from '~/components/layout/Col'
import Row from '~/components/layout/Row'
-import Link from '~/components/layout/Link'
+import EtherscanBtn from '~/components/EtherscanBtn'
import Paragraph from '~/components/layout/Paragraph'
+import CopyBtn from '~/components/CopyBtn'
import Hairline from '~/components/layout/Hairline'
import {
- xs, sm, lg, border, secondary,
+ xs, sm, lg, border,
} from '~/theme/variables'
import { shortVersionOf } from '~/logic/wallets/ethAddresses'
import { getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
import { getOwnerNameBy, getOwnerAddressBy, getNumOwnersFrom } from '~/routes/open/components/fields'
-import { getEtherScanLink } from '~/logic/wallets/getWeb3'
import { FIELD_LOAD_NAME, FIELD_LOAD_ADDRESS, THRESHOLD } from '~/routes/load/components/fields'
-const openIconStyle = {
- height: '16px',
- color: secondary,
-}
-
const styles = () => ({
root: {
minHeight: '300px',
@@ -51,6 +45,9 @@ const styles = () => ({
},
user: {
justifyContent: 'left',
+ '& > p': {
+ marginRight: sm,
+ },
},
open: {
paddingLeft: sm,
@@ -65,15 +62,12 @@ const styles = () => ({
},
address: {
paddingLeft: '6px',
+ marginRight: sm,
},
})
-type LayoutProps = {
- network: string,
+type Props = {
userAddress: string,
-}
-
-type Props = LayoutProps & {
values: Object,
classes: Object,
}
@@ -97,9 +91,7 @@ const checkUserAddressOwner = (values: Object, userAddress: string): boolean =>
class ReviewComponent extends React.PureComponent {
render() {
- const {
- values, classes, network, userAddress,
- } = this.props
+ const { values, classes, userAddress } = this.props
const isOwner = checkUserAddressOwner(values, userAddress)
const owners = getAccountsFrom(values)
@@ -132,9 +124,8 @@ class ReviewComponent extends React.PureComponent {
{shortVersionOf(safeAddress, 4)}
-
-
@@ -177,13 +168,8 @@ class ReviewComponent extends React.PureComponent {
{address}
-
-
diff --git a/src/routes/open/components/Layout.jsx b/src/routes/open/components/Layout.jsx
index 0e6a30e5..75fe9fba 100644
--- a/src/routes/open/components/Layout.jsx
+++ b/src/routes/open/components/Layout.jsx
@@ -13,10 +13,10 @@ import { getOwnerNameBy, getOwnerAddressBy, FIELD_CONFIRMATIONS } from '~/routes
import { history } from '~/store'
import { secondary } from '~/theme/variables'
-const getSteps = () => ['Start', 'Owners and confirmations', 'Review']
+const getSteps = () => ['Name', 'Owners and confirmations', 'Review']
const initialValuesFrom = (userAccount: string) => ({
- [getOwnerNameBy(0)]: 'My Metamask (me)',
+ [getOwnerNameBy(0)]: 'My Wallet',
[getOwnerAddressBy(0)]: userAccount,
[FIELD_CONFIRMATIONS]: '1',
})
@@ -69,7 +69,9 @@ const Layout = ({
>
{SafeNameField}
{SafeOwnersFields}
- {Review}
+
+ {Review}
+
) : (
diff --git a/src/routes/open/components/Layout.stories.js b/src/routes/open/components/Layout.stories.js
index 98f4a541..08606dc3 100644
--- a/src/routes/open/components/Layout.stories.js
+++ b/src/routes/open/components/Layout.stories.js
@@ -8,7 +8,7 @@ import { getProviderInfo } from '~/logic/wallets/getWeb3'
import { sleep } from '~/utils/timer'
import Component from './Layout'
-const FrameDecorator = story => ('0.00')
const names = getNamesFrom(values)
const addresses = getAccountsFrom(values)
const numOwners = getNumOwnersFrom(values)
+ useEffect(() => {
+ let isCurrent = true
+ const estimateGas = async () => {
+ const web3 = getWeb3()
+ const { fromWei, toBN } = web3.utils
+ const estimatedGasCosts = await estimateGasForDeployingSafe(addresses, numOwners, userAccount)
+ const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')
+ const roundedGasCosts = parseFloat(gasCostsAsEth).toFixed(3)
+ if (isCurrent) {
+ setGasCosts(roundedGasCosts)
+ }
+ }
+
+ estimateGas()
+
+ return () => {
+ isCurrent = false
+ }
+ }, [])
+
return (
-
+ <>
@@ -129,13 +148,8 @@ const ReviewComponent = ({ values, classes, network }: Props) => {
{addresses[index]}
-
-
@@ -148,21 +162,26 @@ const ReviewComponent = ({ values, classes, network }: Props) => {
You're about to create a new Safe and will have to confirm a transaction with your currently connected
- wallet. Make sure you have ETH in this wallet to fund this transaction.
+ wallet. The creation will cost approximately
+ {' '}
+ {gasCosts}
+ {' '}
+ ETH. The exact amount will be determined by your
+ wallet.
-
+
)
}
const ReviewPage = withStyles(styles)(ReviewComponent)
-const Review = ({ network }: LayoutProps) => (controls: React.Node, { values }: Object) => (
-
+const Review = () => (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..203d557c 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,13 +67,13 @@ const SafeName = ({ classes }: Props) => (
Ethereum blockchain. These funds cannot be accessed by Gnosis at any point.
-
+
)
const SafeNameForm = withStyles(styles)(SafeName)
const SafeNamePage = () => (controls: React.Node) => (
-
+
)
diff --git a/src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx b/src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx
index 126c94cc..54b6ac95 100644
--- a/src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx
+++ b/src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx
@@ -109,7 +109,13 @@ const SafeOwners = (props: Props) => {
<>
- Specify the owners of the Safe.
+ Your Safe will have one or more owners. We have prefilled the first owner with your connected wallet details,
+ but you are free to change this to a different owner.
+
+
+ Add additional owners (e.g. wallets of your teammates) and specify how many of them have to confirm a + transaction before it gets executed. In general, the more confirmations required, the more secure is your + Safe.
{
+ async componentDidMount() {
+ await initContracts()
+ }
+
onCallSafeContractSubmit = async (values) => {
try {
const { userAccount, addSafe } = this.props
diff --git a/src/routes/open/container/selector.js b/src/routes/open/container/selector.js
index 24fb891d..be0e8be9 100644
--- a/src/routes/open/container/selector.js
+++ b/src/routes/open/container/selector.js
@@ -2,7 +2,7 @@
import { createStructuredSelector } from 'reselect'
import { providerNameSelector, userAccountSelector, networkSelector } from '~/logic/wallets/store/selectors'
-export default createStructuredSelector({
+export default createStructuredSelector({
provider: providerNameSelector,
network: networkSelector,
userAccount: userAccountSelector,
diff --git a/src/routes/open/utils/safeDataExtractor.js b/src/routes/open/utils/safeDataExtractor.js
index 5d198bfc..b20f070f 100644
--- a/src/routes/open/utils/safeDataExtractor.js
+++ b/src/routes/open/utils/safeDataExtractor.js
@@ -4,17 +4,17 @@ import { makeOwner } from '~/routes/safe/store/models/owner'
export const getAccountsFrom = (values: Object): string[] => {
const accounts = Object.keys(values)
.sort()
- .filter(key => /^owner\d+Address$/.test(key))
+ .filter((key) => /^owner\d+Address$/.test(key))
- return accounts.map(account => values[account]).slice(0, values.owners)
+ return accounts.map((account) => values[account]).slice(0, values.owners)
}
export const getNamesFrom = (values: Object): string[] => {
const accounts = Object.keys(values)
.sort()
- .filter(key => /^owner\d+Name$/.test(key))
+ .filter((key) => /^owner\d+Name$/.test(key))
- return accounts.map(account => values[account]).slice(0, values.owners)
+ return accounts.map((account) => values[account]).slice(0, values.owners)
}
export const getOwnersFrom = (names: string[], addresses: string[]): Array => {
diff --git a/src/routes/opening/Layout.stories.js b/src/routes/opening/Layout.stories.js
index 5c208cbb..940a9062 100644
--- a/src/routes/opening/Layout.stories.js
+++ b/src/routes/opening/Layout.stories.js
@@ -5,7 +5,7 @@ import styles from '~/components/layout/PageFrame/index.scss'
import { ETHEREUM_NETWORK } from '~/logic/wallets/getWeb3'
import Component from './component'
-const FrameDecorator = story =>
+ <>
Receive funds
@@ -84,7 +84,7 @@ const Receive = ({
-
{safeName}
@@ -109,11 +109,11 @@ const Receive = ({
-
-
+
)
export default withStyles(styles)(Receive)
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 b20bb25f..2a5d5799 100644
--- a/src/routes/safe/components/Balances/SendModal/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/index.jsx
@@ -5,9 +5,18 @@ import cn from 'classnames'
import { withStyles } from '@material-ui/core/styles'
import { type Token } from '~/logic/tokens/store/model/token'
import Modal from '~/components/Modal'
-import ChooseTxType from './screens/ChooseTxType'
-import SendFunds from './screens/SendFunds'
-import ReviewTx from './screens/ReviewTx'
+
+const ChooseTxType = React.lazy(() => import('./screens/ChooseTxType'))
+
+const SendFunds = React.lazy(() => import('./screens/SendFunds'))
+
+const ReviewTx = React.lazy(() => import('./screens/ReviewTx'))
+
+const SendCustomTx = React.lazy(() => import('./screens/SendCustomTx'))
+
+const ReviewCustomTx = React.lazy(() => import('./screens/ReviewCustomTx'))
+
+type ActiveScreen = 'chooseTxType' | 'sendFunds' | 'reviewTx' | 'sendCustomTx' | 'reviewCustomTx'
type Props = {
onClose: () => void,
@@ -20,19 +29,23 @@ type Props = {
tokens: List,
selectedToken: string,
createTransaction: Function,
+ activeScreenType: ActiveScreen
}
-type ActiveScreen = 'chooseTxType' | 'sendFunds' | 'reviewTx'
type TxStateType =
| {
token: Token,
recipientAddress: string,
amount: string,
+ data: string,
}
| Object
const styles = () => ({
- smallerModalWindow: {
+ scalableModalWindow: {
+ height: 'auto',
+ },
+ scalableStaticModalWindow: {
height: 'auto',
position: 'static',
},
@@ -49,23 +62,27 @@ const Send = ({
tokens,
selectedToken,
createTransaction,
+ activeScreenType,
}: Props) => {
- const [activeScreen, setActiveScreen] = useState('sendFunds')
+ const [activeScreen, setActiveScreen] = useState(activeScreenType || 'chooseTxType')
const [tx, setTx] = useState({})
- const smallerModalSize = activeScreen === 'chooseTxType'
+
+ useEffect(() => {
+ setActiveScreen(activeScreenType || 'chooseTxType')
+ setTx({})
+ }, [isOpen])
+
+ const scalableModalSize = activeScreen === 'chooseTxType'
+
const handleTxCreation = (txInfo) => {
setActiveScreen('reviewTx')
setTx(txInfo)
}
- const onClickBack = () => setActiveScreen('sendFunds')
- useEffect(
- () => () => {
- setActiveScreen('sendFunds')
- setTx({})
- },
- [isOpen],
- )
+ const handleCustomTxCreation = (customTxInfo) => {
+ setActiveScreen('reviewCustomTx')
+ setTx(customTxInfo)
+ }
return (
-
+ <>
{activeScreen === 'chooseTxType' &&
+ {activeScreen === 'sendCustomTx' && (
+
)
}
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 340c89aa..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 = {
@@ -39,7 +55,7 @@ type Props = {
}
const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => (
-
+ <>
Send
@@ -57,22 +73,24 @@ const ChooseTxType = ({ classes, onClose, setActiveScreen }: Props) => (
minHeight={52}
onClick={() => setActiveScreen('sendFunds')}
variant="contained"
+ className={classes.firstButton}
>
- SEND FUNDS
+ 
+ Send funds
-
+
)
export default withStyles(styles)(ChooseTxType)
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..e391ada9
--- /dev/null
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/index.jsx
@@ -0,0 +1,159 @@
+// @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 { 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'
+
+type Props = {
+ onClose: () => void,
+ setActiveScreen: Function,
+ classes: Object,
+ safeAddress: string,
+ etherScanLink: string,
+ safeName: string,
+ ethBalance: string,
+ tx: Object,
+ createTransaction: Function,
+}
+
+const openIconStyle = {
+ height: '16px',
+ color: secondary,
+}
+
+const ReviewCustomTx = ({
+ onClose,
+ setActiveScreen,
+ classes,
+ safeAddress,
+ etherScanLink,
+ safeName,
+ ethBalance,
+ tx,
+ createTransaction,
+}: Props) => (
+
+ {({ openSnackbar }) => {
+ const submitTx = async () => {
+ const web3 = getWeb3()
+ const txRecipient = tx.recipientAddress
+ const txData = tx.data
+ const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : 0
+
+ createTransaction(safeAddress, txRecipient, txValue, txData, openSnackbar)
+ onClose()
+ }
+
+ return (
+ <>
+
+
+ Send Funds
+
+ 2 of 2
+
+
+
+
+
+ 
+
+
+
+
+ Recipient
+
+
+
+
+ {tx.recipientAddress}
+
+
+
+
+
+
+ Value
+
+
+
+ .logoUri})
+
+ {tx.value || 0}
+ {' ETH'}
+
+
+
+
+ Data (hex encoded)
+
+
+
+
+ {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..75fc858a
--- /dev/null
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCustomTx/style.js
@@ -0,0 +1,60 @@
+// @flow
+import {
+ lg, md, sm, secondaryText, border,
+} from '~/theme/variables'
+
+export const styles = () => ({
+ heading: {
+ padding: `${md} ${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',
+ minHeight: '21px',
+ },
+ data: {
+ wordBreak: 'break-all',
+ overflow: 'auto',
+ fontSize: '14px',
+ fontFamily: 'Averta',
+ maxHeight: '100px',
+ letterSpacing: 'normal',
+ fontStretch: 'normal',
+ lineHeight: '1.43',
+ },
+ 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 9d233a14..b301038e 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewTx/index.jsx
@@ -27,11 +27,11 @@ import { styles } from './style'
type Props = {
onClose: () => void,
+ setActiveScreen: Function,
classes: Object,
safeAddress: string,
etherScanLink: string,
safeName: string,
- onClickBack: Function,
ethBalance: string,
tx: Object,
createTransaction: Function,
@@ -44,13 +44,13 @@ const openIconStyle = {
const ReviewTx = ({
onClose,
+ setActiveScreen,
classes,
safeAddress,
etherScanLink,
safeName,
ethBalance,
tx,
- onClickBack,
createTransaction,
}: Props) => (
@@ -138,20 +138,19 @@ 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
new file mode 100644
index 00000000..b36d895e
--- /dev/null
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/index.jsx
@@ -0,0 +1,175 @@
+// @flow
+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'
+import GnoForm from '~/components/forms/GnoForm'
+import AddressInput from '~/components/forms/AddressInput'
+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'
+import {
+ composeValidators,
+ mustBeFloat,
+ maxValue,
+ mustBeEthereumContractAddress,
+} from '~/components/forms/validator'
+import SafeInfo from '~/routes/safe/components/Balances/SendModal/SafeInfo'
+import ArrowDown from '../assets/arrow-down.svg'
+import { styles } from './style'
+
+type Props = {
+ onClose: () => void,
+ classes: Object,
+ safeAddress: string,
+ etherScanLink: string,
+ safeName: string,
+ ethBalance: string,
+ onSubmit: Function,
+ initialValues: Object,
+}
+
+const SendCustomTx = ({
+ classes,
+ onClose,
+ safeAddress,
+ etherScanLink,
+ safeName,
+ ethBalance,
+ onSubmit,
+ initialValues,
+}: Props) => {
+ const handleSubmit = (values: Object) => {
+ if (values.data || values.value) {
+ onSubmit(values)
+ }
+ }
+
+ const formMutators = {
+ setMax: (args, state, utils) => {
+ utils.changeValue(state, 'value', () => ethBalance)
+ },
+ setRecipient: (args, state, utils) => {
+ utils.changeValue(state, 'recipientAddress', () => args[0])
+ },
+ }
+
+ return (
+ <>
+
+
+ Send custom transactions
+
+ 1 of 2
+
+
+
+
+ {(...args) => {
+ const mutators = args[3]
+
+ return (
+ <>
+
+
+
+
+
+
+
+ Value
+
+
+ Send max
+
+
+
+
+ ETH,
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+ )
+ }}
+
+
+ )
+}
+
+export default withStyles(styles)(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
new file mode 100644
index 00000000..96a1149e
--- /dev/null
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendCustomTx/style.js
@@ -0,0 +1,45 @@
+// @flow
+import { lg, md } from '~/theme/variables'
+
+export const styles = () => ({
+ heading: {
+ padding: `${md} ${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',
+ '& > button': {
+ fontFamily: 'Averta',
+ fontSize: '16px',
+ },
+ },
+ submitButton: {
+ boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
+ marginLeft: '15px',
+ },
+ dataInput: {
+ '& TextField-root-294': {
+ lineHeight: 'auto',
+ border: 'green',
+ },
+ },
+})
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 890863c9..0d342252 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 = ({
-
-
-
- {(...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 (
+ <>
+
+
+
-
-
-
-
-
- )
- }}
-
-
+
+
+
+
+
+
+ )
+ }}
+
)
}
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..31d3c991 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,9 @@
// @flow
-import {
- lg, md, sm, secondaryText,
-} from '~/theme/variables'
+import { 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 +27,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 @@
+
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 75b13370..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
@@ -189,17 +189,17 @@ const AddCustomToken = (props: Props) => {
-
-
+
)}
-
+
)
}
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/index.jsx b/src/routes/safe/components/Balances/index.jsx
index 7edf6190..149ccc25 100644
--- a/src/routes/safe/components/Balances/index.jsx
+++ b/src/routes/safe/components/Balances/index.jsx
@@ -2,12 +2,12 @@
import * as React from 'react'
import { List } from 'immutable'
import classNames from 'classnames/bind'
-import CallMade from '@material-ui/icons/CallMade'
-import CallReceived from '@material-ui/icons/CallReceived'
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'
@@ -178,7 +178,7 @@ class Balances extends React.Component {
onClick={() => this.showSendFunds(row.asset.name)}
testId="balance-send-btn"
>
- {
className={classes.receive}
onClick={this.onShow('Receive')}
>
- {
tokens={activeTokens}
selectedToken={sendFunds.selectedToken}
createTransaction={createTransaction}
+ activeScreenType="sendFunds"
/>
({
root: {
@@ -30,17 +30,25 @@ export const styles = (theme: Object) => ({
justifyContent: 'flex-end',
visibility: 'hidden',
},
- send: {
- minWidth: '0px',
- marginRight: sm,
- width: '70px',
- },
receive: {
- minWidth: '0px',
width: '95px',
+ minWidth: '95px',
+ marginLeft: sm,
+ borderRadius: '4px',
+ '& > span': {
+ fontSize: '14px',
+ },
+ },
+ send: {
+ width: '75px',
+ minWidth: '75px',
+ borderRadius: '4px',
+ '& > span': {
+ fontSize: '14px',
+ },
},
leftIcon: {
- marginRight: xs,
+ marginRight: sm,
},
links: {
textDecoration: 'underline',
diff --git a/src/routes/safe/components/Layout.jsx b/src/routes/safe/components/Layout.jsx
index d7716453..8904b636 100644
--- a/src/routes/safe/components/Layout.jsx
+++ b/src/routes/safe/components/Layout.jsx
@@ -1,27 +1,35 @@
// @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'
+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'
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 Modal from '~/components/Modal'
+import SendModal from './Balances/SendModal'
+import Receive from './Balances/Receive'
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'
import Balances from './Balances'
import Transactions from './Transactions'
import Settings from './Settings'
+import { styles } from './style'
export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
@@ -36,6 +44,12 @@ type Props = SelectorProps &
Actions & {
classes: Object,
granted: boolean,
+ sendFunds: Object,
+ showReceive: boolean,
+ onShow: Function,
+ onHide: Function,
+ showSendFunds: Function,
+ hideSendFunds: Function
}
const openIconStyle = {
@@ -43,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)
@@ -112,6 +92,12 @@ class Layout extends React.Component {
updateSafe,
transactions,
userAddress,
+ sendFunds,
+ showReceive,
+ onShow,
+ onHide,
+ showSendFunds,
+ hideSendFunds,
} = this.props
const { tabIndex } = this.state
@@ -142,6 +128,32 @@ class Layout extends React.Component {
+
+
+
+
+
+
@@ -190,6 +202,31 @@ class Layout extends React.Component {
createTransaction={createTransaction}
/>
)}
+
+
)
}
diff --git a/src/routes/safe/components/Layout.stories.js b/src/routes/safe/components/Layout.stories.js
index 689a1bfe..bb6ba32d 100644
--- a/src/routes/safe/components/Layout.stories.js
+++ b/src/routes/safe/components/Layout.stories.js
@@ -5,7 +5,7 @@ import { List } from 'immutable'
import styles from '~/components/layout/PageFrame/index.scss'
import Component from './Layout'
-const FrameDecorator = story =>
+ <>
Add new owner
@@ -97,7 +97,7 @@ const ReviewAddOwner = ({
-
-
+
)
}
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 b31127d3..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) => (
)}
-
+
)}
validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(owners.size + 1))}
data-testid="threshold-select-input"
@@ -101,24 +101,24 @@ owner(s)
-
-
+
)}
-
+
)
}
diff --git a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx
index 2eb99b13..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/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 = ({
-
{story()}
+const FrameDecorator = (story) => {story()}
storiesOf('Components /Header', module)
.addDecorator(FrameDecorator)
diff --git a/src/components/Loader/indes.stories.js b/src/components/Loader/indes.stories.js
index f6576f3b..314b33d1 100644
--- a/src/components/Loader/indes.stories.js
+++ b/src/components/Loader/indes.stories.js
@@ -4,7 +4,7 @@ import * as React from 'react'
import styles from '~/components/layout/PageFrame/index.scss'
import Component from './index'
-const FrameDecorator = story => {story()}
+const FrameDecorator = (story) => {story()}
storiesOf('Components', module)
.addDecorator(FrameDecorator)
diff --git a/src/components/Stepper/Controls/index.jsx b/src/components/Stepper/Controls/index.jsx
index 0a77d573..ef03c501 100644
--- a/src/components/Stepper/Controls/index.jsx
+++ b/src/components/Stepper/Controls/index.jsx
@@ -26,24 +26,34 @@ type Props = {
lastPage: boolean,
disabled: boolean,
penultimate: boolean,
+ currentStep?: number,
+ buttonLabels?: Array{story()}
+const FrameDecorator = (story) => {story()}
const store = new Store({
safeAddress: '',
diff --git a/src/routes/open/components/ReviewInformation/index.jsx b/src/routes/open/components/ReviewInformation/index.jsx
index 056e72c0..296cea50 100644
--- a/src/routes/open/components/ReviewInformation/index.jsx
+++ b/src/routes/open/components/ReviewInformation/index.jsx
@@ -2,26 +2,24 @@
import * as React from 'react'
import classNames from 'classnames'
import { withStyles } from '@material-ui/core/styles'
-import OpenInNew from '@material-ui/icons/OpenInNew'
+import { estimateGasForDeployingSafe } from '~/logic/contracts/safeContracts'
import { getNamesFrom, getAccountsFrom } from '~/routes/open/utils/safeDataExtractor'
import Block from '~/components/layout/Block'
+import EtherscanBtn from '~/components/EtherscanBtn'
+import CopyBtn from '~/components/CopyBtn'
import Identicon from '~/components/Identicon'
import OpenPaper from '~/components/Stepper/OpenPaper'
import Col from '~/components/layout/Col'
import Row from '~/components/layout/Row'
-import Link from '~/components/layout/Link'
import Paragraph from '~/components/layout/Paragraph'
import {
- sm, md, lg, border, secondary, background,
+ sm, md, lg, border, background,
} from '~/theme/variables'
import Hairline from '~/components/layout/Hairline'
-import { getEtherScanLink } from '~/logic/wallets/getWeb3'
+import { getWeb3 } from '~/logic/wallets/getWeb3'
import { FIELD_NAME, FIELD_CONFIRMATIONS, getNumOwnersFrom } from '../fields'
-const openIconStyle = {
- height: '16px',
- color: secondary,
-}
+const { useEffect, useState } = React
const styles = () => ({
root: {
@@ -55,6 +53,9 @@ const styles = () => ({
},
user: {
justifyContent: 'left',
+ '& > p': {
+ marginRight: sm,
+ },
},
open: {
paddingLeft: sm,
@@ -65,22 +66,40 @@ const styles = () => ({
},
})
-type LayoutProps = {
- network: string,
-}
-
-type Props = LayoutProps & {
+type Props = {
values: Object,
classes: Object,
+ userAccount: string,
}
-const ReviewComponent = ({ values, classes, network }: Props) => {
+const ReviewComponent = ({ values, classes, userAccount }: Props) => {
+ const [gasCosts, setGasCosts] = useState+
+ Add additional owners (e.g. wallets of your teammates) and specify how many of them have to confirm a + transaction before it gets executed. In general, the more confirmations required, the more secure is your + Safe.
{story()}
+const FrameDecorator = (story) => {story()}
storiesOf('Routes /opening', module)
.addDecorator(FrameDecorator)
diff --git a/src/routes/safe/components/Balances/Receive/index.jsx b/src/routes/safe/components/Balances/Receive/index.jsx
index 50c3300a..34f4cfb2 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,27 +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: {
- height: '42px',
+ '& > 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',
@@ -75,7 +75,7 @@ type Props = {
const Receive = ({
classes, onClose, safeAddress, safeName, etherScanLink,
}: Props) => (
- {story()}
+const FrameDecorator = (story) => {story()}
storiesOf('Routes /safe:address', module)
.addDecorator(FrameDecorator)
diff --git a/src/routes/safe/components/NoRights/index.stories.js b/src/routes/safe/components/NoRights/index.stories.js
index fbd53f8f..03d95d28 100644
--- a/src/routes/safe/components/NoRights/index.stories.js
+++ b/src/routes/safe/components/NoRights/index.stories.js
@@ -4,7 +4,7 @@ import * as React from 'react'
import styles from '~/components/layout/PageFrame/index.scss'
import Component from './index.jsx'
-const FrameDecorator = story => {story()}
+const FrameDecorator = (story) => {story()}
storiesOf('Components', module)
.addDecorator(FrameDecorator)
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..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 (
-