[Bugfix | Issue #2565] Network Switching and context to store update

netlify/shared/moralisBalances.mts

@@ -3,7 +3,7 @@ import type { Store } from '@netlify/blobs';
 import Moralis from 'moralis';
 import { isAddress } from 'viem';
 import type { Address } from 'viem';
-import { moralisSupportedChainIds } from '../../src/providers/NetworkConfig/NetworkConfigProvider';
+import { moralisSupportedChainIds } from '../../src/providers/NetworkConfig/useNetworkConfigStore';
 
 export interface BalanceDataWithMetadata<T> {
   data: T[];

src/components/DAOTreasury/components/Transactions.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { getAddress } from 'viem';
 import { useDateTimeDisplay } from '../../../helpers/dateTime';
 import { useFractal } from '../../../providers/App/AppProvider';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
 import { TokenEventType, TransferDisplayData, TransferType } from '../../../types';
 import { DecentTooltip } from '../../ui/DecentTooltip';
@@ -14,7 +14,7 @@ import { BarLoader } from '../../ui/loaders/BarLoader';
 
 function TransferRow({ displayData }: { displayData: TransferDisplayData }) {
   const { t } = useTranslation(['treasury', 'common']);
-  const { etherscanBaseURL } = useNetworkConfig();
+  const { etherscanBaseURL } = useNetworkConfigStore();
 
   return (
     <Box

src/components/DAOTreasury/hooks/useTreasuryLidoInteractions.ts

@@ -5,7 +5,7 @@ import LidoWithdrawalQueueAbi from '../../../assets/abi/LidoWithdrawalQueueAbi';
 import useLidoStaking from '../../../hooks/stake/lido/useLidoStaking';
 import { useCanUserCreateProposal } from '../../../hooks/utils/useCanUserSubmitProposal';
 import { useFractal } from '../../../providers/App/AppProvider';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { ModalType } from '../../ui/modals/ModalProvider';
 import { useDecentModal } from '../../ui/modals/useDecentModal';
 
@@ -16,7 +16,7 @@ export default function useTreasuryLidoInteractions() {
   const ethAsset = assetsFungible.find(asset => !asset.tokenAddress);
   const { handleUnstake, handleClaimUnstakedETH } = useLidoStaking();
   const { canUserCreateProposal } = useCanUserCreateProposal();
-  const { staking } = useNetworkConfig();
+  const { staking } = useNetworkConfigStore();
   const publicClient = usePublicClient();
 
   // --- Lido Stake button setup ---

src/components/DaoCreator/StepController.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { toast } from 'sonner';
 import { useAccount } from 'wagmi';
-import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import {
   ChildERC20Steps,
   ChildERC721Steps,
@@ -25,7 +25,7 @@ import useStepRedirect from './hooks/useStepRedirect';
 
 function StepController(props: Omit<ICreationStepProps, 'steps'>) {
   const { t } = useTranslation('daoCreate');
-  const { createOptions } = useNetworkConfig();
+  const { createOptions } = useNetworkConfigStore();
   const location = useLocation();
 
   const { values, mode, setFieldValue } = props;

src/components/DaoCreator/StepWrapper.tsx

@@ -4,7 +4,7 @@ import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { BASE_ROUTES, DAO_ROUTES } from '../../constants/routes';
-import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
 import { CreatorSteps } from '../../types';
 import PageHeader from '../ui/page/Header/PageHeader';
@@ -49,7 +49,7 @@ export function StepWrapper({
   shouldWrapChildren = true,
 }: IStepWrapper) {
   const { safe } = useDaoInfoStore();
-  const { addressPrefix } = useNetworkConfig();
+  const { addressPrefix } = useNetworkConfigStore();
   const { t } = useTranslation(['breadcrumbs']);
   const navigate = useNavigate();
 

src/components/DaoCreator/formComponents/EstablishEssentials.tsx

@@ -1,14 +1,21 @@
-import { Box, Input, RadioGroup } from '@chakra-ui/react';
+import { Box, Flex, Icon, Image, Input, RadioGroup } from '@chakra-ui/react';
+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 { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import {
+  supportedNetworks,
+  useNetworkConfigStore,
+} from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
 import { GovernanceType, ICreationStepProps, VotingStrategyType } from '../../../types';
+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';
+import { DropdownMenu } from '../../ui/menus/DropdownMenu';
 import { StepButtons } from '../StepButtons';
 import { StepWrapper } from '../StepWrapper';
 
@@ -65,7 +72,9 @@ export function EstablishEssentials(props: ICreationStepProps) {
     setFieldValue('essentials.governance', value);
   };
 
-  const { createOptions } = useNetworkConfig();
+  const { createOptions, setCurrentConfig, chain, getConfigByChainId, addressPrefix } =
+    useNetworkConfigStore();
+  const walletChainID = useChainId();
 
   const [snapshotENSInput, setSnapshotENSInput] = useState('');
 
@@ -81,6 +90,24 @@ export function EstablishEssentials(props: ICreationStepProps) {
     debounceENSInput(snapshotENSInput);
   }, [debounceENSInput, snapshotENSInput]);
 
+  const dropdownItems = supportedNetworks.map(network => ({
+    value: network.chain.id.toString(),
+    label: network.chain.name,
+    icon: getNetworkIcon(network.addressPrefix),
+    selected: chain.id === network.chain.id,
+  }));
+
+  const { switchChain } = useSwitchChain({
+    mutation: {
+      onError: () => {
+        if (chain.id !== walletChainID) {
+          const chainId = getChainIdFromPrefix(addressPrefix);
+          switchChain({ chainId });
+        }
+      },
+    },
+  });
+
   return (
     <>
       <StepWrapper
@@ -102,6 +129,51 @@ export function EstablishEssentials(props: ICreationStepProps) {
           placeholder={t('daoNamePlaceholder')}
           testId="essentials-daoName"
         />
+        <Box
+          mt="2rem"
+          mb="1.5rem"
+        >
+          <LabelComponent
+            label={t('networks')}
+            helper={t('networkDescription')}
+            isRequired
+            alignLabel="flex-start"
+          >
+            <DropdownMenu
+              items={dropdownItems}
+              selectedItem={dropdownItems.find(item => item.selected)}
+              onSelect={item => {
+                setCurrentConfig(getConfigByChainId(Number(item.value)));
+              }}
+              title={t('networks')}
+              isDisabled={false}
+              renderItem={(item, isSelected) => {
+                return (
+                  <>
+                    <Flex
+                      alignItems="center"
+                      gap="1rem"
+                    >
+                      <Image
+                        src={item.icon}
+                        fallbackSrc="/images/coin-icon-default.svg"
+                        boxSize="2rem"
+                      />
+                      {item.label}
+                    </Flex>
+                    {isSelected && (
+                      <Icon
+                        as={CheckCircle}
+                        boxSize="1.5rem"
+                        color="lilac-0"
+                      />
+                    )}
+                  </>
+                );
+              }}
+            />
+          </LabelComponent>
+        </Box>
         <Box
           mt="2rem"
           mb="1.5rem"

src/components/DaoDashboard/Activities/ProposalsHome.tsx

@@ -7,7 +7,7 @@ import { DAO_ROUTES } from '../../../constants/routes';
 import { useProposalsSortedAndFiltered } from '../../../hooks/DAO/proposal/useProposals';
 import { useCanUserCreateProposal } from '../../../hooks/utils/useCanUserSubmitProposal';
 import { useFractal } from '../../../providers/App/AppProvider';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
 import {
   AzoriusGovernance,
@@ -39,7 +39,7 @@ export function ProposalsHome() {
   const { governance, guardContracts } = useFractal();
   const { safe } = useDaoInfoStore();
 
-  const { addressPrefix } = useNetworkConfig();
+  const { addressPrefix } = useNetworkConfigStore();
   const azoriusGovernance = governance as AzoriusGovernance;
   const delegate = useDecentModal(ModalType.DELEGATE);
 

src/components/DaoDashboard/Info/ParentLink.tsx

@@ -3,14 +3,14 @@ import { ArrowBendLeftUp } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { Link as RouterLink } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../constants/routes';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
 /**
  * Displays a link to the current DAO's parent, if it has one.
  */
 export function ParentLink() {
   const { subgraphInfo } = useDaoInfoStore();
-  const { addressPrefix } = useNetworkConfig();
+  const { addressPrefix } = useNetworkConfigStore();
   const { t } = useTranslation('breadcrumbs');
 
   if (!subgraphInfo?.parentAddress) {

src/components/DaoHierarchy/DaoHierarchyNode.tsx

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link as RouterLink } from 'react-router-dom';
 import { Address, getContract, zeroAddress } from 'viem';
-import { useChainId, usePublicClient } from 'wagmi';
+import { usePublicClient } from 'wagmi';
 import { DAOQueryDocument } from '../../../.graphclient';
 import { SENTINEL_ADDRESS } from '../../constants/common';
 import { DAO_ROUTES } from '../../constants/routes';
@@ -15,7 +15,7 @@ import { CacheKeys } from '../../hooks/utils/cache/cacheDefaults';
 import { setValue, getValue } from '../../hooks/utils/cache/useLocalStorage';
 import { useAddressContractType } from '../../hooks/utils/useAddressContractType';
 import { useSafeAPI } from '../../providers/App/hooks/useSafeAPI';
-import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
 import { DaoHierarchyInfo, DaoHierarchyStrategyType, DecentModule } from '../../types';
 import { getAzoriusModuleFromModules } from '../../utils';
@@ -43,8 +43,7 @@ export function DaoHierarchyNode({
   const safeApi = useSafeAPI();
   const [hierarchyNode, setHierarchyNode] = useState<DaoHierarchyInfo>();
   const [hasErrorLoading, setErrorLoading] = useState<boolean>(false);
-  const { addressPrefix, subgraph } = useNetworkConfig();
-  const chainId = useChainId();
+  const { addressPrefix, subgraph, chain } = useNetworkConfigStore();
   const publicClient = usePublicClient();
 
   const { getAddressContractType } = useAddressContractType();
@@ -168,7 +167,7 @@ export function DaoHierarchyNode({
     if (safeAddress) {
       const cachedNode = getValue({
         cacheName: CacheKeys.HIERARCHY_DAO_INFO,
-        chainId,
+        chainId: chain.id,
         daoAddress: safeAddress,
       });
       if (cachedNode) {
@@ -182,7 +181,7 @@ export function DaoHierarchyNode({
         setValue(
           {
             cacheName: CacheKeys.HIERARCHY_DAO_INFO,
-            chainId,
+            chainId: chain.id,
             daoAddress: safeAddress,
           },
           _node,

src/components/ProposalBuilder/index.tsx

@@ -11,7 +11,7 @@ import useSubmitProposal from '../../hooks/DAO/proposal/useSubmitProposal';
 import useCreateProposalSchema from '../../hooks/schemas/proposalBuilder/useCreateProposalSchema';
 import { useCanUserCreateProposal } from '../../hooks/utils/useCanUserSubmitProposal';
 import { useFractal } from '../../providers/App/AppProvider';
-import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { useProposalActionsStore } from '../../store/actions/useProposalActionsStore';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
 import { CreateProposalSteps, ProposalExecuteData } from '../../types';
@@ -58,7 +58,7 @@ export function ProposalBuilder({
   const { safe } = useDaoInfoStore();
   const safeAddress = safe?.address;
 
-  const { addressPrefix } = useNetworkConfig();
+  const { addressPrefix } = useNetworkConfigStore();
   const { submitProposal, pendingCreateTx } = useSubmitProposal();
   const { canUserCreateProposal } = useCanUserCreateProposal();
   const { createProposalValidation } = useCreateProposalSchema();

src/components/ProposalTemplates/ProposalTemplateCard.tsx

@@ -7,7 +7,7 @@ import { DAO_ROUTES } from '../../constants/routes';
 import useRemoveProposalTemplate from '../../hooks/DAO/proposal/useRemoveProposalTemplate';
 import useSubmitProposal from '../../hooks/DAO/proposal/useSubmitProposal';
 import { useCanUserCreateProposal } from '../../hooks/utils/useCanUserSubmitProposal';
-import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
 import { ProposalTemplate } from '../../types/proposalBuilder';
 import ContentBox from '../ui/containers/ContentBox';
@@ -29,7 +29,7 @@ export default function ProposalTemplateCard({
   const { t } = useTranslation('proposalTemplate');
   const { safe } = useDaoInfoStore();
 
-  const { addressPrefix } = useNetworkConfig();
+  const { addressPrefix } = useNetworkConfigStore();
 
   const { prepareRemoveProposalTemplateProposal } = useRemoveProposalTemplate();
   const { submitProposal } = useSubmitProposal();

src/components/Proposals/MultisigProposalDetails/TxActions.tsx

@@ -14,7 +14,7 @@ import { useAsyncRequest } from '../../../hooks/utils/useAsyncRequest';
 import { useTransaction } from '../../../hooks/utils/useTransaction';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useSafeAPI } from '../../../providers/App/hooks/useSafeAPI';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
 import { MultisigProposal, FractalProposalState } from '../../../types';
 import { DecentTooltip } from '../../ui/DecentTooltip';
@@ -42,7 +42,7 @@ export function TxActions({ proposal }: { proposal: MultisigProposal }) {
     }
   }, [proposal.state]);
 
-  const { chain } = useNetworkConfig();
+  const { chain } = useNetworkConfigStore();
   const { t } = useTranslation(['proposal', 'common', 'transaction']);
 
   const [asyncRequest, asyncRequestPending] = useAsyncRequest();

src/components/Proposals/ProposalCard/ProposalCard.tsx

@@ -3,7 +3,7 @@ import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { DAO_ROUTES } from '../../../constants/routes';
-import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
 import { AzoriusProposal, FractalProposal, SnapshotProposal } from '../../../types';
 import { DEFAULT_DATE_FORMAT } from '../../../utils';
@@ -15,7 +15,7 @@ import { ProposalCountdown } from '../../ui/proposal/ProposalCountdown';
 
 function ProposalCard({ proposal }: { proposal: FractalProposal }) {
   const { safe } = useDaoInfoStore();
-  const { addressPrefix } = useNetworkConfig();
+  const { addressPrefix } = useNetworkConfigStore();
   const { t } = useTranslation('common');
 
   if (!safe?.address) {

src/components/Roles/RoleDetails.tsx

@@ -10,7 +10,7 @@ import useAvatar from '../../hooks/utils/useAvatar';
 import { useCanUserCreateProposal } from '../../hooks/utils/useCanUserSubmitProposal';
 import { useCopyText } from '../../hooks/utils/useCopyText';
 import { useGetAccountName } from '../../hooks/utils/useGetAccountName';
-import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
 import {
   paymentSorterByActiveStatus,
@@ -79,7 +79,7 @@ export default function RolesDetails({
 }) {
   const { safe } = useDaoInfoStore();
   const navigate = useNavigate();
-  const { addressPrefix } = useNetworkConfig();
+  const { addressPrefix } = useNetworkConfigStore();
   const permissionsContainerRef = useRef<HTMLDivElement>(null);
 
   const roleHatWearer = 'wearer' in roleHat ? roleHat.wearer : roleHat.wearerAddress;

src/components/Roles/RolePaymentDetails.tsx

@@ -8,7 +8,7 @@ import { Address, getAddress, Hex } from 'viem';
 import { useAccount, usePublicClient } from 'wagmi';
 import { DETAILS_BOX_SHADOW, isDemoMode } from '../../constants/common';
 import { DAO_ROUTES } from '../../constants/routes';
-import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
 import { useRolesStore } from '../../store/roles/useRolesStore';
 import { BigIntValuePair } from '../../types';
@@ -141,7 +141,7 @@ export function RolePaymentDetails({
   const { t } = useTranslation(['roles']);
   const { safe } = useDaoInfoStore();
   const { address: connectedAccount } = useAccount();
-  const { addressPrefix } = useNetworkConfig();
+  const { addressPrefix } = useNetworkConfigStore();
   const { refreshWithdrawableAmount } = useRolesStore();
   const navigate = useNavigate();
   const publicClient = usePublicClient();

src/components/Roles/RoleTerm.tsx

@@ -12,7 +12,7 @@ import useAvatar from '../../hooks/utils/useAvatar';
 import { useCopyText } from '../../hooks/utils/useCopyText';
 import { useGetAccountName } from '../../hooks/utils/useGetAccountName';
 import { useTransaction } from '../../hooks/utils/useTransaction';
-import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
+import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { useRolesStore } from '../../store/roles/useRolesStore';
 import { RoleFormTermStatus } from '../../types/roles';
 import { DEFAULT_DATE_TIME_FORMAT_NO_TZ } from '../../utils';
@@ -284,7 +284,7 @@ export default function RoleTerm({
   const { t } = useTranslation(['roles']);
   const {
     contracts: { hatsProtocol },
-  } = useNetworkConfig();
+  } = useNetworkConfigStore();
 
   const roleHat = useMemo(() => {
     if (!hatId) return undefined;