fix payments tx history crash

Author: MananTank

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

@@ -297,38 +297,54 @@ 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 type OnrampPayment = Extract<Payment, { type: OnrampPaymentType }>;
 
 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 = (() => {