fix: switch chain behavior (#195)

* fix: chain switching trigger

* fix: rm unusable disabling

* fix: switch chains automatically on network

* fix: simplify auto chain switch

* fix: auto switch language

src/components/Swap/Input.tsx

@@ -46,24 +46,20 @@ export interface InputProps {
 }
 
 interface UseFormattedFieldAmountArguments {
-  disabled: boolean
   currencyAmount?: CurrencyAmount<Currency>
   fieldAmount?: string
 }
 
-export function useFormattedFieldAmount({ disabled, currencyAmount, fieldAmount }: UseFormattedFieldAmountArguments) {
+export function useFormattedFieldAmount({ currencyAmount, fieldAmount }: UseFormattedFieldAmountArguments) {
   return useMemo(() => {
-    if (disabled) {
-      return ''
-    }
     if (fieldAmount !== undefined) {
       return fieldAmount
     }
     if (currencyAmount) {
       return currencyAmount.toSignificant(6)
     }
     return ''
-  }, [disabled, currencyAmount, fieldAmount])
+  }, [currencyAmount, fieldAmount])
 }
 
 export default function Input({ disabled, focused }: InputProps) {
@@ -101,7 +97,6 @@ export default function Input({ disabled, focused }: InputProps) {
   )
 
   const amount = useFormattedFieldAmount({
-    disabled,
     currencyAmount: tradeCurrencyAmount,
     fieldAmount: inputAmount,
   })

src/components/Swap/Output.tsx

@@ -63,7 +63,6 @@ export default function Output({ disabled, focused, children }: PropsWithChildre
   const hasColor = swapOutputCurrency ? Boolean(color) || null : false
 
   const amount = useFormattedFieldAmount({
-    disabled,
     currencyAmount: outputCurrencyAmount,
     fieldAmount: swapOutputAmount,
   })

src/components/Swap/SwapActionButton/SwitchChainButton.tsx

@@ -1,13 +1,16 @@
 import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
 import ActionButton from 'components/ActionButton'
 import useSwitchChain from 'hooks/useSwitchChain'
 import { Spinner } from 'icons'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Colors } from 'theme'
 
 /** A chain-switching ActionButton. */
 export default function ChainSwitchButton({ color, chainId }: { color: keyof Colors; chainId: number }) {
-  const [isPending, setIsPending] = useState(false)
+  const { account } = useWeb3React()
+  const [isPending, setIsPending] = useState(!account)
+
   const switchChain = useSwitchChain()
   const onSwitchChain = useCallback(async () => {
     setIsPending(true)
@@ -18,19 +21,24 @@ export default function ChainSwitchButton({ color, chainId }: { color: keyof Col
     }
   }, [chainId, switchChain])
 
+  // If there is no account (ie no wallet to take agency), switch chains automatically
+  useEffect(() => {
+    if (!account) onSwitchChain()
+  }, [account, onSwitchChain])
+
   const actionProps = useMemo(
     () =>
       isPending
         ? {
-            message: <Trans>Switch network in your wallet</Trans>,
+            message: account ? <Trans>Switch network in your wallet</Trans> : <Trans>Switching network</Trans>,
             icon: Spinner,
           }
         : {
             message: <Trans>Switch network</Trans>,
             onClick: onSwitchChain,
             children: <Trans>Switch</Trans>,
           },
-    [isPending, onSwitchChain]
+    [account, isPending, onSwitchChain]
   )
 
   return <ActionButton color={color} action={actionProps} />

src/components/Swap/SwapActionButton/index.tsx

@@ -22,10 +22,12 @@ export default memo(function SwapActionButton({ disabled }: SwapButtonProps) {
   const { chainId } = useWeb3React()
   const {
     [Field.INPUT]: { currency: inputCurrency, amount: inputCurrencyAmount, balance: inputCurrencyBalance },
+    [Field.OUTPUT]: { currency: outputCurrency },
     trade,
     slippage,
   } = useSwapInfo()
-  const inputChainId = inputCurrency?.chainId
+
+  const tokenChainId = inputCurrency?.chainId ?? outputCurrency?.chainId
 
   // TODO(zzmp): Return an optimized trade directly from useSwapInfo.
   const optimizedTrade =
@@ -48,8 +50,8 @@ export default memo(function SwapActionButton({ disabled }: SwapButtonProps) {
   const { tokenColorExtraction } = useTheme()
   const color = tokenColorExtraction ? 'interactive' : 'accent'
 
-  if (inputChainId && chainId && inputChainId !== chainId) {
-    return <SwitchChainButton color={color} chainId={inputChainId} />
+  if (chainId && tokenChainId && chainId !== tokenChainId) {
+    return <SwitchChainButton color={color} chainId={tokenChainId} />
   } else if (isDisabled) {
     return (
       <ActionButton color={color} disabled={true}>

src/components/Swap/index.tsx

@@ -70,7 +70,7 @@ export default function Swap(props: SwapProps) {
       </Header>
       <div ref={setWrapper}>
         <BoundaryProvider value={wrapper}>
-          <SwapInfoProvider disabled={isDisabled} routerUrl={props.routerUrl}>
+          <SwapInfoProvider routerUrl={props.routerUrl}>
             <Input disabled={isDisabled} focused={focused} />
             <ReverseButton disabled={isDisabled} />
             <Output disabled={isDisabled} focused={focused}>

src/hooks/swap/useSwapInfo.tsx

@@ -115,15 +115,8 @@ const DEFAULT_SWAP_INFO: SwapInfo = {
 
 const SwapInfoContext = createContext(DEFAULT_SWAP_INFO)
 
-export function SwapInfoProvider({
-  children,
-  disabled,
-  routerUrl,
-}: PropsWithChildren<{ disabled?: boolean; routerUrl?: string }>) {
+export function SwapInfoProvider({ children, routerUrl }: PropsWithChildren<{ routerUrl?: string }>) {
   const swapInfo = useComputeSwapInfo(routerUrl)
-  if (disabled) {
-    return <SwapInfoContext.Provider value={DEFAULT_SWAP_INFO}>{children}</SwapInfoContext.Provider>
-  }
   return <SwapInfoContext.Provider value={swapInfo}>{children}</SwapInfoContext.Provider>
 }