Merge pull request #448 from BitGo/COIN-597-recovery-flow

feat(wrw): update custody wallet recovery flow
BitGo · Jun 5, 2024 · cf0a76e · cf0a76e
2 parents d16dc0d + ebc794b
commit cf0a76e
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 101 deletions.
diff --git a/src/containers/EvmCrossChainRecoveryWallet/CustodyWalletForm.tsx b/src/containers/EvmCrossChainRecoveryWallet/CustodyWalletForm.tsx
@@ -1,24 +1,15 @@
 import { Form, FormikHelpers, FormikProvider, useFormik } from 'formik';
 import { Link } from 'react-router-dom';
 import * as Yup from 'yup';
-import { Button } from '~/components';
+import { Button, FormikTextfield } from '~/components';
 import { EvmCrossChainRecoveryBaseForm } from './EvmCrossChainRecoveryBaseForm';
 
 const validationSchema = Yup.object({
-  bitgoFeeAddress: Yup.string().required(),
-  gasLimit: Yup.number()
-    .typeError('Gas limit must be a number')
-    .integer()
-    .positive('Gas limit must be a positive integer')
-    .required(),
-  maxFeePerGas: Yup.number().required(),
-  maxPriorityFeePerGas: Yup.number().required(),
   recoveryDestination: Yup.string().required(),
-  walletContractAddress: Yup.string().required(),
   tokenContractAddress: Yup.string(),
-  apiKey: Yup.string().required(),
   wrongChain: Yup.string().required(),
   intendedChain: Yup.string().required(),
+  walletId: Yup.string().required(),
 }).required();
 
 export type FormProps = {
@@ -34,16 +25,11 @@ export function CustodyWalletForm({ onSubmit }: FormProps) {
   const formik = useFormik<FormValues>({
     onSubmit,
     initialValues: {
-      bitgoFeeAddress: '',
-      gasLimit: 500000,
-      maxFeePerGas: 500,
-      maxPriorityFeePerGas: 50,
       recoveryDestination: '',
-      walletContractAddress: '',
       tokenContractAddress: undefined,
-      apiKey: '',
       wrongChain: '',
       intendedChain: '',
+      walletId: '',
     },
     validationSchema,
   });
@@ -55,6 +41,14 @@ export function CustodyWalletForm({ onSubmit }: FormProps) {
           Bitgo managed custody wallet details
         </h4>
         <EvmCrossChainRecoveryBaseForm formik={formik} />
+        <div className="tw-mb-4">
+          <FormikTextfield
+            HelperText="The identifier of the wallet of the intendend chain."
+            Label="Wallet ID*"
+            name="walletId"
+            Width="fill"
+          />
+        </div>
         <div className="tw-flex tw-flex-col-reverse sm:tw-justify-between sm:tw-flex-row tw-gap-1 tw-mt-4">
           <Button Tag={Link} to="/" Variant="secondary" Width="hug">
             Cancel

diff --git a/src/containers/EvmCrossChainRecoveryWallet/EvmCrossChainRecoveryBaseForm.tsx b/src/containers/EvmCrossChainRecoveryWallet/EvmCrossChainRecoveryBaseForm.tsx
@@ -6,6 +6,7 @@ import {
   evmCCRWrongChainCoins,
   evmCCRIntendedChainCoins,
   CoinMetadata,
+  allWalletMetas,
 } from '~/helpers/config';
 import { BitgoEnv, safeEnv } from '~/helpers';
 
@@ -22,6 +23,8 @@ export function EvmCrossChainRecoveryBaseForm({
     readonly CoinMetadata[]
   >([]);
   const { env } = useParams<'env'>();
+  const { wallet } = useParams<'wallet'>();
+  const isCustodyWallet = wallet === allWalletMetas.custody.value;
   const bitGoEnvironment: BitgoEnv = safeEnv(env);
   const wrongChainCoins: readonly CoinMetadata[] =
     evmCCRWrongChainCoins[bitGoEnvironment];
@@ -87,22 +90,26 @@ export function EvmCrossChainRecoveryBaseForm({
           {getIntendedChainCoins()}
         </FormikSelectfield>
       </div>
-      <div className="tw-mb-4">
-        <FormikTextfield
-          HelperText="The base address of the wallet."
-          Label="Wallet Contract Address* (Base Address)"
-          name="walletContractAddress"
-          Width="fill"
-        />
-      </div>
-      <div className="tw-mb-4">
-        <FormikTextfield
-          HelperText="The Fee address which will be used to pay fee for your recovery transaction."
-          Label="Bitgo Fee Address*"
-          name="bitgoFeeAddress"
-          Width="fill"
-        />
-      </div>
+      {!isCustodyWallet && (
+        <div className="tw-mb-4">
+          <FormikTextfield
+            HelperText="The base address of the wallet."
+            Label="Wallet Contract Address* (Base Address)"
+            name="walletContractAddress"
+            Width="fill"
+          />
+        </div>
+      )}
+      {!isCustodyWallet && (
+        <div className="tw-mb-4">
+          <FormikTextfield
+            HelperText="The Fee address which will be used to pay fee for your recovery transaction."
+            Label="Bitgo Fee Address*"
+            name="bitgoFeeAddress"
+            Width="fill"
+          />
+        </div>
+      )}
       <div className="tw-mb-4">
         <FormikTextfield
           HelperText="The address your recovery transaction will send to."
@@ -111,30 +118,37 @@ export function EvmCrossChainRecoveryBaseForm({
           Width="fill"
         />
       </div>
-      <div className="tw-mb-4">
-        <FormikTextfield
-          HelperText="Gas limit for the Polygon transaction. The value should be between 30,000 and 20,000,000. The default is 500,000 unit of gas."
-          Label="Gas Limit"
-          name="gasLimit"
-          Width="fill"
-        />
-      </div>
-      <div className="tw-mb-4">
-        <FormikTextfield
-          HelperText="Max fee per gas for the Polygon transaction. The default is 20 Gwei."
-          Label="Max Fee Per Gas (Gwei)"
-          name="maxFeePerGas"
-          Width="fill"
-        />
-      </div>
-      <div className="tw-mb-4">
-        <FormikTextfield
-          HelperText='"Tip" to the Polygon miner. This is by default 10 Gwei.'
-          Label="Max Priority Fee Per Gas (Gwei)"
-          name="maxPriorityFeePerGas"
-          Width="fill"
-        />
-      </div>
+
+      {!isCustodyWallet && (
+        <>
+          <div className="tw-mb-4">
+            <FormikTextfield
+              HelperText="Gas limit for the Polygon transaction. The value should be between 30,000 and 20,000,000. The default is 500,000 unit of gas."
+              Label="Gas Limit"
+              name="gasLimit"
+              Width="fill"
+            />
+          </div>
+
+          <div className="tw-mb-4">
+            <FormikTextfield
+              HelperText="Max fee per gas for the Polygon transaction. The default is 20 Gwei."
+              Label="Max Fee Per Gas (Gwei)"
+              name="maxFeePerGas"
+              Width="fill"
+            />
+          </div>
+
+          <div className="tw-mb-4">
+            <FormikTextfield
+              HelperText='"Tip" to the Polygon miner. This is by default 10 Gwei.'
+              Label="Max Priority Fee Per Gas (Gwei)"
+              name="maxPriorityFeePerGas"
+              Width="fill"
+            />
+          </div>
+        </>
+      )}
       <div className="tw-mb-4">
         <FormikTextfield
           HelperText="The contract address of the token which needs to be recovered."
@@ -143,14 +157,16 @@ export function EvmCrossChainRecoveryBaseForm({
           Width="fill"
         />
       </div>
-      <div className="tw-mb-4">
-        <FormikTextfield
-          HelperText="An Api-Key Token required for the explorer."
-          Label="API Key*"
-          name="apiKey"
-          Width="fill"
-        />
-      </div>
+      {!isCustodyWallet && (
+        <div className="tw-mb-4">
+          <FormikTextfield
+            HelperText="An Api-Key Token required for the explorer."
+            Label="API Key*"
+            name="apiKey"
+            Width="fill"
+          />
+        </div>
+      )}
     </Form>
   );
 }