feat: add visual indicator for user's gas remaining gas budget fetched from the paymaster

.changeset/nine-apes-attend.md

@@ -0,0 +1,5 @@
+---
+"@happy.tech/iframe": minor
+---
+
+Adds a visual indicator in the wallet for user's paymaster gas budget.

apps/iframe/src/components/interface/GlobalHeader.tsx

@@ -5,6 +5,7 @@ import { Link, useLocation } from "@tanstack/react-router"
 import { useAtom } from "jotai"
 import { appMessageBus } from "#src/services/eventBus"
 import { secondaryMenuVisibilityAtom } from "#src/state/interfaceState"
+import { UserGasBudgetIndicator } from "./home/UserGasBudgetIndicator"
 
 function signalClosed() {
     void appMessageBus.emit(Msgs.WalletVisibility, { isOpen: false })
@@ -27,6 +28,7 @@ const GlobalHeader = () => {
             </span>
 
             <div className="flex flex-row gap-1 items-center absolute end-2">
+                <UserGasBudgetIndicator />
                 <button
                     title={optionsLabel}
                     type="button"

apps/iframe/src/components/interface/home/UserGasBudgetIndicator.tsx

@@ -0,0 +1,57 @@
+import {
+    BatteryFullIcon,
+    BatteryHighIcon,
+    BatteryLowIcon,
+    BatteryMediumIcon,
+    BatteryWarningIcon,
+    type Icon,
+    SpinnerIcon,
+} from "@phosphor-icons/react"
+import { cx } from "class-variance-authority"
+import type { ClassValue } from "class-variance-authority/types"
+import { useReadUserGasBudget } from "#src/hooks/useReadUserGasBudget.ts"
+import { getUser } from "#src/state/user.ts"
+
+const colorMap: Record<number, ClassValue> = {
+    0: "text-error animate-pulse",
+    1: "text-warning/60",
+    2: "text-warning",
+    3: "text-success/80",
+    4: "text-success",
+}
+
+/**
+ * Maps each battery health level to the corresponding Phosphor Icon component.
+ */
+const batteryIconStates: Record<number, Icon> = {
+    0: BatteryWarningIcon,
+    1: BatteryLowIcon,
+    2: BatteryMediumIcon,
+    3: BatteryHighIcon,
+    4: BatteryFullIcon,
+}
+
+export const UserGasBudgetIndicator = () => {
+    const user = getUser()
+    const {
+        data: { batteryHealth, batteryPct } = {},
+        isLoading,
+    } = useReadUserGasBudget(user?.address)
+
+    if (isLoading || batteryHealth === undefined)
+        return (
+            <SpinnerIcon
+                weight="bold"
+                className="text-lg mr-1 dark:opacity-60 motion-safe:animate-[spin_2s_linear_infinite]"
+            />
+        )
+
+    const BatteryIcon = batteryIconStates[batteryHealth]
+    const colorClass = colorMap[batteryHealth]
+
+    return (
+        <button title={`${batteryPct}%`} type="button" aria-label={"gas budget"} className="dark:opacity-60">
+            <BatteryIcon weight="bold" className={cx(colorClass, "text-lg", "mr-1")} />
+        </button>
+    )
+}

apps/iframe/src/constants/contracts.ts

@@ -46,6 +46,7 @@ export const abis = getBoopAbis(chainId)
 export const entryPointAbi = abis.EntryPoint
 export const extensibleAccountAbi = abis.HappyAccountImpl
 export const sessionKeyValidatorAbi = abis.SessionKeyValidator
+export const happyPaymasterAbi = abis.HappyPaymaster
 
 //== Paymaster Selectors ===========================================================================
 

apps/iframe/src/hooks/useReadUserGasBudget.ts

@@ -0,0 +1,70 @@
+import type { Address, UInt32 } from "@happy.tech/common"
+import { type UseReadContractReturnType, useReadContract } from "wagmi"
+import { happyPaymaster, happyPaymasterAbi } from "#src/constants/contracts"
+
+/**
+ * Maximum cumulative gas budget per user as defined in the HappyPaymaster contract.
+ */
+const MAX_GAS_BUDGET: UInt32 = 1_000_000_000
+
+/**
+ * Structured gas budget info for UI display:
+ * - `batteryHealth`: discrete level 0–4
+ * - `batteryPct`: percentage of MAX_GAS_BUDGET (0–100).
+ */
+export type UserGasBudgetInfo = {
+    batteryHealth: number
+    batteryPct: number
+}
+
+/**
+ * Wagmi return type for the `getBudget` read call, mapped to `UserGasBudgetInfo`.
+ */
+export type UseReadUserGasBudgetReturnType = UseReadContractReturnType<
+    typeof happyPaymasterAbi,
+    "getBudget",
+    [Address],
+    UserGasBudgetInfo
+>
+
+/**
+ * Hook to fetch and map a user's gas budget from the HappyPaymaster contract.
+ *
+ * @param userAddress - address of the user whose budget to read
+ * @returns Wagmi query object with:
+ *   - `data`: `{ batteryHealth, batteryPct }`
+ *   - `isLoading`, `isError`, `refetch`, etc. (cf. {@link UseReadUserGasBudgetReturnType})
+ * @throws `Error` if no userAddress is provided.
+ */
+export const useReadUserGasBudget = (userAddress?: Address): UseReadUserGasBudgetReturnType => {
+    if (!userAddress) throw new Error("No user found!")
+
+    const result = useReadContract({
+        address: happyPaymaster,
+        abi: happyPaymasterAbi,
+        functionName: "getBudget",
+        args: [userAddress],
+        query: {
+            enabled: Boolean(!!userAddress),
+            refetchInterval: 2000,
+            /**
+             * Maps the raw onchain `userGasBudget` to UI-friendly battery info:
+             * 1. Calculate `pct` as the ratio of `userGasBudget` to `MAX_GAS_BUDGET` (0.0 – 1.0).
+             * 2. Derive `batteryHealth` (0–4) by flooring `pct * 4` into four equal buckets and
+             *    clamping between 0 and 4 to match discrete battery levels.
+             * 3. Compute `batteryPct` as a percentage string with two decimals (0 – 100).
+             *
+             * @param userGasBudget - raw uint32 gas budget from HappyPaymaster
+             */
+            select(userGasBudget) {
+                const pct = Number(userGasBudget) / MAX_GAS_BUDGET
+                return {
+                    batteryHealth: Math.min(4, Math.max(0, Math.floor(pct * 4))),
+                    batteryPct: Number((pct * 100).toFixed(2)),
+                }
+            },
+        },
+    })
+
+    return result
+}