status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'development' of github.com:gnosis/safe-react into 1013-undefined-error

This commit is contained in:
Mikhail Mikheev 2020-06-26 18:09:55 +04:00
parent 01358de643 51634e559d
commit ca51768b04
37 changed files with 1666 additions and 817 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -18,7 +18,6 @@ module.exports = {
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
'react/prop-types': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/camelcase': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "safe-react",
"version": "2.1.1",
"version": "2.3.1",
"description": "Allowing crypto users manage funds in a safer way",
"website": "https://github.com/gnosis/safe-react#readme",
"bugs": {

1
src/components/CookiesBanner/index.tsx
View File

@ -144,6 +144,7 @@ const CookiesBanner = () => {
onKeyDown={closeCookiesBannerHandler}
role="button"
tabIndex={0}
data-testid="accept-preferences"
>
Accept preferences >
</span>

2
src/components/Header/components/Layout.tsx
View File

@ -61,7 +61,7 @@ const Layout = openHoc(({ classes, clickAway, open, providerDetails, providerInf
<Row className={classes.summary}>
<Col className={classes.logo} middle="xs" start="xs">
<Link to="/">
<Img alt="Gnosis Team Safe" height={32} src={logo} />
<Img alt="Gnosis Team Safe" height={32} src={logo} testId="heading-gnosis-logo" />
</Link>
</Col>
<Divider />

2
src/components/Header/components/ProviderDetails/ConnectDetails.tsx
View File

@ -45,7 +45,7 @@ const ConnectDetails = ({ classes }) => (
<CircleDot center circleSize={75} dotRight={25} dotSize={25} dotTop={50} keySize={32} mode="error" />
</Row>
<Block className={classes.connect}>
<ConnectButton />
<ConnectButton data-testid="heading-connect-btn" />
</Block>
</>
)

9
src/components/Header/components/ProviderDetails/UserDetails.tsx
View File

@ -163,7 +163,14 @@ const UserDetails = ({ classes, connected, network, onDisconnect, openDashboard,
</Row>
)}
<Row className={classes.disconnect}>
<Button color="primary" fullWidth onClick={onDisconnect} size="medium" variant="contained">
<Button
color="primary"
fullWidth
onClick={onDisconnect}
size="medium"
variant="contained"
data-testid="disconnect-btn"
>
<Paragraph className={classes.disconnectText} color="white" noMargin size="md">
Disconnect
</Paragraph>

9
src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
View File

@ -62,7 +62,14 @@ const ProviderInfo = ({ classes, connected, network, provider, userAddress }) =>
)}
{!connected && <CircleDot circleSize={35} dotRight={11} dotSize={16} dotTop={24} keySize={14} mode="warning" />}
<Col className={classes.account} layout="column" start="sm">
<Paragraph className={classes.network} noMargin size="xs" transform="capitalize" weight="bolder">
<Paragraph
className={classes.network}
noMargin
size="xs"
transform="capitalize"
weight="bolder"
data-testid="connected-wallet"
>
{providerText}
</Paragraph>
<Paragraph className={classes.address} color={color} noMargin size="xs">

9
src/components/Header/components/ProviderInfo/ProviderDisconnected.tsx
View File

@ -29,7 +29,14 @@ const ProviderDisconnected = ({ classes }) => (
<>
<CircleDot circleSize={35} dotRight={11} dotSize={16} dotTop={24} keySize={17} mode="error" />
<Col className={classes.account} end="sm" layout="column" middle="xs">
<Paragraph className={classes.network} noMargin size="sm" transform="capitalize" weight="bold">
<Paragraph
className={classes.network}
noMargin
size="sm"
transform="capitalize"
weight="bold"
data-testid="not-connected-wallet"
>
Not Connected
</Paragraph>
<Paragraph className={classes.connect} color="fancy" noMargin size="sm">

2
src/components/Header/components/SafeListHeader/index.tsx
View File

@ -44,7 +44,7 @@ const SafeListHeader = ({ safesCount }) => {
return (
<Col className={classes.container} middle="xs" start="xs">
Safes
<Paragraph className={classes.counter} size="xs">
<Paragraph className={classes.counter} size="xs" data-testid="safe-counter-heading">
{safesCount}
</Paragraph>
<IconButton

1
src/components/ScanQRModal/ScanQRWrapper/index.tsx
View File

@ -39,6 +39,7 @@ export const ScanQRWrapper = (props) => {
}}
role="button"
src={QRIcon}
testId="qr-icon"
/>
{qrModalOpen && <ScanQRModal isOpen={qrModalOpen} onClose={closeQrModal} onScan={onScanFinished} />}
</>

8
src/components/forms/validator.ts
View File

@ -58,14 +58,18 @@ export const minValue = (min: number | string) => (value: string) => {
return `Should be at least ${min}`
}
export const maxValue = (max: number | string) => (value: string) => {
if (Number.isNaN(Number(value)) || parseFloat(value) <= parseFloat(max.toString())) {
export const maxValueCheck = (max: number | string, value: string): string | undefined => {
if (!max || Number.isNaN(Number(value)) || parseFloat(value) <= parseFloat(max.toString())) {
return undefined
}
return `Maximum value is ${max}`
}
export const maxValue = (max: number | string) => (value: string) => {
return maxValueCheck(max, value)
}
export const ok = () => undefined
export const mustBeEthereumAddress = simpleMemoize((address: string) => {

4
src/routes/load/components/DetailsForm/index.tsx
View File

@ -100,6 +100,7 @@ const Details = ({ classes, errors, form }) => {
text="Safe name"
type="text"
validate={required}
testId="load-safe-name-field"
/>
</Col>
</Block>
@ -114,7 +115,7 @@ const Details = ({ classes, errors, form }) => {
noErrorsOn(FIELD_LOAD_ADDRESS, errors) && {
endAdornment: (
<InputAdornment position="end">
<CheckCircle className={classes.check} />
<CheckCircle className={classes.check} data-testid="valid-address" />
</InputAdornment>
),
}
@ -123,6 +124,7 @@ const Details = ({ classes, errors, form }) => {
placeholder="Safe Address*"
text="Safe Address"
type="text"
testId="load-safe-address-field"
/>
</Col>
<Col center="xs" className={classes} middle="xs" xs={1}>

5
src/routes/load/components/OwnerList/index.tsx
View File

@ -109,7 +109,7 @@ const OwnerListComponent = (props) => {
return (
<>
<Block className={classes.title}>
<Paragraph color="primary" noMargin size="md">
<Paragraph color="primary" noMargin size="md" data-testid="load-safe-step-two">
{`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
</Paragraph>
</Block>
@ -122,7 +122,7 @@ const OwnerListComponent = (props) => {
<Hairline />
<Block margin="md" padding="md">
{owners.map((address, index) => (
<Row className={classes.owner} key={address}>
<Row className={classes.owner} key={address} data-testid="owner-row">
<Col className={classes.ownerName} xs={4}>
<Field
className={classes.name}
@ -133,6 +133,7 @@ const OwnerListComponent = (props) => {
text="Owner Name"
type="text"
validate={required}
testId={`load-safe-owner-name-${index}`}
/>
</Col>
<Col xs={8}>

13
src/routes/load/components/ReviewInformation/index.tsx
View File

@ -109,7 +109,7 @@ class ReviewComponent extends React.PureComponent<any> {
<Col className={classes.detailsColumn} layout="column" xs={4}>
<Block className={classes.details}>
<Block margin="lg">
<Paragraph color="primary" noMargin size="lg">
<Paragraph color="primary" noMargin size="lg" data-testid="load-safe-step-three">
Review details
</Paragraph>
</Block>
@ -117,7 +117,14 @@ class ReviewComponent extends React.PureComponent<any> {
<Paragraph color="disabled" noMargin size="sm">
Name of the Safe
</Paragraph>
<Paragraph className={classes.name} color="primary" noMargin size="lg" weight="bolder">
<Paragraph
className={classes.name}
color="primary"
noMargin
size="lg"
weight="bolder"
data-testid="load-form-review-safe-name"
>
{values[FIELD_LOAD_NAME]}
</Paragraph>
</Block>
@ -168,7 +175,7 @@ class ReviewComponent extends React.PureComponent<any> {
</Col>
<Col xs={11}>
<Block className={classNames(classes.name, classes.userName)}>
<Paragraph noMargin size="lg">
<Paragraph noMargin size="lg" data-testid="load-safe-review-owner-name">
{values[getOwnerNameBy(index)]}
</Paragraph>
<Block className={classes.user} justify="center">

4
src/routes/open/components/Layout.tsx
View File

@ -87,7 +87,9 @@ const Layout = (props) => {
<IconButton disableRipple onClick={back} style={iconStyle}>
<ChevronLeft />
</IconButton>
<Heading tag="h2">Create New Safe</Heading>
<Heading tag="h2" testId="create-safe-form-title">
Create New Safe
</Heading>
</Row>
<Stepper
initialValues={initialValues}

28
src/routes/open/components/ReviewInformation/index.tsx
View File

@ -112,7 +112,7 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
<Col className={classes.detailsColumn} layout="column" xs={4}>
<Block className={classes.details}>
<Block margin="lg">
<Paragraph color="primary" noMargin size="lg">
<Paragraph color="primary" noMargin size="lg" data-testid="create-safe-step-three">
Details
</Paragraph>
</Block>
@ -120,7 +120,14 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
<Paragraph color="disabled" noMargin size="sm">
Name of new Safe
</Paragraph>
<Paragraph className={classes.name} color="primary" noMargin size="lg" weight="bolder">
<Paragraph
className={classes.name}
color="primary"
noMargin
size="lg"
weight="bolder"
data-testid="create-safe-review-name"
>
{values[FIELD_NAME]}
</Paragraph>
</Block>
@ -128,7 +135,13 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
<Paragraph color="disabled" noMargin size="sm">
Any transaction requires the confirmation of:
</Paragraph>
<Paragraph color="primary" noMargin size="lg" weight="bolder">
<Paragraph
color="primary"
noMargin
size="lg"
weight="bolder"
data-testid={`create-safe-review-req-owners-${values[FIELD_CONFIRMATIONS]}`}
>
{`${values[FIELD_CONFIRMATIONS]} out of ${numOwners} owners`}
</Paragraph>
</Block>
@ -150,11 +163,16 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
</Col>
<Col xs={11}>
<Block className={classNames(classes.name, classes.userName)}>
<Paragraph noMargin size="lg">
<Paragraph noMargin size="lg" data-testid={`create-safe-owner-name-${index}`}>
{name}
</Paragraph>
<Block className={classes.user} justify="center">
<Paragraph color="disabled" noMargin size="md">
<Paragraph
color="disabled"
noMargin
size="md"
data-testid={`create-safe-owner-address-${index}`}
>
{addresses[index]}
</Paragraph>
<CopyBtn content={addresses[index]} />

1
src/routes/open/components/SafeNameForm/index.tsx
View File

@ -45,6 +45,7 @@ const SafeName = ({ classes, safeName }) => (
text="Safe name"
type="text"
validate={required}
testId="create-safe-name-field"
/>
</Block>
<Block margin="lg">

18
src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
View File

@ -99,7 +99,7 @@ const SafeOwners = (props) => {
return (
<>
<Block className={classes.title}>
<Paragraph color="primary" noMargin size="md">
<Paragraph color="primary" noMargin size="md" data-testid="create-safe-step-two">
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.
<br />
@ -120,7 +120,7 @@ const SafeOwners = (props) => {
const addressName = getOwnerAddressBy(index)
return (
<Row className={classes.owner} key={`owner${index}`}>
<Row className={classes.owner} key={`owner${index}`} data-testid={`create-safe-owner-row`}>
<Col className={classes.ownerName} xs={4}>
<Field
className={classes.name}
@ -130,6 +130,7 @@ const SafeOwners = (props) => {
text="Owner Name"
type="text"
validate={required}
testId={`create-safe-owner-name-field-${index}`}
/>
</Col>
<Col className={classes.ownerAddress} xs={6}>
@ -142,7 +143,7 @@ const SafeOwners = (props) => {
noErrorsOn(addressName, errors) && {
endAdornment: (
<InputAdornment position="end">
<CheckCircle className={classes.check} />
<CheckCircle className={classes.check} data-testid={`valid-address-${index}`} />
</InputAdornment>
),
}
@ -152,6 +153,7 @@ const SafeOwners = (props) => {
text="Owner Address"
type="text"
validators={[getAddressValidator(otherAccounts, index)]}
testId={`create-safe-address-field-${index}`}
/>
</Col>
<Col center="xs" className={classes.remove} middle="xs" xs={1}>
@ -191,14 +193,20 @@ const SafeOwners = (props) => {
validate={composeValidators(required, mustBeInteger, minValue(1))}
>
{[...Array(Number(validOwners))].map((x, index) => (
<MenuItem key={`selectOwner${index}`} value={`${index + 1}`}>
<MenuItem key={`selectOwner${index}`} value={`${index + 1}`} data-testid={`input-${index + 1}`}>
{index + 1}
</MenuItem>
))}
</Field>
</Col>
<Col className={classes.ownersAmountItem} xs={10}>
<Paragraph className={classes.owners} color="primary" noMargin size="lg">
<Paragraph
className={classes.owners}
color="primary"
noMargin
size="lg"
data-testid={`create-safe-req-conf-${validOwners}`}
>
out of {validOwners} owner(s)
</Paragraph>
</Col>

8
src/routes/opening/components/Footer.tsx
View File

@ -38,7 +38,13 @@ export const ContinueFooter = ({
continueButtonDisabled: boolean
onContinue: (event: SyntheticEvent) => void
}) => (
<Button color="primary" disabled={continueButtonDisabled} onClick={onContinue} variant="contained">
<Button
color="primary"
disabled={continueButtonDisabled}
onClick={onContinue}
variant="contained"
data-testid="continue-btn"
>
Continue
</Button>
)

6
src/routes/opening/index.tsx
View File

@ -302,7 +302,9 @@ const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, provider
return (
<Wrapper>
<Title tag="h2">Safe creation process</Title>
<Title tag="h2" testId="safe-creation-process-title">
Safe creation process
</Title>
<Nav>
<Stepper activeStepIndex={stepIndex} error={error} orientation="vertical" steps={steps} />
</Nav>
@ -336,7 +338,7 @@ const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, provider
) : null}
</BodyFooter>
</Body>
<BackButton color="primary" minWidth={140} onClick={onCancel}>
<BackButton color="primary" minWidth={140} onClick={onCancel} data-testid="safe-creation-back-btn">
Back
</BackButton>
</Wrapper>

10
src/routes/safe/components/Apps/confirmTransactions.tsx
View File

@ -3,7 +3,6 @@ import { BigNumber } from 'bignumber.js'
import React, { ReactElement } from 'react'
import styled from 'styled-components'
import { getWeb3 } from 'src/logic/wallets/getWeb3'
import AddressInfo from 'src/components/AddressInfo'
import DividerLine from 'src/components/DividerLine'
import Collapse from 'src/components/Collapse'
@ -55,17 +54,12 @@ const IconText = styled.div`
margin-right: 4px;
}
`
const isTxValid = (t): boolean => {
try {
const isTxValid = (t: SafeAppTx): boolean => {
if (!['string', 'number'].includes(typeof t.value)) {
return false
}
if (typeof t.value === 'string') {
const web3 = getWeb3()
web3.eth.abi.decodeParameter('uint256', t.value)
}
} catch (error) {
if (typeof t.value === 'string' && !/^\d+$/.test(t.value)) {
return false
}

6
src/routes/safe/components/Apps/utils.ts
View File

@ -13,10 +13,14 @@ const removeLastTrailingSlash = (url) => {
const gnosisAppsUrl = removeLastTrailingSlash(getGnosisSafeAppsUrl())
export const staticAppsList: Array<{ url: string; disabled: boolean }> = [
// Sablier
{ url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmabPEk7g4zaytFefp6fE4nz8f85QMJoWmRQQZypvJViNG`, disabled: false },
// request
{ url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmQapdJP6zERqpDKKPECNeMDDgwmGUqbKk1PjHpYj8gfDJ`, disabled: false },
// Aave
// { url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmUfgEqdJ5kVjWTQofnDmvxdhDLBAaejiHkhQhfw6aYvBg`, disabled: false },
{ url: `${gnosisAppsUrl}/compound`, disabled: false },
{ url: `${gnosisAppsUrl}/tx-builder`, disabled: false },
{ url: `${gnosisAppsUrl}/aave`, disabled: false },
{ url: `${gnosisAppsUrl}/pool-together`, disabled: false },
{ url: `${gnosisAppsUrl}/open-zeppelin`, disabled: false },
{ url: `${gnosisAppsUrl}/synthetix`, disabled: false },

38
src/routes/safe/components/Balances/SendModal/index.tsx
View File

@ -19,6 +19,10 @@ const ContractInteraction = React.lazy(() => import('./screens/ContractInteracti
const ContractInteractionReview: any = React.lazy(() => import('./screens/ContractInteraction/Review'))
const SendCustomTx = React.lazy(() => import('./screens/ContractInteraction/SendCustomTx'))
const ReviewCustomTx = React.lazy(() => import('./screens/ContractInteraction/ReviewCustomTx'))
const useStyles = makeStyles({
scalableModalWindow: {
height: 'auto',
@ -40,9 +44,11 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
const classes = useStyles()
const [activeScreen, setActiveScreen] = useState(activeScreenType || 'chooseTxType')
const [tx, setTx] = useState({})
const [isABI, setIsABI] = useState(true)
useEffect(() => {
setActiveScreen(activeScreenType || 'chooseTxType')
setIsABI(true)
setTx({})
}, [activeScreenType, isOpen])
@ -53,9 +59,14 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
setTx(txInfo)
}
const handleContractInteractionCreation = (contractInteractionInfo) => {
const handleContractInteractionCreation = (contractInteractionInfo: any, submit: boolean): void => {
setTx(contractInteractionInfo)
setActiveScreen('contractInteractionReview')
if (submit) setActiveScreen('contractInteractionReview')
}
const handleCustomTxCreation = (customTxInfo: any, submit: boolean): void => {
setTx(customTxInfo)
if (submit) setActiveScreen('reviewCustomTx')
}
const handleSendCollectible = (txInfo) => {
@ -63,6 +74,10 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
setTx(txInfo)
}
const handleSwitchMethod = (): void => {
setIsABI(!isABI)
}
return (
<Modal
description="Send Tokens Form"
@ -93,17 +108,32 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select
{activeScreen === 'reviewTx' && (
<ReviewTx onClose={onClose} onPrev={() => setActiveScreen('sendFunds')} tx={tx} />
)}
{activeScreen === 'contractInteraction' && (
{activeScreen === 'contractInteraction' && isABI && (
<ContractInteraction
isABI={isABI}
switchMethod={handleSwitchMethod}
contractAddress={recipientAddress}
initialValues={tx}
onClose={onClose}
onNext={handleContractInteractionCreation}
/>
)}
{activeScreen === 'contractInteractionReview' && tx && (
{activeScreen === 'contractInteractionReview' && isABI && tx && (
<ContractInteractionReview onClose={onClose} onPrev={() => setActiveScreen('contractInteraction')} tx={tx} />
)}
{activeScreen === 'contractInteraction' && !isABI && (
<SendCustomTx
initialValues={tx}
isABI={isABI}
switchMethod={handleSwitchMethod}
onClose={onClose}
onNext={handleCustomTxCreation}
contractAddress={recipientAddress}
/>
)}
{activeScreen === 'reviewCustomTx' && (
<ReviewCustomTx onClose={onClose} onPrev={() => setActiveScreen('contractInteraction')} tx={tx} />
)}
{activeScreen === 'sendCollectible' && (
<SendCollectible
initialValues={tx}

3
src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx
View File

@ -88,6 +88,9 @@ const AddressBookInput = ({
)
})
setADBKList(filteredADBK)
if (!isValidText) {
setSelectedEntry({ address: addressValue })
}
}
setIsValidForm(isValidText === undefined)
setValidationText(isValidText)

2
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
View File

@ -50,7 +50,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props) => {
useEffect(() => {
let isCurrent = true
const estimateGas = async () => {
const estimateGas = async (): Promise<void> => {
const { fromWei, toBN } = getWeb3().utils
const txData = tx.data ? tx.data.trim() : ''

184
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx Normal file
View File

@ -0,0 +1,184 @@
import IconButton from '@material-ui/core/IconButton'
import { makeStyles } from '@material-ui/core/styles'
import Close from '@material-ui/icons/Close'
import { useSnackbar } from 'notistack'
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import ArrowDown from '../../assets/arrow-down.svg'
import { styles } from './style'
import CopyBtn from 'src/components/CopyBtn'
import EtherscanBtn from 'src/components/EtherscanBtn'
import Identicon from 'src/components/Identicon'
import Block from 'src/components/layout/Block'
import Button from 'src/components/layout/Button'
import Col from 'src/components/layout/Col'
import Hairline from 'src/components/layout/Hairline'
import Img from 'src/components/layout/Img'
import Paragraph from 'src/components/layout/Paragraph'
import Row from 'src/components/layout/Row'
import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
import { estimateTxGasCosts } from 'src/logic/safe/transactions/gasNew'
import { formatAmount } from 'src/logic/tokens/utils/formatAmount'
import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
import { getWeb3 } from 'src/logic/wallets/getWeb3'
import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
import createTransaction from 'src/routes/safe/store/actions/createTransaction'
import { safeSelector } from 'src/routes/safe/store/selectors'
import { sm } from 'src/theme/variables'
type Props = {
onClose: () => void
onPrev: () => void
tx: { contractAddress?: string; data?: string; value?: string }
}
const useStyles = makeStyles(styles)
const ReviewCustomTx = ({ onClose, onPrev, tx }: Props) => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar()
const classes = useStyles()
const dispatch = useDispatch()
const { address: safeAddress } = useSelector(safeSelector)
const [gasCosts, setGasCosts] = useState<string>('< 0.001')
useEffect(() => {
let isCurrent = true
const estimateGas = async () => {
const { fromWei, toBN } = getWeb3().utils
const txData = tx.data ? tx.data.trim() : ''
const estimatedGasCosts = await estimateTxGasCosts(safeAddress, tx.contractAddress, txData)
const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether')
const formattedGasCosts = formatAmount(gasCostsAsEth)
if (isCurrent) {
setGasCosts(formattedGasCosts)
}
}
estimateGas()
return () => {
isCurrent = false
}
}, [safeAddress, tx.data, tx.contractAddress])
const submitTx = async (): Promise<void> => {
const web3 = getWeb3()
const txRecipient = tx.contractAddress
const txData = tx.data ? tx.data.trim() : ''
const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : '0'
dispatch(
createTransaction({
safeAddress,
to: txRecipient,
valueInWei: txValue,
txData,
notifiedTransaction: TX_NOTIFICATION_TYPES.STANDARD_TX,
enqueueSnackbar,
closeSnackbar,
} as any),
)
onClose()
}
return (
<>
<Row align="center" className={classes.heading} grow>
<Paragraph className={classes.headingText} noMargin weight="bolder">
Send Custom Tx
</Paragraph>
<Paragraph className={classes.annotation}>2 of 2</Paragraph>
<IconButton disableRipple onClick={onClose}>
<Close className={classes.closeIcon} />
</IconButton>
</Row>
<Hairline />
<Block className={classes.container}>
<SafeInfo />
<Row margin="md">
<Col xs={1}>
<img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
</Col>
<Col center="xs" layout="column" xs={11}>
<Hairline />
</Col>
</Row>
<Row margin="xs">
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Recipient
</Paragraph>
</Row>
<Row align="center" margin="md">
<Col xs={1}>
<Identicon address={tx.contractAddress} diameter={32} />
</Col>
<Col layout="column" xs={11}>
<Block justify="left">
<Paragraph noMargin weight="bolder">
{tx.contractAddress}
</Paragraph>
<CopyBtn content={tx.contractAddress} />
<EtherscanBtn type="address" value={tx.contractAddress} />
</Block>
</Col>
</Row>
<Row margin="xs">
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Value
</Paragraph>
</Row>
<Row align="center" margin="md">
<Img alt="Ether" height={28} onError={setImageToPlaceholder} src={getEthAsToken('0').logoUri} />
<Paragraph className={classes.value} noMargin size="md">
{tx.value || 0}
{' ETH'}
</Paragraph>
</Row>
<Row margin="xs">
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Data (hex encoded)
</Paragraph>
</Row>
<Row align="center" margin="md">
<Col className={classes.outerData}>
<Row className={classes.data} size="md">
{tx.data}
</Row>
</Col>
</Row>
<Row>
<Paragraph>
{`You're about to create a transaction and will have to confirm it with your currently connected wallet. Make sure you have ${gasCosts} (fee price) ETH in this wallet to fund this confirmation.`}
</Paragraph>
</Row>
</Block>
<Hairline />
<Row align="center" className={classes.buttonRow}>
<Button minWidth={140} onClick={onPrev}>
Back
</Button>
<Button
className={classes.submitButton}
color="primary"
data-testid="submit-tx-btn"
minWidth={140}
onClick={submitTx}
type="submit"
variant="contained"
>
Submit
</Button>
</Row>
</>
)
}
export default ReviewCustomTx

58
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/style.ts Normal file
View File

@ -0,0 +1,58 @@
import { border, lg, md, secondaryText, sm } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
heading: {
padding: `${md} ${lg}`,
justifyContent: 'flex-start',
boxSizing: 'border-box',
maxHeight: '75px',
},
annotation: {
letterSpacing: '-1px',
color: secondaryText,
marginRight: 'auto',
marginLeft: '20px',
},
headingText: {
fontSize: lg,
},
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: md,
},
},
submitButton: {
boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
marginLeft: '15px',
},
})

278
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx Normal file
View File

@ -0,0 +1,278 @@
import IconButton from '@material-ui/core/IconButton'
import InputAdornment from '@material-ui/core/InputAdornment'
import Switch from '@material-ui/core/Switch'
import { makeStyles } from '@material-ui/core/styles'
import Close from '@material-ui/icons/Close'
import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import ArrowDown from '../../assets/arrow-down.svg'
import { styles } from './style'
import QRIcon from 'src/assets/icons/qrcode.svg'
import CopyBtn from 'src/components/CopyBtn'
import EtherscanBtn from 'src/components/EtherscanBtn'
import Identicon from 'src/components/Identicon'
import ScanQRModal from 'src/components/ScanQRModal'
import Field from 'src/components/forms/Field'
import GnoForm from 'src/components/forms/GnoForm'
import TextField from 'src/components/forms/TextField'
import TextareaField from 'src/components/forms/TextareaField'
import { composeValidators, maxValue, mustBeFloat, greaterThan } from 'src/components/forms/validator'
import Block from 'src/components/layout/Block'
import Button from 'src/components/layout/Button'
import ButtonLink from 'src/components/layout/ButtonLink'
import Col from 'src/components/layout/Col'
import Hairline from 'src/components/layout/Hairline'
import Img from 'src/components/layout/Img'
import Paragraph from 'src/components/layout/Paragraph'
import Row from 'src/components/layout/Row'
import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
import AddressBookInput from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
import { safeSelector } from 'src/routes/safe/store/selectors'
import { sm } from 'src/theme/variables'
export interface CreatedTx {
contractAddress: string
data: string
value: string | number
}
type Props = {
initialValues: { contractAddress?: string }
onClose: () => void
onNext: (tx: CreatedTx, submit: boolean) => void
isABI: boolean
switchMethod: () => void
contractAddress: string
}
const useStyles = makeStyles(styles)
const SendCustomTx: React.FC<Props> = ({ initialValues, onClose, onNext, contractAddress, switchMethod, isABI }) => {
const classes = useStyles()
const { ethBalance } = useSelector(safeSelector)
const [qrModalOpen, setQrModalOpen] = useState<boolean>(false)
const [selectedEntry, setSelectedEntry] = useState<{ address?: string; name?: string } | null>({
address: contractAddress || initialValues.contractAddress,
name: '',
})
const [isValidAddress, setIsValidAddress] = useState<boolean>(true)
const saveForm = async (values) => {
await handleSubmit(values, false)
switchMethod()
}
const handleSubmit = (values: any, submit = true) => {
if (values.data || values.value) {
onNext(values, submit)
}
}
const openQrModal = () => {
setQrModalOpen(true)
}
const closeQrModal = () => {
setQrModalOpen(false)
}
const formMutators = {
setMax: (args, state, utils) => {
utils.changeValue(state, 'value', () => ethBalance)
},
setRecipient: (args, state, utils) => {
utils.changeValue(state, 'contractAddress', () => args[0])
},
}
return (
<>
<Row align="center" className={classes.heading} grow>
<Paragraph className={classes.manage} noMargin weight="bolder">
Send custom transactions
</Paragraph>
<Paragraph className={classes.annotation}>1 of 2</Paragraph>
<IconButton disableRipple onClick={onClose}>
<Close className={classes.closeIcon} />
</IconButton>
</Row>
<Hairline />
<GnoForm
formMutators={formMutators}
initialValues={initialValues}
subscription={{ submitting: true, pristine: true, values: true }}
onSubmit={handleSubmit}
>
{(...args) => {
const mutators = args[3]
const pristine = args[2].pristine
let shouldDisableSubmitButton = !isValidAddress
if (selectedEntry) {
shouldDisableSubmitButton = !selectedEntry.address
}
const handleScan = (value) => {
let scannedAddress = value
if (scannedAddress.startsWith('ethereum:')) {
scannedAddress = scannedAddress.replace('ethereum:', '')
}
mutators.setRecipient(scannedAddress)
closeQrModal()
}
return (
<>
<Block className={classes.formContainer}>
<SafeInfo />
<Row margin="md">
<Col xs={1}>
<img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
</Col>
<Col center="xs" layout="column" xs={11}>
<Hairline />
</Col>
</Row>
{selectedEntry && selectedEntry.address ? (
<div
onKeyDown={(e) => {
if (e.keyCode !== 9) {
setSelectedEntry(null)
}
}}
role="listbox"
tabIndex={0}
>
<Row margin="xs">
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Recipient
</Paragraph>
</Row>
<Row align="center" margin="md">
<Col xs={1}>
<Identicon address={selectedEntry.address} diameter={32} />
</Col>
<Col layout="column" xs={11}>
<Block justify="left">
<Block>
<Paragraph
className={classes.selectAddress}
noMargin
onClick={() => setSelectedEntry(null)}
weight="bolder"
>
{selectedEntry.name}
</Paragraph>
<Paragraph
className={classes.selectAddress}
noMargin
onClick={() => setSelectedEntry(null)}
weight="bolder"
>
{selectedEntry.address}
</Paragraph>
</Block>
<CopyBtn content={selectedEntry.address} />
<EtherscanBtn type="address" value={selectedEntry.address} />
</Block>
</Col>
</Row>
</div>
) : (
<>
<Row margin="md">
<Col xs={11}>
<AddressBookInput
fieldMutator={mutators.setRecipient}
isCustomTx
pristine={pristine}
setIsValidAddress={setIsValidAddress}
setSelectedEntry={setSelectedEntry}
/>
</Col>
<Col center="xs" className={classes} middle="xs" xs={1}>
<Img
alt="Scan QR"
className={classes.qrCodeBtn}
height={20}
onClick={() => {
openQrModal()
}}
role="button"
src={QRIcon}
/>
</Col>
</Row>
</>
)}
<Row margin="xs">
<Col between="lg">
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Value
</Paragraph>
<ButtonLink onClick={mutators.setMax} weight="bold">
Send max
</ButtonLink>
</Col>
</Row>
<Row margin="md">
<Col>
<Field
component={TextField}
inputAdornment={{
endAdornment: <InputAdornment position="end">ETH</InputAdornment>,
}}
name="value"
placeholder="Value*"
text="Value*"
type="text"
validate={composeValidators(mustBeFloat, maxValue(ethBalance), greaterThan(0))}
/>
</Col>
</Row>
<Row margin="sm">
<Col>
<TextareaField
name="data"
placeholder="Data (hex encoded)*"
text="Data (hex encoded)*"
type="text"
/>
</Col>
</Row>
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Use custom data (hex encoded)
<Switch onChange={() => saveForm(args[2].values)} checked={!isABI} />
</Paragraph>
</Block>
<Hairline />
<Row align="center" className={classes.buttonRow}>
<Button minWidth={140} onClick={onClose}>
Cancel
</Button>
<Button
className={classes.submitButton}
color="primary"
data-testid="review-tx-btn"
disabled={shouldDisableSubmitButton}
minWidth={140}
type="submit"
variant="contained"
>
Review
</Button>
</Row>
{qrModalOpen && <ScanQRModal isOpen={qrModalOpen} onClose={closeQrModal} onScan={handleScan} />}
</>
)
}}
</GnoForm>
</>
)
}
export default SendCustomTx

51
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/style.ts Normal file
View File

@ -0,0 +1,51 @@
import { lg, md } from 'src/theme/variables'
import { createStyles } from '@material-ui/core'
export const styles = createStyles({
heading: {
padding: `${md} ${lg}`,
justifyContent: 'flex-start',
boxSizing: 'border-box',
maxHeight: '75px',
},
annotation: {
letterSpacing: '-1px',
color: '#a2a8ba',
marginRight: 'auto',
marginLeft: '20px',
},
manage: {
fontSize: lg,
},
closeIcon: {
height: '35px',
width: '35px',
},
qrCodeBtn: {
cursor: 'pointer',
},
formContainer: {
padding: `${md} ${lg}`,
},
buttonRow: {
height: '84px',
justifyContent: 'center',
'& > button': {
fontFamily: 'Averta',
fontSize: md,
},
},
submitButton: {
boxShadow: '1px 2px 10px 0 rgba(212, 212, 211, 0.59)',
marginLeft: '15px',
},
dataInput: {
'& TextField-root-294': {
lineHeight: 'auto',
border: 'green',
},
},
selectAddress: {
cursor: 'pointer',
},
})

36
src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
View File

@ -1,13 +1,14 @@
import { makeStyles } from '@material-ui/core/styles'
import React from 'react'
import { useSelector } from 'react-redux'
import Switch from '@material-ui/core/Switch'
import { styles } from './style'
import GnoForm from 'src/components/forms/GnoForm'
import Block from 'src/components/layout/Block'
import Hairline from 'src/components/layout/Hairline'
import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
import { safeSelector } from 'src/routes/safe/store/selectors'
import Paragraph from 'src/components/layout/Paragraph'
import Buttons from './Buttons'
import ContractABI from './ContractABI'
import EthAddressInput from './EthAddressInput'
@ -33,11 +34,20 @@ export interface CreatedTx {
export interface ContractInteractionProps {
contractAddress: string
initialValues: { contractAddress?: string }
isABI: boolean
onClose: () => void
onNext: (tx: CreatedTx) => void
switchMethod: () => void
onNext: (tx: CreatedTx, submit: boolean) => void
}
const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }: ContractInteractionProps) => {
const ContractInteraction: React.FC<ContractInteractionProps> = ({
contractAddress,
initialValues,
onClose,
onNext,
switchMethod,
isABI,
}) => {
const classes = useStyles()
const { address: safeAddress = '' } = useSelector(safeSelector)
let setCallResults
@ -48,13 +58,21 @@ const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }
}
}, [contractAddress, initialValues.contractAddress])
const handleSubmit = async ({ contractAddress, selectedMethod, value, ...values }) => {
const saveForm = async (values: CreatedTx): Promise<void> => {
await handleSubmit(values, false)
switchMethod()
}
const handleSubmit = async (
{ contractAddress, selectedMethod, value, ...values },
submit = true,
): Promise<void | any> => {
if (value || (contractAddress && selectedMethod)) {
try {
const txObject = createTxObject(selectedMethod, contractAddress, values)
const data = txObject.encodeABI()
if (isReadMethod(selectedMethod)) {
if (isReadMethod(selectedMethod) && submit) {
const result = await txObject.call({ from: safeAddress })
setCallResults(result)
@ -62,7 +80,7 @@ const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }
return
}
onNext({ ...values, contractAddress, data, selectedMethod, value })
onNext({ ...values, contractAddress, data, selectedMethod, value }, submit)
} catch (error) {
return handleSubmitError(error, values)
}
@ -78,7 +96,7 @@ const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }
formMutators={formMutators}
initialValues={initialValues}
onSubmit={handleSubmit}
subscription={{ submitting: true, pristine: true }}
subscription={{ submitting: true, pristine: true, values: true }}
>
{(submitting, validating, rest, mutators) => {
setCallResults = mutators.setCallResults
@ -99,6 +117,10 @@ const ContractInteraction = ({ contractAddress, initialValues, onClose, onNext }
<RenderInputParams />
<RenderOutputParams />
<FormErrorMessage />
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Use custom data (hex encoded)
<Switch checked={!isABI} onChange={() => saveForm(rest.values)} />
</Paragraph>
</Block>
<Hairline />
<Buttons onClose={onClose} />

31
src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
View File

@ -17,7 +17,14 @@ import { ScanQRWrapper } from 'src/components/ScanQRModal/ScanQRWrapper'
import Field from 'src/components/forms/Field'
import GnoForm from 'src/components/forms/GnoForm'
import TextField from 'src/components/forms/TextField'
import { composeValidators, greaterThan, maxValue, mustBeFloat, required } from 'src/components/forms/validator'
import {
composeValidators,
greaterThan,
maxValue,
maxValueCheck,
mustBeFloat,
required,
} from 'src/components/forms/validator'
import Block from 'src/components/layout/Block'
import Button from 'src/components/layout/Button'
import ButtonLink from 'src/components/layout/ButtonLink'
@ -39,7 +46,7 @@ const formMutators = {
utils.changeValue(state, 'amount', () => args[0])
},
onTokenChange: (args, state, utils) => {
utils.changeValue(state, 'amount', () => '')
utils.changeValue(state, 'amount', () => state.formState.values.amount)
},
setRecipient: (args, state, utils) => {
utils.changeValue(state, 'recipientAddress', () => args[0])
@ -56,6 +63,7 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
address: recipientAddress || initialValues.recipientAddress,
name: '',
})
const [pristine, setPristine] = useState(true)
const [isValidAddress, setIsValidAddress] = useState(true)
@ -86,7 +94,18 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
</IconButton>
</Row>
<Hairline />
<GnoForm formMutators={formMutators} initialValues={initialValues} onSubmit={handleSubmit}>
<GnoForm
formMutators={formMutators}
initialValues={initialValues}
onSubmit={handleSubmit}
validation={(values) => {
const selectedTokenRecord = tokens.find((token) => token.address === values?.token)
return {
amount: maxValueCheck(selectedTokenRecord?.balance, values.amount),
}
}}
>
{(...args) => {
const formState = args[2]
const mutators = args[3]
@ -224,11 +243,15 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
required,
mustBeFloat,
greaterThan(0),
maxValue(selectedTokenRecord && selectedTokenRecord.balance),
maxValue(selectedTokenRecord?.balance),
)}
/>
<OnChange name="token">
{() => {
setSelectedEntry({
name: selectedEntry?.name,
address: selectedEntry?.address,
})
mutators.onTokenChange()
}}
</OnChange>

9
src/routes/safe/components/Layout/Header/index.tsx
View File

@ -38,7 +38,13 @@ const LayoutHeader = (props) => {
{!granted && <Block className={classes.readonly}>Read Only</Block>}
</Row>
<Block className={classes.user} justify="center">
<Paragraph className={classes.address} color="disabled" noMargin size="md">
<Paragraph
className={classes.address}
color="disabled"
noMargin
size="md"
data-testid="safe-address-heading"
>
{address}
</Paragraph>
<CopyBtn content={address} />
@ -54,6 +60,7 @@ const LayoutHeader = (props) => {
onClick={() => showSendFunds('')}
size="small"
variant="contained"
testId="main-send-btn"
>
<CallMade
alt="Send Transaction"

3
src/routes/safe/components/Layout/Tabs/index.tsx
View File

@ -10,6 +10,7 @@ import {
ADDRESS_BOOK_TAB_BTN_TEST_ID,
BALANCES_TAB_BTN_TEST_ID,
SETTINGS_TAB_BTN_TEST_ID,
APPS_TAB_BTN_TEST_ID,
TRANSACTIONS_TAB_BTN_TEST_ID,
} from 'src/routes/safe/components/Layout'
import SettingsTab from 'src/routes/safe/components/Layout/Tabs/SettingsTab'
@ -105,7 +106,7 @@ const TabsComponent = (props: Props) => {
selected: classes.tabWrapperSelected,
wrapper: classes.tabWrapper,
}}
data-testid={TRANSACTIONS_TAB_BTN_TEST_ID}
data-testid={APPS_TAB_BTN_TEST_ID}
label={AppsLabel}
value={`${match.url}/apps`}
/>

1
src/routes/safe/components/Layout/index.tsx
View File

@ -21,6 +21,7 @@ import { wrapInSuspense } from 'src/utils/wrapInSuspense'
export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
export const APPS_TAB_BTN_TEST_ID = 'apps-tab-btn'
export const TRANSACTIONS_TAB_BTN_TEST_ID = 'transactions-tab-btn'
export const ADDRESS_BOOK_TAB_BTN_TEST_ID = 'address-book-tab-btn'
export const SAFE_VIEW_NAME_HEADING_TEST_ID = 'safe-name-heading'

11
src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/utils.ts
View File

@ -18,15 +18,13 @@ export const getTxData = (tx) => {
const { to } = tx.decodedParams.transfer
txData.recipient = to
txData.isTokenTransfer = true
}
if (tx.isCollectibleTransfer) {
} else if (tx.isCollectibleTransfer) {
const { safeTransferFrom, transfer, transferFrom } = tx.decodedParams
const { to, value } = safeTransferFrom || transferFrom || transfer
txData.recipient = to
txData.tokenId = value
txData.isCollectibleTransfer = true
}
if (tx.modifySettingsTx) {
} else if (tx.modifySettingsTx) {
txData.recipient = tx.recipient
txData.modifySettingsTx = true
@ -50,11 +48,12 @@ export const getTxData = (tx) => {
txData.removedOwner = oldOwner
txData.addedOwner = newOwner
}
}
if (tx.multiSendTx) {
} else if (tx.multiSendTx) {
txData.recipient = tx.recipient
txData.data = tx.data
txData.customTx = true
} else {
txData.recipient = tx.recipient
}
} else if (tx.customTx) {
txData.recipient = tx.recipient

4
src/routes/welcome/components/Layout.tsx
View File

@ -35,6 +35,7 @@ export const CreateSafe = ({ provider, size }: any) => (
size={size || 'medium'}
to={OPEN_ADDRESS}
variant="contained"
testId="create-new-safe-btn"
>
<Img alt="Safe" height={14} src={plus} />
<div style={buttonStyle}>Create new Safe</div>
@ -50,6 +51,7 @@ export const LoadSafe = ({ provider, size }) => (
size={size || 'medium'}
to={LOAD_ADDRESS}
variant="outlined"
testId="load-existing-safe-btn"
>
<Img alt="Safe" height={14} src={safe} />
<div style={buttonStyle}>Load existing Safe</div>
@ -108,7 +110,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
<Heading align="center" margin="md" tag="h3">
Get Started by Connecting a Wallet
</Heading>
<ConnectButton minHeight={42} minWidth={240} />
<ConnectButton minHeight={42} minWidth={240} data-testid="connect-btn" />
</Block>
)}
</Block>

1619
yarn.lock
View File

File diff suppressed because it is too large Load Diff