feature: Collapsed Account list and expanded token balances

solana-labs · Oct 13, 2023 · c6b8712 · c6b8712
1 parent 7bfe434
commit c6b8712
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 35 deletions.
diff --git a/app/components/transaction/TokenBalancesCard.tsx b/app/components/transaction/TokenBalancesCard.tsx
@@ -40,15 +40,15 @@ export function TokenBalancesCard({ signature }: SignatureProps) {
         return null;
     }
 
-    return <TokenBalancesCardInner rows={rows} />
+    return <TokenBalancesCardInner rows={rows} />;
 }
 
 export type TokenBalancesCardInnerProps = {
-    rows: TokenBalanceRow[]
-}
-
+    rows: TokenBalanceRow[];
+};
 
 export function TokenBalancesCardInner({ rows }: TokenBalancesCardInnerProps) {
+    const [expanded, setExpanded] = React.useState(true);
     const { cluster, url } = useCluster();
     const [tokenInfosLoading, setTokenInfosLoading] = useState(true);
     const [tokenSymbols, setTokenSymbols] = useState<Map<string, string>>(new Map());
@@ -61,7 +61,7 @@ export function TokenBalancesCardInner({ rows }: TokenBalancesCardInnerProps) {
                 setTokenInfosLoading(false);
             }
         });
-    }, [])
+    }, []);
 
     const accountRows = rows.map(({ account, delta, balance, mint }) => {
         const key = account.toBase58() + mint;
@@ -89,20 +89,28 @@ export function TokenBalancesCardInner({ rows }: TokenBalancesCardInnerProps) {
         <div className="card">
             <div className="card-header">
                 <h3 className="card-header-title">Token Balances</h3>
+                <button
+                    className={`btn btn-sm d-flex ${expanded ? 'btn-black active' : 'btn-white'}`}
+                    onClick={() => setExpanded(e => !e)}
+                >
+                    {expanded ? 'Collapse' : 'Expand'}
+                </button>
             </div>
-            <div className="table-responsive mb-0">
-                <table className="table table-sm table-nowrap card-table">
-                    <thead>
-                        <tr>
-                            <th className="text-muted">Address</th>
-                            <th className="text-muted">Token</th>
-                            <th className="text-muted">Change</th>
-                            <th className="text-muted">Post Balance</th>
-                        </tr>
-                    </thead>
-                    <tbody className="list">{accountRows}</tbody>
-                </table>
-            </div>
+            {expanded && (
+                <div className="table-responsive mb-0">
+                    <table className="table table-sm table-nowrap card-table">
+                        <thead>
+                            <tr>
+                                <th className="text-muted">Address</th>
+                                <th className="text-muted">Token</th>
+                                <th className="text-muted">Change</th>
+                                <th className="text-muted">Post Balance</th>
+                            </tr>
+                        </thead>
+                        <tbody className="list">{accountRows}</tbody>
+                    </table>
+                </div>
+            )}
         </div>
     );
 }

diff --git a/app/tx/[signature]/page-client.tsx b/app/tx/[signature]/page-client.tsx
@@ -187,6 +187,7 @@ function StatusCard({ signature, autoRefresh }: SignatureProps & AutoRefreshProp
     const transaction = transactionWithMeta?.transaction;
     const blockhash = transaction?.message.recentBlockhash;
     const version = transactionWithMeta?.version;
+    const feePayer = transactionWithMeta?.transaction.message.accountKeys[0]?.pubkey;
     const isNonce = (() => {
         if (!transaction || transaction.message.instructions.length < 1) {
             return false;
@@ -215,8 +216,9 @@ function StatusCard({ signature, autoRefresh }: SignatureProps & AutoRefreshProp
             if (cluster === Cluster.MainnetBeta) {
                 errorLink = err.errorLink;
             } else {
-                errorLink = `${err.errorLink}?cluster=${clusterName.toLowerCase()}${cluster === Cluster.Custom ? `&customUrl=${clusterUrl}` : ''
-                    }`;
+                errorLink = `${err.errorLink}?cluster=${clusterName.toLowerCase()}${
+                    cluster === Cluster.Custom ? `&customUrl=${clusterUrl}` : ''
+                }`;
             }
         }
     }
@@ -318,6 +320,15 @@ function StatusCard({ signature, autoRefresh }: SignatureProps & AutoRefreshProp
                     </tr>
                 )}
 
+                {feePayer && (
+                    <tr>
+                        <td>Fee Payer</td>
+                        <td className="text-lg-end">
+                            <Address pubkey={feePayer} link />
+                        </td>
+                    </tr>
+                )}
+
                 {fee && (
                     <tr>
                         <td>Fee (SOL)</td>
@@ -384,6 +395,7 @@ function DetailsSection({ signature }: SignatureProps) {
 
 function AccountsCard({ signature }: SignatureProps) {
     const details = useTransactionDetails(signature);
+    const [expanded, setExpanded] = React.useState(false);
 
     const transactionWithMeta = details?.data?.transactionWithMeta;
     if (!transactionWithMeta) {
@@ -434,22 +446,31 @@ function AccountsCard({ signature }: SignatureProps) {
     return (
         <div className="card">
             <div className="card-header">
-                <h3 className="card-header-title">Account Input(s)</h3>
-            </div>
-            <div className="table-responsive mb-0">
-                <table className="table table-sm table-nowrap card-table">
-                    <thead>
-                        <tr>
-                            <th className="text-muted">#</th>
-                            <th className="text-muted">Address</th>
-                            <th className="text-muted">Change (SOL)</th>
-                            <th className="text-muted">Post Balance (SOL)</th>
-                            <th className="text-muted">Details</th>
-                        </tr>
-                    </thead>
-                    <tbody className="list">{accountRows}</tbody>
-                </table>
+                <h3 className="card-header-title">Account List ({accountRows.length})</h3>
+                <button
+                    className={`btn btn-sm d-flex ${expanded ? 'btn-black active' : 'btn-white'}`}
+                    onClick={() => setExpanded(e => !e)}
+                >
+                    {expanded ? 'Collapse' : 'Expand'}
+                </button>
             </div>
+            {expanded && (
+                <div className="table-responsive mb-0">
+                    <table className="table table-sm table-nowrap card-table">
+                        <thead>
+                            <tr>
+                                <th className="text-muted">#</th>
+                                <th className="text-muted">Address</th>
+                                <th className="text-muted">Change (SOL)</th>
+                                <th className="text-muted">Post Balance (SOL)</th>
+                                <th className="text-muted">Details</th>
+                            </tr>
+                        </thead>
+
+                        <tbody className="list">{accountRows}</tbody>
+                    </table>
+                </div>
+            )}
         </div>
     );
 }