add swr and introduce useTransactions hook

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

@@ -0,0 +1,25 @@
+import useSWR, { mutate } from 'swr';
+
+import { Transaction } from '~/lib/types';
+
+interface UseTransactionsResult {
+  data: Transaction[] | undefined;
+  error: Error | undefined;
+  isLoading: boolean;
+  refetch: () => Promise<void>;
+}
+
+export const useTransactions = (walletId: string): UseTransactionsResult => {
+  const { data, error, isLoading } = useSWR<Transaction[], Error>(
+    `/api/listTransactions/${walletId}`,
+  );
+
+  const refetch = () => mutate(`/api/listTransactions/${walletId}`);
+
+  return {
+    data,
+    error,
+    isLoading,
+    refetch,
+  };
+};

packages/circle-demo-webapp/app/root.tsx

@@ -10,6 +10,7 @@ import {
   useNavigation,
 } from '@remix-run/react';
 import { LoaderCircle } from 'lucide-react';
+import { SWRConfig } from 'swr';
 
 import { Sidebar } from '~/components/Sidebar';
 import { cachedLoader } from '~/lib/cache';
@@ -66,7 +67,14 @@ export default function App() {
           </div>
         )}
 
-        <Outlet />
+        <SWRConfig
+          value={{
+            fetcher: (resource: string | URL | Request, init?: RequestInit) =>
+              fetch(resource, init).then((res) => res.json()),
+          }}
+        >
+          <Outlet />
+        </SWRConfig>
       </div>
     </div>
   );

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

@@ -1,9 +1,17 @@
 import { GetTransactionInput } from '@circle-fin/developer-controlled-wallets';
-import { ActionFunction } from '@remix-run/node';
+import { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 
 import { sdk } from '~/lib/sdk';
 
-export const action: ActionFunction = async ({ request }) => {
+/**
+ * @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({ 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

@@ -0,0 +1,16 @@
+import { LoaderFunctionArgs } from '@remix-run/node';
+
+import { sdk } from '~/lib/sdk';
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  if (!params.walletId) {
+    throw new Error('Wallet ID is required');
+  }
+
+  const res = await sdk.listTransactions({
+    walletIds: [params.walletId],
+    includeAll: true,
+  });
+
+  return Response.json(res.data?.transactions);
+}

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

@@ -1,9 +1,9 @@
 import { UpdateWalletSetInput } from '@circle-fin/developer-controlled-wallets';
-import { ActionFunction } from '@remix-run/node';
+import { ActionFunctionArgs } from '@remix-run/node';
 
 import { sdk } from '~/lib/sdk';
 
-export const action: ActionFunction = async ({ request }) => {
+export async function action({ request }: ActionFunctionArgs) {
   const res = await sdk.updateWalletSet((await request.json()) as UpdateWalletSetInput);
   return Response.json(res.data);
-};
+}

packages/circle-demo-webapp/app/routes/wallet.$id/route.tsx

@@ -4,13 +4,13 @@ import {
 } from '@circle-fin/developer-controlled-wallets';
 import { LoaderFunctionArgs } from '@remix-run/node';
 import { useLoaderData, useParams } from '@remix-run/react';
-import { useEffect, useState } from 'react';
 
 import { TransactionTableHead } from '~/components/TransactionTableHead';
 import { TransactionTableRow } from '~/components/TransactionTableRow';
 import { Card } from '~/components/ui/card';
 import { WalletBalance } from '~/components/WalletBalance';
 import { WalletDetails } from '~/components/WalletDetails';
+import { useTransactions } from '~/hooks/useTransactions';
 import { sdk } from '~/lib/sdk';
 import { Transaction, Wallet, WalletTokenBalance } from '~/lib/types';
 import { callFetch } from '~/lib/utils';
@@ -19,46 +19,40 @@ import { FaucetButton } from './components/FaucetButton';
 import { WalletReceiveDialog } from './components/WalletReceiveDialog';
 import { WalletSendDialog } from './components/WalletSendDialog';
 
-export async function loader(all: LoaderFunctionArgs) {
-  const { params } = all;
+export async function loader({ params }: LoaderFunctionArgs) {
   const { id } = params;
   if (!id) {
     throw new Error('Wallet ID is required');
   }
 
-  const [balancesRes, walletRes] = await Promise.all([
+  const [balancesRes, walletRes, transactionsRes] = await Promise.all([
     sdk.getWalletTokenBalance({
       id,
       includeAll: true,
     }),
     sdk.getWallet({ id }),
+    sdk.listTransactions({
+      walletIds: [id],
+      includeAll: true,
+    }),
   ]);
 
   return {
     balances: (balancesRes?.data?.tokenBalances ?? []) as WalletTokenBalance[],
     wallet: walletRes?.data?.wallet as Wallet,
+    transactions: transactionsRes?.data?.transactions as Transaction[],
   };
 }
 
 export default function WalletBalancePage() {
   const { id } = useParams();
-  const [transactions, setTransactions] = useState<Transaction[]>([]);
-  const { balances, wallet } = useLoaderData<typeof loader>();
-
-  const loadTransactions = async () => {
-    const res = await callFetch<{
-      transactions: Transaction[];
-    }>('/api/listTransactions', { walletIds: [id], includeAll: true });
-    setTransactions(res.transactions);
-  };
-  useEffect(() => {
-    loadTransactions().catch(console.error);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { balances, wallet, transactions } = useLoaderData<typeof loader>();
+  const { refetch: refetchTransactions } = useTransactions(id ?? '');
 
   if (!id) {
-    return null;
+    throw new Error('Wallet ID is required');
   }
+
   return (
     <div className="space-y-6">
       <header className="flex justify-between items-center mb-6">
@@ -82,7 +76,7 @@ export default function WalletBalancePage() {
               onGetTransaction={(data: GetTransactionInput) =>
                 callFetch<{ transaction: Transaction }>('/api/getTransaction', data)
               }
-              onConfirmed={() => loadTransactions().catch(console.error)}
+              onConfirmed={() => refetchTransactions()}
             />
           </div>
         </WalletDetails>

packages/circle-demo-webapp/package.json

@@ -35,6 +35,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.54.2",
+    "swr": "^2.3.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.24.1"

yarn.lock

@@ -7169,6 +7169,14 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swr@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.3.0.tgz#66fa45023efd4199f4e7ce608c255709a135943d"
+  integrity sha512-NyZ76wA4yElZWBHzSgEJc28a0u6QZvhb6w0azeL2k7+Q1gAzVK+IqQYXhVOC/mzi+HZIozrZvBVeSeOZNR2bqA==
+  dependencies:
+    dequal "^2.0.3"
+    use-sync-external-store "^1.4.0"
+
 synckit@^0.9.1:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.2.tgz#a3a935eca7922d48b9e7d6c61822ee6c3ae4ec62"
@@ -7618,6 +7626,11 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+use-sync-external-store@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc"
+  integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"