Update transaction account keys size display

.github/workflows/ci.yaml

@@ -139,7 +139,7 @@ jobs:
   Storybook-Smoke-Tests:
     needs: read-nvmrc
     runs-on: ubuntu-latest
-    timeout-minutes: 10
+    timeout-minutes: 30
     continue-on-error: true
 
     strategy:

app/features/transaction/ui/AccountsCard.tsx

@@ -19,6 +19,12 @@ import { useBreakpoint } from '@/app/shared/lib/use-breakpoint';
 
 import { CollapsibleSection } from './CollapsibleSection';
 
+const ACCOUNT_KEY_SIZE_BYTES = 32;
+
+export function getTransactionAccountKeysSizeBytes(accountKeys: Array<{ source?: string }>) {
+    return accountKeys.filter(account => account.source !== 'lookupTable').length * ACCOUNT_KEY_SIZE_BYTES;
+}
+
 export function AccountsCard({ signature }: SignatureProps) {
     const details = useTransactionDetails(signature);
     const { url } = useCluster();
@@ -32,9 +38,9 @@ export function AccountsCard({ signature }: SignatureProps) {
 
     const { accounts, error, loading } = useAccountsInfo(pubkeys, url);
 
-    const totalAccountSize = useMemo(
-        () => Array.from(accounts.values()).reduce((acc, account) => acc + account.size, 0),
-        [accounts],
+    const totalAccountKeysSize = useMemo(
+        () => getTransactionAccountKeysSizeBytes(message?.accountKeys ?? []),
+        [message],
     );
 
     if (!transactionWithMeta) {
@@ -159,13 +165,13 @@ export function AccountsCard({ signature }: SignatureProps) {
                 <div className="text-right">Post Balance (SOL)</div>
             </div>
             {accountRows}
-            {!loading && totalAccountSize > 0 && (
+            {!loading && totalAccountKeysSize > 0 && (
                 <div className="ml-7 flex items-baseline gap-2 px-3 py-2 text-sm text-outer-space-300 md:px-4 lg:ml-10">
                     <div className="flex flex-col">
-                        <span className="text-sm uppercase leading-none">Total Account Size:</span>
-                        <span className="text-[10px] leading-none">reflects current state</span>
+                        <span className="text-sm uppercase leading-none">Total Account Keys Size:</span>
+                        <span className="text-[10px] leading-none">excludes address lookup tables</span>
                     </div>
-                    <span className="text-white">{totalAccountSize.toLocaleString('en-US')} bytes</span>
+                    <span className="text-white">{totalAccountKeysSize.toLocaleString('en-US')} bytes</span>
                 </div>
             )}
         </CollapsibleSection>

app/features/transaction/ui/__tests__/AccountsCard.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, test } from 'vitest';
+
+import { getTransactionAccountKeysSizeBytes } from '../AccountsCard';
+
+describe('getTransactionAccountKeysSizeBytes', () => {
+    test('should count transaction account keys as 32 bytes each', () => {
+        expect(
+            getTransactionAccountKeysSizeBytes([
+                { source: 'transaction' },
+                { source: 'transaction' },
+                { source: 'transaction' },
+            ]),
+        ).toBe(96);
+    });
+
+    test('should exclude account keys loaded from address lookup tables', () => {
+        expect(
+            getTransactionAccountKeysSizeBytes([
+                { source: 'transaction' },
+                { source: 'lookupTable' },
+                { source: 'transaction' },
+                { source: 'lookupTable' },
+            ]),
+        ).toBe(64);
+    });
+});