Skip to content

Commit f44d6ba

Browse files
committed
[TOOL-4648] Dashboard: Fix timestamp in sponsored transactions table (#7236)
<!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on refactoring the rendering logic of the `SponsoredTransactionsTableUI` component to improve clarity and functionality, particularly around handling timestamps and the rendering of table rows. ### Detailed summary - Changed the way `transaction.timestamp` is handled to ensure it always ends with "Z". - Simplified the mapping of `props.sponsoredTransactions` to use a block body for clarity. - Added `client` prop to `ProjectCell`. - Enhanced readability of the table structure by removing unnecessary code. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved accuracy of transaction timestamps by ensuring all are treated as UTC. - Enhanced consistency in date and time display for sponsored transactions. - **New Features** - Added support for passing client information to project, chain, and wallet address displays in the transactions table. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 3678054 commit f44d6ba

File tree

1 file changed

+67
-61
lines changed

1 file changed

+67
-61
lines changed

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx

Lines changed: 67 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -124,71 +124,77 @@ export function SponsoredTransactionsTableUI(
124124
</TableHeader>
125125
<TableBody>
126126
{!props.isPending
127-
? props.sponsoredTransactions.map((transaction) => (
128-
<TableRow key={transaction.transactionHash}>
129-
{/* Tx Hash */}
130-
<TableCell>
131-
<TransactionHashCell
132-
hash={transaction.transactionHash}
133-
chainId={transaction.chainId}
134-
/>
135-
</TableCell>
136-
137-
{/* Project */}
138-
{props.variant === "team" && (
127+
? props.sponsoredTransactions.map((transaction) => {
128+
const utcTimestamp = transaction.timestamp.endsWith("Z")
129+
? transaction.timestamp
130+
: `${transaction.timestamp}Z`;
131+
132+
return (
133+
<TableRow key={transaction.transactionHash}>
134+
{/* Tx Hash */}
139135
<TableCell>
140-
<ProjectCell
141-
teamSlug={props.teamSlug}
142-
project={props.projects.find(
143-
(p) => p.id === transaction.projectId,
144-
)}
136+
<TransactionHashCell
137+
hash={transaction.transactionHash}
138+
chainId={transaction.chainId}
139+
/>
140+
</TableCell>
141+
142+
{/* Project */}
143+
{props.variant === "team" && (
144+
<TableCell>
145+
<ProjectCell
146+
teamSlug={props.teamSlug}
147+
project={props.projects.find(
148+
(p) => p.id === transaction.projectId,
149+
)}
150+
client={props.client}
151+
/>
152+
</TableCell>
153+
)}
154+
155+
{/* Chain */}
156+
<TableCell>
157+
<ChainCell
158+
chainId={transaction.chainId}
159+
client={props.client}
160+
/>
161+
</TableCell>
162+
163+
{/* Wallet */}
164+
<TableCell>
165+
<WalletAddress
166+
address={transaction.walletAddress}
145167
client={props.client}
146168
/>
147169
</TableCell>
148-
)}
149-
150-
{/* Chain */}
151-
<TableCell>
152-
<ChainCell
153-
chainId={transaction.chainId}
154-
client={props.client}
155-
/>
156-
</TableCell>
157-
158-
{/* Wallet */}
159-
<TableCell>
160-
<WalletAddress
161-
address={transaction.walletAddress}
162-
client={props.client}
163-
/>
164-
</TableCell>
165-
166-
{/* Time */}
167-
<TableCell>
168-
<ToolTipLabel
169-
hoverable
170-
label={format(new Date(transaction.timestamp), "PPpp")}
171-
>
172-
<span>
173-
{formatDistance(
174-
new Date(transaction.timestamp),
175-
new Date(),
176-
{
177-
addSuffix: true,
178-
},
179-
)}
180-
</span>
181-
</ToolTipLabel>
182-
</TableCell>
183-
184-
{/* Fee */}
185-
<TableCell>
186-
<TransactionFeeCell
187-
usdValue={transaction.transactionFeeUsd}
188-
/>
189-
</TableCell>
190-
</TableRow>
191-
))
170+
171+
{/* Time */}
172+
<TableCell>
173+
<ToolTipLabel
174+
hoverable
175+
label={format(new Date(utcTimestamp), "PPpp")}
176+
>
177+
<span>
178+
{formatDistance(
179+
new Date(utcTimestamp),
180+
new Date(),
181+
{
182+
addSuffix: true,
183+
},
184+
)}
185+
</span>
186+
</ToolTipLabel>
187+
</TableCell>
188+
189+
{/* Fee */}
190+
<TableCell>
191+
<TransactionFeeCell
192+
usdValue={transaction.transactionFeeUsd}
193+
/>
194+
</TableCell>
195+
</TableRow>
196+
);
197+
})
192198
: Array.from({ length: props.pageSize }).map((_, index) => (
193199
<SkeletonRow
194200
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>

0 commit comments

Comments
 (0)