default eth for swap output (#1622)

Co-authored-by: Daniel Sinclair <[email protected]> Co-authored-by: MK <[email protected]> Co-authored-by: MK <[email protected]>
rainbow-me · Aug 8, 2024 · e3501c4 · e3501c4
1 parent 65c8b96
commit e3501c4
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 24 deletions.
diff --git 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
@@ -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<HTMLInputElement>) => {
   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<TokenInputRef>();
+
+  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
@@ -126,7 +126,7 @@ export const TokenToBuyInfo = ({
                     {assetToBuy?.balance?.amount &&
                       handleSignificantDecimals(
                         assetToBuy?.balance?.amount,
-                        assetToBuy?.decimals,
+                        assetToBuy?.decimals ?? 18,
                       )}
                   </TextOverflow>
                 </Box>

diff --git 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<TokenInputRef>();
 
-  const selectAssetToSell = useCallback(
-    (asset: ParsedSearchAsset | null) => {
-      setAssetToSell(asset);
-      if (!assetToBuy) tokenToBuyInputRef.current?.openDropdown();
-      setAssetToSellInputValue('');
-      setAssetToBuyInputValue('');
-    },
-    [
-      setAssetToBuyInputValue,
-      setAssetToSell,
-      setAssetToSellInputValue,
-      assetToBuy,
-    ],
-  );
-
   const {
     swapAmount: savedAmount,
     swapField: savedField,