diff --git a/.circleci/config.yml b/.circleci/config.yml index c62f120d8..78713ed48 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -70,7 +70,7 @@ commands: steps: - run: name: 'Install IPFS' - command: | + command: |- LATEST_VERSION=$(curl -sSL https://dist.ipfs.tech/go-ipfs/versions | tail -n 1) LATEST_VERSION_NUMBER=${LATEST_VERSION#*v} DOWNLOAD_URL="https://dist.ipfs.tech/go-ipfs/${LATEST_VERSION}/go-ipfs_${LATEST_VERSION}_linux-amd64.tar.gz" @@ -90,7 +90,7 @@ commands: - run: ipfs add --progress=true --pin=true --recursive "<< parameters.source-dir >>" - run: name: 'Save IPFS_CID' - command: | + command: |- export IPFS_CID=$(ipfs add --progress=false --pin=true --recursive --quieter "<< parameters.source-dir >>") echo $IPFS_CID echo "export IPFS_CID=$IPFS_CID" >> $BASH_ENV @@ -99,12 +99,12 @@ commands: command: curl --silent --request POST --user "$IPFS_USER:$IPFS_PASS" "<< parameters.ipfs-api >>/pin/add?recursive=true&progress=true&arg=$IPFS_CID" - run: name: 'Publish IPFS_CID to IPNS key << parameters.ipns-key >>' - command: | + command: |- curl --silent --request POST --user "$IPFS_USER:$IPFS_PASS" "<< parameters.ipfs-api >>/name/publish?key=<< parameters.ipns-key >>&arg=$IPFS_CID" | tee /tmp/name-publish-$IPFS_CID.log cat /tmp/name-publish-$IPFS_CID.log | jq - run: name: 'Pin to Synthetix IPFS cluster' - command: | + command: |- curl --silent --request POST --user "$IPFS_USER:$IPFS_PASS" "<< parameters.ipfs-cluster-api >>/pin/add?arg=$IPFS_CID" | tee /tmp/pin-add-$IPFS_CID.log cat /tmp/pin-add-$IPFS_CID.log | jq @@ -165,14 +165,13 @@ jobs: command: wget --retry-connrefused --waitretry=20 --read-timeout=20 --timeout=15 -t 10 http://localhost:3000 - run: + name: 'Run tests' working_directory: liquidity/cypress - command: | + command: |- echo "0" > /tmp/cypress_exit_code - export NODE_ENV=test export CYPRESS_INFURA_KEY=$INFURA_KEY - - circleci tests glob 'cypress/e2e/**/*.e2e.js' | circleci tests run --verbose --split-by=timings --command="xargs yarn cypress run --e2e --spec" || echo $? > /tmp/cypress_exit_code + yarn cypress run --e2e || echo $? > /tmp/cypress_exit_code - save_cache: key: *anvil-fork-cache diff --git a/liquidity/components/PoolBox/PoolBox.tsx b/liquidity/components/PoolBox/PoolBox.tsx deleted file mode 100644 index 25d314609..000000000 --- a/liquidity/components/PoolBox/PoolBox.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Box, Button, Flex, Heading, Skeleton, Text } from '@chakra-ui/react'; -import { BorderBox } from '@snx-v3/BorderBox'; -import { FC } from 'react'; -import { usePoolData } from '@snx-v3/usePoolData'; -import { calculatePoolPerformanceSevenDays } from '@snx-v3/calculations'; -import { generatePath, Link, useLocation } from 'react-router-dom'; -import { Wei } from '@synthetixio/wei'; -import { useParams } from '@snx-v3/useParams'; -import { usePool } from '@snx-v3/usePools'; - -const PoolBoxUi: FC<{ - poolName?: string; - poolId?: string; - sevenDaysPoolPerformanceGrowth?: Wei; -}> = ({ poolName, poolId }) => { - const location = useLocation(); - return ( - - {poolId ? ( - - - {poolName} - - Pool #{poolId} - - - - ) : ( - - - - - - - - )} - {poolId && ( - - )} - - ); -}; - -export const PoolBox = () => { - const { poolId } = useParams(); - - const { data: poolData } = usePoolData(poolId); - - const sevenDaysPoolPerformance = calculatePoolPerformanceSevenDays(poolData); - - const { data: pool } = usePool(poolId); - - return ( - - ); -}; diff --git a/liquidity/components/PoolBox/index.ts b/liquidity/components/PoolBox/index.ts deleted file mode 100644 index 26b80c37c..000000000 --- a/liquidity/components/PoolBox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './PoolBox'; diff --git a/liquidity/components/PoolBox/package.json b/liquidity/components/PoolBox/package.json deleted file mode 100644 index d0feaa513..000000000 --- a/liquidity/components/PoolBox/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "@snx-v3/PoolBox", - "private": true, - "main": "index.ts", - "version": "0.0.1", - "dependencies": { - "@chakra-ui/react": "^2.8.2", - "@snx-v3/BorderBox": "workspace:*", - "@snx-v3/calculations": "workspace:*", - "@snx-v3/useParams": "workspace:*", - "@snx-v3/usePoolData": "workspace:*", - "@snx-v3/usePools": "workspace:*", - "@synthetixio/wei": "^2.74.4", - "react": "^18.2.0", - "react-router-dom": "^6.18.0" - } -} diff --git a/liquidity/components/PoolSelector/PoolItem.tsx b/liquidity/components/PoolSelector/PoolItem.tsx deleted file mode 100644 index 5e1abdaf3..000000000 --- a/liquidity/components/PoolSelector/PoolItem.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ExternalLinkIcon, InfoIcon } from '@chakra-ui/icons'; -import { Box, Flex, Heading, Link, Radio, Text } from '@chakra-ui/react'; -import { generatePath, Link as NavLink } from 'react-router-dom'; -import { Tooltip } from '@snx-v3/Tooltip'; -import { useSystemToken } from '@snx-v3/useSystemToken'; - -export function PoolItem({ name, value }: { name: string; value: string }) { - const { data: systemToken } = useSystemToken(); - return ( - - - - - - - {name} - - - Pool #{value}{' '} - {value == '0' ? ( - - - - ) : ( - - - - )} - - - - ); -} diff --git a/liquidity/components/PoolSelector/PoolSelector.tsx b/liquidity/components/PoolSelector/PoolSelector.tsx deleted file mode 100644 index 63630f776..000000000 --- a/liquidity/components/PoolSelector/PoolSelector.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Box, Button, RadioGroup } from '@chakra-ui/react'; -import { usePools } from '@snx-v3/usePools'; -import { PoolItem } from './PoolItem'; -import { useState, useEffect } from 'react'; - -export function PoolSelector({ - poolId, - setPoolId, -}: { - poolId: string; - setPoolId: (poolId: string) => void; -}) { - const { data: pools = [] } = usePools(); - const [value, setValue] = useState(poolId); - useEffect(() => { - setValue(poolId); - }, [poolId]); - return ( - <> - - - - {pools.map(({ id, name }) => ( - - ))} - - - - - ); -} diff --git a/liquidity/components/PoolSelector/index.ts b/liquidity/components/PoolSelector/index.ts deleted file mode 100644 index 9d47e443b..000000000 --- a/liquidity/components/PoolSelector/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './PoolSelector'; -export * from './PoolItem'; diff --git a/liquidity/components/PoolSelector/package.json b/liquidity/components/PoolSelector/package.json deleted file mode 100644 index ac3a40047..000000000 --- a/liquidity/components/PoolSelector/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "@snx-v3/PoolSelector", - "private": true, - "main": "index.ts", - "version": "0.0.1", - "dependencies": { - "@chakra-ui/icons": "^2.1.1", - "@chakra-ui/react": "^2.8.2", - "@snx-v3/Tooltip": "workspace:*", - "@snx-v3/usePools": "workspace:*", - "@snx-v3/useSystemToken": "workspace:*", - "react": "^18.2.0", - "react-router-dom": "^6.18.0" - } -} diff --git a/liquidity/cypress/cypress.config.js b/liquidity/cypress/cypress.config.js index 734e7a2e2..96d6cd58e 100644 --- a/liquidity/cypress/cypress.config.js +++ b/liquidity/cypress/cypress.config.js @@ -48,7 +48,7 @@ module.exports = defineConfig({ openMode: 0, }, - defaultCommandTimeout: 300_000, + defaultCommandTimeout: 30_000, execTimeout: 60_000, taskTimeout: 60_000, }, diff --git a/liquidity/cypress/cypress/e2e/1-main/Create_Account.e2e.js b/liquidity/cypress/cypress/e2e/1-main/Create_Account.e2e.js index 51fdfbb0a..fd5e589b3 100644 --- a/liquidity/cypress/cypress/e2e/1-main/Create_Account.e2e.js +++ b/liquidity/cypress/cypress/e2e/1-main/Create_Account.e2e.js @@ -28,7 +28,11 @@ describe('Create Account', () => { cy.get('[data-cy="wallet button"]').click(); cy.get('[data-cy="accounts list"]').children().should('have.length', 1); - cy.contains('[data-cy="create new account button"]', 'Create Account').should('exist'); + cy.wait(1000); + cy.contains('[data-cy="create new account button"]', 'Create Account') + .should('exist') + .and('be.visible') + .and('be.enabled'); cy.get('[data-cy="create new account button"]').click(); cy.get('[data-cy="accounts list"]').children().should('have.length', 2); diff --git a/liquidity/cypress/cypress/e2e/1-main/Manage_SNX_Position_Borrow.e2e.js b/liquidity/cypress/cypress/e2e/1-main/Manage_SNX_Position_Borrow.e2e.js index f034cd87e..5c17099a9 100644 --- a/liquidity/cypress/cypress/e2e/1-main/Manage_SNX_Position_Borrow.e2e.js +++ b/liquidity/cypress/cypress/e2e/1-main/Manage_SNX_Position_Borrow.e2e.js @@ -53,6 +53,8 @@ describe('Manage SNX Position - Borrow', () => { cy.get('[data-cy="borrow confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="borrow confirm button"]').click(); - cy.contains('[data-status="info"]', 'Debt successfully Updated').should('exist'); + cy.contains('[data-status="success"]', 'Debt successfully Updated', { + timeout: 180_000, + }).should('exist'); }); }); diff --git a/liquidity/cypress/cypress/e2e/1-main/Manage_SNX_Position_Deposit.e2e.js b/liquidity/cypress/cypress/e2e/1-main/Manage_SNX_Position_Deposit.e2e.js index 420379537..bba4a607a 100644 --- a/liquidity/cypress/cypress/e2e/1-main/Manage_SNX_Position_Deposit.e2e.js +++ b/liquidity/cypress/cypress/e2e/1-main/Manage_SNX_Position_Deposit.e2e.js @@ -43,9 +43,8 @@ describe('Manage SNX Position - Deposit', () => { cy.get('[data-cy="deposit confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="deposit confirm button"]').click(); - cy.contains( - '[data-status="success"]', - 'Your locked collateral amount has been updated.' - ).should('exist'); + cy.contains('[data-status="success"]', 'Your locked collateral amount has been updated.', { + timeout: 180_000, + }).should('exist'); }); }); diff --git a/liquidity/cypress/cypress/e2e/42161-main/Create_Account.e2e.js b/liquidity/cypress/cypress/e2e/42161-main/Create_Account.e2e.js index 14917b42d..05b53e707 100644 --- a/liquidity/cypress/cypress/e2e/42161-main/Create_Account.e2e.js +++ b/liquidity/cypress/cypress/e2e/42161-main/Create_Account.e2e.js @@ -28,7 +28,10 @@ describe('Create Account', () => { cy.get('[data-cy="wallet button"]').click(); cy.get('[data-cy="accounts list"]').children().should('have.length', 1); - cy.contains('[data-cy="create new account button"]', 'Create Account').should('exist'); + cy.contains('[data-cy="create new account button"]', 'Create Account') + .should('exist') + .and('be.visible') + .and('be.enabled'); cy.get('[data-cy="create new account button"]').click(); cy.get('[data-cy="accounts list"]').children().should('have.length', 2); diff --git a/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Borrow.e2e.js b/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Borrow.e2e.js index c35faa742..50a8a6c14 100644 --- a/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Borrow.e2e.js +++ b/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Borrow.e2e.js @@ -54,6 +54,8 @@ describe('Manage WETH Position - Borrow', () => { cy.get('[data-cy="claim confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="claim confirm button"]').click(); - cy.contains('[data-status="info"]', 'Debt successfully Updated').should('exist'); + cy.contains('[data-status="success"]', 'Debt successfully Updated', { + timeout: 180_000, + }).should('exist'); }); }); diff --git a/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Deposit.e2e.js b/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Deposit.e2e.js index 8a045e5c8..d69cb3511 100644 --- a/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Deposit.e2e.js +++ b/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Deposit.e2e.js @@ -49,9 +49,8 @@ describe('Manage WETH Position - Deposit', () => { cy.get('[data-cy="deposit confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="deposit confirm button"]').click(); - cy.contains( - '[data-status="success"]', - 'Your locked collateral amount has been updated.' - ).should('exist'); + cy.contains('[data-status="success"]', 'Your locked collateral amount has been updated.', { + timeout: 180_000, + }).should('exist'); }); }); diff --git a/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Repay.e2e.js b/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Repay.e2e.js index 51521ee7d..50738592e 100644 --- a/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Repay.e2e.js +++ b/liquidity/cypress/cypress/e2e/42161-main/Manage_WETH_Position_Repay.e2e.js @@ -49,6 +49,9 @@ describe('Manage WETH Position - Repay', () => { cy.get('[data-cy="repay confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="repay confirm button"]').click(); cy.contains('[data-status="success"]', 'Your debt has been repaid.').should('exist'); - cy.contains('[data-status="info"]', 'Debt successfully Updated').should('exist'); + + cy.contains('[data-status="success"]', 'Debt successfully Updated', { + timeout: 180_000, + }).should('exist'); }); }); diff --git a/liquidity/cypress/cypress/e2e/8453-andromeda/Create_Account.e2e.js b/liquidity/cypress/cypress/e2e/8453-andromeda/Create_Account.e2e.js index d47edafcb..5fcea2c39 100644 --- a/liquidity/cypress/cypress/e2e/8453-andromeda/Create_Account.e2e.js +++ b/liquidity/cypress/cypress/e2e/8453-andromeda/Create_Account.e2e.js @@ -28,7 +28,10 @@ describe('Create Account', () => { cy.get('[data-cy="wallet button"]').click(); cy.get('[data-cy="accounts list"]').children().should('have.length', 1); - cy.contains('[data-cy="create new account button"]', 'Create Account').should('exist'); + cy.contains('[data-cy="create new account button"]', 'Create Account') + .should('exist') + .and('be.visible') + .and('be.enabled'); cy.get('[data-cy="create new account button"]').click(); cy.get('[data-cy="accounts list"]').children().should('have.length', 2); diff --git a/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_Static_AaveUSDC_Position_Deposit.e2e.js b/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_Static_AaveUSDC_Position_Deposit.e2e.js index 7832f200f..ce5188a8f 100644 --- a/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_Static_AaveUSDC_Position_Deposit.e2e.js +++ b/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_Static_AaveUSDC_Position_Deposit.e2e.js @@ -46,9 +46,8 @@ describe('Manage Static AaveUSDC Position - Deposit', () => { cy.get('[data-cy="deposit confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="deposit confirm button"]').click(); - cy.contains( - '[data-status="success"]', - 'Your locked collateral amount has been updated.' - ).should('exist'); + cy.contains('[data-status="success"]', 'Your locked collateral amount has been updated.', { + timeout: 180_000, + }).should('exist'); }); }); diff --git a/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_USDC_Position_Deposit.e2e.js b/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_USDC_Position_Deposit.e2e.js index e300f2e63..d5baf42ff 100644 --- a/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_USDC_Position_Deposit.e2e.js +++ b/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_USDC_Position_Deposit.e2e.js @@ -44,9 +44,8 @@ describe('Manage USDC Position - Deposit', () => { cy.get('[data-cy="deposit confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="deposit confirm button"]').click(); - cy.contains( - '[data-status="success"]', - 'Your locked collateral amount has been updated.' - ).should('exist'); + cy.contains('[data-status="success"]', 'Your locked collateral amount has been updated.', { + timeout: 180_000, + }).should('exist'); }); }); diff --git a/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_USDC_Position_Unlock.e2e.js b/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_USDC_Position_Unlock.e2e.js index fb24a1554..3c5492a82 100644 --- a/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_USDC_Position_Unlock.e2e.js +++ b/liquidity/cypress/cypress/e2e/8453-andromeda/Manage_USDC_Position_Unlock.e2e.js @@ -47,9 +47,8 @@ describe('should be able to unlock USDC collateral after depositing', () => { cy.get('[data-cy="undelegate confirm button"]').should('include.text', 'Execute Transaction'); cy.get('[data-cy="undelegate confirm button"]').click(); - cy.contains( - '[data-status="success"]', - 'Your locked collateral amount has been updated.' - ).should('exist'); + cy.contains('[data-status="success"]', 'Your locked collateral amount has been updated.', { + timeout: 180_000, + }).should('exist'); }); }); diff --git a/liquidity/lib/usePoolsList/usePoolsList.ts b/liquidity/lib/usePoolsList/usePoolsList.ts index 9aed0d416..d042257d1 100644 --- a/liquidity/lib/usePoolsList/usePoolsList.ts +++ b/liquidity/lib/usePoolsList/usePoolsList.ts @@ -25,7 +25,7 @@ export function usePoolsList() { }); } -export function usePool(networkId: number, poolId: string) { +export function usePool(networkId?: number, poolId?: string) { const { data, isPending } = usePoolsList(); // TODO: In the future if we have multiple pools per network filter by poolId also @@ -33,7 +33,7 @@ export function usePool(networkId: number, poolId: string) { data: data?.synthetixPools.find( (p) => p?.network?.id === networkId && p?.poolInfo?.[0]?.pool?.id === poolId ), - isLoading: isPending, + isPending, }; } diff --git a/liquidity/ui/src/components/ClosePosition/ClosePosition.tsx b/liquidity/ui/src/components/ClosePosition/ClosePosition.tsx index 4b9ad6632..962a07572 100644 --- a/liquidity/ui/src/components/ClosePosition/ClosePosition.tsx +++ b/liquidity/ui/src/components/ClosePosition/ClosePosition.tsx @@ -243,7 +243,6 @@ export const ClosePosition = ({ onClose={onClose} collateralType={collateralType} liquidityPosition={liquidityPosition} - poolId={params.poolId} /> ) : null} {transactionStep && ClosePositionDeployment ? ( diff --git a/liquidity/ui/src/components/ClosePosition/ClosePositionTransactions.tsx b/liquidity/ui/src/components/ClosePosition/ClosePositionTransactions.tsx index da2050bd5..a8917bfb2 100644 --- a/liquidity/ui/src/components/ClosePosition/ClosePositionTransactions.tsx +++ b/liquidity/ui/src/components/ClosePosition/ClosePositionTransactions.tsx @@ -25,14 +25,15 @@ import { useUndelegateBaseAndromeda } from '@snx-v3/useUndelegateBaseAndromeda'; import { useQueryClient } from '@tanstack/react-query'; import { FC, ReactNode, useCallback, useContext, useEffect, useState } from 'react'; import { LiquidityPositionUpdated } from '../Manage/LiquidityPositionUpdated'; +import { useParams } from '@snx-v3/useParams'; export const ClosePositionTransactions: FC<{ onClose: () => void; onBack: () => void; - poolId: string | undefined; - liquidityPosition: LiquidityPosition | undefined; + liquidityPosition?: LiquidityPosition; collateralType: CollateralType; -}> = ({ collateralType, liquidityPosition, poolId, onClose, onBack }) => { +}> = ({ collateralType, liquidityPosition, onClose, onBack }) => { + const params = useParams(); const [steps, setSteps] = useState< { title: ReactNode; @@ -76,7 +77,7 @@ export const ClosePositionTransactions: FC<{ }); const { exec: execRepay } = useRepay({ accountId: liquidityPosition?.accountId, - poolId: poolId, + poolId: params.poolId, collateralTypeAddress: collateralType?.tokenAddress, debtChange: liquidityPosition?.debt.mul(-1) || ZEROWEI, availableUSDCollateral, @@ -84,7 +85,7 @@ export const ClosePositionTransactions: FC<{ }); const { exec: undelegate } = useUndelegate({ accountId: liquidityPosition?.accountId, - poolId: poolId, + poolId: params.poolId, collateralTypeAddress: liquidityPosition?.tokenAddress, collateralChange: liquidityPosition?.collateralAmount.mul(-1) || ZEROWEI, currentCollateral: liquidityPosition?.collateralAmount || ZEROWEI, @@ -109,7 +110,7 @@ export const ClosePositionTransactions: FC<{ const { exec: undelegateBaseAndromeda } = useUndelegateBaseAndromeda({ accountId: liquidityPosition?.accountId, - poolId: poolId, + poolId: params.poolId, collateralTypeAddress: liquidityPosition?.tokenAddress, collateralChange: liquidityPosition?.collateralAmount.mul(-1) || ZEROWEI, currentCollateral: liquidityPosition?.collateralAmount || ZEROWEI, @@ -119,7 +120,7 @@ export const ClosePositionTransactions: FC<{ //claim const { exec: execBorrow } = useBorrow({ accountId: liquidityPosition?.accountId, - poolId: poolId, + poolId: params.poolId, collateralTypeAddress: collateralType?.tokenAddress, debtChange: liquidityPosition?.debt.mul(-1) || ZEROWEI, }); diff --git a/liquidity/ui/src/components/Manage/LiquidityPositionUpdated.tsx b/liquidity/ui/src/components/Manage/LiquidityPositionUpdated.tsx index 0ae6cdae6..fa2999f4b 100644 --- a/liquidity/ui/src/components/Manage/LiquidityPositionUpdated.tsx +++ b/liquidity/ui/src/components/Manage/LiquidityPositionUpdated.tsx @@ -30,7 +30,7 @@ export function LiquidityPositionUpdated({ {subline} )} - + diff --git a/liquidity/ui/src/components/Manage/ManageLoading.tsx b/liquidity/ui/src/components/Manage/ManageLoading.tsx index 7a0295d42..f8db8f629 100644 --- a/liquidity/ui/src/components/Manage/ManageLoading.tsx +++ b/liquidity/ui/src/components/Manage/ManageLoading.tsx @@ -1,16 +1,12 @@ import { Box, Divider, Flex, Skeleton } from '@chakra-ui/react'; -import { FC } from 'react'; -import { PositionTitle } from './PositionTitle'; import { BorderBox } from '@snx-v3/BorderBox'; +import { PositionTitle } from './PositionTitle'; -export const ManageLoading: FC<{ - collateralSymbol?: string; - poolName?: string; -}> = ({ collateralSymbol, poolName }) => { +export function ManageLoading({ collateralSymbol }: { collateralSymbol?: string }) { return ( - + @@ -54,4 +50,4 @@ export const ManageLoading: FC<{ ); -}; +} diff --git a/liquidity/ui/src/components/Manage/NoPosition.tsx b/liquidity/ui/src/components/Manage/NoPosition.tsx index b2d49f0cf..869b59412 100644 --- a/liquidity/ui/src/components/Manage/NoPosition.tsx +++ b/liquidity/ui/src/components/Manage/NoPosition.tsx @@ -9,7 +9,7 @@ import { useNetwork } from '@snx-v3/useBlockchain'; import { useCollateralType } from '@snx-v3/useCollateralTypes'; import { LiquidityPosition } from '@snx-v3/useLiquidityPosition'; import { useParams } from '@snx-v3/useParams'; -import { FC, useContext, useState } from 'react'; +import { useContext, useState } from 'react'; import { CRatioBar } from '../CRatioBar/CRatioBar'; import { InitialDeposit } from '../InitialDeposit'; import { Rewards } from '../Rewards'; @@ -18,10 +18,7 @@ import { DebtStats } from './DebtStats'; import { PnlStats } from './PnlStats'; import { PositionTitle } from './PositionTitle'; -export const NoPosition: FC<{ - poolName?: string; - liquidityPosition?: LiquidityPosition; -}> = ({ liquidityPosition, poolName }) => { +export function NoPosition({ liquidityPosition }: { liquidityPosition?: LiquidityPosition }) { const { collateralSymbol, accountId } = useParams(); const { data: collateralType } = useCollateralType(collateralSymbol); @@ -34,7 +31,7 @@ export const NoPosition: FC<{ return ( - + @@ -108,4 +105,4 @@ export const NoPosition: FC<{ ); -}; +} diff --git a/liquidity/ui/src/components/Manage/PositionTitle.tsx b/liquidity/ui/src/components/Manage/PositionTitle.tsx index 7bb82ec78..2d400d0ae 100644 --- a/liquidity/ui/src/components/Manage/PositionTitle.tsx +++ b/liquidity/ui/src/components/Manage/PositionTitle.tsx @@ -1,20 +1,27 @@ import { Flex, Heading, Text } from '@chakra-ui/react'; -import { FC } from 'react'; import { NetworkIcon, useNetwork } from '@snx-v3/useBlockchain'; +import { useCollateralType } from '@snx-v3/useCollateralTypes'; +import { useParams } from '@snx-v3/useParams'; +import { usePool } from '@snx-v3/usePoolsList'; import { useNavigate } from 'react-router-dom'; import { TokenIcon } from '../TokenIcon'; -import { useCollateralType } from '@snx-v3/useCollateralTypes'; -export const PositionTitle: FC<{ +export function PositionTitle({ + collateralSymbol, + isOpen, +}: { collateralSymbol?: string; - poolName?: string; - isOpen?: boolean; - poolId?: string; -}> = ({ collateralSymbol, poolName, isOpen, poolId }) => { - const { data: collateral } = useCollateralType(collateralSymbol); + isOpen: boolean; +}) { + const params = useParams(); const { network } = useNetwork(); + const { data: pool } = usePool(network?.id, String(params.poolId)); + + const poolName = pool?.poolInfo?.[0]?.pool?.name ?? ''; + const navigate = useNavigate(); + const { data: collateral } = useCollateralType(collateralSymbol); return ( @@ -52,9 +59,13 @@ export const PositionTitle: FC<{ display="flex" alignItems="center" _hover={{ cursor: 'pointer' }} - onClick={() => navigate(`/pools/${network?.id}/${poolId}`)} + onClick={ + params.poolId && network?.id + ? () => navigate(`/pools/${network?.id}/${params.poolId}`) + : undefined + } > - {poolName && {poolName}} + {poolName} ); -}; +} diff --git a/liquidity/ui/src/components/Pools/PoolHeader.tsx b/liquidity/ui/src/components/Pools/PoolHeader.tsx index 6cb7fec85..2ab77ae09 100644 --- a/liquidity/ui/src/components/Pools/PoolHeader.tsx +++ b/liquidity/ui/src/components/Pools/PoolHeader.tsx @@ -1,32 +1,39 @@ -import { Flex, Heading, Skeleton, FlexProps, Tag, Text } from '@chakra-ui/react'; -import { MAINNET, ARBITRUM, Network, NetworkIcon } from '@snx-v3/useBlockchain'; +import { Flex, Heading, Skeleton, Tag, Text } from '@chakra-ui/react'; +import { ARBITRUM, MAINNET, NetworkIcon, NETWORKS, useNetwork } from '@snx-v3/useBlockchain'; +import { useParams } from '@snx-v3/useParams'; +import { usePool } from '@snx-v3/usePoolsList'; -interface PoolHeaderProps extends FlexProps { - name?: string; - network: Network; -} +export function PoolHeader() { + const params = useParams(); + + const { network: connectedNetwork } = useNetwork(); + const networkId = params.networkId ? Number(params.networkId) : connectedNetwork?.id; + const { data: pool, isPending } = usePool(networkId, String(params.poolId)); + const network = NETWORKS.find((n) => n.id === networkId); + + const poolName = pool?.poolInfo?.[0]?.pool?.name ?? ''; + const networkName = network?.name ?? ''; -export const PoolHeader = ({ name, network, ...props }: PoolHeaderProps) => { return ( <> - - + + - {name ? name : 'Unknown Pool'} + {poolName ? poolName : 'Unknown Pool'} - {[MAINNET.id, ARBITRUM.id].includes(network?.id) && ( + {networkId === MAINNET.id || networkId === ARBITRUM.id ? ( Borrow Interest-Free - )} + ) : null} - {network?.name.charAt(0).toUpperCase() + network?.name.slice(1)} Network + {`${networkName.slice(0, 1).toUpperCase()}${networkName.slice(1)} Network`} ); -}; +} diff --git a/liquidity/ui/src/layouts/Default/Header.tsx b/liquidity/ui/src/layouts/Default/Header.tsx index d3eecd201..5fba88e2d 100644 --- a/liquidity/ui/src/layouts/Default/Header.tsx +++ b/liquidity/ui/src/layouts/Default/Header.tsx @@ -1,10 +1,10 @@ -import { Box, Container, Flex, Link, useDisclosure } from '@chakra-ui/react'; -import { NavLink as RouterLink, useLocation } from 'react-router-dom'; -import { NetworkController } from './NetworkController'; -import { useEffect } from 'react'; +import { Container, Flex, Link, useDisclosure } from '@chakra-ui/react'; import { Logo, LogoIcon } from '@snx-v3/icons'; -import { MigrateUSDButton } from '../../components/MigrateUSD/MigrateUSDButton'; import { MAINNET, SEPOLIA, useNetwork } from '@snx-v3/useBlockchain'; +import { useEffect } from 'react'; +import { NavLink as RouterLink, useLocation } from 'react-router-dom'; +import { MigrateUSDButton } from '../../components/MigrateUSD/MigrateUSDButton'; +import { NetworkController } from './NetworkController'; export default function Header() { const { network } = useNetwork(); @@ -16,85 +16,76 @@ export default function Header() { }, [location, onClose]); return ( - <> - - - + + + - - - - - Dashboard - - - Pools - - - - - - - - - {/* Hide balance */} - {/* */} - {network && [MAINNET.id, SEPOLIA.id].includes(network.id) ? ( - - ) : null} - - - - - + + + + + + + Dashboard + + + Pools + + + + {network && [MAINNET.id, SEPOLIA.id].includes(network.id) ? ( + + ) : null} + + + + ); } diff --git a/liquidity/ui/src/pages/Manage.tsx b/liquidity/ui/src/pages/Manage.tsx index 9651db63d..4b989daac 100644 --- a/liquidity/ui/src/pages/Manage.tsx +++ b/liquidity/ui/src/pages/Manage.tsx @@ -49,9 +49,9 @@ export const ManageUi: FC<{ liquidityPosition?: LiquidityPosition; network?: Network; collateralSymbol?: string; - poolName?: string; - poolId?: string; -}> = ({ collateralType, liquidityPosition, network, collateralSymbol, poolName, poolId }) => { +}> = ({ collateralType, liquidityPosition, network, collateralSymbol }) => { + const { poolId } = useParams(); + const [closePosition, setClosePosition] = useState(false); const { data: poolData } = usePool(Number(network?.id), String(poolId)); @@ -75,12 +75,7 @@ export const ManageUi: FC<{ mb="8px" gap={4} > - + {poolData && ( @@ -206,7 +201,7 @@ export const Manage = () => { ) : null} {params.accountId && isPendingLiquidityPosition ? ( - + ) : null} {params.accountId && @@ -220,8 +215,6 @@ export const Manage = () => { !isPendingLiquidityPosition && (hasPosition || hasAvailableCollateral) ? ( { - const { poolId, networkId } = useParams(); - - const { data: pool } = usePool(Number(networkId), String(poolId)); - const network = NETWORKS.find((n) => n.id === Number(networkId)); + const params = useParams(); - const { poolInfo } = pool || {}; + const { network: connectedNetwork } = useNetwork(); + const networkId = params.networkId ? Number(params.networkId) : connectedNetwork?.id; + const { data: pool, isPending } = usePool(networkId, String(params.poolId)); + const network = NETWORKS.find((n) => n.id === networkId); - const title = poolInfo ? `Pool #${poolInfo[0].pool.id} / ${poolInfo[0].pool.name}` : 'Pool'; + const title = pool + ? `Pool #${pool.poolInfo?.[0]?.pool?.id} / ${pool.poolInfo?.[0]?.pool?.name}` + : 'Pool'; return ( <> @@ -24,13 +27,33 @@ export const Pool = () => { <> - - - - - - - + {!isPending && !pool ? ( + + Not found + + + Return to Home + + + ) : null} + {!isPending && pool && network ? ( + <> + + + + + + + + + ) : null} ); diff --git a/yarn.lock b/yarn.lock index faa98ddfc..418d559d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4823,36 +4823,6 @@ __metadata: languageName: unknown linkType: soft -"@snx-v3/PoolBox@workspace:liquidity/components/PoolBox": - version: 0.0.0-use.local - resolution: "@snx-v3/PoolBox@workspace:liquidity/components/PoolBox" - dependencies: - "@chakra-ui/react": "npm:^2.8.2" - "@snx-v3/BorderBox": "workspace:*" - "@snx-v3/calculations": "workspace:*" - "@snx-v3/useParams": "workspace:*" - "@snx-v3/usePoolData": "workspace:*" - "@snx-v3/usePools": "workspace:*" - "@synthetixio/wei": "npm:^2.74.4" - react: "npm:^18.2.0" - react-router-dom: "npm:^6.18.0" - languageName: unknown - linkType: soft - -"@snx-v3/PoolSelector@workspace:liquidity/components/PoolSelector": - version: 0.0.0-use.local - resolution: "@snx-v3/PoolSelector@workspace:liquidity/components/PoolSelector" - dependencies: - "@chakra-ui/icons": "npm:^2.1.1" - "@chakra-ui/react": "npm:^2.8.2" - "@snx-v3/Tooltip": "workspace:*" - "@snx-v3/usePools": "workspace:*" - "@snx-v3/useSystemToken": "workspace:*" - react: "npm:^18.2.0" - react-router-dom: "npm:^6.18.0" - languageName: unknown - linkType: soft - "@snx-v3/RepayModal@workspace:*, @snx-v3/RepayModal@workspace:liquidity/components/RepayModal": version: 0.0.0-use.local resolution: "@snx-v3/RepayModal@workspace:liquidity/components/RepayModal"