From f594c61266e19b4e380f2d36903824097ebfd95c Mon Sep 17 00:00:00 2001 From: ChainEx <57598532+AniketSindhu@users.noreply.github.com> Date: Sat, 3 Feb 2024 08:48:43 +0530 Subject: [PATCH] fix: value calculations + responsiveness --- .gitignore | 2 + src/components/Params.tsx | 30 ++++++------ src/components/StabilityPool.tsx | 2 +- src/components/Vault.tsx | 38 +++++++-------- src/context/AppContext.tsx | 84 ++++++++------------------------ 5 files changed, 57 insertions(+), 99 deletions(-) diff --git a/.gitignore b/.gitignore index ed253a7..83bbf58 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,8 @@ cache # ngrok config is individual to each dev ngrok.config.yml +build + # Yarn .pnp.* /.yarn/* diff --git a/src/components/Params.tsx b/src/components/Params.tsx index 18175f7..ae1b8a2 100644 --- a/src/components/Params.tsx +++ b/src/components/Params.tsx @@ -16,27 +16,15 @@ const Params = ({ mcr, baseRate, totalColl, totalDebt, vaultCount }: ParamsProps

Protocol

diff --git a/src/components/StabilityPool.tsx b/src/components/StabilityPool.tsx index 6d9210e..d4bc3ce 100644 --- a/src/components/StabilityPool.tsx +++ b/src/components/StabilityPool.tsx @@ -22,7 +22,7 @@ const StabilityPool = ({}) => { const { setLoader } = useActions(); - const { depositStablityPool, withdrawStabilityPool, fetchVault } = useAppContext(); + const { depositStablityPool, withdrawStabilityPool, fetchAllData } = useAppContext(); const onStake = async () => { try { diff --git a/src/components/Vault.tsx b/src/components/Vault.tsx index 0984f18..d2304a6 100644 --- a/src/components/Vault.tsx +++ b/src/components/Vault.tsx @@ -35,7 +35,7 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va const { fetchData, setLoader, setDataLoading } = useActions(); const { address } = useAccount(); - const { increaseCollateral, decreaseCollateral, fetchVault, mintDebt, returnDebt } = + const { increaseCollateral, decreaseCollateral, fetchAllData, mintDebt, returnDebt } = useAppContext(); const onAddCollateral = async () => { @@ -43,8 +43,8 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va setLoader(true); await increaseCollateral(addCollateralInput); - await new Promise(resolve => setTimeout(resolve, 2000)); - fetchVault(address!); + await new Promise(resolve => setTimeout(resolve, 3000)); + fetchAllData(); setAddCollateralModalOpen(false); } catch (err: any) { console.error(err); @@ -59,8 +59,8 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va await decreaseCollateral(withdrawCollateralInput); //await withdrawCollateral(id, withdrawCollateralInput); //setDataLoading(); - await new Promise(resolve => setTimeout(resolve, 2000)); - fetchVault(address!); + await new Promise(resolve => setTimeout(resolve, 3000)); + fetchAllData(); setWithdrawCollateralModalOpen(false); //toast.success("Succesfully withdrawn collateral!"); } catch (err: any) { @@ -75,8 +75,8 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va setLoader(true); //await mintDebt(id, mintDebtInput); await mintDebt(mintDebtInput); - await new Promise(resolve => setTimeout(resolve, 2000)); - fetchVault(address!); + await new Promise(resolve => setTimeout(resolve, 3000)); + fetchAllData(); setMintDebtModalOpen(false); } catch (err: any) { console.error(err); @@ -89,8 +89,8 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va try { setLoader(true); await returnDebt(returnDebtInput); - await new Promise(resolve => setTimeout(resolve, 2000)); - fetchVault(address!); + await new Promise(resolve => setTimeout(resolve, 3000)); + fetchAllData(); setReturnDebtModalOpen(false); } catch (err: any) { console.error(err); @@ -104,8 +104,8 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va setLoader(true); await increaseCollateral(createVaultInput); //wait 1 second - await new Promise(resolve => setTimeout(resolve, 2000)); - fetchVault(address!); + await new Promise(resolve => setTimeout(resolve, 3000)); + fetchAllData(); setCreateVaultModalOpen(false); } catch (err: any) { console.error(err); @@ -124,21 +124,21 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va

Vault

-
+
Collateral Ratio
-
{collRatio} %
+
{collRatio} %
-
+
Collateral Value
-
{coll} WBTC
+
{coll} WBTC
-
+
Debt
-
{debt} pUSD
+
{debt} pUSD
-
+
Liquidation at
-
$ {liquidationAt}
+
$ {liquidationAt}
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx index 1369a46..8044f1d 100644 --- a/src/context/AppContext.tsx +++ b/src/context/AppContext.tsx @@ -1,4 +1,4 @@ -import { JsonRpcProvider, JsonRpcSigner, ethers } from "ethers"; +import { JsonRpcProvider, JsonRpcSigner, ethers, parseEther } from "ethers"; import React, { createContext, useContext, useEffect, useState } from "react"; import { useAccount, useChainId } from "wagmi"; import { CHAINS, Q64_MUL_100 } from "../utils/constants"; @@ -15,7 +15,7 @@ type AppContextType = { stats: Params; increaseCollateral: (collAmount: string) => Promise; decreaseCollateral: (collAmount: string) => Promise; - fetchVault: (owner: string) => Promise; + fetchAllData: () => Promise; mintDebt: (debtAmount: string) => Promise; depositStablityPool: (amount: string) => Promise; withdrawStabilityPool: (amount: string) => Promise; @@ -40,7 +40,7 @@ const AppContext = createContext({ returnDebt: async (debtAmount: string) => {}, depositStablityPool: async (amount: string) => {}, withdrawStabilityPool: async (amount: string) => {}, - fetchVault: async (owner: string) => {}, + fetchAllData: async () => {}, vault: { id: "", debt: "", @@ -69,12 +69,13 @@ export const AppProvider = ({ children }: any) => { }; const [vault, setVault] = useState({} as Vault); + const fetchAllData = async () => { + const stats = await fetchStats(); + if (!isConnected || !address) return; + await fetchVault(address, stats); + }; + useEffect(() => { - const fetchAllData = async () => { - const stats = await fetchStats(); - if (!isConnected || !address) return; - await fetchVault2(address, stats); - }; fetchAllData(); }, [address, isConnected]); @@ -137,9 +138,9 @@ export const AppProvider = ({ children }: any) => { console.log(statsHere); setStats({ baseRate: parseFloat(statsHere.baseRate).toFixed(2), - mcr: parseFloat(statsHere.mcr).toFixed(2), //todo calculation + mcr: parseFloat(statsHere.mcr).toFixed(2), totalColl: parseFloat(statsHere.totalColl).toFixed(4), - totalDebt: new BigNumber(statsHere.pUSDSupply).dividedBy(1e18).toFixed(4), + totalDebt: new BigNumber(statsHere.pUSDSupply).dividedBy(1e18).toFixed(2), vaultCount: statsHere.vaultCount, debtRebaseIndex: statsHere.debtRebaseIndex, collRebaseIndex: statsHere.collRebaseIndex @@ -152,7 +153,7 @@ export const AppProvider = ({ children }: any) => { } }; - const fetchVault = async (owner: string) => { + const fetchVault = async (owner: string, stats: Params) => { try { const vaultsRes = (await fetchVaultsFromSubgraph(owner)).data.vaults; @@ -178,60 +179,15 @@ export const AppProvider = ({ children }: any) => { setVault({ id: vaultsRes[0].id, - debt: debt.toFixed(4), + debt: debt.toFixed(2), coll: coll.toFixed(4), collRatio: debt.isGreaterThan(0) - ? new BigNumber(coll).multipliedBy(100).dividedBy(debt).toFixed(2) + ? new BigNumber(coll).multipliedBy(priceFeed).multipliedBy(100).dividedBy(debt).toFixed(2) : "MAX", liquidationAt: new BigNumber(stats.mcr) .multipliedBy(debt) - .dividedBy(coll.dividedBy(priceFeed).multipliedBy(Q64_MUL_100)) - .multipliedBy(1e18) - .toString(), - isVault: true - }); - } catch (err: any) { - console.error(err); - throw err; - } - }; - - const fetchVault2 = async (owner: string, stats: Params) => { - try { - const vaultsRes = (await fetchVaultsFromSubgraph(owner)).data.vaults; - - if (vaultsRes.length === 0) { - setVault({ - id: "", - debt: "", - coll: "", - collRatio: "", - liquidationAt: "", - isVault: false - }); - return; - } - - const debt = new BigNumber(vaultsRes[0].debt) - .multipliedBy(new BigNumber(vaultsRes[0].lastDebtRebaseIndex)) - .dividedBy(new BigNumber(stats.debtRebaseIndex)); - - const coll = new BigNumber(vaultsRes[0].coll) - .multipliedBy(new BigNumber(vaultsRes[0].lastCollRebaseIndex)) - .dividedBy(new BigNumber(stats.collRebaseIndex)); - - setVault({ - id: vaultsRes[0].id, - debt: debt.toFixed(4), - coll: coll.toFixed(4), - collRatio: debt.isGreaterThan(0) - ? new BigNumber(coll).multipliedBy(100).dividedBy(debt).toFixed(2) - : "MAX", - liquidationAt: new BigNumber(stats.mcr) - .multipliedBy(debt) - .dividedBy(coll.dividedBy(priceFeed).multipliedBy(Q64_MUL_100)) - .multipliedBy(1e18) - .toString(), + .dividedBy(coll.multipliedBy(100)) + .toFixed(2), isVault: true }); } catch (err: any) { @@ -305,7 +261,7 @@ export const AppProvider = ({ children }: any) => { signer ); - const amount = BigNumber(debtAmount).multipliedBy(1e18).toString(); + const amount = ethers.parseEther(debtAmount); let toastId = toast.loading("Minting Debt..."); const tx = await neperCore.increaseVaultDebt(amount); @@ -327,7 +283,7 @@ export const AppProvider = ({ children }: any) => { signer ); - const amount = BigNumber(debtAmount).multipliedBy(1e18).toString(); + const amount = ethers.parseEther(debtAmount); let toastId = toast.loading("Returning Debt..."); const tx = await neperCore.decreaseVaultDebt(amount); @@ -350,7 +306,7 @@ export const AppProvider = ({ children }: any) => { ); let toastId = toast.loading("Approving..."); - const amount1 = BigNumber(amount).multipliedBy(1e18).toString(); + const amount1 = ethers.parseEther(amount); const pUSD = new ethers.Contract( CHAINS["0x" + chainId.toString(16)].contracts.neperUSD, JSON.stringify(ERC20), @@ -402,7 +358,7 @@ export const AppProvider = ({ children }: any) => { decreaseCollateral, mintDebt, returnDebt, - fetchVault, + fetchAllData, depositStablityPool, withdrawStabilityPool, vault