Skip to content

Commit 7f6e814

Browse files
macalinaomacalinao
committed
update batch accounts example
1 parent 6e3ff81 commit 7f6e814

File tree

1 file changed

+63
-80
lines changed

1 file changed

+63
-80
lines changed

‎apps/example-dapp/src/routes/examples/batch-accounts.tsx‎

Lines changed: 63 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useAccount, useAccounts, useConnectedWallet } from "@macalinao/grill";
1+
import { useAccount, useAccounts } from "@macalinao/grill";
22
import { address } from "@solana/kit";
33
import { createFileRoute } from "@tanstack/react-router";
4-
import { AlertCircle, Coins, Loader2, Zap } from "lucide-react";
4+
import { Coins, Loader2, Zap } from "lucide-react";
55
import { useMemo } from "react";
66
import {
77
Card,
@@ -187,8 +187,7 @@ const BatchAccountsComparison: React.FC = () => {
187187
};
188188

189189
const IndividualFetching: React.FC = () => {
190-
// For comparison, show what it would look like with individual hooks
191-
// (Note: This would result in multiple RPC calls without batching)
190+
// Multiple useAccount hooks also benefit from automatic batching
192191
const token1 = useAccount({
193192
address: COMMON_TOKENS[0]?.mint,
194193
});
@@ -203,13 +202,14 @@ const IndividualFetching: React.FC = () => {
203202
<Card>
204203
<CardHeader>
205204
<div className="flex items-center justify-between">
206-
<CardTitle>Individual Fetching (useAccount)</CardTitle>
205+
<CardTitle>Multiple useAccount Hooks</CardTitle>
207206
<div className="rounded-md border px-2 py-1 text-xs font-medium">
208-
3+ RPC Calls (without batching)
207+
Also batched automatically!
209208
</div>
210209
</div>
211210
<CardDescription>
212-
Using individual useAccount hooks - less efficient without batching
211+
Using individual useAccount hooks - these are also automatically
212+
batched
213213
</CardDescription>
214214
</CardHeader>
215215
<CardContent>
@@ -275,95 +275,78 @@ const IndividualFetching: React.FC = () => {
275275
};
276276

277277
function BatchAccountsPage() {
278-
const { address: walletAddress } = useConnectedWallet();
279-
280278
return (
281279
<div className="container mx-auto py-6">
282280
<div className="mb-6">
283281
<h1 className="text-3xl font-bold">Batch Account Fetching</h1>
284282
<p className="text-muted-foreground mt-2">
285-
Demonstrates the power of useAccounts hook for fetching multiple
286-
accounts efficiently with automatic batching via DataLoader.
283+
Demonstrates how both useAccounts and useAccount hooks automatically
284+
batch multiple account requests via DataLoader for improved
285+
performance.
287286
</p>
288287
</div>
289288

290-
{!walletAddress ? (
291-
<Card className="border-yellow-200 bg-yellow-50">
289+
<div className="space-y-6">
290+
<Card className="border-blue-200 bg-blue-50">
292291
<CardHeader>
293-
<div className="flex items-center gap-2">
294-
<AlertCircle className="h-5 w-5 text-yellow-600" />
295-
<CardTitle className="text-lg">Connect Your Wallet</CardTitle>
296-
</div>
292+
<CardTitle className="text-lg">How it works</CardTitle>
297293
</CardHeader>
298294
<CardContent>
299-
<p className="text-sm text-muted-foreground">
300-
Please connect your wallet to see batch account fetching in
301-
action. The example will check for common token accounts in your
302-
wallet.
295+
<p className="text-sm">
296+
Both <code className="font-mono text-sm">useAccounts</code> and{" "}
297+
<code className="font-mono text-sm">useAccount</code> hooks
298+
automatically batch multiple account requests into a single RPC
299+
call using DataLoader. When multiple components use these hooks
300+
concurrently, all requests are coalesced into efficient batched
301+
RPC calls.
303302
</p>
304303
</CardContent>
305304
</Card>
306-
) : (
307-
<div className="space-y-6">
308-
<Card className="border-blue-200 bg-blue-50">
309-
<CardHeader>
310-
<CardTitle className="text-lg">How it works</CardTitle>
311-
</CardHeader>
312-
<CardContent>
313-
<p className="text-sm">
314-
The <code className="font-mono text-sm">useAccounts</code> hook
315-
automatically batches multiple account requests into a single
316-
RPC call using DataLoader. This significantly improves
317-
performance when fetching many accounts at once.
318-
</p>
319-
</CardContent>
320-
</Card>
321-
322-
<div className="grid gap-6 lg:grid-cols-2">
323-
<BatchAccountsComparison />
324-
<IndividualFetching />
325-
</div>
326305

327-
<Card>
328-
<CardHeader>
329-
<CardTitle>Performance Benefits</CardTitle>
330-
</CardHeader>
331-
<CardContent>
332-
<ul className="space-y-2 text-sm">
333-
<li className="flex items-start gap-2">
334-
<span className="text-primary">•</span>
335-
<span>
336-
<strong>Automatic Batching:</strong> All{" "}
337-
{COMMON_TOKENS.length} account requests are combined into a
338-
single RPC call
339-
</span>
340-
</li>
341-
<li className="flex items-start gap-2">
342-
<span className="text-primary">•</span>
343-
<span>
344-
<strong>Reduced Latency:</strong> One network round-trip
345-
instead of {COMMON_TOKENS.length}
346-
</span>
347-
</li>
348-
<li className="flex items-start gap-2">
349-
<span className="text-primary">•</span>
350-
<span>
351-
<strong>Better UX:</strong> Faster loading times and
352-
smoother user experience
353-
</span>
354-
</li>
355-
<li className="flex items-start gap-2">
356-
<span className="text-primary">•</span>
357-
<span>
358-
<strong>Shared Cache:</strong> Results are cached and shared
359-
across all components
360-
</span>
361-
</li>
362-
</ul>
363-
</CardContent>
364-
</Card>
306+
<div className="grid gap-6 lg:grid-cols-2">
307+
<BatchAccountsComparison />
308+
<IndividualFetching />
365309
</div>
366-
)}
310+
311+
<Card>
312+
<CardHeader>
313+
<CardTitle>Performance Benefits</CardTitle>
314+
</CardHeader>
315+
<CardContent>
316+
<ul className="space-y-2 text-sm">
317+
<li className="flex items-start gap-2">
318+
<span className="text-primary">•</span>
319+
<span>
320+
<strong>Automatic Batching:</strong> All{" "}
321+
{COMMON_TOKENS.length} account requests are combined into
322+
efficient batched RPC calls
323+
</span>
324+
</li>
325+
<li className="flex items-start gap-2">
326+
<span className="text-primary">•</span>
327+
<span>
328+
<strong>Reduced Latency:</strong> Fewer network round-trips
329+
through intelligent request coalescing
330+
</span>
331+
</li>
332+
<li className="flex items-start gap-2">
333+
<span className="text-primary">•</span>
334+
<span>
335+
<strong>Better UX:</strong> Faster loading times and smoother
336+
user experience
337+
</span>
338+
</li>
339+
<li className="flex items-start gap-2">
340+
<span className="text-primary">•</span>
341+
<span>
342+
<strong>Shared Cache:</strong> Results are cached and shared
343+
across all components
344+
</span>
345+
</li>
346+
</ul>
347+
</CardContent>
348+
</Card>
349+
</div>
367350
</div>
368351
);
369352
}

0 commit comments

Comments
 (0)