feat: allow aux funds for name registration

apps/web/src/components/Basenames/RegistrationForm/index.tsx

@@ -20,6 +20,7 @@ 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, { 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,
@@ -164,12 +165,16 @@ export default function RegistrationForm() {
     [setReverseRecord],
   );
 
+  const { auxiliaryFunds: auxiliaryFundsEnabled } = useCapabilitiesSafe({ chain: connectedChain });
   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) : '--.--';
@@ -267,14 +272,14 @@ export default function RegistrationForm() {
                   <div className="flex flex-row items-baseline justify-around gap-2">
                     <p
                       className={classNames('whitespace-nowrap text-3xl text-black line-through', {
-                        'text-state-n-hovered': insufficientBalanceToRegister,
+                        'text-state-n-hovered': insufficientFundsAndNoAuxFunds,
                       })}
                     >
                       {formatEtherPrice(initialPrice)}
                     </p>
                     <p
                       className={classNames('whitespace-nowrap text-3xl font-bold text-green-50', {
-                        'text-state-n-hovered': insufficientBalanceToRegister,
+                        'text-state-n-hovered': insufficientFundsAndNoAuxFunds,
                       })}
                     >
                       {formatEtherPrice(discountedPrice)} ETH
@@ -283,7 +288,7 @@ export default function RegistrationForm() {
                 ) : (
                   <p
                     className={classNames('whitespace-nowrap text-3xl font-bold text-black', {
-                      'text-state-n-hovered': insufficientBalanceToRegister,
+                      'text-state-n-hovered': insufficientFundsAndNoAuxFunds,
                     })}
                   >
                     {formatEtherPrice(price)} ETH
@@ -293,7 +298,7 @@ export default function RegistrationForm() {
                   <span className="whitespace-nowrap text-xl text-gray-60">${usdPrice}</span>
                 )}
               </div>
-              {insufficientBalanceToRegister ? (
+              {insufficientFundsAndNoAuxFunds ? (
                 <p className="text-sm text-state-n-hovered">your ETH balance is insufficient</p>
               ) : Boolean(nameIsFree && IS_EARLY_ACCESS) ? (
                 <p className="text-sm text-green-50">Discounted during Early Access.</p>
@@ -337,7 +342,7 @@ export default function RegistrationForm() {
                       variant={ButtonVariants.Black}
                       size={ButtonSizes.Medium}
                       disabled={
-                        insufficientBalanceToRegisterAndCorrectChain ||
+                        insufficientFundsNoAuxFundsAndCorrectChain ||
                         registerNameTransactionIsPending
                       }
                       isLoading={registerNameTransactionIsPending}
@@ -395,7 +400,6 @@ export default function RegistrationForm() {
             baseSingleYearEthCost={singleYearBasePrice}
             isOpen={premiumExplainerModalOpen}
             toggleModal={togglePremiumExplainerModal}
-            nameLength={selectedName?.length}
           />
         )}
       </>

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
@@ -12,26 +12,38 @@ import { Chain } from 'viem';
 import { useAccount } from 'wagmi';
 import { useCapabilities } from 'wagmi/experimental';
 
+// To add a new capability, add it to this list
+const capabilitiesList = ['atomicBatch', 'paymasterService', 'auxiliaryFunds'] as const;
+
+type ListedCapabilities = (typeof capabilitiesList)[number];
+
 export type UseCapabilitiesSafeProps = {
-  chain: Chain;
+  chain?: Chain;
 };
 
-export default function useCapabilitiesSafe({ chain }: UseCapabilitiesSafeProps) {
-  const { connector, isConnected } = useAccount();
+export default function useCapabilitiesSafe({
+  chain: paramChain,
+}: UseCapabilitiesSafeProps): Record<ListedCapabilities, boolean> {
+  const { connector, isConnected, chain: accountChain } = useAccount();
+  const chain = paramChain ?? accountChain;
 
   // Metamask doesn't support wallet_getCapabilities
   const isMetamaskWallet = connector?.id === 'io.metamask';
   const enabled = isConnected && !isMetamaskWallet;
 
-  const { data: capabilities } = useCapabilities({ query: { enabled } });
+  const { data: rawCapabilities } = useCapabilities({ query: { enabled } });
+
+  function isCapabilitySupported(capability: ListedCapabilities) {
+    return (
+      (chain && rawCapabilities && rawCapabilities[chain.id]?.[capability]?.supported === true) ??
+      false
+    );
+  }
 
-  const atomicBatchEnabled =
-    (capabilities && capabilities[chain.id]?.atomicBatch?.supported === true) ?? false;
-  const paymasterServiceEnabled =
-    (capabilities && capabilities[chain.id]?.paymasterService?.supported === true) ?? false;
+  const capabilities = capabilitiesList.reduce((acc, capability) => {
+    acc[capability] = isCapabilitySupported(capability);
+    return acc;
+  }, {} as Record<ListedCapabilities, boolean>);
 
-  return {
-    atomicBatchEnabled,
-    paymasterServiceEnabled,
-  };
+  return capabilities;
 }

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({ chain });
+  const { atomicBatch: atomicBatchEnabled } = useCapabilitiesSafe({ chain });
   const { chain: connectedChain } = useAccount();
 
   const [batchCallsStatus, setBatchCallsStatus] = useState<BatchCallsStatus>(BatchCallsStatus.Idle);