added filter transactions by chain

packages/common/src/utils/TypeUtil.ts

@@ -21,6 +21,7 @@ export interface Transaction {
 export interface TransactionMetadata {
   operationType: string
   hash: string
+  chain: `${string}:${string}`
   minedAt: string
   sentFrom: string
   sentTo: string

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'
 
 // -- Types --------------------------------------------- //
@@ -13,6 +15,7 @@ export interface TransactionsControllerState {
   transactions: Transaction[]
   coinbaseTransactions: TransactionByYearMap
   transactionsByYear: TransactionByYearMap
+  lastNetworkInView: CaipNetworkId | undefined
   loading: boolean
   empty: boolean
   next: string | undefined
@@ -23,6 +26,7 @@ const state = proxy<TransactionsControllerState>({
   transactions: [],
   coinbaseTransactions: {},
   transactionsByYear: {},
+  lastNetworkInView: undefined,
   loading: false,
   empty: false,
   next: undefined
@@ -36,6 +40,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
 
@@ -54,7 +62,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
 
@@ -67,7 +76,7 @@ export const TransactionsController = {
         state.transactions = filteredTransactions
         state.transactionsByYear = this.groupTransactionsByYearAndMonth(
           state.transactionsByYear,
-          nonSpamTransactions
+          sameChainTransactions
         )
       }
 
@@ -86,6 +95,8 @@ export const TransactionsController = {
       SnackController.showError('Failed to fetch transactions')
       state.loading = false
       state.empty = true
+
+      throw error
     }
   },
 
@@ -124,9 +135,19 @@ export const TransactionsController = {
     })
   },
 
+  filterByConnectedChain(transactions: Transaction[]) {
+    const chainId = NetworkController.state.caipNetwork?.id
+    const filteredTransactions = transactions.filter(
+      transaction => transaction.metadata.chain === chainId
+    )
+
+    return filteredTransactions
+  },
+
   resetTransactions() {
     state.transactions = []
     state.transactionsByYear = {}
+    state.lastNetworkInView = undefined
     state.loading = false
     state.empty = false
     state.next = undefined

packages/scaffold/src/views/w3m-transactions-view/index.ts

@@ -3,6 +3,7 @@ import type { Transaction, TransactionImage } from '@web3modal/common'
 import {
   AccountController,
   EventsController,
+  NetworkController,
   OptionsController,
   TransactionsController
 } from '@web3modal/core'
@@ -50,6 +51,9 @@ export class W3mTransactionsView extends LitElement {
             }
           }
         }),
+        NetworkController.subscribeKey('caipNetwork', () => {
+          this.updateTransactionView()
+        }),
         TransactionsController.subscribe(val => {
           this.transactionsByYear = val.transactionsByYear
           this.loading = val.loading
@@ -61,7 +65,7 @@ export class W3mTransactionsView extends LitElement {
   }
 
   public override firstUpdated() {
-    TransactionsController.fetchTransactions(this.address)
+    this.updateTransactionView()
     this.createPaginationObserver()
   }
 
@@ -85,6 +89,17 @@ export class W3mTransactionsView 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()