fix: allow any wallet to auto-switch chain, not just injected

Author: rkalis

app/[locale]/learn/wallets/add-network/[slug]/AddNetworkButton.tsx

@@ -17,13 +17,15 @@ const AddNetworkButton = ({ chainId, label }: Props) => {
   const { isConnected } = useAccount();
   const isMounted = useMounted();
 
-  return isConnected && isMounted ? (
-    <Button style="primary" size="md" onClick={() => switchChain(chainId)}>
-      {label}
-    </Button>
-  ) : (
-    <ConnectButton style="primary" size="md" />
-  );
+  if (isConnected && isMounted) {
+    return (
+      <Button style="primary" size="md" onClick={() => switchChain(chainId)}>
+        {label}
+      </Button>
+    );
+  }
+
+  return <ConnectButton style="primary" size="md" />;
 };
 
 export default AddNetworkButton;

components/allowances/controls/ControlsWrapper.tsx

@@ -14,20 +14,28 @@ interface Props {
   children: (disabled: boolean) => ReactElement;
   overrideDisabled?: boolean;
   disabledReason?: string;
+  skipSwitchChain?: boolean;
 }
 
-const ControlsWrapper = ({ chainId, address, switchChainSize, children, overrideDisabled, disabledReason }: Props) => {
+const ControlsWrapper = ({
+  chainId,
+  address,
+  switchChainSize,
+  children,
+  overrideDisabled,
+  disabledReason,
+  skipSwitchChain,
+}: Props) => {
   const t = useTranslations();
-  const { address: account, connector, chain } = useAccount();
+  const { address: account, chain } = useAccount();
 
   const chainName = getChainName(chainId);
 
   const isConnected = !isNullish(account);
   const isConnectedAddress = isConnected && address === account;
-  const needsToSwitchChain = isConnected && chainId !== chain?.id;
-  const canSwitchChain = connector?.type === 'injected';
+  const needsToSwitchChain = isConnected && chainId !== chain?.id && !skipSwitchChain;
   const isChainSwitchEnabled = !isNullish(switchChainSize);
-  const shouldRenderSwitchChainButton = needsToSwitchChain && canSwitchChain && isChainSwitchEnabled;
+  const shouldRenderSwitchChainButton = needsToSwitchChain && isChainSwitchEnabled;
   const disabled =
     !isConnectedAddress || (needsToSwitchChain && !shouldRenderSwitchChainButton) || Boolean(overrideDisabled);
 

components/allowances/controls/SwitchChainButton.tsx

@@ -10,12 +10,12 @@ interface Props {
 
 const SwitchChainButton = ({ chainId, size }: Props) => {
   const t = useTranslations();
-  const { switchChainAsync, canSwitchChain } = useSwitchChain();
+  const { switchChainAsync } = useSwitchChain();
 
   const { execute, loading } = useAsyncCallback(() => switchChainAsync(chainId));
 
   const button = (
-    <Button style="secondary" size={size} disabled={!canSwitchChain} loading={loading} onClick={execute}>
+    <Button style="secondary" size={size} loading={loading} onClick={execute}>
       {loading ? t('common.buttons.switching') : t('common.buttons.switch_chain')}
     </Button>
   );

components/allowances/controls/batch-revoke/BatchRevokeControls.tsx

@@ -30,7 +30,7 @@ const BatchRevokeControls = ({ feeDollarAmount, isRevoking, isAllConfirmed, setO
   return (
     <div className="flex flex-col items-center justify-center gap-8">
       <FeeNotice chainId={selectedChainId} feeDollarAmount={feeDollarAmount} />
-      <ControlsWrapper chainId={selectedChainId} address={address}>
+      <ControlsWrapper chainId={selectedChainId} address={address} switchChainSize="md">
         {(disabled) => (
           <div>
             <Button

components/allowances/controls/batch-revoke/BatchRevokeModalWithButton.tsx

@@ -44,7 +44,12 @@ const BatchRevokeModalWithButton = ({ table }: Props) => {
 
   return (
     <>
-      <ControlsWrapper chainId={selectedChainId} address={address} overrideDisabled={!isSomeRowsSelected}>
+      <ControlsWrapper
+        chainId={selectedChainId}
+        address={address}
+        overrideDisabled={!isSomeRowsSelected}
+        skipSwitchChain
+      >
         {(disabled) => (
           <div className="w-fit">
             <Button style="primary" size="sm" disabled={disabled} onClick={() => setOpen(true)}>

components/allowances/dashboard/cells/AllowanceCell.tsx

@@ -61,7 +61,7 @@ const AllowanceCell = ({ allowance, onUpdate }: Props) => {
         ) : null}
       </div>
       {isErc20Allowance(allowance.payload) && (
-        <ControlsWrapper chainId={allowance.chainId} address={allowance.owner} switchChainSize={undefined}>
+        <ControlsWrapper chainId={allowance.chainId} address={allowance.owner}>
           {(disabled) => (
             <div>
               <Button

components/allowances/dashboard/cells/GlobalSelectCell.tsx

@@ -17,7 +17,12 @@ const GlobalSelectCell = ({ table }: Props) => {
   const indeterminate = table.getSelectedRowModel().flatRows.length > 0;
 
   return (
-    <ControlsWrapper chainId={selectedChainId} address={address} overrideDisabled={selectableCount === 0}>
+    <ControlsWrapper
+      chainId={selectedChainId}
+      address={address}
+      overrideDisabled={selectableCount === 0}
+      skipSwitchChain
+    >
       {(disabled) => (
         <div className="w-fit">
           <Checkbox

components/allowances/dashboard/cells/SelectCell.tsx

@@ -27,6 +27,7 @@ const SelectCell = ({ row }: Props) => {
       address={address}
       overrideDisabled={Boolean(tooltip)}
       disabledReason={tooltip}
+      skipSwitchChain
     >
       {(disabled) => (
         <div className="w-fit">

lib/hooks/ethereum/useSwitchChain.tsx

@@ -1,26 +1,42 @@
 import { getChainAddEthereumChainParameter } from 'lib/utils/chains';
+import { useTranslations } from 'next-intl';
 import { useCallback } from 'react';
+import { toast } from 'react-toastify';
 import { useAccount, useSwitchChain as useSwitchChainInternal } from 'wagmi';
 
 export const useSwitchChain = () => {
+  const t = useTranslations();
+
   const { switchChain: switchChainInternal, switchChainAsync: switchChainAsyncInternal } = useSwitchChainInternal();
   const { connector } = useAccount();
   const canSwitchChain = connector?.type === 'injected';
 
   const switchChain = useCallback(
     (chainId: number) => {
-      const addEthereumChainParameter = getChainAddEthereumChainParameter(chainId);
-      return switchChainInternal({ chainId, addEthereumChainParameter });
+      try {
+        const addEthereumChainParameter = getChainAddEthereumChainParameter(chainId);
+        return switchChainInternal({ chainId, addEthereumChainParameter });
+      } catch (error) {
+        console.error(error);
+        toast.error(t('common.toasts.switch_chain_failed'));
+        throw error;
+      }
     },
-    [switchChainInternal],
+    [switchChainInternal, t],
   );
 
   const switchChainAsync = useCallback(
-    (chainId: number) => {
-      const addEthereumChainParameter = getChainAddEthereumChainParameter(chainId);
-      return switchChainAsyncInternal({ chainId, addEthereumChainParameter });
+    async (chainId: number) => {
+      try {
+        const addEthereumChainParameter = getChainAddEthereumChainParameter(chainId);
+        return await switchChainAsyncInternal({ chainId, addEthereumChainParameter });
+      } catch (error) {
+        console.error(error);
+        toast.error(t('common.toasts.switch_chain_failed'));
+        throw error;
+      }
     },
-    [switchChainAsyncInternal],
+    [switchChainAsyncInternal, t],
   );
 
   return { switchChain, switchChainAsync, canSwitchChain };

lib/utils/errors.ts

@@ -127,6 +127,7 @@ export const isNetworkError = (error?: string | any): boolean => {
   if (lowercaseMessage?.includes('request timed out')) return true;
   if (lowercaseMessage?.includes('request took too long to respond')) return true;
   if (lowercaseMessage?.includes('failed to fetch')) return true;
+  if (lowercaseMessage?.includes('service temporarily unavailable')) return true;
   return false;
 };