feat: tx modal success stage for multisig

features/home/stake-form/stake-form.tsx

@@ -97,7 +97,6 @@ export const StakeForm: FC = memo(() => {
         providerWeb3,
         stethContractWeb3,
         openTxModal,
-        closeTxModal,
         setTxStage,
         setTxHash,
         setTxModalFailedText,
@@ -113,7 +112,6 @@ export const StakeForm: FC = memo(() => {
       providerWeb3,
       stethContractWeb3,
       openTxModal,
-      closeTxModal,
       stethBalance.update,
       chainId,
       router?.query?.ref,

features/home/stake-form/utils.ts

@@ -22,7 +22,6 @@ type StakeProcessingProps = (
   providerWeb3: Web3Provider | undefined,
   stethContractWeb3: StethAbi | null,
   openTxModal: () => void,
-  closeTxModal: () => void,
   setTxStage: (value: TX_STAGE) => void,
   setTxHash: (value: string | undefined) => void,
   setTxModalFailedText: (value: string) => void,
@@ -68,7 +67,6 @@ export const stakeProcessing: StakeProcessingProps = async (
   providerWeb3,
   stethContractWeb3,
   openTxModal,
-  closeTxModal,
   setTxStage,
   setTxHash,
   setTxModalFailedText,
@@ -148,12 +146,13 @@ export const stakeProcessing: StakeProcessingProps = async (
     );
 
     const handleEnding = () => {
+      openTxModal();
       resetForm();
       stethBalanceUpdate();
     };
 
     if (isMultisig) {
-      closeTxModal();
+      setTxStage(TX_STAGE.SUCCESS_MULTISIG);
       handleEnding();
       return;
     }
@@ -168,7 +167,6 @@ export const stakeProcessing: StakeProcessingProps = async (
     }
 
     setTxStage(TX_STAGE.SUCCESS);
-    openTxModal();
     handleEnding();
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   } catch (error: any) {

features/withdrawals/claim/tx-modal/tx-claim-modal.tsx

@@ -5,6 +5,7 @@ import {
   TxStageModal,
   TxStagePending,
   TxStageSuccess,
+  TxStageSuccessMultisig,
   TxStageSign,
   TxStageFail,
   TX_STAGE,
@@ -65,6 +66,8 @@ export const TxClaimModal = () => {
             }
           />
         );
+      case TX_STAGE.SUCCESS_MULTISIG:
+        return <TxStageSuccessMultisig />;
       case TX_STAGE.FAIL:
         return (
           <TxStageFail

features/withdrawals/contexts/transaction-modal-context.tsx

@@ -66,6 +66,9 @@ type TransactionModalAction =
     }
   | {
       type: 'success';
+    }
+  | {
+      type: 'success_multisig';
     };
 
 const TransactionModalContext =
@@ -149,6 +152,12 @@ const TransactionModalReducer = (
         isModalOpen: true,
         txStage: TX_STAGE.SUCCESS,
       };
+    case 'success_multisig':
+      return {
+        ...state,
+        isModalOpen: true,
+        txStage: TX_STAGE.SUCCESS_MULTISIG,
+      };
     case 'error':
       return {
         ...state,

features/withdrawals/hooks/contract/useClaim.ts

@@ -85,7 +85,9 @@ export const useClaim = () => {
           );
         }
         await update();
-        dispatchModalState({ type: isMultisig ? 'reset' : 'success' });
+        dispatchModalState({
+          type: isMultisig ? 'success_multisig' : 'success',
+        });
       } catch (error) {
         const errorMessage = getErrorMessage(error);
         dispatchModalState({ type: 'error', errorText: errorMessage });

features/withdrawals/hooks/contract/useRequest.ts

@@ -352,9 +352,6 @@ export const useWithdrawalRequest = ({
             });
             if (!bunkerDialogResult) return { success: false };
           }
-          // we can't know if tx was successful or even wait for it  with multisig
-          // so we exit flow gracefully and reset UI
-          const shouldSkipSuccess = isMultisig;
           // get right method
           const method = getRequestMethod(isApprovalFlow, token);
           // start flow
@@ -383,7 +380,9 @@ export const useWithdrawalRequest = ({
             await method({ signature, requests });
           }
           // end flow
-          dispatchModalState({ type: shouldSkipSuccess ? 'reset' : 'success' });
+          dispatchModalState({
+            type: isMultisig ? 'success_multisig' : 'success',
+          });
           return { success: true };
         } catch (error) {
           const errorMessage = getErrorMessage(error);

features/withdrawals/request/tx-modal/tx-request-modal.tsx

@@ -8,6 +8,7 @@ import {
   TxStagePermit,
   TxStageFail,
   TxStageBunker,
+  TxStageSuccessMultisig,
   TX_STAGE,
 } from 'features/withdrawals/shared/tx-stage-modal';
 import { useTransactionModal } from 'features/withdrawals/contexts/transaction-modal-context';
@@ -67,6 +68,8 @@ export const TxRequestModal = () => {
             amountAsString={amountAsString}
           />
         );
+      case TX_STAGE.SUCCESS_MULTISIG:
+        return <TxStageSuccessMultisig />;
       case TX_STAGE.FAIL:
         return (
           <TxStageFail

features/withdrawals/shared/tx-stage-modal/stages/icons.tsx

@@ -22,6 +22,11 @@ export const iconsDict = {
         <LedgerSuccess fill="transparent" />
       </LedgerIconWrapper>
     ),
+    [TX_STAGE.SUCCESS_MULTISIG]: (
+      <LedgerIconWrapper>
+        <LedgerSuccess fill="transparent" />
+      </LedgerIconWrapper>
+    ),
     [TX_STAGE.SIGN]: (
       <LedgerIconWrapper>
         <LedgerConfirm fill="transparent" />
@@ -54,6 +59,11 @@ export const iconsDict = {
         <SuccessIcon />
       </IconWrapper>
     ),
+    [TX_STAGE.SUCCESS_MULTISIG]: (
+      <IconWrapper>
+        <SuccessIcon />
+      </IconWrapper>
+    ),
     [TX_STAGE.FAIL]: (
       <IconWrapper>
         <FailIcon />

features/withdrawals/shared/tx-stage-modal/stages/index.ts

@@ -1,5 +1,6 @@
 export * from './tx-stage-pending';
 export * from './tx-stage-success';
+export * from './tx-stage-success-multisig';
 export * from './tx-stage-sign';
 export * from './tx-stage-permit';
 export * from './tx-stage-fail';

features/withdrawals/shared/tx-stage-modal/stages/tx-stage-success-multisig.tsx

@@ -0,0 +1,16 @@
+import { useConnectorInfo } from 'reef-knot/web3-react';
+
+import { TxStageModalContent } from 'shared/components/tx-stage-modal-content';
+import { getStageIcon } from './icons';
+import { TX_STAGE } from '../types';
+
+export const TxStageSuccessMultisig = () => {
+  const { isLedger } = useConnectorInfo();
+  return (
+    <TxStageModalContent
+      icon={getStageIcon(isLedger, TX_STAGE.SUCCESS_MULTISIG)}
+      title="Success"
+      description="Your transaction has been successfully created in the multisig wallet and awaits approval from other participants"
+    />
+  );
+};

features/withdrawals/shared/tx-stage-modal/tx-stage-modal.tsx

@@ -17,7 +17,9 @@ export const TxStageModal: FC<TxStageModalProps> = (props) => {
     () =>
       isLedger &&
       txStage &&
-      ![TX_STAGE.SUCCESS, TX_STAGE.FAIL].includes(txStage),
+      ![TX_STAGE.SUCCESS, TX_STAGE.SUCCESS_MULTISIG, TX_STAGE.FAIL].includes(
+        txStage,
+      ),
     [isLedger, txStage],
   );
 

features/withdrawals/shared/tx-stage-modal/types.ts

@@ -5,6 +5,7 @@ export enum TX_STAGE {
   SIGN,
   BLOCK,
   SUCCESS,
+  SUCCESS_MULTISIG,
   FAIL,
   BUNKER,
 }

features/wrap/features/unwrap-form/unwrap-form.tsx

@@ -78,7 +78,6 @@ export const UnwrapForm: FC = memo(() => {
         providerWeb3,
         wstethContractWeb3,
         openTxModal,
-        closeTxModal,
         setTxStage,
         setTxHash,
         setTxModalFailedText,
@@ -97,7 +96,6 @@ export const UnwrapForm: FC = memo(() => {
       providerWeb3,
       wstethContractWeb3,
       openTxModal,
-      closeTxModal,
       wstethBalance.update,
       stethBalance.update,
       chainId,

features/wrap/features/wrap-form/form.tsx

@@ -49,7 +49,6 @@ type FromProps = {
   setTxOperation: (value: TX_OPERATION) => void;
   setInputValue: (value: string) => void;
   openTxModal: () => void;
-  closeTxModal: () => void;
   setTxStage: (value: TX_STAGE) => void;
   setTxHash: (value?: string) => void;
   setTxModalFailedText: (value: string) => void;
@@ -67,7 +66,6 @@ export const Form: FC<FromProps> = (props) => {
     setWrappingAmountValue,
     setTxOperation,
     openTxModal,
-    closeTxModal,
     setTxStage,
     setTxHash,
     setTxModalFailedText,
@@ -108,7 +106,6 @@ export const Form: FC<FromProps> = (props) => {
         providerWeb3,
         wstethContractWeb3,
         openTxModal,
-        closeTxModal,
         setTxStage,
         setTxHash,
         setTxModalFailedText,
@@ -134,7 +131,6 @@ export const Form: FC<FromProps> = (props) => {
       chainId,
       wstethContractWeb3,
       openTxModal,
-      closeTxModal,
       setTxStage,
       setTxHash,
       setTxModalFailedText,

features/wrap/features/wrap-form/wrap-form.tsx

@@ -104,8 +104,8 @@ export const WrapForm: FC = memo(() => {
         );
 
         if (isMultisig) {
-          setTxStage(TX_STAGE.IDLE);
-          closeTxModal();
+          setTxStage(TX_STAGE.SUCCESS_MULTISIG);
+          openTxModal();
           return;
         }
 
@@ -130,7 +130,7 @@ export const WrapForm: FC = memo(() => {
         openTxModal();
       }
     },
-    [openTxModal, closeTxModal, isMultisig],
+    [openTxModal, isMultisig],
   );
 
   const {
@@ -167,7 +167,6 @@ export const WrapForm: FC = memo(() => {
         setTxOperation={setTxOperation}
         setInputValue={setInputValue}
         openTxModal={openTxModal}
-        closeTxModal={closeTxModal}
         setTxStage={setTxStage}
         setTxHash={setTxHash}
         setTxModalFailedText={setTxModalFailedText}

features/wrap/utils.ts

@@ -14,7 +14,6 @@ type UnwrapProcessingProps = (
   providerWeb3: Web3Provider | undefined,
   stethContractWeb3: WstethAbi | null,
   openTxModal: () => void,
-  closeTxModal: () => void,
   setTxStage: (value: TX_STAGE) => void,
   setTxHash: (value: string | undefined) => void,
   setTxModalFailedText: (value: string) => void,
@@ -30,7 +29,6 @@ export const unwrapProcessing: UnwrapProcessingProps = async (
   providerWeb3,
   wstethContractWeb3,
   openTxModal,
-  closeTxModal,
   setTxStage,
   setTxHash,
   setTxModalFailedText,
@@ -76,14 +74,15 @@ export const unwrapProcessing: UnwrapProcessingProps = async (
     );
 
     const handleEnding = () => {
+      openTxModal();
       resetForm();
       stethBalanceUpdate();
       wstethBalanceUpdate();
     };
 
     if (isMultisig) {
+      setTxStage(TX_STAGE.SUCCESS_MULTISIG);
       handleEnding();
-      closeTxModal();
       return;
     }
 
@@ -96,9 +95,8 @@ export const unwrapProcessing: UnwrapProcessingProps = async (
       );
     }
 
-    handleEnding();
     setTxStage(TX_STAGE.SUCCESS);
-    openTxModal();
+    handleEnding();
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   } catch (error: any) {
     // errors are sometimes nested :(
@@ -114,7 +112,6 @@ type WrapProcessingWithApproveProps = (
   providerWeb3: Web3Provider | undefined,
   stethContractWeb3: WstethAbi | null,
   openTxModal: () => void,
-  closeTxModal: () => void,
   setTxStage: (value: TX_STAGE) => void,
   setTxHash: (value: string | undefined) => void,
   setTxModalFailedText: (value: string) => void,
@@ -133,7 +130,6 @@ export const wrapProcessingWithApprove: WrapProcessingWithApproveProps = async (
   providerWeb3,
   wstethContractWeb3,
   openTxModal,
-  closeTxModal,
   setTxStage,
   setTxHash,
   setTxModalFailedText,
@@ -155,6 +151,7 @@ export const wrapProcessingWithApprove: WrapProcessingWithApproveProps = async (
   const wstethTokenAddress = getTokenAddress(chainId, TOKENS.WSTETH);
 
   const handleEnding = () => {
+    openTxModal();
     resetForm();
     ethBalanceUpdate();
     stethBalanceUpdate();
@@ -198,7 +195,7 @@ export const wrapProcessingWithApprove: WrapProcessingWithApproveProps = async (
       );
 
       if (isMultisig) {
-        closeTxModal();
+        setTxStage(TX_STAGE.SUCCESS_MULTISIG);
         handleEnding();
         return;
       }
@@ -212,9 +209,8 @@ export const wrapProcessingWithApprove: WrapProcessingWithApproveProps = async (
         );
       }
 
-      handleEnding();
       setTxStage(TX_STAGE.SUCCESS);
-      openTxModal();
+      handleEnding();
     } else if (selectedToken === TOKENS.STETH) {
       if (needsApprove) {
         approve();
@@ -242,7 +238,7 @@ export const wrapProcessingWithApprove: WrapProcessingWithApproveProps = async (
         );
 
         if (isMultisig) {
-          closeTxModal();
+          setTxStage(TX_STAGE.SUCCESS_MULTISIG);
           handleEnding();
           return;
         }
@@ -256,9 +252,8 @@ export const wrapProcessingWithApprove: WrapProcessingWithApproveProps = async (
           );
         }
 
-        handleEnding();
         setTxStage(TX_STAGE.SUCCESS);
-        openTxModal();
+        handleEnding();
       }
     }
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */