Fix: activity tab showing correct data

.changeset/chatty-baboons-serve.md

@@ -0,0 +1,6 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-ui': patch
+---
+
+Fixes an issue where the activity tab was not showing the correct data

packages/scaffold-ui/src/partials/w3m-activity-list/index.ts

@@ -288,9 +288,8 @@ export class W3mActivityList extends LitElement {
 
   private getTransactionListItemProps(transaction: Transaction) {
     const date = DateUtil.formatDate(transaction?.metadata?.minedAt)
-    const descriptions = TransactionUtil.getTransactionDescriptions(transaction)
-
     const transfers = TransactionUtil.mergeTransfers(transaction?.transfers)
+    const descriptions = TransactionUtil.getTransactionDescriptions(transaction, transfers)
     const transfer = transfers?.[0]
     const isAllNFT = Boolean(transfer) && transfers?.every(item => Boolean(item.nft_info))
     const images = TransactionUtil.getTransactionImages(transfers)

packages/ui/src/utils/TransactionUtil.ts

@@ -6,6 +6,7 @@ import { UiHelperUtil } from './UiHelperUtil.js'
 
 // -- Helpers --------------------------------------------- //
 const FLOAT_FIXED_VALUE = 3
+const GAS_FEE_THRESHOLD = 0.1
 const plusTypes: TransactionType[] = ['receive', 'deposit', 'borrow', 'claim']
 const minusTypes: TransactionType[] = ['withdraw', 'repay', 'burn']
 
@@ -67,12 +68,12 @@ export const TransactionUtil = {
     return undefined
   },
 
-  getTransactionDescriptions(transaction: Transaction) {
+  getTransactionDescriptions(transaction: Transaction, mergedTransfers?: TransactionTransfer[]) {
     const type = transaction?.metadata?.operationType as TransactionType
 
-    const transfers = transaction?.transfers
-    const haveTransfer = transaction?.transfers?.length > 0
-    const haveMultipleTransfers = transaction?.transfers?.length > 1
+    const transfers = mergedTransfers || transaction?.transfers
+    const haveTransfer = transfers?.length > 0
+    const haveMultipleTransfers = transfers?.length > 1
     const isFungible =
       haveTransfer && transfers?.every(transfer => Boolean(transfer?.fungible_info))
     const [firstTransfer, secondTransfer] = transfers
@@ -146,26 +147,97 @@ 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()
+    if (transfers?.length <= 1) {
+      return transfers
+    }
+
+    // Filter out gas fee transfers (small opposite-direction amounts of same token)
+    const filteredTransfers = this.filterGasFeeTransfers(transfers)
+
+    // Merge transfers with same token and same direction
+    const mergedTransfers = filteredTransfers.reduce<TransactionTransfer[]>((acc, t) => {
+      const name = t?.fungible_info?.name
+      const existingTransfer = acc.find(
+        ({ fungible_info, direction }) =>
+          name && name === fungible_info?.name && direction === t.direction
+      )
+      if (existingTransfer) {
+        const quantity = Number(existingTransfer.quantity.numeric) + Number(t.quantity.numeric)
+        existingTransfer.quantity.numeric = quantity.toString()
+
+        existingTransfer.value = (existingTransfer.value || 0) + (t.value || 0)
+      } else {
+        acc.push(t)
+      }
+
+      return acc
+    }, [])
+
+    return mergedTransfers
+  },
+
+  filterGasFeeTransfers(transfers: TransactionTransfer[]): TransactionTransfer[] {
+    // Group transfers by token name
+    const tokenGroups = transfers.reduce<Record<string, TransactionTransfer[]>>(
+      (groups, transfer) => {
+        const tokenName = transfer?.fungible_info?.name
+        if (tokenName) {
+          if (!groups[tokenName]) {
+            groups[tokenName] = []
+          }
+          groups[tokenName].push(transfer)
+        }
+
+        return groups
+      },
+      {}
+    )
+
+    const filteredTransfers: TransactionTransfer[] = []
+
+    Object.values(tokenGroups).forEach(tokenTransfers => {
+      if (tokenTransfers.length === 1) {
+        const firstTransfer = tokenTransfers[0]
+        if (firstTransfer) {
+          filteredTransfers.push(firstTransfer)
+        }
+      } else {
+        // Multiple transfers for same token, check for gas fee pattern
+        const inTransfers = tokenTransfers.filter(t => t.direction === 'in')
+        const outTransfers = tokenTransfers.filter(t => t.direction === 'out')
+
+        if (inTransfers.length === 1 && outTransfers.length === 1) {
+          const inTransfer = inTransfers[0]
+          const outTransfer = outTransfers[0]
+
+          if (inTransfer && outTransfer) {
+            const inAmount = Number(inTransfer.quantity.numeric)
+            const outAmount = Number(outTransfer.quantity.numeric)
+
+            // If one amount is less than 10% of the other, consider it gas and filter out the gas transfer
+            if (outAmount < inAmount * GAS_FEE_THRESHOLD) {
+              filteredTransfers.push(inTransfer)
+            } else if (inAmount < outAmount * GAS_FEE_THRESHOLD) {
+              filteredTransfers.push(outTransfer)
+            } else {
+              filteredTransfers.push(...tokenTransfers)
+            }
+          } else {
+            filteredTransfers.push(...tokenTransfers)
+          }
         } else {
-          acc.push(t)
+          filteredTransfers.push(...tokenTransfers)
         }
+      }
+    })
 
-        return acc
-      }, [])
-    }
+    transfers.forEach(transfer => {
+      if (!transfer?.fungible_info?.name) {
+        filteredTransfers.push(transfer)
+      }
+    })
 
-    return mergedTransfers
+    return filteredTransfers
   },
 
   getQuantityFixedValue(value: string | undefined) {

packages/ui/tests/TransactionUtil.test.ts

@@ -244,4 +244,51 @@ describe('TransactionUtil.mergeTransfers', () => {
     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')
   })
+
+  it('filters out gas fee transfers (small opposite-direction amounts)', () => {
+    const usdcInTransfer = {
+      fungible_info: {
+        name: 'USD Coin',
+        symbol: 'USDC',
+        icon: { url: 'usdc-url' }
+      },
+      direction: 'in' as const,
+      quantity: { numeric: '0.224784' },
+      value: 0.2246140943611488
+    }
+
+    const usdcOutTransfer = {
+      fungible_info: {
+        name: 'USD Coin',
+        symbol: 'USDC',
+        icon: { url: 'usdc-url' }
+      },
+      direction: 'out' as const,
+      quantity: { numeric: '0.005830' },
+      value: 0.005825593325706
+    }
+
+    const polOutTransfer = {
+      fungible_info: {
+        name: 'Polygon',
+        symbol: 'POL',
+        icon: { url: 'pol-url' }
+      },
+      direction: 'out' as const,
+      quantity: { numeric: '1.000000000000000000' },
+      value: 0.2267439626
+    }
+
+    const result = TransactionUtil.mergeTransfers([usdcInTransfer, polOutTransfer, usdcOutTransfer])
+
+    expect(result.length).toBe(2)
+
+    const usdcResult = result.find(t => t?.fungible_info?.name === 'USD Coin')
+    expect(usdcResult?.direction).toBe('in')
+    expect(usdcResult?.quantity.numeric).toBe('0.224784')
+
+    const polResult = result.find(t => t?.fungible_info?.name === 'Polygon')
+    expect(polResult?.direction).toBe('out')
+    expect(polResult?.quantity.numeric).toBe('1.000000000000000000')
+  })
 })