diff --git a/src/refactor/wallet-client/network/use-network-switch-listen.ts b/src/refactor/wallet-client/network/use-network-switch-listen.ts new file mode 100644 index 00000000..1f384e73 --- /dev/null +++ b/src/refactor/wallet-client/network/use-network-switch-listen.ts @@ -0,0 +1,40 @@ +import type { Connector, Provider } from '@wagmi/core'; +import { useEffect } from 'react'; + +export const useNetworkSwitchListen = ({ + activeConnector, + stopSwitching, + networkError, +}: { + activeConnector?: Connector | undefined; + stopSwitching: () => void; + networkError: Error | null; +}) => { + useEffect(() => { + if (!activeConnector) { + return undefined; + } + + let provider: Provider; + + activeConnector + ?.getProvider?.() + .then((provider_: Provider) => { + provider = provider_; + provider.on('chainChanged', stopSwitching); + }) + .catch((error: unknown) => { + console.log("error getting provider's chainChanged event", error); + }); + + return () => { + provider?.removeListener('chainChanged', stopSwitching); + }; + }, [activeConnector, stopSwitching]); + + useEffect(() => { + if (networkError && networkError.name === 'UserRejectedRequestError') { + stopSwitching(); + } + }, [networkError, stopSwitching]); +}; diff --git a/src/refactor/wallet-client/network/use-network.ts b/src/refactor/wallet-client/network/use-network.ts index 09fb3ff3..f2f15d82 100644 --- a/src/refactor/wallet-client/network/use-network.ts +++ b/src/refactor/wallet-client/network/use-network.ts @@ -4,21 +4,21 @@ import { SupportedNetworks, getNetworkNameByChainId, } from '@masa-finance/masa-sdk'; -import type { Chain, Connector, GetNetworkResult, Provider } from '@wagmi/core'; +import type { Chain, Connector, GetNetworkResult } from '@wagmi/core'; -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { useSwitchNetwork, useNetwork as useNetworkWagmi, - useAccount, useConnect, + useAccount, } from 'wagmi'; export const useNetwork = () => { const { switchNetwork: switchNetworkWagmi, error: networkError } = useSwitchNetwork(); - const { connector: activeConnector } = useAccount(); const { connectors, pendingConnector } = useConnect(); + const { connector: activeConnector } = useAccount(); const { chains, chain: activeChain } = useNetworkWagmi(); const network = useNetworkWagmi(); const [switchingToChain, setSwitchingToChain] = useState(); @@ -81,33 +81,33 @@ export const useNetwork = () => { setSwitchingToChain(null); }, []); - useEffect(() => { - if (!activeConnector) { - return undefined; - } - - let provider: Provider; - - activeConnector - ?.getProvider?.() - .then((provider_: Provider) => { - provider = provider_; - provider.on('chainChanged', stopSwitching); - }) - .catch((error: unknown) => { - console.log("error getting provider's chainChanged event", error); - }); - - return () => { - provider?.removeListener('chainChanged', stopSwitching); - }; - }, [activeConnector, stopSwitching]); - - useEffect(() => { - if (networkError && networkError.name === 'UserRejectedRequestError') { - stopSwitching(); - } - }, [networkError, stopSwitching]); + // useEffect(() => { + // if (!activeConnector) { + // return undefined; + // } + + // let provider: Provider; + + // activeConnector + // ?.getProvider?.() + // .then((provider_: Provider) => { + // provider = provider_; + // provider.on('chainChanged', stopSwitching); + // }) + // .catch((error: unknown) => { + // console.log("error getting provider's chainChanged event", error); + // }); + + // return () => { + // provider?.removeListener('chainChanged', stopSwitching); + // }; + // }, [activeConnector, stopSwitching]); + + // useEffect(() => { + // if (networkError && networkError.name === 'UserRejectedRequestError') { + // stopSwitching(); + // } + // }, [networkError, stopSwitching]); const canProgramaticallySwitchNetwork = useMemo( () => !!switchNetwork || activeConnector?.name === 'WalletConnect', @@ -128,7 +128,8 @@ export const useNetwork = () => { availibleChains, pendingConnector, isActiveChainUnsupported, - + stopSwitching, + networkError, // * old currentNetwork, currentNetworkByChainId, @@ -154,5 +155,7 @@ export const useNetwork = () => { currentNetwork: Network | undefined; currentNetworkNew: GetNetworkResult; + stopSwitching: () => void; + networkError: Error | null; }; }; diff --git a/src/refactor/wallet-client/wallet-client-provider.tsx b/src/refactor/wallet-client/wallet-client-provider.tsx index 328414c5..ca5d684d 100644 --- a/src/refactor/wallet-client/wallet-client-provider.tsx +++ b/src/refactor/wallet-client/wallet-client-provider.tsx @@ -14,6 +14,7 @@ import { useAccountChangeListen } from './wallet/use-account-change-listen'; import { useConfig } from '../base-provider'; import { getChainIdNetworkMap } from './utils'; import { useDebug } from '../hooks/use-debug'; +import { useNetworkSwitchListen } from './network/use-network-switch-listen'; type WalletClientValue = ReturnType & ReturnType; @@ -50,6 +51,7 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => { connectors, switchNetwork, switchingToChain, + stopSwitching, canProgramaticallySwitchNetwork, activeChain, isSwitchingChain, @@ -57,6 +59,7 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => { isActiveChainUnsupported, availibleChains, pendingConnector, + networkError, } = useNetwork(); const onAccountChange = useCallback(() => console.log('account changed'), []); @@ -67,6 +70,12 @@ export const WalletClientProvider = ({ children }: WalletClientProps) => { onChainChange, }); + useNetworkSwitchListen({ + activeConnector: connector, + stopSwitching, + networkError, + }); + const chainIdsByNetwork = useMemo(() => { if (!chains || chains.length === 0) return {};