From b78421c3e367e6e9d258432e947768ac17d0eb2e Mon Sep 17 00:00:00 2001
From: jakehobbs <jacob.hobbs@alchemy.com>
Date: Fri, 14 Feb 2025 22:10:44 -0800
Subject: [PATCH 1/5] fix: session key demo: improve timers, styles, and error
 handling

---
 .../src/components/small-cards/MintCard.tsx   |  11 +-
 .../components/small-cards/Transactions.tsx   |  30 ++--
 .../small-cards/TransactionsCard.tsx          |  16 +--
 .../src/components/small-cards/Wrapper.tsx    |   2 +-
 .../src/hooks/useRecurringTransactions.ts     | 132 ++++++++++++------
 ...lchemyGasAndPaymasterAndDataMiddleware.mdx |  68 +++++++++
 6 files changed, 180 insertions(+), 79 deletions(-)
 create mode 100644 site/pages/reference/account-kit/infra/functions/alchemyGasAndPaymasterAndDataMiddleware.mdx

diff --git a/examples/ui-demo/src/components/small-cards/MintCard.tsx b/examples/ui-demo/src/components/small-cards/MintCard.tsx
index 57fab59326..d5f60b3af0 100644
--- a/examples/ui-demo/src/components/small-cards/MintCard.tsx
+++ b/examples/ui-demo/src/components/small-cards/MintCard.tsx
@@ -54,12 +54,11 @@ const MintCardInner = ({
             <LoadingIcon />
           )}
         </div>
-        <div>
-          <div className="mb-2">
-            <h3 className="text-fg-primary text-base xl:text-xl font-semibold">
-              Gasless transactions
-            </h3>
-          </div>
+        <div className="w-full mb-3">
+          <h3 className="text-fg-primary xl:text-xl font-semibold mb-2 xl:mb-3">
+            Gasless transactions
+          </h3>
+
           {!mintStarted ? (
             <>
               <p className="text-fg-primary text-sm mb-3">
diff --git a/examples/ui-demo/src/components/small-cards/Transactions.tsx b/examples/ui-demo/src/components/small-cards/Transactions.tsx
index d3dc457410..4d45866d80 100644
--- a/examples/ui-demo/src/components/small-cards/Transactions.tsx
+++ b/examples/ui-demo/src/components/small-cards/Transactions.tsx
@@ -1,8 +1,10 @@
 import { ExternalLinkIcon } from "@/components/icons/external-link";
 import { CheckCircleFilledIcon } from "@/components/icons/check-circle-filled";
 import { LoadingIcon } from "@/components/icons/loading";
-import { useEffect, useState } from "react";
 import { TransactionType } from "@/hooks/useRecurringTransactions";
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+import { time } from "console";
 
 export type loadingState = "loading" | "success" | "initial";
 
@@ -25,41 +27,31 @@ const Transaction = ({
   externalLink,
   buyAmountUsdc,
   state,
+  secUntilBuy = 0,
 }: TransactionType & { className?: string }) => {
-  const [countdownSeconds, setCountdownSeconds] = useState<number>(10);
-
-  useEffect(() => {
-    if (state === "next") {
-      const interval = setInterval(() => {
-        setCountdownSeconds((prev) => (prev === 0 ? 0 : prev - 1));
-      }, 1000);
-      return () => clearInterval(interval);
-    } else {
-      setCountdownSeconds(10);
-    }
-  }, [state]);
-
   const getText = () => {
     if (state === "initial") {
       return "Waiting...";
     }
+    if (state === "next") {
+      return secUntilBuy <= 0
+        ? "Waiting for previous transaction..."
+        : `Next buy in ${secUntilBuy} second${secUntilBuy === 1 ? "" : "s"}`;
+    }
     if (state === "initiating") {
       return "Buying 1 ETH";
     }
-    if (state === "next") {
-      return `Next buy in ${countdownSeconds} seconds`;
-    }
     if (state === "complete") {
       return `Bought 1 ETH for ${buyAmountUsdc.toLocaleString()} USDC`;
     }
   };
 
   return (
-    <div className={`flex justify-between ${className} mb-4`}>
+    <div className={cn("flex justify-between mb-4", className)}>
       <div className="flex items-center mr-1">
         <div className="w-4 h-4 mr-2">
           {state === "complete" ? (
-            <CheckCircleFilledIcon className=" h-4 w-4 fill-demo-surface-success" />
+            <CheckCircleFilledIcon className="h-4 w-4 fill-demo-surface-success" />
           ) : (
             <LoadingIcon className="h-4 w-4" />
           )}
diff --git a/examples/ui-demo/src/components/small-cards/TransactionsCard.tsx b/examples/ui-demo/src/components/small-cards/TransactionsCard.tsx
index cae416083c..1b625c1286 100644
--- a/examples/ui-demo/src/components/small-cards/TransactionsCard.tsx
+++ b/examples/ui-demo/src/components/small-cards/TransactionsCard.tsx
@@ -38,16 +38,16 @@ const TransactionsCardInner = ({
   }, [cardStatus]);
 
   return (
-    <div className="bg-bg-surface-default rounded-lg p-4 w-full xl:p-6 xl:w-[326px] xl:h-[478px] flex flex-col shadow-smallCard mb-5 xl:mb-0">
-      <div className="flex gap-3 xl:gap-0 xl:flex-col">
-        <div className="flex-shrink-0 bg-[#EAEBFE] rounded-xl mb-4 flex justify-center items-center relative h-[67px] w-[60px] sm:h-[154px] sm:w-[140px] xl:h-[222px] xl:w-full">
+    <div className="bg-bg-surface-default rounded-lg p-4 xl:p-6 w-full xl:w-[326px] xl:h-[478px] flex flex-col shadow-smallCard">
+      <div className="flex xl:flex-col gap-4">
+        <div className="flex-shrink-0 bg-[#EAEBFE] rounded-xl sm:mb-3 xl:mb-0 flex justify-center items-center relative h-[67px] w-[60px] sm:h-[154px] sm:w-[140px] xl:h-[222px] xl:w-full">
           <p className="absolute top-[-6px] left-[-6px] sm:top-1 sm:left-1 xl:left-auto xl:right-4 xl:top-4 px-2 py-1 font-semibold rounded-md text-xs text-[#7c3AED] bg-[#F3F3FF]">
             New!
           </p>
           <Key className="h-9 w-9 sm:h-[74px] sm:w-[74px] xl:h-[94px] xl:w-[94px]" />
         </div>
-        <div className="mb-3">
-          <h3 className="text-fg-primary  xl:text-xl font-semibold mb-2 xl:mb-3">
+        <div className="mb-3 w-full">
+          <h3 className="text-fg-primary xl:text-xl font-semibold mb-2 xl:mb-3">
             Recurring transactions
           </h3>
 
@@ -59,9 +59,7 @@ const TransactionsCardInner = ({
           ) : cardStatus === "setup" ? (
             <div className="flex items-center">
               <LoadingIcon className="h-4 w-4 mr-2" />
-              <p className="text-fg-primary text-sm">
-                Creating session key and minting USDC...
-              </p>
+              <p className="text-fg-primary text-sm">Creating session key...</p>
             </div>
           ) : (
             <Transactions transactions={transactions} />
@@ -69,7 +67,7 @@ const TransactionsCardInner = ({
         </div>
       </div>
       <Button
-        className="mt-auto"
+        className="mt-auto w-full"
         onClick={handleTransactions}
         disabled={
           isLoadingClient || cardStatus === "setup" || cardStatus === "active"
diff --git a/examples/ui-demo/src/components/small-cards/Wrapper.tsx b/examples/ui-demo/src/components/small-cards/Wrapper.tsx
index 39310174a8..70b8aaeabc 100644
--- a/examples/ui-demo/src/components/small-cards/Wrapper.tsx
+++ b/examples/ui-demo/src/components/small-cards/Wrapper.tsx
@@ -10,7 +10,7 @@ export const SmallCardsWrapper = () => {
   const { walletType } = useConfigStore();
 
   return (
-    <div className="flex flex-col xl:flex-row gap-6 lg:mt-6 items-center p-6">
+    <div className="flex flex-col xl:flex-row gap-6 lg:mt-6 items-center p-6 w-full justify-center max-w-screen-sm xl:max-w-none">
       {walletType === WalletTypes.smart ? (
         <>
           <MintCardDefault />
diff --git a/examples/ui-demo/src/hooks/useRecurringTransactions.ts b/examples/ui-demo/src/hooks/useRecurringTransactions.ts
index a035d9e9ee..54e9634f38 100644
--- a/examples/ui-demo/src/hooks/useRecurringTransactions.ts
+++ b/examples/ui-demo/src/hooks/useRecurringTransactions.ts
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { BatchUserOperationCallData } from "@aa-sdk/core";
 import {
   encodeFunctionData,
@@ -24,6 +24,7 @@ import { erc20MintableAbi } from "./7702/dca/abi/erc20Mintable";
 import { genEntityId } from "./7702/genEntityId";
 import { odyssey, splitOdysseyTransport } from "./7702/transportSetup";
 import { SESSION_KEY_VALIDITY_TIME_SECONDS } from "./7702/constants";
+import { useToast } from "@/hooks/useToast";
 
 export type CardStatus = "initial" | "setup" | "active" | "done";
 
@@ -32,11 +33,13 @@ export type TransactionType = {
   state: TransactionStages;
   buyAmountUsdc: number;
   externalLink?: string;
+  timeToBuy?: number; // timestamp when the txn will initiate
+  secUntilBuy?: number; // seconds until the txn will initiate
 };
 
 export const initialTransactions: TransactionType[] = [
   {
-    state: "initiating",
+    state: "initial",
     buyAmountUsdc: 4000,
   },
   {
@@ -87,22 +90,69 @@ export const useRecurringTransactions = ({
     },
   });
 
-  const handleTransaction = async (transactionIndex: number) => {
-    setTransactions((prev) => {
-      const newState = [...prev];
-      newState[transactionIndex].state = "initiating";
-      if (transactionIndex + 1 < newState.length) {
-        newState[transactionIndex + 1].state = "next";
-      }
-      return newState;
+  const { setToast } = useToast();
+
+  const handleError = (error: Error) => {
+    console.error(error);
+    setCardStatus("initial");
+    setTransactions(initialTransactions);
+    setToast({
+      type: "error",
+      text: "Something went wrong. Please try again.",
+      open: true,
     });
+  };
 
-    if (!sessionKeyClient) {
-      console.error("no session key client");
-      setCardStatus("initial");
+  // Handle the ticking of the timers.
+  useEffect(() => {
+    if (
+      transactions.every(
+        (it) => it.state === "complete" || it.state === "initial"
+      )
+    ) {
       return;
     }
 
+    const interval = setInterval(() => {
+      setTransactions((prev) =>
+        prev.map((txn) =>
+          txn.state === "next" && txn.timeToBuy
+            ? {
+                ...txn,
+                secUntilBuy: Math.ceil((txn.timeToBuy - Date.now()) / 1000),
+              }
+            : txn
+        )
+      );
+
+      if (transactions.every((it) => it.state === "complete")) {
+        clearInterval(interval);
+      }
+    }, 250);
+
+    return () => clearInterval(interval);
+  }, [transactions]);
+
+  const handleTransaction = async (transactionIndex: number) => {
+    if (!sessionKeyClient) {
+      return handleError(new Error("no session key client"));
+    }
+
+    setTransactions((prev) =>
+      prev.map((txn, idx) =>
+        idx === transactionIndex
+          ? { ...txn, state: "initiating" }
+          : idx === transactionIndex + 1
+          ? {
+              ...txn,
+              state: "next",
+              timeToBuy: Date.now() + 10_000,
+              secUntilBuy: 10,
+            }
+          : txn
+      )
+    );
+
     const usdcInAmount = transactions[transactionIndex].buyAmountUsdc;
 
     const uoHash = await sessionKeyClient.sendUserOperation({
@@ -119,46 +169,36 @@ export const useRecurringTransactions = ({
     const txnHash = await sessionKeyClient
       .waitForUserOperationTransaction(uoHash)
       .catch((e) => {
-        console.log(e);
+        console.error(e);
       });
 
     if (!txnHash) {
-      setCardStatus("initial");
-      return;
+      return handleError(new Error("missing swap txn hash"));
     }
 
-    setTransactions((prev) => {
-      const newState = [...prev];
-      newState[transactionIndex].state = "complete";
-      newState[transactionIndex].externalLink = odyssey.blockExplorers
-        ? `${odyssey.blockExplorers?.default.url}/tx/${txnHash}`
-        : undefined;
-      return newState;
-    });
+    setTransactions((prev) =>
+      prev.map((txn, idx) =>
+        idx === transactionIndex
+          ? {
+              ...txn,
+              state: "complete",
+              externalLink: odyssey.blockExplorers
+                ? `${odyssey.blockExplorers?.default.url}/tx/${txnHash}`
+                : undefined,
+            }
+          : txn
+      )
+    );
   };
 
-  // Mock method to fire transactions for 7702
+  // Mock method to fire transactions
   const handleTransactions = async () => {
     if (!client) {
       console.error("no client");
       return;
     }
 
-    // initial state as referenced by `const initialTransactions` is mutated, so we need to re-create it.
-    setTransactions([
-      {
-        state: "initiating",
-        buyAmountUsdc: 4000,
-      },
-      {
-        state: "initial",
-        buyAmountUsdc: 3500,
-      },
-      {
-        state: "initial",
-        buyAmountUsdc: 4200,
-      },
-    ]);
+    setTransactions(initialTransactions);
     setCardStatus("setup");
 
     // Start by minting the required USDC amount, and installing the session key, if not already installed.
@@ -257,19 +297,23 @@ export const useRecurringTransactions = ({
     const txnHash = await client
       .waitForUserOperationTransaction(uoHash)
       .catch((e) => {
-        console.log(e);
+        console.error(e);
       });
 
     if (!txnHash) {
-      setCardStatus("initial");
-      return;
+      return handleError(new Error("missing batch txn hash"));
     }
 
     setSessionKeyAdded(true);
     setCardStatus("active");
 
     for (let i = 0; i < transactions.length; i++) {
-      await handleTransaction(i);
+      await Promise.all([
+        handleTransaction(i),
+        ...(i < transactions.length - 1
+          ? [new Promise((resolve) => setTimeout(resolve, 10_000))]
+          : []),
+      ]);
     }
 
     setCardStatus("done");
diff --git a/site/pages/reference/account-kit/infra/functions/alchemyGasAndPaymasterAndDataMiddleware.mdx b/site/pages/reference/account-kit/infra/functions/alchemyGasAndPaymasterAndDataMiddleware.mdx
new file mode 100644
index 0000000000..47f368ccee
--- /dev/null
+++ b/site/pages/reference/account-kit/infra/functions/alchemyGasAndPaymasterAndDataMiddleware.mdx
@@ -0,0 +1,68 @@
+---
+# This file is autogenerated
+
+title: alchemyGasAndPaymasterAndDataMiddleware
+description: Overview of the alchemyGasAndPaymasterAndDataMiddleware method
+---
+
+# alchemyGasAndPaymasterAndDataMiddleware
+
+Paymaster middleware factory that uses Alchemy's Gas Manager for sponsoring transactions using
+the `alchemy_requestGasAndPaymasterAndData` method instead of standard ERC-7677 methods.
+
+## Import
+
+```ts
+import { alchemyGasAndPaymasterAndDataMiddleware } from "@account-kit/infra";
+```
+
+## Usage
+
+```ts
+import {
+  sepolia,
+  alchemyGasAndPaymasterAndDataMiddleware,
+} from "@account-kit/infra";
+import { alchemy } from "@account-kit/infra";
+
+const client = createAlchemySmartAccountClient({
+  transport: alchemy({ apiKey: "your-api-key" }),
+  chain: sepolia,
+  ...alchemyGasAndPaymasterAndDataMiddleware({
+    policyId: "policyId",
+    transport: alchemy({ apiKey: "your-api-key" }),
+  }),
+});
+```
+
+## Parameters
+
+### params
+
+`AlchemyGasAndPaymasterAndDataMiddlewareParams`
+configuration params
+
+### params.policyId
+
+`AlchemyGasAndPaymasterAndDataMiddlewareParams.policyId`
+the policyId for Alchemy's gas manager
+
+### params.transport
+
+`AlchemyGasAndPaymasterAndDataMiddlewareParams.transport`
+fallback transport to use for fee estimation when not using the paymaster
+
+### params.gasEstimatorOverride
+
+`AlchemyGasAndPaymasterAndDataMiddlewareParams.gasEstimatorOverride`
+custom gas estimator middleware
+
+### params.feeEstimatorOverride
+
+`AlchemyGasAndPaymasterAndDataMiddlewareParams.feeEstimatorOverride`
+custom fee estimator middleware
+
+## Returns
+
+`Pick<ClientMiddlewareConfig, "dummyPaymasterAndData" | "paymasterAndData">`
+partial client middleware configuration containing `dummyPaymasterAndData` and `paymasterAndData`

From 06f4c508c708097538734208d4c2936573958f54 Mon Sep 17 00:00:00 2001
From: jakehobbs <jacob.hobbs@alchemy.com>
Date: Fri, 14 Feb 2025 22:11:37 -0800
Subject: [PATCH 2/5] chore: build docs

---
 ...lchemyGasAndPaymasterAndDataMiddleware.mdx | 68 -------------------
 1 file changed, 68 deletions(-)
 delete mode 100644 site/pages/reference/account-kit/infra/functions/alchemyGasAndPaymasterAndDataMiddleware.mdx

diff --git a/site/pages/reference/account-kit/infra/functions/alchemyGasAndPaymasterAndDataMiddleware.mdx b/site/pages/reference/account-kit/infra/functions/alchemyGasAndPaymasterAndDataMiddleware.mdx
deleted file mode 100644
index 47f368ccee..0000000000
--- a/site/pages/reference/account-kit/infra/functions/alchemyGasAndPaymasterAndDataMiddleware.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-# This file is autogenerated
-
-title: alchemyGasAndPaymasterAndDataMiddleware
-description: Overview of the alchemyGasAndPaymasterAndDataMiddleware method
----
-
-# alchemyGasAndPaymasterAndDataMiddleware
-
-Paymaster middleware factory that uses Alchemy's Gas Manager for sponsoring transactions using
-the `alchemy_requestGasAndPaymasterAndData` method instead of standard ERC-7677 methods.
-
-## Import
-
-```ts
-import { alchemyGasAndPaymasterAndDataMiddleware } from "@account-kit/infra";
-```
-
-## Usage
-
-```ts
-import {
-  sepolia,
-  alchemyGasAndPaymasterAndDataMiddleware,
-} from "@account-kit/infra";
-import { alchemy } from "@account-kit/infra";
-
-const client = createAlchemySmartAccountClient({
-  transport: alchemy({ apiKey: "your-api-key" }),
-  chain: sepolia,
-  ...alchemyGasAndPaymasterAndDataMiddleware({
-    policyId: "policyId",
-    transport: alchemy({ apiKey: "your-api-key" }),
-  }),
-});
-```
-
-## Parameters
-
-### params
-
-`AlchemyGasAndPaymasterAndDataMiddlewareParams`
-configuration params
-
-### params.policyId
-
-`AlchemyGasAndPaymasterAndDataMiddlewareParams.policyId`
-the policyId for Alchemy's gas manager
-
-### params.transport
-
-`AlchemyGasAndPaymasterAndDataMiddlewareParams.transport`
-fallback transport to use for fee estimation when not using the paymaster
-
-### params.gasEstimatorOverride
-
-`AlchemyGasAndPaymasterAndDataMiddlewareParams.gasEstimatorOverride`
-custom gas estimator middleware
-
-### params.feeEstimatorOverride
-
-`AlchemyGasAndPaymasterAndDataMiddlewareParams.feeEstimatorOverride`
-custom fee estimator middleware
-
-## Returns
-
-`Pick<ClientMiddlewareConfig, "dummyPaymasterAndData" | "paymasterAndData">`
-partial client middleware configuration containing `dummyPaymasterAndData` and `paymasterAndData`

From 59e72086fb7f3a626712ae244ca6039fb3595a26 Mon Sep 17 00:00:00 2001
From: jakehobbs <jacob.hobbs@alchemy.com>
Date: Fri, 14 Feb 2025 22:27:45 -0800
Subject: [PATCH 3/5] chore: lint

---
 examples/ui-demo/src/components/small-cards/Transactions.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/examples/ui-demo/src/components/small-cards/Transactions.tsx b/examples/ui-demo/src/components/small-cards/Transactions.tsx
index 4d45866d80..967e3abe00 100644
--- a/examples/ui-demo/src/components/small-cards/Transactions.tsx
+++ b/examples/ui-demo/src/components/small-cards/Transactions.tsx
@@ -3,8 +3,6 @@ import { CheckCircleFilledIcon } from "@/components/icons/check-circle-filled";
 import { LoadingIcon } from "@/components/icons/loading";
 import { TransactionType } from "@/hooks/useRecurringTransactions";
 import { cn } from "@/lib/utils";
-import { useEffect, useState } from "react";
-import { time } from "console";
 
 export type loadingState = "loading" | "success" | "initial";
 

From dab13e01f75405b039225dde43060a34c7f4b5fb Mon Sep 17 00:00:00 2001
From: jakehobbs <jacob.hobbs@alchemy.com>
Date: Tue, 18 Feb 2025 18:35:33 -0800
Subject: [PATCH 4/5] chore: improvements to intervals

---
 .../components/small-cards/Transactions.tsx   | 28 +++++++++--
 .../src/hooks/useRecurringTransactions.ts     | 46 ++++---------------
 2 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/examples/ui-demo/src/components/small-cards/Transactions.tsx b/examples/ui-demo/src/components/small-cards/Transactions.tsx
index 967e3abe00..35fb0695d1 100644
--- a/examples/ui-demo/src/components/small-cards/Transactions.tsx
+++ b/examples/ui-demo/src/components/small-cards/Transactions.tsx
@@ -1,8 +1,12 @@
 import { ExternalLinkIcon } from "@/components/icons/external-link";
 import { CheckCircleFilledIcon } from "@/components/icons/check-circle-filled";
 import { LoadingIcon } from "@/components/icons/loading";
-import { TransactionType } from "@/hooks/useRecurringTransactions";
+import {
+  RECURRING_TXN_INTERVAL,
+  TransactionType,
+} from "@/hooks/useRecurringTransactions";
 import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
 
 export type loadingState = "loading" | "success" | "initial";
 
@@ -25,16 +29,32 @@ const Transaction = ({
   externalLink,
   buyAmountUsdc,
   state,
-  secUntilBuy = 0,
+  timeToBuy,
 }: TransactionType & { className?: string }) => {
+  const [secUntilBuy, setSecUntilBuy] = useState<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (state === "complete" || state === "initial" || !timeToBuy) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setSecUntilBuy(Math.ceil((timeToBuy - Date.now()) / 1000));
+    }, 250);
+
+    return () => clearInterval(interval);
+  }, [state, timeToBuy]);
+
   const getText = () => {
     if (state === "initial") {
       return "Waiting...";
     }
     if (state === "next") {
-      return secUntilBuy <= 0
+      return secUntilBuy != null && secUntilBuy <= 0
         ? "Waiting for previous transaction..."
-        : `Next buy in ${secUntilBuy} second${secUntilBuy === 1 ? "" : "s"}`;
+        : `Next buy in ${secUntilBuy ?? RECURRING_TXN_INTERVAL / 1000} second${
+            secUntilBuy === 1 ? "" : "s"
+          }`;
     }
     if (state === "initiating") {
       return "Buying 1 ETH";
diff --git a/examples/ui-demo/src/hooks/useRecurringTransactions.ts b/examples/ui-demo/src/hooks/useRecurringTransactions.ts
index 54e9634f38..fa8c3c4738 100644
--- a/examples/ui-demo/src/hooks/useRecurringTransactions.ts
+++ b/examples/ui-demo/src/hooks/useRecurringTransactions.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import type { BatchUserOperationCallData } from "@aa-sdk/core";
 import {
   encodeFunctionData,
@@ -33,8 +33,7 @@ export type TransactionType = {
   state: TransactionStages;
   buyAmountUsdc: number;
   externalLink?: string;
-  timeToBuy?: number; // timestamp when the txn will initiate
-  secUntilBuy?: number; // seconds until the txn will initiate
+  timeToBuy?: number; // timestamp when the txn should initiate
 };
 
 export const initialTransactions: TransactionType[] = [
@@ -52,6 +51,8 @@ export const initialTransactions: TransactionType[] = [
   },
 ];
 
+export const RECURRING_TXN_INTERVAL = 10_000;
+
 export interface UseRecurringTransactionReturn {
   isLoadingClient: boolean;
   cardStatus: CardStatus;
@@ -103,36 +104,6 @@ export const useRecurringTransactions = ({
     });
   };
 
-  // Handle the ticking of the timers.
-  useEffect(() => {
-    if (
-      transactions.every(
-        (it) => it.state === "complete" || it.state === "initial"
-      )
-    ) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      setTransactions((prev) =>
-        prev.map((txn) =>
-          txn.state === "next" && txn.timeToBuy
-            ? {
-                ...txn,
-                secUntilBuy: Math.ceil((txn.timeToBuy - Date.now()) / 1000),
-              }
-            : txn
-        )
-      );
-
-      if (transactions.every((it) => it.state === "complete")) {
-        clearInterval(interval);
-      }
-    }, 250);
-
-    return () => clearInterval(interval);
-  }, [transactions]);
-
   const handleTransaction = async (transactionIndex: number) => {
     if (!sessionKeyClient) {
       return handleError(new Error("no session key client"));
@@ -146,8 +117,7 @@ export const useRecurringTransactions = ({
           ? {
               ...txn,
               state: "next",
-              timeToBuy: Date.now() + 10_000,
-              secUntilBuy: 10,
+              timeToBuy: Date.now() + RECURRING_TXN_INTERVAL,
             }
           : txn
       )
@@ -311,7 +281,11 @@ export const useRecurringTransactions = ({
       await Promise.all([
         handleTransaction(i),
         ...(i < transactions.length - 1
-          ? [new Promise((resolve) => setTimeout(resolve, 10_000))]
+          ? [
+              new Promise((resolve) =>
+                setTimeout(resolve, RECURRING_TXN_INTERVAL)
+              ),
+            ]
           : []),
       ]);
     }

From ea450f813f0ccf3145c2038128aab8f5378add34 Mon Sep 17 00:00:00 2001
From: jakehobbs <jacob.hobbs@alchemy.com>
Date: Wed, 19 Feb 2025 08:37:54 -0800
Subject: [PATCH 5/5] chore: run prettier

---
 examples/ui-demo/src/hooks/useRecurringTransactions.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/ui-demo/src/hooks/useRecurringTransactions.ts b/examples/ui-demo/src/hooks/useRecurringTransactions.ts
index 7a8f13e888..2ba52523d3 100644
--- a/examples/ui-demo/src/hooks/useRecurringTransactions.ts
+++ b/examples/ui-demo/src/hooks/useRecurringTransactions.ts
@@ -27,7 +27,6 @@ import { SESSION_KEY_VALIDITY_TIME_SECONDS } from "./7702/constants";
 import { useToast } from "@/hooks/useToast";
 import { AlchemyTransport } from "@account-kit/infra";
 
-
 export type CardStatus = "initial" | "setup" | "active" | "done";
 
 export type TransactionStages = "initial" | "initiating" | "next" | "complete";