From 45ca501c60ab78c793ae785181cfcfbf81af06c3 Mon Sep 17 00:00:00 2001 From: Mati Dastugue Date: Thu, 18 Jun 2020 20:14:53 -0300 Subject: [PATCH] Fix value bug + preserve values when changing switch --- src/components/forms/validator.ts | 2 +- .../components/Balances/SendModal/index.tsx | 10 +++---- .../ReviewCustomTx/index.tsx | 16 +++++------ .../SendCustomTx/index.tsx | 28 +++++++++++-------- .../screens/ContractInteraction/index.tsx | 17 +++++++---- 5 files changed, 41 insertions(+), 32 deletions(-) diff --git a/src/components/forms/validator.ts b/src/components/forms/validator.ts index 8f9b95af..07330799 100644 --- a/src/components/forms/validator.ts +++ b/src/components/forms/validator.ts @@ -30,7 +30,7 @@ export const required = (value?: string) => { export const mustBeInteger = (value: string) => !Number.isInteger(Number(value)) || value.includes('.') ? 'Must be an integer' : undefined -export const mustBeFloat = (value: string) => (value && Number.isNaN(Number(value)) ? 'Must be a number' : undefined) +export const mustBeFloat = (value: string) => (value && Number.isNaN(Number(value)) ? 'Must be a number' : undefined) export const greaterThan = (min: number | string) => (value: string) => { if (Number.isNaN(Number(value)) || Number.parseFloat(value) > Number(min)) { diff --git a/src/routes/safe/components/Balances/SendModal/index.tsx b/src/routes/safe/components/Balances/SendModal/index.tsx index 8f4ef840..4bc14b09 100644 --- a/src/routes/safe/components/Balances/SendModal/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/index.tsx @@ -59,14 +59,14 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select setTx(txInfo) } - const handleContractInteractionCreation = (contractInteractionInfo) => { + const handleContractInteractionCreation = (contractInteractionInfo, submit) => { setTx(contractInteractionInfo) - setActiveScreen('contractInteractionReview') + if (submit) setActiveScreen('contractInteractionReview') } - const handleCustomTxCreation = (customTxInfo) => { - setActiveScreen('reviewCustomTx') + const handleCustomTxCreation = (customTxInfo, submit) => { setTx(customTxInfo) + if (submit) setActiveScreen('reviewCustomTx') } const handleSendCollectible = (txInfo) => { @@ -128,7 +128,7 @@ const SendModal = ({ activeScreenType, isOpen, onClose, recipientAddress, select switchMethod={handleSwitchMethod} onClose={onClose} onNext={handleCustomTxCreation} - recipientAddress={recipientAddress} + contractAddress={recipientAddress} /> )} {activeScreen === 'reviewCustomTx' && ( diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx index 967094a0..790d090a 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx @@ -33,7 +33,7 @@ import { sm } from 'src/theme/variables' type Props = { onClose: () => void onPrev: () => void - tx: { recipientAddress?: string; data?: string; value?: string } + tx: { contractAddress?: string; data?: string; value?: string } } const useStyles = makeStyles(styles) @@ -52,7 +52,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props) => { const { fromWei, toBN } = getWeb3().utils const txData = tx.data ? tx.data.trim() : '' - const estimatedGasCosts = await estimateTxGasCosts(safeAddress, tx.recipientAddress, txData) + const estimatedGasCosts = await estimateTxGasCosts(safeAddress, tx.contractAddress, txData) const gasCostsAsEth = fromWei(toBN(estimatedGasCosts), 'ether') const formattedGasCosts = formatAmount(gasCostsAsEth) @@ -66,11 +66,11 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props) => { return () => { isCurrent = false } - }, [safeAddress, tx.data, tx.recipientAddress]) + }, [safeAddress, tx.data, tx.contractAddress]) const submitTx = async () => { const web3 = getWeb3() - const txRecipient = tx.recipientAddress + const txRecipient = tx.contractAddress const txData = tx.data ? tx.data.trim() : '' const txValue = tx.value ? web3.utils.toWei(tx.value, 'ether') : '0' @@ -118,15 +118,15 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props) => { - + - {tx.recipientAddress} + {tx.contractAddress} - - + + diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx index ee7313fd..e3264ee0 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx @@ -19,7 +19,7 @@ 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 } from 'src/components/forms/validator' +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' @@ -34,12 +34,12 @@ import { safeSelector } from 'src/routes/safe/store/selectors' import { sm } from 'src/theme/variables' type Props = { - initialValues: { contractAddress?: string; recipientAddress?: string } + initialValues: { contractAddress?: string } onClose: () => void - onNext: (any) => void + onNext: (any, submit: boolean) => void isABI: boolean switchMethod: () => void - recipientAddress: string + contractAddress: string } const useStyles = makeStyles(styles) @@ -48,7 +48,7 @@ const SendCustomTx: React.FC = ({ initialValues, onClose, onNext, - recipientAddress, + contractAddress, switchMethod, isABI, }: Props) => { @@ -56,7 +56,7 @@ const SendCustomTx: React.FC = ({ const { ethBalance } = useSelector(safeSelector) const [qrModalOpen, setQrModalOpen] = useState(false) const [selectedEntry, setSelectedEntry] = useState<{ address?: string; name?: string } | null>({ - address: recipientAddress || initialValues.recipientAddress, + address: contractAddress || initialValues.contractAddress, name: '', }) const [pristine, setPristine] = useState(true) @@ -68,9 +68,14 @@ const SendCustomTx: React.FC = ({ } }, [selectedEntry, pristine]) - const handleSubmit = (values: any) => { + const saveForm = async (values) => { + await handleSubmit(values, false) + switchMethod() + } + + const handleSubmit = (values: any, submit = true) => { if (values.data || values.value) { - onNext(values) + onNext(values, submit) } } @@ -87,7 +92,7 @@ const SendCustomTx: React.FC = ({ utils.changeValue(state, 'value', () => ethBalance) }, setRecipient: (args, state, utils) => { - utils.changeValue(state, 'recipientAddress', () => args[0]) + utils.changeValue(state, 'contractAddress', () => args[0]) }, } @@ -106,7 +111,6 @@ const SendCustomTx: React.FC = ({ {(...args) => { const mutators = args[3] - let shouldDisableSubmitButton = !isValidAddress if (selectedEntry) { shouldDisableSubmitButton = !selectedEntry.address @@ -228,7 +232,7 @@ const SendCustomTx: React.FC = ({ placeholder="Value*" text="Value*" type="text" - validate={composeValidators(mustBeFloat, maxValue(ethBalance))} + validate={composeValidators(mustBeFloat, maxValue(ethBalance), greaterThan(0))} /> @@ -244,7 +248,7 @@ const SendCustomTx: React.FC = ({ Use custom data (hex encoded) - + saveForm(args[2].values)} checked={!isABI} /> diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx index c71c34d0..dea4cb58 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx @@ -37,7 +37,7 @@ export interface ContractInteractionProps { isABI: boolean onClose: () => void switchMethod: () => void - onNext: (tx: CreatedTx) => void + onNext: (tx: CreatedTx, submit: boolean) => void } const ContractInteraction: React.FC = ({ @@ -58,13 +58,18 @@ const ContractInteraction: React.FC = ({ } }, [contractAddress, initialValues.contractAddress]) - const handleSubmit = async ({ contractAddress, selectedMethod, value, ...values }) => { + const saveForm = async (values) => { + await handleSubmit(values, false) + switchMethod() + } + + const handleSubmit = async ({ contractAddress, selectedMethod, value, ...values }, submit = true) => { 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) @@ -72,7 +77,7 @@ const ContractInteraction: React.FC = ({ return } - onNext({ ...values, contractAddress, data, selectedMethod, value }) + onNext({ ...values, contractAddress, data, selectedMethod, value }, submit) } catch (error) { return handleSubmitError(error, values) } @@ -88,7 +93,7 @@ const ContractInteraction: React.FC = ({ 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 @@ -111,7 +116,7 @@ const ContractInteraction: React.FC = ({ Use custom data (hex encoded) - + saveForm(rest.values)} />