Refactor remove v2 code (#43) (#44)

* refactor(bridge): remove v2 code

* refactor(bridge): remove v2 code

Author: osiastedian

components/Admin/Transfer/AddLogModals/AddNEVMTransactionModal.tsx

@@ -14,7 +14,7 @@ import {
   AddNEVMLogRequestPayload,
 } from "api/types/admin/transfer/add-log";
 import { useState } from "react";
-import { useNevmTransaction } from "components/Bridge/v3/hooks/useNevmTransaction";
+import { useNevmTransaction } from "components/Bridge/hooks/useNevmTransaction";
 
 type Props = {
   onClose: (refetch?: boolean) => void;

components/Admin/Transfer/AddLogModals/AddUTXOTransactionModal.tsx

@@ -9,7 +9,7 @@ import {
 } from "@mui/material";
 import AddLogModalContainer from "./ModalContainer";
 import { useForm } from "react-hook-form";
-import { useUtxoTransaction } from "components/Bridge/v3/hooks/useUtxoTransaction";
+import { useUtxoTransaction } from "components/Bridge/hooks/useUtxoTransaction";
 import { useNEVM } from "@contexts/ConnectedWallet/NEVMProvider";
 import { AddUTXOLogRequestPayload } from "api/types/admin/transfer/add-log";
 import { useState } from "react";

components/Bridge/v3/Loading.tsx renamed to components/Bridge/Loading.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 
-const BridgeV3Loading = () => {
+const BridgeLoading = () => {
   return (
     <Box
       sx={{
@@ -16,4 +16,4 @@ const BridgeV3Loading = () => {
   );
 };
 
-export default BridgeV3Loading;
+export default BridgeLoading;

components/Bridge/v3/NEVMStepWrapepr.tsx renamed to components/Bridge/NEVMStepWrapepr.tsx

@@ -2,12 +2,12 @@ import { Button, ButtonProps } from "@mui/material";
 import NextLink from "next/link";
 import AddIcon from "@mui/icons-material/Add";
 
-const BridgeV3NewTransferButton: React.FC<ButtonProps> = (props) => {
+const BridgeNewTransferButton: React.FC<ButtonProps> = (props) => {
   return (
-    <Button LinkComponent={NextLink} href="/bridge/v3/sys-to-nevm" {...props}>
+    <Button LinkComponent={NextLink} href="/bridge/sys-to-nevm" {...props}>
       <AddIcon /> New Transfer
     </Button>
   );
 };
 
-export default BridgeV3NewTransferButton;
+export default BridgeNewTransferButton;

components/Bridge/v3/NewTransferButton.tsx renamed to components/Bridge/NewTransferButton.tsx

@@ -1,7 +1,7 @@
 import { CircularProgress, Typography } from "@mui/material";
 import { useTransfer } from "./context/TransferContext";
 
-const BridgeV3SavingIndicator = () => {
+const BridgeSavingIndicator = () => {
   const { isSaving } = useTransfer();
   if (!isSaving) return null;
   return (
@@ -12,4 +12,4 @@ const BridgeV3SavingIndicator = () => {
   );
 };
 
-export default BridgeV3SavingIndicator;
+export default BridgeSavingIndicator;

components/Bridge/v3/SavingIndicator.tsx renamed to components/Bridge/SavingIndicator.tsx

@@ -3,39 +3,39 @@ import {
   ETH_TO_SYS_TRANSFER_STATUS,
   SYS_TO_ETH_TRANSFER_STATUS,
 } from "@contexts/Transfer/types";
-import BridgeV3StepBurnSys from "./Steps/BurnSys";
-import BridgeV3StepBurnSysx from "./Steps/BurnSysx";
-import BridgeV3CompleteNevmToSys from "./Steps/CompleteNevmToSys";
-import BridgeV3CompleteSysToNevm from "./Steps/CompleteSysToNevm";
-import BridgeV3ConfirmNEVMTransaction from "./Steps/ConfirmNEVMTransaction";
-import BridgeV3StepConfirmUTXOTransaction from "./Steps/ConfirmUTXOTransaction";
-import BridgeV3ConnectValidateStep from "./Steps/ConnectValidate";
-import BridgeV3StepFreezeAndBurnSys from "./Steps/FreezeAndBurnSys";
-import BridgeV3StepGenerateProofs from "./Steps/GenerateProofs";
-import BridgeV3StepMintSysx from "./Steps/MintSysx";
-import BridgeV3StepSubmitProofs from "./Steps/SubmitProofs";
+import BridgeStepBurnSys from "./Steps/BurnSys";
+import BridgeStepBurnSysx from "./Steps/BurnSysx";
+import BridgeCompleteNevmToSys from "./Steps/CompleteNevmToSys";
+import BridgeCompleteSysToNevm from "./Steps/CompleteSysToNevm";
+import BridgeConfirmNEVMTransaction from "./Steps/ConfirmNEVMTransaction";
+import BridgeStepConfirmUTXOTransaction from "./Steps/ConfirmUTXOTransaction";
+import BridgeConnectValidateStep from "./Steps/ConnectValidate";
+import BridgeStepFreezeAndBurnSys from "./Steps/FreezeAndBurnSys";
+import BridgeStepGenerateProofs from "./Steps/GenerateProofs";
+import BridgeStepMintSysx from "./Steps/MintSysx";
+import BridgeStepSubmitProofs from "./Steps/SubmitProofs";
 import { useTransfer } from "./context/TransferContext";
 
-const BridgeV3StepSwitch = () => {
+const BridgeStepSwitch = () => {
   const { transfer } = useTransfer();
   if (transfer.type === "nevm-to-sys") {
     if (transfer.status === COMMON_STATUS.INITIALIZE) {
       return (
-        <BridgeV3ConnectValidateStep
+        <BridgeConnectValidateStep
           successStatus={ETH_TO_SYS_TRANSFER_STATUS.FREEZE_BURN_SYS}
         />
       );
     } else if (transfer.status === ETH_TO_SYS_TRANSFER_STATUS.FREEZE_BURN_SYS) {
       return (
-        <BridgeV3StepFreezeAndBurnSys
+        <BridgeStepFreezeAndBurnSys
           successStatus={ETH_TO_SYS_TRANSFER_STATUS.CONFIRM_FREEZE_BURN_SYS}
         />
       );
     } else if (
       transfer.status === ETH_TO_SYS_TRANSFER_STATUS.CONFIRM_FREEZE_BURN_SYS
     ) {
       return (
-        <BridgeV3ConfirmNEVMTransaction
+        <BridgeConfirmNEVMTransaction
           invalidStateMessage="Invalid State: Freeze and Burn logs was not saved"
           loadingMessage="Confirming freeze and burn transaction..."
           sourceStatus={ETH_TO_SYS_TRANSFER_STATUS.FREEZE_BURN_SYS}
@@ -44,15 +44,15 @@ const BridgeV3StepSwitch = () => {
       );
     } else if (transfer.status === ETH_TO_SYS_TRANSFER_STATUS.MINT_SYSX) {
       return (
-        <BridgeV3StepMintSysx
+        <BridgeStepMintSysx
           successStatus={ETH_TO_SYS_TRANSFER_STATUS.CONFIRM_MINT_SYSX}
         />
       );
     } else if (
       transfer.status === ETH_TO_SYS_TRANSFER_STATUS.CONFIRM_MINT_SYSX
     ) {
       return (
-        <BridgeV3StepConfirmUTXOTransaction
+        <BridgeStepConfirmUTXOTransaction
           invalidStateMessage="Invalid State: Mint Sysx transaction was not saved"
           loadingMessage="Confirming Mint of Sysx transaction..."
           sourceStatus={ETH_TO_SYS_TRANSFER_STATUS.MINT_SYSX}
@@ -61,7 +61,7 @@ const BridgeV3StepSwitch = () => {
       );
     } else if (transfer.status === ETH_TO_SYS_TRANSFER_STATUS.BURN_SYSX) {
       return (
-        <BridgeV3StepBurnSysx
+        <BridgeStepBurnSysx
           successStatus={ETH_TO_SYS_TRANSFER_STATUS.CONFIRM_BURN_SYSX}
           toNevm={false}
         />
@@ -70,33 +70,33 @@ const BridgeV3StepSwitch = () => {
       transfer.status === ETH_TO_SYS_TRANSFER_STATUS.CONFIRM_BURN_SYSX
     ) {
       return (
-        <BridgeV3StepConfirmUTXOTransaction
+        <BridgeStepConfirmUTXOTransaction
           invalidStateMessage="Invalid State: Burn Sysx transaction was not saved"
           loadingMessage="Confirming Burn of Sysx transaction..."
           sourceStatus={ETH_TO_SYS_TRANSFER_STATUS.BURN_SYSX}
           successStatus={COMMON_STATUS.COMPLETED}
         />
       );
     } else if (transfer.status === COMMON_STATUS.COMPLETED) {
-      return <BridgeV3CompleteNevmToSys transfer={transfer} />;
+      return <BridgeCompleteNevmToSys transfer={transfer} />;
     }
   }
 
   if (transfer.status === COMMON_STATUS.INITIALIZE) {
     return (
-      <BridgeV3ConnectValidateStep
+      <BridgeConnectValidateStep
         successStatus={SYS_TO_ETH_TRANSFER_STATUS.BURN_SYS}
       />
     );
   } else if (transfer.status === SYS_TO_ETH_TRANSFER_STATUS.BURN_SYS) {
     return (
-      <BridgeV3StepBurnSys
+      <BridgeStepBurnSys
         successStatus={SYS_TO_ETH_TRANSFER_STATUS.CONFIRM_BURN_SYS}
       />
     );
   } else if (transfer.status === SYS_TO_ETH_TRANSFER_STATUS.CONFIRM_BURN_SYS) {
     return (
-      <BridgeV3StepConfirmUTXOTransaction
+      <BridgeStepConfirmUTXOTransaction
         invalidStateMessage="Invalid State: Burn SYS transaction was not saved"
         loadingMessage="Confirming Burn of SYS transaction..."
         sourceStatus={SYS_TO_ETH_TRANSFER_STATUS.BURN_SYS}
@@ -106,14 +106,14 @@ const BridgeV3StepSwitch = () => {
     );
   } else if (transfer.status === SYS_TO_ETH_TRANSFER_STATUS.BURN_SYSX) {
     return (
-      <BridgeV3StepBurnSysx
+      <BridgeStepBurnSysx
         successStatus={SYS_TO_ETH_TRANSFER_STATUS.CONFIRM_BURN_SYSX}
         toNevm={true}
       />
     );
   } else if (transfer.status === SYS_TO_ETH_TRANSFER_STATUS.CONFIRM_BURN_SYSX) {
     return (
-      <BridgeV3StepConfirmUTXOTransaction
+      <BridgeStepConfirmUTXOTransaction
         invalidStateMessage="Invalid State: Burn SYSX transaction was not saved"
         loadingMessage="Confirming Burn of SYSX transaction..."
         sourceStatus={SYS_TO_ETH_TRANSFER_STATUS.BURN_SYSX}
@@ -122,28 +122,28 @@ const BridgeV3StepSwitch = () => {
     );
   } else if (transfer.status === SYS_TO_ETH_TRANSFER_STATUS.GENERATE_PROOFS) {
     return (
-      <BridgeV3StepGenerateProofs
+      <BridgeStepGenerateProofs
         successStatus={SYS_TO_ETH_TRANSFER_STATUS.SUBMIT_PROOFS}
       />
     );
   } else if (transfer.status === SYS_TO_ETH_TRANSFER_STATUS.SUBMIT_PROOFS) {
     return (
-      <BridgeV3StepSubmitProofs successStatus={COMMON_STATUS.FINALIZING} />
+      <BridgeStepSubmitProofs successStatus={COMMON_STATUS.FINALIZING} />
     );
   } else if (transfer.status == COMMON_STATUS.FINALIZING) {
     return (
-      <BridgeV3ConfirmNEVMTransaction
+      <BridgeConfirmNEVMTransaction
         invalidStateMessage="Invalid State: Submit Proofs logs was not saved"
         loadingMessage="Confirming final transaction..."
         sourceStatus={SYS_TO_ETH_TRANSFER_STATUS.SUBMIT_PROOFS}
         successStatus={COMMON_STATUS.COMPLETED}
       />
     );
   } else if (transfer.status === "completed") {
-    return <BridgeV3CompleteSysToNevm transfer={transfer} />;
+    return <BridgeCompleteSysToNevm transfer={transfer} />;
   }
 
   return null;
 };
 
-export default BridgeV3StepSwitch;
+export default BridgeStepSwitch;

components/Bridge/v3/StepSwitch.tsx renamed to components/Bridge/StepSwitch.tsx

@@ -1,36 +1,89 @@
-import { Alert, Step, StepLabel, Stepper } from "@mui/material";
-import { useTransfer } from "contexts/Transfer/useTransfer";
+import { Step, StepLabel, Stepper } from "@mui/material";
+import { nevmToSysSteps, sysToNevmSteps } from "./contants/steps";
+import { useTransfer } from "./context/TransferContext";
+import {
+  ETH_TO_SYS_TRANSFER_STATUS,
+  SYS_TO_ETH_TRANSFER_STATUS,
+} from "@contexts/Transfer/types";
 
-const BridgeTransferStepper: React.FC = () => {
+const NEVMToSYSStepper: React.FC<{ activeStep: number }> = ({ activeStep }) => (
+  <Stepper activeStep={activeStep}>
+    <Step key="connect-and-validate">
+      <StepLabel>Connect and Validated</StepLabel>
+    </Step>
+    <Step key="freeze-and-burn">
+      <StepLabel>Freeze and Burn SYS</StepLabel>
+    </Step>
+    <Step key="mint-sysx">
+      <StepLabel>Mint SYSX</StepLabel>
+    </Step>
+    <Step key="burn-sysx">
+      <StepLabel>Burn SYSX</StepLabel>
+    </Step>
+    <Step key="Completed">
+      <StepLabel>Completed</StepLabel>
+    </Step>
+  </Stepper>
+);
+
+const SYSToNEVMStepper: React.FC<{ activeStep: number }> = ({ activeStep }) => {
+  const { transfer } = useTransfer();
+  const useSysx = transfer.useSysx || transfer.utxoAssetType === "sysx";
+  return (
+    <Stepper activeStep={activeStep}>
+      <Step key="connect-and-validate">
+        <StepLabel>Connect and Validated</StepLabel>
+      </Step>
+      <Step key="burn-sys">
+        <StepLabel>Burn SYS {useSysx ? "(Skipped)" : ""}</StepLabel>
+      </Step>
+      <Step key="burn-sysx">
+        <StepLabel>Burn SYSX</StepLabel>
+      </Step>
+      <Step key="validate-proofs">
+        <StepLabel>Validate Proofs</StepLabel>
+      </Step>
+      <Step key="Completed">
+        <StepLabel>Completed</StepLabel>
+      </Step>
+    </Stepper>
+  );
+};
+
+const BridgeStepper: React.FC = () => {
   const {
-    transfer: { status },
-    steps: mainSteps,
+    transfer: { type, status },
   } = useTransfer();
-  const initializeStep = {
-    id: "initialize",
-    label: "Initialize",
-  };
-  const completeStep = {
-    id: "completed",
-    label: "Completed",
-  };
+  let activeStep = 1;
+  let modifiedStatus = status;
 
-  if (mainSteps.length === 0) {
-    return <Alert severity="error">Invalid Transfer type</Alert>;
+  if (type === "nevm-to-sys") {
+    if (modifiedStatus === ETH_TO_SYS_TRANSFER_STATUS.CONFIRM_FREEZE_BURN_SYS) {
+      modifiedStatus = ETH_TO_SYS_TRANSFER_STATUS.FREEZE_BURN_SYS;
+    } else if (
+      modifiedStatus === ETH_TO_SYS_TRANSFER_STATUS.CONFIRM_MINT_SYSX
+    ) {
+      modifiedStatus = ETH_TO_SYS_TRANSFER_STATUS.MINT_SYSX;
+    } else if (modifiedStatus === "confirm-burn-sysx") {
+      modifiedStatus = ETH_TO_SYS_TRANSFER_STATUS.BURN_SYSX;
+    }
+    activeStep = nevmToSysSteps.findIndex((step) => step === modifiedStatus);
+    return <NEVMToSYSStepper activeStep={activeStep} />;
   }
 
-  const steps = [initializeStep, ...mainSteps, completeStep];
-  const activeStep = steps.findIndex((step) => step.id === status);
+  if (modifiedStatus === "confirm-burn-sys") {
+    modifiedStatus = SYS_TO_ETH_TRANSFER_STATUS.BURN_SYS;
+  } else if (modifiedStatus === "confirm-burn-sysx") {
+    modifiedStatus = SYS_TO_ETH_TRANSFER_STATUS.BURN_SYSX;
+  } else if (
+    modifiedStatus === "finalizing" ||
+    modifiedStatus === "generate-proofs"
+  ) {
+    modifiedStatus = SYS_TO_ETH_TRANSFER_STATUS.SUBMIT_PROOFS;
+  }
 
-  return (
-    <Stepper activeStep={activeStep || 0} alternativeLabel sx={{ mb: 2 }}>
-      {steps.map((step) => (
-        <Step key={step.id}>
-          <StepLabel>{step.label}</StepLabel>
-        </Step>
-      ))}
-    </Stepper>
-  );
+  activeStep = sysToNevmSteps.findIndex((step) => step === modifiedStatus);
+  return <SYSToNEVMStepper activeStep={activeStep} />;
 };
 
-export default BridgeTransferStepper;
+export default BridgeStepper;

components/Bridge/Stepper.tsx

@@ -106,10 +106,10 @@ const BurnSys: React.FC<BurnSysProps> = ({ successStatus }) => {
   );
 };
 
-const BridgeV3StepBurnSys: React.FC<BurnSysProps> = (props) => (
+const BridgeStepBurnSys: React.FC<BurnSysProps> = (props) => (
   <UTXOStepWrapper>
     <BurnSys {...props} />
   </UTXOStepWrapper>
 );
 
-export default BridgeV3StepBurnSys;
+export default BridgeStepBurnSys;

components/Bridge/v3/Steps/BurnSys.tsx renamed to components/Bridge/Steps/BurnSys.tsx

@@ -107,10 +107,10 @@ const BurnSysx: React.FC<BurnSysProps> = ({ successStatus, toNevm }) => {
   );
 };
 
-const BridgeV3StepBurnSysx: React.FC<BurnSysProps> = (props) => (
+const BridgeStepBurnSysx: React.FC<BurnSysProps> = (props) => (
   <UTXOStepWrapper>
     <BurnSysx {...props} />
   </UTXOStepWrapper>
 );
 
-export default BridgeV3StepBurnSysx;
+export default BridgeStepBurnSysx;

components/Bridge/v3/Steps/BurnSysx.tsx renamed to components/Bridge/Steps/BurnSysx.tsx

@@ -10,7 +10,7 @@ type Props = {
   transfer: ITransfer;
 };
 
-const BridgeV3CompleteNevmToSys: React.FC<Props> = ({ transfer }) => {
+const BridgeCompleteNevmToSys: React.FC<Props> = ({ transfer }) => {
   const { logs } = transfer;
   const mintSysTx = logs.find(
     (log) => log.status === "mint-sysx" && log.payload.data.tx !== undefined
@@ -58,4 +58,4 @@ const BridgeV3CompleteNevmToSys: React.FC<Props> = ({ transfer }) => {
   );
 };
 
-export default BridgeV3CompleteNevmToSys;
+export default BridgeCompleteNevmToSys;