upd: apr tooltip + withdraw fix

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",

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%;

src/modules/SonicVaults/index.tsx

@@ -2,6 +2,8 @@
 
 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 { 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 { PlatformABI } from "@web3";
 
+import "tippy.js/dist/tippy.css";
+
 import type {
   TVault,
   TTableColumn,
@@ -72,7 +75,7 @@
   // TPendingPlatformUpgrade,
   // TAddress,
   // TUpgradesTable,
-  TEarningData,
+  // TEarningData,
   TVaults,
   TAPRPeriod,
   TPendingPlatformUpgrade,
@@ -141,14 +144,6 @@
 
   const [localVaults, setLocalVaults] = useState<TVault[]>([]);
   const [filteredVaults, setFilteredVaults] = useState<TVault[]>([]);
-  const [aprModal, setAprModal] = useState({
-    earningData: {} as TEarningData,
-    daily: 0,
-    lastHardWork: "0",
-    symbol: "",
-    state: false,
-    pool: {},
-  });
 
   const [vsHoldModal, setVsHoldModal] = useState<TVSHoldModalState>({
     assetsVsHold: [],
@@ -236,7 +231,7 @@
 
   const fetchPlatformUpdates = async () => {
     try {
       const pendingPlatformUpgrade: any = await $publicClient?.readContract({
         address: deployments[$currentChainID]?.core.platform,
         abi: PlatformABI,
         functionName: "pendingPlatformUpgrade",
@@ -306,12 +301,12 @@
       }
 
       /////***** TIME CHECK  *****/////
       const lockTime: any = await $publicClient?.readContract({
         address: deployments[$currentChainID].core.platform,
         abi: PlatformABI,
         functionName: "TIME_LOCK",
       });
       const platformUpgradeTimelock: any = await $publicClient?.readContract({
         address: deployments[$currentChainID].core.platform,
         abi: PlatformABI,
         functionName: "platformUpgradeTimelock",
@@ -765,35 +760,12 @@
                             )}
                           </div>
                         </td>
-                        <td
-                          onClick={(e) => {
-                            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"
-                        >
-                          <div
-                            className={`whitespace-nowrap w-full text-end flex items-center justify-end gap-[2px] ${
-                              vault?.risk?.isRektStrategy
-                                ? "text-[#818181]"
-                                : "text-[#eaecef]"
-                            }`}
-                          >
-                            <p className="text-end">
-                              {formatNumber(aprValue, "formatAPR")}%
-                            </p>
-                          </div>
-                          <div className="visible__tooltip">
-                            <div className="flex items-start flex-col gap-4">
+
+                        <Tippy
+                          theme="custom"
+                          delay={0}
+                          content={
+                            <div className="flex font-manrope items-start flex-col gap-4 w-[250px] bg-[#26282f] px-5 py-[10px]">
                               <div className="flex flex-col gap-1 w-full">
                                 {!!vault?.risk?.isRektStrategy && (
                                   <div className="flex flex-col items-center gap-2 mb-[10px]">
@@ -859,9 +831,31 @@
                                 />
                               </div>
                             </div>
-                            <i></i>
-                          </div>
-                        </td>
+                          }
+                          placement="top"
+                        >
+                          <td
+                            onClick={(e) => {
+                              if (isMobile) {
+                                e.stopPropagation();
+                              }
+                            }}
+                            className="px-2 min-[1130px]:px-3 py-2 tooltip cursor-help"
+                          >
+                            <div
+                              className={`whitespace-nowrap w-full text-end flex items-center justify-end gap-[2px] ${
+                                vault?.risk?.isRektStrategy
+                                  ? "text-[#818181]"
+                                  : "text-[#eaecef]"
+                              }`}
+                            >
+                              <p className="text-end">
+                                {formatNumber(aprValue, "formatAPR")}%
+                              </p>
+                            </div>
+                          </td>
+                        </Tippy>
+
                         {/* <td
                           onClick={(e) => {
                             if (isMobile) {
@@ -1051,9 +1045,6 @@
         tab={currentTab}
         setTab={setCurrentTab}
       />
-      {aprModal.state && (
-        <APRModal state={aprModal} setModalState={setAprModal} />
-      )}
       {vsHoldModal.state && (
         <VSHoldModal state={vsHoldModal} setModalState={setVsHoldModal} />
       )}

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<IProps> = 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<IProps> = memo(({ network, vault }) => {
       setUserBalances({ shareBalance, USDBalance });
     }
   }, [vault]);
+
   const vaultChain = useMemo(
     () => CHAINS.find((item) => item.id === network),
     [network]

src/modules/Vault/components/InvestForm/index.tsx

@@ -343,7 +343,7 @@
 
     if (tab === "Deposit") {
       setInputs(
         (prevInputs: any) =>
           ({
             ...prevInputs,
             [asset]: amount,
@@ -357,7 +357,7 @@
         previewDeposit(asset, amount);
       }
     } else {
       const preview: TVaultInput | any = {};
       for (let i = 0; i < option.length; i++) {
         preview[option[i]] = amount as string;
       }
@@ -378,7 +378,7 @@
   };
 
   const resetInputs = (options: string[] = option) => {
     const reset: TVaultInput | any = {};
 
     for (let i = 0; i < options.length; i++) {
       reset[options[i]] = "";
@@ -1455,6 +1455,7 @@
     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 @@
         if (transaction.status === "success") {
           resetFormAfterTx();
         }
+
         lastTx.set(transaction?.transactionHash);
         setLoader(false);
       } catch (err) {
@@ -1584,6 +1586,7 @@
         if (transaction.status === "success") {
           resetFormAfterTx();
         }
+
         lastTx.set(transaction?.transactionHash);
         setLoader(false);
       } catch (err) {
@@ -1674,6 +1677,7 @@
         if (transaction.status === "success") {
           resetFormAfterTx();
         }
+
         lastTx.set(transaction?.transactionHash);
         setLoader(false);
       } catch (err) {