Fetch wallet transactions

import { useDynamicContext } from "@dynamic-labs/sdk-react-core";
import { useEffect, useState } from "react";

interface Transaction {
  transactionHash: string;
  blockNumber: number;
  transactionTimestamp: string;
  fromAddress: string;
  toAddress: string;
  labels: string[];
  blockExplorerUrls: string[];
  assetTransfers: {
    tokenAddress?: string;
    fromAddress: string;
    toAddress: string;
    amount: number;
    metadata?: {
      name?: string;
      symbol?: string;
      decimals?: number;
      imageUri?: string;
    };
  }[];
}

const WalletTransactions = () => {
  const { primaryWallet, authToken } = useDynamicContext();
  const [transactions, setTransactions] = useState<Transaction[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchTransactions = async () => {
      if (!primaryWallet || !authToken) return;

      setLoading(true);
      try {
        const response = await fetch(
          `https://app.dynamic.xyz/api/v0/sdk/${process.env.NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID}/chains/SOL/transactions/${primaryWallet.address}?networkId=101&limit=10`,
          {
            headers: {
              Authorization: `Bearer ${authToken}`,
            },
          }
        );

        const data = await response.json();
        setTransactions(data.transactions);
      } catch (error) {
        console.error("Failed to fetch transactions:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchTransactions();
  }, [primaryWallet, authToken]);

  if (loading) return <div>Loading transactions...</div>;

  return (
    <div>
      <h2>Transaction History</h2>
      {transactions.map((tx) => (
        <div key={tx.transactionHash}>
          <p>Hash: {tx.transactionHash}</p>
          <p>Type: {tx.labels.join(", ")}</p>
          <p>Date: {new Date(tx.transactionTimestamp).toLocaleString()}</p>
          {tx.assetTransfers.map((transfer, i) => (
            <p key={i}>
              {transfer.metadata?.symbol}: {transfer.amount}
            </p>
          ))}
          <a href={tx.blockExplorerUrls[0]} target="_blank" rel="noopener noreferrer">
            View on Explorer
          </a>
        </div>
      ))}
    </div>
  );
};