From 3732cd61a47c34d4777a651cb4df53deea5fd42b Mon Sep 17 00:00:00 2001 From: rodrigopavezi Date: Fri, 13 Sep 2024 10:13:39 -0300 Subject: [PATCH 1/2] fix: handle undefined before passing to truncate address function --- src/components/payment-table.tsx | 6 +++--- src/components/request-table.tsx | 4 ++-- src/components/transactions-and-payments-table.tsx | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/payment-table.tsx b/src/components/payment-table.tsx index 9bba1e0..c6867ee 100644 --- a/src/components/payment-table.tsx +++ b/src/components/payment-table.tsx @@ -75,7 +75,7 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => (
- {truncateEthAddress(row.getValue('from'))} + {truncateEthAddress(row.getValue('from') || '')}
), @@ -86,7 +86,7 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => (
- {truncateEthAddress(row.getValue('to'))} + {truncateEthAddress(row.getValue('to') || '')}
), @@ -119,7 +119,7 @@ export const columns: ColumnDef[] = [ { accessorKey: 'feeAddress', header: 'Service Fee Address', - cell: ({ row }) => truncateEthAddress(row.getValue('feeAddress')), + cell: ({ row }) => truncateEthAddress(row.getValue('feeAddress') || ''), }, ]; diff --git a/src/components/request-table.tsx b/src/components/request-table.tsx index 52aa7c7..705c428 100644 --- a/src/components/request-table.tsx +++ b/src/components/request-table.tsx @@ -80,7 +80,7 @@ export const columns: ColumnDef[] = [ return address ? (
- {truncateEthAddress(address)} + {truncateEthAddress(address || '')}
) : ( @@ -96,7 +96,7 @@ export const columns: ColumnDef[] = [ return address ? (
- {truncateEthAddress(address)} + {truncateEthAddress(address || '')}
) : ( diff --git a/src/components/transactions-and-payments-table.tsx b/src/components/transactions-and-payments-table.tsx index 5211771..5009194 100644 --- a/src/components/transactions-and-payments-table.tsx +++ b/src/components/transactions-and-payments-table.tsx @@ -82,7 +82,7 @@ export function TransactionsAndPaymentsTable({ {'from' in item ? (
- {truncateEthAddress(item.from)}{' '} + {truncateEthAddress(item.from || '')}{' '}
) : ( @@ -93,7 +93,7 @@ export function TransactionsAndPaymentsTable({ {'to' in item ? (
- {truncateEthAddress(item.to)}{' '} + {truncateEthAddress(item.to || '')}{' '}
) : ( From 6a80da6706e84165759f1f5b0090327e237ed07d Mon Sep 17 00:00:00 2001 From: rodrigopavezi Date: Fri, 13 Sep 2024 10:20:57 -0300 Subject: [PATCH 2/2] refactor: create a safe function for truncate address --- src/components/payment-table.tsx | 13 ++++++++----- src/components/request-table.tsx | 6 +++--- src/components/transactions-and-payments-table.tsx | 11 +++++++---- src/lib/utils.ts | 10 +++++++--- 4 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/components/payment-table.tsx b/src/components/payment-table.tsx index c6867ee..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 705c428..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 5009194..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 || '');