From 0acf574dd7bdfa26db6cef1d99ae21e6fecdff93 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Sat, 23 Apr 2022 15:34:37 +0200
Subject: [PATCH] Fix SendAssetsForm (#24)

---
 components/tx/ReviewTx/index.tsx       | 13 +++----------
 components/tx/SendAssetsForm/index.tsx | 15 ++++++++-------
 components/tx/TxModal/index.tsx        | 12 ++++++------
 components/tx/TxStepper/index.tsx      |  6 +++---
 4 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/components/tx/ReviewTx/index.tsx b/components/tx/ReviewTx/index.tsx
index 05485e5d5b..47fc2867d6 100644
--- a/components/tx/ReviewTx/index.tsx
+++ b/components/tx/ReviewTx/index.tsx
@@ -51,9 +51,7 @@ const ReviewTx = ({
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<ReviewTxForm>({
-    defaultValues: { nonce: safeGas?.recommendedNonce || 0 },
-  })
+  } = useForm<ReviewTxForm>()
 
   const onFormSubmit = async (data: ReviewTxForm) => {
     if (!txParams) return
@@ -73,12 +71,6 @@ const ReviewTx = ({
     }
   }
 
-  const validateNonce = (userNonce: number) => {
-    if (!Number.isInteger(userNonce)) {
-      return 'Nonce must be a number'
-    }
-  }
-
   return (
     <form className={css.container} onSubmit={handleSubmit(onFormSubmit)}>
       <Typography variant="h6">Review transaction</Typography>
@@ -92,9 +84,10 @@ const ReviewTx = ({
           error={!!errors.nonce}
           helperText={errors.nonce?.message}
           type="number"
+          key={safeGas?.recommendedNonce}
+          defaultValue={safeGas?.recommendedNonce}
           {...register('nonce', {
             valueAsNumber: true, // Set field to number type to auto parseInt
-            validate: validateNonce,
             required: true,
           })}
         />
diff --git a/components/tx/SendAssetsForm/index.tsx b/components/tx/SendAssetsForm/index.tsx
index 97f56ab362..b500ae1904 100644
--- a/components/tx/SendAssetsForm/index.tsx
+++ b/components/tx/SendAssetsForm/index.tsx
@@ -14,7 +14,12 @@ export type SendAssetsFormData = {
   amount: string
 }
 
-const SendAssetsForm = ({ onSubmit }: { onSubmit: (formData: SendAssetsFormData) => void }): ReactElement => {
+type SendAssetsFormProps = {
+  formData?: SendAssetsFormData
+  onSubmit: (formData: SendAssetsFormData) => void
+}
+
+const SendAssetsForm = ({ onSubmit, formData }: SendAssetsFormProps): ReactElement => {
   const balances = useBalances()
 
   const {
@@ -23,11 +28,7 @@ const SendAssetsForm = ({ onSubmit }: { onSubmit: (formData: SendAssetsFormData)
     getValues,
     formState: { errors },
   } = useForm<SendAssetsFormData>({
-    defaultValues: {
-      recepient: '',
-      tokenAddress: '',
-      amount: '',
-    },
+    defaultValues: formData,
   })
 
   const validateAmount = (amount: string) => {
@@ -60,7 +61,7 @@ const SendAssetsForm = ({ onSubmit }: { onSubmit: (formData: SendAssetsFormData)
         <Select
           labelId="asset-label"
           label="Select an asset"
-          defaultValue=""
+          defaultValue={formData?.tokenAddress || ''}
           {...register('tokenAddress', { required: true })}
         >
           {balances.items.map((item) => (
diff --git a/components/tx/TxModal/index.tsx b/components/tx/TxModal/index.tsx
index 28c5e12d31..7da3fc5820 100644
--- a/components/tx/TxModal/index.tsx
+++ b/components/tx/TxModal/index.tsx
@@ -26,30 +26,30 @@ const style = {
 const tokenTransferSteps: TxStepperProps['steps'] = [
   {
     label: 'Create transaction',
-    render: (onSubmit) => <SendAssetsForm onSubmit={onSubmit} />,
+    render: (data, onSubmit) => <SendAssetsForm onSubmit={onSubmit} formData={data as SendAssetsFormData} />,
   },
   {
     label: 'Review',
-    render: (onSubmit, data) => <ReviewTx params={data as SendAssetsFormData} onSubmit={onSubmit} />,
+    render: (data, onSubmit) => <ReviewTx params={data as SendAssetsFormData} onSubmit={onSubmit} />,
   },
   {
     label: 'Sign',
-    render: (onSubmit, data) => <SignTx tx={data as SafeTransaction} onSubmit={onSubmit} />,
+    render: (data, onSubmit) => <SignTx tx={data as SafeTransaction} onSubmit={onSubmit} />,
   },
   {
     label: 'Done',
-    render: (_, data) => <FinishTx tx={data as SafeTransaction} />,
+    render: (data) => <FinishTx tx={data as SafeTransaction} />,
   },
 ]
 
 const signTxSteps: TxStepperProps['steps'] = [
   {
     label: 'Sign transaction',
-    render: (onSubmit, data) => <SignProposedTx txSummary={data as TransactionSummary} onSubmit={onSubmit} />,
+    render: (data, onSubmit) => <SignProposedTx txSummary={data as TransactionSummary} onSubmit={onSubmit} />,
   },
   {
     label: 'Done',
-    render: (_, data) => <FinishTx tx={data as SafeTransaction} />,
+    render: (data) => <FinishTx tx={data as SafeTransaction} />,
   },
 ]
 
diff --git a/components/tx/TxStepper/index.tsx b/components/tx/TxStepper/index.tsx
index 5ceaad6a25..04070d8ca7 100644
--- a/components/tx/TxStepper/index.tsx
+++ b/components/tx/TxStepper/index.tsx
@@ -8,7 +8,7 @@ import Button from '@mui/material/Button'
 export type TxStepperProps = {
   steps: Array<{
     label: string
-    render: (onSubmit: (data: unknown) => void, data: unknown) => ReactElement
+    render: (data: unknown, onSubmit: (data: unknown) => void) => ReactElement
   }>
   initialStepData?: unknown[]
 }
@@ -27,7 +27,7 @@ const TxStepper = ({ steps, initialStepData }: TxStepperProps): ReactElement =>
 
   const onSubmit = (data: unknown) => {
     const allData = [...stepData]
-    allData[activeStep + 1] = data
+    allData[activeStep] = data
     setStepData(allData)
     handleNext()
   }
@@ -46,7 +46,7 @@ const TxStepper = ({ steps, initialStepData }: TxStepperProps): ReactElement =>
         })}
       </Stepper>
 
-      {steps[activeStep].render(onSubmit, stepData[activeStep])}
+      {steps[activeStep].render(stepData[Math.max(0, activeStep - 1)], onSubmit)}
 
       <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
         {activeStep < steps.length - 1 && (