Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Balance visibility update #307

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "stability-ui",
"type": "module",
"version": "0.13.25-alpha",
"version": "0.13.27-alpha",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
Expand Down
7 changes: 7 additions & 0 deletions src/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,12 @@ const CHAINS = [
},
];

const CHAINS_CONFIRMATIONS = {
"137": 3,
"8453": 3,
"111188": 1,
};

const YEARN_PROTOCOLS = ["aave", "stargate", "stmatic", "compound"];

const DEFAULT_TRANSACTION_SETTINGS = {
Expand Down Expand Up @@ -335,4 +341,5 @@ export {
USERS_TABLE,
CONTESTS_TABLE,
LEADERBOARD_TABLE,
CHAINS_CONFIRMATIONS,
};
32 changes: 25 additions & 7 deletions src/modules/Vault/components/InfoBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
TimeDifferenceIndicator,
VaultType,
FieldValue,
BalanceVisibilityToggler,
} from "@ui";

import { aprFilter, visible } from "@store";
Expand Down Expand Up @@ -282,9 +283,12 @@ const InfoBar: React.FC<IProps> = memo(({ network, vault }) => {

<div className="flex w-full flex-col md:flex-row px-6 pb-6 md:pb-2 pt-6 bg-accent-900 rounded-b-2xl gap-0 md:gap-3">
<div className="flex items-start flex-col lg:flex-row justify-between w-full gap-5 lg:gap-0">
<FieldValue
name="DEPOSITED"
value={
<div className="h-[36px] md:h-[64px] flex flex-row items-center justify-between w-full md:justify-normal md:items-start md:flex-col">
<div className="h-[12px] flex items-center gap-1 uppercase text-[12px] leading-3 text-neutral-500">
<span>DEPOSITED</span>
<BalanceVisibilityToggler />
</div>
<div className="h-[40px] flex items-center text-[18px] font-semibold whitespace-nowrap">
<div className="flex h-[28px] items-center">
<div
className={`${!$visible && "blur select-none"} text-[18px] font-semibold flex whitespace-nowrap`}
Expand All @@ -297,15 +301,29 @@ const InfoBar: React.FC<IProps> = memo(({ network, vault }) => {
</p>
</div>
</div>
}
/>
</div>
</div>
</div>
<div className="flex items-start flex-col lg:flex-row justify-between w-full gap-5 lg:gap-0">
<FieldValue name="DAILY" value={`${earnData.dailyEarn}$`} />
<FieldValue
name="DAILY"
value={
<p className={`${!$visible && "blur select-none"}`}>
{earnData.dailyEarn}$
</p>
}
/>
</div>

<div className="flex items-start flex-col lg:flex-row justify-between w-full gap-5 lg:gap-0">
<FieldValue name="MONTHLY" value={`${earnData.monthlyEarn}$`} />
<FieldValue
name="MONTHLY"
value={
<p className={`${!$visible && "blur select-none"}`}>
{earnData.monthlyEarn}$
</p>
}
/>
</div>
</div>

Expand Down
78 changes: 44 additions & 34 deletions src/modules/Vault/components/InvestForm/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
isEmptyObject,
} from "../../functions";

import { DEFAULT_ERROR, ZERO_BigInt } from "@constants";
import { CHAINS_CONFIRMATIONS, DEFAULT_ERROR, ZERO_BigInt } from "@constants";

import type {
TAddress,
Expand Down Expand Up @@ -173,6 +173,9 @@

const tokenSelectorRef = useRef<HTMLDivElement>(null);

const confirmations: number =
CHAINS_CONFIRMATIONS[network as keyof typeof CHAINS_CONFIRMATIONS] ?? 3;

let isAnyCCFOptionVisible = false;

const { shortId } = vault.strategyInfo;
Expand Down Expand Up @@ -291,7 +294,7 @@
}
if (tab === "Deposit") {
setInputs(
(prevInputs: any) =>

Check warning on line 297 in src/modules/Vault/components/InvestForm/index.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type
({
...prevInputs,
[asset]: amount,
Expand All @@ -304,7 +307,7 @@
previewDeposit(asset, amount);
}
} else {
const preview: TVaultInput | any = {};

Check warning on line 310 in src/modules/Vault/components/InvestForm/index.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type
for (let i = 0; i < option.length; i++) {
preview[option[i]] = amount as string;
}
Expand All @@ -325,7 +328,7 @@
};

const resetInputs = (options: string[] = option) => {
const reset: TVaultInput | any = {};

Check warning on line 331 in src/modules/Vault/components/InvestForm/index.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type

for (let i = 0; i < options.length; i++) {
reset[options[i]] = "";
Expand Down Expand Up @@ -438,7 +441,7 @@
address: vault.underlying,
symbol: underlyingSymbol,
decimals: Number(underlyingDecimals),
balance: Number(formatUnits(underlyingBalance, underlyingDecimals)),
balance: formatUnits(underlyingBalance, underlyingDecimals),
allowance: Number(
formatUnits(underlyingAllowance, underlyingDecimals)
),
Expand Down Expand Up @@ -523,6 +526,7 @@
functionName: "allowance",
args: [$account as TAddress, vault.address],
})) as bigint;

if (
Number(formatUnits(allowanceData, 18)) < Number(amount) &&
Number(amount) <= Number(balances[asset])
Expand Down Expand Up @@ -595,7 +599,7 @@
);
const zapInputHandler = (amount: string, asset: string) => {
setInputs(
(prevInputs: any) =>

Check warning on line 602 in src/modules/Vault/components/InvestForm/index.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type
({
...prevInputs,
[asset]: amount,
Expand Down Expand Up @@ -662,7 +666,7 @@
setLoader(true);

const transaction = await waitForTransactionReceipt(wagmiConfig, {
confirmations: 3,
confirmations,
hash: assetApprove,
});

Expand Down Expand Up @@ -707,7 +711,7 @@
setTransactionInProgress(true);
setLoader(true);

let transaction, depositAssets: any, zapDeposit: any, gas, gasLimit;

Check warning on line 714 in src/modules/Vault/components/InvestForm/index.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type

Check warning on line 714 in src/modules/Vault/components/InvestForm/index.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type
const amount = inputs[option[0]];
if (underlyingToken?.address === option[0]) {
try {
Expand All @@ -719,7 +723,7 @@

const out = shares - (shares * decimalPercent) / BigInt(100);

const txToken: any = {

Check warning on line 726 in src/modules/Vault/components/InvestForm/index.tsx

View workflow job for this annotation

GitHub Actions / lint

Unexpected any. Specify a different type
[underlyingToken?.address]: {
amount: amount,
symbol: underlyingToken?.symbol,
Expand Down Expand Up @@ -759,7 +763,7 @@
setLoader(true);

transaction = await waitForTransactionReceipt(wagmiConfig, {
confirmations: 3,
confirmations,
hash: depositAssets,
});
setLocalStoreHash({
Expand Down Expand Up @@ -842,7 +846,7 @@
setNeedConfirm(false);
setLoader(true);
transaction = await waitForTransactionReceipt(wagmiConfig, {
confirmations: 3,
confirmations,
hash: zapDeposit,
});

Expand Down Expand Up @@ -913,6 +917,7 @@

let promises;
let outData: TZAPData[] = [];

if (shortId === "CCF") {
promises = (await get1InchRoutes(
network,
Expand All @@ -925,19 +930,20 @@
)) as TZAPData;
outData = [promises, promises];
} else {
promises = zapAmounts[0].map(
async (toAddress, index) =>
vault.assetsProportions[index] &&
(await get1InchRoutes(
network,
option[0] as TAddress,
toAddress,
decimals,
String(zapAmounts[1][index]),
setZapError,
"deposit"
))
);
promises = zapAmounts[0]
.filter((_, index) => vault.assetsProportions[index])
.map(
async (toAddress, index) =>
await get1InchRoutes(
network,
option[0] as TAddress,
toAddress,
decimals,
String(zapAmounts[1][index]),
setZapError,
"deposit"
)
);
outData = (await Promise.all(promises)) as TZAPData[];
}

Expand Down Expand Up @@ -1042,7 +1048,9 @@
const gasLimit = BigInt(
Math.trunc(Number(gas) * Number(settings.gasLimit))
);

setNeedConfirm(true);

const assetApprove = await writeContract(wagmiConfig, {
address: vault.address,
abi: ERC20ABI,
Expand All @@ -1053,21 +1061,21 @@
setNeedConfirm(false);
setLoader(true);
const transaction = await waitForTransactionReceipt(wagmiConfig, {
confirmations: 3,
confirmations,
hash: assetApprove,
});

if (transaction.status === "success") {
lastTx.set(transaction?.transactionHash);
const newAllowance = await _publicClient?.readContract({
address: option[0] as TAddress,
abi: ERC20ABI,
functionName: "allowance",
args: [
$account as TAddress,
$platformsData[network]?.zap as TAddress,
],
});

const newAllowance = await getAssetAllowance(
_publicClient,
option[0] as TAddress,
tab,
vault?.address,
underlyingToken?.address,
$platformsData?.[network]?.zap
);

let _newAllowance =
typeof newAllowance === "bigint" ? newAllowance : ZERO_BigInt;
Expand Down Expand Up @@ -1144,7 +1152,7 @@
setNeedConfirm(false);
setLoader(true);
const transaction = await waitForTransactionReceipt(wagmiConfig, {
confirmations: 3,
confirmations,
hash: assetApprove,
});

Expand Down Expand Up @@ -1301,7 +1309,7 @@
}
setLoader(true);
transaction = await waitForTransactionReceipt(wagmiConfig, {
confirmations: 3,
confirmations,
hash: depositAssets,
});
if (transaction.status === "success") {
Expand Down Expand Up @@ -1335,6 +1343,7 @@
///// 2ASSETS -> UNDERLYING -> ZAP
//before rewrite
let withdrawAssets: any, transaction, zapWithdraw: any;

let localAssets = defaultOption?.assetsArray;
if (shortId === "IQMF" || shortId === "IRMF") {
localAssets = vault.assets.map((asset) => asset.address);
Expand Down Expand Up @@ -1380,7 +1389,7 @@
setNeedConfirm(false);
setLoader(true);
transaction = await waitForTransactionReceipt(wagmiConfig, {
confirmations: 3,
confirmations,
hash: withdrawAssets,
});
setLocalStoreHash({
Expand All @@ -1391,6 +1400,7 @@
vault: vault.address,
tokens: txTokens,
});

if (transaction.status === "success") {
resetFormAfterTx();
}
Expand Down Expand Up @@ -1451,7 +1461,7 @@
setNeedConfirm(false);
setLoader(true);
transaction = await waitForTransactionReceipt(wagmiConfig, {
confirmations: 3,
confirmations,
hash: withdrawAssets,
});
setLocalStoreHash({
Expand All @@ -1462,6 +1472,7 @@
vault: vault.address,
tokens: txTokens,
});

if (transaction.status === "success") {
resetFormAfterTx();
}
Expand Down Expand Up @@ -1528,7 +1539,7 @@
setNeedConfirm(false);
setLoader(true);
transaction = await waitForTransactionReceipt(wagmiConfig, {
confirmations: 3,
confirmations,
hash: zapWithdraw,
});
setLocalStoreHash({
Expand Down Expand Up @@ -1597,7 +1608,6 @@
assetsLength = [ZERO_BigInt, ZERO_BigInt];
localAssets = vault.assets.map((asset) => asset.address);
}

const { result } = await _publicClient?.simulateContract({
address: vault.address,
abi: VaultABI,
Expand Down
48 changes: 7 additions & 41 deletions src/modules/Vaults/components/Portfolio.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@ import { formatUnits } from "viem";

import { PlatformModal } from "./modals/PlatformModal";

import { Skeleton, APRtimeSwitcher, FeeAPRModal } from "@ui";
import {
Skeleton,
APRtimeSwitcher,
FeeAPRModal,
BalanceVisibilityToggler,
} from "@ui";

import { connected, visible, isWeb3Load, aprFilter } from "@store";

Expand Down Expand Up @@ -122,46 +127,7 @@ const Portfolio: React.FC<IProps> = memo(({ vaults }) => {
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<h3 className="text-[1.4rem] font-medium">Portfolio</h3>
<div className="cursor-pointer">
{!$visible && (
<svg
onClick={() => visible.set(true)}
width="22"
height="16"
viewBox="0 0 22 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.1284 10.9464C19.7566 9.30323 20.75 7.75 20.75 7.75C20.75 7.75 16.2728 0.75 10.75 0.75C9.92433 0.75 9.12203 0.906455 8.35456 1.17258M3.81066 0.75L18.3063 15.2457M0.75 7.75C0.75 7.75 2.68788 4.72014 5.58647 2.64713L15.8426 12.9033C14.351 13.9562 12.6098 14.75 10.75 14.75C5.22715 14.75 0.75 7.75 0.75 7.75ZM10.75 11.75C8.54086 11.75 6.75 9.95909 6.75 7.74995C6.75 6.7355 7.12764 5.80926 7.75 5.10413L13.6104 10.5461C12.8841 11.2889 11.8709 11.75 10.75 11.75Z"
stroke="white"
strokeLinecap="round"
/>
</svg>
)}
{$visible && (
<svg
onClick={() => visible.set(false)}
width="22"
height="16"
viewBox="0 0 22 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
data-testid="visibleSwitcher"
>
<path
d="M21 8C21 8 16.5228 15 11 15C5.47715 15 1 8 1 8C1 8 5.47715 1 11 1C16.5228 1 21 8 21 8Z"
stroke="white"
strokeLinecap="round"
/>
<path
d="M15 8C15 10.2091 13.2091 12 11 12C8.79086 12 7 10.2091 7 8C7 5.79086 8.79086 4 11 4C13.2091 4 15 5.79086 15 8Z"
stroke="white"
strokeLinecap="round"
/>
</svg>
)}
</div>
<BalanceVisibilityToggler />
</div>
<div className="hidden items-center justify-center gap-2 md:flex">
<APRtimeSwitcher />
Expand Down
Loading
Loading