From b7406f3d015c9a851a489c1cbeae9cbdf6fee0fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9o=20Galley?= Date: Wed, 28 Aug 2024 17:18:20 -0400 Subject: [PATCH] correct chain checks (#966) --- .../web/src/components/Basenames/RegistrationFlow.tsx | 11 +++++++---- .../components/Basenames/RegistrationForm/index.tsx | 11 ++++++----- .../ConnectWalletButton/ConnectWalletButton.tsx | 8 ++++---- apps/web/src/hooks/useBasenameChain.ts | 2 +- 4 files changed, 18 insertions(+), 14 deletions(-) diff --git a/apps/web/src/components/Basenames/RegistrationFlow.tsx b/apps/web/src/components/Basenames/RegistrationFlow.tsx index 9bdd3bac10..0ac5a13e8b 100644 --- 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 index a9d94f8199..f9d24bdc29 100644 --- 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 index 8c132422cb..30b5465513 100644 --- 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 index 5c3c67756f..5ef7f047d5 100644 --- 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); }