diff --git a/apps/web/src/components/Basenames/RegistrationForm/index.tsx b/apps/web/src/components/Basenames/RegistrationForm/index.tsx index 3d3634d336..79681e9bb0 100644 --- a/apps/web/src/components/Basenames/RegistrationForm/index.tsx +++ b/apps/web/src/components/Basenames/RegistrationForm/index.tsx @@ -19,6 +19,7 @@ import Tooltip from 'apps/web/src/components/Tooltip'; import TransactionError from 'apps/web/src/components/TransactionError'; import { usePremiumEndDurationRemaining } from 'apps/web/src/hooks/useActiveEthPremiumAmount'; import useBasenameChain, { supportedChainIds } from 'apps/web/src/hooks/useBasenameChain'; +import useCapabilitiesSafe from 'apps/web/src/hooks/useCapabilitiesSafe'; import { useEthPriceFromUniswap } from 'apps/web/src/hooks/useEthPriceFromUniswap'; import { useDiscountedNameRegistrationPrice, @@ -144,12 +145,18 @@ export default function RegistrationForm() { [setReverseRecord], ); + const { auxiliaryFunds: auxiliaryFundsEnabled } = useCapabilitiesSafe({ + chainId: connectedChain?.id, + }); const { data: balance } = useBalance({ address, chainId: connectedChain?.id }); const insufficientBalanceToRegister = balance?.value !== undefined && price !== undefined && balance?.value < price; const correctChain = connectedChain?.id === basenameChain.id; + const insufficientFundsAndNoAuxFunds = insufficientBalanceToRegister && !auxiliaryFundsEnabled; const insufficientBalanceToRegisterAndCorrectChain = insufficientBalanceToRegister && correctChain; + const insufficientFundsNoAuxFundsAndCorrectChain = + !auxiliaryFundsEnabled && insufficientBalanceToRegisterAndCorrectChain; const hasResolvedUSDPrice = price !== undefined && ethUsdPrice !== undefined; const usdPrice = hasResolvedUSDPrice ? formatUsdPrice(price, ethUsdPrice) : '--.--'; @@ -247,14 +254,14 @@ export default function RegistrationForm() {

{formatEtherPrice(initialPrice)}

{formatEtherPrice(discountedPrice)} ETH @@ -263,7 +270,7 @@ export default function RegistrationForm() { ) : (

{formatEtherPrice(price)} ETH @@ -273,7 +280,7 @@ export default function RegistrationForm() { ${usdPrice} )}

- {insufficientBalanceToRegister ? ( + {insufficientFundsAndNoAuxFunds ? (

your ETH balance is insufficient

) : Boolean(nameIsFree && IS_EARLY_ACCESS) ? (

Discounted during Early Access.

@@ -316,9 +323,7 @@ export default function RegistrationForm() { type="button" variant={ButtonVariants.Black} size={ButtonSizes.Medium} - disabled={ - insufficientBalanceToRegisterAndCorrectChain || registerNameIsPending - } + disabled={insufficientFundsNoAuxFundsAndCorrectChain || registerNameIsPending} isLoading={registerNameIsPending} rounded fullWidth @@ -371,7 +376,6 @@ export default function RegistrationForm() { baseSingleYearEthCost={singleYearBasePrice} isOpen={premiumExplainerModalOpen} toggleModal={togglePremiumExplainerModal} - nameLength={selectedName?.length} /> )} diff --git a/apps/web/src/hooks/useCapabilitiesSafe.ts b/apps/web/src/hooks/useCapabilitiesSafe.ts index 09f9c419ba..c3142a5ebf 100644 --- a/apps/web/src/hooks/useCapabilitiesSafe.ts +++ b/apps/web/src/hooks/useCapabilitiesSafe.ts @@ -1,7 +1,7 @@ /* A hook to safely check wallet_getCapabilities support - Responsabilities: + Responsibilities: - Check for unsupported wallets (e.g: metamask) - Use experimental useCapabilities - Check atomicBatch (batchcall) and paymasterService for a given chain @@ -13,6 +13,11 @@ import { base } from 'viem/chains'; import { useAccount } from 'wagmi'; import { useCapabilities } from 'wagmi/experimental'; +// To add a new capability, add it to this list +const CAPABILITIES_LIST = ['atomicBatch', 'paymasterService', 'auxiliaryFunds'] as const; + +type ListedCapabilities = (typeof CAPABILITIES_LIST)[number]; + export type UseCapabilitiesSafeProps = { chainId?: Chain['id']; }; @@ -24,17 +29,21 @@ export default function useCapabilitiesSafe({ chainId }: UseCapabilitiesSafeProp const isMetamaskWallet = connector?.id === 'io.metamask'; const enabled = isConnected && !isMetamaskWallet; - const { data: capabilities } = useCapabilities({ query: { enabled } }); + const { data: rawCapabilities } = useCapabilities({ query: { enabled } }); const featureChainId = chainId ?? currentChainId ?? base.id; - const atomicBatchEnabled = - (capabilities && capabilities[featureChainId]?.atomicBatch?.supported === true) ?? false; - const paymasterServiceEnabled = - (capabilities && capabilities[featureChainId]?.paymasterService?.supported === true) ?? false; + function isCapabilitySupported(capability: ListedCapabilities) { + return ( + (rawCapabilities && rawCapabilities[featureChainId]?.[capability]?.supported === true) ?? + false + ); + } + + const capabilities = CAPABILITIES_LIST.reduce((acc, capability) => { + acc[capability] = isCapabilitySupported(capability); + return acc; + }, {} as Record); - return { - atomicBatchEnabled, - paymasterServiceEnabled, - }; + return capabilities; } diff --git a/apps/web/src/hooks/useRegisterNameCallback.ts b/apps/web/src/hooks/useRegisterNameCallback.ts index f812f1b08f..211a16cbc7 100644 --- a/apps/web/src/hooks/useRegisterNameCallback.ts +++ b/apps/web/src/hooks/useRegisterNameCallback.ts @@ -32,7 +32,7 @@ export function useRegisterNameCallback( const { address } = useAccount(); const { basenameChain } = useBasenameChain(); const { logError } = useErrors(); - const { paymasterServiceEnabled } = useCapabilitiesSafe({ + const { paymasterService: paymasterServiceEnabled } = useCapabilitiesSafe({ chainId: basenameChain.id, }); diff --git a/apps/web/src/hooks/useWriteContractsWithLogs.ts b/apps/web/src/hooks/useWriteContractsWithLogs.ts index 5628e2ed60..fcca09297d 100644 --- a/apps/web/src/hooks/useWriteContractsWithLogs.ts +++ b/apps/web/src/hooks/useWriteContractsWithLogs.ts @@ -55,7 +55,7 @@ export default function useWriteContractsWithLogs({ // Errors & Analytics const { logEventWithContext } = useAnalytics(); const { logError } = useErrors(); - const { atomicBatchEnabled } = useCapabilitiesSafe({ chainId: chain.id }); + const { atomicBatch: atomicBatchEnabled } = useCapabilitiesSafe({ chainId: chain.id }); const { chain: connectedChain } = useAccount(); const [batchCallsStatus, setBatchCallsStatus] = useState(BatchCallsStatus.Idle);