From 45238de28d06fa45a3d1d81f13ff29d55e6994b0 Mon Sep 17 00:00:00 2001
From: devtealeaf <dev0tea0leaf@gmail.com>
Date: Fri, 11 Oct 2024 02:04:55 +0300
Subject: [PATCH 1/2] fix: remove form error alert

---
 package.json                                  |  2 +-
 .../components/InvestForm/InvestError.tsx     | 97 -------------------
 .../Vault/components/InvestForm/index.tsx     | 22 ++---
 src/store/index.ts                            |  4 +-
 src/ui/ErrorMessage.tsx                       | 10 +-
 src/ui/TimeDifferenceIndicator.tsx            |  8 +-
 6 files changed, 20 insertions(+), 123 deletions(-)
 delete mode 100644 src/modules/Vault/components/InvestForm/InvestError.tsx

diff --git a/package.json b/package.json
index fd82286e..fb75d6d0 100644
--- 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
deleted file mode 100644
index 104b4c9e..00000000
--- a/src/modules/Vault/components/InvestForm/InvestError.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { DEFAULT_ERROR } from "@constants";
-
-import type { TError } from "@types";
-
-interface IProps {
-  error: TError;
-  setError: React.Dispatch<React.SetStateAction<TError>>;
-}
-
-const InvestError: React.FC<IProps> = ({ error, setError }) => {
-  return (
-    <div className="bg-[#734950] border border-[#b75457] rounded-sm mt-5 relative">
-      <div className="px-2 py-2 flex items-center justify-center flex-col">
-        <div className="flex items-center justify-between w-full">
-          <svg
-            width="24"
-            height="21"
-            viewBox="0 0 24 21"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className="mr-2"
-          >
-            <path
-              d="M23.2266 17.7266L13.8516 1.4375C13.1484 0.226562 11.3125 0.1875 10.6094 1.4375L1.23438 17.7266C0.53125 18.9375 1.42969 20.5 2.875 20.5H21.5859C23.0312 20.5 23.9297 18.9766 23.2266 17.7266ZM12.25 14.3281C13.2266 14.3281 14.0469 15.1484 14.0469 16.125C14.0469 17.1406 13.2266 17.9219 12.25 17.9219C11.2344 17.9219 10.4531 17.1406 10.4531 16.125C10.4531 15.1484 11.2344 14.3281 12.25 14.3281ZM10.5312 7.88281C10.4922 7.60938 10.7266 7.375 11 7.375H13.4609C13.7344 7.375 13.9688 7.60938 13.9297 7.88281L13.6562 13.1953C13.6172 13.4688 13.4219 13.625 13.1875 13.625H11.2734C11.0391 13.625 10.8438 13.4688 10.8047 13.1953L10.5312 7.88281Z"
-              fill="#DE2E2E"
-            />
-          </svg>
-          <p className="text-[18px] text-[#f2aeae]">{error?.type}</p>
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 12 12"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className="cursor-pointer"
-            onClick={() => setError(DEFAULT_ERROR)}
-          >
-            <g filter="url(#filter0_i_910_1842)">
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M0.292893 1.70711C-0.097631 1.31658 -0.097631 0.683417 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6 4.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683417 12.0976 1.31658 11.7071 1.70711L7.41421 6L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3166 12.0976 10.6834 12.0976 10.2929 11.7071L6 7.41421L1.70711 11.7071C1.31658 12.0976 0.683417 12.0976 0.292893 11.7071C-0.0976311 11.3166 -0.0976311 10.6834 0.292893 10.2929L4.58579 6L0.292893 1.70711Z"
-                fill="white"
-              />
-            </g>
-            <defs>
-              <filter
-                id="filter0_i_910_1842"
-                x="0"
-                y="0"
-                width="14"
-                height="14"
-                filterUnits="userSpaceOnUse"
-                colorInterpolationFilters="sRGB"
-              >
-                <feFlood floodOpacity="0" result="BackgroundImageFix" />
-                <feBlend
-                  mode="normal"
-                  in="SourceGraphic"
-                  in2="BackgroundImageFix"
-                  result="shape"
-                />
-                <feColorMatrix
-                  in="SourceAlpha"
-                  type="matrix"
-                  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                  result="hardAlpha"
-                />
-                <feOffset dx="2" dy="2" />
-                <feGaussianBlur stdDeviation="1" />
-                <feComposite
-                  in2="hardAlpha"
-                  operator="arithmetic"
-                  k2="-1"
-                  k3="1"
-                />
-                <feColorMatrix
-                  type="matrix"
-                  values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-                />
-                <feBlend
-                  mode="normal"
-                  in2="shape"
-                  result="effect1_innerShadow_910_1842"
-                />
-              </filter>
-            </defs>
-          </svg>
-        </div>
-        <p className="text-[16px] max-w-[400px] text-[#f2aeae] break-words">
-          {error?.description}
-        </p>
-      </div>
-    </div>
-  );
-};
-export { InvestError };
diff --git a/src/modules/Vault/components/InvestForm/index.tsx b/src/modules/Vault/components/InvestForm/index.tsx
index 85c9dd3b..70aeaaa5 100644
--- a/src/modules/Vault/components/InvestForm/index.tsx
+++ b/src/modules/Vault/components/InvestForm/index.tsx
@@ -9,7 +9,6 @@ import { writeContract, waitForTransactionReceipt } from "@wagmi/core";
 
 import { SettingsModal } from "./SettingsModal";
 import { TabSwitcher } from "./TabSwitcher";
-import { InvestError } from "./InvestError";
 
 import { Loader, ShareSkeleton, AssetsSkeleton } from "@ui";
 
@@ -23,6 +22,7 @@ import {
   lastTx,
   connected,
   transactionSettings,
+  error,
 } from "@store";
 
 import {
@@ -64,7 +64,6 @@ import type {
   TVault,
   TBalances,
   TAsset,
-  TError,
   TUnderlyingToken,
   TZAPData,
   TLocalStorageToken,
@@ -171,8 +170,6 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
   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 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
           : 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);
@@ -609,7 +605,7 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
 
   const zapApprove = async () => {
     ///// ZAP TOKENS & UNDERLYING TOKENS
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
     setTransactionInProgress(true);
     const amount = inputs[option[0]];
 
@@ -695,7 +691,7 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
     }
 
     ///// UNDERLYING
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
     setTransactionInProgress(true);
     setLoader(true);
 
@@ -1014,7 +1010,7 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
   };
 
   const withdrawZapApprove = async () => {
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
     setTransactionInProgress(true);
 
     const amount = inputs[option[0]];
@@ -1105,7 +1101,7 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
         ? maxUint256
         : parseUnits(amount, decimals);
 
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
 
     const needApprove = option.filter(
       (asset) =>
@@ -1193,7 +1189,7 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
   };
 
   const deposit = async () => {
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
     setTransactionInProgress(true);
     let assets: string[] = [];
     let input: any = [];
@@ -1318,7 +1314,7 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
   };
 
   const withdraw = async () => {
-    setError(DEFAULT_ERROR);
+    error.set(DEFAULT_ERROR);
     setTransactionInProgress(true);
     const sharesToBurn = parseUnits(inputs[option[0]], 18);
 
@@ -3157,8 +3153,6 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
             </button>
           )}
         </div>
-
-        {error?.state && <InvestError error={error} setError={setError} />}
       </form>
     </div>
   );
diff --git a/src/store/index.ts b/src/store/index.ts
index c22d4515..2e5d0222 100644
--- 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
index 41b54f21..15c60810 100644
--- 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
index 396a088b..7a663898 100644
--- 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

From f9c720130c433e27bc9783ffe737892861eeec6c Mon Sep 17 00:00:00 2001
From: devtealeaf <dev0tea0leaf@gmail.com>
Date: Fri, 11 Oct 2024 02:30:33 +0300
Subject: [PATCH 2/2] upd: form swaps

---
 .../Vault/components/InvestForm/index.tsx     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/modules/Vault/components/InvestForm/index.tsx b/src/modules/Vault/components/InvestForm/index.tsx
index 70aeaaa5..147e9993 100644
--- a/src/modules/Vault/components/InvestForm/index.tsx
+++ b/src/modules/Vault/components/InvestForm/index.tsx
@@ -2598,14 +2598,24 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
                 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 ||
@@ -2732,7 +2742,12 @@ const InvestForm: React.FC<IProps> = ({ network, vault }) => {
                     </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