feat: save vault in localStorage

0xChin · Aug 10, 2024 · 327a744 · 327a744
1 parent a5be5de
commit 327a744
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 12 deletions.
diff --git a/frontend/app/hooks/useVault.ts b/frontend/app/hooks/useVault.ts
@@ -64,8 +64,6 @@ export const useVault = (address: `0x${string}`) => {
     ],
   });
 
-  console.log(aaveData.data);
-
   return {
     token: {
       ...{ address: assetAddress.data },

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -2,7 +2,12 @@
 
 import Image from "next/image";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
-import { useChainId, useWriteContract } from "wagmi";
+import {
+  useChainId,
+  useWaitForTransactionReceipt,
+  useWatchContractEvent,
+  useWriteContract,
+} from "wagmi";
 import {
   BORROW_ASSETS,
   FACTORY_ABI,
@@ -34,16 +39,33 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import Token from "@/components/token";
+import { parse } from "path";
 
 export default function Home() {
   const { writeContractAsync } = useWriteContract();
   const chainId = useChainId();
   const [isCreatingVault, setIsCreatingVault] = useState(false);
   const [vaults, setVaults] = useState<{ [key: number]: `0x${string}`[] }>({});
+  const [parsedVaults, setParsedVaults] = useState<`0x${string}`[]>([]);
   const [asset, setAsset] = useState<`0x${string}`>("0x");
   const [borrowToken, setBorrowToken] = useState<`0x${string}`>("0x");
   const [minHealthFactor, setMinHealthFactor] = useState(125);
   const [maxHealthFactor, setMaxHealthFactor] = useState(130);
+  const [eventsEmitted, setEventsEmitted] = useState(0);
+  useWatchContractEvent({
+    address: FACTORY_CONTRACT_ADDRESS[chainId],
+    abi: FACTORY_ABI,
+    batch: false,
+    eventName: "VaultCreated",
+    onLogs(logs) {
+      const currentVaults = JSON.parse(localStorage.getItem("vaults") || "{}");
+      currentVaults[chainId] = currentVaults[chainId] || [];
+      currentVaults[chainId].push(logs[0].args.vault);
+      localStorage.setItem("vaults", JSON.stringify(currentVaults));
+      setEventsEmitted(eventsEmitted + 1);
+      alert("Vault created!");
+    },
+  });
 
   const createVault = async () => {
     try {
@@ -56,7 +78,7 @@ export default function Home() {
           borrowToken!,
           parseUnits(minHealthFactor.toString(), 16),
           parseUnits(maxHealthFactor.toString(), 16),
-          ADDRESS_TO_ORACLE_ID[chainId][asset!],
+          BigInt(0),
         ],
       });
     } catch (error) {
@@ -70,7 +92,22 @@ export default function Home() {
       .then((data) => {
         setVaults(data.vaults);
       });
-  }, [chainId]);
+  }, []);
+
+  useEffect(() => {
+    const lsVaults = JSON.parse(localStorage.getItem("vaults") || "{}");
+    const apiVaults = vaults[chainId] || [];
+    let parsedVaults = [];
+
+    if (lsVaults && lsVaults[chainId]) {
+      parsedVaults = [...lsVaults[chainId], ...apiVaults];
+    } else {
+      parsedVaults = apiVaults;
+    }
+
+    setParsedVaults(parsedVaults);
+  }, [chainId, eventsEmitted])
+
 
   return (
     <main className="flex min-h-screen flex-col items-center p-24">
@@ -110,7 +147,7 @@ export default function Home() {
           </ToggleGroupItem>
         </ToggleGroup>
         {!isCreatingVault &&
-          (vaults && vaults[chainId] && vaults[chainId].length > 0 ? (
+          (parsedVaults && parsedVaults.length > 0 ? (
             <Table className="mt-4">
               <TableHeader>
                 <TableRow>
@@ -125,7 +162,7 @@ export default function Home() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {vaults[chainId].map((vault, index) => (
+                {parsedVaults.map((vault, index) => (
                   <Vault address={vault} key={index} />
                 ))}
               </TableBody>

diff --git a/frontend/components/vault.tsx b/frontend/components/vault.tsx
@@ -7,10 +7,6 @@ import { formatUnits, maxUint256 } from "viem";
 export default function Vault({ address }: { address: `0x${string}` }) {
   const vaultData = useVault(address);
 
-  useEffect(() => {
-    console.log(vaultData);
-  }, [vaultData]);
-
   const getIcon = (symbol: string) => {
     return `https://app.aave.com/icons/tokens/${symbol.toLowerCase()}.svg`;
   };

diff --git a/frontend/utils/vaultConfig.ts b/frontend/utils/vaultConfig.ts
@@ -1,7 +1,7 @@
 export const FACTORY_CONTRACT_ADDRESS: { [chainId: number]: `0x${string}` } = {
   10: "0x6032Aa03C26dc0eec909af1613D81e829aB2A36A",
   42161: "0x4d13b7cb87d44796aa409615706caf07b8c01aaa",
-  64122: "0x09C786C3fDA647B53d791633dFc565e5259ADB6F",
+  64122: "0xe4d26ff09976d0a5bbb6143c1483c30b939fa09e",
 };
 
 export const LENDING_PROTOCOLS = [