feat: allow aux funds for name registration (#1125)

base-org · Oct 22, 2024 · ba34f1e · ba34f1e
1 parent 912e327
commit ba34f1e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git 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() {
                   <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
@@ -263,7 +270,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
@@ -273,7 +280,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>
@@ -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
@@ -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<ListedCapabilities, boolean>);
 
-  return {
-    atomicBatchEnabled,
-    paymasterServiceEnabled,
-  };
+  return capabilities;
 }
diff --git 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
@@ -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>(BatchCallsStatus.Idle);