feat: modified vaults store, to handle different networks

src/app/hooks/use-bitcoin.ts

@@ -1,11 +1,12 @@
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { BitcoinError } from "@models/error-types";
 import { Vault } from "@models/vault";
 import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
 import { vaultActions } from "@store/slices/vault/vault.actions";
 
 import { useEndpoints } from "./use-endpoints";
+import { RootState } from "@store/index";
 
 export interface UseBitcoinReturnType {
   fetchBitcoinContractOfferAndSendToUserWallet: (vault: Vault) => Promise<void>;
@@ -14,6 +15,7 @@ export interface UseBitcoinReturnType {
 export function useBitcoin(): UseBitcoinReturnType {
   const dispatch = useDispatch();
   const { routerWalletURL } = useEndpoints();
+  const { network } = useSelector((state: RootState) => state.account);
 
   function createURLParams(bitcoinContractOffer: any) {
     if (!routerWalletURL) {
@@ -40,10 +42,12 @@ export function useBitcoin(): UseBitcoinReturnType {
         "acceptBitcoinContractOffer",
         urlParams,
       );
+      if (!network) return;
       dispatch(
         vaultActions.setVaultToFunding({
           vaultUUID,
           fundingTX: response.result.txId,
+          networkID: network.id,
         }),
       );
       dispatch(mintUnmintActions.setMintStep(2));

src/app/hooks/use-ethereum.ts

@@ -267,7 +267,13 @@ export function useEthereum(): UseEthereumReturnType {
       const vaults: RawVault[] =
         await protocolContract.getAllVaultsForAddress(address);
       const formattedVaults: Vault[] = vaults.map(formatVault);
-      store.dispatch(vaultActions.setVaults(formattedVaults));
+      if (!network) return;
+      store.dispatch(
+        vaultActions.setVaults({
+          newVaults: formattedVaults,
+          networkID: network?.id,
+        }),
+      );
     } catch (error) {
       throwEthereumError(`Could not fetch vaults: `, error);
     }
@@ -288,8 +294,13 @@ export function useEthereum(): UseEthereumReturnType {
         if (vault.status !== vaultState)
           throw new Error("Vault is not in the correct state");
         const formattedVault: Vault = formatVault(vault);
+        if (!network) return;
         store.dispatch(
-          vaultActions.swapVault({ vaultUUID, updatedVault: formattedVault }),
+          vaultActions.swapVault({
+            vaultUUID,
+            updatedVault: formattedVault,
+            networkID: network?.id,
+          }),
         );
         return;
       } catch (error) {

src/app/hooks/use-vaults.ts

@@ -12,41 +12,42 @@ export function useVaults(): {
   closedVaults: Vault[];
 } {
   const { vaults } = useSelector((state: RootState) => state.vault);
+  const { network } = useSelector((state: RootState) => state.account);
 
   const readyVaults = useMemo(
     () =>
-      vaults
+      vaults[network ? network.id : "1"]
         .filter((vault) => vault.state === VaultState.READY)
         .sort((a, b) => b.timestamp - a.timestamp),
-    [vaults],
+    [vaults, network],
   );
   const fundedVaults = useMemo(
     () =>
-      vaults
+      vaults[network ? network.id : "1"]
         .filter((vault) => vault.state === VaultState.FUNDED)
         .sort((a, b) => b.timestamp - a.timestamp),
-    [vaults],
+    [vaults, network],
   );
   const fundingVaults = useMemo(
     () =>
-      vaults
+      vaults[network ? network.id : "1"]
         .filter((vault) => vault.state === VaultState.FUNDING)
         .sort((a, b) => b.timestamp - a.timestamp),
-    [vaults],
+    [vaults, network],
   );
   const closingVaults = useMemo(
     () =>
-      vaults
+      vaults[network ? network.id : "1"]
         .filter((vault) => vault.state === VaultState.CLOSING)
         .sort((a, b) => b.timestamp - a.timestamp),
-    [vaults],
+    [vaults, network],
   );
   const closedVaults = useMemo(
     () =>
-      vaults
+      vaults[network ? network.id : "1"]
         .filter((vault) => vault.state === VaultState.CLOSED)
         .sort((a, b) => b.timestamp - a.timestamp),
-    [vaults],
+    [vaults, network],
   );
 
   return {

src/app/store/slices/vault/vault.slice.ts

@@ -1,14 +1,28 @@
+import { EthereumNetwork } from "@models/network";
 import { Vault, VaultState } from "@models/vault";
-import { createSlice } from "@reduxjs/toolkit";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
+interface Vaults {
+  1: Vault[];
+  5: Vault[];
+  6: Vault[];
+  195: Vault[];
+}
 interface VaultSliceState {
-  vaults: any[];
+  vaults: Vaults;
   status: string;
   error: string | null;
 }
 
+const initialVaultsState: Vaults = {
+  1: [],
+  5: [],
+  6: [],
+  195: [],
+};
+
 const initialVaultState: VaultSliceState = {
-  vaults: [],
+  vaults: initialVaultsState,
   status: "idle",
   error: null,
 };
@@ -17,13 +31,16 @@ export const vaultSlice = createSlice({
   name: "vault",
   initialState: initialVaultState,
   reducers: {
-    setVaults: (state, action) => {
-      const newVaults = action.payload;
+    setVaults: (
+      state,
+      action: PayloadAction<{ newVaults: Vault[]; networkID: EthereumNetwork }>,
+    ) => {
+      const { newVaults, networkID } = action.payload;
       const vaultMap = new Map(
-        state.vaults.map((vault) => [vault.uuid, vault]),
+        state.vaults[networkID].map((vault) => [vault.uuid, vault]),
       );
 
-      state.vaults = newVaults.map((newVault: Vault) => {
+      state.vaults[networkID] = newVaults.map((newVault: Vault) => {
         const existingVault = vaultMap.get(newVault.uuid);
 
         if (!existingVault) {
@@ -38,29 +55,43 @@ export const vaultSlice = createSlice({
         }
       });
     },
-    swapVault: (state, action) => {
-      const { vaultUUID, updatedVault } = action.payload;
-      const vaultIndex = state.vaults.findIndex(
+    swapVault: (
+      state,
+      action: PayloadAction<{
+        vaultUUID: string;
+        updatedVault: Vault;
+        networkID: EthereumNetwork;
+      }>,
+    ) => {
+      const { vaultUUID, updatedVault, networkID } = action.payload;
+      const vaultIndex = state.vaults[networkID].findIndex(
         (vault) => vault.uuid === vaultUUID,
       );
 
       if (vaultIndex === -1) {
-        state.vaults.push(updatedVault);
+        state.vaults[networkID].push(updatedVault);
       } else {
-        state.vaults[vaultIndex] = updatedVault;
+        state.vaults[networkID][vaultIndex] = updatedVault;
       }
     },
-    setVaultToFunding: (state, action) => {
-      const { vaultUUID, fundingTX } = action.payload;
+    setVaultToFunding: (
+      state,
+      action: PayloadAction<{
+        vaultUUID: string;
+        fundingTX: string;
+        networkID: EthereumNetwork;
+      }>,
+    ) => {
+      const { vaultUUID, fundingTX, networkID } = action.payload;
 
-      const vaultIndex = state.vaults.findIndex(
+      const vaultIndex = state.vaults[networkID].findIndex(
         (vault) => vault.uuid === vaultUUID,
       );
 
       if (vaultIndex === -1) return;
 
-      state.vaults[vaultIndex].state = VaultState.FUNDING;
-      state.vaults[vaultIndex].fundingTX = fundingTX;
+      state.vaults[networkID][vaultIndex].state = VaultState.FUNDING;
+      state.vaults[networkID][vaultIndex].fundingTX = fundingTX;
     },
   },
 });