From 95cd5421080a408d8d64c9f5f7c1f7f5d67eddb2 Mon Sep 17 00:00:00 2001 From: Noisekit <28145325+noisekit@users.noreply.github.com> Date: Tue, 17 Dec 2024 01:26:21 +1100 Subject: [PATCH] One Pool (#107) * Nav Bar: Replace Pools by Vaults * Delete Pool Page * Home: remove Pools header * Match overscroll background color with header and footer * Manage: Remove Pool Name * Dashboard: fix loading state for Positions, Rewards and Synths * Home: remove Toros cards * Home: remove Pool/Owner column * Dashboard: remove Pool name and fix loading state for wallets without an account * Manage Position: change style of Network, total TVL, More Stats button * Flatten Pool components * Block with price updates --- .../components/DepositModal/DepositModal.tsx | 12 +- .../DepositModal/StataDepositModal.tsx | 5 +- .../components/DepositModal/package.json | 1 - .../cypress/e2e/1-main/SNX_Deposit.e2e.js | 2 +- .../e2e/42161-main/Claim_All_Rewards.e2e.js | 2 +- .../e2e/42161-main/Synths_Unwrapping.e2e.js | 2 +- .../e2e/42161-main/USDC_Deposit.e2e.js | 2 +- .../e2e/42161-main/WETH_Deposit.e2e.js | 2 +- .../e2e/8453-andromeda/USDC_Deposit.e2e.js | 2 +- liquidity/lib/formatters/number.ts | 6 + liquidity/lib/usePoolsList/package.json | 3 +- liquidity/lib/usePoolsList/usePoolsList.ts | 31 -- liquidity/ui/index.html | 3 + liquidity/ui/package.json | 5 - liquidity/ui/src/Header.tsx | 16 +- liquidity/ui/src/Router.tsx | 23 +- .../ui/src/components/Manage/DebtStats.tsx | 2 +- .../src/components/Manage/PositionTitle.tsx | 149 +++-- .../components/Pools/CollateralSection.tsx | 510 ------------------ .../Pools/PoolCards/BaseInfoCard.tsx | 45 -- .../components/Pools/PoolCards/PoolCard.tsx | 52 -- .../components/Pools/PoolCards/PoolRow.tsx | 313 ----------- .../Pools/PoolCards/TorosPoolCard.tsx | 183 ------- .../{PoolCards => }/PoolCardsLoading.tsx | 0 .../ui/src/components/Pools/PoolHeader.tsx | 39 -- liquidity/ui/src/components/Pools/PoolRow.tsx | 289 ++++++++++ .../ui/src/components/Pools/PoolsList.tsx | 190 +++---- .../Pools/{PoolCards => }/Specifics.tsx | 28 +- .../Pools/{PoolCards => }/auto-compound.svg | 0 .../{PoolCards => }/interest-free-loan.svg | 0 .../Pools/{PoolCards => }/yield-on-yield.svg | 0 .../{PositionsTable => }/DebtAmount.tsx | 0 .../{PositionsTable => }/PositionEmpty.tsx | 7 +- .../PositionNotConnected.tsx | 0 .../PositionTableHeader.tsx | 0 .../components/Positions/PositionsList.tsx | 147 +++-- .../{PositionsTable => }/PositionsRow.tsx | 6 +- .../Positions/PositionsRowLoading.tsx | 105 ++++ .../PositionsTable/PositionsRowLoading.tsx | 117 ---- .../PositionsTable/PositionsTable.tsx | 173 ------ .../{PositionsTable => }/TableDivider.tsx | 1 - .../ui/src/components/Rewards/Rewards.tsx | 2 +- .../src/components/Rewards/RewardsLoading.tsx | 62 +-- .../ui/src/components/Stats/StatsList.tsx | 6 +- liquidity/ui/src/components/Synths/Synths.tsx | 2 +- .../src/components/Synths/SynthsLoading.tsx | 36 +- liquidity/ui/src/pages/404.tsx | 30 -- liquidity/ui/src/pages/Dashboard.tsx | 1 + liquidity/ui/src/pages/Home.tsx | 8 + liquidity/ui/src/pages/Manage.tsx | 53 +- liquidity/ui/src/pages/Pool.tsx | 81 --- liquidity/ui/src/pages/Pools.tsx | 10 - yarn.lock | 59 +- 53 files changed, 800 insertions(+), 2023 deletions(-) delete mode 100644 liquidity/ui/src/components/Pools/CollateralSection.tsx delete mode 100644 liquidity/ui/src/components/Pools/PoolCards/BaseInfoCard.tsx delete mode 100644 liquidity/ui/src/components/Pools/PoolCards/PoolCard.tsx delete mode 100644 liquidity/ui/src/components/Pools/PoolCards/PoolRow.tsx delete mode 100644 liquidity/ui/src/components/Pools/PoolCards/TorosPoolCard.tsx rename liquidity/ui/src/components/Pools/{PoolCards => }/PoolCardsLoading.tsx (100%) delete mode 100644 liquidity/ui/src/components/Pools/PoolHeader.tsx create mode 100644 liquidity/ui/src/components/Pools/PoolRow.tsx rename liquidity/ui/src/components/Pools/{PoolCards => }/Specifics.tsx (57%) rename liquidity/ui/src/components/Pools/{PoolCards => }/auto-compound.svg (100%) rename liquidity/ui/src/components/Pools/{PoolCards => }/interest-free-loan.svg (100%) rename liquidity/ui/src/components/Pools/{PoolCards => }/yield-on-yield.svg (100%) rename liquidity/ui/src/components/Positions/{PositionsTable => }/DebtAmount.tsx (100%) rename liquidity/ui/src/components/Positions/{PositionsTable => }/PositionEmpty.tsx (75%) rename liquidity/ui/src/components/Positions/{PositionsTable => }/PositionNotConnected.tsx (100%) rename liquidity/ui/src/components/Positions/{PositionsTable => }/PositionTableHeader.tsx (100%) rename liquidity/ui/src/components/Positions/{PositionsTable => }/PositionsRow.tsx (98%) create mode 100644 liquidity/ui/src/components/Positions/PositionsRowLoading.tsx delete mode 100644 liquidity/ui/src/components/Positions/PositionsTable/PositionsRowLoading.tsx delete mode 100644 liquidity/ui/src/components/Positions/PositionsTable/PositionsTable.tsx rename liquidity/ui/src/components/Positions/{PositionsTable => }/TableDivider.tsx (91%) delete mode 100644 liquidity/ui/src/pages/404.tsx delete mode 100644 liquidity/ui/src/pages/Pool.tsx delete mode 100644 liquidity/ui/src/pages/Pools.tsx diff --git a/liquidity/components/DepositModal/DepositModal.tsx b/liquidity/components/DepositModal/DepositModal.tsx index 925a44e79..722881ba7 100644 --- a/liquidity/components/DepositModal/DepositModal.tsx +++ b/liquidity/components/DepositModal/DepositModal.tsx @@ -15,7 +15,6 @@ import { useDeposit } from '@snx-v3/useDeposit'; import { useDepositBaseAndromeda } from '@snx-v3/useDepositBaseAndromeda'; import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition'; import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams'; -import { usePool } from '@snx-v3/usePools'; import { useSpotMarketProxy } from '@snx-v3/useSpotMarketProxy'; import { useSynthToken } from '@snx-v3/useSynthToken'; import { useWrapEth } from '@snx-v3/useWrapEth'; @@ -121,8 +120,6 @@ export function DepositModal({ // TODO: Update logic on new account id - const { data: pool } = usePool(); - const errorParser = useContractErrorParser(); const [state, send] = useMachine(DepositMachine, { @@ -337,7 +334,6 @@ export function DepositModal({ txSummary.currentDebt, ]); - const poolName = pool?.name || ''; const symbol = collateralType?.displaySymbol; const isProcessing = @@ -440,7 +436,7 @@ export function DepositModal({ {state.matches(State.success) ? ( ) : ( <> @@ -450,7 +446,7 @@ export function DepositModal({ ) : ( <> @@ -458,7 +454,7 @@ export function DepositModal({ @@ -475,7 +471,7 @@ export function DepositModal({ )} diff --git a/liquidity/components/DepositModal/StataDepositModal.tsx b/liquidity/components/DepositModal/StataDepositModal.tsx index 2ddcc09aa..b79b90645 100644 --- a/liquidity/components/DepositModal/StataDepositModal.tsx +++ b/liquidity/components/DepositModal/StataDepositModal.tsx @@ -13,7 +13,6 @@ import { useConvertStataUSDC } from '@snx-v3/useConvertStataUSDC'; import { useDepositBaseAndromeda } from '@snx-v3/useDepositBaseAndromeda'; import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition'; import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams'; -import { usePool } from '@snx-v3/usePools'; import { useSpotMarketProxy } from '@snx-v3/useSpotMarketProxy'; import { useStaticAaveUSDC } from '@snx-v3/useStaticAaveUSDC'; import { useStaticAaveUSDCRate } from '@snx-v3/useStaticAaveUSDCRate'; @@ -370,8 +369,6 @@ export function StataDepositModal({ state.matches(State.deposit) || state.matches(State.wrap); - const { data: pool } = usePool(); - if (state.matches(State.success)) { return ( } status={{ diff --git a/liquidity/components/DepositModal/package.json b/liquidity/components/DepositModal/package.json index 7144d86f8..eecdb1224 100644 --- a/liquidity/components/DepositModal/package.json +++ b/liquidity/components/DepositModal/package.json @@ -22,7 +22,6 @@ "@snx-v3/useDepositBaseAndromeda": "workspace:*", "@snx-v3/useLiquidityPosition": "workspace:*", "@snx-v3/useParams": "workspace:*", - "@snx-v3/usePools": "workspace:*", "@snx-v3/useSpotMarketProxy": "workspace:*", "@snx-v3/useStaticAaveUSDC": "workspace:*", "@snx-v3/useStaticAaveUSDCRate": "workspace:*", diff --git a/liquidity/cypress/cypress/e2e/1-main/SNX_Deposit.e2e.js b/liquidity/cypress/cypress/e2e/1-main/SNX_Deposit.e2e.js index bd1e41bee..124511421 100644 --- a/liquidity/cypress/cypress/e2e/1-main/SNX_Deposit.e2e.js +++ b/liquidity/cypress/cypress/e2e/1-main/SNX_Deposit.e2e.js @@ -49,7 +49,7 @@ describe(__filename, () => { .should('exist') .and('include.text', 'Approve SNX transfer') .and('include.text', 'Deposit and Lock SNX') - .and('include.text', 'This will deposit and lock 101 SNX into Spartan Council Pool.'); + .and('include.text', 'This will deposit and lock 101 SNX.'); cy.get('[data-cy="deposit confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="deposit confirm button"]').click(); diff --git a/liquidity/cypress/cypress/e2e/42161-main/Claim_All_Rewards.e2e.js b/liquidity/cypress/cypress/e2e/42161-main/Claim_All_Rewards.e2e.js index b9c8869f9..90814c8be 100644 --- a/liquidity/cypress/cypress/e2e/42161-main/Claim_All_Rewards.e2e.js +++ b/liquidity/cypress/cypress/e2e/42161-main/Claim_All_Rewards.e2e.js @@ -10,7 +10,7 @@ describe(__filename, () => { cy.task('startAnvil', { chainId: Cypress.env('chainId'), forkUrl: `https://arbitrum-mainnet.infura.io/v3/${Cypress.env('INFURA_KEY')}`, - block: '285187379', + block: '285379110', }).then(() => cy.log('Anvil started')); cy.on('window:before:load', (win) => { diff --git a/liquidity/cypress/cypress/e2e/42161-main/Synths_Unwrapping.e2e.js b/liquidity/cypress/cypress/e2e/42161-main/Synths_Unwrapping.e2e.js index 548f45685..1980c8a47 100644 --- a/liquidity/cypress/cypress/e2e/42161-main/Synths_Unwrapping.e2e.js +++ b/liquidity/cypress/cypress/e2e/42161-main/Synths_Unwrapping.e2e.js @@ -10,7 +10,7 @@ describe(__filename, () => { cy.task('startAnvil', { chainId: Cypress.env('chainId'), forkUrl: `https://arbitrum-mainnet.infura.io/v3/${Cypress.env('INFURA_KEY')}`, - block: '284040698', + block: '285379110', }).then(() => cy.log('Anvil started')); cy.on('window:before:load', (win) => { diff --git a/liquidity/cypress/cypress/e2e/42161-main/USDC_Deposit.e2e.js b/liquidity/cypress/cypress/e2e/42161-main/USDC_Deposit.e2e.js index 5699eb7fa..42a28b80b 100644 --- a/liquidity/cypress/cypress/e2e/42161-main/USDC_Deposit.e2e.js +++ b/liquidity/cypress/cypress/e2e/42161-main/USDC_Deposit.e2e.js @@ -49,7 +49,7 @@ describe(__filename, () => { .and('include.text', 'Manage Collateral') .and('include.text', 'Approve USDC transfer') .and('include.text', 'Deposit and Lock USDC') - .and('include.text', 'This will deposit and lock 1 USDC into Spartan Council Pool.'); + .and('include.text', 'This will deposit and lock 1 USDC.'); cy.get('[data-cy="deposit confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="deposit confirm button"]').click(); diff --git a/liquidity/cypress/cypress/e2e/42161-main/WETH_Deposit.e2e.js b/liquidity/cypress/cypress/e2e/42161-main/WETH_Deposit.e2e.js index 4df14befa..62c6291b8 100644 --- a/liquidity/cypress/cypress/e2e/42161-main/WETH_Deposit.e2e.js +++ b/liquidity/cypress/cypress/e2e/42161-main/WETH_Deposit.e2e.js @@ -55,7 +55,7 @@ describe(__filename, () => { .and('include.text', 'Manage Collateral') .and('include.text', 'Approve WETH transfer') .and('include.text', 'Deposit and Lock WETH') - .and('include.text', 'This will deposit and lock 1 WETH into Spartan Council Pool.'); + .and('include.text', 'This will deposit and lock 1 WETH.'); cy.get('[data-cy="deposit confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="deposit confirm button"]').click(); diff --git a/liquidity/cypress/cypress/e2e/8453-andromeda/USDC_Deposit.e2e.js b/liquidity/cypress/cypress/e2e/8453-andromeda/USDC_Deposit.e2e.js index a3b643dc9..8cb122aba 100644 --- a/liquidity/cypress/cypress/e2e/8453-andromeda/USDC_Deposit.e2e.js +++ b/liquidity/cypress/cypress/e2e/8453-andromeda/USDC_Deposit.e2e.js @@ -50,7 +50,7 @@ describe(__filename, () => { .should('exist') .and('include.text', 'Approve USDC transfer') .and('include.text', 'Deposit and Lock USDC') - .and('include.text', 'This will deposit and lock 101 USDC into Spartan Council Pool.'); + .and('include.text', 'This will deposit and lock 101 USDC.'); cy.get('[data-cy="deposit confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="deposit confirm button"]').click(); diff --git a/liquidity/lib/formatters/number.ts b/liquidity/lib/formatters/number.ts index 88d76d1ee..8327c761e 100644 --- a/liquidity/lib/formatters/number.ts +++ b/liquidity/lib/formatters/number.ts @@ -29,3 +29,9 @@ export const formatPercent = (value: number, options?: Intl.NumberFormatOptions) ...options, }).format(Number(value)); }; + +export function formatApr(apr?: number) { + if (!apr) return '-'; + + return `${apr.toFixed(2)}%`; +} diff --git a/liquidity/lib/usePoolsList/package.json b/liquidity/lib/usePoolsList/package.json index a9e65fb0d..636fe15e0 100644 --- a/liquidity/lib/usePoolsList/package.json +++ b/liquidity/lib/usePoolsList/package.json @@ -7,7 +7,6 @@ "@snx-v3/constants": "workspace:*", "@snx-v3/useApr": "workspace:*", "@snx-v3/useBlockchain": "workspace:*", - "@tanstack/react-query": "^5.8.3", - "humanize-plus": "^1.8.2" + "@tanstack/react-query": "^5.8.3" } } diff --git a/liquidity/lib/usePoolsList/usePoolsList.ts b/liquidity/lib/usePoolsList/usePoolsList.ts index d7b33757a..cbeee7480 100644 --- a/liquidity/lib/usePoolsList/usePoolsList.ts +++ b/liquidity/lib/usePoolsList/usePoolsList.ts @@ -2,7 +2,6 @@ import { getSubgraphUrl, POOL_ID } from '@snx-v3/constants'; import { fetchApr } from '@snx-v3/useApr'; import { ARBITRUM, BASE_ANDROMEDA, MAINNET, NETWORKS } from '@snx-v3/useBlockchain'; import { useQuery } from '@tanstack/react-query'; -import { compactInteger } from 'humanize-plus'; export function usePoolsList() { return useQuery({ @@ -28,7 +27,6 @@ export function usePoolsList() { export function usePool(networkId?: number) { const { data, isPending } = usePoolsList(); - // TODO: In the future if we have multiple pools per network filter by poolId also return { data: data?.synthetixPools.find( (p) => p?.network?.id === networkId && p?.poolInfo?.[0]?.pool?.id === POOL_ID @@ -39,35 +37,6 @@ export function usePool(networkId?: number) { const supportedNetworks = [MAINNET.id, BASE_ANDROMEDA.id, ARBITRUM.id]; -export async function fetchTorosPool(address: string) { - return fetch('https://api-v2.dhedge.org/graphql', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - query: ` - query GetFund($address: String!) { - fund(address: $address) { - totalValue - apy { - monthly - weekly - } - } - }`, - variables: { address }, - }), - }) - .then((response) => response.json()) - .then(({ data }) => { - return { - tvl: compactInteger(data.fund.totalValue / 1e18, 1), - apy: data.fund.apy.weekly, - }; - }); -} - export const networksOffline = NETWORKS.filter( (n) => supportedNetworks.includes(n.id) && n.isSupported ).map((n) => n); diff --git a/liquidity/ui/index.html b/liquidity/ui/index.html index 4aa564983..42a662eef 100644 --- a/liquidity/ui/index.html +++ b/liquidity/ui/index.html @@ -66,6 +66,9 @@ --onboard-wallet-button-border-radius: 10px; --w3o-border-color: transparent; } + html body { + background-color: var(--chakra-colors-navy-700); + } diff --git a/liquidity/ui/package.json b/liquidity/ui/package.json index 0fc25e9a8..808b424bc 100644 --- a/liquidity/ui/package.json +++ b/liquidity/ui/package.json @@ -68,14 +68,12 @@ "@snx-v3/useOraclePrice": "workspace:*", "@snx-v3/useParams": "workspace:*", "@snx-v3/usePoolConfiguration": "workspace:*", - "@snx-v3/usePoolData": "workspace:*", "@snx-v3/usePoolsList": "workspace:*", "@snx-v3/usePythFeeds": "workspace:*", "@snx-v3/usePythVerifier": "workspace:*", "@snx-v3/useRates": "workspace:*", "@snx-v3/useRepay": "workspace:*", "@snx-v3/useRewards": "workspace:*", - "@snx-v3/useRewardsDistributors": "workspace:*", "@snx-v3/useStaticAaveUSDC": "workspace:*", "@snx-v3/useStaticAaveUSDCRate": "workspace:*", "@snx-v3/useSynthBalances": "workspace:*", @@ -111,11 +109,9 @@ "debug": "^4.3.7", "ethers": "^5.7.2", "framer-motion": "^10.16.5", - "humanize-plus": "^1.8.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-helmet": "^6.1.0", - "react-i18next": "^13.4.1", "react-router-dom": "^6.18.0" }, "devDependencies": { @@ -128,7 +124,6 @@ "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "@tanstack/react-query": "^5.8.3", "@types/debug": "^4", - "@types/humanize-plus": "^1", "@types/react": "^18.2.37", "@types/react-dom": "^18.2.37", "@types/react-helmet": "^6.1.9", diff --git a/liquidity/ui/src/Header.tsx b/liquidity/ui/src/Header.tsx index b62075292..ac9e80f3b 100644 --- a/liquidity/ui/src/Header.tsx +++ b/liquidity/ui/src/Header.tsx @@ -37,16 +37,10 @@ export default function Header() { { e.preventDefault(); - setParams({ - page: 'dashboard', - accountId: params.accountId, - }); + setParams({ page: 'dashboard', accountId: params.accountId }); }} fontWeight={700} fontSize="14px" @@ -61,10 +55,10 @@ export default function Header() { { e.preventDefault(); - setParams({ page: 'pools', accountId: params.accountId }); + setParams({ accountId: params.accountId }); }} fontWeight={700} fontSize="14px" @@ -75,7 +69,7 @@ export default function Header() { _hover={{ textDecoration: 'none' }} _activeLink={{ color: 'white' }} > - Pools + Vaults diff --git a/liquidity/ui/src/Router.tsx b/liquidity/ui/src/Router.tsx index 5d68241f9..7f50765a8 100644 --- a/liquidity/ui/src/Router.tsx +++ b/liquidity/ui/src/Router.tsx @@ -7,12 +7,22 @@ import { Settings } from './pages/Account/Settings'; import { Dashboard } from './pages/Dashboard'; import { Home } from './pages/Home'; import { Manage } from './pages/Manage'; -import { Pool } from './pages/Pool'; -import { Pools } from './pages/Pools'; -export function Router() { +function Content() { const [params] = useParams(); + if (params.page === 'settings') { + return ; + } + if (params.page === 'position') { + return ; + } + if (params.page === 'dashboard') { + return ; + } + return ; +} +export function Router() { return ( }>
- {params.page === 'settings' ? : null} - {params.page === 'position' ? : null} - {params.page === 'pool' ? : null} - {params.page === 'pools' ? : null} - {params.page === 'dashboard' ? : null} - {params.page === 'home' || !params.page ? : null} +