Extend names duration fix

src/components/@molecules/TransactionDialogManager/DisplayItems.tsx

@@ -9,7 +9,7 @@ import { AvatarWithZorb, NameAvatar } from '@app/components/AvatarWithZorb'
 import { usePrimaryName } from '@app/hooks/ensjs/public/usePrimaryName'
 import { useBeautifiedName } from '@app/hooks/useBeautifiedName'
 import { TransactionDisplayItem } from '@app/types'
-import { formatExpiry, shortenAddress } from '@app/utils/utils'
+import { shortenAddress } from '@app/utils/utils'
 
 const Container = styled.div(
   ({ theme }) => css`
@@ -231,36 +231,33 @@ const RecordsValue = ({ value }: { value: [string, string | undefined][] }) => {
   )
 }
 
-const DurationValue = ({ value }: { value: string | undefined }) => {
+const DurationValue = ({
+  value,
+}: {
+  value: { duration: string; newExpiry?: string | undefined }
+}) => {
   const { t } = useTranslation('transactionFlow')
 
   if (!value) return null
 
-  const regex = /(\d+)\s*years?\s*(?:,?\s*(\d+)?\s*months?)?/
-  const matches = value.match(regex) ?? []
-
-  const years = parseInt(matches.at(1) ?? '0')
-  const months = parseInt(matches.at(2) ?? '0')
-
-  const date = new Date()
-
-  if (years > 0) date.setFullYear(date.getFullYear() + years)
-  if (months > 0) date.setMonth(date.getMonth() + months)
-
   return (
     <DurationContainer>
       <Typography ellipsis>
-        <strong>{value}</strong>
+        <strong>{value.duration}</strong>
       </Typography>
       <Typography color="textTertiary" fontVariant="small">
-        {t('transaction.extendNames.newExpiry', { date: formatExpiry(date) })}
+        {t('transaction.extendNames.newExpiry', { date: value.newExpiry })}
       </Typography>
     </DurationContainer>
   )
 }
 
 const DisplayItemValue = (props: Omit<TransactionDisplayItem, 'label'>) => {
   const { value, type } = props as TransactionDisplayItem
+  if (type === 'duration') {
+    return <DurationValue value={value} />
+  }
+
   if (type === 'address') {
     return <AddressValue value={value} />
   }
@@ -276,9 +273,6 @@ const DisplayItemValue = (props: Omit<TransactionDisplayItem, 'label'>) => {
   if (type === 'records') {
     return <RecordsValue value={value} />
   }
-  if (type === 'duration') {
-    return <DurationValue value={value} />
-  }
   return <ValueTypography fontVariant="bodyBold">{value}</ValueTypography>
 }
 

src/transaction-flow/transaction/extendNames.test.ts

@@ -0,0 +1,140 @@
+import { mockFunction } from '@app/test-utils'
+
+import { describe, expect, it, vi } from 'vitest'
+
+import extendNamesTransaction from './extendNames'
+
+const mockT = vi.fn((key: string, options?: any) => {
+  if (key === 'transaction.extendNames.actionValue') return 'Extend'
+  if (key === 'transaction.extendNames.costValue') return `Cost: ${options.value}`
+  if (key === 'unit.years') return `${options.count} year`
+  if (key === 'unit.months') return `${options.count} months`
+  if (key === 'unit.days') return `${options.count} days`
+  return key
+})
+
+describe('extendNamesTransaction', () => {
+  describe('displayItems', () => {
+    it('should format display items correctly for a single name', () => {
+      const JAN_1_2022_TIMESTAMP = 1640995200000 // 2022-01-01T00:00:00.000Z
+      const ONE_YEAR_SECONDS = 31536000
+
+      const data = {
+        names: ['test.eth'],
+        duration: ONE_YEAR_SECONDS,
+        startDateTimestamp: JAN_1_2022_TIMESTAMP,
+        displayPrice: '0.1 ETH',
+      }
+
+      const result = extendNamesTransaction.displayItems(data, mockT)
+
+      expect(result).toEqual([
+        {
+          label: 'name',
+          value: 'test.eth',
+          type: 'name',
+        },
+        {
+          label: 'action',
+          value: 'Extend',
+        },
+        {
+          label: 'duration',
+          type: 'duration',
+          value: {
+            duration: '1 year',
+            newExpiry: 'January 1, 2023',
+          },
+        },
+        {
+          label: 'cost',
+          value: 'Cost: 0.1 ETH',
+        },
+      ])
+    })
+
+    it('should format display items correctly for multiple names', () => {
+      const JAN_1_2022_TIMESTAMP = 1640995200000 // 2022-01-01T00:00:00.000Z
+      const ONE_YEAR_SECONDS = 31536000
+
+      const data = {
+        names: ['test1.eth', 'test2.eth'],
+        duration: ONE_YEAR_SECONDS,
+        startDateTimestamp: JAN_1_2022_TIMESTAMP,
+        displayPrice: '0.2 ETH',
+      }
+
+      const result = extendNamesTransaction.displayItems(data, mockT)
+
+      expect(result).toEqual([
+        {
+          label: 'name',
+          value: '2 names',
+          type: undefined,
+        },
+        {
+          label: 'action',
+          value: 'Extend',
+        },
+        {
+          label: 'duration',
+          type: 'duration',
+          value: {
+            duration: '1 year',
+            newExpiry: 'January 1, 2023',
+          },
+        },
+        {
+          label: 'cost',
+          value: 'Cost: 0.2 ETH',
+        },
+      ])
+    })
+
+    it('should handle different duration values', () => {
+      const JAN_1_2022_TIMESTAMP = 1640995200000 // 2022-01-01T00:00:00.000Z
+
+      const testCases = [
+        {
+          duration: 2592000,
+          expectedDuration: '30 days',
+          expectedExpiry: 'January 31, 2022',
+        },
+        {
+          duration: 15768000,
+          expectedDuration: '6 months, 1 days',
+          expectedExpiry: 'July 2, 2022',
+        },
+        {
+          duration: 31536000,
+          expectedDuration: '1 year',
+          expectedExpiry: 'January 1, 2023',
+        },
+        {
+          duration: 157680000,
+          expectedDuration: '4 year, 11 months',
+          expectedExpiry: 'December 31, 2026',
+        },
+      ]
+
+      testCases.forEach(({ duration, expectedDuration, expectedExpiry }) => {
+        const data = {
+          names: ['test.eth'],
+          duration,
+          startDateTimestamp: JAN_1_2022_TIMESTAMP,
+          displayPrice: '0.1 ETH',
+        }
+
+        const result = extendNamesTransaction.displayItems(data, mockT)
+        expect(result[2]).toEqual({
+          label: 'duration',
+          type: 'duration',
+          value: {
+            duration: expectedDuration,
+            newExpiry: expectedExpiry,
+          },
+        })
+      })
+    })
+  })
+})

src/transaction-flow/transaction/extendNames.ts

@@ -5,7 +5,7 @@ import { renewNames } from '@ensdomains/ensjs/wallet'
 
 import { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'
 
-import { calculateValueWithBuffer, formatDurationOfDates } from '../../utils/utils'
+import { calculateValueWithBuffer, formatDurationOfDates, formatExpiry } from '../../utils/utils'
 
 type Data = {
   names: string[]
@@ -31,11 +31,16 @@ const displayItems = (
     {
       type: 'duration',
       label: 'duration',
-      value: formatDurationOfDates({
-        startDate: startDateTimestamp ? new Date(startDateTimestamp) : undefined,
-        endDate: startDateTimestamp ? new Date(startDateTimestamp + duration * 1000) : undefined,
-        t,
-      }),
+      value: {
+        duration: formatDurationOfDates({
+          startDate: startDateTimestamp ? new Date(startDateTimestamp) : undefined,
+          endDate: startDateTimestamp ? new Date(startDateTimestamp + duration * 1000) : undefined,
+          t,
+        }),
+        newExpiry: startDateTimestamp
+          ? formatExpiry(new Date(startDateTimestamp + duration * 1000))
+          : undefined,
+      },
     },
     {
       label: 'cost',

src/types/index.ts

@@ -36,10 +36,18 @@ interface TransactionDisplayItemBase {
   useRawLabel?: boolean
 }
 
-export interface TransactionDisplayItemSingle extends TransactionDisplayItemBase {
-  type?: 'name' | 'subname' | 'address' | 'duration' | undefined
-  value: string
-}
+export type TransactionDisplayItemSingle =
+  | (TransactionDisplayItemBase & {
+      type?: 'name' | 'subname' | 'address' | undefined
+      value: string
+    })
+  | (TransactionDisplayItemBase & {
+      type: 'duration'
+      value: {
+        duration: string
+        newExpiry?: string
+      }
+    })
 
 export interface TransactionDisplayItemList extends TransactionDisplayItemBase {
   type: 'list'