diff --git a/package.json b/package.json index 23c98905..02b2cebb 100644 --- a/package.json +++ b/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", diff --git a/public/icons/circle_question.png b/public/icons/circle_question.png deleted file mode 100644 index b59e8fb7..00000000 Binary files a/public/icons/circle_question.png and /dev/null differ diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx index 76a178a7..4b3e781a 100644 --- a/src/components/Menu.tsx +++ b/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); } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 0d67b611..b232509f 100644 --- a/src/components/Navbar.tsx +++ b/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); } diff --git a/src/constants/index.ts b/src/constants/index.ts index f7fed7f6..d8aedd68 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -169,6 +169,15 @@ const ETHERFI_POINTS = { }; 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", @@ -324,15 +333,7 @@ const PATHS = [ ]; const ROUTES = { - basic: [ - "staking", - "dashboard", - "leverage-vaults", - "alm", - "agents", - "lending", - "dao", - ], + basic: ["staking", "dashboard", "alm", "agents", "lending", "dao"], platform: [ "platform", "strategies", diff --git a/src/layouts/AppStore.tsx b/src/layouts/AppStore.tsx index 3551202c..973c06f2 100644 --- a/src/layouts/AppStore.tsx +++ b/src/layouts/AppStore.tsx @@ -650,7 +650,9 @@ const AppStore = (props: React.PropsWithChildren): JSX.Element => { 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 @@ const AppStore = (props: React.PropsWithChildren): JSX.Element => { 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; } } diff --git a/src/modules/Lending/components/ColumnSort.tsx b/src/modules/Lending/components/ColumnSort.tsx index 5df5184f..50cfa3e5 100644 --- a/src/modules/Lending/components/ColumnSort.tsx +++ b/src/modules/Lending/components/ColumnSort.tsx @@ -12,7 +12,7 @@ type TProps = { const ColumnSort: React.FC = ({ index, value, table, sort }) => { const styles: Record = { 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", diff --git a/src/modules/Lending/index.tsx b/src/modules/Lending/index.tsx index 64fbb12b..f1fc7d32 100644 --- a/src/modules/Lending/index.tsx +++ b/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 => {
-
+
{tableStates.map((value: TTableColumn, index: number) => ( = ({ asset }) => {
Borrowable supply - Question icon +
console.log(1)} />
Price impact - Question icon +
0.0%
Route - Question icon +
0 DOS
Slippage - Question icon +
0.5%
diff --git a/src/modules/Market/components/Selectors/AssetSelector.tsx b/src/modules/Market/components/Selectors/AssetSelector.tsx index 94446179..1e6dcdde 100644 --- a/src/modules/Market/components/Selectors/AssetSelector.tsx +++ b/src/modules/Market/components/Selectors/AssetSelector.tsx @@ -21,7 +21,8 @@ const AssetSelector: React.FC = ({ }) => { const carouselRef = useRef(null); - const [width, setWidth] = useState(0); + const [width, setWidth] = useState(0); + const [showAll, setShowAll] = useState(false); const windowWidth = useWindowWidth(); @@ -102,7 +103,7 @@ const AssetSelector: React.FC = ({
- {assets.map((asset) => { + {assets.map((asset, index) => { if ( !asset?.isBorrowable && [MarketSectionTypes.Borrow, MarketSectionTypes.Repay].includes( @@ -119,7 +120,8 @@ const AssetSelector: React.FC = ({ "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 = ({
); })} + {assets?.length > 10 ? ( +

setShowAll((prev) => !prev)} + > + {showAll ? "Hide" : `Show all ${assets?.length}`} +

+ ) : null}
); diff --git a/src/modules/Market/components/Stats/LeveragePositionStats.tsx b/src/modules/Market/components/Stats/LeveragePositionStats.tsx index 6194a369..fc49075b 100644 --- a/src/modules/Market/components/Stats/LeveragePositionStats.tsx +++ b/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 = ({ asset }) => {
Sum supply - Question icon +
@@ -94,11 +92,7 @@ const LeveragePositionStats: React.FC = ({ asset }) => {
Borrowed - Question icon +
0 {assetData?.symbol} @@ -107,11 +101,7 @@ const LeveragePositionStats: React.FC = ({ asset }) => {
Leverage Used - Question icon +
1x
@@ -120,11 +110,7 @@ const LeveragePositionStats: React.FC = ({ asset }) => {
Net points - Question icon +
@@ -139,22 +125,14 @@ const LeveragePositionStats: React.FC = ({ asset }) => {
Health Factor - Question icon +
--
Net APR - Question icon +
3.7%
diff --git a/src/modules/Market/components/Tabs/LeverageTab.tsx b/src/modules/Market/components/Tabs/LeverageTab.tsx index b8b1268f..055dd473 100644 --- a/src/modules/Market/components/Tabs/LeverageTab.tsx +++ b/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 = ({ asset }) => {
Leverage fee - Question icon +
0.0%
Protocol fee - Question icon +
15.0%
Deployer fee - Question icon +
0.0%
diff --git a/src/modules/Market/ui/AssetInfo.tsx b/src/modules/Market/ui/AssetInfo.tsx index c4dccc54..4454c51d 100644 --- a/src/modules/Market/ui/AssetInfo.tsx +++ b/src/modules/Market/ui/AssetInfo.tsx @@ -110,7 +110,7 @@ const AssetInfo: React.FC = ({ {asset?.assetData?.symbol} Price - {convertToUSD(asset?.price)} + {Number(asset?.price ?? 0) ? convertToUSD(asset?.price) : "-"}
@@ -240,7 +240,7 @@ const AssetInfo: React.FC = ({ {Number( - asset?.interestStrategy?.maxVariableBorrowRate + asset?.interestStrategy?.maxVariableBorrowRate ?? 0 ).toFixed(2)} % @@ -251,7 +251,7 @@ const AssetInfo: React.FC = ({ {Number( - asset?.interestStrategy?.optimalUsageRation + asset?.interestStrategy?.optimalUsageRation ?? 0 ).toFixed(2)} % @@ -262,7 +262,7 @@ const AssetInfo: React.FC = ({ {Number( - asset?.interestStrategy?.variableRateSlope1 + asset?.interestStrategy?.variableRateSlope1 ?? 0 ).toFixed(2)} % @@ -273,7 +273,7 @@ const AssetInfo: React.FC = ({ {Number( - asset?.interestStrategy?.variableRateSlope2 + asset?.interestStrategy?.variableRateSlope2 ?? 0 ).toFixed(2)} % diff --git a/src/modules/Platform/components/Swapper/index.tsx b/src/modules/Platform/components/Swapper/index.tsx index 1bed8ba6..5fbdf564 100644 --- a/src/modules/Platform/components/Swapper/index.tsx +++ b/src/modules/Platform/components/Swapper/index.tsx @@ -51,9 +51,9 @@ const Swapper = (): JSX.Element => { const initTablesData = async () => { try { - const GRAPH_URL = GRAPH_ENDPOINTS[$currentChainID]; - - const GRAPH_QUERY = `{ + const GRAPH_URL = GRAPH_ENDPOINTS?.[$currentChainID]; + if (GRAPH_URL) { + const GRAPH_QUERY = `{ bcpoolEntities { pool id @@ -69,14 +69,15 @@ const Swapper = (): JSX.Element => { tokenOut }}`; - const graphResponse = await axios.post(GRAPH_URL, { - query: GRAPH_QUERY, - }); + const graphResponse = await axios.post(GRAPH_URL, { + query: GRAPH_QUERY, + }); - const data = graphResponse.data.data; + const data = graphResponse.data.data; - setPoolTableData(data.poolEntities); - // setBCPoolTableData(data.bcpoolEntities); + setPoolTableData(data.poolEntities); + // setBCPoolTableData(data.bcpoolEntities); + } } catch (error) { console.error(error); } @@ -84,6 +85,7 @@ const Swapper = (): JSX.Element => { const AMM_ADAPTERS = useMemo(() => { const adapters = deployments?.[$currentChainID]?.ammAdapters; + console.log(deployments?.[$currentChainID]?.ammAdapters); if (!adapters) return []; return Object.entries(adapters).map(([name, address]) => ({ diff --git a/src/modules/Vault/LeverageVault.tsx b/src/modules/Vault/LeverageVault.tsx new file mode 100644 index 00000000..18859cdf --- /dev/null +++ b/src/modules/Vault/LeverageVault.tsx @@ -0,0 +1,110 @@ +import { useState, useEffect, useMemo } from "react"; +import { useStore } from "@nanostores/react"; + +import { VaultBar } from "./components/VaultBar"; +import { InvestForm } from "./components/InvestForm"; +import { Strategy } from "./components/Strategy"; +import { Assets } from "./components/Assets"; +import { InfoBar } from "./components/InfoBar"; +import { HistoricalRate } from "./components/HistoricalRate"; +import { VaultInfo } from "./components/VaultInfo"; +import { Contracts } from "./components/Contracts"; +import { YieldRates } from "./components/YieldRates"; +import { LeverageLending } from "./components/LeverageLending"; + +import { WagmiLayout } from "@layouts"; +import { FullPageLoader, ErrorMessage } from "@ui"; + +import { vaultData, vaults, error } from "@store"; + +import type { TAddress, TVault } from "@types"; + +interface IProps { + network: string; + vault: TAddress; +} + +const LeverageVault: React.FC = ({ network, vault }) => { + const $vaultData = useStore(vaultData); + const $vaults = useStore(vaults); + + const $error = useStore(error); + + const [localVault, setLocalVault] = useState(); + + const isLeverageLending = useMemo( + () => !!localVault?.leverageLending, + [localVault] + ); + + useEffect(() => { + if ($vaults && vault) { + setLocalVault($vaults[network][vault.toLowerCase()]); + } + }, [$vaults, $vaultData]); + + return vault && localVault ? ( + +
+
+ +
+ + +
+ +
+ +
+
+
+ + + + +
+ +
+ +
+
+ +
+
+ +
+
+ {isLeverageLending && } + + +
+ +
+ + +
+
+ + ) : ( +
+ {" "} +
+ +
+
+ ); +}; + +export { LeverageVault }; diff --git a/src/modules/Vault/components/InfoBar.tsx b/src/modules/Vault/components/InfoBar.tsx index c0eea2f0..e175bb6a 100644 --- a/src/modules/Vault/components/InfoBar.tsx +++ b/src/modules/Vault/components/InfoBar.tsx @@ -383,6 +383,7 @@ const InfoBar: React.FC = memo(({ network, vault }) => { {earnData.dailyEarn}$

} + hiddenOnMobile /> = memo(({ vault }) => { ); return ( -
+
= memo(({ vault }) => {
{!!vault?.assetAPR && borrowAPRComponent}
+
+
+

+ MIN TARGET LTV +

+

+ {vault?.leverageLending?.minTargetLtv}% +

+
+
+

+ MAX TARGET LTV +

+

+ {vault?.leverageLending?.maxTargetLtv}% +

+
+
+
+
+

+ LT +

+

+ {vault?.leverageLending?.lt}% +

+
+
); diff --git a/src/modules/Vault/index.tsx b/src/modules/Vault/index.tsx index a42d396d..eba30ad3 100644 --- a/src/modules/Vault/index.tsx +++ b/src/modules/Vault/index.tsx @@ -12,7 +12,6 @@ import { Contracts } from "./components/Contracts"; import { YieldRates } from "./components/YieldRates"; import { LiquidityPool } from "./components/LiquidityPool"; import { UnderlyingALM } from "./components/UnderlyingALM"; -import { LeverageLending } from "./components/LeverageLending"; import { WagmiLayout } from "@layouts"; import { FullPageLoader, ErrorMessage } from "@ui"; @@ -41,11 +40,6 @@ const Vault: React.FC = ({ network, vault }) => { [localVault] ); - const isLeverageLending = useMemo( - () => !!localVault?.leverageLending, - [localVault] - ); - useEffect(() => { if ($vaults && vault) { setLocalVault($vaults[network][vault.toLowerCase()]); @@ -89,7 +83,6 @@ const Vault: React.FC = ({ network, vault }) => {
- {isLeverageLending && } {(localVault.assets.length > 1 && localVault?.pool?.tvl) || isALM ? (
{localVault.assets.length > 1 && localVault?.pool?.tvl && ( diff --git a/src/modules/index.ts b/src/modules/index.ts index 78770c8c..0c3f98a4 100644 --- a/src/modules/index.ts +++ b/src/modules/index.ts @@ -3,6 +3,7 @@ import { Factory } from "./Factory"; import { Farms } from "./Factory/Farms"; import { Vaults } from "./Vaults"; import { Vault } from "./Vault"; +import { LeverageVault } from "./Vault/LeverageVault"; import { Platform } from "./Platform"; import { Assets } from "./Platform/components/Assets"; import { Chains } from "./Platform/components/Chains"; @@ -63,4 +64,5 @@ export { DAO, Season1, Season2, + LeverageVault, }; diff --git a/src/pages/lending/1/Core-Instance.astro b/src/pages/lending/1/Core-Instance.astro new file mode 100644 index 00000000..6d883e80 --- /dev/null +++ b/src/pages/lending/1/Core-Instance.astro @@ -0,0 +1,16 @@ +--- +import Layout from '@layouts/Layout.astro'; + +import { Market } from "@modules" +--- + + + + + \ No newline at end of file diff --git a/src/pages/leverage-vaults/[network]/[vault].astro b/src/pages/leverage-vaults/[network]/[vault].astro new file mode 100644 index 00000000..5cebe726 --- /dev/null +++ b/src/pages/leverage-vaults/[network]/[vault].astro @@ -0,0 +1,34 @@ +--- +import Layout from '@layouts/Layout.astro'; + +import { LeverageVault } from "@modules" + +import { VAULTS_META_TITLES } from "@constants"; + +import type {TAddress} from '@types'; + +const { network, vault } = Astro.params; + +const vaultTitle = VAULTS_META_TITLES[vault as keyof typeof VAULTS_META_TITLES]; + +const meta = { + title: vaultTitle ? `${vaultTitle}` : "Vault", + img: vaultTitle ? `/ogs/vaults/${network}-${vault}.png` : "/ogs/pages/vaults.png", + url: `https://stability.farm/vaults/${network}/${vault}`, + description: vaultTitle + ? `Deposit and earn with ${vaultTitle}, powered by Stability.` + : "On-chain asset management, liquidity mining and yield farming platform." +} + +--- + +
+ +
+ diff --git a/src/pages/leverage-vaults.astro b/src/pages/leverage-vaults/index.astro similarity index 100% rename from src/pages/leverage-vaults.astro rename to src/pages/leverage-vaults/index.astro diff --git a/src/types/index.ts b/src/types/index.ts index 6bed0311..8ae69ee3 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -319,6 +319,9 @@ type TLeverageLendingData = { borrowApr: number; leverage: number; ltv: number; + minTargetLtv: number; + maxTargetLtv: number; + lt: number; maxLtv: number; supplyApr: number; targetLeveragePercent: number; @@ -797,6 +800,7 @@ type TMarketReserve = { type TMarket = { marketId: string; + operator: string; reserves: TMarketReserve[]; roles: { name: string; addresses: TAddress[] }[]; deployed: string; diff --git a/src/ui/Breadcrumbs.tsx b/src/ui/Breadcrumbs.tsx index 98edb77b..e871f71d 100644 --- a/src/ui/Breadcrumbs.tsx +++ b/src/ui/Breadcrumbs.tsx @@ -49,6 +49,16 @@ const Breadcrumbs = (): JSX.Element => { add("All Vaults", "vaults"); + add(symbol); + } else if (main === "leverage-vaults" && rest.length === 2) { + const [, chainId, vaultAddress] = currentPath.split("/"); + + const vault = $vaults?.[chainId]?.[vaultAddress?.toLowerCase()]; + + const symbol = vault?.symbol || "Vault"; + + add("Leverage Vaults", "leverage-vaults"); + add(symbol); } else if (main === "strategies") { add("Platform", "platform"); diff --git a/src/ui/CustomTooltip.tsx b/src/ui/CustomTooltip.tsx index 6ffdf001..ca85e66c 100644 --- a/src/ui/CustomTooltip.tsx +++ b/src/ui/CustomTooltip.tsx @@ -1,5 +1,7 @@ import Tippy from "@tippyjs/react"; +import { QuestionIcon } from "./Icons"; + import { cn } from "@utils"; import "tippy.js/dist/tippy.css"; @@ -34,11 +36,7 @@ const CustomTooltip: React.FC = ({ > {name} - Question icon +
); diff --git a/src/ui/FieldValue.tsx b/src/ui/FieldValue.tsx index 7da8abe5..806ce806 100644 --- a/src/ui/FieldValue.tsx +++ b/src/ui/FieldValue.tsx @@ -1,13 +1,27 @@ +import { cn } from "@utils"; + interface IProps { name: string; value: any; bottomValue?: string; testId?: string; + hiddenOnMobile?: boolean; } -const FieldValue: React.FC = ({ name, value, bottomValue, testId }) => { +const FieldValue: React.FC = ({ + name, + value, + bottomValue, + testId, + hiddenOnMobile = false, +}) => { return ( -
+
{name}
diff --git a/src/ui/Icons/Question.tsx b/src/ui/Icons/Question.tsx new file mode 100644 index 00000000..ae23bdd8 --- /dev/null +++ b/src/ui/Icons/Question.tsx @@ -0,0 +1,43 @@ +interface IProps { + isWarning?: boolean; +} + +export const QuestionIcon: React.FC = ({ isWarning = false }) => { + const color = isWarning ? "#ED4C42" : "#58595D"; + + return ( + + + + + + + + + + + + + ); +}; diff --git a/src/ui/Icons/index.ts b/src/ui/Icons/index.ts index cdd19581..11588d33 100644 --- a/src/ui/Icons/index.ts +++ b/src/ui/Icons/index.ts @@ -13,6 +13,7 @@ import { FiltersIcon } from "./Filters"; import { ArrowRightIcon } from "./ArrowRight"; import { LendingIcon } from "./Lending"; import { DAOIcon } from "./DAO"; +import { QuestionIcon } from "./Question"; export { DashboardIcon, @@ -30,4 +31,5 @@ export { ArrowRightIcon, LendingIcon, DAOIcon, + QuestionIcon, }; diff --git a/src/ui/Modals/APRModal.tsx b/src/ui/Modals/APRModal.tsx index 76ee3221..b17173d5 100644 --- a/src/ui/Modals/APRModal.tsx +++ b/src/ui/Modals/APRModal.tsx @@ -4,8 +4,6 @@ import { useStore } from "@nanostores/react"; import { TimeDifferenceIndicator } from "@ui"; -import { formatNumber } from "@utils"; - import { aprFilter } from "@store"; import type { TAPRModal, TEarningData } from "@types"; @@ -32,11 +30,6 @@ const APRModal: React.FC = ({ state, setModalState }) => { Number(state.earningData.apr[$aprFilter]) / 365 ).toFixed(2); - const gemsAPR = formatNumber( - state.earningData.gemsAPR[$aprFilter], - "formatAPR" - ); - const handleClickOutside = (event: React.MouseEvent | MouseEvent) => { if (modalRef.current && !modalRef.current.contains(event.target as Node)) { setModalState({ @@ -122,10 +115,6 @@ const APRModal: React.FC = ({ state, setModalState }) => {

Daily yield

{dailyAPRValue}%

-
-

Gems APR

-

{gemsAPR}%

-

diff --git a/src/ui/Tables/Farming/Grid.tsx b/src/ui/Tables/Farming/Grid.tsx index d3828bf1..95dcefd9 100644 --- a/src/ui/Tables/Farming/Grid.tsx +++ b/src/ui/Tables/Farming/Grid.tsx @@ -21,7 +21,7 @@ interface IProps { const Grid: React.FC = ({ APRs, vault }) => { const POINTS = { sonic: vault.sonicPoints, rings: vault.ringsPoints }; - const link = `/vaults/${vault.network}/${vault.address}`; + const link = `/leverage-vaults/${vault.network}/${vault.address}`; const currentLtv = vault?.leverageLending?.ltv.toFixed(2) ?? 0; const maxLtv = vault?.leverageLending?.maxLtv.toFixed(2) ?? 0; diff --git a/src/ui/Tables/Farming/Row.tsx b/src/ui/Tables/Farming/Row.tsx index db0d6d14..e2462839 100644 --- a/src/ui/Tables/Farming/Row.tsx +++ b/src/ui/Tables/Farming/Row.tsx @@ -18,7 +18,7 @@ interface IProps { } const Row: React.FC = ({ APRs, vault, setModalState }) => { - const link = `/vaults/${vault.network}/${vault.address}`; + const link = `/leverage-vaults/${vault.network}/${vault.address}`; const modalData = { earningData: vault.earningData, diff --git a/src/ui/Tables/Markets/Row.tsx b/src/ui/Tables/Markets/Row.tsx index cd0fa757..95a722a2 100644 --- a/src/ui/Tables/Markets/Row.tsx +++ b/src/ui/Tables/Markets/Row.tsx @@ -4,10 +4,12 @@ import Tippy from "@tippyjs/react"; import { UtilizationTooltip } from "./UtilizationTooltip"; -import { ProgressCircle, Badge } from "@ui"; +import { ProgressCircle, QuestionIcon } from "@ui"; import { cn, formatNumber, getTokenData, useWindowWidth } from "@utils"; +import { integrations } from "@stabilitydao/stability"; + import { MarketTypes, TMarket, TMarketReserve } from "@types"; import "tippy.js/dist/tippy.css"; @@ -22,6 +24,8 @@ const Row: React.FC = ({ market }) => { const [showAll, setShowAll] = useState(false); + const operator = integrations?.[market?.operator?.toLowerCase()]; + return ( = ({ market }) => { isHidden && "hidden" )} > -

+
{!index ? ( -
-
+
+
{market?.network?.name} - - - {market?.marketId} - + {`${operator?.name} + {market?.deprecated && ( + +
{ + if (windowWidth <= 767) { + e.stopPropagation(); + e.preventDefault(); + } + }} + > + +
+ + )}
) : null} - {index === 1 && market?.deprecated ? ( - + {index === 1 ? ( + + {market?.marketId} + ) : null}
= ({ market }) => { alt={assetData?.symbol} className="w-6 h-6 rounded-full" /> - {assetData?.symbol} + 10) + ? "text-[14px]" + : "text-[16px]" + )} + > + {assetData?.symbol} +
= ({ const [expandedData, setExpandedData] = useState(false); - const isSTBLVault = - Array.isArray(vault?.assets) && - vault.assets.some((asset) => asset?.symbol && asset?.symbol === "STBL"); - const symbol = vault.type === VaultTypes.Vault - ? VAULTS_WITH_NAME[vault.address] || vault.assetsSymbol + ? VAULTS_WITH_NAME?.[vault?.address as keyof typeof VAULTS_WITH_NAME] || + vault.assetsSymbol : vault.symbol; const isDimmed = @@ -249,16 +247,6 @@ const Vault: React.FC = ({ {formatNumber(APRs?.dailyAPR ?? 0, "formatAPR")}%

- {!isSTBLVault && ( -
-

- Gems APR -

-

- {formatNumber(APRs?.gemsAPR ?? 0, "formatAPR")}% -

-
- )}

@@ -285,13 +273,7 @@ const Vault: React.FC = ({

)}
- {vault.type === VaultTypes.Vault && ( - Question icon - )} + {vault.type === VaultTypes.Vault && }
diff --git a/src/ui/Tables/Vaults/Grid.tsx b/src/ui/Tables/Vaults/Grid.tsx index 77891ca2..8c322370 100644 --- a/src/ui/Tables/Vaults/Grid.tsx +++ b/src/ui/Tables/Vaults/Grid.tsx @@ -27,10 +27,13 @@ const Grid: React.FC = ({ APRs, vault, setModalState }) => { rings: vault.ringsPoints, }; - const link = - vault?.type === VaultTypes.Vault - ? `/vaults/${vault.network}/${vault.address}` - : `/metavaults/${vault.network}/${vault.address}`; + let link = `/metavaults/${vault.network}/${vault.address}`; + + if (vault?.type === VaultTypes.Vault) { + link = !!vault?.leverageLending + ? `/leverage-vaults/${vault.network}/${vault.address}` + : `/vaults/${vault.network}/${vault.address}`; + } const modalData = vault?.type === VaultTypes.Vault diff --git a/src/ui/Tables/Vaults/Row.tsx b/src/ui/Tables/Vaults/Row.tsx index bd24840d..95239720 100644 --- a/src/ui/Tables/Vaults/Row.tsx +++ b/src/ui/Tables/Vaults/Row.tsx @@ -20,10 +20,13 @@ interface IProps { } const Row: React.FC = ({ APRs, vault, setModalState }) => { - const link = - vault?.type === VaultTypes.Vault - ? `/vaults/${vault.network}/${vault.address}` - : `/metavaults/${vault.network}/${vault.address}`; + let link = `/metavaults/${vault.network}/${vault.address}`; + + if (vault?.type === VaultTypes.Vault) { + link = !!vault?.leverageLending + ? `/leverage-vaults/${vault.network}/${vault.address}` + : `/vaults/${vault.network}/${vault.address}`; + } const modalData = vault?.type === VaultTypes.Vault diff --git a/src/ui/index.ts b/src/ui/index.ts index b7ea033e..838fa401 100644 --- a/src/ui/index.ts +++ b/src/ui/index.ts @@ -42,6 +42,7 @@ import { ArrowIcon, FiltersIcon, ArrowRightIcon, + QuestionIcon, } from "./Icons"; import { EmptyTable } from "./Tables/EmptyTable"; @@ -139,4 +140,5 @@ export { Indicator, ProposalsTable, APRBadge, + QuestionIcon, }; diff --git a/src/utils/functions/loadMarketsData.ts b/src/utils/functions/loadMarketsData.ts index a277e382..d0737d56 100644 --- a/src/utils/functions/loadMarketsData.ts +++ b/src/utils/functions/loadMarketsData.ts @@ -25,7 +25,7 @@ const loadMarketsData = async ( const reserves: TMarketReserve[] = libMarket.reserves.map((reserve) => { const backendData = - apiMarket?.reserves?.[reserve.asset.toLowerCase()] ?? {}; + apiMarket?.reserves?.[reserve?.asset?.toLowerCase()] ?? {}; return { address: reserve.asset, @@ -90,6 +90,7 @@ const loadMarketsData = async ( const mergedMarket: TMarket = { marketId: marketId, + operator: libMarket.operator, engine: libMarket.engine, pool: libMarket.pool, protocolDataProvider: libMarket.protocolDataProvider, diff --git a/src/web3/index.ts b/src/web3/index.ts index cb232056..58f1aeeb 100644 --- a/src/web3/index.ts +++ b/src/web3/index.ts @@ -2,7 +2,7 @@ import { defaultWagmiConfig } from "@web3modal/wagmi/react/config"; import { createWalletClient, http, createPublicClient } from "viem"; -import { avalanche, sonic, plasma } from "viem/chains"; +import { mainnet, avalanche, sonic, plasma } from "viem/chains"; import { deployments } from "@stabilitydao/stability"; @@ -94,7 +94,7 @@ const metadata = { }; const wagmiConfig = defaultWagmiConfig({ - chains: [sonic, avalanche, plasma], + chains: [mainnet, sonic, avalanche, plasma], projectId: walletConnectProjectId, metadata, }); @@ -104,6 +104,11 @@ const walletClient = createWalletClient({ transport: http(), }); +const ethereumClient = createPublicClient({ + chain: mainnet, + transport: http("https://ethereum.publicnode.com"), +}); + const sonicClient = createPublicClient({ chain: sonic, transport: http("https://rpc.soniclabs.com"), @@ -120,6 +125,7 @@ const plasmaClient = createPublicClient({ }); const web3clients = { + "1": ethereumClient, "146": sonicClient, "43114": avalancheClient, "9745": plasmaClient, diff --git a/yarn.lock b/yarn.lock index 64d75a24..5ae2743c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2013,10 +2013,10 @@ resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2" integrity sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA== -"@stabilitydao/stability@=0.51.2": - version "0.51.2" - resolved "https://registry.yarnpkg.com/@stabilitydao/stability/-/stability-0.51.2.tgz#50b479d717f52194d260194121d8c7ac47111158" - integrity sha512-q0Hd7Hvl7k0waFsIaNNzeLX0YGROtSz811pxRYFTma/kOipyUyagZJrb3Bf51lFK40IBr3RV0nkYIrwG8Z2V3w== +"@stabilitydao/stability@=0.57.2": + version "0.57.2" + resolved "https://registry.yarnpkg.com/@stabilitydao/stability/-/stability-0.57.2.tgz#436a5bf99326c591ab29e36096d559e72f6f31f9" + integrity sha512-XxgNt9Vhviggmaeg1vlCtJ54HueheTUNgvB9pf4vbzUpij5SBCCHyQAGZ4M27mttfXtwClJ01ueJc1Skm5JSyA== "@stablelib/aead@^1.0.1": version "1.0.1"