Skip to content

Commit

Permalink
fix: value calculations + responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@AniketSindhu
AniketSindhu committed Feb 3, 2024
1 parent 1aa264d commit f594c61
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 99 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ cache
# ngrok config is individual to each dev
ngrok.config.yml

build

# Yarn
.pnp.*
/.yarn/*
Expand Down
30 changes: 15 additions & 15 deletions src/components/Params.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,15 @@ const Params = ({ mcr, baseRate, totalColl, totalDebt, vaultCount }: ParamsProps
<h4 className="font-bold text-lg mb-3">Protocol</h4>
<ul>
<li className="flex justify-between py-1">
<span>Borrowing Fee</span>
<span className="font-medium">{(parseFloat(baseRate) + 0.5).toFixed(3)} %</span>
</li>
<li className="flex justify-between py-1">
<span>Vaults</span>
<span className="font-medium">{vaultCount}</span>
</li>
<li className="flex justify-between py-1">
<span>pUSD in Stability Pool</span>
<span className="font-medium">83.3M (57.1%)</span>
<span>Current MCR</span>
<span className="font-medium">{mcr}%</span>
</li>
<li className="flex justify-between py-1">
<span>Total Collateral Ratio</span>
<span className="font-medium">
{((parseFloat(totalColl) * 40000) / parseFloat(totalDebt)).toFixed(2)}%
{((parseFloat(totalColl) * 41000 * 100) / parseFloat(totalDebt)).toFixed(2)}%
</span>
</li>
<li className="flex justify-between py-1">
<span>Current MCR</span>
<span className="font-medium">{mcr}%</span>
</li>
<li className="flex justify-between py-1">
<span>Total Collateral</span>
<span className="font-medium">{totalColl} WBTC</span>
Expand All @@ -45,6 +33,18 @@ const Params = ({ mcr, baseRate, totalColl, totalDebt, vaultCount }: ParamsProps
<span>Total Debt</span>
<span className="font-medium">{totalDebt} pUSD</span>
</li>
<li className="flex justify-between py-1">
<span>Borrowing Fee</span>
<span className="font-medium">{(parseFloat(baseRate) + 0.5).toFixed(3)} %</span>
</li>
<li className="flex justify-between py-1">
<span>Vaults</span>
<span className="font-medium">{vaultCount}</span>
</li>
<li className="flex justify-between py-1">
<span>pUSD in Stability Pool</span>
<span className="font-medium">83.3M (57.1%)</span>
</li>
</ul>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/StabilityPool.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const StabilityPool = ({}) => {

const { setLoader } = useActions();

const { depositStablityPool, withdrawStabilityPool, fetchVault } = useAppContext();
const { depositStablityPool, withdrawStabilityPool, fetchAllData } = useAppContext();

const onStake = async () => {
try {
Expand Down
38 changes: 19 additions & 19 deletions src/components/Vault.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,16 @@ 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 () => {
try {
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);
Expand All @@ -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) {
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -124,21 +124,21 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va
<h2 className="text-xl font-bold">Vault</h2>
</div>
<div className="flex flex-col md:flex-row items-center justify-between gap-8 px-8 py-4">
<div>
<div className="flex justify-between w-full flex-row md:flex-col">
<div className="font-medium mb-1">Collateral Ratio</div>
<div>{collRatio} %</div>
<div className="text-base md:text-lg">{collRatio} %</div>
</div>
<div>
<div className="flex justify-between w-full flex-row md:flex-col">
<div className="font-medium mb-1">Collateral Value</div>
<div>{coll} WBTC</div>
<div className="text-base md:text-lg">{coll} WBTC</div>
</div>
<div>
<div className="flex justify-between w-full flex-row md:flex-col">
<div className="font-medium mb-1">Debt</div>
<div>{debt} pUSD</div>
<div className="text-base md:text-lg">{debt} pUSD</div>
</div>
<div>
<div className="flex justify-between w-full flex-row md:flex-col">
<div className="font-medium mb-1">Liquidation at</div>
<div>$ {liquidationAt}</div>
<div className="text-base md:text-lg">$ {liquidationAt}</div>
</div>
</div>
<div className="h-0.5 "></div>
Expand Down
84 changes: 20 additions & 64 deletions src/context/AppContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -15,7 +15,7 @@ type AppContextType = {
stats: Params;
increaseCollateral: (collAmount: string) => Promise<void>;
decreaseCollateral: (collAmount: string) => Promise<void>;
fetchVault: (owner: string) => Promise<void>;
fetchAllData: () => Promise<void>;
mintDebt: (debtAmount: string) => Promise<void>;
depositStablityPool: (amount: string) => Promise<void>;
withdrawStabilityPool: (amount: string) => Promise<void>;
Expand All @@ -40,7 +40,7 @@ const AppContext = createContext<AppContextType>({
returnDebt: async (debtAmount: string) => {},
depositStablityPool: async (amount: string) => {},
withdrawStabilityPool: async (amount: string) => {},
fetchVault: async (owner: string) => {},
fetchAllData: async () => {},
vault: {
id: "",
debt: "",
Expand Down Expand Up @@ -69,12 +69,13 @@ export const AppProvider = ({ children }: any) => {
};
const [vault, setVault] = useState<Vault>({} 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]);

Expand Down Expand Up @@ -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
Expand All @@ -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;

Expand All @@ -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) {
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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),
Expand Down Expand Up @@ -402,7 +358,7 @@ export const AppProvider = ({ children }: any) => {
decreaseCollateral,
mintDebt,
returnDebt,
fetchVault,
fetchAllData,
depositStablityPool,
withdrawStabilityPool,
vault
Expand Down

0 comments on commit f594c61

Please sign in to comment.