Show token transaction history in explorer (#11473)

explorer/src/components/account/TokenHistoryCard.tsx

@@ -0,0 +1,282 @@
+import React from "react";
+import {
+  PublicKey,
+  ConfirmedSignatureInfo,
+  ParsedInstruction,
+} from "@solana/web3.js";
+import { FetchStatus } from "providers/accounts";
+import {
+  useAccountHistories,
+  useFetchAccountHistory,
+} from "providers/accounts/history";
+import {
+  useAccountOwnedTokens,
+  TokenAccountData,
+} from "providers/accounts/tokens";
+import { ErrorCard } from "components/common/ErrorCard";
+import { LoadingCard } from "components/common/LoadingCard";
+import { Signature } from "components/common/Signature";
+import { Address } from "components/common/Address";
+import { useTransactionDetails } from "providers/transactions";
+import { useFetchTransactionDetails } from "providers/transactions/details";
+import { coerce } from "superstruct";
+import { ParsedInfo } from "validators";
+import {
+  TokenInstructionType,
+  IX_TITLES,
+} from "components/instruction/token/types";
+
+export function TokenHistoryCard({ pubkey }: { pubkey: PublicKey }) {
+  const address = pubkey.toBase58();
+  const ownedTokens = useAccountOwnedTokens(address);
+
+  if (ownedTokens === undefined) {
+    return null;
+  }
+
+  const { tokens } = ownedTokens;
+  if (tokens === undefined || tokens.length === 0) return null;
+
+  return <TokenHistoryTable tokens={tokens} />;
+}
+
+function TokenHistoryTable({ tokens }: { tokens: TokenAccountData[] }) {
+  const accountHistories = useAccountHistories();
+  const fetchAccountHistory = useFetchAccountHistory();
+
+  const fetchHistories = (refresh?: boolean) => {
+    tokens.forEach((token) => {
+      fetchAccountHistory(token.pubkey, refresh);
+    });
+  };
+
+  // Fetch histories on load
+  React.useEffect(() => {
+    tokens.forEach((token) => {
+      const address = token.pubkey.toBase58();
+      if (!accountHistories[address]) {
+        fetchAccountHistory(token.pubkey, true);
+      }
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const fetchedFullHistory = tokens.every((token) => {
+    const history = accountHistories[token.pubkey.toBase58()];
+    return history && history.foundOldest === true;
+  });
+
+  const fetching = tokens.some((token) => {
+    const history = accountHistories[token.pubkey.toBase58()];
+    return history && history.status === FetchStatus.Fetching;
+  });
+
+  const failed = tokens.some((token) => {
+    const history = accountHistories[token.pubkey.toBase58()];
+    return history && history.status === FetchStatus.FetchFailed;
+  });
+
+  const mintAndTxs = tokens
+    .map((token) => ({
+      mint: token.mint,
+      history: accountHistories[token.pubkey.toBase58()],
+    }))
+    .filter(({ history }) => {
+      return (
+        history !== undefined && history.fetched && history.fetched.length > 0
+      );
+    })
+    .flatMap(({ mint, history }) =>
+      (history.fetched as ConfirmedSignatureInfo[]).map((tx) => ({ mint, tx }))
+    );
+
+  if (mintAndTxs.length === 0) {
+    if (fetching) {
+      return <LoadingCard message="Loading history" />;
+    } else if (failed) {
+      return (
+        <ErrorCard
+          retry={() => fetchHistories(true)}
+          text="Failed to fetch transaction history"
+        />
+      );
+    }
+    return (
+      <ErrorCard
+        retry={() => fetchHistories(true)}
+        retryText="Try again"
+        text="No transaction history found"
+      />
+    );
+  }
+
+  mintAndTxs.sort((a, b) => {
+    if (a.tx.slot > b.tx.slot) return -1;
+    if (a.tx.slot < b.tx.slot) return 1;
+    return 0;
+  });
+
+  return (
+    <div className="card">
+      <div className="card-header align-items-center">
+        <h3 className="card-header-title">Token History</h3>
+        <button
+          className="btn btn-white btn-sm"
+          disabled={fetching}
+          onClick={() => fetchHistories(true)}
+        >
+          {fetching ? (
+            <>
+              <span className="spinner-grow spinner-grow-sm mr-2"></span>
+              Loading
+            </>
+          ) : (
+            <>
+              <span className="fe fe-refresh-cw mr-2"></span>
+              Refresh
+            </>
+          )}
+        </button>
+      </div>
+
+      <div className="table-responsive mb-0">
+        <table className="table table-sm table-nowrap card-table">
+          <thead>
+            <tr>
+              <th className="text-muted w-1">Slot</th>
+              <th className="text-muted">Result</th>
+              <th className="text-muted">Token</th>
+              <th className="text-muted">Instruction Type</th>
+              <th className="text-muted">Transaction Signature</th>
+            </tr>
+          </thead>
+          <tbody className="list">
+            {mintAndTxs.map(({ mint, tx }) => (
+              <TokenTransactionRow key={tx.signature} mint={mint} tx={tx} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="card-footer">
+        {fetchedFullHistory ? (
+          <div className="text-muted text-center">Fetched full history</div>
+        ) : (
+          <button
+            className="btn btn-primary w-100"
+            onClick={() => fetchHistories()}
+            disabled={fetching}
+          >
+            {fetching ? (
+              <>
+                <span className="spinner-grow spinner-grow-sm mr-2"></span>
+                Loading
+              </>
+            ) : (
+              "Load More"
+            )}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TokenTransactionRow({
+  mint,
+  tx,
+}: {
+  mint: PublicKey;
+  tx: ConfirmedSignatureInfo;
+}) {
+  const details = useTransactionDetails(tx.signature);
+  const fetchDetails = useFetchTransactionDetails();
+
+  // Fetch details on load
+  React.useEffect(() => {
+    if (!details) fetchDetails(tx.signature);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const instructions = details?.transaction?.transaction.message.instructions;
+  if (instructions) {
+    const tokenInstructions = instructions.filter(
+      (ix) => "parsed" in ix && ix.program === "spl-token"
+    ) as ParsedInstruction[];
+    if (tokenInstructions.length > 0) {
+      return (
+        <>
+          {tokenInstructions.map((ix, index) => {
+            const parsed = coerce(ix.parsed, ParsedInfo);
+            const { type: rawType } = parsed;
+            const type = coerce(rawType, TokenInstructionType);
+            const typeName = IX_TITLES[type];
+
+            let statusText;
+            let statusClass;
+            if (tx.err) {
+              statusClass = "warning";
+              statusText = "Failed";
+            } else {
+              statusClass = "success";
+              statusText = "Success";
+            }
+
+            return (
+              <tr key={index}>
+                <td className="w-1">{tx.slot}</td>
+
+                <td>
+                  <span className={`badge badge-soft-${statusClass}`}>
+                    {statusText}
+                  </span>
+                </td>
+
+                <td>
+                  <Address pubkey={mint} link />
+                </td>
+
+                <td>{typeName}</td>
+
+                <td>
+                  <Signature signature={tx.signature} link />
+                </td>
+              </tr>
+            );
+          })}
+        </>
+      );
+    }
+  }
+
+  let statusText;
+  let statusClass;
+  if (tx.err) {
+    statusClass = "warning";
+    statusText = "Failed";
+  } else {
+    statusClass = "success";
+    statusText = "Success";
+  }
+
+  return (
+    <tr key={tx.signature}>
+      <td className="w-1">{tx.slot}</td>
+
+      <td>
+        <span className={`badge badge-soft-${statusClass}`}>{statusText}</span>
+      </td>
+
+      <td>
+        <span className="spinner-grow spinner-grow-sm mr-2"></span>
+        Loading
+      </td>
+
+      <td>
+        <Address pubkey={mint} link />
+      </td>
+
+      <td>
+        <Signature signature={tx.signature} link />
+      </td>
+    </tr>
+  );
+}

explorer/src/components/instruction/token/TokenDetailsCard.tsx

@@ -10,22 +10,9 @@ import {
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
 import { InstructionCard } from "../InstructionCard";
 import { Address } from "components/common/Address";
-import { IX_STRUCTS, TokenInstructionType } from "./types";
+import { IX_STRUCTS, TokenInstructionType, IX_TITLES } from "./types";
 import { ParsedInfo } from "validators";
 
-const IX_TITLES = {
-  initializeMint: "Initialize Mint",
-  initializeAccount: "Initialize Account",
-  initializeMultisig: "Initialize Multisig",
-  transfer: "Transfer",
-  approve: "Approve",
-  revoke: "Revoke",
-  setOwner: "Set Owner",
-  mintTo: "Mint To",
-  burn: "Burn",
-  closeAccount: "Close Account",
-};
-
 type DetailsProps = {
   tx: ParsedTransaction;
   ix: ParsedInstruction;

explorer/src/components/instruction/token/types.ts

@@ -112,3 +112,16 @@ export const IX_STRUCTS = {
   burn: Burn,
   closeAccount: CloseAccount,
 };
+
+export const IX_TITLES = {
+  initializeMint: "Initialize Mint",
+  initializeAccount: "Initialize Account",
+  initializeMultisig: "Initialize Multisig",
+  transfer: "Transfer",
+  approve: "Approve",
+  revoke: "Revoke",
+  setOwner: "Set Owner",
+  mintTo: "Mint To",
+  burn: "Burn",
+  closeAccount: "Close Account",
+};

explorer/src/pages/AccountDetailsPage.tsx

@@ -15,6 +15,7 @@ import { clusterPath } from "utils/url";
 import { UnknownAccountCard } from "components/account/UnknownAccountCard";
 import { OwnedTokensCard } from "components/account/OwnedTokensCard";
 import { TransactionHistoryCard } from "components/account/TransactionHistoryCard";
+import { TokenHistoryCard } from "components/account/TokenHistoryCard";
 
 type Props = { address: string; tab?: string };
 export function AccountDetailsPage({ address, tab }: Props) {
@@ -125,7 +126,12 @@ function MoreSection({ pubkey, tab }: { pubkey: PublicKey; tab: MoreTabs }) {
           </div>
         </div>
       </div>
-      {tab === "tokens" && <OwnedTokensCard pubkey={pubkey} />}
+      {tab === "tokens" && (
+        <>
+          <OwnedTokensCard pubkey={pubkey} />
+          <TokenHistoryCard pubkey={pubkey} />
+        </>
+      )}
       {tab === "history" && <TransactionHistoryCard pubkey={pubkey} />}
     </>
   );

explorer/src/providers/accounts/history.tsx

@@ -162,6 +162,18 @@ async function fetchAccountHistory(
   });
 }
 
+export function useAccountHistories() {
+  const context = React.useContext(StateContext);
+
+  if (!context) {
+    throw new Error(
+      `useAccountHistories must be used within a AccountsProvider`
+    );
+  }
+
+  return context.map;
+}
+
 export function useAccountHistory(address: string) {
   const context = React.useContext(StateContext);
 
@@ -185,6 +197,7 @@ export function useFetchAccountHistory() {
   return (pubkey: PublicKey, refresh?: boolean) => {
     const before = state.map[pubkey.toBase58()];
     if (!refresh && before && before.fetched && before.fetched.length > 0) {
+      if (before.foundOldest) return;
       const oldest = before.fetched[before.fetched.length - 1].signature;
       fetchAccountHistory(dispatch, pubkey, url, { before: oldest, limit: 25 });
     } else {

explorer/src/providers/accounts/index.tsx

@@ -241,7 +241,7 @@ export function useAccounts() {
   if (!context) {
     throw new Error(`useAccounts must be used within a AccountsProvider`);
   }
-  return context;
+  return context.accounts;
 }
 
 export function useAccountInfo(address: string) {

explorer/src/providers/accounts/tokens.tsx

@@ -5,6 +5,7 @@ import { useCluster } from "../cluster";
 import { number, string, boolean, coerce, object, nullable } from "superstruct";
 
 export type TokenAccountData = {
+  pubkey: PublicKey;
   mint: PublicKey;
   owner: PublicKey;
   amount: number;
@@ -129,6 +130,7 @@ async function fetchAccountTokens(
       const parsedInfo = accountInfo.account.data.parsed.info;
       const info = coerce(parsedInfo, TokenAccountInfo);
       return {
+        pubkey: accountInfo.pubkey,
         mint: new PublicKey(info.mint),
         owner: new PublicKey(info.owner),
         amount: info.amount,