From a5be5de5899a573717c169f70e5110693960cd91 Mon Sep 17 00:00:00 2001 From: 0xchin Date: Sat, 10 Aug 2024 19:16:39 -0300 Subject: [PATCH] feat: show vaults data --- frontend/app/api/createVault/route.ts | 3 --- frontend/app/api/getVaults/route.ts | 8 +++--- frontend/app/hooks/useVault.ts | 19 +++++++------ frontend/app/page.tsx | 39 ++++++++++++++------------- frontend/components/vault.tsx | 7 ++--- frontend/utils/vaultConfig.ts | 2 +- 6 files changed, 40 insertions(+), 38 deletions(-) diff --git a/frontend/app/api/createVault/route.ts b/frontend/app/api/createVault/route.ts index e1e0f13..356c08b 100644 --- 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 index 0a0da7e..95feccb 100644 --- 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 index 662717b..8c517fe 100644 --- 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 index 574d375..2bdff94 100644 --- 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() { {!isCreatingVault && - (vaults.length > 0 ? ( + (vaults && vaults[chainId] && vaults[chainId].length > 0 ? ( @@ -122,7 +125,7 @@ export default function Home() { - {vaults.map((vault, index) => ( + {vaults[chainId].map((vault, index) => ( ))} @@ -141,8 +144,8 @@ export default function Home() { - {LENDING_PROTOCOLS.map((protocol) => ( - + {LENDING_PROTOCOLS.map((protocol, index) => ( +
setBorrowToken(value as `0x${string}`) } - > + > - {BORROW_ASSETS[chainId].map((token: `0x${string}`, index) => ( - - - - ))} + {BORROW_ASSETS[chainId].map((token: `0x${string}`, index) => ( + + + + ))} diff --git a/frontend/components/vault.tsx b/frontend/components/vault.tsx index 1fa5de5..7c07971 100644 --- 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}
- $10.000 - 1.25 - 1.25 + {vaultData.tvl > BigInt(0) ? `$${formatUnits(vaultData.tvl as bigint, 18)}` : "-"} + {vaultData.targetHealthFactor ? formatUnits(vaultData.targetHealthFactor, 18) : "-"} + {vaultData.healthFactor && vaultData.healthFactor !== maxUint256 ? formatUnits(vaultData.healthFactor, 18) : "-"}