clean up

Author: 0xTxbi

demo/pages/ui/token/[[...params]].tsx

@@ -24,10 +24,10 @@ import { isSolanaWallet } from '@dynamic-labs/solana'
 import { adaptSolanaWallet } from '@relayprotocol/relay-svm-wallet-adapter'
 import {
   adaptViemWallet,
-  RelayChain,
   type AdaptedWallet,
   type ChainVM
 } from '@relayprotocol/relay-sdk'
+import type { RelayChain } from '@relayprotocol/relay-sdk'
 import { useWalletFilter } from 'context/walletFilter'
 import { adaptBitcoinWallet } from '@relayprotocol/relay-bitcoin-wallet-adapter'
 import { isBitcoinWallet } from '@dynamic-labs/bitcoin'
@@ -225,6 +225,10 @@ const TokenWidgetPage: NextPage = () => {
         return
       }
 
+      setFromToken(undefined)
+      setToToken(undefined)
+      setTokenNotFound(false)
+
       // Update the URL with the new token params
       setUrlTokenAddress(normalizedAddress)
       setUrlTokenChainId(parsedChainId)
@@ -365,7 +369,7 @@ const TokenWidgetPage: NextPage = () => {
           }}
         >
           <TokenWidget
-            key={`swap-widget-${singleChainMode ? 'single' : 'multi'}-chain`}
+            key={`swap-widget-${singleChainMode ? 'single' : 'multi'}-chain-${urlTokenAddress}-${urlTokenChainId}`}
             lockChainId={singleChainMode ? 8453 : undefined}
             singleChainMode={singleChainMode}
             supportedWalletVMs={supportedWalletVMs}

packages/ui/src/components/common/TokenSelector/PaymentMethod.tsx

@@ -571,7 +571,9 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
               >
                 <FontAwesomeIcon icon={faChevronLeft} width={20} height={20} />
               </Button>
-              <Text style="subtitle2">{context === 'from' ? 'Pay with' : 'Sell to'}</Text>
+              <Text style="subtitle2">
+                {context === 'from' ? 'Pay with' : 'Sell to'}
+              </Text>
             </Flex>
 
             <Flex
@@ -948,11 +950,7 @@ const ChainSearchInput: FC<ChainSearchInputProps> = ({ value, onChange }) => (
     placeholder="Search for a chain"
     icon={
       <Box css={{ color: 'gray9' }}>
-        <FontAwesomeIcon
-          icon={faMagnifyingGlass}
-          width={16}
-          height={16}
-        />
+        <FontAwesomeIcon icon={faMagnifyingGlass} width={16} height={16} />
       </Box>
     }
     containerCss={{

packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx

@@ -415,11 +415,12 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
               disablePasteWalletAddressOption={disablePasteWalletAddressOption}
               selectedWalletAddress={address}
               onSelect={(wallet) => {
-                // Always clear payment token when switching wallets
-                // Let auto-select choose the best token for the new wallet
                 setOriginAddressOverride(wallet.address)
-                handleSetFromToken(undefined)
                 onSetPrimaryWallet?.(wallet.address)
+
+                if (wallet.address !== address) {
+                  handleSetFromToken(undefined)
+                }
               }}
               chain={fromChain}
               disableWalletFiltering={true}
@@ -455,6 +456,9 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
             fromChainWalletVMSupported={fromChainWalletVMSupported}
             supportedWalletVMs={supportedWalletVMs}
             linkedWallets={linkedWallets}
+            multiWalletSupportEnabled={multiWalletSupportEnabled}
+            context="from"
+            autoSelectToken={false}
             setToken={(token) => {
               if (
                 token?.address === toToken?.address &&
@@ -468,8 +472,6 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
                 handleSetFromToken(token)
               }
             }}
-            context="from"
-            multiWalletSupportEnabled={multiWalletSupportEnabled}
             lockedChainIds={lockedChainIds}
             chainIdsFilter={
               !fromChainWalletVMSupported && toToken

packages/ui/src/components/widgets/TokenWidget/hooks/useWalletGuards.ts

@@ -3,7 +3,10 @@ import type { Dispatch, SetStateAction } from 'react'
 import type { RelayChain } from '@relayprotocol/relay-sdk'
 import type { LinkedWallet } from '../../../../types/index.js'
 import type { RelayKitProviderProps } from '../../../../providers/RelayKitProvider.js'
-import { addressesEqual, findSupportedWallet } from '../../../../utils/address.js'
+import {
+  addressesEqual,
+  findSupportedWallet
+} from '../../../../utils/address.js'
 
 type Params = {
   multiWalletSupportEnabled: boolean
@@ -133,7 +136,11 @@ export const useWalletGuards = ({
     ) {
       setDestinationAddressOverride(undefined)
     }
-  }, [destinationAddressOverride, customToAddress, setDestinationAddressOverride])
+  }, [
+    destinationAddressOverride,
+    customToAddress,
+    setDestinationAddressOverride
+  ])
 
   useEffect(() => {
     if (!multiWalletSupportEnabled) {
@@ -147,18 +154,22 @@ export const useWalletGuards = ({
     }
 
     if (originAddressOverride) {
-      const originMatches = linkedWallets?.some((wallet) =>
+      const originExists = linkedWallets?.some((wallet) =>
         addressesEqual(wallet.vmType, wallet.address, originAddressOverride)
       )
 
-      if (!originMatches) {
+      if (!originExists) {
         setOriginAddressOverride(undefined)
       }
     }
 
     if (destinationAddressOverride) {
       const destinationMatches = linkedWallets?.some((wallet) =>
-        addressesEqual(wallet.vmType, wallet.address, destinationAddressOverride)
+        addressesEqual(
+          wallet.vmType,
+          wallet.address,
+          destinationAddressOverride
+        )
       )
 
       if (!destinationMatches) {
@@ -171,7 +182,8 @@ export const useWalletGuards = ({
     originAddressOverride,
     destinationAddressOverride,
     setOriginAddressOverride,
-    setDestinationAddressOverride
+    setDestinationAddressOverride,
+    allowUnsupportedOrigin
   ])
 }
 

packages/ui/src/components/widgets/TokenWidget/widget/index.tsx

@@ -235,7 +235,7 @@ const TokenWidget: FC<TokenWidgetProps> = ({
       if (activeTab === 'buy' && !toToken && !resolvedToToken) {
         setResolvedToToken(resolved)
         setToToken?.(resolved)
-      } else {
+      } else if (activeTab === 'sell') {
         setResolvedFromToken(resolved)
         setFromToken?.(resolved)
       }