stabilitydao · DevTeaLeaf · Oct 10, 2024 · Oct 10, 2024 · Oct 10, 2024
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.12.18-alpha",
+  "version": "0.12.19-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

diff --git a/src/modules/Vault/components/InvestForm/InvestError.tsx b/src/modules/Vault/components/InvestForm/InvestError.tsx
diff --git a/src/modules/Vault/components/InvestForm/index.tsx b/src/modules/Vault/components/InvestForm/index.tsx
@@ -9,7 +9,6 @@
 
 import { SettingsModal } from "./SettingsModal";
 import { TabSwitcher } from "./TabSwitcher";
-import { InvestError } from "./InvestError";
 
 import { Loader, ShareSkeleton, AssetsSkeleton } from "@ui";
 
@@ -23,6 +22,7 @@
   lastTx,
   connected,
   transactionSettings,
+  error,
 } from "@store";
 
 import {
@@ -64,7 +64,6 @@
   TVault,
   TBalances,
   TAsset,
-  TError,
   TUnderlyingToken,
   TZAPData,
   TLocalStorageToken,
@@ -171,8 +170,6 @@
   const [needConfirm, setNeedConfirm] = useState(false);
   const [loader, setLoader] = useState<boolean>(false);
 
-  const [error, setError] = useState<TError>(DEFAULT_ERROR);
-
   const tokenSelectorRef = useRef<HTMLDivElement>(null);
 
   let isAnyCCFOptionVisible = false;
@@ -247,8 +244,7 @@
           : 150;
 
       const errorMessage = err.message.substring(0, errorMessageLength) + "...";
-
-      setError({ state: true, type: errName, description: errorMessage });
+      error.set({ state: true, type: errName, description: errorMessage });
     }
     setLoader(false);
     setNeedConfirm(false);
@@ -283,7 +279,7 @@
    }
    if (tab === "Deposit") {
      setInputs(
        (prevInputs: any) =>
          ({
            ...prevInputs,
            [asset]: amount,
@@ -296,7 +292,7 @@
        previewDeposit(asset, amount);
      }
    } else {
      const preview: TVaultInput | any = {};
      for (let i = 0; i < option.length; i++) {
        preview[option[i]] = amount as string;
      }
@@ -317,7 +313,7 @@
  };

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

    for (let i = 0; i < options.length; i++) {
      reset[options[i]] = "";
@@ -587,7 +583,7 @@
  );
  const zapInputHandler = (amount: string, asset: string) => {
    setInputs(
      (prevInputs: any) =>
        ({
          ...prevInputs,
          [asset]: amount,
@@ -609,7 +605,7 @@
 
   const zapApprove = async () => {
     ///// ZAP TOKENS & UNDERLYING TOKENS
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
     setTransactionInProgress(true);
     const amount = inputs[option[0]];
 
@@ -695,11 +691,11 @@
     }
 
     ///// UNDERLYING
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
     setTransactionInProgress(true);
     setLoader(true);
 
    let transaction, depositAssets: any, zapDeposit: any, gas, gasLimit;
    const amount = inputs[option[0]];
    if (underlyingToken?.address === option[0]) {
      try {
@@ -711,7 +707,7 @@

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

        const txToken: any = {
          [underlyingToken?.address]: {
            amount: amount,
            symbol: underlyingToken?.symbol,
@@ -1014,7 +1010,7 @@
   };
 
   const withdrawZapApprove = async () => {
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
     setTransactionInProgress(true);
 
     const amount = inputs[option[0]];
@@ -1105,7 +1101,7 @@
         ? maxUint256
         : parseUnits(amount, decimals);
 
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
 
     const needApprove = option.filter(
       (asset) =>
@@ -1193,7 +1189,7 @@
   };
 
   const deposit = async () => {
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
     setTransactionInProgress(true);
     let assets: string[] = [];
     let input: any = [];
@@ -1318,7 +1314,7 @@
   };
 
   const withdraw = async () => {
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
     setTransactionInProgress(true);
     const sharesToBurn = parseUnits(inputs[option[0]], 18);
 
@@ -2602,14 +2598,24 @@
                 isSingleTokenStrategy ||
                 !isNotUnderlying) && (
                 <p
-                  className={`text-[12px] flex justify-end items-end leading-3 text-neutral-500 uppercase mt-[75px] ${isEmptyObject(inputs) ? "opacity-0" : ""}`}
+                  className={`text-[12px] flex justify-end items-end leading-3 text-neutral-500 uppercase mt-[75px] ${
+                    isEmptyObject(inputs) ||
+                    !$vaultData?.[network]?.[vault.address]?.vaultUserBalance
+                      ? "opacity-0"
+                      : ""
+                  }`}
                 >
                   You Receive
                 </p>
               )}
 
               <div
-                className={`flex flex-col justify-start items-start ${isEmptyObject(inputs) ? "opacity-0" : ""}`}
+                className={`flex flex-col justify-start items-start ${
+                  isEmptyObject(inputs) ||
+                  !$vaultData?.[network]?.[vault.address]?.vaultUserBalance
+                    ? "opacity-0"
+                    : ""
+                }`}
               >
                 {(option.length > 1 ||
                   isSingleTokenStrategy ||
@@ -2736,7 +2742,12 @@
                     </p>
                     <div className="h-[63px]">
                       <div
-                        className={`flex items-center gap-1 ${!$vaultData?.[network]?.[vault.address]?.vaultUserBalance ? "opacity-0" : ""} `}
+                        className={`flex items-center gap-1 ${
+                          !$vaultData?.[network]?.[vault.address]
+                            ?.vaultUserBalance
+                            ? "opacity-0"
+                            : ""
+                        } `}
                       >
                         {!isEmptyObject(inputs) && (
                           <img
@@ -3157,8 +3168,6 @@
             </button>
           )}
         </div>
-
-        {error?.state && <InvestError error={error} setError={setError} />}
       </form>
     </div>
   );

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -5,7 +5,7 @@ import { QueryClient } from "@tanstack/react-query";
 
 import { deserialize, serialize } from "wagmi";
 
-import { DEFAULT_TRANSACTION_SETTINGS } from "@constants";
+import { DEFAULT_ERROR, DEFAULT_TRANSACTION_SETTINGS } from "@constants";
 
 import type {
   TPlatformData,
@@ -42,7 +42,7 @@ const tokens = atom<TTokens>({});
 const connected = atom<boolean | undefined>();
 
 const reload = atom<boolean>(false);
-const error = atom<TError>({ state: false, type: "", description: "" });
+const error = atom<TError>(DEFAULT_ERROR);
 const isWeb3Load = atom<boolean>(true);
 
 const apiData = atom<any>();

diff --git a/src/ui/ErrorMessage.tsx b/src/ui/ErrorMessage.tsx
@@ -12,12 +12,12 @@ const ErrorMessage: React.FC<IProps> = ({ type }) => {
 
   if ($error.state && type === "API") {
     return (
-      <div className="mt-5 text-[14px]">
+      <div className="mt-5 text-[16px] font-manrope bg-accent-950 text-neutral-50 rounded-[32px]">
         <div className="flex items-center justify-center flex-col gap-3">
           <p> {$error.description.slice(0, 20)}...</p>
           <button
             onClick={() => reload.set(!$reload)}
-            className="bg-button px-3 py-2 rounded-md"
+            className="bg-accent-500 text-neutral-50 font-semibold py-2 min-w-[100px] rounded-2xl mb-2"
           >
             Reload
           </button>
@@ -27,7 +27,7 @@ const ErrorMessage: React.FC<IProps> = ({ type }) => {
   }
   if ($error.state && type === "WEB3") {
     return (
-      <div className="fixed top-0 left-1/2 transform -translate-x-1/2 text-[14px] max-w-[700px] w-full bg-[#1c1c23] rounded-md flex flex-col items-center justify-center mt-3 z-[200]">
+      <div className="fixed top-0 left-1/2 transform -translate-x-1/2 font-manrope text-[16px] max-w-[700px] w-full bg-accent-950 rounded-[32px] flex flex-col items-center justify-center mt-3 z-[200] text-neutral-50">
         <svg
           onClick={() => error.set({ state: false, type: "", description: "" })}
           className="absolute right-5 top-5 cursor-pointer"
@@ -88,10 +88,10 @@ const ErrorMessage: React.FC<IProps> = ({ type }) => {
             </filter>
           </defs>
         </svg>
-        <p className="py-8 px-3"> {$error.description.slice(0, 20)}...</p>
+        <p className="py-8 px-3">{$error.description.slice(0, 25)}...</p>
         <button
           onClick={() => reload.set(!$reload)}
-          className="bg-button px-3 py-2 rounded-md mb-2"
+          className="bg-accent-500 font-semibold py-2 min-w-[100px] rounded-2xl mb-2"
         >
           Reload
         </button>

diff --git a/src/ui/TimeDifferenceIndicator.tsx b/src/ui/TimeDifferenceIndicator.tsx
@@ -19,14 +19,14 @@ const TimeDifferenceIndicator: React.FC<IProps> = ({
       <div className="font-manrope font-semibold">
         {timeDifference.days < 1000 ? (
           <div
-            className={`${baseClasses} ${sizeClasses} bg-warning-950 text-warning-400`}
+            className={`${baseClasses} ${sizeClasses} bg-warning-950 border border-warning-400 text-warning-400`}
           >
             {timeDifference.days} {timeDifference.days > 1 ? "days" : "day"}{" "}
             {timeDifference.hours}h ago
           </div>
         ) : (
           <div
-            className={`${baseClasses} ${sizeClasses} bg-warning-950 text-warning-400`}
+            className={`${baseClasses} ${sizeClasses} bg-warning-950 border border-warning-400 text-warning-400`}
           >
             None
           </div>
@@ -40,8 +40,8 @@ const TimeDifferenceIndicator: React.FC<IProps> = ({
       <div
         className={`${baseClasses} ${sizeClasses} ${
           timeDifference.hours > 4
-            ? "bg-accent-950 text-accent-400"
-            : "bg-success-950 text-success-400"
+            ? "bg-accent-950 text-accent-400 border border-accent-400"
+            : "bg-success-950 border border-success-400 text-success-400"
         }`}
       >
         {timeDifference.hours}h ago