Fix: activity tab showing correct data (#5076)

Co-authored-by: Copilot <[email protected]>

Author: svenvoskamp

.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']
 
@@ -20,16 +21,10 @@ export const TransactionUtil = {
   },
 
   getTransactionImages(transfers: TransactionTransfer[]): TransactionImage[] {
-    const [transfer, secondTransfer] = transfers
-    const isAllNFT = Boolean(transfer) && transfers?.every(item => Boolean(item.nft_info))
-    const haveMultipleTransfers = transfers?.length > 1
-    const haveTwoTransfers = transfers?.length === 2
+    const [transfer] = transfers
+    const hasMultipleTransfers = transfers?.length > 1
 
-    if (haveTwoTransfers && !isAllNFT) {
-      return [this.getTransactionImage(secondTransfer), this.getTransactionImage(transfer)]
-    }
-
-    if (haveMultipleTransfers) {
+    if (hasMultipleTransfers) {
       return transfers.map(item => this.getTransactionImage(item))
     }
 
@@ -67,20 +62,19 @@ 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 isFungible =
-      haveTransfer && transfers?.every(transfer => Boolean(transfer?.fungible_info))
+    const transfers = mergedTransfers || transaction?.transfers
+    const hasTransfer = transfers?.length > 0
+    const hasMultipleTransfers = transfers?.length > 1
+    const isFungible = hasTransfer && transfers?.every(transfer => Boolean(transfer?.fungible_info))
     const [firstTransfer, secondTransfer] = transfers
 
     let firstDescription = this.getTransferDescription(firstTransfer)
     let secondDescription = this.getTransferDescription(secondTransfer)
 
-    if (!haveTransfer) {
+    if (!hasTransfer) {
       const isSendOrReceive = type === 'send' || type === 'receive'
 
       if (isSendOrReceive && isFungible) {
@@ -103,8 +97,8 @@ export const TransactionUtil = {
       return [transaction.metadata.status]
     }
 
-    if (haveMultipleTransfers) {
-      return transfers.map(item => this.getTransferDescription(item)).reverse()
+    if (hasMultipleTransfers) {
+      return transfers.map(item => this.getTransferDescription(item))
     }
 
     let prefix = ''
@@ -146,26 +140,165 @@ 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
+    }
+
+    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
+    }, [])
+
+    let finalTransfers = mergedTransfers
+    if (mergedTransfers.length > 2) {
+      finalTransfers = mergedTransfers.sort((a, b) => (b.value || 0) - (a.value || 0)).slice(0, 2)
+    }
+
+    // Correctly order transfers for display
+    finalTransfers = finalTransfers.sort((a, b) => {
+      if (a.direction === 'out' && b.direction === 'in') {
+        return -1
+      }
+      if (a.direction === 'in' && b.direction === 'out') {
+        return 1
+      }
+
+      return 0
+    })
+
+    return finalTransfers
+  },
+
+  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]
+
+          let didApplyGasFeeFilter = false
+          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)
+              didApplyGasFeeFilter = true
+            } else if (inAmount < outAmount * GAS_FEE_THRESHOLD) {
+              filteredTransfers.push(outTransfer)
+              didApplyGasFeeFilter = true
+            }
+          }
+
+          if (!didApplyGasFeeFilter) {
+            filteredTransfers.push(...tokenTransfers)
+          }
         } else {
-          acc.push(t)
+          const significantTransfers = this.filterGasFeesFromTokenGroup(tokenTransfers)
+          filteredTransfers.push(...significantTransfers)
         }
+      }
+    })
+
+    transfers.forEach(transfer => {
+      if (!transfer?.fungible_info?.name) {
+        filteredTransfers.push(transfer)
+      }
+    })
+
+    return filteredTransfers
+  },
+
+  filterGasFeesFromTokenGroup(tokenTransfers: TransactionTransfer[]): TransactionTransfer[] {
+    if (tokenTransfers.length <= 1) {
+      return tokenTransfers
+    }
+
+    const amounts = tokenTransfers.map(t => Number(t.quantity.numeric))
+    const maxAmount = Math.max(...amounts)
+    const minAmount = Math.min(...amounts)
+
+    // If minimum amount is extremely small compared to maximum (less than 1% of max), it's likely gas
+    const extremeGasThreshold = 0.01
+
+    if (minAmount < maxAmount * extremeGasThreshold) {
+      // Filter out extremely small amounts that are likely gas fees
 
-        return acc
-      }, [])
+      const filtered = tokenTransfers.filter(t => {
+        const amount = Number(t.quantity.numeric)
+
+        return amount >= maxAmount * extremeGasThreshold
+      })
+
+      return filtered
+    }
+
+    // If no extremely small amounts, apply standard gas fee logic
+    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 (outAmount < inAmount * GAS_FEE_THRESHOLD) {
+          return [inTransfer]
+        } else if (inAmount < outAmount * GAS_FEE_THRESHOLD) {
+          return [outTransfer]
+        }
+      }
     }
 
-    return mergedTransfers
+    // Default: keep all transfers if no gas fee pattern detected
+    return tokenTransfers
   },
 
   getQuantityFixedValue(value: string | undefined) {