From 78ed51c50bb6d38e5bb3dc834de938aa7224e28a Mon Sep 17 00:00:00 2001 From: devtealeaf Date: Thu, 13 Feb 2025 14:23:16 +0200 Subject: [PATCH 1/3] upd: apr tooltip + withdraw fix --- package.json | 2 +- src/modules/SonicVaults/index.tsx | 156 +++++++++--------- src/modules/Vault/components/InfoBar.tsx | 5 +- .../Vault/components/InvestForm/index.tsx | 4 + 4 files changed, 82 insertions(+), 85 deletions(-) diff --git a/package.json b/package.json index aa8a940..9016eea 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "stability-ui", "type": "module", - "version": "0.7.8-alpha", + "version": "0.7.9-alpha", "scripts": { "dev": "astro dev", "start": "astro dev", diff --git a/src/modules/SonicVaults/index.tsx b/src/modules/SonicVaults/index.tsx index 924dc74..ef05045 100644 --- a/src/modules/SonicVaults/index.tsx +++ b/src/modules/SonicVaults/index.tsx @@ -2,6 +2,8 @@ import { useState, useEffect, useRef, useMemo } from "react"; import { useWeb3Modal } from "@web3modal/wagmi/react"; +import Tippy from "@tippyjs/react"; + // import { formatUnits} from "viem"; import { useStore } from "@nanostores/react"; @@ -10,7 +12,6 @@ import { isMobile } from "react-device-detect"; // import { deployments } from "@stabilitydao/stability"; -import { APRModal } from "./components/modals/APRModal"; import { VSHoldModal } from "./components/modals/VSHoldModal"; import { ColumnSort } from "./components/ColumnSort"; import { Pagination } from "./components/Pagination"; @@ -64,6 +65,8 @@ import { import { PlatformABI } from "@web3"; +import "tippy.js/dist/tippy.css"; + import type { TVault, TTableColumn, @@ -141,14 +144,6 @@ const SonicVaults = (): JSX.Element => { const [localVaults, setLocalVaults] = useState([]); const [filteredVaults, setFilteredVaults] = useState([]); - const [aprModal, setAprModal] = useState({ - earningData: {} as TEarningData, - daily: 0, - lastHardWork: "0", - symbol: "", - state: false, - pool: {}, - }); const [vsHoldModal, setVsHoldModal] = useState({ assetsVsHold: [], @@ -765,18 +760,11 @@ const SonicVaults = (): JSX.Element => { )} + { if (isMobile) { e.stopPropagation(); - setAprModal({ - earningData: vault.earningData, - daily: vault.daily, - lastHardWork: vault.lastHardWork, - symbol: vault?.risk?.symbol as string, - state: true, - pool: vault?.pool, - }); } }} className="px-2 min-[1130px]:px-3 py-2 tooltip cursor-help" @@ -788,78 +776,85 @@ const SonicVaults = (): JSX.Element => { : "text-[#eaecef]" }`} > -

- {formatNumber(aprValue, "formatAPR")}% -

- -
-
-
- {!!vault?.risk?.isRektStrategy && ( -
-

- {vault?.risk?.symbol} VAULT -

-

- Rekt vault regularly incurs losses, - potentially leading to rapid USD value - decline, with returns insufficient to - offset the losses. -

-
- )} -
-

Total APY

-

- {formatNumber(apyValue, "formatAPR")}% -

-
-
-

Total APR

-

- {formatNumber(aprValue, "formatAPR")}% -

-
+ +
+ {!!vault?.risk?.isRektStrategy && ( +
+

+ {vault?.risk?.symbol} VAULT +

+

+ Rekt vault regularly incurs losses, + potentially leading to rapid USD value + decline, with returns insufficient to + offset the losses. +

+
+ )} +
+

Total APY

+

+ {formatNumber(apyValue, "formatAPR")}% +

+
+
+

Total APR

+

+ {formatNumber(aprValue, "formatAPR")}% +

+
- {vault?.earningData?.poolSwapFeesAPR.daily != - "-" && - vault?.pool && ( + {vault?.earningData?.poolSwapFeesAPR + .daily != "-" && + vault?.pool && ( +
+

Pool swap fees APR

+

+ {formatNumber( + swapFeesAPRValue, + "formatAPR" + )} + % +

+
+ )}
-

Pool swap fees APR

+

Strategy APR

{formatNumber( - swapFeesAPRValue, + strategyAPRValue, "formatAPR" )} %

- )} -
-

Strategy APR

-

- {formatNumber( - strategyAPRValue, - "formatAPR" - )} - % -

-
-
-

Daily

-

- {formatNumber(dailyAPRValue, "formatAPR")}% -

+
+

Daily

+

+ {formatNumber( + dailyAPRValue, + "formatAPR" + )} + % +

+
+
+
+

Last Hard Work

+ +
-
-
-

Last Hard Work

- -
-
- + } + placement="top" + > +

+ {formatNumber(aprValue, "formatAPR")}% +

+
{/* { tab={currentTab} setTab={setCurrentTab} /> - {aprModal.state && ( - - )} {vsHoldModal.state && ( )} diff --git a/src/modules/Vault/components/InfoBar.tsx b/src/modules/Vault/components/InfoBar.tsx index 24dfa18..e77b8a2 100644 --- a/src/modules/Vault/components/InfoBar.tsx +++ b/src/modules/Vault/components/InfoBar.tsx @@ -22,7 +22,7 @@ import { formatFromBigInt, formatNumber } from "@utils"; import { CHAINS } from "@constants"; import type { TAPRPeriod, TVault } from "@types"; -import {seeds} from "@stabilitydao/stability"; +import { seeds } from "@stabilitydao/stability"; interface IProps { network: string; @@ -65,7 +65,7 @@ const InfoBar: React.FC = memo(({ network, vault }) => { }, [$aprFilter, userBalances]); useEffect(() => { - if (vault?.balance && vault?.shareprice) { + if (vault?.shareprice) { const vaultBalance = BigInt(vault?.balance); const shareBalance = Number( formatFromBigInt(vault?.balance, 18).toFixed(5) @@ -80,6 +80,7 @@ const InfoBar: React.FC = memo(({ network, vault }) => { setUserBalances({ shareBalance, USDBalance }); } }, [vault]); + const vaultChain = useMemo( () => CHAINS.find((item) => item.id === network), [network] diff --git a/src/modules/Vault/components/InvestForm/index.tsx b/src/modules/Vault/components/InvestForm/index.tsx index 1a1102a..9ac8b2c 100644 --- a/src/modules/Vault/components/InvestForm/index.tsx +++ b/src/modules/Vault/components/InvestForm/index.tsx @@ -1455,6 +1455,7 @@ const InvestForm: React.FC = ({ network, vault }) => { if (shortId === "IQMF" || shortId === "IRMF") { localAssets = vault.assets.map((asset) => asset.address); } + if (underlyingToken?.address === option[0]) { const decimalPercent = BigInt(Math.floor(Number(settings.slippage))); @@ -1511,6 +1512,7 @@ const InvestForm: React.FC = ({ network, vault }) => { if (transaction.status === "success") { resetFormAfterTx(); } + lastTx.set(transaction?.transactionHash); setLoader(false); } catch (err) { @@ -1584,6 +1586,7 @@ const InvestForm: React.FC = ({ network, vault }) => { if (transaction.status === "success") { resetFormAfterTx(); } + lastTx.set(transaction?.transactionHash); setLoader(false); } catch (err) { @@ -1674,6 +1677,7 @@ const InvestForm: React.FC = ({ network, vault }) => { if (transaction.status === "success") { resetFormAfterTx(); } + lastTx.set(transaction?.transactionHash); setLoader(false); } catch (err) { From 20f2b9d9cf72976e0951480aa238c4185ce219bc Mon Sep 17 00:00:00 2001 From: devtealeaf Date: Thu, 13 Feb 2025 14:32:41 +0200 Subject: [PATCH 2/3] lint fix --- src/modules/SonicVaults/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/SonicVaults/index.tsx b/src/modules/SonicVaults/index.tsx index ef05045..c377865 100644 --- a/src/modules/SonicVaults/index.tsx +++ b/src/modules/SonicVaults/index.tsx @@ -75,7 +75,7 @@ import type { // TPendingPlatformUpgrade, // TAddress, // TUpgradesTable, - TEarningData, + // TEarningData, TVaults, TAPRPeriod, TPendingPlatformUpgrade, From 076a2d83eaedfcd980be95456ab3aef5e9753439 Mon Sep 17 00:00:00 2001 From: devtealeaf Date: Thu, 13 Feb 2025 17:54:10 +0200 Subject: [PATCH 3/3] upd: tooltip --- src/layouts/Layout.astro | 8 ++ src/modules/SonicVaults/index.tsx | 161 +++++++++++++++--------------- 2 files changed, 88 insertions(+), 81 deletions(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 6ff02f0..775a6ce 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -346,6 +346,14 @@ const { position:relative; } + .tippy-box[data-theme~="custom"] { + background-color: #26282f !important; + color: white !important; + } + .tippy-box[data-theme~="custom"] .tippy-arrow { + color:#26282f !important; + } + .tooltip .visible__tooltip { width:250px; left:50%; diff --git a/src/modules/SonicVaults/index.tsx b/src/modules/SonicVaults/index.tsx index c377865..4a7c9f4 100644 --- a/src/modules/SonicVaults/index.tsx +++ b/src/modules/SonicVaults/index.tsx @@ -761,102 +761,101 @@ const SonicVaults = (): JSX.Element => { - { - if (isMobile) { - e.stopPropagation(); - } - }} - className="px-2 min-[1130px]:px-3 py-2 tooltip cursor-help" - > -
- -
- {!!vault?.risk?.isRektStrategy && ( -
-

- {vault?.risk?.symbol} VAULT -

-

- Rekt vault regularly incurs losses, - potentially leading to rapid USD value - decline, with returns insufficient to - offset the losses. -

-
- )} -
-

Total APY

-

- {formatNumber(apyValue, "formatAPR")}% -

-
-
-

Total APR

-

- {formatNumber(aprValue, "formatAPR")}% -

-
+ +
+ {!!vault?.risk?.isRektStrategy && ( +
+

+ {vault?.risk?.symbol} VAULT +

+

+ Rekt vault regularly incurs losses, + potentially leading to rapid USD value + decline, with returns insufficient to + offset the losses. +

+
+ )} +
+

Total APY

+

+ {formatNumber(apyValue, "formatAPR")}% +

+
+
+

Total APR

+

+ {formatNumber(aprValue, "formatAPR")}% +

+
- {vault?.earningData?.poolSwapFeesAPR - .daily != "-" && - vault?.pool && ( -
-

Pool swap fees APR

-

- {formatNumber( - swapFeesAPRValue, - "formatAPR" - )} - % -

-
- )} + {vault?.earningData?.poolSwapFeesAPR.daily != + "-" && + vault?.pool && (
-

Strategy APR

+

Pool swap fees APR

{formatNumber( - strategyAPRValue, + swapFeesAPRValue, "formatAPR" )} %

-
-

Daily

-

- {formatNumber( - dailyAPRValue, - "formatAPR" - )} - % -

-
-
-
-

Last Hard Work

- -
+ )} +
+

Strategy APR

+

+ {formatNumber( + strategyAPRValue, + "formatAPR" + )} + % +

+
+

Daily

+

+ {formatNumber(dailyAPRValue, "formatAPR")}% +

+
+
+
+

Last Hard Work

+ +
+
+ } + placement="top" + > + { + if (isMobile) { + e.stopPropagation(); } - placement="top" + }} + className="px-2 min-[1130px]:px-3 py-2 tooltip cursor-help" + > +

{formatNumber(aprValue, "formatAPR")}%

- -
- + + + + {/* { if (isMobile) {