fix: swap shows incorrect token status in smart account activity (#5001)

tomiir · web-flow · commit 65e6ba1d07bc · 2025-09-11T13:55:05.000+02:00
diff --git a/packages/scaffold-ui/src/partials/w3m-activity-list/index.ts b/packages/scaffold-ui/src/partials/w3m-activity-list/index.ts
@@ -2,7 +2,7 @@ import { LitElement, html } from 'lit'
 import { property, state } from 'lit/decorators.js'
 
 import { DateUtil } from '@reown/appkit-common'
-import type { Transaction, TransactionImage } from '@reown/appkit-common'
+import type { Transaction } from '@reown/appkit-common'
 import {
   ChainController,
   CoreHelperUtil,
@@ -159,42 +159,8 @@ export class W3mActivityList extends LitElement {
   }
 
   private templateRenderTransaction(transaction: Transaction, isLastTransaction: boolean) {
-    const { date, descriptions, direction, isAllNFT, images, status, transfers, type } =
+    const { date, descriptions, direction, images, status, type, transfers, isAllNFT } =
       this.getTransactionListItemProps(transaction)
-    const hasMultipleTransfers = transfers?.length > 1
-    const hasTwoTransfers = transfers?.length === 2
-
-    if (hasTwoTransfers && !isAllNFT) {
-      return html`
-        <wui-transaction-list-item
-          date=${date}
-          .direction=${direction}
-          id=${isLastTransaction && this.next ? PAGINATOR_ID : ''}
-          status=${status}
-          type=${type}
-          .images=${images}
-          .descriptions=${descriptions}
-        ></wui-transaction-list-item>
-      `
-    }
-
-    if (hasMultipleTransfers) {
-      return transfers.map((transfer, index) => {
-        const description = TransactionUtil.getTransferDescription(transfer)
-        const isLastTransfer = isLastTransaction && index === transfers.length - 1
-
-        return html` <wui-transaction-list-item
-          date=${date}
-          direction=${transfer.direction}
-          id=${isLastTransfer && this.next ? PAGINATOR_ID : ''}
-          status=${status}
-          type=${type}
-          .onlyDirectionIcon=${true}
-          .images=${[images[index]] as TransactionImage[]}
-          .descriptions=${[description]}
-        ></wui-transaction-list-item>`
-      })
-    }
 
     return html`
       <wui-transaction-list-item
@@ -204,6 +170,7 @@ export class W3mActivityList extends LitElement {
         status=${status}
         type=${type}
         .images=${images}
+        .onlyDirectionIcon=${isAllNFT || transfers.length === 1}
         .descriptions=${descriptions}
       ></wui-transaction-list-item>
     `
@@ -323,10 +290,9 @@ export class W3mActivityList extends LitElement {
     const date = DateUtil.formatDate(transaction?.metadata?.minedAt)
     const descriptions = TransactionUtil.getTransactionDescriptions(transaction)
 
-    const transfers = transaction?.transfers
-    const transfer = transaction?.transfers?.[0]
-    const isAllNFT =
-      Boolean(transfer) && transaction?.transfers?.every(item => Boolean(item.nft_info))
+    const transfers = TransactionUtil.mergeTransfers(transaction?.transfers)
+    const transfer = transfers?.[0]
+    const isAllNFT = Boolean(transfer) && transfers?.every(item => Boolean(item.nft_info))
     const images = TransactionUtil.getTransactionImages(transfers)
 
     return {
diff --git a/packages/ui/src/utils/TransactionUtil.ts b/packages/ui/src/utils/TransactionUtil.ts
@@ -145,6 +145,28 @@ export const TransactionUtil = {
 
     return description
   },
+  mergeTransfers(transfers: TransactionTransfer[]) {
+    let mergedTransfers = transfers
+    // If we have more than two transfers, we need to merge transfers with same direction and same token
+    if (transfers?.length > 1) {
+      mergedTransfers = transfers.reduce<TransactionTransfer[]>((acc, t) => {
+        const name = t?.fungible_info?.name
+        const existingTransfer = acc.find(
+          ({ fungible_info }) => name && name === fungible_info?.name
+        )
+        if (existingTransfer) {
+          const quantity = Number(existingTransfer.quantity.numeric) + Number(t.quantity.numeric)
+          existingTransfer.quantity.numeric = quantity.toString()
+        } else {
+          acc.push(t)
+        }
+
+        return acc
+      }, [])
+    }
+
+    return mergedTransfers
+  },
 
   getQuantityFixedValue(value: string | undefined) {
     if (!value) {
diff --git a/packages/ui/tests/TransactionUtil.test.ts b/packages/ui/tests/TransactionUtil.test.ts
@@ -122,3 +122,126 @@ describe('TransactionUtil.getTransactionDescriptions', () => {
     expect(desc[0]).toBe('success')
   })
 })
+
+describe('TransactionUtil.mergeTransfers', () => {
+  const createToken1Transfer = (quantity = '100') => ({
+    fungible_info: {
+      name: 'Token1',
+      symbol: 'TOK1',
+      icon: { url: 'token1-url' }
+    },
+    direction: 'in' as const,
+    quantity: { numeric: quantity }
+  })
+
+  const createToken2Transfer = (quantity = '200') => ({
+    fungible_info: {
+      name: 'Token2',
+      symbol: 'TOK2',
+      icon: { url: 'token2-url' }
+    },
+    direction: 'in' as const,
+    quantity: { numeric: quantity }
+  })
+
+  it('returns empty array for empty input', () => {
+    const result = TransactionUtil.mergeTransfers([])
+    expect(result).toEqual([])
+  })
+
+  it('returns single transfer unchanged', () => {
+    const token1Transfer = createToken1Transfer()
+    const result = TransactionUtil.mergeTransfers([token1Transfer])
+    expect(result).toEqual([token1Transfer])
+  })
+
+  it('returns multiple transfers with different names unchanged', () => {
+    const token1Transfer = createToken1Transfer()
+    const token2Transfer = createToken2Transfer()
+    const result = TransactionUtil.mergeTransfers([token1Transfer, token2Transfer])
+    expect(result).toEqual([token1Transfer, token2Transfer])
+  })
+
+  it('merges transfers with same token name', () => {
+    const token1Transfer = createToken1Transfer('100')
+    const token1Transfer2 = createToken1Transfer('50')
+    const result = TransactionUtil.mergeTransfers([token1Transfer, token1Transfer2])
+    expect(result.length).toBe(1)
+    expect(result[0]?.fungible_info?.name).toBe('Token1')
+    expect(result[0]?.quantity.numeric).toBe('150')
+  })
+
+  it('merges multiple transfers with mixed same and different names', () => {
+    const token1Transfer = createToken1Transfer('100')
+    const token2Transfer = createToken2Transfer('200')
+    const token1Transfer2 = createToken1Transfer('50')
+    const result = TransactionUtil.mergeTransfers([token1Transfer, token2Transfer, token1Transfer2])
+    expect(result.length).toBe(2)
+
+    // Find the merged Token1 transfer
+    const token1Merged = result.find(t => t?.fungible_info?.name === 'Token1')
+    expect(token1Merged?.quantity.numeric).toBe('150') // '100' + '50'
+
+    // Token2 should remain unchanged
+    const token2Result = result.find(t => t?.fungible_info?.name === 'Token2')
+    expect(token2Result?.quantity.numeric).toBe('200')
+  })
+
+  it('handles transfers with undefined fungible_info gracefully', () => {
+    const token1Transfer = createToken1Transfer()
+    const transferWithoutFungible = {
+      direction: 'in' as const,
+      quantity: { numeric: '100' }
+    } as any
+
+    const result = TransactionUtil.mergeTransfers([token1Transfer, transferWithoutFungible])
+    expect(result.length).toBe(2)
+    expect(result).toContain(token1Transfer)
+    expect(result).toContain(transferWithoutFungible)
+  })
+
+  it('does not merge transfers with undefined fungible_info name', () => {
+    const transferWithoutName = {
+      fungible_info: {
+        symbol: 'TOK1',
+        icon: { url: 'token1-url' }
+        // name is undefined
+      },
+      direction: 'in' as const,
+      quantity: { numeric: '100' }
+    }
+
+    const anotherTransferWithoutName = {
+      fungible_info: {
+        symbol: 'TOK1',
+        icon: { url: 'token1-url' }
+        // name is undefined
+      },
+      direction: 'in' as const,
+      quantity: { numeric: '50' }
+    }
+
+    const result = TransactionUtil.mergeTransfers([transferWithoutName, anotherTransferWithoutName])
+    expect(result.length).toBe(2) // Should not merge because names are undefined
+    expect(result[0]?.quantity.numeric).toBe('100')
+    expect(result[1]?.quantity.numeric).toBe('50')
+  })
+
+  it('does not merge transfer with undefined name with named transfer', () => {
+    const namedTransfer = createToken1Transfer('100')
+    const transferWithoutName = {
+      fungible_info: {
+        symbol: 'TOK1',
+        icon: { url: 'token1-url' }
+        // name is undefined
+      },
+      direction: 'in' as const,
+      quantity: { numeric: '50' }
+    }
+
+    const result = TransactionUtil.mergeTransfers([namedTransfer, transferWithoutName])
+    expect(result.length).toBe(2) // Should not merge because one has undefined name
+    expect(result.find(t => t?.fungible_info?.name === 'Token1')?.quantity.numeric).toBe('100')
+    expect(result.find(t => !t?.fungible_info?.name)?.quantity.numeric).toBe('50')
+  })
+})
