feat/improve T22 account page

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>