feat: auto switch wallet connector

src/components/transactions/Bridge/BridgeModalContent.tsx

@@ -333,6 +333,7 @@ export const BridgeModalContent = () => {
       </Box>
 
       <ChangeNetworkWarning
+        autoSwitchOnMount={true}
         networkName={getNetworkConfig(sourceNetworkObj.chainId).name}
         chainId={sourceNetworkObj.chainId}
         event={{

src/components/transactions/ClaimRewards/ClaimRewardsModalContent.tsx

@@ -152,7 +152,11 @@ export const ClaimRewardsModalContent = ({ user, reserves }: ClaimRewardsModalCo
     <>
       <TxModalTitle title="Claim rewards" />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={currentChainId} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={currentChainId}
+        />
       )}
 
       {blockingError !== undefined && (

src/components/transactions/Emode/EmodeModalContent.tsx

@@ -181,7 +181,11 @@ export const EmodeModalContent = ({ user }: { user: ExtendedFormattedUser }) =>
     <>
       <TxModalTitle title={<Trans>Manage E-Mode</Trans>} />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={currentChainId} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={currentChainId}
+        />
       )}
 
       <Typography variant="caption">

src/components/transactions/FlowCommons/ModalWrapper.tsx

@@ -84,6 +84,7 @@ export const ModalWrapper: React.FC<{
       )}
       {isWrongNetwork && !readOnlyModeAddress && (
         <ChangeNetworkWarning
+          autoSwitchOnMount={true}
           networkName={getNetworkConfig(requiredChainId).name}
           chainId={requiredChainId}
           event={{

src/components/transactions/GovDelegation/GovDelegationModalContent.tsx

@@ -153,7 +153,11 @@ export const GovDelegationModalContent: React.FC<GovDelegationModalContentProps>
     <>
       <TxModalTitle title={isRevokeModal ? 'Revoke power' : 'Set up delegation'} />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={govChain} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={govChain}
+        />
       )}
       {(isRevokeModal &&
         !!powers &&

src/components/transactions/GovRepresentatives/GovRepresentativesModalContent.tsx

@@ -96,7 +96,11 @@ export const GovRepresentativesContent = ({
         <TxModalTitle title="Edit address" />
       </Box>
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={govChain} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={govChain}
+        />
       )}
       <Stack direction="column" gap={2}>
         {reps.map((r, i) => (

src/components/transactions/GovVote/GovVoteModalContent.tsx

@@ -104,7 +104,11 @@ export const GovVoteModalContent = ({
     <>
       <TxModalTitle title="Governance vote" />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={proposalVotingChain} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={proposalVotingChain}
+        />
       )}
       {blockingError !== undefined && (
         <Typography variant="helperText" color="red">

src/components/transactions/MigrateV3/MigrateV3ModalContent.tsx

@@ -136,7 +136,11 @@ export const MigrateV3ModalContent = ({
     <>
       <TxModalTitle title="Migrate to V3" />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={currentChainId} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={currentChainId}
+        />
       )}
 
       <TxModalDetails gasLimit={gasLimit}>

src/components/transactions/Stake/StakeModalContent.tsx

@@ -108,6 +108,7 @@ export const StakeModalContent = ({ stakeAssetName, icon }: StakeProps) => {
           networkName={networkConfig.name}
           chainId={stakingChain}
           funnel={'Stake Modal'}
+          autoSwitchOnMount={true}
         />
       )}
 

src/components/transactions/StakeCooldown/StakeCooldownModalContent.tsx

@@ -155,7 +155,11 @@ export const StakeCooldownModalContent = ({ stakeAssetName, icon }: StakeCooldow
     <>
       <TxModalTitle title="Cooldown to unstake" />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={stakingChain} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={stakingChain}
+        />
       )}
       <Typography variant="description" sx={{ mb: 6 }}>
         <Trans>

src/components/transactions/StakeRewardClaim/StakeRewardClaimModalContent.tsx

@@ -99,7 +99,11 @@ export const StakeRewardClaimModalContent = ({ stakeAssetName, icon }: StakeRewa
     <>
       <TxModalTitle title="Claim" symbol={rewardsSymbol} />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={stakingChain} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={stakingChain}
+        />
       )}
       {blockingError !== undefined && (
         <Typography variant="helperText" color="red">

src/components/transactions/StakeRewardClaimRestake/StakeRewardClaimRestakeModalContent.tsx

@@ -103,7 +103,11 @@ export const StakeRewardClaimRestakeModalContent = ({
     <>
       <TxModalTitle title="Restake AAVE rewards" />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={stakingChain} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={stakingChain}
+        />
       )}
       <CooldownWarning />
       <AssetInput

src/components/transactions/Switch/BaseSwitchModalContent.tsx

@@ -560,6 +560,7 @@ export const BaseSwitchModalContent = ({
       )}
       {showChangeNetworkWarning && isWrongNetwork.isWrongNetwork && !readOnlyModeAddress && (
         <ChangeNetworkWarning
+          autoSwitchOnMount={true}
           networkName={selectedNetworkConfig.name}
           chainId={selectedChainId}
           event={{

src/components/transactions/UnStake/UnStakeModalContent.tsx

@@ -108,7 +108,11 @@ export const UnStakeModalContent = ({ stakeAssetName, icon }: UnStakeProps) => {
     <>
       <TxModalTitle title="Unstake" symbol={nameFormatted} />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={stakingChain} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={stakingChain}
+        />
       )}
       <AssetInput
         value={amount}

src/components/transactions/Warnings/ChangeNetworkWarning.tsx

@@ -1,6 +1,7 @@
 import { ChainId } from '@aave/contract-helpers';
 import { Trans } from '@lingui/macro';
-import { AlertProps, Button, Typography } from '@mui/material';
+import { AlertProps, Button, CircularProgress, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { TrackEventProps } from 'src/store/analyticsSlice';
 import { useRootStore } from 'src/store/root';
@@ -14,6 +15,7 @@ export type ChangeNetworkWarningProps = AlertProps & {
   chainId: ChainId;
   event?: TrackEventProps;
   askManualSwitch?: boolean;
+  autoSwitchOnMount?: boolean;
 };
 
 export const ChangeNetworkWarning = ({
@@ -22,32 +24,79 @@ export const ChangeNetworkWarning = ({
   event,
   funnel,
   askManualSwitch = false,
+  autoSwitchOnMount = true,
   ...rest
 }: ChangeNetworkWarningProps) => {
   const { switchNetwork, switchNetworkError } = useWeb3Context();
   const trackEvent = useRootStore((store) => store.trackEvent);
 
-  const handleSwitchNetwork = () => {
-    trackEvent(GENERAL.SWITCH_NETWORK, { funnel, ...event?.eventParams, network: networkName });
+  const [isAutoSwitching, setIsAutoSwitching] = useState(false);
+  const [hasAttemptedAutoSwitch, setHasAttemptedAutoSwitch] = useState(false);
+
+  useEffect(() => {
+    if (autoSwitchOnMount && !hasAttemptedAutoSwitch && !isAutoSwitching) {
+      setHasAttemptedAutoSwitch(true);
+      setIsAutoSwitching(true);
+
+      trackEvent(GENERAL.SWITCH_NETWORK, {
+        funnel,
+        ...event?.eventParams,
+        network: networkName,
+      });
+
+      switchNetwork(chainId).finally(() => {
+        setIsAutoSwitching(false);
+        setHasAttemptedAutoSwitch(true);
+      });
+    }
+  }, [
+    autoSwitchOnMount,
+    hasAttemptedAutoSwitch,
+    chainId,
+    switchNetwork,
+    trackEvent,
+    funnel,
+    event,
+    networkName,
+  ]);
+
+  const handleManualSwitchNetwork = () => {
+    trackEvent(GENERAL.SWITCH_NETWORK, {
+      funnel,
+      ...event?.eventParams,
+      network: networkName,
+      manual: false,
+    });
     switchNetwork(chainId);
   };
   return (
     <Warning severity="error" icon={false} {...rest}>
-      {switchNetworkError ? (
+      {isAutoSwitching ? (
+        <Typography variant="description" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <CircularProgress size={16} />
+          <Trans>Switching to {networkName}...</Trans>
+        </Typography>
+      ) : switchNetworkError ? (
         <Typography>
           <Trans>
-            Seems like we can&apos;t switch the network automatically. Please check if you can
-            change it from the wallet.
+            {hasAttemptedAutoSwitch
+              ? "We couldn't switch the network automatically. Please check if you can change it from the wallet."
+              : "Seems like we can't switch the network automatically. Please check if you can change it from the wallet."}
           </Trans>
         </Typography>
       ) : (
+        // Show manual switch option
         <Typography variant="description">
-          <Trans>Please switch to {networkName}.</Trans>{' '}
+          <Trans>
+            {hasAttemptedAutoSwitch
+              ? `Auto-switch failed. Please manually switch to ${networkName}.`
+              : `Please switch to ${networkName}.`}
+          </Trans>{' '}
           {!askManualSwitch && (
             <Button
               variant="text"
               sx={{ ml: '2px', verticalAlign: 'top' }}
-              onClick={handleSwitchNetwork}
+              onClick={handleManualSwitchNetwork}
               disableRipple
             >
               <Typography variant="description">

src/locales/en/messages.po

@@ -53,10 +53,6 @@ msgstr "Participating in this {symbol} reserve gives annualized rewards."
 msgid "Use your AAVE, stkAAVE, or aAave balance to delegate your voting and proposition powers. You will not be sending any tokens, only the rights to vote and propose changes to the protocol. You can re-delegate or revoke power to self at any time."
 msgstr "Use your AAVE, stkAAVE, or aAave balance to delegate your voting and proposition powers. You will not be sending any tokens, only the rights to vote and propose changes to the protocol. You can re-delegate or revoke power to self at any time."
 
-#: src/components/transactions/Warnings/ChangeNetworkWarning.tsx
-msgid "Seems like we can't switch the network automatically. Please check if you can change it from the wallet."
-msgstr "Seems like we can't switch the network automatically. Please check if you can change it from the wallet."
-
 #: src/modules/reserve-overview/BorrowInfo.tsx
 msgid "Borrow cap"
 msgstr "Borrow cap"
@@ -1193,6 +1189,8 @@ msgstr "deposited"
 #: src/components/transactions/StakeCooldown/StakeCooldownModalContent.tsx
 #: src/components/transactions/StakeCooldown/StakeCooldownModalContent.tsx
 #: src/components/transactions/Switch/SwitchAssetInput.tsx
+#: src/components/transactions/Warnings/ChangeNetworkWarning.tsx
+#: src/components/transactions/Warnings/ChangeNetworkWarning.tsx
 #: src/layouts/TopBarNotify.tsx
 #: src/layouts/TopBarNotify.tsx
 #: src/layouts/TopBarNotify.tsx
@@ -2979,10 +2977,6 @@ msgstr "Can be executed"
 msgid "Assets with zero LTV ({0}) must be withdrawn or disabled as collateral to perform this action"
 msgstr "Assets with zero LTV ({0}) must be withdrawn or disabled as collateral to perform this action"
 
-#: src/components/transactions/Warnings/ChangeNetworkWarning.tsx
-msgid "Please switch to {networkName}."
-msgstr "Please switch to {networkName}."
-
 #: src/components/transactions/GovDelegation/DelegationTypeSelector.tsx
 msgid "Both"
 msgstr "Both"
@@ -3127,6 +3121,10 @@ msgstr "The underlying balance needs to be greater than 0"
 msgid "Not enough staked balance"
 msgstr "Not enough staked balance"
 
+#: src/components/transactions/Warnings/ChangeNetworkWarning.tsx
+msgid "Switching to {networkName}..."
+msgstr "Switching to {networkName}..."
+
 #: src/components/transactions/Warnings/SNXWarning.tsx
 msgid "please check that the amount you want to supply is not currently being used for staking. If it is being used for staking, your transaction might fail."
 msgstr "please check that the amount you want to supply is not currently being used for staking. If it is being used for staking, your transaction might fail."

src/modules/umbrella/StakeCooldownModalContent.tsx

@@ -135,7 +135,11 @@ export const StakeCooldownModalContent = ({ stakeData }: { stakeData: MergedStak
     <>
       <TxModalTitle title="Cooldown to unstake" />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={currentNetworkConfig.name} chainId={currentChainId} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={currentNetworkConfig.name}
+          chainId={currentChainId}
+        />
       )}
       <Typography variant="description" sx={{ mb: 6 }}>
         <Trans>

src/modules/umbrella/UmbrellaClaimModalContent.tsx

@@ -108,7 +108,11 @@ export const UmbrellaClaimAllModalContent = ({ stakeData }: UmbrellaClaimAllModa
     <>
       <TxModalTitle title="Claim rewards" />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={requiredChainId} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={requiredChainId}
+        />
       )}
 
       <TxModalDetails gasLimit={gasLimit}>
@@ -198,7 +202,11 @@ export const UmbrellaClaimModalContent = ({ stakeData }: UmbrellaClaimModalConte
     <>
       <TxModalTitle title="Claim rewards" />
       {isWrongNetwork && !readOnlyModeAddress && (
-        <ChangeNetworkWarning networkName={networkConfig.name} chainId={requiredChainId} />
+        <ChangeNetworkWarning
+          autoSwitchOnMount={true}
+          networkName={networkConfig.name}
+          chainId={requiredChainId}
+        />
       )}
 
       {isMultiReward && (