Get transaction details (request)

packages/circle-demo-webapp/app/components/TransactionDetails/TransactionDetails.tsx

@@ -1,6 +1,8 @@
+import { TransactionType } from '@circle-fin/developer-controlled-wallets';
+import { useEffect, useState } from 'react';
+
 import { ChainLabel } from '~/components/ChainLabel';
 import { Badge } from '~/components/ui/badge';
-import { TransactionType } from '~/lib/constants';
 import { formatDate, shortenAddress, shortenHash } from '~/lib/format';
 import { Transaction } from '~/lib/types';
 
@@ -9,8 +11,36 @@
   transaction: Transaction;
 }
 
+export interface ActiveTransactionDetailsProps {
+  /** The on-chain transaction */
+  transactionId: string;
+  loadTransactionById: (transactionId: string) => Promise<Transaction>;
+}
+
 /** The details of an on-chain transaction */
-export function TransactionDetails({ transaction }: TransactionDetailsProps) {
+export function TransactionDetails(
+  props: TransactionDetailsProps | ActiveTransactionDetailsProps,
+) {
+  const [transaction, setTransaction] = useState<Transaction>(
+    (props as TransactionDetailsProps)?.transaction,
+  );
+  useEffect(() => {
+    if ((props as ActiveTransactionDetailsProps)?.transactionId) {
+      (props as ActiveTransactionDetailsProps)
+        .loadTransactionById((props as ActiveTransactionDetailsProps).transactionId)
+        .then((tx) => {
+          setTransaction(tx);
+        });
+    }
+  }, [
+    (props as ActiveTransactionDetailsProps)?.transactionId,
+    (props as ActiveTransactionDetailsProps).loadTransactionById,
+  ]);
+
+  if (!transaction) {
+    return null;
+  }
+
   const isInbound = transaction.transactionType === TransactionType.Inbound;
 
   return (

packages/circle-demo-webapp/app/hooks/useGetTransaction.ts

@@ -0,0 +1,45 @@
+import { GetTransactionInput } from '@circle-fin/developer-controlled-wallets';
+import { useState } from 'react';
+
+import { TransactionWithToken } from '~/lib/types';
+import { callGetFetch } from '~/lib/utils';
+
+interface UseGetTransactionResult {
+  error: Error | undefined;
+  transaction: TransactionWithToken | undefined;
+  isLoading: boolean;
+  getTransaction: (args: GetTransactionInput) => Promise<boolean>;
+  setTransaction: (transaction: TransactionWithToken | undefined) => void;
+}
+
+export const useGetTransaction = (): UseGetTransactionResult => {
+  const [transaction, setTransaction] = useState<TransactionWithToken | undefined>();
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const getTransaction = async (args: GetTransactionInput) => {
+    setIsLoading(true);
+    setError(undefined);
+    try {
+      const res = await callGetFetch<{ transaction: TransactionWithToken }>(
+        `/api/getTransaction`,
+        args as unknown as Record<string, string>,
+      );
+      setTransaction(res.transaction);
+      return true;
+    } catch (err) {
+      setError(err as Error);
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    error,
+    isLoading,
+    transaction,
+    getTransaction,
+    setTransaction,
+  };
+};

packages/circle-demo-webapp/app/lib/format.ts

@@ -1,9 +1,9 @@
 export function shortenAddress(address: string): string {
-  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+  return `${String(address).slice(0, 6)}...${String(address).slice(-4)}`;
 }
 
 export function shortenHash(hash: string): string {
-  return `${hash.slice(0, 10)}...${hash.slice(-10)}`;
+  return `${String(hash).slice(0, 10)}...${String(hash).slice(-10)}`;
 }
 
 export function formatDate(date: string): string {

packages/circle-demo-webapp/app/lib/memcache.ts

@@ -0,0 +1,41 @@
+import { sdk } from '~/lib/sdk';
+import { Token } from '~/lib/types';
+
+class MemCache<ReturnType> {
+  private map: Map<string, ReturnType>;
+  private load: (id: string) => Promise<ReturnType>;
+
+  constructor(options: { loadFunction: (id: string) => Promise<ReturnType> }) {
+    this.load = options.loadFunction;
+    this.map = new Map<string, ReturnType>();
+  }
+
+  set(key: string, value: ReturnType): void {
+    this.map.set(key, value);
+  }
+
+  get(key: string): ReturnType | undefined {
+    return this.map.get(key);
+  }
+
+  has(key: string): boolean {
+    return this.map.has(key);
+  }
+
+  async loadAndSet(key: string): Promise<ReturnType> {
+    const data = this.get(key);
+    if (data) {
+      return data;
+    }
+    const value = await this.load(key);
+    this.set(key, value);
+    return value;
+  }
+}
+
+export const cachedCoins = new MemCache<Token>({
+  loadFunction: async (id: string) => {
+    const res = await sdk.getToken({ id });
+    return res.data?.token as Token;
+  },
+});

packages/circle-demo-webapp/app/lib/utils.ts

@@ -2,6 +2,7 @@ import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 import { Blockchain } from '~/lib/constants';
+import { ErrorResponse } from '~/lib/responses';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -22,6 +23,27 @@ export async function callFetch<ReturnType extends object>(
     },
     body: JSON.stringify(body),
   });
+  if (res.status !== 200) {
+    const errorData = (await res.json()) as ErrorResponse;
+    throw new Error(errorData.error);
+  }
+  return (await res.json()) as ReturnType;
+}
+
+export async function callGetFetch<ReturnType extends object>(
+  url: string,
+  query: Record<string, string>,
+): Promise<ReturnType> {
+  const res = await fetch(`${url}?${new URLSearchParams(query)}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (res.status !== 200) {
+    const errorData = (await res.json()) as ErrorResponse;
+    throw new Error(errorData.error);
+  }
   return (await res.json()) as ReturnType;
 }
 

packages/circle-demo-webapp/app/routes/api.getTransaction.tsx

@@ -1,17 +1,30 @@
-import { GetTransactionInput } from '@circle-fin/developer-controlled-wallets';
-import { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
+import {
+  GetTransactionInput,
+  TransactionType,
+} from '@circle-fin/developer-controlled-wallets';
+import { LoaderFunctionArgs } from '@remix-run/node';
 
+import { cachedCoins } from '~/lib/memcache';
 import { sdk } from '~/lib/sdk';
+import { TransactionWithToken } from '~/lib/types';
 
-/**
- * @deprecated Use `loader` instead
- */
-export async function action({ request }: ActionFunctionArgs) {
-  const res = await sdk.getTransaction((await request.json()) as GetTransactionInput);
-  return Response.json(res.data);
-}
+export async function loader(o: LoaderFunctionArgs) {
+  const url = new URL(o.request.url);
+
+  const params: GetTransactionInput = {
+    id: url.searchParams.get('id')!,
+  };
+  const txType = url.searchParams.get('txType');
+  if (txType) {
+    params.txType = txType as TransactionType;
+  }
+
+  const res = await sdk.getTransaction(params);
+  if (res?.data?.transaction?.tokenId) {
+    (res.data.transaction as TransactionWithToken).token = await cachedCoins.loadAndSet(
+      res.data.transaction?.tokenId,
+    );
+  }
 
-export async function loader({ request }: LoaderFunctionArgs) {
-  const res = await sdk.getTransaction((await request.json()) as GetTransactionInput);
   return Response.json(res.data);
 }

packages/circle-demo-webapp/app/routes/api.listTransactions.$walletId.tsx

@@ -1,10 +1,9 @@
 import { ListTransactionsInput } from '@circle-fin/developer-controlled-wallets';
 import { LoaderFunctionArgs } from '@remix-run/node';
 
+import { cachedCoins } from '~/lib/memcache';
 import { sdk } from '~/lib/sdk';
-import { Token, TransactionWithToken } from '~/lib/types';
-
-const cachedCoins = new Map<string, Token>();
+import { TransactionWithToken } from '~/lib/types';
 
 export async function loader(o: LoaderFunctionArgs) {
   const url = new URL(o.request.url);
@@ -27,17 +26,12 @@ export async function loader(o: LoaderFunctionArgs) {
   for (const tx of txs) {
     if (tx.tokenId && !needToLoad[String(tx.tokenId)] && !cachedCoins.has(tx.tokenId)) {
       needToLoad[tx.tokenId] = true;
-      prs.push(sdk.getToken({ id: tx.tokenId }));
+      prs.push(cachedCoins.loadAndSet(tx.tokenId));
     }
   }
 
   if (prs.length > 0) {
-    const tokens = await Promise.all(prs);
-    for (const token of tokens) {
-      if (token.data?.token) {
-        cachedCoins.set(token.data.token.id, token.data.token as Token);
-      }
-    }
+    await Promise.all(prs);
   }
   const txWithTokens: TransactionWithToken[] = [];
 

packages/circle-demo-webapp/app/routes/transactions.$walletId/components/TransactionDetails/TransactionDetails.tsx

@@ -1,3 +1,4 @@
+import { LoaderCircle } from 'lucide-react';
 import { useMemo } from 'react';
 
 import { ChainLabel } from '~/components/ChainLabel';
@@ -22,55 +23,75 @@
 );
 
 export interface TransactionDetailsProps {
-  /** The wallet associated with the on-chain account */
   transaction: TransactionWithToken;
-  /** Child components to associate with the wallet */
+}
+
+export interface TransactionLoadingDetailsProps {
+  isLoading: boolean;
+}
+
+export interface CommonTransactionDetailsProps {
   children?: React.ReactNode;
   onClose?: () => void;
 }
 
 /** The details of an on-chain account */
-export function TransactionDetails({ transaction, onClose }: TransactionDetailsProps) {
-  const shortHash = useMemo(() => shortenHash(transaction.txHash!), [transaction]);
-  const isInbound = transaction.transactionType === TransactionType.Inbound;
+export function TransactionDetails(
+  props: CommonTransactionDetailsProps &
+    (TransactionDetailsProps | TransactionLoadingDetailsProps),
+) {
+  const transaction = (props as TransactionDetailsProps).transaction;
+  const isLoading = (props as TransactionLoadingDetailsProps).isLoading;
+  if (!transaction && !isLoading) {
+    return null;
+  }
+
+  const shortHash = useMemo(() => shortenHash(transaction?.txHash!), [transaction]);
+  const isInbound = transaction?.transactionType === TransactionType.Inbound;
   return (
-    <Dialog open onOpenChange={onClose}>
+    <Dialog open onOpenChange={props.onClose}>
       <DialogContent className="min-w-[480px]">
         <DialogTitle>Transaction Details</DialogTitle>
-        <div>
-          <OneLine label="Hash" value={shortHash} />
-          <OneLine
-            label="Status"
-            value={<TransactionStateText state={transaction.state} />}
-          />
-          <OneLine label="From" value={transaction.sourceAddress} />
-          <OneLine label="To" value={transaction.destinationAddress} />
-          {transaction.token && (
-            <OneLine label="Token" value={<TokenItem token={transaction.token} />} />
-          )}
+        {isLoading ? (
+          <div className="flex justify-center items-center w-full h-40">
+            <LoaderCircle className="animate-spin" />
+          </div>
+        ) : (
+          <div>
+            <OneLine label="Hash" value={shortHash} />
+            <OneLine
+              label="Status"
+              value={<TransactionStateText state={transaction.state} />}
+            />
+            <OneLine label="From" value={transaction.sourceAddress} />
+            <OneLine label="To" value={transaction.destinationAddress} />
+            {transaction.token && (
+              <OneLine label="Token" value={<TokenItem token={transaction.token} />} />
+            )}
 
-          <OneLine
-            label="Amount"
-            value={
-              <span
-                className={`text-right font-medium ${
-                  isInbound ? 'text-green-600' : 'text-destructive'
-                }`}
-              >
-                {isInbound ? '+' : '-'} {transaction.amounts?.[0] ?? '0.00'}
-              </span>
-            }
-          />
-          <OneLine
-            label="Date"
-            value={formatDate(transaction.firstConfirmDate ?? transaction.createDate)}
-          />
-          <OneLine
-            label="Blockchain"
-            value={<ChainLabel blockchain={transaction.blockchain} />}
-          />
-          <OneLine label="Note" value={transaction.refId} />
-        </div>
+            <OneLine
+              label="Amount"
+              value={
+                <span
+                  className={`text-right font-medium ${
+                    isInbound ? 'text-green-600' : 'text-destructive'
+                  }`}
+                >
+                  {isInbound ? '+' : '-'} {transaction.amounts?.[0] ?? '0.00'}
+                </span>
+              }
+            />
+            <OneLine
+              label="Date"
+              value={formatDate(transaction.firstConfirmDate ?? transaction.createDate)}
+            />
+            <OneLine
+              label="Blockchain"
+              value={<ChainLabel blockchain={transaction.blockchain} />}
+            />
+            <OneLine label="Note" value={transaction.refId} />
+          </div>
+        )}
       </DialogContent>
     </Dialog>
   );