fix: handle undefined before passing to truncate address function

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<Payment>[] = [
  cell: ({ row }) => (
  <div className="font-medium text-emerald-700">
  <Link href={`/address/${row.getValue('from')}`}>
- {truncateEthAddress(row.getValue('from'))}
+ {safeTruncateEthAddress(row.getValue('from'))}
  </Link>
  </div>
  ),
@@ -86,7 +89,7 @@ export const columns: ColumnDef<Payment>[] = [
  cell: ({ row }) => (
  <div className="font-medium text-emerald-700">
  <Link href={`/address/${row.getValue('to')}`}>
- {truncateEthAddress(row.getValue('to'))}
+ {safeTruncateEthAddress(row.getValue('to'))}
  </Link>
  </div>
  ),
@@ -119,7 +122,7 @@ export const columns: ColumnDef<Payment>[] = [
  {
  accessorKey: 'feeAddress',
  header: 'Service Fee Address',
- cell: ({ row }) => truncateEthAddress(row.getValue('feeAddress')),
+ cell: ({ row }) => safeTruncateEthAddress(row.getValue('feeAddress')),
  },
 ];
 

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<Transaction>[] = [
  return address ? (
  <div className="font-medium text-emerald-700">
  <Link href={`/address/${address}`}>
- {truncateEthAddress(address)}
+ {safeTruncateEthAddress(address)}
  </Link>
  </div>
  ) : (
@@ -96,7 +96,7 @@ export const columns: ColumnDef<Transaction>[] = [
  return address ? (
  <div className="font-medium text-emerald-700">
  <Link href={`/address/${address}`}>
- {truncateEthAddress(address)}
+ {safeTruncateEthAddress(address)}
  </Link>
  </div>
  ) : (

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 ? (
  <div className="font-medium text-emerald-700">
  <Link href={`/address/${item.from}`}>
- {truncateEthAddress(item.from)}{' '}
+ {safeTruncateEthAddress(item.from)}{' '}
  </Link>
  </div>
  ) : (
@@ -93,7 +96,7 @@ export function TransactionsAndPaymentsTable({
  {'to' in item ? (
  <div className="font-medium text-emerald-700">
  <Link href={`/address/${item.to}`}>
- {truncateEthAddress(item.to)}{' '}
+ {safeTruncateEthAddress(item.to)}{' '}
  </Link>
  </div>
  ) : (

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 || '');