feat: add clickable badges with extensions to T22 page

.gitignore

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

.storybook/main.ts

@@ -0,0 +1,13 @@
+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" style={rubikFont.style}>
+                <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);

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/components/account/TokenAccountSection.tsx

@@ -46,8 +46,12 @@ import useSWR from 'swr';
 
 import { FullLegacyTokenInfo, getTokenInfo, getTokenInfoSwrKey } from '@/app/utils/token-info';
 
+import { TokenExtensionsStatusRow } from './token-extensions/TokenExtensionsStatusRow';
 import { UnknownAccountCard } from './UnknownAccountCard';
 
+// !!
+// TODO: import styles for badges to be rendered properly
+
 const getEthAddress = (link?: string) => {
     let address = '';
     if (link) {
@@ -287,6 +291,9 @@ function FungibleTokenMintAccountCard({
                             </td>
                         </tr>
                     )}
+                    {mintExtensions && (
+                        <TokenExtensionsStatusRow address={account.pubkey.toBase58()} extensions={mintExtensions} />
+                    )}
                 </TableCardBody>
             </div>
         </>
@@ -512,6 +519,9 @@ function TokenAccountCard({ account, info }: { account: Account; info: TokenAcco
                         </tr>
                     </>
                 )}
+                {accountExtensions && (
+                    <TokenExtensionsStatusRow address={account.pubkey.toBase58()} extensions={accountExtensions} />
+                )}
             </TableCardBody>
         </div>
     );