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
Synthetixio · Dec 16, 2024 · 95cd542 · 95cd542
1 parent 01225c8
commit 95cd542
Show file tree

Hide file tree

Showing 53 changed files with 800 additions and 2,023 deletions.
diff --git 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) ? (
               <Amount
                 value={collateralChange}
-                suffix={` ${collateralType?.symbol} deposited and locked into ${poolName}.`}
+                suffix={` ${collateralType?.symbol} deposited and locked.`}
               />
             ) : (
               <>
@@ -450,15 +446,15 @@ export function DepositModal({
                       <Amount
                         prefix={`This will deposit and lock `}
                         value={collateralChange}
-                        suffix={` ${collateralType?.symbol} into ${poolName}.`}
+                        suffix={` ${collateralType?.symbol}.`}
                       />
                     ) : (
                       <>
                         <Text>
                           <Amount
                             prefix={`This will deposit and lock `}
                             value={availableCollateral}
-                            suffix={` ${collateralType?.symbol} into ${poolName}.`}
+                            suffix={` ${collateralType?.symbol}.`}
                           />
                         </Text>
                         <Text>
@@ -475,7 +471,7 @@ export function DepositModal({
                   <Amount
                     prefix={`This will deposit and lock `}
                     value={collateralChange}
-                    suffix={` ${collateralType?.symbol} into ${poolName}.`}
+                    suffix={` ${collateralType?.symbol}.`}
                   />
                 )}
               </>

diff --git 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 (
       <LiquidityPositionUpdated
@@ -472,7 +469,7 @@ export function StataDepositModal({
             <Amount
               prefix="This will deposit and lock "
               value={collateralChange}
-              suffix={` Static aUSDC into ${pool?.name}.`}
+              suffix={` Static aUSDC.`}
             />
           }
           status={{

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -66,6 +66,9 @@
         --onboard-wallet-button-border-radius: 10px;
         --w3o-border-color: transparent;
       }
+      html body {
+        background-color: var(--chakra-colors-navy-700);
+      }
     </style>
   </body>
 </html>
diff --git 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
@@ -37,16 +37,10 @@ export default function Header() {
           </Link>
           <Link
             ml={{ base: 2, md: 6 }}
-            href={`?${makeSearch({
-              page: 'dashboard',
-              accountId: params.accountId,
-            })}`}
+            href={`?${makeSearch({ page: 'dashboard', accountId: params.accountId })}`}
             onClick={(e) => {
               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() {
           </Link>
           <Link
             ml={{ base: 2, md: 2.5 }}
-            href={`?${makeSearch({ page: 'pools', accountId: params.accountId })}`}
+            href={`?${makeSearch({ accountId: params.accountId })}`}
             onClick={(e) => {
               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
           </Link>
         </Flex>
         <Flex gap={3} flexWrap="wrap-reverse" justifyContent="center" alignItems="center">

diff --git 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 <Settings />;
+  }
+  if (params.page === 'position') {
+    return <Manage />;
+  }
+  if (params.page === 'dashboard') {
+    return <Dashboard />;
+  }
+  return <Home />;
+}
 
+export function Router() {
   return (
     <Suspense fallback={<Spinner />}>
       <Box
@@ -26,12 +36,7 @@ export function Router() {
         <Flex flex="1" flexDirection="column">
           <Header />
           <Container display="flex" flexDir="column" maxW="1236px" flex="1">
-            {params.page === 'settings' ? <Settings /> : null}
-            {params.page === 'position' ? <Manage /> : null}
-            {params.page === 'pool' ? <Pool /> : null}
-            {params.page === 'pools' ? <Pools /> : null}
-            {params.page === 'dashboard' ? <Dashboard /> : null}
-            {params.page === 'home' || !params.page ? <Home /> : null}
+            <Content />
           </Container>
           <Footer />
         </Flex>

diff --git a/liquidity/ui/src/components/Manage/DebtStats.tsx b/liquidity/ui/src/components/Manage/DebtStats.tsx
@@ -6,7 +6,7 @@ import { useLiquidityPosition } from '@snx-v3/useLiquidityPosition';
 import { type PositionPageSchemaType, useParams } from '@snx-v3/useParams';
 import { type Wei } from '@synthetixio/wei';
 import { ChangeStat } from '../ChangeStat/ChangeStat';
-import { DebtAmount } from '../Positions/PositionsTable/DebtAmount';
+import { DebtAmount } from '../Positions/DebtAmount';
 
 export function DebtStats({ newDebt, hasChanges }: { newDebt: Wei; hasChanges: boolean }) {
   const [params] = useParams<PositionPageSchemaType>();