feat: updated vault handling, added error handling for getVault

src/app/components/account/account.tsx

@@ -7,6 +7,7 @@ import { Wallet, WalletType, ethereumWallets } from "@models/wallet";
 import { RootState } from "@store/index";
 import { accountActions } from "@store/slices/account/account.actions";
 import { modalActions } from "@store/slices/modal/modal.actions";
+import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
 
 function findWalletById(walletType: WalletType): Wallet | undefined {
   const wallet = ethereumWallets.find((wallet) => wallet.id === walletType);
@@ -32,6 +33,7 @@ export function Account(): React.JSX.Element {
 
   function onDisconnectWalletClick(): void {
     dispatch(accountActions.logout());
+    dispatch(mintUnmintActions.resetMintUnmintState());
   }
 
   return (

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

@@ -12,22 +12,22 @@ interface FlowPropertyMap {
   [key: string]: {
     [key: number]: {
       title: string;
-      subtitle: string;
+      subtitle?: string;
     };
   };
 }
 
 const flowPropertyMap: FlowPropertyMap = {
   mint: {
     2: { title: "a) Locking BTC in progress", subtitle: "Minting dlcBTC" },
-    3: { title: "Minted dlcBTC", subtitle: "Minting dlcBTC" },
+    3: { title: "Minted dlcBTC" },
   },
   unmint: {
     1: {
       title: "a) Closing vault in progress",
       subtitle: "Your BTC is being unlocked",
     },
-    2: { title: "Vault closed", subtitle: "Your BTC is unlocked" },
+    2: { title: "Vault closed" },
   },
 };
 
@@ -51,10 +51,8 @@ export function TransactionSummary({
 
   function getVault(flow: "mint" | "unmint", currentStep: number) {
     if (flow === "mint") {
-      console.log("fundedVaults", fundedVaults[0]);
       return currentStep === 2 ? fundingVaults[0] : fundedVaults[0];
     } else {
-      console.log("closedVaults", closedVaults[0]);
       return currentStep === 1 ? closingVaults[0] : closedVaults[0];
     }
   }
@@ -86,7 +84,9 @@ export function TransactionSummary({
             assetAmount={currentVault?.collateral}
           />
         </>
-      ) : null}
+      ) : (
+        false
+      )}
       <Stack
         p={"15px"}
         w={"100%"}

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

@@ -100,7 +100,7 @@ export function Walkthrough({
               </Text>
               <Button
                 variant={"vault"}
-                onClick={() => ethereum?.recommendDlcBtcTokenToMetamask()}
+                onClick={() => ethereum?.recommendTokenToMetamask()}
               >
                 <HStack>
                   <Image

src/app/components/modals/select-wallet-modal/select-wallet-modal.tsx

@@ -17,7 +17,6 @@ export function SelectWalletModal({
 }: ModalComponentProps): React.JSX.Element {
   const blockchainContext = useContext(BlockchainContext);
   const ethereum = blockchainContext?.ethereum;
-
   const [currentNetwork, setCurrentNetwork] = useState<Network | undefined>(
     undefined,
   );

src/app/components/my-vaults-small/my-vaults-small.tsx

@@ -1,12 +1,10 @@
-import { useContext, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { Button } from "@chakra-ui/react";
 import { VaultsListGroupBlankContainer } from "@components/vaults-list/components/vaults-list-group-blank-container";
 import { VaultsList } from "@components/vaults-list/vaults-list";
 import { useVaults } from "@hooks/use-vaults";
 
-import { BlockchainContext } from "../../providers/blockchain-context-provider";
 import { VaultsListGroupContainer } from "../vaults-list/components/vaults-list-group-container";
 import { MyVaultsSmallLayout } from "./components/my-vaults-small.layout";
 
@@ -25,17 +23,6 @@ export function MyVaultsSmall({
     closingVaults,
     closedVaults,
   } = useVaults();
-  const blockchainContext = useContext(BlockchainContext);
-  const ethereum = blockchainContext?.ethereum;
-
-  useEffect(() => {
-    async function getVaults() {
-      if (address) {
-        await ethereum?.getAllVaults();
-      }
-    }
-    getVaults();
-  }, [address]);
 
   return (
     <MyVaultsSmallLayout>

src/app/components/select-network-button/select-network-button.tsx

@@ -18,6 +18,12 @@ export function SelectNetworkButton({
   handleClick,
   currentNetwork,
 }: SelectNetworkButtonProps): React.JSX.Element {
+  const enabledEthereumNetworkIDs =
+    import.meta.env.VITE_ENABLED_ETHEREUM_NETWORKS.split(",");
+  const enabledEthereumNetworks = ethereumNetworks.filter((network) =>
+    enabledEthereumNetworkIDs.includes(network.id),
+  );
+
   return (
     <Menu variant={"network"}>
       <MenuButton>
@@ -27,7 +33,7 @@ export function SelectNetworkButton({
         </HStack>
       </MenuButton>
       <MenuList>
-        {ethereumNetworks.map((network, id) => {
+        {enabledEthereumNetworks.map((network, id) => {
           return (
             <MenuItem
               key={id}

src/app/components/vault/components/vault-expanded-information/components/vault-expanded-information-transaction-row.tsx

@@ -1,4 +1,5 @@
 import { HStack, Text } from "@chakra-ui/react";
+import { useEndpoints } from "@hooks/use-endpoints";
 
 interface VaultExpandedInformationTransactionRowProps {
   label: string;
@@ -9,6 +10,8 @@ export function VaultExpandedInformationTransactionRow({
   label,
   value,
 }: VaultExpandedInformationTransactionRowProps): React.JSX.Element {
+  const { bitcoinExplorerAPIURL } = useEndpoints();
+
   return (
     <HStack pl={"35px"} w={"100%"} alignItems={"start"}>
       <Text w={"50%"} color={"white"} fontSize={"xs"}>
@@ -21,7 +24,7 @@ export function VaultExpandedInformationTransactionRow({
         fontSize={"xs"}
         textDecoration={"underline"}
         onClick={() =>
-          window.open(`http://stx-btc1.dlc.link:8001/tx/${value}`, "_blank")
+          window.open(`${bitcoinExplorerAPIURL}${value}`, "_blank")
         }
         _hover={{ cursor: "pointer" }}
       >

src/app/components/vault/vault-card.tsx

@@ -10,8 +10,8 @@ import { VaultExpandedInformation } from "./components/vault-expanded-informatio
 import { VaultInformation } from "./components/vault-information";
 import { VaultProgressBar } from "./components/vault-progress-bar";
 
-interface VaultBoxProps {
-  vault?: Vault;
+interface VaultCardProps {
+  vault: Vault;
   isSelected?: boolean;
   isSelectable?: boolean;
   handleSelect?: () => void;
@@ -22,7 +22,7 @@ export function VaultCard({
   isSelected = false,
   isSelectable = false,
   handleSelect,
-}: VaultBoxProps): React.JSX.Element {
+}: VaultCardProps): React.JSX.Element {
   const blockchainContext = useContext(BlockchainContext);
   const bitcoin = blockchainContext?.bitcoin;
 
@@ -32,7 +32,6 @@ export function VaultCard({
   async function handleLock(): Promise<void> {
     if (!vault) return;
     setIsSubmitting(true);
-    console.log("vault", vault);
     try {
       await bitcoin?.fetchBitcoinContractOfferAndSendToUserWallet(vault);
     } catch (error) {

src/app/hooks/use-bitcoin.ts

@@ -2,21 +2,22 @@
 import { useDispatch } from "react-redux";
 
 import { Vault } from "@models/vault";
-import { vaultActions } from "@store/slices/vault/vault.actions";
 import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
+import { vaultActions } from "@store/slices/vault/vault.actions";
+
+import { useEndpoints } from "./use-endpoints";
 
-export interface UseBitcoinReturn {
+export interface UseBitcoinReturnType {
   fetchBitcoinContractOfferAndSendToUserWallet: (vault: Vault) => Promise<void>;
 }
 
-export function useBitcoin(): UseBitcoinReturn {
-  // const { getVault } = ethereum;
+export function useBitcoin(): UseBitcoinReturnType {
   const dispatch = useDispatch();
-  const routerWalletURL = "https://devnet.dlc.link/okx-wallet";
+  const { routerWalletURL } = useEndpoints();
 
   function createURLParams(bitcoinContractOffer: any) {
     if (!routerWalletURL) {
-      console.error("Wallet type or blockchain not supported");
+      throw new Error("Router wallet URL is undefined");
     }
 
     const counterPartyWalletDetails = {
@@ -39,7 +40,6 @@ export function useBitcoin(): UseBitcoinReturn {
         "acceptBitcoinContractOffer",
         urlParams,
       );
-      console.log("response", response);
       dispatch(
         vaultActions.setVaultToFunding({
           vaultUUID,
@@ -48,7 +48,7 @@ export function useBitcoin(): UseBitcoinReturn {
       );
       dispatch(mintUnmintActions.setMintStep(2));
     } catch (error) {
-      console.error(`Could not send contract offer for signing: ${error}`);
+      throw new Error(`Could not send contract offer for signing: ${error}`);
     }
   }
 

src/app/hooks/use-endpoints.ts

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+import { EthereumNetwork } from "@models/network";
+import { RootState } from "@store/index";
+
+interface UseEndpointsReturnType {
+  routerWalletURL: string | undefined;
+  ethereumExplorerAPIURL: string | undefined;
+  bitcoinExplorerAPIURL: string | undefined;
+}
+
+export function useEndpoints(): UseEndpointsReturnType {
+  const { network } = useSelector((state: RootState) => state.account);
+
+  const [routerWalletURL, setRouterWalletURL] = useState<string | undefined>(
+    undefined,
+  );
+  const [ethereumExplorerAPIURL, setEthereumExplorerAPIURL] = useState<
+    string | undefined
+  >(undefined);
+  const [bitcoinExplorerAPIURL, setBitcoinExplorerAPIURL] =
+    useState<string>("");
+
+  useEffect(() => {
+    if (!network) return;
+
+    const { routerWalletURL, ethereumExplorerAPIURL, bitcoinExplorerAPIURL } =
+      getEndpoints();
+
+    setRouterWalletURL(routerWalletURL);
+    setEthereumExplorerAPIURL(ethereumExplorerAPIURL);
+    setBitcoinExplorerAPIURL(bitcoinExplorerAPIURL);
+  }, [network]);
+
+  function getEndpoints(): {
+    routerWalletURL: string;
+    ethereumExplorerAPIURL: string;
+    bitcoinExplorerAPIURL: string;
+  } {
+    switch (network?.id) {
+      case EthereumNetwork.Sepolia:
+        return {
+          routerWalletURL: "https://devnet.dlc.link/eth-wallet",
+          ethereumExplorerAPIURL: "https://sepolia.etherscan.io/tx/",
+          bitcoinExplorerAPIURL: "https://blockstream.info/testnet/tx/",
+        };
+      case EthereumNetwork.Goerli:
+        return {
+          routerWalletURL: "https://testnet.dlc.link/eth-wallet",
+          ethereumExplorerAPIURL: "https://goerli.etherscan.io/tx/",
+          bitcoinExplorerAPIURL: "https://blockstream.info/testnet/tx/",
+        };
+      case EthereumNetwork.X1Testnet:
+        return {
+          routerWalletURL: "https://devnet.dlc.link/okx-wallet",
+          ethereumExplorerAPIURL: "https://www.oklink.com/x1-test/tx/",
+          bitcoinExplorerAPIURL: "http://devnet.dlc.link/electrs/tx/",
+        };
+      default:
+        throw new Error(`Unsupported network: ${network?.name}`);
+    }
+  }
+  return { routerWalletURL, ethereumExplorerAPIURL, bitcoinExplorerAPIURL };
+}