From e3501c48688cde45249d0570679e45f3c4ae824b Mon Sep 17 00:00:00 2001 From: brdy <41711440+BrodyHughes@users.noreply.github.com> Date: Thu, 8 Aug 2024 15:05:20 -0500 Subject: [PATCH] default eth for swap output (#1622) Co-authored-by: Daniel Sinclair <4412473+DanielSinclair@users.noreply.github.com> Co-authored-by: MK <53529533+magiziz@users.noreply.github.com> Co-authored-by: MK --- e2e/serial/swap/2_swapFlow2.test.ts | 8 --- src/entries/popup/hooks/swap/useSwapInputs.ts | 68 +++++++++++++++++++ .../TokenInfo/TokenToBuyInfo.tsx | 2 +- src/entries/popup/pages/swap/index.tsx | 16 +---- 4 files changed, 70 insertions(+), 24 deletions(-) diff --git a/e2e/serial/swap/2_swapFlow2.test.ts b/e2e/serial/swap/2_swapFlow2.test.ts index dfad3f2546..463371b2e8 100644 --- a/e2e/serial/swap/2_swapFlow2.test.ts +++ b/e2e/serial/swap/2_swapFlow2.test.ts @@ -131,14 +131,6 @@ it('should be able to go to review a unlock and swap', async () => { id: `${SWAP_VARIABLES.USDC_MAINNET_ID}-token-to-sell-row`, driver, }); - await findElementByTestIdAndClick({ - id: 'token-to-buy-search-token-input', - driver, - }); - await findElementByTestIdAndClick({ - id: `${SWAP_VARIABLES.ETH_MAINNET_ID}-favorites-token-to-buy-row`, - driver, - }); await typeOnTextInput({ id: `${SWAP_VARIABLES.USDC_MAINNET_ID}-token-to-sell-swap-token-input-swap-input-mask`, text: `\b50`, diff --git a/src/entries/popup/hooks/swap/useSwapInputs.ts b/src/entries/popup/hooks/swap/useSwapInputs.ts index d90f9f31de..43ae07cf4c 100644 --- a/src/entries/popup/hooks/swap/useSwapInputs.ts +++ b/src/entries/popup/hooks/swap/useSwapInputs.ts @@ -1,8 +1,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { SUPPORTED_CHAINS, chainsNativeAsset } from '~/core/references/chains'; import { usePopupInstanceStore } from '~/core/state/popupInstances'; import { ParsedSearchAsset } from '~/core/types/assets'; import { GasFeeLegacyParams, GasFeeParams } from '~/core/types/gas'; +import { isNativeAsset } from '~/core/utils/chains'; import { POPUP_DIMENSIONS } from '~/core/utils/dimensions'; import { addBuffer, @@ -13,6 +15,9 @@ import { lessThan, minus, } from '~/core/utils/numbers'; +import { isLowerCaseMatch } from '~/core/utils/strings'; + +import { TokenInputRef } from '../../pages/swap/SwapTokenInput/TokenInput'; const focusOnInput = (inputRef: React.RefObject) => { setTimeout(() => { @@ -248,6 +253,68 @@ export const useSwapInputs = ({ [assetToBuyValue, independentField], ); + const determineOutputCurrency = useCallback( + (asset: ParsedSearchAsset | null) => { + if (!asset) return null; + + const { chainId } = asset; + + const supportedChain = SUPPORTED_CHAINS.find( + (chain) => chain.id === chainId, + ); + + if (!supportedChain) return null; + + if (!isNativeAsset(asset.address, chainId)) { + const chainNativeAddress = chainsNativeAsset[chainId]; + // Return native asset for this chain + return { + uniqueId: `${chainNativeAddress}_${chainId}`, + address: chainNativeAddress, + chainId, + isNativeAsset: true, + ...supportedChain.nativeCurrency, + }; + } + return null; + }, + [], + ); + + const tokenToBuyInputRef = useRef(); + + const selectAssetToSell = useCallback( + (asset: ParsedSearchAsset | null) => { + setAssetToSell(asset); + + if (asset && !bridge && !isNativeAsset(asset.address, asset.chainId)) { + const suggestedOutputAsset = determineOutputCurrency( + asset, + ) as ParsedSearchAsset; + if ( + suggestedOutputAsset && + !isLowerCaseMatch(suggestedOutputAsset.symbol, asset.symbol) + ) { + setAssetToBuy(suggestedOutputAsset); + } + } + + setAssetToSellValue(''); + setAssetToBuyValue(''); + + if (!assetToBuy) { + tokenToBuyInputRef.current?.openDropdown(); + } + }, + [ + setAssetToSell, + bridge, + assetToBuy, + determineOutputCurrency, + setAssetToBuy, + ], + ); + return { assetToBuyInputRef, assetToSellInputRef, @@ -271,5 +338,6 @@ export const useSwapInputs = ({ setAssetToSellInputNativeValue, setAssetToSellMaxValue, setIndependentField: setIndependentFieldIfOccupied, + selectAssetToSell, }; }; diff --git a/src/entries/popup/pages/swap/SwapTokenInput/TokenInfo/TokenToBuyInfo.tsx b/src/entries/popup/pages/swap/SwapTokenInput/TokenInfo/TokenToBuyInfo.tsx index 0563b31425..69e12acdae 100644 --- a/src/entries/popup/pages/swap/SwapTokenInput/TokenInfo/TokenToBuyInfo.tsx +++ b/src/entries/popup/pages/swap/SwapTokenInput/TokenInfo/TokenToBuyInfo.tsx @@ -126,7 +126,7 @@ export const TokenToBuyInfo = ({ {assetToBuy?.balance?.amount && handleSignificantDecimals( assetToBuy?.balance?.amount, - assetToBuy?.decimals, + assetToBuy?.decimals ?? 18, )} diff --git a/src/entries/popup/pages/swap/index.tsx b/src/entries/popup/pages/swap/index.tsx index 3e93923c39..4030898b14 100644 --- a/src/entries/popup/pages/swap/index.tsx +++ b/src/entries/popup/pages/swap/index.tsx @@ -322,6 +322,7 @@ export function Swap({ bridge = false }: { bridge?: boolean }) { assetToSellMaxValue, assetToBuyValue, assetToSellValue, + selectAssetToSell, assetToSellNativeValue, assetToSellDisplay, assetToSellDropdownClosed, @@ -448,21 +449,6 @@ export function Swap({ bridge = false }: { bridge?: boolean }) { const tokenToBuyInputRef = useRef(); - const selectAssetToSell = useCallback( - (asset: ParsedSearchAsset | null) => { - setAssetToSell(asset); - if (!assetToBuy) tokenToBuyInputRef.current?.openDropdown(); - setAssetToSellInputValue(''); - setAssetToBuyInputValue(''); - }, - [ - setAssetToBuyInputValue, - setAssetToSell, - setAssetToSellInputValue, - assetToBuy, - ], - ); - const { swapAmount: savedAmount, swapField: savedField,