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

Fix value bug + preserve values when changing switch

This commit is contained in:
Mati Dastugue 2020-06-18 20:14:53 -03:00
parent 473977723b
commit 45ca501c60
5 changed files with 41 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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)) {

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

@ -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' && (

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

@ -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) => {
</Row>
<Row align="center" margin="md">
<Col xs={1}>
<Identicon address={tx.recipientAddress} diameter={32} />
<Identicon address={tx.contractAddress} diameter={32} />
</Col>
<Col layout="column" xs={11}>
<Block justify="left">
<Paragraph noMargin weight="bolder">
{tx.recipientAddress}
{tx.contractAddress}
</Paragraph>
<CopyBtn content={tx.recipientAddress} />
<EtherscanBtn type="address" value={tx.recipientAddress} />
<CopyBtn content={tx.contractAddress} />
<EtherscanBtn type="address" value={tx.contractAddress} />
</Block>
</Col>
</Row>

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

@ -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<Props> = ({
initialValues,
onClose,
onNext,
recipientAddress,
contractAddress,
switchMethod,
isABI,
}: Props) => {
@ -56,7 +56,7 @@ const SendCustomTx: React.FC<Props> = ({
const { ethBalance } = useSelector(safeSelector)
const [qrModalOpen, setQrModalOpen] = useState<boolean>(false)
const [selectedEntry, setSelectedEntry] = useState<{ address?: string; name?: string } | null>({
address: recipientAddress || initialValues.recipientAddress,
address: contractAddress || initialValues.contractAddress,
name: '',
})
const [pristine, setPristine] = useState<boolean>(true)
@ -68,9 +68,14 @@ const SendCustomTx: React.FC<Props> = ({
}
}, [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<Props> = ({
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<Props> = ({
<GnoForm formMutators={formMutators} initialValues={initialValues} onSubmit={handleSubmit}>
{(...args) => {
const mutators = args[3]
let shouldDisableSubmitButton = !isValidAddress
if (selectedEntry) {
shouldDisableSubmitButton = !selectedEntry.address
@ -228,7 +232,7 @@ const SendCustomTx: React.FC<Props> = ({
placeholder="Value*"
text="Value*"
type="text"
validate={composeValidators(mustBeFloat, maxValue(ethBalance))}
validate={composeValidators(mustBeFloat, maxValue(ethBalance), greaterThan(0))}
/>
</Col>
</Row>
@ -244,7 +248,7 @@ const SendCustomTx: React.FC<Props> = ({
</Row>
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Use custom data (hex encoded)
<Switch checked={!isABI} onChange={switchMethod} />
<Switch onChange={() => saveForm(args[2].values)} checked={!isABI} />
</Paragraph>
</Block>
<Hairline />

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

@ -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<ContractInteractionProps> = ({
@ -58,13 +58,18 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
}
}, [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<ContractInteractionProps> = ({
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<ContractInteractionProps> = ({
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<ContractInteractionProps> = ({
<FormErrorMessage />
<Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
Use custom data (hex encoded)
<Switch checked={!isABI} onChange={switchMethod} />
<Switch checked={!isABI} onChange={() => saveForm(rest.values)} />
</Paragraph>
</Block>
<Hairline />