feat: show vaults data

0xChin · Aug 10, 2024 · a5be5de · a5be5de
1 parent 32bb208
commit a5be5de
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 38 deletions.
diff --git a/frontend/app/api/createVault/route.ts b/frontend/app/api/createVault/route.ts
@@ -15,8 +15,6 @@ import { privateKeyToAccount } from "viem/accounts";
 import { optimism } from "viem/chains";
 
 export async function GET(request: NextRequest) {
-  console.log(request.nextUrl.searchParams);
-
   const publicClient = createPublicClient({
     chain: optimism,
     transport: http(
@@ -39,7 +37,6 @@ export async function GET(request: NextRequest) {
     // 1b. Or public and/or wallet clients
   }); */
 
-  console.log(process.env.PRIVATE_KEY);
   const account = privateKeyToAccount(process.env.PRIVATE_KEY as `0x${string}`);
 
   /*  const { result, request: contractRequest } =

diff --git a/frontend/app/api/getVaults/route.ts b/frontend/app/api/getVaults/route.ts
@@ -1,16 +1,14 @@
 import { NextRequest } from "next/server";
 
-export async function GET(request: NextRequest) {
-  const chainId = request.nextUrl.searchParams.get("chainId") || "10";
-
+export async function GET() {
   const vaults: { [key: number]: string[] } = {
     [10]: [
       "0xd582ac93a270b8B1c2761D0aFde400Cb334A55c5",
       "0x71836DE191ec5622e514A0B3a22D71abd5Bc5448",
     ],
-    [42161]: ["0x4d13b7cb87d44796aa409615706caf07b8c01aaa"],
+    [42161]: ["0x5f975746a539E2E9Fa3a0b4d4B85FE8E4220113E"],
     [64122]: [],
   };
 
-  return Response.json({ vaults: vaults[parseInt(chainId)] });
+  return Response.json({ vaults });
 }
diff --git a/frontend/app/hooks/useVault.ts b/frontend/app/hooks/useVault.ts
@@ -1,6 +1,6 @@
 import { useReadContract, useReadContracts } from "wagmi";
 import { VAULT_ABI } from "@/utils/vaultConfig";
-import { erc20Abi } from "viem";
+import { erc20Abi, maxUint256 } from "viem";
 
 export const useVault = (address: `0x${string}`) => {
   const assetAddress = useReadContract({
@@ -31,6 +31,12 @@ export const useVault = (address: `0x${string}`) => {
     functionName: "borrowedAsset",
   });
 
+  const targetHealthFactor = useReadContract({
+    abi: VAULT_ABI,
+    address,
+    functionName: "TARGET_HEALTH_FACTOR",
+  });
+
   const borrowedAssetData = useReadContracts({
     allowFailure: false,
     contracts: [
@@ -58,9 +64,7 @@ export const useVault = (address: `0x${string}`) => {
     ],
   });
 
-  if (aaveData.data) {
-    console.log(aaveData.data[0][0] - aaveData.data[0][1]);
-  }
+  console.log(aaveData.data);
 
   return {
     token: {
@@ -73,9 +77,8 @@ export const useVault = (address: `0x${string}`) => {
       decimals: borrowedAssetData.data ? borrowedAssetData.data[0] : 0,
       symbol: borrowedAssetData.data ? borrowedAssetData.data[1] : "",
     },
-    tvl: aaveData.data
-      ? aaveData.data[0][0] - aaveData.data[0][1]
-      : parseInt("0").toFixed(2),
-    healthFactor: 0,
+    tvl: aaveData.data ? aaveData.data[0][0] - aaveData.data[0][1] : BigInt(0),
+    targetHealthFactor: targetHealthFactor.data,
+    healthFactor: aaveData.data ? aaveData.data[0][5] : maxUint256,
   };
 };
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -3,7 +3,11 @@
 import Image from "next/image";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { useChainId, useWriteContract } from "wagmi";
-import { BORROW_ASSETS, FACTORY_ABI, FACTORY_CONTRACT_ADDRESS } from "@/utils/vaultConfig";
+import {
+  BORROW_ASSETS,
+  FACTORY_ABI,
+  FACTORY_CONTRACT_ADDRESS,
+} from "@/utils/vaultConfig";
 import { parseUnits } from "viem";
 import { pythPriceFeedIds } from "@/utils/vaultConfig";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
@@ -16,7 +20,11 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import Vault from "@/components/vault";
-import { LENDING_PROTOCOLS, ASSETS, ADDRESS_TO_ORACLE_ID } from "@/utils/vaultConfig";
+import {
+  LENDING_PROTOCOLS,
+  ASSETS,
+  ADDRESS_TO_ORACLE_ID,
+} from "@/utils/vaultConfig";
 
 import {
   Select,
@@ -31,7 +39,7 @@ export default function Home() {
   const { writeContractAsync } = useWriteContract();
   const chainId = useChainId();
   const [isCreatingVault, setIsCreatingVault] = useState(false);
-  const [vaults, setVaults] = useState<`0x${string}`[]>([]);
+  const [vaults, setVaults] = useState<{ [key: number]: `0x${string}`[] }>({});
   const [asset, setAsset] = useState<`0x${string}`>("0x");
   const [borrowToken, setBorrowToken] = useState<`0x${string}`>("0x");
   const [minHealthFactor, setMinHealthFactor] = useState(125);
@@ -51,20 +59,15 @@ export default function Home() {
           ADDRESS_TO_ORACLE_ID[chainId][asset!],
         ],
       });
-
-      console.log(result);
     } catch (error) {
       console.error("Error creating vault:", error);
     }
   };
 
   useEffect(() => {
-    console.log("Fetching vaults with chainId", chainId);
-
     fetch(`/api/getVaults?chainId=${chainId}`)
       .then((res) => res.json())
       .then((data) => {
-        console.log(data);
         setVaults(data.vaults);
       });
   }, [chainId]);
@@ -107,7 +110,7 @@ export default function Home() {
           </ToggleGroupItem>
         </ToggleGroup>
         {!isCreatingVault &&
-          (vaults.length > 0 ? (
+          (vaults && vaults[chainId] && vaults[chainId].length > 0 ? (
             <Table className="mt-4">
               <TableHeader>
                 <TableRow>
@@ -122,7 +125,7 @@ export default function Home() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {vaults.map((vault, index) => (
+                {vaults[chainId].map((vault, index) => (
                   <Vault address={vault} key={index} />
                 ))}
               </TableBody>
@@ -141,8 +144,8 @@ export default function Home() {
                   <SelectValue placeholder="Select Protocol" />
                 </SelectTrigger>
                 <SelectContent>
-                  {LENDING_PROTOCOLS.map((protocol) => (
-                    <SelectItem value={protocol.name}>
+                  {LENDING_PROTOCOLS.map((protocol, index) => (
+                    <SelectItem value={protocol.name} key={index}>
                       <div className="flex items-center">
                         <Image
                           src={protocol.image}
@@ -181,16 +184,16 @@ export default function Home() {
                 onValueChange={(value) =>
                   setBorrowToken(value as `0x${string}`)
                 }
-                >
+              >
                 <SelectTrigger className="w-full mt-1 p-2 border rounded">
                   <SelectValue placeholder="Select Borrow Token" />
                 </SelectTrigger>
                 <SelectContent>
-                {BORROW_ASSETS[chainId].map((token: `0x${string}`, index) => (
-                  <SelectItem value={token} key={index}>
-                    <Token address={token} />
-                  </SelectItem>
-                ))}
+                  {BORROW_ASSETS[chainId].map((token: `0x${string}`, index) => (
+                    <SelectItem value={token} key={index}>
+                      <Token address={token} />
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </label>

diff --git a/frontend/components/vault.tsx b/frontend/components/vault.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { TableCell, TableRow } from "./ui/table";
 import { useVault } from "@/app/hooks/useVault";
 import Image from "next/image";
+import { formatUnits, maxUint256 } from "viem";
 
 export default function Vault({ address }: { address: `0x${string}` }) {
   const vaultData = useVault(address);
@@ -38,9 +39,9 @@ export default function Vault({ address }: { address: `0x${string}` }) {
           {vaultData.debtToken.symbol}
         </div>
       </TableCell>
-      <TableCell className="text-center">$10.000</TableCell>
-      <TableCell className="text-center">1.25</TableCell>
-      <TableCell className="text-center">1.25</TableCell>
+      <TableCell className="text-center">{vaultData.tvl > BigInt(0) ? `$${formatUnits(vaultData.tvl as bigint, 18)}` : "-"}</TableCell>
+      <TableCell className="text-center">{vaultData.targetHealthFactor ? formatUnits(vaultData.targetHealthFactor, 18) : "-"}</TableCell>
+      <TableCell className="text-center">{vaultData.healthFactor && vaultData.healthFactor !== maxUint256 ? formatUnits(vaultData.healthFactor, 18) : "-"}</TableCell>
       <TableCell className="text-center">
         <button className="py-2 px-4 bg-blue-500 text-white rounded">
           Deposit

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: "0x6032aa03c26dc0eec909af1613d81e829ab2a36a",
+  64122: "0x09C786C3fDA647B53d791633dFc565e5259ADB6F",
 };
 
 export const LENDING_PROTOCOLS = [