feat: add enums for network, mint, redeem and tabs

src/app/components/account/account.tsx

@@ -11,6 +11,8 @@ import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 import { modalActions } from '@store/slices/modal/modal.actions';
 import { Connector, useAccount, useDisconnect } from 'wagmi';
 
+import { NetworkType } from '@shared/constants/network.constants';
+
 export function Account(): React.JSX.Element {
   const dispatch = useDispatch();
 
@@ -28,10 +30,10 @@ export function Account(): React.JSX.Element {
 
   function getWalletInformation(): { address: string; wallet: XRPWallet | Connector } | undefined {
     switch (networkType) {
-      case 'evm':
+      case NetworkType.EVM:
         if (!ethereumUserAddress || !ethereumWallet) return undefined;
         return { address: ethereumUserAddress, wallet: ethereumWallet };
-      case 'xrpl':
+      case NetworkType.XRPL:
         if (!rippleUserAddress) return undefined;
         return {
           address: rippleUserAddress,
@@ -48,10 +50,10 @@ export function Account(): React.JSX.Element {
 
   function onDisconnectWalletClick(): void {
     switch (networkType) {
-      case 'evm':
+      case NetworkType.EVM:
         disconnectEthereumWallet();
         break;
-      case 'xrpl':
+      case NetworkType.XRPL:
         resetXRPWalletContext();
         break;
       default:

src/app/components/header/header.tsx

@@ -6,6 +6,8 @@ import { NetworkConfigurationContext } from '@providers/network-configuration.pr
 import { NetworkConnectionContext } from '@providers/network-connection.provider';
 import { useAccount } from 'wagmi';
 
+import { NetworkType } from '@shared/constants/network.constants';
+
 import { Banner } from './components/banner';
 import DesktopHeader from './components/desktop-header';
 import MobileHeader from './components/mobile-header';
@@ -27,7 +29,7 @@ export function Header(): React.JSX.Element {
   const isMobile = useBreakpointValue({ base: true, md: false });
 
   useEffect(() => {
-    if (networkType === 'evm' && isConnected && !ethereumNetwork) {
+    if (networkType === NetworkType.EVM && isConnected && !ethereumNetwork) {
       setShowBanner(true);
     } else {
       setShowBanner(false);

src/app/components/how-it-works/bottom/components/how-to-mint.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { Box, Button, Image, Text } from '@chakra-ui/react';
 import { IntroVideo } from '@components/how-it-works/top/components/intro-video';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
+import { MintSteps } from '@store/slices/mintunmint/mintunmint.slice';
 
 import { CustomCard } from '../../components/custom-card';
 import { FlowStep } from './flow-step';
@@ -77,7 +78,7 @@ export function HowToMint(): React.JSX.Element {
           <Button
             onClick={() => {
               navigate('/mint-withdraw');
-              dispatch(mintUnmintActions.setMintStep([0, '']));
+              dispatch(mintUnmintActions.setMintStep({ step: MintSteps.SETUP, vault: undefined }));
               close();
             }}
             variant={'account'}

src/app/components/how-it-works/bottom/components/how-to-unmint.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { Box, Button, Image, Text } from '@chakra-ui/react';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
+import { RedeemSteps } from '@store/slices/mintunmint/mintunmint.slice';
 
 import { CustomCard } from '../../components/custom-card';
 import { FlowStep } from './flow-step';
@@ -31,7 +32,9 @@ export function HowToUnmint(): React.JSX.Element {
           <Button
             onClick={() => {
               navigate('/mint-withdraw');
-              dispatch(mintUnmintActions.setUnmintStep([0, '']));
+              dispatch(
+                mintUnmintActions.setUnmintStep({ step: RedeemSteps.BURN, vault: undefined })
+              );
               close();
             }}
             variant={'account'}

src/app/components/mint-unmint/components/burn-transaction-screen/burn-transaction-screen.tsx

@@ -12,9 +12,12 @@ import { NetworkConfigurationContext } from '@providers/network-configuration.pr
 import { ProofOfReserveContext } from '@providers/proof-of-reserve-context-provider';
 import { RootState } from '@store/index';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
+import { RedeemSteps } from '@store/slices/mintunmint/mintunmint.slice';
 import { withdraw } from 'dlc-btc-lib/ethereum-functions';
 import { shiftValue } from 'dlc-btc-lib/utilities';
 
+import { NetworkType } from '@shared/constants/network.constants';
+
 interface BurnTokenTransactionFormProps {
   isBitcoinWalletLoading: [boolean, string];
   userEthereumAddressRiskLevel: string;
@@ -44,15 +47,15 @@ export function BurnTokenTransactionForm({
   const { unmintStep } = useSelector((state: RootState) => state.mintunmint);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const currentVault = unmintStep[2];
+  const currentVault = unmintStep.vault;
 
   async function handleButtonClick(withdrawAmount: number): Promise<void> {
     try {
       if (!currentVault) return;
       setIsSubmitting(true);
-      if (networkType === 'xrpl') {
+      if (networkType === NetworkType.XRPL) {
         await handleCreateCheck(currentVault.uuid, withdrawAmount);
-      } else if (networkType === 'evm') {
+      } else if (networkType === NetworkType.EVM) {
         const currentRisk = await fetchUserEthereumAddressRiskLevel();
         if (currentRisk === 'High') throw new Error('Risk Level is too high');
         const formattedWithdrawAmount = BigInt(shiftValue(withdrawAmount));
@@ -78,7 +81,7 @@ export function BurnTokenTransactionForm({
   }
 
   function handleCancel() {
-    dispatch(mintUnmintActions.setUnmintStep([0, '']));
+    dispatch(mintUnmintActions.setUnmintStep({ step: RedeemSteps.BURN, vault: undefined }));
   }
 
   return (
@@ -87,7 +90,7 @@ export function BurnTokenTransactionForm({
       <VaultTransactionForm
         vault={currentVault!}
         flow={'burn'}
-        currentStep={unmintStep[0]}
+        currentStep={unmintStep.step}
         currentBitcoinPrice={bitcoinPrice}
         handleButtonClick={handleButtonClick}
         depositLimit={depositLimit}

src/app/components/mint-unmint/components/deposit-transaction-screen/deposit-transaction-screen.tsx

@@ -12,8 +12,11 @@ import { NetworkConfigurationContext } from '@providers/network-configuration.pr
 import { ProofOfReserveContext } from '@providers/proof-of-reserve-context-provider';
 import { RootState } from '@store/index';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
+import { MintSteps } from '@store/slices/mintunmint/mintunmint.slice';
 import { modalActions } from '@store/slices/modal/modal.actions';
 
+import { NetworkType } from '@shared/constants/network.constants';
+
 interface DepositTransactionScreenProps {
   handleSignFundingTransaction: (vaultUUID: string, depositAmount: number) => Promise<void>;
   isBitcoinWalletLoading: [boolean, string];
@@ -39,7 +42,7 @@ export function DepositTransactionScreen({
 
   const { mintStep } = useSelector((state: RootState) => state.mintunmint);
 
-  const currentVault = mintStep[2];
+  const currentVault = mintStep.vault;
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -48,7 +51,7 @@ export function DepositTransactionScreen({
 
     try {
       setIsSubmitting(true);
-      if (networkType === 'evm') {
+      if (networkType === NetworkType.EVM) {
         const currentRisk = await fetchUserEthereumAddressRiskLevel();
         if (currentRisk === 'High') throw new Error('Risk Level is too high');
       }
@@ -71,7 +74,7 @@ export function DepositTransactionScreen({
 
   function handleCancel() {
     resetBitcoinWalletContext();
-    dispatch(mintUnmintActions.setMintStep([0, '']));
+    dispatch(mintUnmintActions.setMintStep({ step: MintSteps.SETUP, vault: undefined }));
   }
 
   async function handleButtonClick(assetAmount: number) {
@@ -86,7 +89,7 @@ export function DepositTransactionScreen({
       <VaultTransactionForm
         vault={currentVault!}
         flow={'mint'}
-        currentStep={mintStep[0]}
+        currentStep={mintStep.step}
         currentBitcoinPrice={bitcoinPrice}
         bitcoinWalletContextState={bitcoinWalletContextState}
         isBitcoinWalletLoading={isBitcoinWalletLoading}

src/app/components/mint-unmint/components/mint/mint.tsx

@@ -22,11 +22,11 @@ export function Mint(): React.JSX.Element {
 
   return (
     <MintLayout>
-      <ProgressTimeline variant={'mint'} currentStep={mintStep[0]} />
+      <ProgressTimeline variant={'mint'} currentStep={mintStep.step} />
       <HStack w={'100%'} alignItems={'start'} justifyContent={'space-between'}>
-        <Walkthrough flow={'mint'} currentStep={mintStep[0]} networkType={networkType} />
-        {[0].includes(mintStep[0]) && <SetupVaultScreen />}
-        {[1, 2].includes(mintStep[0]) && (
+        <Walkthrough flow={'mint'} currentStep={mintStep.step} networkType={networkType} />
+        {[0].includes(mintStep.step) && <SetupVaultScreen />}
+        {[1, 2].includes(mintStep.step) && (
           <DepositTransactionScreen
             handleSignFundingTransaction={handleSignFundingTransaction}
             isBitcoinWalletLoading={isBitcoinWalletLoading}

src/app/components/mint-unmint/components/setup-vault-screen/setup-vault-screen.tsx

@@ -11,6 +11,8 @@ import { RippleNetworkConfigurationContext } from '@providers/ripple-network-con
 import { XRPWalletContext } from '@providers/xrp-wallet-context-provider';
 import { setupVault } from 'dlc-btc-lib/ethereum-functions';
 
+import { NetworkType } from '@shared/constants/network.constants';
+
 import { SetupVaultScreenVaultGraphics } from './components/setup-vault-screen.vault-graphics';
 
 export function SetupVaultScreen(): React.JSX.Element {
@@ -29,16 +31,19 @@ export function SetupVaultScreen(): React.JSX.Element {
   async function handleSetup() {
     try {
       setIsSubmitting(true);
-      if (networkType === 'xrpl') {
-        await handleSetTrustLine();
-        await submitSetupXRPLVaultRequest(
-          rippleUserAddress!,
-          rippleNetworkConfiguration.rippleAttestorChainID
-        );
-      } else if (networkType === 'evm') {
-        await setupVault(ethereumNetworkConfiguration.dlcManagerContract.connect(signer!));
-      } else {
-        throw new Error('Unsupported Network Type');
+      switch (networkType) {
+        case NetworkType.XRPL:
+          await handleSetTrustLine();
+          await submitSetupXRPLVaultRequest(
+            rippleUserAddress!,
+            rippleNetworkConfiguration.rippleAttestorChainID
+          );
+          break;
+        case NetworkType.EVM:
+          await setupVault(ethereumNetworkConfiguration.dlcManagerContract.connect(signer!));
+          break;
+        default:
+          throw new Error('Unsupported Network Type');
       }
     } catch (error: any) {
       setIsSubmitting(false);

src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx

@@ -26,7 +26,7 @@ export function UnmintVaultSelector({
 
   return (
     <>
-      {unmintStep[1] ? (
+      {unmintStep.vault ? (
         <BurnTokenTransactionForm
           isBitcoinWalletLoading={[false, '']}
           userEthereumAddressRiskLevel={userEthereumAddressRiskLevel}
@@ -42,7 +42,7 @@ export function UnmintVaultSelector({
           <Text color={'accent.lightBlue.01'} fontSize={'md'} fontWeight={600}>
             Select vault to withdraw Bitcoin:
           </Text>
-          <VaultsList height={'625.5px'} isScrollable={!unmintStep[1]}>
+          <VaultsList height={'625.5px'} isScrollable={!unmintStep.vault}>
             <VaultsListGroupContainer vaults={fundedVaults} isSelectable variant={'select'} />
           </VaultsList>
         </VStack>

src/app/components/mint-unmint/components/unmint/components/withdraw-screen.tsx

@@ -9,9 +9,9 @@ import {
   BitcoinWalletContextState,
 } from '@providers/bitcoin-wallet-context-provider';
 import { ProofOfReserveContext } from '@providers/proof-of-reserve-context-provider';
-import { VaultContext } from '@providers/vault-context-provider';
 import { RootState } from '@store/index';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
+import { RedeemSteps } from '@store/slices/mintunmint/mintunmint.slice';
 import { modalActions } from '@store/slices/modal/modal.actions';
 
 interface WithdrawScreenProps {
@@ -29,10 +29,10 @@ export function WithdrawScreen({
   const { bitcoinWalletContextState, resetBitcoinWalletContext } = useContext(BitcoinWalletContext);
 
   const { bitcoinPrice, depositLimit } = useContext(ProofOfReserveContext);
-  const { allVaults } = useContext(VaultContext);
 
   const { unmintStep } = useSelector((state: RootState) => state.mintunmint);
-  const currentVault = allVaults.find(vault => vault.uuid === unmintStep[1]);
+
+  const currentVault = unmintStep.vault;
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -60,7 +60,7 @@ export function WithdrawScreen({
 
   function handleCancel() {
     resetBitcoinWalletContext();
-    dispatch(mintUnmintActions.setUnmintStep([0, '']));
+    dispatch(mintUnmintActions.setUnmintStep({ step: RedeemSteps.BURN, vault: undefined }));
   }
 
   async function handleButtonClick(assetAmount: number) {
@@ -75,7 +75,7 @@ export function WithdrawScreen({
       <VaultTransactionForm
         vault={currentVault!}
         flow={'burn'}
-        currentStep={unmintStep[0]}
+        currentStep={unmintStep.step}
         currentBitcoinPrice={bitcoinPrice}
         bitcoinWalletContextState={bitcoinWalletContextState}
         isBitcoinWalletLoading={isBitcoinWalletLoading}

src/app/components/mint-unmint/components/unmint/unmint.tsx

@@ -22,17 +22,17 @@ export function Unmint(): React.JSX.Element {
 
   return (
     <UnmintLayout>
-      <ProgressTimeline variant={'unmint'} currentStep={unmintStep[0]} />
+      <ProgressTimeline variant={'unmint'} currentStep={unmintStep.step} />
       <HStack w={'100%'} alignItems={'start'} justifyContent={'space-between'}>
-        <Walkthrough flow={'unmint'} currentStep={unmintStep[0]} networkType={networkType} />
-        {[0].includes(unmintStep[0]) && (
+        <Walkthrough flow={'unmint'} currentStep={unmintStep.step} networkType={networkType} />
+        {[0].includes(unmintStep.step) && (
           <UnmintVaultSelector
             userEthereumAddressRiskLevel={risk!}
             fetchUserEthereumAddressRiskLevel={fetchUserAddressRisk}
             isUserEthereumAddressRiskLevelLoading={isLoading}
           />
         )}
-        {[1, 2].includes(unmintStep[0]) && (
+        {[1, 2].includes(unmintStep.step) && (
           <WithdrawScreen
             isBitcoinWalletLoading={isBitcoinWalletLoading}
             handleSignWithdrawTransaction={handleSignWithdrawTransaction}

src/app/components/mint-unmint/components/walkthrough/components/walkthrough-blockchain-tag.tsx

@@ -1,5 +1,7 @@
 import { HStack, Image, Text } from '@chakra-ui/react';
 
+import { NetworkType } from '@shared/constants/network.constants';
+
 const blockchainTagPropertyMap = {
   evm: {
     logo: '/images/logos/ethereum-logo.svg',
@@ -16,7 +18,7 @@ const blockchainTagPropertyMap = {
 };
 
 interface WalkthroughBlockchainTagProps {
-  blockchain: 'evm' | 'bitcoin' | 'xrpl';
+  blockchain: NetworkType;
 }
 
 export function WalkthroughBlockchainTag({

src/app/components/mint-unmint/components/walkthrough/components/walkthrough-header.tsx

@@ -1,9 +1,11 @@
 import { HStack, Text, VStack } from '@chakra-ui/react';
 
+import { NetworkType } from '@shared/constants/network.constants';
+
 import { WalkthroughBlockchainTag } from './walkthrough-blockchain-tag';
 
 interface WalkthroughHeaderProps {
-  blockchain: 'evm' | 'bitcoin' | 'xrpl';
+  blockchain: NetworkType;
   currentStep?: number;
   title: string;
 }