From 059bc79849f7b2ccadbec09c9598605ad855bcae Mon Sep 17 00:00:00 2001 From: Glitch <66949816+glitch-txs@users.noreply.github.com> Date: Thu, 8 Aug 2024 15:47:09 +0500 Subject: [PATCH] added filter transactions by chain (#1834) Co-authored-by: enesozturk --- packages/common/src/utils/TypeUtil.ts | 2 +- .../src/controllers/TransactionsController.ts | 23 +++++++++- .../src/partials/w3m-activity-list/index.ts | 43 +++++++++++++++---- .../src/partials/w3m-activity-list/styles.ts | 4 ++ 4 files changed, 61 insertions(+), 11 deletions(-) diff --git a/packages/common/src/utils/TypeUtil.ts b/packages/common/src/utils/TypeUtil.ts index 985752532a..a0e3410e0f 100644 --- a/packages/common/src/utils/TypeUtil.ts +++ b/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 { diff --git a/packages/core/src/controllers/TransactionsController.ts b/packages/core/src/controllers/TransactionsController.ts index a9c1dc2110..d8b1b00579 100644 --- a/packages/core/src/controllers/TransactionsController.ts +++ b/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({ 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,6 +142,15 @@ 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 }, @@ -140,6 +158,7 @@ export const TransactionsController = { resetTransactions() { state.transactions = [] state.transactionsByYear = {} + state.lastNetworkInView = undefined state.loading = false state.empty = false state.next = undefined diff --git a/packages/scaffold-ui/src/partials/w3m-activity-list/index.ts b/packages/scaffold-ui/src/partials/w3m-activity-list/index.ts index 8017d3bf46..8f7e33d7ce 100644 --- a/packages/scaffold-ui/src/partials/w3m-activity-list/index.ts +++ b/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` - +