From fb9c75139e52f5c86836ea969f0a1191ef60fd2c Mon Sep 17 00:00:00 2001
From: David Colon <38386583+Da-Colon@users.noreply.github.com>
Date: Tue, 10 Dec 2024 13:53:06 -0500
Subject: [PATCH] feat: integrate chain switching functionality in
 EstablishEssentials component

---
 .../formComponents/EstablishEssentials.tsx     | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx
index 1db69f86e..aa917e26c 100644
--- a/src/components/DaoCreator/formComponents/EstablishEssentials.tsx
+++ b/src/components/DaoCreator/formComponents/EstablishEssentials.tsx
@@ -3,6 +3,7 @@ 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,
@@ -10,7 +11,7 @@ import {
 } 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