correct chain checks (#966)

base-org · Aug 28, 2024 · b7406f3 · b7406f3
1 parent 184c79b
commit b7406f3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/apps/web/src/components/Basenames/RegistrationFlow.tsx b/apps/web/src/components/Basenames/RegistrationFlow.tsx
@@ -17,7 +17,7 @@ import { RegistrationSearchInputVariant } from './RegistrationSearchInput/types'
 import RegistrationSuccessMessage from 'apps/web/src/components/Basenames/RegistrationSuccessMessage';
 import { UsernamePill } from 'apps/web/src/components/Basenames/UsernamePill';
 import { UsernamePillVariants } from 'apps/web/src/components/Basenames/UsernamePill/types';
-import useBasenameChain from 'apps/web/src/hooks/useBasenameChain';
+import useBasenameChain, { supportedChainIds } from 'apps/web/src/hooks/useBasenameChain';
 import {
   formatBaseEthDomain,
   IS_EARLY_ACCESS,
@@ -27,7 +27,7 @@ import classNames from 'classnames';
 import { ActionType } from 'libs/base-ui/utils/logEvent';
 import { useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useMemo } from 'react';
-import { useAccount, useChains, useSwitchChain } from 'wagmi';
+import { useAccount, useSwitchChain } from 'wagmi';
 import { InformationCircleIcon } from '@heroicons/react/16/solid';
 import Tooltip from 'apps/web/src/components/Tooltip';
 import RegistrationShareOnSocials from 'apps/web/src/components/Basenames/RegistrationShareOnSocials';
@@ -59,9 +59,12 @@ export function RegistrationFlow() {
   } = useRegistration();
   const { basenameChain } = useBasenameChain();
   const { switchChain } = useSwitchChain();
-  const chains = useChains();
 
-  const isOnSupportedNetwork = useMemo(() => chain && chains.includes(chain), [chain, chains]);
+  const isOnSupportedNetwork = useMemo(
+    () => chain && supportedChainIds.includes(chain.id),
+    [chain],
+  );
+
   const switchToIntendedNetwork = useCallback(
     () => switchChain({ chainId: basenameChain.id }),
     [basenameChain.id, switchChain],

diff --git a/apps/web/src/components/Basenames/RegistrationForm/index.tsx b/apps/web/src/components/Basenames/RegistrationForm/index.tsx
@@ -19,7 +19,7 @@ import Tooltip from 'apps/web/src/components/Tooltip';
 import TransactionError from 'apps/web/src/components/TransactionError';
 import TransactionStatus from 'apps/web/src/components/TransactionStatus';
 import { usePremiumEndDurationRemaining } from 'apps/web/src/hooks/useActiveEthPremiumAmount';
-import useBasenameChain from 'apps/web/src/hooks/useBasenameChain';
+import useBasenameChain, { supportedChainIds } from 'apps/web/src/hooks/useBasenameChain';
 import { useEthPriceFromUniswap } from 'apps/web/src/hooks/useEthPriceFromUniswap';
 import {
   useDiscountedNameRegistrationPrice,
@@ -32,7 +32,7 @@ import classNames from 'classnames';
 import { ActionType } from 'libs/base-ui/utils/logEvent';
 import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { formatEther, zeroAddress } from 'viem';
-import { useAccount, useBalance, useChains, useReadContract, useSwitchChain } from 'wagmi';
+import { useAccount, useBalance, useReadContract, useSwitchChain } from 'wagmi';
 
 function formatEtherPrice(price?: bigint) {
   if (price === undefined) {
@@ -55,19 +55,20 @@ function formatUsdPrice(price: bigint, ethUsdPrice: number) {
 
 export default function RegistrationForm() {
   const { isConnected, chain: connectedChain, address } = useAccount();
-  const chains = useChains();
+
   const { openConnectModal } = useConnectModal();
   const { logEventWithContext } = useAnalytics();
   const { logError } = useErrors();
   const { basenameChain } = useBasenameChain();
   const { switchChain } = useSwitchChain();
+
   const switchToIntendedNetwork = useCallback(
     () => switchChain({ chainId: basenameChain.id }),
     [basenameChain.id, switchChain],
   );
   const isOnSupportedNetwork = useMemo(
-    () => connectedChain && chains.includes(connectedChain),
-    [connectedChain, chains],
+    () => connectedChain && supportedChainIds.includes(connectedChain.id),
+    [connectedChain],
   );
 
   const {

diff --git a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -13,7 +13,7 @@ import { Button, ButtonSizes, ButtonVariants } from 'apps/web/src/components/But
 import { UserAvatar } from 'apps/web/src/components/ConnectWalletButton/UserAvatar';
 import { Icon } from 'apps/web/src/components/Icon/Icon';
 import { ShinyButton } from 'apps/web/src/components/ShinyButton/ShinyButton';
-import useBasenameChain from 'apps/web/src/hooks/useBasenameChain';
+import useBasenameChain, { supportedChainIds } from 'apps/web/src/hooks/useBasenameChain';
 import logEvent, {
   ActionType,
   AnalyticsEventImportance,
@@ -24,7 +24,7 @@ import sanitizeEventString from 'base-ui/utils/sanitizeEventString';
 import classNames from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
 import { useCopyToClipboard } from 'usehooks-ts';
-import { useAccount, useChains, useSwitchChain } from 'wagmi';
+import { useAccount, useSwitchChain } from 'wagmi';
 
 export enum ConnectWalletButtonVariants {
   Default,
@@ -62,8 +62,8 @@ export function ConnectWalletButton({
 
   // Wagmi
   const { address, connector, isConnected, isConnecting, isReconnecting, chain } = useAccount();
-  const chains = useChains();
-  const chainSupported = !!chain && chains.includes(chain);
+
+  const chainSupported = !!chain && supportedChainIds.includes(chain.id);
   const { basenameChain } = useBasenameChain();
   const [, copy] = useCopyToClipboard();
   const copyAddress = useCallback(() => void copy(address ?? ''), [address, copy]);

diff --git a/apps/web/src/hooks/useBasenameChain.ts b/apps/web/src/hooks/useBasenameChain.ts
@@ -17,7 +17,7 @@ export function getBasenamePublicClient(chainId: number) {
   });
 }
 
-const supportedChainIds: number[] = [base.id, baseSepolia.id];
+export const supportedChainIds: number[] = [base.id, baseSepolia.id];
 export function isBasenameSupportedChain(chainId: number) {
   return supportedChainIds.includes(chainId);
 }