fix(widgets): disable interactions and don't show summary screen on unsupported networks (#3376)

* disable interactions and don't show summary screen on unsupported networks

* clear input values on unsupported network

* pr feedback

* pr feedback

* simpler active trade clearing

* rename some things

src/lib/components/Swap/Input.tsx

 import { useLingui } from '@lingui/react'
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { useUSDCValue } from 'hooks/useUSDCPrice'
 import { loadingOpacityCss } from 'lib/css/loading'
 import {
@@ -45,6 +46,27 @@ export interface InputProps {
   focused: boolean
 }
 
+interface UseFormattedFieldAmountArguments {
+  disabled: boolean
+  currencyAmount?: CurrencyAmount<Currency>
+  fieldAmount?: string
+}
+
+export function useFormattedFieldAmount({ disabled, currencyAmount, fieldAmount }: UseFormattedFieldAmountArguments) {
+  return useMemo(() => {
+    if (disabled) {
+      return ''
+    }
+    if (fieldAmount !== undefined) {
+      return fieldAmount
+    }
+    if (currencyAmount) {
+      return currencyAmount.toSignificant(6)
+    }
+    return ''
+  }, [disabled, currencyAmount, fieldAmount])
+}
+
 export default function Input({ disabled, focused }: InputProps) {
   const { i18n } = useLingui()
   const {
@@ -81,11 +103,17 @@ export default function Input({ disabled, focused }: InputProps) {
     return insufficientBalance ? 'error' : undefined
   }, [balance, inputCurrencyAmount, swapInputCurrencyAmount])
 
+  const amount = useFormattedFieldAmount({
+    disabled,
+    currencyAmount: inputCurrencyAmount,
+    fieldAmount: swapInputAmount,
+  })
+
   return (
     <InputColumn gap={0.5} approved={mockApproved}>
       <TokenInput
         currency={swapInputCurrency}
-        amount={(swapInputAmount !== undefined ? swapInputAmount : swapInputCurrencyAmount?.toSignificant(6)) ?? ''}
+        amount={amount}
         max={max}
         disabled={disabled}
         onChangeInput={updateSwapInputAmount}

src/lib/components/Swap/Output.tsx

@@ -16,7 +16,7 @@ import { getPriceImpactWarning } from 'utils/prices'
 
 import Column from '../Column'
 import Row from '../Row'
-import { Balance, InputProps, LoadingRow } from './Input'
+import { Balance, InputProps, LoadingRow, useFormattedFieldAmount } from './Input'
 import TokenInput from './TokenInput'
 
 export const colorAtom = atom<string | undefined>(undefined)
@@ -78,6 +78,12 @@ export default function Output({ disabled, focused, children }: PropsWithChildre
     )
   }, [inputUSDC, outputUSDC])
 
+  const amount = useFormattedFieldAmount({
+    disabled,
+    currencyAmount: outputCurrencyAmount,
+    fieldAmount: swapOutputAmount,
+  })
+
   return (
     <DynamicThemeProvider color={color}>
       <OutputColumn hasColor={hasColor} gap={0.5}>
@@ -88,7 +94,7 @@ export default function Output({ disabled, focused, children }: PropsWithChildre
         </Row>
         <TokenInput
           currency={swapOutputCurrency}
-          amount={(swapOutputAmount !== undefined ? swapOutputAmount : outputCurrencyAmount?.toSignificant(6)) ?? ''}
+          amount={amount}
           disabled={disabled}
           onChangeInput={updateSwapOutputAmount}
           onChangeCurrency={updateSwapOutputCurrency}

src/lib/components/Swap/SwapButton.tsx

@@ -57,6 +57,11 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
     setActiveTrade((activeTrade) => activeTrade && trade.trade)
   }, [trade])
 
+  // clear active trade on chain change
+  useEffect(() => {
+    setActiveTrade(undefined)
+  }, [chainId])
+
   // TODO(zzmp): Return an optimized trade directly from useSwapInfo.
   const optimizedTrade =
     // Use trade.trade if there is no swap optimized trade. This occurs if approvals are still pending.

src/lib/components/Swap/index.tsx

 import { Trans } from '@lingui/macro'
 import { TokenInfo } from '@uniswap/token-lists'
-import { ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
 import { useAtom } from 'jotai'
 import { SwapInfoUpdater } from 'lib/hooks/swap/useSwapInfo'
 import useSyncConvenienceFee from 'lib/hooks/swap/useSyncConvenienceFee'
@@ -8,6 +7,7 @@ import useSyncSwapDefaults from 'lib/hooks/swap/useSyncSwapDefaults'
 import { usePendingTransactions } from 'lib/hooks/transactions'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import useHasFocus from 'lib/hooks/useHasFocus'
+import useOnSupportedNetwork from 'lib/hooks/useOnSupportedNetwork'
 import useTokenList, { useSyncTokenList } from 'lib/hooks/useTokenList'
 import { displayTxHashAtom } from 'lib/state/swap'
 import { SwapTransactionInfo, Transaction, TransactionType, WrapTransactionInfo } from 'lib/state/transactions'
@@ -60,7 +60,7 @@ export default function Swap(props: SwapProps) {
   useSyncSwapDefaults(props)
   useSyncConvenienceFee(props)
 
-  const { active, account, chainId } = useActiveWeb3React()
+  const { active, account } = useActiveWeb3React()
   const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null)
 
   const [displayTxHash, setDisplayTxHash] = useAtom(displayTxHashAtom)
@@ -68,27 +68,30 @@ export default function Swap(props: SwapProps) {
   const displayTx = getTransactionFromMap(pendingTxs, displayTxHash)
 
   const tokenList = useTokenList()
+  const onSupportedNetwork = useOnSupportedNetwork()
   const isSwapSupported = useMemo(
-    () => Boolean(chainId && ALL_SUPPORTED_CHAIN_IDS.includes(chainId) && tokenList?.length),
-    [chainId, tokenList]
+    () => Boolean(active && onSupportedNetwork && tokenList?.length),
+    [active, onSupportedNetwork, tokenList?.length]
   )
 
   const focused = useHasFocus(wrapper)
 
+  const isInteractive = Boolean(active && onSupportedNetwork)
+
   return (
     <SwapPropValidator {...props}>
       {isSwapSupported && <SwapInfoUpdater />}
       <Header title={<Trans>Swap</Trans>}>
         {active && <Wallet disabled={!account} onClick={props.onConnectWallet} />}
-        <Settings disabled={!active} />
+        <Settings disabled={!isInteractive} />
       </Header>
       <div ref={setWrapper}>
         <BoundaryProvider value={wrapper}>
-          <Input disabled={!active} focused={focused} />
-          <ReverseButton disabled={!active} />
-          <Output disabled={!active} focused={focused}>
+          <Input disabled={!isInteractive} focused={focused} />
+          <ReverseButton disabled={!isInteractive} />
+          <Output disabled={!isInteractive} focused={focused}>
             <Toolbar disabled={!active} />
-            <SwapButton disabled={!account} />
+            <SwapButton disabled={!isSwapSupported} />
           </Output>
         </BoundaryProvider>
       </div>

src/lib/hooks/useOnSupportedNetwork.ts

+import { ALL_SUPPORTED_CHAIN_IDS } from 'constants/chains'
+import { useMemo } from 'react'
+
+import useActiveWeb3React from './useActiveWeb3React'
+
+function useOnSupportedNetwork() {
+  const { chainId } = useActiveWeb3React()
+  return useMemo(() => chainId && ALL_SUPPORTED_CHAIN_IDS.includes(chainId), [chainId])
+}
+
+export default useOnSupportedNetwork