fix: reset token selections when changing chains on /add (#7561)

* fix: reset token selections when  changing chains on /add

* fix: tests

* fix: add e2e test

* fix: remove .only
This commit is contained in:
eddie 2023-11-13 15:10:44 -08:00 committed by GitHub
parent 2227a38276
commit a5034cb1c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 143 additions and 4 deletions

@ -16,6 +16,16 @@ describe('Add Liquidity', () => {
cy.contains('0.05% fee tier')
})
it('clears the token selection when chain changes', () => {
cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/ETH/500')
cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'UNI')
cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'ETH')
cy.get('[data-testid="chain-selector"]').last().click()
cy.contains('Polygon').click()
cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'ETH')
cy.get('#add-liquidity-input-tokena .token-symbol-container').should('not.contain.text', 'UNI')
})
it('does not crash if token is duplicated', () => {
cy.visit('/add/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'UNI')

@ -1,9 +1,36 @@
import userEvent from '@testing-library/user-event'
import store from 'state'
import { addSerializedToken } from 'state/user/reducer'
import { act, render, screen } from 'test-utils/render'
import { PoolDetailsHeader } from './PoolDetailsHeader'
describe('PoolDetailsHeader', () => {
beforeEach(() => {
store.dispatch(
addSerializedToken({
serializedToken: {
chainId: 1,
address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
symbol: 'USDC',
name: 'USD Coin',
decimals: 6,
},
})
)
store.dispatch(
addSerializedToken({
serializedToken: {
chainId: 1,
address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
symbol: 'WETH',
name: 'Wrapped Ether',
decimals: 18,
},
})
)
})
const mockProps = {
chainId: 1,
poolAddress: '0x88e6a0c2ddd26feeb64f039a2c41296fcb3f5640',

@ -1,11 +1,38 @@
import { ChainId } from '@uniswap/sdk-core'
import { USDC_MAINNET } from 'constants/tokens'
import store from 'state'
import { addSerializedToken } from 'state/user/reducer'
import { usdcWethPoolAddress, validPoolToken0, validPoolToken1 } from 'test-utils/pools/fixtures'
import { render, screen } from 'test-utils/render'
import { PoolDetailsLink } from './PoolDetailsLink'
describe('PoolDetailsHeader', () => {
beforeEach(() => {
store.dispatch(
addSerializedToken({
serializedToken: {
chainId: 1,
address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
symbol: 'USDC',
name: 'USD Coin',
decimals: 6,
},
})
)
store.dispatch(
addSerializedToken({
serializedToken: {
chainId: 1,
address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
symbol: 'WETH',
name: 'Wrapped Ether',
decimals: 18,
},
})
)
})
it('renders link for pool address', async () => {
const { asFragment } = render(
<PoolDetailsLink

@ -1,4 +1,6 @@
import { enableNetConnect } from 'nock'
import store from 'state'
import { addSerializedToken } from 'state/user/reducer'
import { validPoolDataResponse } from 'test-utils/pools/fixtures'
import { act, render, screen } from 'test-utils/render'
import { BREAKPOINTS } from 'theme'
@ -15,6 +17,28 @@ describe('PoolDetailsStats', () => {
beforeEach(() => {
// Enable network connections for retrieving token logos
enableNetConnect()
store.dispatch(
addSerializedToken({
serializedToken: {
chainId: 1,
address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
symbol: 'USDC',
name: 'USD Coin',
decimals: 6,
},
})
)
store.dispatch(
addSerializedToken({
serializedToken: {
chainId: 1,
address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
symbol: 'WETH',
name: 'Wrapped Ether',
decimals: 18,
},
})
)
})
it('renders stats text correctly', async () => {

@ -1,5 +1,7 @@
import userEvent from '@testing-library/user-event'
import useMultiChainPositions from 'components/AccountDrawer/MiniPortfolio/Pools/useMultiChainPositions'
import store from 'state'
import { addSerializedToken } from 'state/user/reducer'
import { mocked } from 'test-utils/mocked'
import { useMultiChainPositionsReturnValue, validPoolToken0, validPoolToken1 } from 'test-utils/pools/fixtures'
import { act, render, screen } from 'test-utils/render'
@ -24,6 +26,28 @@ describe('PoolDetailsStatsButton', () => {
beforeEach(() => {
mocked(useMultiChainPositions).mockReturnValue(useMultiChainPositionsReturnValue)
store.dispatch(
addSerializedToken({
serializedToken: {
chainId: 1,
address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
symbol: 'USDC',
name: 'USD Coin',
decimals: 6,
},
})
)
store.dispatch(
addSerializedToken({
serializedToken: {
chainId: 1,
address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
symbol: 'WETH',
name: 'Wrapped Ether',
decimals: 18,
},
})
)
})
it('loading skeleton shown correctly', () => {

@ -541,7 +541,7 @@ exports[`PoolDetailsHeader renders link for token address 1`] = `
class="c5"
>
<img
alt="UNKNOWN logo"
alt="USDC logo"
class="c6"
loading="lazy"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"

@ -253,7 +253,7 @@ exports[`PoolDetailsStats pool balance chart not visible on mobile 1`] = `
class="c10"
>
<img
alt="UNKNOWN logo"
alt="USDC logo"
class="c11"
loading="lazy"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"

@ -68,9 +68,12 @@ export function useTokenFromActiveNetwork(tokenAddress: string | undefined): Tok
// If the token is on another chain, we cannot fetch it on-chain, and it is invalid.
if (typeof tokenAddress !== 'string' || !isSupportedChain(chainId) || !formattedAddress) return undefined
if (isLoading || !chainId) return null
if (!decimals?.result?.[0] && parsedSymbol === UNKNOWN_TOKEN_SYMBOL && parsedName === UNKNOWN_TOKEN_NAME) {
return undefined
}
return new Token(chainId, formattedAddress, parsedDecimals, parsedSymbol, parsedName)
}, [chainId, tokenAddress, formattedAddress, isLoading, parsedDecimals, parsedSymbol, parsedName])
}, [tokenAddress, chainId, formattedAddress, isLoading, decimals?.result, parsedDecimals, parsedSymbol, parsedName])
}
type TokenMap = { [address: string]: Token }

@ -2087,7 +2087,7 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
class="c71"
>
<img
alt="UNKNOWN logo"
alt="USDC logo"
class="c72"
loading="lazy"
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"

@ -1,5 +1,7 @@
import { usePoolData } from 'graphql/thegraph/PoolData'
import Router from 'react-router-dom'
import store from 'state'
import { addSerializedToken } from 'state/user/reducer'
import { mocked } from 'test-utils/mocked'
import { validParams, validPoolDataResponse } from 'test-utils/pools/fixtures'
import { render, screen, waitFor } from 'test-utils/render'
@ -23,6 +25,28 @@ describe('PoolDetailsPage', () => {
beforeEach(() => {
jest.spyOn(Router, 'useParams').mockReturnValue(validParams)
mocked(usePoolData).mockReturnValue(validPoolDataResponse)
store.dispatch(
addSerializedToken({
serializedToken: {
chainId: 1,
address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
symbol: 'USDC',
name: 'USD Coin',
decimals: 6,
},
})
)
store.dispatch(
addSerializedToken({
serializedToken: {
chainId: 1,
address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
symbol: 'WETH',
name: 'Wrapped Ether',
decimals: 18,
},
})
)
})
it('not found page displayed when given no poolAddress', () => {