diff --git a/app/components/transaction/TokenBalancesCard.tsx b/app/components/transaction/TokenBalancesCard.tsx index d3f98f33..bfaf3e7c 100644 --- a/app/components/transaction/TokenBalancesCard.tsx +++ b/app/components/transaction/TokenBalancesCard.tsx @@ -40,15 +40,15 @@ export function TokenBalancesCard({ signature }: SignatureProps) { return null; } - return + return ; } 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>(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) {

Token Balances

+
-
- - - - - - - - - - {accountRows} -
AddressTokenChangePost Balance
-
+ {expanded && ( +
+ + + + + + + + + + {accountRows} +
AddressTokenChangePost Balance
+
+ )}
); } diff --git a/app/tx/[signature]/page-client.tsx b/app/tx/[signature]/page-client.tsx index 00cdf99a..47a37d76 100644 --- 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 )} + {feePayer && ( + + Fee Payer + +
+ + + )} + {fee && ( Fee (SOL) @@ -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 (
-

Account Input(s)

-
-
- - - - - - - - - - - {accountRows} -
#AddressChange (SOL)Post Balance (SOL)Details
+

Account List ({accountRows.length})

+
+ {expanded && ( +
+ + + + + + + + + + + + {accountRows} +
#AddressChange (SOL)Post Balance (SOL)Details
+
+ )}
); }