Merge pull request #13 from leandrogavidia/small-additions-to-react-hook-examples

Enhance React Hooks Example Components

Author: GuiBibeau

examples/react-hooks/src/components/AccountInspectorCard.tsx

@@ -1,6 +1,7 @@
 import { useAccount } from '@solana/react-hooks';
 import { type ChangeEvent, useMemo, useState } from 'react';
 
+import { formatAccountData } from '../lib/utils';
 import { Button } from './ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/card';
 import { Input } from './ui/input';
@@ -15,16 +16,7 @@ export function AccountInspectorCard() {
 		watch,
 	});
 
-	const formattedData = useMemo(() => {
-		if (!account?.data) {
-			return 'No account data fetched yet.';
-		}
-		try {
-			return JSON.stringify(account.data, null, 2);
-		} catch {
-			return String(account.data);
-		}
-	}, [account]);
+	const formattedData = useMemo(() => formatAccountData(account?.data), [account]);
 
 	const statusLabel = (() => {
 		if (target === '') {
@@ -33,10 +25,10 @@ export function AccountInspectorCard() {
 		if (!account) {
 			return 'Loading account data…';
 		}
-		if (account.error) {
-			return `Fetch error: ${formatError(account.error)}`;
+		if (account?.error) {
+			return `Fetch error: ${formatError(account?.error)}`;
 		}
-		return `Lamports: ${account.lamports ?? 'unknown'} · Slot: ${account.slot ?? 'unknown'}`;
+		return `Lamports: ${account?.lamports ?? 'unknown'} · Slot: ${account?.slot ?? 'unknown'}`;
 	})();
 
 	const handleAddressChange = (event: ChangeEvent<HTMLInputElement>) => {

examples/react-hooks/src/components/SplTokenPanel.tsx

@@ -2,6 +2,7 @@ import { useSplToken, useWalletSession } from '@solana/react-hooks';
 import { type FormEvent, useState } from 'react';
 
 import { computeSplAmountStep, formatSplBalanceStatus, formatSplTransferStatus } from './demoUi';
+import { UsdcFaucetButton } from './UsdcFaucetButton';
 import { Button } from './ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/card';
 import { Input } from './ui/input';
@@ -72,6 +73,7 @@ export function SplTokenPanel() {
 					<CardTitle>USDC (Devnet)</CardTitle>
 					<CardDescription>
 						Inspect the balance helper and send SPL transfers using the <code>useSplToken</code> hook.
+						<UsdcFaucetButton className="mt-4" />
 					</CardDescription>
 				</div>
 			</CardHeader>

examples/react-hooks/src/components/UsdcFaucetButton.tsx

@@ -0,0 +1,23 @@
+import { cn } from '../lib/utils';
+import { DollarIcon } from './icons/DollarIcon';
+
+interface UsdcFaucetLinkProps {
+	className?: string;
+}
+
+export function UsdcFaucetButton({ className }: UsdcFaucetLinkProps) {
+	return (
+		<div className={cn('flex items-center justify-start gap-2', className)}>
+			<span className="text-sm text-muted-foreground">Need test USDC?</span>
+			<a
+				href="https://faucet.circle.com/"
+				target="_blank"
+				rel="noopener noreferrer"
+				className="inline-flex items-center gap-1.5 rounded bg-[#2775CA] px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-[#1e5ba8] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2775CA] focus-visible:ring-offset-1"
+			>
+				<DollarIcon className="h-3 w-3" />
+				Get from Faucet
+			</a>
+		</div>
+	);
+}

examples/react-hooks/src/components/icons/DollarIcon.tsx

@@ -0,0 +1,17 @@
+interface DollarIconProps {
+	className?: string;
+}
+
+export function DollarIcon({ className }: DollarIconProps) {
+	return (
+		<svg
+			className={className}
+			fill="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+		>
+			<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.72-2.84 0-2.27-1.72-3.12-3.65-3.55z" />
+		</svg>
+	);
+}

examples/react-hooks/src/lib/utils.ts

@@ -4,3 +4,43 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]): string {
 	return twMerge(clsx(inputs));
 }
+
+/**
+ * Formats account data for display purposes.
+ * Handles Uint8Array, bigint, and complex objects with special formatting.
+ *
+ * @param data - The account data to format
+ * @returns A formatted string representation of the data
+ */
+export function formatAccountData(data: unknown): string {
+	if (!data) {
+		return 'No account data fetched yet.';
+	}
+
+	try {
+		if (data instanceof Uint8Array) {
+			return `Uint8Array(${data.length} bytes):\n${Array.from(data.slice(0, 100))
+				.map((byte) => byte.toString(16).padStart(2, '0'))
+				.join(' ')}${data.length > 100 ? '\n... (truncated)' : ''}`;
+		}
+
+		return JSON.stringify(
+			data,
+			(_, value) => {
+				if (typeof value === 'bigint') {
+					return value.toString();
+				}
+				if (value instanceof Uint8Array) {
+					return `Uint8Array(${value.length})`;
+				}
+				return value;
+			},
+			2,
+		);
+	} catch {
+		if (typeof data === 'object' && data !== null) {
+			return `[Complex Object]\nType: ${data.constructor?.name || 'Unknown'}\nKeys: ${Object.keys(data).join(', ')}`;
+		}
+		return String(data);
+	}
+}

packages/client/src/client/actions.ts

@@ -463,24 +463,30 @@ export function createActions({ connectors, logger: inputLogger, runtime, store
 	 * @returns Promise resolving with the signature for the airdrop transaction.
 	 */
 	async function requestAirdrop(address: Address, lamports: Lamports) {
-		if (!('requestAirdrop' in runtime.rpc)) {
-			throw new Error('The current RPC endpoint does not support airdrops.');
+		try {
+			const factory = airdropFactory({
+				rpc: runtime.rpc,
+				rpcSubscriptions: runtime.rpcSubscriptions,
+			} as Parameters<typeof airdropFactory>[0]);
+			const signature = await factory({
+				commitment: getCommitment('confirmed'),
+				lamports,
+				recipientAddress: address,
+			});
+			logger({
+				data: { address: address.toString(), lamports: lamports.toString(), signature },
+				level: 'info',
+				message: 'airdrop requested',
+			});
+			return signature;
+		} catch (error) {
+			logger({
+				data: { address: address.toString(), lamports: lamports.toString(), ...formatError(error) },
+				level: 'error',
+				message: 'airdrop request failed',
+			});
+			throw error;
 		}
-		const factory = airdropFactory({
-			rpc: runtime.rpc,
-			rpcSubscriptions: runtime.rpcSubscriptions,
-		} as Parameters<typeof airdropFactory>[0]);
-		const signature = await factory({
-			commitment: getCommitment('confirmed'),
-			lamports,
-			recipientAddress: address,
-		});
-		logger({
-			data: { address: address.toString(), lamports: lamports.toString(), signature },
-			level: 'info',
-			message: 'airdrop requested',
-		});
-		return signature;
 	}
 
 	return {