feat: integrate chain switching functionality in EstablishEssentials …

…component

src/components/DaoCreator/formComponents/EstablishEssentials.tsx

@@ -3,14 +3,15 @@ import { CheckCircle } from '@phosphor-icons/react';
 import debounce from 'lodash.debounce';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useChainId, useSwitchChain } from 'wagmi';
 import { createAccountSubstring } from '../../../hooks/utils/useGetAccountName';
 import {
   supportedNetworks,
   useNetworkConfigStore,
 } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
 import { GovernanceType, ICreationStepProps, VotingStrategyType } from '../../../types';
-import { getNetworkIcon } from '../../../utils/url';
+import { getChainIdFromPrefix, getNetworkIcon } from '../../../utils/url';
 import { InputComponent, LabelComponent } from '../../ui/forms/InputComponent';
 import LabelWrapper from '../../ui/forms/LabelWrapper';
 import { RadioWithText } from '../../ui/forms/Radio/RadioWithText';
@@ -71,7 +72,9 @@ export function EstablishEssentials(props: ICreationStepProps) {
     setFieldValue('essentials.governance', value);
   };
 
-  const { createOptions, setCurrentConfig, chain, getConfigByChainId } = useNetworkConfigStore();
+  const { createOptions, setCurrentConfig, chain, getConfigByChainId, addressPrefix } =
+    useNetworkConfigStore();
+  const walletChainID = useChainId();
 
   const [snapshotENSInput, setSnapshotENSInput] = useState('');
 
@@ -94,6 +97,17 @@ export function EstablishEssentials(props: ICreationStepProps) {
     selected: chain.id === network.chain.id,
   }));
 
+  const { switchChain } = useSwitchChain({
+    mutation: {
+      onError: () => {
+        if (chain.id !== walletChainID) {
+          const chainId = getChainIdFromPrefix(addressPrefix);
+          switchChain({ chainId });
+        }
+      },
+    },
+  });
+
   return (
     <>
       <StepWrapper