feat/improve T22 account page (#534)

## Description

This PR displays `Token Extensions` for other accounts.

## Type of change

-   [x] New feature

## Screenshots

<img width="732" alt="image"
src="https://github.com/user-attachments/assets/44de309c-f2cf-43f9-9f29-19391be764e5"
/>
<img width="739" alt="image"
src="https://github.com/user-attachments/assets/d24eacd5-2715-4683-9667-6c2c8808f2cc"
/>


## Testing

`pnpm dev` > Visit links below

Token Account:
http://localhost:3000/address/7owTEfBdJ2nEdxaUZ2Hm6XevkG7FqHgmeVhkZbUTCCQT/token-extensions
Multisig Account:
http://localhost:3000/address/FtrZqgM9begkaLHq3f4hGEUrAK1jjJpkc8hZ1hVk3EDN/token-extensions

## Related Issues

Relates to: #516

## 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 feature to display token extensions for accounts, handling
different account types and rendering logic in `page-client.tsx` and
`TokenExtensionsCard.tsx`.
> 
>   - **Behavior**:
> - Displays `Token Extensions` for accounts in `page-client.tsx` using
`TokenExtensionsCard`.
> - Handles `mint` and `account` types, rendering `TokenExtensionsCard`
if extensions exist, otherwise shows `NoResults`.
> - Uses `ErrorBoundary` to handle errors in
`TokenExtensionsEntriesPageClient`.
>   - **Components**:
> - `TokenExtensionsCard` in `TokenExtensionsCard.tsx` now fetches token
info and displays extensions using `TokenExtensionsSection`.
> - Introduces `populateTokenExtensions()` to parse and sort extensions.
>   - **Misc**:
>     - Removes unused `epoch` variable in `TokenAccountSection.tsx`.
> - Updates `TokenExtensionsPage` in `page.tsx` to use
`TokenExtensionsEntriesPageClient`.
> 
> <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 f41dd7e. It will automatically
update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

Author: rogaldh

app/address/[address]/token-extensions/page-client.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { ParsedAccountRenderer } from '@components/account/ParsedAccountRenderer';
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { create } from 'superstruct';
+
+import { TokenExtensionsCard } from '@/app/components/account/TokenExtensionsCard';
+import { ErrorCard } from '@/app/components/common/ErrorCard';
+import { MintAccountInfo, TokenAccountInfo } from '@/app/validators/accounts/token';
+
+export type Props = Readonly<{
+    params: {
+        address: string;
+    };
+}>;
+
+function TokenExtensionsEntriesRenderer({
+    account,
+}: React.ComponentProps<React.ComponentProps<typeof ParsedAccountRenderer>['renderComponent']>) {
+    const parsedData = account?.data.parsed;
+
+    if (parsedData && parsedData.parsed.type === 'mint') {
+        const mintInfo = create(parsedData.parsed.info, MintAccountInfo);
+        const address = account.pubkey.toBase58();
+
+        if (!mintInfo.extensions?.length) return <ErrorCard text="Can not fetch extensions." />;
+
+        return <TokenExtensionsCard address={address} extensions={mintInfo.extensions} />;
+    } else if (parsedData && parsedData.parsed.type === 'account') {
+        const accountInfo = create(parsedData.parsed.info, TokenAccountInfo);
+        const address = accountInfo.mint.toBase58();
+
+        if (!accountInfo.extensions?.length) return <ErrorCard text="Can not fetch extensions." />;
+
+        return <TokenExtensionsCard address={address} extensions={accountInfo.extensions} />;
+    } else {
+        // possible cases:
+        // - absent parsed data
+        // - multisig type of account
+        return <ErrorCard text="Can not fetch extensions." />;
+    }
+}
+
+export default function TokenExtensionsEntriesPageClient({ params: { address } }: Props) {
+    return (
+        <ErrorBoundary fallback={<ErrorCard text="Can not fetch extensions." />}>
+            <ParsedAccountRenderer address={address} renderComponent={TokenExtensionsEntriesRenderer} />
+        </ErrorBoundary>
+    );
+}

app/address/[address]/token-extensions/page.tsx

@@ -1,14 +1,9 @@
 import './styles.css';
 
-import { TokenExtensionsCard } from '@components/account/TokenExtensionsCard';
 import getReadableTitleFromAddress, { AddressPageMetadataProps } from '@utils/get-readable-title-from-address';
 import { Metadata } from 'next/types';
 
-type Props = Readonly<{
-    params: {
-        address: string;
-    };
-}>;
+import TokenExtensionsEntriesPageClient, { Props } from './page-client';
 
 export async function generateMetadata(props: AddressPageMetadataProps): Promise<Metadata> {
     return {
@@ -17,6 +12,6 @@ export async function generateMetadata(props: AddressPageMetadataProps): Promise
     };
 }
 
-export default function TokenExtensionsPage({ params: { address: _address } }: Props) {
-    return <TokenExtensionsCard address={_address} />;
+export default function TokenExtensionsPage(props: Props) {
+    return <TokenExtensionsEntriesPageClient {...props} />;
 }

app/components/account/TokenAccountSection.tsx

@@ -400,8 +400,7 @@ async function fetchTokenInfo([_, address, cluster, url]: ['get-token-info', str
 
 function TokenAccountCard({ account, info }: { account: Account; info: TokenAccountInfo }) {
     const refresh = useFetchAccountInfo();
-    const { cluster, clusterInfo, url } = useCluster();
-    const epoch = clusterInfo?.epochInfo.epoch;
+    const { cluster, url } = useCluster();
     const label = addressLabel(account.pubkey.toBase58(), cluster);
     const swrKey = useMemo(() => getTokenInfoSwrKey(info.mint.toString(), cluster, url), [cluster, info.mint, url]);
 
@@ -513,9 +512,6 @@ function TokenAccountCard({ account, info }: { account: Account; info: TokenAcco
                         </tr>
                     </>
                 )}
-                {accountExtensions?.map(extension =>
-                    TokenExtensionRow(extension, epoch, info.tokenAmount.decimals, symbol)
-                )}
             </TableCardBody>
         </div>
     );

app/components/account/TokenExtensionsCard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { AccountHeader } from '@components/common/Account';
-import { useFetchAccountInfo, useMintAccountInfo } from '@providers/accounts';
+import { useFetchAccountInfo } from '@providers/accounts';
 import { useCluster } from '@providers/cluster';
 import { PublicKey } from '@solana/web3.js';
 import { Cluster } from '@utils/cluster';
@@ -11,33 +11,44 @@ import useSWR from 'swr';
 import { getTokenInfo, getTokenInfoSwrKey } from '@/app/utils/token-info';
 import { TokenExtension, TokenExtensionType } from '@/app/validators/accounts/token-extension';
 
+import { LoadingCard } from '../common/LoadingCard';
 import { TokenExtensionsSection } from './TokenExtensionsSection';
 import { ParsedTokenExtension } from './types';
 
 async function fetchTokenInfo([_, address, cluster, url]: ['get-token-info', string, Cluster, string]) {
     return await getTokenInfo(new PublicKey(address), cluster, url);
 }
 
-export function TokenExtensionsCard({ address }: { address: string }) {
+export function TokenExtensionsCard({
+    address,
+    extensions: mintExtensions,
+}: {
+    address: string;
+    extensions: TokenExtension[];
+}) {
     const { cluster, url } = useCluster();
     const refresh = useFetchAccountInfo();
-    const mintInfo = useMintAccountInfo(address);
     const swrKey = useMemo(() => getTokenInfoSwrKey(address, cluster, url), [address, cluster, url]);
-    const { data: tokenInfo } = useSWR(swrKey, fetchTokenInfo);
+    const { data: tokenInfo, isLoading } = useSWR(swrKey, fetchTokenInfo);
 
-    if (!mintInfo || !mintInfo.extensions) return null;
+    const extensions = populateTokenExtensions(mintExtensions);
 
-    const extensions = populateTokenExtensions(mintInfo.extensions);
+    // check for nullish decimals to satisty constraint for required decimals.
+    if (isLoading) {
+        return <LoadingCard />;
+    } else if (!tokenInfo || tokenInfo.decimals === null) {
+        throw new Error('Can not fetch token info.');
+    }
 
     return (
         <div className="card">
             <AccountHeader title="Extensions" refresh={() => refresh(new PublicKey(address), 'parsed')} />
             <div className="card-body p-0 e-overflow-x-scroll">
                 <TokenExtensionsSection
-                    decimals={mintInfo.decimals}
-                    extensions={mintInfo.extensions}
+                    decimals={tokenInfo.decimals}
+                    extensions={mintExtensions}
                     parsedExtensions={extensions}
-                    symbol={tokenInfo?.symbol}
+                    symbol={tokenInfo.symbol}
                 />
             </div>
         </div>