[SDK] Show past transactions in transactions modal screen (#6607)

Author: joaquim-verges

.changeset/fruity-cooks-know.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Show past transactions in transactions modal screen

apps/playground-web/src/app/insight/[blueprint_slug]/blueprint-playground.client.tsx

@@ -160,6 +160,10 @@ export function BlueprintPlaygroundUI(props: {
     for (const param of parameters) {
       if (param.schema && "type" in param.schema && param.schema.default) {
         values[param.name] = param.schema.default;
+      } else if (param.name === "filter_block_timestamp_gte") {
+        values[param.name] = Math.floor(
+          (Date.now() - 3 * 30 * 24 * 60 * 60 * 1000) / 1000,
+        );
       } else {
         values[param.name] = "";
       }

packages/thirdweb/src/react/core/hooks/contract/useWaitForReceipt.ts

@@ -17,7 +17,9 @@ import {
  * @transaction
  */
 export function useWaitForReceipt(
-  options: WaitForReceiptOptions | undefined,
+  options:
+    | (WaitForReceiptOptions & { queryOptions?: { enabled?: boolean } })
+    | undefined,
 ): UseQueryResult<TransactionReceipt> {
   return useQuery({
     queryKey: [
@@ -32,7 +34,8 @@ export function useWaitForReceipt(
       }
       return waitForReceipt(options);
     },
-    enabled: !!options?.transactionHash,
+    enabled:
+      !!options?.transactionHash && (options?.queryOptions?.enabled ?? true),
     retry: false,
   });
 }

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletTransactionHistory.tsx

@@ -1,12 +1,17 @@
 "use client";
 import styled from "@emotion/styled";
 import { CheckIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
 import { useSyncExternalStore } from "react";
+import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";
 import { getCachedChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
-import { getTransactionStore } from "../../../../../transaction/transaction-store.js";
+import {
+  type StoredTransaction,
+  getPastTransactions,
+  getTransactionStore,
+} from "../../../../../transaction/transaction-store.js";
 import { shortenHex } from "../../../../../utils/address.js";
-import type { Hex } from "../../../../../utils/encoding/hex.js";
 import { formatExplorerTxUrl } from "../../../../../utils/url.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { iconSize, spacing } from "../../../../core/design-system/index.js";
@@ -38,8 +43,20 @@ export function WalletTransactionHistory(props: {
     transactionStore.subscribe,
     transactionStore.getValue,
   );
-  const transactions = [...reverseChronologicalTransactions].reverse();
-
+  const historicalTxQuery = useQuery({
+    queryKey: ["transactions", props.address, activeChain],
+    queryFn: () =>
+      getPastTransactions({
+        walletAddress: props.address,
+        chain: activeChain || ethereum,
+        client: props.client,
+      }),
+    enabled: !!activeChain,
+  });
+  const transactions = [
+    ...[...reverseChronologicalTransactions].reverse(),
+    ...(historicalTxQuery.data || []),
+  ];
   return (
     <Container
       scrollY
@@ -52,7 +69,22 @@ export function WalletTransactionHistory(props: {
       }}
     >
       <Container flex="column" gap="xs" expand>
-        {transactions.length === 0 ? (
+        {historicalTxQuery.isLoading && (
+          <Container
+            flex="column"
+            gap="md"
+            center="both"
+            color="secondaryText"
+            style={{
+              flex: "1",
+              minHeight: "250px",
+            }}
+          >
+            <Spinner color={"secondaryText"} size={"md"} />
+            <Text>Loading recent transactions...</Text>
+          </Container>
+        )}
+        {!historicalTxQuery.isLoading && transactions.length === 0 ? (
           <Container
             flex="column"
             gap="md"
@@ -79,8 +111,7 @@ export function WalletTransactionHistory(props: {
                   key={tx.transactionHash}
                   explorerUrl={chainExplorers.explorers[0]?.url}
                   client={props.client}
-                  hash={tx.transactionHash}
-                  chainId={tx.chainId}
+                  tx={tx}
                 />
               );
             })}
@@ -92,21 +123,24 @@ export function WalletTransactionHistory(props: {
 }
 
 function TransactionButton(props: {
-  hash: string;
+  tx: StoredTransaction;
   client: ThirdwebClient;
-  chainId: number;
   explorerUrl?: string;
 }) {
   const {
-    data: receipt,
+    data: fetchedReceipt,
     isLoading,
     error,
   } = useWaitForReceipt({
-    transactionHash: props.hash as Hex,
-    chain: getCachedChain(props.chainId),
+    transactionHash: props.tx.transactionHash,
+    chain: getCachedChain(props.tx.chainId),
     client: props.client,
+    queryOptions: {
+      enabled: props.tx.receipt === undefined,
+    },
   });
-  const chainIconQuery = useChainIconUrl(getCachedChain(props.chainId));
+  const chainIconQuery = useChainIconUrl(getCachedChain(props.tx.chainId));
+  const receipt = props.tx.receipt ?? fetchedReceipt;
 
   const content = (
     <TxButton
@@ -148,8 +182,8 @@ function TransactionButton(props: {
           >
             <Text size="sm" color="primaryText">
               {receipt?.to
-                ? `Interacted with ${shortenHex(receipt.to, 4)}`
-                : `Hash: ${shortenHex(props.hash, 4)}`}
+                ? `Interacted with ${shortenHex(receipt?.to, 4)}`
+                : `Hash: ${shortenHex(props.tx.transactionHash, 4)}`}
             </Text>
           </Container>
 
@@ -165,7 +199,7 @@ function TransactionButton(props: {
             }}
           >
             <ChainName
-              chain={getCachedChain(props.chainId)}
+              chain={getCachedChain(props.tx.chainId)}
               size="xs"
               client={props.client}
             />
@@ -193,7 +227,7 @@ function TransactionButton(props: {
   if (props.explorerUrl) {
     return (
       <a
-        href={formatExplorerTxUrl(props.explorerUrl, props.hash)}
+        href={formatExplorerTxUrl(props.explorerUrl, props.tx.transactionHash)}
         target="_blank"
         rel="noreferrer"
       >

packages/thirdweb/src/transaction/transaction-store.ts

@@ -1,9 +1,17 @@
+import type { Chain } from "../chains/types.js";
+import type { ThirdwebClient } from "../client/client.js";
 import { type Store, createStore } from "../reactive/store.js";
+import { getThirdwebDomains } from "../utils/domains.js";
 import type { Hex } from "../utils/encoding/hex.js";
+import { getClientFetch } from "../utils/fetch.js";
 
 export type StoredTransaction = {
   transactionHash: Hex;
   chainId: number;
+  receipt?: {
+    status: "success" | "failed";
+    to: string;
+  };
 };
 
 const transactionsByAddress = new Map<string, Store<StoredTransaction[]>>();
@@ -33,6 +41,7 @@ export function getTransactionStore(
 
   const newStore = createStore<StoredTransaction[]>([]);
   transactionsByAddress.set(address, newStore);
+
   return newStore;
 }
 
@@ -54,3 +63,44 @@ export function addTransactionToStore(options: {
 
   transactionsByAddress.set(address, tranasctionStore);
 }
+
+/**
+ * @internal for now
+ */
+export async function getPastTransactions(options: {
+  walletAddress: string;
+  chain: Chain;
+  client: ThirdwebClient;
+}): Promise<StoredTransaction[]> {
+  const { walletAddress, chain, client } = options;
+  const oneMonthsAgoInSeconds = Math.floor(
+    (Date.now() - 1 * 30 * 24 * 60 * 60 * 1000) / 1000,
+  );
+  const url = new URL(
+    `https://${getThirdwebDomains().insight}/v1/wallets/${walletAddress}/transactions`,
+  );
+  url.searchParams.set("limit", "10");
+  url.searchParams.set("chain", chain.id.toString());
+  url.searchParams.set(
+    "filter_block_timestamp_gte",
+    oneMonthsAgoInSeconds.toString(),
+  );
+  const clientFetch = getClientFetch(client);
+  const result = await clientFetch(url.toString());
+  const json = (await result.json()) as {
+    data: {
+      chain_id: number;
+      hash: string;
+      status: number;
+      to_address: string;
+    }[];
+  };
+  return json.data.map((tx) => ({
+    transactionHash: tx.hash as Hex,
+    chainId: tx.chain_id,
+    receipt: {
+      status: tx.status === 1 ? "success" : "failed",
+      to: tx.to_address,
+    },
+  }));
+}

packages/thirdweb/src/utils/domain.test.ts

@@ -15,6 +15,7 @@ describe("Thirdweb Domains", () => {
     storage: "storage.thirdweb.com",
     bundler: "bundler.thirdweb.com",
     analytics: "c.thirdweb.com",
+    insight: "insight.thirdweb.com",
   };
 
   beforeEach(() => {

packages/thirdweb/src/utils/domains.ts

@@ -34,6 +34,11 @@ type DomainOverrides = {
    * @default "c.thirdweb.com"
    */
   analytics?: string;
+  /**
+   * The base URL for the insight server.
+   * @default "insight.thirdweb.com"
+   */
+  insight?: string;
 };
 
 export const DEFAULT_RPC_URL = "rpc.thirdweb.com";
@@ -43,7 +48,7 @@ const DEFAULT_PAY_URL = "pay.thirdweb.com";
 const DEFAULT_STORAGE_URL = "storage.thirdweb.com";
 const DEFAULT_BUNDLER_URL = "bundler.thirdweb.com";
 const DEFAULT_ANALYTICS_URL = "c.thirdweb.com";
-
+const DEFAULT_INSIGHT_URL = "insight.thirdweb.com";
 let domains: { [k in keyof DomainOverrides]-?: string } = {
   rpc: DEFAULT_RPC_URL,
   inAppWallet: DEFAULT_IN_APP_WALLET_URL,
@@ -52,6 +57,7 @@ let domains: { [k in keyof DomainOverrides]-?: string } = {
   storage: DEFAULT_STORAGE_URL,
   bundler: DEFAULT_BUNDLER_URL,
   analytics: DEFAULT_ANALYTICS_URL,
+  insight: DEFAULT_INSIGHT_URL,
 };
 
 /**
@@ -66,6 +72,7 @@ export const setThirdwebDomains = (DomainOverrides: DomainOverrides) => {
     storage: DomainOverrides.storage ?? DEFAULT_STORAGE_URL,
     bundler: DomainOverrides.bundler ?? DEFAULT_BUNDLER_URL,
     analytics: DomainOverrides.analytics ?? DEFAULT_ANALYTICS_URL,
+    insight: DomainOverrides.insight ?? DEFAULT_INSIGHT_URL,
   };
 };