Fix date and add test (#591)

packages/ui/cypress/support/page-objects/multisigPage.ts

@@ -23,6 +23,7 @@ export const multisigPage = {
   transactionList: () => cy.get('[data-cy=container-transaction-list]', { timeout: 20000 }),
   pendingTransactionItem: (timeout = 4000) =>
     cy.get('[data-cy=container-pending-tx-item]', { timeout }),
+  dateLabel: () => cy.get('[data-cy=label-date]'),
   pendingTransactionCallName: () => cy.get('[data-cy=label-call-name]'),
   unknownCallIcon: () => cy.get('[data-cy=icon-unknown-call]'),
   unknownCallAlert: () => cy.get('[data-cy=alert-no-call-data]')

packages/ui/cypress/tests/hydration-extrinsic-display.cy.ts

@@ -27,6 +27,7 @@ describe('Verify extrinsics display', () => {
       .should('be.visible')
       .within(() => {
         multisigPage.pendingTransactionItem().should('have.length', 1)
+        multisigPage.dateLabel().should('have.length', 1).contains('November 5, 2024')
         multisigPage.pendingTransactionItem().within(() => {
           multisigPage.pendingTransactionCallName().should('contain.text', 'Router.sell')
           multisigPage.unknownCallIcon().should('not.exist')

packages/ui/cypress/tests/unknown-transaction.cy.ts

@@ -22,6 +22,8 @@ describe('Unknown Transaction', () => {
       .should('be.visible')
       .within(() => {
         multisigPage.pendingTransactionItem().should('have.length', 2)
+        multisigPage.dateLabel().should('have.length', 1)
+        multisigPage.dateLabel().eq(0).contains('September 12, 2024')
         multisigPage
           .pendingTransactionItem()
           .eq(1)

packages/ui/src/components/CallInfo.tsx

@@ -58,41 +58,41 @@ const isBatchedCall = (type: string, value: string) => {
   return ['Utility.batch', 'Utility.batch_all', 'Utility.force_batch'].includes(`${type}.${value}`)
 }
 
-const formatBalance = (amount: bigint, label: string, chainInfo: ChainInfoHuman) => (
-  <li>
+const formatBalance = (amount: bigint, label: string, chainInfo: ChainInfoHuman, id: string) => (
+  <li key={id}>
     {label}:{' '}
     {formatBigIntBalance(amount, chainInfo?.tokenDecimals, {
       tokenSymbol: chainInfo?.tokenSymbol
     })}
   </li>
 )
 
-const eachFieldRendered = (value: Record<string, any>, chainInfo: ChainInfoHuman) => {
+const eachFieldRendered = (value: Record<string, any>, chainInfo: ChainInfoHuman, id: string) => {
   // for transfer, nomination, staking, bounties
   const bigIntKey = ['value', 'fee', 'max_additional'].find((key) => typeof value[key] === 'bigint')
 
   if (bigIntKey) {
-    return formatBalance(value[bigIntKey], bigIntKey, chainInfo)
+    return formatBalance(value[bigIntKey], bigIntKey, chainInfo, id)
   }
 
   // for Staking.nominate
   if (Array.isArray(value.targets) && value.targets.length > 0) {
     return (
-      <li key="targets">
+      <li key={`${id}-targets`}>
         targets:{' '}
         <ul>
-          {value.targets.map((target: any) => {
+          {value.targets.map((target: any, index) => {
             const address = target.type === 'Id' ? target.value : null
 
             if (address) {
               return (
-                <li key={address}>
+                <li key={`${index}-${address}`}>
                   <MultisigCompactDisplay address={address} />
                 </li>
               )
             }
 
-            return <li key={address}>{JSONprint(target)}</li>
+            return <li key={`${index}-${address}`}>{JSONprint(target)}</li>
           })}
         </ul>
       </li>
@@ -130,7 +130,7 @@ const eachFieldRendered = (value: Record<string, any>, chainInfo: ChainInfoHuman
     )
   }
 
-  return <li key="not-pretty-decoded">{JSONprint(value)} </li>
+  return <li key={`not-pretty-decoded-${id}`}>{JSONprint(value)} </li>
 }
 
 const preparedCall = (
@@ -163,8 +163,8 @@ const preparedCall = (
             </ExtrinsicNameStyled>
           )}
           <ul>
-            {Object.entries(lowerLevelCall).map(([key, value]) =>
-              eachFieldRendered({ [key]: value }, chainInfo)
+            {Object.entries(lowerLevelCall).map(([key, value], index) =>
+              eachFieldRendered({ [key]: value }, chainInfo, `${decodedCall.type}-${index}`)
             )}
           </ul>
         </>

packages/ui/src/components/Transactions/TransactionList.tsx

@@ -53,7 +53,7 @@ const TransactionList = ({ className }: Props) => {
         Object.entries(txWithCallDataByDate).map(([date, aggregatedData]) => {
           return (
             <TransactionWrapper key={date}>
-              <DateContainerStyled>{date}</DateContainerStyled>
+              <DateContainerStyled data-cy="label-date">{date}</DateContainerStyled>
               {aggregatedData.map((agg, index) => {
                 const { callData, info, from } = agg
                 const { threshold, signatories } =

packages/ui/src/hooks/usePendingTx.tsx

@@ -56,7 +56,6 @@ const getMultisigInfo = async (
   api: ApiType
 ): Promise<Partial<CallDataInfoFromChain>[]> => {
   const compatibilityToken = await api.compatibilityToken
-
   const result: any[] = []
 
   // console.log('----for call', JSONprint(call));
@@ -99,7 +98,6 @@ const getMultisigInfo = async (
   }
 
   getCallResults(call)
-  // console.log('result', JSONprint(result))
   return result
 }
 
@@ -143,9 +141,7 @@ const getCallDataFromChainPromise = (
     // get the timestamp which is an unsigned extrinsic set by the validator in each block
     // the information for each of the contained extrinsics
     allDecodedTxs.some(({ decodedCall: { type, value } }) => {
-      // check for timestamp.set
-      if (type === 'Timestamp' && value.type === 'Set') {
-        // extract the Option<Moment> as Moment
+      if (type === 'Timestamp' && value.type === 'set') {
         const moment = value.value.now as string
 
         // convert to date (unix ms since epoch in Moment - exactly as per the Rust code)
@@ -157,10 +153,6 @@ const getCallDataFromChainPromise = (
     })
 
     const ext = allDecodedTxs[pendingTx.info.when.index]
-
-    // const decoded = parseGenericCall(ext.method as GenericCall, ext.registry)
-    // console.log('pendingTxData', pendingTxData)
-    // console.log('decoded', decoded)
     const multisigTxs = (await getMultisigInfo(ext.decodedCall, api)) || []
 
     const multisigTxInfo = multisigTxs.find((info) => {