feat(entrykit): quarry paymaster relay.link top-up (#3688)

Co-authored-by: Kevin Ingersoll <kingersoll@gmail.com>

Author: karooolis

.changeset/ninety-keys-fold.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/entrykit": patch
+---
+
+Added support for Quarry paymaster top-up via relay.link deposit form.

packages/entrykit/package.json

@@ -53,7 +53,9 @@
     "@latticexyz/world": "workspace:*",
     "@latticexyz/world-module-callwithsignature": "workspace:*",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-select": "^1.0.5",
     "@rainbow-me/rainbowkit": "2.1.7",
+    "@reservoir0x/relay-sdk": "^1.7.0",
     "debug": "^4.3.4",
     "dotenv": "^16.0.3",
     "permissionless": "0.2.30",

packages/entrykit/src/formatGas.ts

@@ -0,0 +1,8 @@
+import { formatGwei } from "viem";
+
+export function formatGas(wei: bigint) {
+  // TODO: should this support non-ether decimals?
+  const formatted = formatGwei(wei);
+  const magnitude = Math.floor(parseFloat(formatted)).toString().length;
+  return parseFloat(formatted).toLocaleString("en-US", { maximumFractionDigits: Math.max(0, 6 - magnitude) });
+}

packages/entrykit/src/getPaymaster.ts

@@ -3,6 +3,7 @@ import { Chain, Hex } from "viem";
 export type Paymaster = {
   readonly type: "simple" | "quarry";
   readonly address: Hex;
+  readonly isGasPass?: boolean;
 };
 
 export function getPaymaster(chain: Chain): Paymaster | undefined {
@@ -13,6 +14,7 @@ export function getPaymaster(chain: Chain): Paymaster | undefined {
       return {
         type: "quarry",
         address: contracts.quarryPaymaster.address,
+        isGasPass: !!chain.rpcUrls.quarryPassIssuer?.http?.[0],
       };
     }
   }

packages/entrykit/src/icons/ArrowLeftIcon.tsx

@@ -0,0 +1,16 @@
+import { IconSVG, Props } from "./IconSVG";
+
+export function ArrowLeftIcon(props: Props) {
+  return (
+    <IconSVG {...props}>
+      <path
+        d="M19 12H5M12 19l-7-7 7-7"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconSVG>
+  );
+}

packages/entrykit/src/onboarding/ConnectedSteps.tsx

@@ -1,16 +1,17 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { ConnectedClient } from "../common";
+import { Address } from "viem";
 import { twMerge } from "tailwind-merge";
+import { ConnectedClient } from "../common";
 import { usePrerequisites } from "./usePrerequisites";
 import { Wallet } from "./Wallet";
 import { Allowance } from "./quarry/Allowance";
 import { Session } from "./Session";
 import { Step } from "./common";
-import { Address } from "viem";
 import { useAccountModal } from "../useAccountModal";
 import { useEntryKitConfig } from "../EntryKitConfigProvider";
 import { getPaymaster } from "../getPaymaster";
 import { GasBalance } from "./GasBalance";
+import { GasBalance as GasBalanceQuarry } from "./quarry/GasBalance";
 
 export type Props = {
   userClient: ConnectedClient;
@@ -20,6 +21,7 @@ export type Props = {
 export function ConnectedSteps({ userClient, initialUserAddress }: Props) {
   const { chain } = useEntryKitConfig();
   const paymaster = getPaymaster(chain);
+  const [focusedId, setFocusedId] = useState<string | null>(null);
 
   const userAddress = userClient.account.address;
   const { data: prerequisites, error: prerequisitesError } = usePrerequisites(userAddress);
@@ -47,7 +49,8 @@ export function ConnectedSteps({ userClient, initialUserAddress }: Props) {
     }
   }, [closeAccountModal, isNewConnection, prerequisites]);
 
-  const { sessionAddress, hasAllowance, isSpender, hasDelegation, hasGasBalance } = prerequisites ?? {};
+  const { sessionAddress, hasAllowance, isSpender, hasDelegation, hasGasBalance, hasQuarryBalance } =
+    prerequisites ?? {};
 
   const steps = useMemo((): readonly Step[] => {
     if (!userAddress) {
@@ -77,11 +80,19 @@ export function ConnectedSteps({ userClient, initialUserAddress }: Props) {
         });
       }
     } else if (paymaster.type === "quarry") {
-      steps.push({
-        id: "allowance",
-        isComplete: !!hasAllowance,
-        content: (props) => <Allowance {...props} userAddress={userAddress} />,
-      });
+      if (paymaster.isGasPass) {
+        steps.push({
+          id: "allowance",
+          isComplete: !!hasAllowance,
+          content: (props) => <Allowance {...props} userAddress={userAddress} />,
+        });
+      } else {
+        steps.push({
+          id: "gasBalanceQuarry",
+          isComplete: !!hasQuarryBalance,
+          content: (props) => <GasBalanceQuarry {...props} userAddress={userAddress} />,
+        });
+      }
     }
 
     steps.push({
@@ -93,7 +104,17 @@ export function ConnectedSteps({ userClient, initialUserAddress }: Props) {
     });
 
     return steps;
-  }, [hasAllowance, hasDelegation, hasGasBalance, isSpender, paymaster, sessionAddress, userAddress, userClient]);
+  }, [
+    hasAllowance,
+    hasDelegation,
+    hasGasBalance,
+    hasQuarryBalance,
+    isSpender,
+    paymaster,
+    sessionAddress,
+    userAddress,
+    userClient,
+  ]);
 
   const [selectedStepId] = useState<null | string>(null);
   const nextStep = steps.find((step) => step.content != null && !step.isComplete);
@@ -107,19 +128,35 @@ export function ConnectedSteps({ userClient, initialUserAddress }: Props) {
   return (
     <div
       className={twMerge(
-        // steps.length === 2 ? "min-h-[22rem]" : "min-h-[26rem]",
-        "px-8 flex flex-col divide-y divide-neutral-800",
+        "px-8 flex flex-col",
+        focusedId && "divide-y divide-neutral-800",
         "animate-in animate-duration-300 fade-in slide-in-from-bottom-8",
       )}
     >
       {steps.map((step, i) => {
         const isActive = step === activeStep;
         const isExpanded = isActive || completedSteps.length === steps.length;
         const isDisabled = !step.isComplete && activeStepIndex !== -1 && i > activeStepIndex;
+        const isFocused = focusedId === step.id;
+
+        const content = step.content({
+          isActive,
+          isExpanded,
+          isFocused,
+          setFocused: (focused: boolean) => setFocusedId(focused ? step.id : null),
+        });
+
+        if (focusedId) {
+          if (step.id === focusedId) {
+            return content;
+          }
+          return null;
+        }
+
         return (
           <div key={step.id} className={twMerge("py-8 flex flex-col justify-center", isActive ? "flex-grow" : null)}>
             <div className={twMerge("flex flex-col", isDisabled ? "opacity-30 pointer-events-none" : null)}>
-              {step.content({ isActive, isExpanded })}
+              {content}
             </div>
           </div>
         );

packages/entrykit/src/onboarding/GasBalance.tsx

@@ -6,14 +6,12 @@ import { useBalance, useWatchBlockNumber } from "wagmi";
 import { useEntryKitConfig } from "../EntryKitConfigProvider";
 import relayChains from "../data/relayChains.json";
 import { useSetBalance } from "./useSetBalance";
-import { RelayChains } from "./common";
+import { RelayChains, StepContentProps } from "./common";
 import { TruncatedHex } from "../ui/TruncatedHex";
 import { useShowMutationError } from "../errors/useShowMutationError";
 import { useShowQueryError } from "../errors/useShowQueryError";
 
-export type Props = {
-  isExpanded: boolean;
-  isActive: boolean;
+export type Props = StepContentProps & {
   sessionAddress: Hex;
 };
 
@@ -24,7 +22,6 @@ export function GasBalance({ isActive, isExpanded, sessionAddress }: Props) {
   useWatchBlockNumber({ onBlockNumber: () => balance.refetch() });
 
   const setBalance = useShowMutationError(useSetBalance());
-
   const relayChain = (relayChains as RelayChains)[chain.id];
 
   return (

packages/entrykit/src/onboarding/Session.tsx

@@ -5,10 +5,9 @@ import { useEffect } from "react";
 import { useSessionClient } from "../useSessionClient";
 import { useShowQueryError } from "../errors/useShowQueryError";
 import { useShowMutationError } from "../errors/useShowMutationError";
+import { StepContentProps } from "./common";
 
-export type Props = {
-  isActive: boolean;
-  isExpanded: boolean;
+export type Props = StepContentProps & {
   userClient: ConnectedClient;
   registerSpender: boolean;
   registerDelegation: boolean;

packages/entrykit/src/onboarding/Wallet.tsx

@@ -5,10 +5,9 @@ import { Button } from "../ui/Button";
 import { useAccountModal } from "../useAccountModal";
 import { Hex } from "viem";
 import { useShowMutationError } from "../errors/useShowMutationError";
+import { StepContentProps } from "./common";
 
-export type Props = {
-  isActive: boolean;
-  isExpanded: boolean;
+export type Props = StepContentProps & {
   userAddress: Hex;
 };
 
@@ -18,7 +17,6 @@ export function Wallet({ isActive, isExpanded, userAddress }: Props) {
   const { closeAccountModal } = useAccountModal();
 
   // TODO: render ENS avatar if available?
-
   return (
     <div className="flex flex-col gap-4">
       <div className="flex justify-between gap-4">

packages/entrykit/src/onboarding/common.ts

@@ -1,9 +1,16 @@
 import { ReactNode } from "react";
 
+export type StepContentProps = {
+  isActive: boolean;
+  isExpanded: boolean;
+  isFocused: boolean;
+  setFocused: (isFocused: boolean) => void;
+};
+
 export type Step = {
   id: string;
   isComplete: boolean;
-  content: (props: { isActive: boolean; isExpanded: boolean }) => ReactNode;
+  content: (props: StepContentProps) => ReactNode;
 };
 
 export type RelayChain = {