upd: leverage vaults + eth markets + fixes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stability-ui",
   "type": "module",
-  "version": "0.11.37-alpha",
+  "version": "0.11.43-alpha",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -18,7 +18,7 @@
     "@astrojs/tailwind": "6.0.2",
     "@astrojs/vercel": "8.2.10",
     "@nanostores/react": "^0.7.1",
-    "@stabilitydao/stability": "=0.51.2",
+    "@stabilitydao/stability": "=0.57.2",
     "@tanstack/query-sync-storage-persister": "^5.22.2",
     "@tanstack/react-query": "^5.22.2",
     "@tanstack/react-query-persist-client": "^5.22.2",

src/components/Menu.tsx

@@ -45,6 +45,8 @@ const Menu = (): JSX.Element => {
       setActivePath("metavaults");
     } else if (currentPath.includes("lending")) {
       setActivePath("lending");
+    } else if (currentPath.includes("leverage-vaults")) {
+      setActivePath("leverage-vaults");
     } else if (isBasicPage) {
       setActivePath(currentPath);
     }

src/components/Navbar.tsx

@@ -46,6 +46,8 @@ const Navbar = (): JSX.Element => {
       setActivePath("metavaults");
     } else if (currentPath.includes("lending")) {
       setActivePath("lending");
+    } else if (currentPath.includes("leverage-vaults")) {
+      setActivePath("leverage-vaults");
     } else if (isBasicPage) {
       setActivePath(currentPath);
     }

src/constants/index.ts

@@ -169,6 +169,15 @@
 };
 
 const CHAINS = [
+  {
+    name: chains["1"].name,
+    id: "1",
+    logoURI: `https://raw.githubusercontent.com/stabilitydao/.github/main/chains/${chains["1"].img}`,
+    explorer: "https://etherscan.io",
+    nativeCurrency: "ETH",
+    color: "#FFFFFF",
+    active: false,
+  },
   {
     name: chains["146"].name,
     id: "146",
@@ -215,7 +224,7 @@
 const PROTOCOLS = Object.entries(integrations).reduce<
   Record<string, IProtocol>
 >((acc, [integrationKey, integration]) => {
   const addProtocol = (key: string, data: any, fallbackImg: string) => {
     if (acc[key]) return;
 
     acc[key] = {
@@ -324,15 +333,7 @@
 ];
 
 const ROUTES = {
-  basic: [
-    "staking",
-    "dashboard",
-    "leverage-vaults",
-    "alm",
-    "agents",
-    "lending",
-    "dao",
-  ],
+  basic: ["staking", "dashboard", "alm", "agents", "lending", "dao"],
   platform: [
     "platform",
     "strategies",

src/layouts/AppStore.tsx

@@ -180,7 +180,7 @@
   };
 
   const setVaultsData = async (
     data: any,
     prices: { [key: string]: TPriceInfo },
     chainID: string
   ) => {
@@ -650,7 +650,9 @@
         let sonicPoints: undefined | number = undefined;
         let ringsPoints: undefined | number = undefined;
 
-        let liveAPR: undefined | number = undefined;
+        let liveAPR: undefined | number = vault?.income?.aprLive
+          ? Number(vault?.income?.aprLive)
+          : undefined;
         let assetAPR: undefined | number = undefined;
 
         // Points
@@ -698,36 +700,16 @@
             break;
         }
         // Leverage lending live APR & asset APR
-        if (
-          vault?.address?.toLowerCase() ===
-          "0x2fbeba931563feaab73e8c66d7499c49c8ada224"
-        ) {
-          const stS = (stabilityAPIData?.underlyings?.[146] as any)?.[
-            "0xE5DA20F15420aD15DE0fa650600aFc998bbE3955"
-          ];
-
-          if (stS) {
-            const supplyAPR = vault?.leverageLending?.supplyApr ?? 0;
-            const borrowAPR = vault?.leverageLending?.borrowApr ?? 0;
-            const leverage = vault?.leverageLending?.leverage ?? 0;
-            const stSAPR = stS?.apr?.daily ?? 0;
-
-            liveAPR = (supplyAPR - borrowAPR - stSAPR) * leverage;
-          }
-        } else if (vault?.leverageLending && vault?.assets?.length === 1) {
+        if (vault?.leverageLending && vault?.assets?.length === 1) {
           const LLAssets = stabilityAPIData?.underlyings?.[chainID];
 
           const assetAPRData =
             LLAssets?.[vault?.assets?.[0] as keyof typeof LLAssets];
 
           if (assetAPRData) {
-            const supplyAPR = vault?.leverageLending?.supplyApr ?? 0;
-            const borrowAPR = vault?.leverageLending?.borrowApr ?? 0;
-            const leverage = vault?.leverageLending?.leverage ?? 0;
             const dailyAPR = assetAPRData?.apr?.daily ?? 0;
 
             assetAPR = dailyAPR;
-            liveAPR = (dailyAPR + supplyAPR - borrowAPR) * leverage;
           }
         }
 
@@ -951,7 +933,7 @@
                     ) as TVaults;
                 }
               }
             } catch (txError: any) {
               console.log("BLOCKCHAIN ERROR:", txError);
 
               error.set({
@@ -1073,7 +1055,7 @@
                 );
 
                 localMetaVaults[chain.id] = balances;
               } catch (txError: any) {
                 console.log("BLOCKCHAIN ERROR:", txError);
 
                 error.set({

src/modules/Lending/components/ColumnSort.tsx

@@ -12,7 +12,7 @@ type TProps = {
 const ColumnSort: React.FC<TProps> = ({ index, value, table, sort }) => {
   const styles: Record<string, string> = {
     Market:
-      "sticky left-0 z-10 lg:relative w-[150px] md:w-[20%] bg-[#151618] lg:bg-transparent",
+      "sticky left-0 z-10 lg:relative w-[100px] md:w-[20%] bg-[#151618] lg:bg-transparent",
     Asset: "w-[100px] md:w-[15%]",
     "Supply APR": "w-[100px] md:w-[13%] justify-end",
     "Borrow APR": "w-[100px] md:w-[13%] justify-end",

src/modules/Lending/index.tsx

@@ -56,7 +56,7 @@ const Lending = (): JSX.Element => {
   const [tableStates, setTableStates] = useState(MARKET_TABLE);
   const [tableFilters, setTableFilters] = useState(MARKETS_TABLE_FILTERS);
 
-  const activeNetworks = CHAINS.filter(({ active }) => active);
+  const activeNetworks = CHAINS; //.filter(({ active }) => active);
 
   const activeNetworksHandler = async (chainIDs: string[]) => {
     //temp
@@ -167,6 +167,8 @@ const Lending = (): JSX.Element => {
         return networkMarkets.map((market: TMarket) => {
           const marketId = market?.marketId;
 
+          const operator = market?.operator;
+
           const reserves = market?.reserves;
 
           const deprecated = market?.deprecated;
@@ -200,6 +202,7 @@ const Lending = (): JSX.Element => {
 
           return {
             marketId,
+            operator,
             reserves,
             supplyAPR,
             borrowAPR,
@@ -271,7 +274,7 @@ const Lending = (): JSX.Element => {
       </div>
       <div className="pb-5 mt-4 min-w-full lg:min-w-[960px] xl:min-w-[1200px]">
         <div className="overflow-x-auto md:overflow-x-scroll lg:overflow-x-visible overflow-y-hidden scrollbar-thin scrollbar-thumb-[#46484C] scrollbar-track-[#101012] lg:hide-scrollbar">
-          <div className="flex items-center bg-[#151618] border border-[#23252A] rounded-lg h-[48px] w-[850px] md:w-full mb-4">
+          <div className="flex items-center bg-[#151618] border border-[#23252A] rounded-lg h-[48px] w-[800px] md:w-full mb-4">
             {tableStates.map((value: TTableColumn, index: number) => (
               <ColumnSort
                 key={value.name + index}

src/modules/Market/components/Forms/LeverageForm.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Toggler } from "@ui";
+import { Toggler, QuestionIcon } from "@ui";
 
 import { cn, getTokenData } from "@utils";
 
@@ -106,44 +106,28 @@ const LeverageForm: React.FC<TProps> = ({ asset }) => {
           <div className="flex items-center justify-between w-full">
             <div className="text-[#7C7E81] flex items-center gap-2 font-medium">
               <span>Borrowable supply</span>
-              <img
-                src="/icons/circle_question.png"
-                alt="Question icon"
-                className="w-4 h-4"
-              />
+              <QuestionIcon />
             </div>
             <Toggler checked={true} onChange={() => console.log(1)} />
           </div>
           <div className="flex items-center justify-between w-full">
             <div className="text-[#7C7E81] flex items-center gap-2 font-medium">
               <span>Price impact</span>
-              <img
-                src="/icons/circle_question.png"
-                alt="Question icon"
-                className="w-4 h-4"
-              />
+              <QuestionIcon />
             </div>
             <span className="font-semibold">0.0%</span>
           </div>
           <div className="flex items-center justify-between w-full">
             <div className="text-[#7C7E81] flex items-center gap-2 font-medium">
               <span>Route</span>
-              <img
-                src="/icons/circle_question.png"
-                alt="Question icon"
-                className="w-4 h-4"
-              />
+              <QuestionIcon />
             </div>
             <span className="font-semibold">0 DOS</span>
           </div>
           <div className="flex items-center justify-between w-full">
             <div className="text-[#7C7E81] flex items-center gap-2 font-medium">
               <span>Slippage</span>
-              <img
-                src="/icons/circle_question.png"
-                alt="Question icon"
-                className="w-4 h-4"
-              />
+              <QuestionIcon />
             </div>
             <span className="font-semibold">0.5%</span>
           </div>

src/modules/Market/components/Selectors/AssetSelector.tsx

@@ -21,7 +21,8 @@ const AssetSelector: React.FC<TProps> = ({
 }) => {
   const carouselRef = useRef<HTMLDivElement>(null);
 
-  const [width, setWidth] = useState(0);
+  const [width, setWidth] = useState<number>(0);
+  const [showAll, setShowAll] = useState<boolean>(false);
 
   const windowWidth = useWindowWidth();
 
@@ -102,7 +103,7 @@ const AssetSelector: React.FC<TProps> = ({
       </motion.div>
 
       <div className="hidden md:flex items-center gap-2 flex-wrap">
-        {assets.map((asset) => {
+        {assets.map((asset, index) => {
           if (
             !asset?.isBorrowable &&
             [MarketSectionTypes.Borrow, MarketSectionTypes.Repay].includes(
@@ -119,7 +120,8 @@ const AssetSelector: React.FC<TProps> = ({
                 "flex items-center gap-2 py-2 px-3 rounded-lg border cursor-pointer",
                 asset?.address === activeAsset?.address
                   ? "bg-[#232429] border-[#35363B]"
-                  : " bg-transparent border-[#232429]"
+                  : " bg-transparent border-[#232429]",
+                index > 9 && !showAll && "hidden"
               )}
               onClick={() => handleAssetChange(asset)}
             >
@@ -141,6 +143,14 @@ const AssetSelector: React.FC<TProps> = ({
             </div>
           );
         })}
+        {assets?.length > 10 ? (
+          <p
+            className="font-medium text-[14px] text-[#9180F4] cursor-pointer"
+            onClick={() => setShowAll((prev) => !prev)}
+          >
+            {showAll ? "Hide" : `Show all ${assets?.length}`}
+          </p>
+        ) : null}
       </div>
     </div>
   );

src/modules/Market/components/Stats/LeveragePositionStats.tsx

@@ -1,3 +1,5 @@
+import { QuestionIcon } from "@ui";
+
 import { getTokenData } from "@utils";
 
 import type { TMarketReserve, TAddress } from "@types";
@@ -70,11 +72,7 @@ const LeveragePositionStats: React.FC<TProps> = ({ asset }) => {
           <div className="flex items-start justify-between text-[16px] leading-6 w-full">
             <div className="text-[#7C7E81] flex items-center gap-2 font-medium">
               <span>Sum supply</span>
-              <img
-                src="/icons/circle_question.png"
-                alt="Question icon"
-                className="w-4 h-4"
-              />
+              <QuestionIcon />
             </div>
             <div className="flex flex-col items-end">
               <div className="flex items-center gap-2 text-[16px] leading-6">
@@ -94,11 +92,7 @@ const LeveragePositionStats: React.FC<TProps> = ({ asset }) => {
           <div className="flex items-center justify-between text-[16px] leading-6 w-full">
             <div className="text-[#7C7E81] flex items-center gap-2 font-medium">
               <span>Borrowed</span>
-              <img
-                src="/icons/circle_question.png"
-                alt="Question icon"
-                className="w-4 h-4"
-              />
+              <QuestionIcon />
             </div>
             <span className="font-semibold text-[#7C7E81]">
               0 {assetData?.symbol}
@@ -107,11 +101,7 @@ const LeveragePositionStats: React.FC<TProps> = ({ asset }) => {
           <div className="flex items-center justify-between text-[16px] leading-6 w-full">
             <div className="text-[#7C7E81] flex items-center gap-2 font-medium">
               <span>Leverage Used</span>
-              <img
-                src="/icons/circle_question.png"
-                alt="Question icon"
-                className="w-4 h-4"
-              />
+              <QuestionIcon />
             </div>
             <span className="font-semibold">1x</span>
           </div>
@@ -120,11 +110,7 @@ const LeveragePositionStats: React.FC<TProps> = ({ asset }) => {
           <div className="flex items-start justify-between text-[16px] leading-6 w-full">
             <div className="text-[#7C7E81] flex items-center gap-2 font-medium">
               <span>Net points</span>
-              <img
-                src="/icons/circle_question.png"
-                alt="Question icon"
-                className="w-4 h-4"
-              />
+              <QuestionIcon />
             </div>
             <div className="flex flex-col items-end">
               <span className="flex items-center gap-2 text-[16px] leading-6">
@@ -139,22 +125,14 @@ const LeveragePositionStats: React.FC<TProps> = ({ asset }) => {
           <div className="flex items-center justify-between text-[16px] leading-6 w-full">
             <div className="text-[#7C7E81] flex items-center gap-2 font-medium">
               <span>Health Factor</span>
-              <img
-                src="/icons/circle_question.png"
-                alt="Question icon"
-                className="w-4 h-4"
-              />
+              <QuestionIcon />
             </div>
             <span className="font-semibold text-[#7C7E81]">--</span>
           </div>
           <div className="flex items-center justify-between text-[16px] leading-6 w-full">
             <div className="text-[#7C7E81] flex items-center gap-2 font-medium">
               <span>Net APR</span>
-              <img
-                src="/icons/circle_question.png"
-                alt="Question icon"
-                className="w-4 h-4"
-              />
+              <QuestionIcon />
             </div>
             <span className="font-semibold">3.7%</span>
           </div>

src/modules/Market/components/Tabs/LeverageTab.tsx

@@ -1,6 +1,8 @@
 import { LeverageForm } from "../Forms/LeverageForm";
 import { LeveragePositionStats } from "../Stats/LeveragePositionStats";
 
+import { QuestionIcon } from "@ui";
+
 import { getTokenData } from "@utils";
 
 import type { TMarketReserve, TAddress } from "@types";
@@ -200,33 +202,21 @@ const LeverageTab: React.FC<TProps> = ({ asset }) => {
             <div className="w-full flex items-center justify-between">
               <div className="text-[#7C7E81] flex items-center gap-2">
                 <span>Leverage fee</span>
-                <img
-                  src="/icons/circle_question.png"
-                  alt="Question icon"
-                  className="w-4 h-4"
-                />
+                <QuestionIcon />
               </div>
               <span className="font-semibold">0.0%</span>
             </div>
             <div className="w-full flex items-center justify-between">
               <div className="text-[#7C7E81] flex items-center gap-2">
                 <span>Protocol fee</span>
-                <img
-                  src="/icons/circle_question.png"
-                  alt="Question icon"
-                  className="w-4 h-4"
-                />
+                <QuestionIcon />
               </div>
               <span className="font-semibold">15.0%</span>
             </div>
             <div className="w-full flex items-center justify-between">
               <div className="text-[#7C7E81] flex items-center gap-2">
                 <span>Deployer fee</span>
-                <img
-                  src="/icons/circle_question.png"
-                  alt="Question icon"
-                  className="w-4 h-4"
-                />
+                <QuestionIcon />
               </div>
               <span className="font-semibold">0.0%</span>
             </div>