diff --git a/src/components/payment-table.tsx b/src/components/payment-table.tsx index 9bba1e0..5e5beb3 100644 --- a/src/components/payment-table.tsx +++ b/src/components/payment-table.tsx @@ -23,10 +23,13 @@ import { } from '@/components/ui/table'; import { Payment } from '@/lib/types'; import TimeAgo from 'timeago-react'; -import { formatTimestamp, getAmountWithCurrencySymbol } from '@/lib/utils'; +import { + formatTimestamp, + getAmountWithCurrencySymbol, + safeTruncateEthAddress, +} from '@/lib/utils'; import Link from 'next/link'; import { formatUnits } from 'viem'; -import truncateEthAddress from 'truncate-eth-address'; import { CHAIN_SCAN_URLS } from '@/lib/consts'; import { Dispatch, SetStateAction } from 'react'; import { Skeleton } from './ui/skeleton'; @@ -75,7 +78,7 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => (
- {truncateEthAddress(row.getValue('from'))} + {safeTruncateEthAddress(row.getValue('from'))}
), @@ -86,7 +89,7 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => (
- {truncateEthAddress(row.getValue('to'))} + {safeTruncateEthAddress(row.getValue('to'))}
), @@ -119,7 +122,7 @@ export const columns: ColumnDef[] = [ { accessorKey: 'feeAddress', header: 'Service Fee Address', - cell: ({ row }) => truncateEthAddress(row.getValue('feeAddress')), + cell: ({ row }) => safeTruncateEthAddress(row.getValue('feeAddress')), }, ]; diff --git a/src/components/request-table.tsx b/src/components/request-table.tsx index 52aa7c7..5a9eaa2 100644 --- a/src/components/request-table.tsx +++ b/src/components/request-table.tsx @@ -27,9 +27,9 @@ import { calculateShortPaymentReference, formatTimestamp, getAmountWithCurrencySymbol, + safeTruncateEthAddress, } from '@/lib/utils'; import Link from 'next/link'; -import truncateEthAddress from 'truncate-eth-address'; import { Dispatch, SetStateAction } from 'react'; import { Skeleton } from './ui/skeleton'; @@ -80,7 +80,7 @@ export const columns: ColumnDef[] = [ return address ? (
- {truncateEthAddress(address)} + {safeTruncateEthAddress(address)}
) : ( @@ -96,7 +96,7 @@ export const columns: ColumnDef[] = [ return address ? (
- {truncateEthAddress(address)} + {safeTruncateEthAddress(address)}
) : ( diff --git a/src/components/transactions-and-payments-table.tsx b/src/components/transactions-and-payments-table.tsx index 5211771..a2516fa 100644 --- a/src/components/transactions-and-payments-table.tsx +++ b/src/components/transactions-and-payments-table.tsx @@ -10,10 +10,13 @@ import { } from '@/components/ui/table'; import { CHAIN_SCAN_URLS } from '@/lib/consts'; import { Payment, Transaction } from '@/lib/types'; -import { formatTimestamp, getAmountWithCurrencySymbol } from '@/lib/utils'; +import { + formatTimestamp, + getAmountWithCurrencySymbol, + safeTruncateEthAddress, +} from '@/lib/utils'; import Link from 'next/link'; import TimeAgo from 'timeago-react'; -import truncateEthAddress from 'truncate-eth-address'; import { formatUnits } from 'viem'; interface Props { @@ -82,7 +85,7 @@ export function TransactionsAndPaymentsTable({ {'from' in item ? (
- {truncateEthAddress(item.from)}{' '} + {safeTruncateEthAddress(item.from)}{' '}
) : ( @@ -93,7 +96,7 @@ export function TransactionsAndPaymentsTable({ {'to' in item ? (
- {truncateEthAddress(item.to)}{' '} + {safeTruncateEthAddress(item.to)}{' '}
) : ( diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 9774718..cd7d1b7 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -12,6 +12,7 @@ import { keepPreviousData } from '@tanstack/react-query'; import { PaymentReferenceCalculator } from '@requestnetwork/request-client.js'; import { RequestLogicTypes } from '@requestnetwork/types'; import { ActorInfo, Invoice } from '@requestnetwork/data-format'; +import truncateEthAddress from 'truncate-eth-address'; timeago.register('en_short', en_short); @@ -145,9 +146,9 @@ export const getContentDataFromCreateTransaction = ( createParameters: RequestLogicTypes.ICreateParameters, ) => { const extensionData = createParameters.extensionsData; - const contentData: Invoice = - extensionData?.find((extension) => extension.id === 'content-data') - ?.parameters?.content; + const contentData: Invoice = extensionData?.find( + (extension) => extension.id === 'content-data', + )?.parameters?.content; return contentData; }; @@ -169,3 +170,6 @@ export const renderAddress = (info: ActorInfo | undefined) => { ].filter(Boolean); return parts.length > 0 ? parts.join(', ') : '-'; }; + +export const safeTruncateEthAddress = (address: string) => + truncateEthAddress(address || '');