feat: add clickable badges with extensions to T22 page

.github/workflows/ci.yaml

@@ -38,4 +38,5 @@ jobs:
       - name: Test
         env:
           TEST_SERIAL_TIMEOUT: ${{ vars.TEST_SERIAL_TIMEOUT }}
-        run: pnpm test:ci
+        run: |
+          pnpm test:ci

.gitignore

@@ -38,4 +38,5 @@ next-env.d.ts
 .swc/
 
 # vim
-.editorconfig
+.editorconfig
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/experimental-nextjs-vite';
+
+const config: StorybookConfig = {
+    stories: ['../app/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: ['@storybook/addon-essentials', '@storybook/experimental-addon-test'],
+    framework: {
+        name: '@storybook/experimental-nextjs-vite',
+        options: {},
+    },
+    staticDirs: ['../public'],
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+    theme: themes.light,
+});

.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import type { Preview } from '@storybook/react';
+import React from 'react';
+
+import { Rubik } from 'next/font/google';
+// import './layout.min.css';
+import '@/app/styles.css';
+
+const rubikFont = Rubik({
+    display: 'auto',
+    subsets: ['latin'],
+    variable: '--explorer-default-font',
+    weight: ['300', '400', '700'],
+});
+
+const preview: Preview = {
+    parameters: {
+        backgrounds: {
+            values: [{ name: 'Dark', value: '#161b19' }],
+            default: 'Dark',
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+    decorators: [
+        Story => (
+            <div id="storybook-outer" className={rubikFont.className}>
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

_vitest.workspace.ts

@@ -0,0 +1,52 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import { defineWorkspace } from 'vitest/config';
+
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-addon
+export const config = defineWorkspace([
+    'vite.config.mts',
+    {
+        extends: 'vite.config.mts',
+        plugins: [
+            // The plugin will run tests for the stories defined in your Storybook config
+            // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+            storybookTest({ configDir: path.join(dirname, '.storybook') }),
+            nodePolyfills({
+                // // To exclude specific polyfills, add them to this list. Note: if include is provided, this has no effect
+                // exclude: [
+                //     'http', // Excludes the polyfill for `http` and `node:http`.
+                // ],
+                // Whether to polyfill specific globals.
+                globals: {
+                    Buffer: true, // can also be 'build', 'dev', or false
+                    global: true,
+                    process: true,
+                },
+                // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
+                include: ['path', 'util'],
+                // // Override the default polyfills for specific modules.
+                // overrides: {
+                //     // Since `fs` is not supported in browsers, we can use the `memfs` package to polyfill it.
+                //     fs: 'memfs',
+                // },
+                // // Whether to polyfill `node:` protocol imports.
+                // protocolImports: false,
+            }),
+        ],
+        test: {
+            browser: {
+                enabled: true,
+                headless: true,
+                name: 'chromium',
+                provider: 'playwright',
+            },
+            name: 'storybook',
+            setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+    },
+]);

app/__tests__/mock-parsed-extensions-stubs.ts

@@ -0,0 +1,22 @@
+import { PublicKey } from '@solana/web3.js';
+
+import { TokenExtension } from '../validators/accounts/token-extension';
+
+export const transferFeeConfig0 = {
+    extension: 'transferFeeConfig',
+    state: {
+        newerTransferFee: {
+            epoch: 200,
+            maximumFee: 2000000,
+            transferFeeBasisPoints: 200,
+        },
+        olderTransferFee: {
+            epoch: 100,
+            maximumFee: 1000000,
+            transferFeeBasisPoints: 100,
+        },
+        transferFeeConfigAuthority: new PublicKey('2apBGMsS6ti9RyF5TwQTDswXBWskiJP2LD4cUEDqYJjk'),
+        withdrawWithheldAuthority: new PublicKey('3apBGMsS6ti9RyF5TwQTDswXBWskiJP2LD4cUEDqYJjk'),
+        withheldAmount: 500000,
+    },
+} as TokenExtension;

app/address/[address]/layout.tsx

@@ -1,4 +1,5 @@
 'use client';
+import './styles.css';
 
 import { AddressLookupTableAccountSection } from '@components/account/address-lookup-table/AddressLookupTableAccountSection';
 import { isAddressLookupTableAccount } from '@components/account/address-lookup-table/types';

app/address/[address]/token-extensions/styles.css → app/address/[address]/styles.css

@@ -1,4 +1,4 @@
-@import '../../../styles.css';
+@import '../../styles.css';
 
 :root {
     /*

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

@@ -1,5 +1,3 @@
-import './styles.css';
-
 import getReadableTitleFromAddress, { AddressPageMetadataProps } from '@utils/get-readable-title-from-address';
 import { Metadata } from 'next/types';
 

app/components/DeveloperResources.tsx

@@ -62,6 +62,7 @@ function ResourceCard({
         <div className="flex flex-col" style={{ height: '200px', width: '250px' }}>
             <div className="w-full mb-3">
                 <a href={link} target="_blank" rel="noopener noreferrer" className="hover:cursor-pointer">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img
                         src={image}
                         alt={`${title} preview`}

app/components/account/OwnedTokensCard.tsx

@@ -90,6 +90,7 @@ function HoldingsDetailTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
                 {showLogos && (
                     <td className="w-1 p-0 text-center">
                         {tokenAccount.logoURI ? (
+                            // eslint-disable-next-line @next/next/no-img-element
                             <img
                                 alt="token icon"
                                 className="token-icon rounded-circle border border-4 border-gray-dark"
@@ -169,6 +170,7 @@ function HoldingsSummaryTable({ tokens }: { tokens: TokenInfoWithPubkey[] }) {
                 {showLogos && (
                     <td className="w-1 p-0 text-center">
                         {token.logoURI ? (
+                            // eslint-disable-next-line @next/next/no-img-element
                             <img
                                 alt="token icon"
                                 className="token-icon rounded-circle border border-4 border-gray-dark"

app/components/account/TokenAccountSection.tsx

@@ -46,6 +46,7 @@ import useSWR from 'swr';
 
 import { FullLegacyTokenInfo, getTokenInfo, getTokenInfoSwrKey } from '@/app/utils/token-info';
 
+import { TokenExtensionsStatusRow } from './token-extensions/TokenExtensionsStatusRow';
 import { UnknownAccountCard } from './UnknownAccountCard';
 
 const getEthAddress = (link?: string) => {
@@ -287,6 +288,9 @@ function FungibleTokenMintAccountCard({
                             </td>
                         </tr>
                     )}
+                    {mintExtensions && (
+                        <TokenExtensionsStatusRow address={account.pubkey.toBase58()} extensions={mintExtensions} />
+                    )}
                 </TableCardBody>
             </div>
         </>
@@ -512,6 +516,9 @@ function TokenAccountCard({ account, info }: { account: Account; info: TokenAcco
                         </tr>
                     </>
                 )}
+                {accountExtensions && (
+                    <TokenExtensionsStatusRow address={account.pubkey.toBase58()} extensions={accountExtensions} />
+                )}
             </TableCardBody>
         </div>
     );