From ac54ec7070a798937d03ec401dba3ff255aea195 Mon Sep 17 00:00:00 2001 From: Andrea Rampin Date: Mon, 15 Apr 2024 14:10:17 +1000 Subject: [PATCH] GPR-549 - set the fromToken in the swap widget (#1662) --- .../widgets/swap/components/SwapForm.cy.tsx | 24 +++++------ .../src/widgets/swap/components/SwapForm.tsx | 40 ++++++++----------- 2 files changed, 29 insertions(+), 35 deletions(-) diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx index 41b3e03271..75d0edd77b 100644 --- a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx +++ b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx @@ -453,7 +453,7 @@ describe('SwapForm', () => { ); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').blur(); cySmartGet('swap-button').click(); cySmartGet('fromTokenInputs-select-form-select-control-error') @@ -534,7 +534,7 @@ describe('SwapForm', () => { cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') .click(); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').trigger('change'); const params = [ @@ -580,7 +580,7 @@ describe('SwapForm', () => { cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') .click(); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').trigger('change'); cySmartGet('@fromAmountInStub').should('have.been.called'); @@ -629,7 +629,7 @@ describe('SwapForm', () => { cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') .click(); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('fromTokenInputs-text-form-max-button').click(); const params = [ @@ -679,7 +679,7 @@ describe('SwapForm', () => { cySmartGet('@fromAmountInStub').should('not.have.been.called'); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('@fromAmountInStub').should('have.been.called'); }); @@ -698,7 +698,7 @@ describe('SwapForm', () => { ); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').trigger('change'); cySmartGet('@fromAmountInStub').should('not.have.been.called'); @@ -726,7 +726,7 @@ describe('SwapForm', () => { cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') .click(); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('fromTokenInputs-text-form-text__input').type('0').trigger('change'); cySmartGet('@fromAmountInStub').should('not.have.been.called'); @@ -807,7 +807,7 @@ describe('SwapForm', () => { cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') .click(); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').trigger('change'); cySmartGet('@fromAmountInStub').should('have.been.called'); @@ -972,7 +972,7 @@ describe('SwapForm', () => { cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') .click(); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('fromTokenInputs-text-form-text__input').type('0.1').trigger('change'); cySmartGet('@fromAmountInStub').should('have.been.called'); @@ -1069,7 +1069,7 @@ describe('SwapForm', () => { cySmartGet('toTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') .click(); cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('fromTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('toTokenInputs-text-form-text__input').type('0.00001').trigger('change'); cySmartGet('@fromAmountInStub').should('have.been.called'); @@ -1130,7 +1130,7 @@ describe('SwapForm', () => { cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') .click(); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('fromTokenInputs-text-form-text__input').type('0.1').trigger('change'); cySmartGet('@fromAmountInStub').should('have.been.called'); @@ -1168,7 +1168,7 @@ describe('SwapForm', () => { cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') .click(); cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); + cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); cySmartGet('fromTokenInputs-text-form-text__input').type('0.00001').trigger('change'); cySmartGet('@fromAmountInStub').should('have.been.called'); diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx index ac220c6d1d..10f26c159e 100644 --- a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx +++ b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx @@ -1,6 +1,6 @@ import { useCallback, - useContext, useEffect, useMemo, useRef, useState, + useContext, useEffect, useMemo, useState, } from 'react'; import { Body, Box, Heading, OptionKey, @@ -116,7 +116,7 @@ export function SwapForm({ data, theme }: SwapFromProps) { const defaultTokenImage = getDefaultTokenImage(checkout?.config.environment, theme); const formatTokenOptionsId = useCallback((symbol: string, address?: string) => (isNativeToken(address) - ? `${symbol.toLowerCase()}-${NATIVE}` + ? NATIVE : `${symbol.toLowerCase()}-${address!.toLowerCase()}`), []); const { cryptoFiatState, cryptoFiatDispatch } = useContext(CryptoFiatContext); @@ -126,7 +126,6 @@ export function SwapForm({ data, theme }: SwapFromProps) { const [loading, setLoading] = useState(false); const [conversion, setConversion] = useState(BigNumber.from(0)); const [swapFromToConversionText, setSwapFromToConversionText] = useState(''); - const hasSetDefaultState = useRef(false); const { track } = useAnalytics(); @@ -182,31 +181,27 @@ export function SwapForm({ data, theme }: SwapFromProps) { setTokensOptionsForm(fromOptions); // Set initial token options if provided - if (!hasSetDefaultState.current) { - hasSetDefaultState.current = true; - - if (data?.fromTokenAddress) { - setFromToken( - allowedTokens.find((token) => (isNativeToken(token.address) + if (data?.fromTokenAddress && !fromToken) { + setFromToken( + allowedTokens.find((token) => (isNativeToken(token.address) && data?.fromTokenAddress?.toLowerCase() === NATIVE) || token.address?.toLowerCase() === data?.fromTokenAddress?.toLowerCase()), - ); - setFromBalance( - tokenBalances.find( - (tokenBalance) => ( - isNativeToken(tokenBalance.token.address) + ); + setFromBalance( + tokenBalances.find( + (tokenBalance) => ( + isNativeToken(tokenBalance.token.address) && data?.fromTokenAddress?.toLowerCase() === NATIVE) || (tokenBalance.token.address?.toLowerCase() === data?.fromTokenAddress?.toLowerCase()), - )?.formattedBalance ?? '', - ); - } + )?.formattedBalance ?? '', + ); + } - if (shouldSetToAddress(data?.toTokenAddress, data?.fromTokenAddress)) { - setToToken(allowedTokens.find((token) => ( - isNativeToken(token.address) && data?.toTokenAddress?.toLowerCase() === NATIVE - ) || (token.address?.toLowerCase() === data?.toTokenAddress?.toLowerCase()))); - } + if (shouldSetToAddress(data?.toTokenAddress, data?.fromTokenAddress) && !toToken) { + setToToken(allowedTokens.find((token) => ( + isNativeToken(token.address) && data?.toTokenAddress?.toLowerCase() === NATIVE + ) || (token.address?.toLowerCase() === data?.toTokenAddress?.toLowerCase()))); } }, [ tokenBalances, @@ -214,7 +209,6 @@ export function SwapForm({ data, theme }: SwapFromProps) { cryptoFiatState.conversions, data?.fromTokenAddress, data?.toTokenAddress, - hasSetDefaultState.current, setFromToken, setFromBalance, setToToken,