added filter transactions by chain (#1834)

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

packages/common/src/utils/TypeUtil.ts

@@ -25,12 +25,12 @@ export interface Transaction {
 export interface TransactionMetadata {
   operationType: string
   hash: string
+  chain: `${string}:${string}`
   minedAt: string
   sentFrom: string
   sentTo: string
   status: TransactionStatus | CoinbaseTransactionStatus
   nonce: number
-  chain?: string
 }
 
 export interface TransactionTransfer {

packages/core/src/controllers/TransactionsController.ts

@@ -3,6 +3,8 @@ import { proxy, subscribe as sub } from 'valtio/vanilla'
 import { OptionsController } from './OptionsController.js'
 import { EventsController } from './EventsController.js'
 import { SnackController } from './SnackController.js'
+import { NetworkController } from './NetworkController.js'
+import type { CaipNetworkId } from '../utils/TypeUtil.js'
 import { BlockchainApiController } from './BlockchainApiController.js'
 import { AccountController } from './AccountController.js'
 import { W3mFrameRpcConstants } from '@web3modal/wallet'
@@ -15,6 +17,7 @@ export interface TransactionsControllerState {
   transactions: Transaction[]
   coinbaseTransactions: TransactionByYearMap
   transactionsByYear: TransactionByYearMap
+  lastNetworkInView: CaipNetworkId | undefined
   loading: boolean
   empty: boolean
   next: string | undefined
@@ -25,6 +28,7 @@ const state = proxy<TransactionsControllerState>({
   transactions: [],
   coinbaseTransactions: {},
   transactionsByYear: {},
+  lastNetworkInView: undefined,
   loading: false,
   empty: false,
   next: undefined
@@ -38,6 +42,10 @@ export const TransactionsController = {
     return sub(state, () => callback(state))
   },
 
+  setLastNetworkInView(lastNetworkInView: TransactionsControllerState['lastNetworkInView']) {
+    state.lastNetworkInView = lastNetworkInView
+  },
+
   async fetchTransactions(accountAddress?: string, onramp?: 'coinbase') {
     const { projectId } = OptionsController.state
 
@@ -58,7 +66,8 @@ export const TransactionsController = {
       })
 
       const nonSpamTransactions = this.filterSpamTransactions(response.data)
-      const filteredTransactions = [...state.transactions, ...nonSpamTransactions]
+      const sameChainTransactions = this.filterByConnectedChain(nonSpamTransactions)
+      const filteredTransactions = [...state.transactions, ...sameChainTransactions]
 
       state.loading = false
 
@@ -71,7 +80,7 @@ export const TransactionsController = {
         state.transactions = filteredTransactions
         state.transactionsByYear = this.groupTransactionsByYearAndMonth(
           state.transactionsByYear,
-          nonSpamTransactions
+          sameChainTransactions
         )
       }
 
@@ -133,13 +142,23 @@ export const TransactionsController = {
     })
   },
 
+  filterByConnectedChain(transactions: Transaction[]) {
+    const chainId = NetworkController.state.caipNetwork?.id
+    const filteredTransactions = transactions.filter(
+      transaction => transaction.metadata.chain === chainId
+    )
+
+    return filteredTransactions
+  },
+
   clearCursor() {
     state.next = undefined
   },
 
   resetTransactions() {
     state.transactions = []
     state.transactionsByYear = {}
+    state.lastNetworkInView = undefined
     state.loading = false
     state.empty = false
     state.next = undefined

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

@@ -4,6 +4,7 @@ import {
   AccountController,
   ChainController,
   EventsController,
+  NetworkController,
   OptionsController,
   RouterController,
   TransactionsController
@@ -63,6 +64,9 @@ export class W3mActivityList extends LitElement {
             }
           }
         }),
+        NetworkController.subscribeKey('caipNetwork', () => {
+          this.updateTransactionView()
+        }),
         TransactionsController.subscribe(val => {
           this.transactionsByYear = val.transactionsByYear
           this.loading = val.loading
@@ -80,7 +84,8 @@ export class W3mActivityList extends LitElement {
 
       return
     }
-    TransactionsController.fetchTransactions(this.address)
+
+    this.updateTransactionView()
     this.createPaginationObserver()
   }
 
@@ -100,28 +105,50 @@ export class W3mActivityList extends LitElement {
   }
 
   // -- Private ------------------------------------------- //
+  private updateTransactionView() {
+    const currentNetwork = NetworkController.state.caipNetwork?.id
+    const lastNetworkInView = TransactionsController.state.lastNetworkInView
+
+    if (lastNetworkInView !== currentNetwork) {
+      TransactionsController.resetTransactions()
+      TransactionsController.fetchTransactions(this.address)
+    }
+    TransactionsController.setLastNetworkInView(currentNetwork)
+  }
+
   private templateTransactionsByYear() {
     const sortedYearKeys = Object.keys(this.transactionsByYear).sort().reverse()
 
-    return sortedYearKeys.map((year, index) => {
-      const isLastGroup = index === sortedYearKeys.length - 1
+    return sortedYearKeys.map(year => {
       const yearInt = parseInt(year, 10)
 
       const sortedMonthIndexes = new Array(12)
         .fill(null)
-        .map((_, idx) => idx)
+        .map((_, idx) => {
+          const groupTitle = TransactionUtil.getTransactionGroupTitle(yearInt, idx)
+          const transactions = this.transactionsByYear[yearInt]?.[idx]
+
+          return {
+            groupTitle,
+            transactions
+          }
+        })
+        .filter(({ transactions }) => transactions)
         .reverse()
 
-      return sortedMonthIndexes.map(month => {
-        const groupTitle = TransactionUtil.getTransactionGroupTitle(yearInt, month)
-        const transactions = this.transactionsByYear[yearInt]?.[month]
+      return sortedMonthIndexes.map(({ groupTitle, transactions }, index) => {
+        const isLastGroup = index === sortedMonthIndexes.length - 1
 
         if (!transactions) {
           return null
         }
 
         return html`
-          <wui-flex flexDirection="column">
+          <wui-flex
+            flexDirection="column"
+            class="group-container"
+            last-group="${isLastGroup ? 'true' : 'false'}"
+          >
             <wui-flex
               alignItems="center"
               flexDirection="row"

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

@@ -5,6 +5,10 @@ export default css`
     min-height: 100%;
   }
 
+  .group-container[last-group='true'] {
+    padding-bottom: var(--wui-spacing-m);
+  }
+
   .contentContainer {
     height: 280px;
   }