charts fix & add curve liquidity pool

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.12.17-alpha",
+  "version": "0.12.18-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

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

@@ -46,7 +46,7 @@ const HistoricalRate: React.FC<IProps> = memo(
     const [chartData, setChartData] = useState<TChartData[]>([]);
     const [activeChart, setActiveChart] = useState<TActiveChart>();
     const [timeline, setTimeline] = useState<TSegment>(
-      timelineSegments.YEAR as TSegment
+      timelineSegments.WEEK as TSegment
     );
     const [isData, setIsData] = useState(true);
     const [graphError, setGraphError] = useState({
@@ -121,7 +121,7 @@ const HistoricalRate: React.FC<IProps> = memo(
         let APRChartData = workedData
           .filter(
             (obj) =>
-              obj.APR && obj.unixTimestamp >= NOW - TIMESTAMPS_IN_SECONDS.YEAR
+              obj.APR && obj.unixTimestamp >= NOW - TIMESTAMPS_IN_SECONDS.WEEK
           )
           .map((obj) => ({
             unixTimestamp: obj.unixTimestamp,
@@ -136,11 +136,10 @@ const HistoricalRate: React.FC<IProps> = memo(
           setIsData(false);
           return;
         }
+
         const lastTimestamp =
           APRChartData[APRChartData.length - 1].unixTimestamp;
 
-        time = APRChartData[0].unixTimestamp;
-
         do {
           let sortedAPRs = APRChartData.filter(
             (obj) => obj.unixTimestamp >= time
@@ -192,7 +191,7 @@ const HistoricalRate: React.FC<IProps> = memo(
       const NOW = Math.floor(Date.now() / 1000);
       const TIME: number = TIMESTAMPS_IN_SECONDS[segment];
 
-      let time = 0,
+      let time = NOW - TIME,
         newData;
 
       const lastTimestamp = chartData[chartData.length - 1].unixTimestamp;
@@ -204,7 +203,6 @@ const HistoricalRate: React.FC<IProps> = memo(
           );
 
           newData = [];
-          time = APRArr[0].unixTimestamp;
 
           if (segment === "MONTH") {
             do {
@@ -223,6 +221,7 @@ const HistoricalRate: React.FC<IProps> = memo(
               }
             } while (time < lastTimestamp);
           } else if (segment === "YEAR") {
+            time = APRArr[0].unixTimestamp;
             do {
               let sortedAPRs = APRArr.filter(
                 (obj) => obj.unixTimestamp >= time
@@ -300,7 +299,10 @@ const HistoricalRate: React.FC<IProps> = memo(
             (obj: TChartData) => obj.unixTimestamp >= NOW - TIME
           );
           newData = [];
-          time = TVLArr[0].unixTimestamp;
+
+          if (segment === "YEAR") {
+            time = TVLArr[0].unixTimestamp;
+          }
 
           do {
             let sortedAPRs = TVLArr.filter((obj) => obj.unixTimestamp < time);
@@ -354,7 +356,10 @@ const HistoricalRate: React.FC<IProps> = memo(
           );
 
           newData = [];
-          time = priceArr[0].unixTimestamp;
+
+          if (segment === "YEAR") {
+            time = priceArr[0].unixTimestamp;
+          }
 
           do {
             let sortedData = priceArr.filter((obj) => obj.unixTimestamp < time);
@@ -414,7 +419,6 @@ const HistoricalRate: React.FC<IProps> = memo(
           );
 
           newData = [];
-          time = vsHoldArr[0].unixTimestamp;
 
           if (segment === "MONTH") {
             do {
@@ -433,6 +437,7 @@ const HistoricalRate: React.FC<IProps> = memo(
               }
             } while (time < lastTimestamp);
           } else if (segment === "YEAR") {
+            time = vsHoldArr[0].unixTimestamp;
             do {
               let sortedAPRs = vsHoldArr.filter(
                 (obj) => obj.unixTimestamp >= time

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

@@ -283,7 +283,7 @@
     }
     if (tab === "Deposit") {
       setInputs(
         (prevInputs: any) =>
           ({
             ...prevInputs,
             [asset]: amount,
@@ -296,7 +296,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 +317,7 @@
   };
 
   const resetInputs = (options: string[] = option) => {
     const reset: TVaultInput | any = {};
 
     for (let i = 0; i < options.length; i++) {
       reset[options[i]] = "";
@@ -587,7 +587,7 @@
   );
   const zapInputHandler = (amount: string, asset: string) => {
     setInputs(
       (prevInputs: any) =>
         ({
           ...prevInputs,
           [asset]: amount,
@@ -699,7 +699,7 @@
     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 +711,7 @@
 
         const out = shares - (shares * decimalPercent) / BigInt(100);
 
         const txToken: any = {
           [underlyingToken?.address]: {
             amount: amount,
             symbol: underlyingToken?.symbol,
@@ -2839,7 +2839,6 @@
                                       ? "Confirm in wallet"
                                       : "Deposit"}
                                   </p>
-
                                   {transactionInProgress && (
                                     <Loader color={"#a6a0b2"} />
                                   )}

src/modules/Vault/components/LiquidityPool.tsx

@@ -2,7 +2,7 @@ import { memo, useState, useEffect } from "react";
 
 import { useStore } from "@nanostores/react";
 
-import { HeadingText } from "@ui";
+import { HeadingText, FieldValue } from "@ui";
 
 import { DEXes } from "@constants";
 
@@ -37,10 +37,16 @@ const LiquidityPool: React.FC<IProps> = memo(({ network, vault }) => {
     vault.strategyInfo?.protocols.some((protocol) => protocol.name === dex.name)
   );
 
-  const protocol =
-    vault.strategyInfo.protocols.length > 1
-      ? vault.strategyInfo.protocols[1]
-      : vault.strategyInfo.protocols[0];
+  let protocol = { logoSrc: "", name: "" };
+
+  if (vault?.strategy === "Curve Convex Farm") {
+    protocol = vault.strategyInfo.protocols[0];
+  } else {
+    protocol =
+      vault.strategyInfo.protocols.length > 1
+        ? vault.strategyInfo.protocols[1]
+        : vault.strategyInfo.protocols[0];
+  }
 
   useEffect(() => {
     if (!$assetsPrices[network]) return;
@@ -82,12 +88,12 @@ const LiquidityPool: React.FC<IProps> = memo(({ network, vault }) => {
             className="rounded-full w-7 h-7"
           />
           <div className="flex flex-col">
-            <span data-testid="poolName" className="text-[16px]">
+            <span data-testid="poolName" className="text-[18px] font-semibold">
               {protocol.name}
             </span>
             <span
               data-testid="poolSymbol"
-              className="text-[14px] text-[#8d8e96]"
+              className="text-[12px] leading-3 text-neutral-500"
             >
               {poolSymbol}
             </span>
@@ -96,43 +102,39 @@ const LiquidityPool: React.FC<IProps> = memo(({ network, vault }) => {
 
         <div className="flex items-start gap-10 flex-wrap">
           <div className="flex flex-col gap-5">
-            <div className="flex flex-col">
-              <span className="text-[14px] text-[#8d8e96]">TVL</span>
-              <span data-testid="poolTVL" className="text-[16px]">
-                {formatNumber(Number(vault.pool.tvl), "abbreviate")}
-              </span>
-            </div>
-            <div className="flex flex-col">
-              <span className="text-[14px] text-[#8d8e96]">FEE</span>
-              <span data-testid="poolFee" className="text-[16px]">
-                {vault.pool.fee}%
-              </span>
-            </div>
+            <FieldValue
+              name="TVL"
+              value={formatNumber(Number(vault.pool.tvl), "abbreviate")}
+            />
+
+            {!!vault.pool.fee && (
+              <FieldValue name="FEE" value={`${vault.pool.fee}%`} />
+            )}
           </div>
           <div className="flex flex-col gap-5">
             {!!poolAssets &&
               poolAssets.map((poolAsset, index: number) => (
-                <div key={poolAsset.amount} className="flex flex-col">
-                  <span className="text-[14px] text-[#8d8e96]">
+                <div
+                  key={poolAsset.amount}
+                  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 uppercase text-[12px] leading-3 text-neutral-500 mb-0 md:mb-0">
                     {poolAsset.symbol}
-                  </span>
-                  <span
+                  </div>
+                  <div
                     data-testid={`poolAsset${index}`}
-                    className="text-[16px]"
+                    className="h-[40px] flex items-center text-[18px] font-semibold whitespace-nowrap"
                   >
                     {formatNumber(poolAsset.amount, "format")} (
                     {poolAsset.percent.toFixed(2)}%)
-                  </span>
+                  </div>
                 </div>
               ))}
           </div>
 
           {!!dexPool && (
             <div>
-              <div className="flex flex-col">
-                <span className="text-[14px] text-[#8d8e96]">ALGO</span>
-                <span className="text-[16px]">{dexPool.algo}</span>
-              </div>
+              <FieldValue name="ALGO" value={dexPool.algo} />
             </div>
           )}
         </div>

src/modules/Vault/index.tsx

@@ -14,7 +14,7 @@ import { LiquidityPool } from "./components/LiquidityPool";
 import { UnderlyingALM } from "./components/UnderlyingALM";
 
 import { WagmiLayout } from "@layouts";
-import { Toast, Loader, ErrorMessage, Breadcrumbs } from "@ui";
+import { Toast, FullPageLoader, ErrorMessage, Breadcrumbs } from "@ui";
 
 import { vaultData, vaults, error } from "@store";
 
@@ -93,11 +93,9 @@ const Vault: React.FC<IProps> = ({ network, vault }) => {
 
         <div className="my-8 flex flex-col lg:flex-row gap-5 w-full">
           <div className="w-full lg:w-1/2">
-            {localVault.assets.length > 1 &&
-              localVault?.pool &&
-              localVault?.strategy != "Curve Convex Farm" && (
-                <LiquidityPool network={network} vault={localVault} />
-              )}
+            {localVault.assets.length > 1 && localVault?.pool && (
+              <LiquidityPool network={network} vault={localVault} />
+            )}
           </div>
           <div className="w-full lg:w-1/2">
             {isALM && <UnderlyingALM network={network} vault={localVault} />}
@@ -115,7 +113,7 @@ const Vault: React.FC<IProps> = ({ network, vault }) => {
     </WagmiLayout>
   ) : (
     <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-      <Loader width="100" height="100" />
+      <FullPageLoader />
     </div>
   );
 };