From f44d6ba2827d7d7391425a5ddb2d49cafdc934bb Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 30 May 2025 23:41:53 +0000
Subject: [PATCH] [TOOL-4648] Dashboard: Fix timestamp in sponsored
 transactions table (#7236)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 -->
---
 .../SponsoredTransactionsTableUI.tsx          | 128 +++++++++---------
 1 file changed, 67 insertions(+), 61 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx
index 65eee10eec4..b26e35753b2 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.tsx
@@ -124,71 +124,77 @@ export function SponsoredTransactionsTableUI(
           </TableHeader>
           <TableBody>
             {!props.isPending
-              ? props.sponsoredTransactions.map((transaction) => (
-                  <TableRow key={transaction.transactionHash}>
-                    {/* Tx Hash */}
-                    <TableCell>
-                      <TransactionHashCell
-                        hash={transaction.transactionHash}
-                        chainId={transaction.chainId}
-                      />
-                    </TableCell>
-
-                    {/* Project */}
-                    {props.variant === "team" && (
+              ? props.sponsoredTransactions.map((transaction) => {
+                  const utcTimestamp = transaction.timestamp.endsWith("Z")
+                    ? transaction.timestamp
+                    : `${transaction.timestamp}Z`;
+
+                  return (
+                    <TableRow key={transaction.transactionHash}>
+                      {/* Tx Hash */}
                       <TableCell>
-                        <ProjectCell
-                          teamSlug={props.teamSlug}
-                          project={props.projects.find(
-                            (p) => p.id === transaction.projectId,
-                          )}
+                        <TransactionHashCell
+                          hash={transaction.transactionHash}
+                          chainId={transaction.chainId}
+                        />
+                      </TableCell>
+
+                      {/* Project */}
+                      {props.variant === "team" && (
+                        <TableCell>
+                          <ProjectCell
+                            teamSlug={props.teamSlug}
+                            project={props.projects.find(
+                              (p) => p.id === transaction.projectId,
+                            )}
+                            client={props.client}
+                          />
+                        </TableCell>
+                      )}
+
+                      {/* Chain */}
+                      <TableCell>
+                        <ChainCell
+                          chainId={transaction.chainId}
+                          client={props.client}
+                        />
+                      </TableCell>
+
+                      {/* Wallet */}
+                      <TableCell>
+                        <WalletAddress
+                          address={transaction.walletAddress}
                           client={props.client}
                         />
                       </TableCell>
-                    )}
-
-                    {/* Chain */}
-                    <TableCell>
-                      <ChainCell
-                        chainId={transaction.chainId}
-                        client={props.client}
-                      />
-                    </TableCell>
-
-                    {/* Wallet */}
-                    <TableCell>
-                      <WalletAddress
-                        address={transaction.walletAddress}
-                        client={props.client}
-                      />
-                    </TableCell>
-
-                    {/* Time */}
-                    <TableCell>
-                      <ToolTipLabel
-                        hoverable
-                        label={format(new Date(transaction.timestamp), "PPpp")}
-                      >
-                        <span>
-                          {formatDistance(
-                            new Date(transaction.timestamp),
-                            new Date(),
-                            {
-                              addSuffix: true,
-                            },
-                          )}
-                        </span>
-                      </ToolTipLabel>
-                    </TableCell>
-
-                    {/* Fee */}
-                    <TableCell>
-                      <TransactionFeeCell
-                        usdValue={transaction.transactionFeeUsd}
-                      />
-                    </TableCell>
-                  </TableRow>
-                ))
+
+                      {/* Time */}
+                      <TableCell>
+                        <ToolTipLabel
+                          hoverable
+                          label={format(new Date(utcTimestamp), "PPpp")}
+                        >
+                          <span>
+                            {formatDistance(
+                              new Date(utcTimestamp),
+                              new Date(),
+                              {
+                                addSuffix: true,
+                              },
+                            )}
+                          </span>
+                        </ToolTipLabel>
+                      </TableCell>
+
+                      {/* Fee */}
+                      <TableCell>
+                        <TransactionFeeCell
+                          usdValue={transaction.transactionFeeUsd}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
               : Array.from({ length: props.pageSize }).map((_, index) => (
                   <SkeletonRow
                     // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>