Merge pull request #12 from DLC-link/feat/updated-vault-handling

feat: updated vault handling

package.json

@@ -40,6 +40,7 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
     "react-redux": "^8.1.3",
     "react-youtube": "^10.1.0",
     "redux": "^4.2.1",

src/app/app.tsx

@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from "react-query";
 import { Route } from "react-router-dom";
 
 import { AppLayout } from "@components/app.layout";
@@ -8,15 +9,19 @@ import { About } from "./pages/about/about";
 import { Dashboard } from "./pages/dashboard/dashboard";
 import { BlockchainContextProvider } from "./providers/blockchain-context-provider";
 
+const queryClient = new QueryClient();
+
 export function App(): React.JSX.Element {
   return (
-    <BlockchainContextProvider>
-      <AppLayout>
-        <Route path="/" element={<Dashboard />} />
-        <Route path="/my-vaults" element={<MyVaults />} />
-        <Route path="/how-it-works" element={<About />} />
-      </AppLayout>
-      <ModalContainer />
-    </BlockchainContextProvider>
+    <QueryClientProvider client={queryClient}>
+      <BlockchainContextProvider>
+        <AppLayout>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/my-vaults" element={<MyVaults />} />
+          <Route path="/how-it-works" element={<About />} />
+        </AppLayout>
+        <ModalContainer />
+      </BlockchainContextProvider>
+    </QueryClientProvider>
   );
 }

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" }}
       >