feat: Display Token::Transfer, Token::TransferChecked and Token::SyncNative at Inspector (#511)

## Description

PR fix parsing for TokenProgram's Instruction at Inspector:
- Transfer
- TransferChecked
- SyncNative

Several improvements also been made:
- Display "Program" field for several cards in all modes
- - Extended information about the owner program
- Mock ALTs to not fetch them
- Improve tests for Instruction Cards

## Type of change

-   [x] Bug fix
-   [x] New feature

## Screenshots

BEFORE | AFTER | Link
-- | -- | --
<img width="1037" height="857" alt="image"
src="https://github.com/user-attachments/assets/04bac1bd-bb9d-4f36-b836-73235efdf11b"
/> | <img width="1012" height="900" alt="image"
src="https://github.com/user-attachments/assets/c72df96e-1cfb-4cf6-8197-f6ad6d375602"
/> |
[Link](http://localhost:3000/tx/28Z5go9RAfm8CywJHZ2kxXqyxmeAA4pacZgbKTourr4QjB7NpXozYwmctgDcR5qy5rFiGYSr4eizeMLt9BePQNRA/inspect)
<img width="1006" height="864" alt="image"
src="https://github.com/user-attachments/assets/ad674401-ccac-4f70-ae4b-31b01891e358"
/> | <img width="1008" height="872" alt="image"
src="https://github.com/user-attachments/assets/c13746d3-1e64-4096-97f1-63c0bd7394d0"
/> |
[Link](http://localhost:3000/tx/28Z5go9RAfm8CywJHZ2kxXqyxmeAA4pacZgbKTourr4QjB7NpXozYwmctgDcR5qy5rFiGYSr4eizeMLt9BePQNRA/inspect)
<img width="1044" height="132" alt="image"
src="https://github.com/user-attachments/assets/b7898021-9c5c-4be6-bed9-29bacfd0b219"
/> | <img width="1009" height="469" alt="image"
src="https://github.com/user-attachments/assets/e394e9c0-d56d-49ff-bee6-3880c3cf1f6a"
/> |
[Link](http://localhost:3000/tx/3b5pymMQPmkTje12xJLQrbnNWmEDE8CVZqEot8iPdT9gmFetDFBJfqgyCM9V3fiVYDkTwmCTAVE5bzKvDa8iZMJg/inspect#4)

## Testing

`pnpm t`

## Related Issues

[HOO-237](https://linear.app/solana-fndn/issue/HOO-237)

## Checklist

-   [x] My code follows the project's style guidelines
-   [x] I have added tests that prove my fix/feature works
-   [x] All tests pass locally and in CI
-   [x] CI/CD checks pass
-   [x] I have included screenshots for protocol screens (if applicable)

<!-- ELLIPSIS_HIDDEN -->

----

> [!IMPORTANT]
> Add support for parsing and displaying `Token::Transfer`,
`Token::TransferChecked`, and `Token::SyncNative` instructions in the
Inspector, with additional improvements and tests.
> 
>   - **Behavior**:
> - Add parsing for `Token::Transfer`, `Token::TransferChecked`, and
`Token::SyncNative` in `spl-token.parser.ts`.
> - Display "Program" field in `InspectorInstructionCard` and
`UnknownDetailsCard`.
>   - **Components**:
> - Add `ProgramField` component in `ProgramField.tsx` for displaying
program information.
> - Update `BaseRawDetails` to handle loading state when `ix` is
undefined or has no keys.
>   - **Tests**:
> - Add tests for `BaseInstructionCard`, `AccountsCard`,
`AssociatedTokenDetailsCard`, `ComputeBudgetDetailsCard`,
`SystemDetailsCard`, and `TokenDetailsCard`.
>     - Add Storybook stories for `BaseRawDetails` and `ProgramField`.
>   - **Misc**:
> - Mock accounts in `MockAccountsProvider.tsx` to avoid network
requests in tests.
> - Update `BUILD.md` with new route sizes and first load JS metrics.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=solana-foundation%2Fexplorer&utm_source=github&utm_medium=referral)<sup>
for 1a80ba9. You can
[customize](https://app.ellipsis.dev/solana-foundation/settings/summaries)
this summary. It will automatically update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

Author: rogaldh

.gitignore

@@ -10,6 +10,7 @@
 
 # next.js
 /.next/
+/.next-dev/
 /out/
 
 # production

.storybook/__mocks__/MockAccountsProvider.tsx

@@ -0,0 +1,83 @@
+import { Account, DispatchContext, FetchersContext, State, StateContext } from '@providers/accounts';
+import { TOKEN_PROGRAM_ID } from '@providers/accounts/tokens';
+import { PublicKey, SystemProgram } from '@solana/web3.js';
+import React from 'react';
+
+import { FetchStatus } from '@/app/providers/cache';
+import { MAINNET_BETA_URL } from '@/app/utils/cluster';
+import { LOADER_IDS } from '@/app/utils/programs';
+
+// BPF Loader 2 program ID - using key from LOADER_IDS
+const BPF_LOADER_2_KEY = Object.keys(LOADER_IDS).find(key => LOADER_IDS[key] === 'BPF Loader 2')!;
+const BPF_LOADER_2 = new PublicKey(BPF_LOADER_2_KEY);
+
+// Mock account data for programs
+const createMockProgramAccount = (pubkey: PublicKey): Account => ({
+    pubkey,
+    lamports: 5_542_247_638, // ~5.54 SOL
+    executable: true,
+    owner: BPF_LOADER_2,
+    space: 36,
+    data: {},
+});
+
+// Pre-populated mock entries for known programs
+const mockState: State = {
+    url: MAINNET_BETA_URL,
+    entries: {
+        [SystemProgram.programId.toBase58()]: {
+            data: createMockProgramAccount(SystemProgram.programId),
+            status: FetchStatus.Fetched,
+        },
+        [TOKEN_PROGRAM_ID.toBase58()]: {
+            data: createMockProgramAccount(TOKEN_PROGRAM_ID),
+            status: FetchStatus.Fetched,
+        },
+    },
+};
+
+// Mock fetchers that do nothing
+const mockFetchers = {
+    parsed: { fetch: () => {} },
+    raw: { fetch: () => {} },
+    skip: { fetch: () => {} },
+};
+
+type MockAccountsProviderProps = {
+    children: React.ReactNode;
+};
+
+/**
+ * Mock provider for Storybook stories that replaces AccountsProvider.
+ *
+ * Provides pre-populated account data for commonly used programs
+ * (System Program, Token Program, etc.) without making network requests.
+ *
+ * @example
+ * ```tsx
+ * import { MockAccountsProvider } from '../../../../../.storybook/__mocks__/MockAccountsProvider';
+ *
+ * const meta = {
+ *     decorators: [
+ *         Story => (
+ *             <ClusterProvider>
+ *                 <MockAccountsProvider>
+ *                     <Story />
+ *                 </MockAccountsProvider>
+ *             </ClusterProvider>
+ *         ),
+ *     ],
+ * };
+ * ```
+ *
+ * To add more mock accounts, add entries to the `mockState.entries` object.
+ */
+export function MockAccountsProvider({ children }: MockAccountsProviderProps) {
+    return (
+        <StateContext.Provider value={mockState}>
+            <DispatchContext.Provider value={() => {}}>
+                <FetchersContext.Provider value={mockFetchers as any}>{children}</FetchersContext.Provider>
+            </DispatchContext.Provider>
+        </StateContext.Provider>
+    );
+}

.storybook/decorators.tsx

@@ -0,0 +1,57 @@
+import { ClusterProvider } from '@providers/cluster';
+import type { Decorator, Parameters } from '@storybook/react';
+import React from 'react';
+
+import { MockAccountsProvider } from './__mocks__/MockAccountsProvider';
+
+/** Wraps stories with ClusterProvider. Usage: `decorators: [withCluster]` */
+export const withCluster: Decorator = Story => (
+    <ClusterProvider>
+        <Story />
+    </ClusterProvider>
+);
+
+/** Wraps stories with ClusterProvider and MockAccountsProvider. Usage: `decorators: [withClusterAndAccounts]` */
+export const withClusterAndAccounts: Decorator = Story => (
+    <ClusterProvider>
+        <MockAccountsProvider>
+            <Story />
+        </MockAccountsProvider>
+    </ClusterProvider>
+);
+
+/** Decorator for card table field components. Usage: `decorators: [withCardTableField]` */
+export const withCardTableField: Decorator = Story => (
+    <ClusterProvider>
+        <MockAccountsProvider>
+            <div className="card">
+                <div className="table-responsive mb-0">
+                    <style>{`.card-table tbody tr:first-child td { border-top: none !important; }`}</style>
+                    <table className="table table-sm table-nowrap card-table">
+                        <tbody>
+                            <Story />
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </MockAccountsProvider>
+    </ClusterProvider>
+);
+
+type NextjsNavigationOptions = {
+    pathname?: string;
+    query?: Record<string, string>;
+};
+
+/** Creates parameters for components using Next.js navigation */
+export const createNextjsParameters = (options?: NextjsNavigationOptions): Parameters => ({
+    nextjs: {
+        appDirectory: true,
+        navigation: {
+            pathname: options?.pathname ?? '/',
+            query: options?.query ?? {},
+        },
+    },
+});
+
+export const nextjsParameters: Parameters = createNextjsParameters();

.storybook/preview.tsx

@@ -32,6 +32,7 @@ const preview: Preview = {
                 date: /Date$/i,
             },
         },
+        layout: 'padded',
     },
 
     decorators: [

app/__tests__/mock-resolvers.ts

@@ -0,0 +1,73 @@
+import { AddressLookupTableAccount, PublicKey } from '@solana/web3.js';
+
+import E5Alt from './stubs/E59uBXGqn83xN17kMbBVfU1M7T4wHG91eiygHb88Aovb.json';
+import EDAlt from './stubs/EDDSpjZHrsFKYTMJDcBqXAjkLcu9EKdvrQR4XnqsXErH.json';
+import GDAlt from './stubs/GDLpHg53y5sufRSftvZscFMwdSqP8kHaLwhsT4ZwYSaV.json';
+
+/**
+ * Mock Address Lookup Table data for tests.
+ * Keys are ALT account addresses, values are arrays of resolved addresses.
+ *
+ * To get ALT data, run:
+ * ```
+ * const connection = new Connection(clusterApiUrl('mainnet-beta'));
+ * const result = await connection.getAddressLookupTable(new PublicKey(altKey));
+ * console.log(JSON.stringify(result.value.state.addresses.map(a => a.toBase58())));
+ * ```
+ */
+const ALT_DATA: Record<string, string[]> = {
+    // Used by computeBudgetMsg
+    E59uBXGqn83xN17kMbBVfU1M7T4wHG91eiygHb88Aovb: E5Alt,
+
+    // Used by aTokenCreateIdempotentMsg
+    EDDSpjZHrsFKYTMJDcBqXAjkLcu9EKdvrQR4XnqsXErH: EDAlt,
+
+    // Used by computeBudgetMsg
+    GDLpHg53y5sufRSftvZscFMwdSqP8kHaLwhsT4ZwYSaV: GDAlt,
+};
+
+/**
+ * Creates a mock AddressLookupTableAccount from stored ALT data.
+ */
+function createMockLookupTable(accountKey: PublicKey): AddressLookupTableAccount | null {
+    const addresses = ALT_DATA[accountKey.toBase58()];
+    if (!addresses) {
+        return null;
+    }
+
+    return new AddressLookupTableAccount({
+        key: accountKey,
+        state: {
+            addresses: addresses.map(addr => new PublicKey(addr)),
+            authority: undefined,
+            deactivationSlot: BigInt('18446744073709551615'),
+            lastExtendedSlot: 0,
+            lastExtendedSlotStartIndex: 0,
+        },
+    });
+}
+
+/**
+ * Resolves address lookup tables from mock data instead of making network requests.
+ * Drop-in replacement for:
+ * ```
+ * const connection = new Connection(clusterApiUrl('mainnet-beta'));
+ * const lookups = await Promise.all(
+ *     m.addressTableLookups.map(lookup =>
+ *         connection.getAddressLookupTable(lookup.accountKey).then(val => val.value)
+ *     )
+ * );
+ * ```
+ *
+ * Usage:
+ * ```
+ * const lookups = resolveAddressLookupTables(m.addressTableLookups);
+ * ```
+ */
+export function resolveAddressLookupTables(
+    addressTableLookups: Array<{ accountKey: PublicKey }>
+): AddressLookupTableAccount[] {
+    return addressTableLookups
+        .map(lookup => createMockLookupTable(lookup.accountKey))
+        .filter((x): x is AddressLookupTableAccount => x !== null);
+}

app/__tests__/mock-stubs.ts

@@ -74,3 +74,23 @@ export const systemProgramAuthorizeNonceQueryParam =
 // http://localhost:3000/tx/inspector?message=gAEAAwUMMLe3YoGRo3K1%2FT5QfmVUXG8b7svyH9T32%2FUutO6CZQWWFyysN3wFkbv3PDJJ7%2BSesMz2jrhIaRUdLtZzgVKOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGp9UXGSxWjuCKhF9z0peIzwNcMUWyGrNE2AYuqUAAAAan1RcZLFxRIYzJTD1K8X9Y2u4Im6H9ROPb2YoAAAAAnMnz%2FyRSulVpWHNhBhMhO%2FLrxNFIAL2lufr2C8PAYIABAgMBAwQkBgAAAAWHion%2FERTdIzd%2Fc4fizy7EBdxS9i6CBqhVMDd%2BMKF0AA%3D%3D
 export const systemProgramInitializeNonceQueryParam =
     'gAEAAwUMMLe3YoGRo3K1%2FT5QfmVUXG8b7svyH9T32%2FUutO6CZQWWFyysN3wFkbv3PDJJ7%2BSesMz2jrhIaRUdLtZzgVKOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGp9UXGSxWjuCKhF9z0peIzwNcMUWyGrNE2AYuqUAAAAan1RcZLFxRIYzJTD1K8X9Y2u4Im6H9ROPb2YoAAAAAnMnz%2FyRSulVpWHNhBhMhO%2FLrxNFIAL2lufr2C8PAYIABAgMBAwQkBgAAAAWHion%2FERTdIzd%2Fc4fizy7EBdxS9i6CBqhVMDd%2BMKF0AA%3D%3D';
+
+// Message with Token::TransferChecked instruction
+// http://localhost:3000/tx/X8DpDCrFN8Ljsh4wcCKLvrsBXAeuxCt8xj4re6dZkESYT95QiVraC9Q7ra6afekg9HvQt4B78K8VNgcQrzZqBb5/inspect
+export const tokenTransferCheckedMsg =
+    '{"header":{"numReadonlySignedAccounts":0,"numReadonlyUnsignedAccounts":6,"numRequiredSignatures":1},"accountKeys":["37vWB5RfLRpnhNobhzmwCRGZbynGd4je2NvppSjUsEdJ","4aa42XQFo45wc2PHQH21vahuyuFYCEZAH4G27xpGYqf6","CFRWXYp8zc2ftkF2Bv8jXmQu1qW67goZjSkKMjv6UV3P","11111111111111111111111111111111","AGRidUXLeDij9CJprkZx7WBXtTQC67jtfiwz293mVrJ","ComputeBudget111111111111111111111111111111","TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA","97PALEbpPj7muiQqi2HXS8QukLsrrr1yfgKfvXjWtsUG","ATokenGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL"],"recentBlockhash":"3nD586uY1XkvvyNR2tKnC8tRweibv8fbo7mYMH5HGqhD","instructions":[{"accounts":[0,2,7,4,3,6],"data":"2","programIdIndex":8,"stackHeight":null},{"accounts":[1,4,2,0],"data":"g7KVp96UU5SJy","programIdIndex":6,"stackHeight":null},{"accounts":[],"data":"EMbWrb","programIdIndex":5,"stackHeight":null}],"indexToProgramIds":{}}';
+
+// Message with Token::Transfer instruction
+// http://localhost:3000/tx/E7zy6gPCa3XRy5ykdb2Pt7nb2RHKPWhtnQ5jWgJat4M25jGy3PFAcowtBiby4YyvFRgipu1Js6iX9NpU1WNbFNJ?message=AgEDB4QQ%252BNoctdauTMavfjwKKEEKGqz4vm%252BgzaLMy32q%252BXWVOFuhw3pPUltszxrkhUJ46DV6f49FA9ZmHfbsrSFKs5BVvVDb8%252F6phw5Mikw2uolkYjgi9XPOIGGo15XIc3cbpfF2h%252BStcRX7QYlqbm2YCUb9PvVywyoH7McGfbJCYJofAwZGb%252BUhFzL%252F7K26csOb57yM5bvF9xJrLEObOkAAAAAGgcTOR%252BIjaLixVV7Ih68JLvx%252B%252B7Zso%252FUvv2jUrJy3qAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAyMDI3DS%252BRZK6zwhQew2w5vNRZ6a5I8CGVIGkyB6G%252BgcDBAAFAghMAQAEAAkDEAkFAAAAAAAFBQIDAQAGmgEw%252Bk6o0OLa0wAAiwAAAAEBAAJgpkAy5oO19oHcg%252FO%252B4Bt4HHL7igKZ69m%252FAvha2eA6YAVKU1qZKSEGTSTocWDaOHx8NbXdvJK7geQfqEBBBUSNAQEBAEAANTRkNzk1MmY5OGY1OTJmNGI0NzIxMjQ4MTQyZjQ0MjUzNGQzNjU5NTQxNTZiNTBjYjY1YzIwODM4ZmZhYjk0NgAA
+export const tokenTransferMsg =
+    '{"header":{"numReadonlySignedAccounts":1,"numReadonlyUnsignedAccounts":7,"numRequiredSignatures":2},"staticAccountKeys":["6nvUkyJG5j6rH3Hfm15mJNgPMJ1cxHQapfm5K3k647iv","Aoxj61PC8aLZvGw6Ad9QkW2yZGZh1prvUZn8PUghJZfx","A2UBBBAbLJw6Js5fvqRivd3nNWKD4H612814mUoTp8rC","Eq6hAvijAYQP4Yw3U1ESDiF7gZdYPfCo2AvD3t31LypQ","11111111111111111111111111111111","ComputeBudget111111111111111111111111111111","SysvarRent111111111111111111111111111111111","TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA","vLbNrN3AGMTGkEmUsLZRUGXEAkFbSkjLTYb2w1fWPn3","ATokenGPvbdGVxr1b2hvZbsiqW5xWH25efTNsLJA8knL","EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"],"recentBlockhash":"4j667Zcmv9DGioGfNt4Nves34JPP43jGEy4zGcb7Lnsh","compiledInstructions":[{"programIdIndex":5,"accountKeyIndexes":[],"data":{"type":"Buffer","data":[3,173,143,0,0,0,0,0,0]}},{"programIdIndex":5,"accountKeyIndexes":[],"data":{"type":"Buffer","data":[2,3,138,0,0]}},{"programIdIndex":9,"accountKeyIndexes":[0,2,8,10,4,7,6],"data":{"type":"Buffer","data":[1]}},{"programIdIndex":7,"accountKeyIndexes":[3,2,1],"data":{"type":"Buffer","data":[3,192,16,237,127,38,0,0,0]}}],"addressTableLookups":[]}';
+
+// Message with SystemProgram::TransferWithSeed instruction
+// http://localhost:3000/tx/inspector?message=AgEABCD2bYdQKJdSgj1QM%252BpZ72SIZpv2GYDFEJikyXElblc%252FAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPioCg1xVXrm6Z5RzYN7QLfJfK96HJQRMCHIKy%252BNUm1SiACWft94a8hVfpx%252FU1M7sE417sq9MZxiewNt1gqknOrYwO4BG3al53uPCK0GFPCoa1fp40X5y7csr6pS8m3QkBAQMCAQNHCwAAAEBCDwAAAAAAEwAAAAAAAABleGFtcGxlLXNlZWQtcGhyYXNlAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%253D
+export const systemTransferWithSeedMsg =
+    '{"header":{"numRequiredSignatures":2,"numReadonlySignedAccounts":1,"numReadonlyUnsignedAccounts":0},"accountKeys":["3DfzKrnfv8vxxGPPQi1LX6PE8a69V7g2AbvguSgAguan","11111111111111111111111111111111","23fcFSBcrszjjqd66qeqptM17oWXERStDUafP4zLypT6","3j6YZsXi9FQrWvFp5TRN6AdQ81GY3GtNWq6imr3EawyF"],"recentBlockhash":"CgTQBy9C4Y6DQuGwDbXcvTYUxjskpsN9JG6wAUGGDCY8","instructions":[{"programIdIndex":1,"accounts":[2,1,3],"data":"38kGFr8ikW7X4bCtZ8kfCoefSKoxGTzFwhvKg9oyby8wMWV3m8YRM1PxQALkEbYN3wdqtN1rN2xYwngeHs19WJ5C25Xe4NDhh"}],"indexToProgramIds":{}}';
+
+// Message with SystemProgram::Transfer instruction
+// http://localhost:3000/tx/inspector?message=AgABBPFmGw2wO8jwEIBQypHH18EXc7vbGQyk6w8MRAhJrzWihW4JIxMJs9rl0X5O%252BxMD%252BHnmTgeu%252F5XAZ5SnUDEEsCMciV6RD3TnpfA5gBxnchikUAFUgzX7YkbfQF8%252Bg4ZHZQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL0mnxZdAiBKKUa1MajdzDbTzPr9og9OGh2Pqn9zijcABAwIBAgwCAAAAQEIPAAAAAAA%253D
+export const systemTransferMsg =
+    '{"header":{"numRequiredSignatures":2,"numReadonlySignedAccounts":0,"numReadonlyUnsignedAccounts":1},"accountKeys":["HFKZMufXXi8eQ7gguP7yyhhJDr5ztdP6v5ppN2DQEeth","9yrYKJxZKktutPzhUNgS92bzVjpHkgZPNpZCHRr6M2TC","2vPuXtAJLtxmkJRhuEwCuvUKyRemreh7q1DR4ns7wwzL","11111111111111111111111111111111"],"recentBlockhash":"4BbJaBaqatXh5gbRry2yGerZoDm8MP3Tdaw9yVbHSGa3","instructions":[{"programIdIndex":3,"accounts":[1,2],"data":"3Bxs4Bc3VYuGVB19"}],"indexToProgramIds":{}}';