Dashboard: fix payments tx history table crashing on onramp type purchase (#7982)

<!--

## 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 payment-related types and logic in the application to improve type safety and clarity. It introduces a new `BridgePayment` type, updates the `TableRow` component, and modifies how payments are filtered and processed.

### Detailed summary
- Changed `Payment` type to `BridgePayment` in `TableRow` component.
- Updated `originAmount` and `destinationAmount` to use `BigInt`.
- Introduced `BridgePaymentType` and `OnrampPaymentType`.
- Modified `getCSVData` to accept only `BridgePayment` types.
- Added `isBridgePayment` function to filter payments.

> ✨ 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

- New Features
  - Payments views and CSV export now explicitly show only bridge payments; onramp entries are excluded.

- Bug Fixes
  - Improved accuracy for large origin/destination amounts by converting amounts to integer form before token conversion.
  - Consistent token conversions across table, links, and CSV exports.

- Refactor
  - Payment data reorganized into distinct bridge vs onramp variants to improve filtering and export consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/api/universal-bridge/developer.ts

@@ -297,38 +297,53 @@ export type PaymentsResponse = {
     totalCount: number;
   };
 };
+
+type BridgePaymentType = "buy" | "sell" | "transfer";
+type OnrampPaymentType = "onramp";
+
 export type Payment = {
+  // common
   id: string;
-  blockNumber?: bigint;
-  transactionId: string;
+  createdAt: string;
   clientId: string;
-  sender: string;
   receiver: string;
-  developerFeeRecipient: string;
-  developerFeeBps: number;
   transactions: Array<{
     chainId: number;
     transactionHash: string;
   }>;
   status: "PENDING" | "COMPLETED" | "FAILED" | "NOT_FOUND";
-  type: "buy" | "sell" | "transfer";
-  originAmount: bigint;
-  destinationAmount: bigint;
-  purchaseData: unknown;
-  originToken: {
-    address: string;
-    symbol: string;
-    decimals: number;
-    chainId: number;
-  };
+
+  destinationAmount: string;
   destinationToken: {
     address: string;
     symbol: string;
     decimals: number;
     chainId: number;
   };
-  createdAt: string;
-};
+  purchaseData: unknown;
+} & (
+  | {
+      type: BridgePaymentType;
+      transactionId: string;
+      blockNumber?: string;
+      sender: string;
+      developerFeeRecipient: string;
+      developerFeeBps: number;
+      originAmount: string;
+      originToken: {
+        address: string;
+        symbol: string;
+        decimals: number;
+        chainId: number;
+      };
+    }
+  | {
+      onrampId: string;
+      type: OnrampPaymentType;
+    }
+);
+
+export type BridgePayment = Extract<Payment, { type: BridgePaymentType }>;
 
 export async function getPayments(props: {
   clientId: string;

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentHistory.client.tsx

@@ -4,6 +4,7 @@ import { format } from "date-fns";
 import { useMemo, useState } from "react";
 import { type ThirdwebClient, toTokens } from "thirdweb";
 import {
+  type BridgePayment,
   getPayments,
   type Payment,
   type PaymentsResponse,
@@ -59,7 +60,9 @@ export function PaymentHistory(props: {
         <ExportToCSVButton
           fileName="transaction_history"
           getData={async () => {
-            return getCSVData(payPurchaseData?.data || []);
+            return getCSVData(
+              payPurchaseData?.data.filter(isBridgePayment) || [],
+            );
           }}
         />
       </div>
@@ -82,15 +85,17 @@ export function PaymentHistory(props: {
             <tbody>
               {(!isEmpty || isLoading) &&
                 (payPurchaseData && !isLoading
-                  ? payPurchaseData.data.map((purchase) => {
-                      return (
-                        <TableRow
-                          client={props.client}
-                          key={purchase.id}
-                          purchase={purchase}
-                        />
-                      );
-                    })
+                  ? payPurchaseData.data
+                      .filter(isBridgePayment)
+                      .map((purchase) => {
+                        return (
+                          <TableRow
+                            client={props.client}
+                            key={purchase.id}
+                            purchase={purchase}
+                          />
+                        );
+                      })
                   : new Array(pageSize).fill(0).map((_, i) => (
                       // biome-ignore lint/suspicious/noArrayIndexKey: ok
                       <SkeletonTableRow key={i} />
@@ -119,16 +124,20 @@ export function PaymentHistory(props: {
   );
 }
 
-function getCSVData(data: Payment[]) {
+function isBridgePayment(purchase: Payment): purchase is BridgePayment {
+  return purchase.type !== "onramp";
+}
+
+function getCSVData(data: BridgePayment[]) {
   const header = ["Type", "Bought", "Paid", "Status", "Recipient", "Date"];
 
   const rows: string[][] = data.map((purchase) => {
     const toAmount = toTokens(
-      purchase.destinationAmount,
+      BigInt(purchase.destinationAmount),
       purchase.destinationToken.decimals,
     );
     const fromAmount = toTokens(
-      purchase.originAmount,
+      BigInt(purchase.originAmount),
       purchase.originToken.decimals,
     );
     const type = (() => {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/PaymentsTableRow.tsx

@@ -1,20 +1,23 @@
 import { format } from "date-fns";
 import { type ThirdwebClient, toTokens } from "thirdweb";
-import type { Payment } from "@/api/universal-bridge/developer";
+import type { BridgePayment } from "@/api/universal-bridge/developer";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { TableData } from "./common";
 import { formatTokenAmount } from "./format";
 
-export function TableRow(props: { purchase: Payment; client: ThirdwebClient }) {
+export function TableRow(props: {
+  purchase: BridgePayment;
+  client: ThirdwebClient;
+}) {
   const { purchase } = props;
   const originAmount = toTokens(
-    purchase.originAmount,
+    BigInt(purchase.originAmount),
     purchase.originToken.decimals,
   );
   const destinationAmount = toTokens(
-    purchase.destinationAmount,
+    BigInt(purchase.destinationAmount),
     purchase.destinationToken.decimals,
   );
   const type = (() => {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/PaymentLinksTable.client.tsx

@@ -192,7 +192,7 @@ function PaymentLinksTableInner(props: { clientId: string; teamId: string }) {
                                 acc +
                                 Number(
                                   toTokens(
-                                    curr.destinationAmount,
+                                    BigInt(curr.destinationAmount),
                                     curr.destinationToken.decimals,
                                   ),
                                 ),