fix: update default tokens on unsupported networks (#3470)

* update default tokens on unsupported networks

* update supported network with hook

* update defaults

* fix on default input token

src/lib/hooks/swap/useSyncTokenDefaults.ts

@@ -7,6 +7,8 @@ import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { Field, Swap, swapAtom } from 'lib/state/swap'
 import { useCallback, useLayoutEffect, useState } from 'react'
 
+import useOnSupportedNetwork from '../useOnSupportedNetwork'
+
 export type DefaultAddress = string | { [chainId: number]: string | 'NATIVE' } | 'NATIVE'
 
 export interface TokenDefaults {
@@ -27,7 +29,11 @@ function useDefaultToken(
     address = defaultAddress[chainId]
   }
   const token = useToken(address)
-  if (chainId && address === 'NATIVE') {
+
+  const onSupportedNetwork = useOnSupportedNetwork()
+
+  // Only use native currency if chain ID is in supported chains. ExtendedEther will error otherwise.
+  if (chainId && address === 'NATIVE' && onSupportedNetwork) {
     return nativeOnChain(chainId)
   }
   return token ?? undefined
@@ -41,12 +47,13 @@ export default function useSyncTokenDefaults({
 }: TokenDefaults) {
   const updateSwap = useUpdateAtom(swapAtom)
   const { chainId } = useActiveWeb3React()
+  const onSupportedNetwork = useOnSupportedNetwork()
   const nativeCurrency = useNativeCurrency()
   const defaultOutputToken = useDefaultToken(defaultOutputTokenAddress, chainId)
   const defaultInputToken =
     useDefaultToken(defaultInputTokenAddress, chainId) ??
     // Default the input token to the native currency if it is not the output token.
-    (defaultOutputToken === nativeCurrency ? nativeCurrency : undefined)
+    (defaultOutputToken !== nativeCurrency && onSupportedNetwork ? nativeCurrency : undefined)
 
   const setToDefaults = useCallback(() => {
     const defaultSwapState: Swap = {