refactor: `asset-list` and `token-list` #29886

gambinish · 2025-01-23T21:47:22Z

Description

This is the first of a series of PRs that aim to address two things:

Simplify/fix some technical debt accrued during PortfolioView sprints
Prepare AssetList for chain agnostic tokens (removal of EVM specific conventions)

This PR aims to simplify asset-list and token-list components. The next PR will simplify token-cell and token-list-item

Refactor consolidateTokenBalances into a redux selector getTokenBalancesEvm. Eventually (soon) this will be wrapped in a more generic selector, that will understand how to select/calculate balances for tokens on different chains.
Add a app/assets/hooks directory to help clean up and extract business logic away from the body of asset-list and token-list components and improve readability
Adds two utility files: calculateTokenBalance and calculateTokenFiatAmount (these are called from the selector file)
Adds a app/assets/types.ts file to consolidate all the types related to assets.

Related issues

Manual testing steps

This PR should not break anything. It also should not introduce anything.

Screenshots/Recordings

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

github-actions · 2025-01-23T21:47:38Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

ui/components/app/assets/util/consolidateTokenBalances.ts

metamaskbot · 2025-02-05T19:54:33Z

Builds ready [439b107]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (1945 ± 100 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	498	2425	1895	377	181
		domContentLoaded	1573	2364	1919	200	96
		load	1629	2415	1945	209	100
		domInteractive	26	141	53	31	15
		backgroundConnect	10	75	29	22	10
		firstReactRender	17	96	41	26	13
		getState	5	89	29	25	12
		initialActions	0	1	0	0	0
		loadScripts	1096	1758	1386	169	81
		setupStore	9	90	28	24	12
		uiStartup	1813	2945	2265	257	123

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 1.3 KiB (0.02%)
common: 0 Bytes (0.00%)

…hub.com:MetaMask/metamask-extension into refactor/mmassets-492_chain-agnostic-asset-list

metamaskbot · 2025-02-05T23:05:28Z

Builds ready [cbfd264]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (1620 ± 115 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1390	2582	1624	240	115
		domContentLoaded	1382	2569	1599	238	114
		load	1390	2582	1620	240	115
		domInteractive	23	89	39	19	9
		backgroundConnect	8	92	23	23	11
		firstReactRender	15	97	45	29	14
		getState	4	46	11	12	6
		initialActions	0	1	0	0	0
		loadScripts	945	1608	1125	135	65
		setupStore	7	85	20	24	11
		uiStartup	1606	2849	1873	304	146

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 1.3 KiB (0.02%)
common: 0 Bytes (0.00%)

ui/components/app/assets/auto-detect-token/index.scss

ui/components/app/assets/hooks/useFundingModals.tsx

ui/components/app/assets/hooks/useShouldShowFiat.tsx

…hub.com:MetaMask/metamask-extension into refactor/mmassets-492_chain-agnostic-asset-list

metamaskbot · 2025-02-06T23:26:41Z

Builds ready [78b2643]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (1675 ± 75 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	414	2118	1618	319	153
		domContentLoaded	1440	2058	1658	157	75
		load	1448	2074	1675	156	75
		domInteractive	23	91	39	20	9
		backgroundConnect	9	56	20	13	6
		firstReactRender	15	106	41	27	13
		getState	4	61	22	20	10
		initialActions	0	1	0	0	0
		loadScripts	1029	1580	1203	140	67
		setupStore	7	51	13	12	6
		uiStartup	1604	2489	1921	206	99

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 1.01 KiB (0.01%)
common: 6.29 KiB (0.07%)

ui/components/app/assets/asset-list/asset-list-funding-modals/asset-list-funding-modals.tsx

ui/components/app/assets/hooks/useAssetListTokenDetection.tsx

ui/components/app/assets/token-list/token-list.tsx

ui/selectors/selectors.js

vinnyhoward

These are absolutely killer refactors. Mobile sorely needs this type of love. LGTM!

davidmurdoch

circular dep changes are 👍 !

metamaskbot · 2025-02-07T18:51:35Z

Builds ready [3df8360]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (1712 ± 79 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	382	2125	1646	328	158
		domContentLoaded	1454	2101	1686	158	76
		load	1465	2125	1712	165	79
		domInteractive	24	114	44	24	12
		backgroundConnect	10	119	25	26	13
		firstReactRender	16	179	47	39	19
		getState	5	60	15	18	9
		initialActions	0	0	0	0	0
		loadScripts	1024	1541	1225	127	61
		setupStore	8	80	24	23	11
		uiStartup	1653	2748	1997	265	127

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 1.01 KiB (0.01%)
common: 6.29 KiB (0.07%)

metamaskbot · 2025-02-07T18:51:57Z

Builds ready [3df8360]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (1712 ± 79 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	382	2125	1646	328	158
		domContentLoaded	1454	2101	1686	158	76
		load	1465	2125	1712	165	79
		domInteractive	24	114	44	24	12
		backgroundConnect	10	119	25	26	13
		firstReactRender	16	179	47	39	19
		getState	5	60	15	18	9
		initialActions	0	0	0	0	0
		loadScripts	1024	1541	1225	127	61
		setupStore	8	80	24	23	11
		uiStartup	1653	2748	1997	265	127

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 1.01 KiB (0.01%)
common: 6.29 KiB (0.07%)

chore: Create consolidateTokenBalances utility function

06f4bfa

metamaskbot added the team-assets label Jan 23, 2025

fix: Continue to break out utility files

2eecfcf

darkwing reviewed Feb 5, 2025

View reviewed changes

ui/components/app/assets/util/consolidateTokenBalances.ts Outdated Show resolved Hide resolved

Merge branch 'main' into refactor/mmassets-492_chain-agnostic-asset-list

439b107

gambinish and others added 3 commits February 5, 2025 14:29

refactor: consolidateBalances to getTokenBalancesEvm selector

09a8195

Merge branch 'main' into refactor/mmassets-492_chain-agnostic-asset-list

cbfd264

Merge branch 'refactor/mmassets-492_chain-agnostic-asset-list' of git…

2811cd7

…hub.com:MetaMask/metamask-extension into refactor/mmassets-492_chain-agnostic-asset-list

gambinish added 4 commits February 5, 2025 15:44

chore: Remove consolidatedBalances util in favor of fleshed out selector

b2febcc

chore: cleanup

ec9c6bb

chore: Move useFilteredAccountTokens to selector

746f67d

refactor: Breakout redundant business logic into reusable hooks

f17ec92

gambinish changed the title ~~chore: Create consolidateTokenBalances utility function~~ refactor: Chain agnostic token-list Feb 6, 2025

refactor: Intorudce useTokenDetection hook and AssetListFundingModals

e7c3ab8

gambinish commented Feb 6, 2025

View reviewed changes

ui/components/app/assets/auto-detect-token/index.scss Show resolved Hide resolved

gambinish commented Feb 6, 2025

View reviewed changes

ui/components/app/assets/hooks/useFundingModals.tsx Outdated Show resolved Hide resolved

gambinish changed the title ~~refactor: Chain agnostic token-list~~ refactor: asset-list and token-list Feb 6, 2025

gambinish added 2 commits February 6, 2025 10:14

Lint and cleanup importAllDetectedTokens method

c70d298

fix: Lint file imports

65eb517

gambinish commented Feb 6, 2025

View reviewed changes

ui/components/app/assets/hooks/useShouldShowFiat.tsx Show resolved Hide resolved

gambinish and others added 7 commits February 6, 2025 11:00

fix: unit test

fb12981

Merge branch 'main' into refactor/mmassets-492_chain-agnostic-asset-list

655c9b1

fix: Update circular deps

b298110

Merge branch 'main' into refactor/mmassets-492_chain-agnostic-asset-list

75c4e28

chore: Reorganize types

2c19b46

Merge branch 'refactor/mmassets-492_chain-agnostic-asset-list' of git…

b4c45ee

…hub.com:MetaMask/metamask-extension into refactor/mmassets-492_chain-agnostic-asset-list

fix: Update circular deps

b375512

gambinish requested review from a team, HowardBraham and dbrans as code owners February 6, 2025 22:31

gambinish requested a review from darkwing February 6, 2025 22:42

gambinish and others added 2 commits February 6, 2025 14:48

fix: Cleanup

1885f1e

Merge branch 'main' into refactor/mmassets-492_chain-agnostic-asset-list

78b2643

micaelae approved these changes Feb 7, 2025

View reviewed changes

HowardBraham approved these changes Feb 7, 2025

View reviewed changes

Prithpal-Sooriya reviewed Feb 7, 2025

View reviewed changes

ui/components/app/assets/asset-list/asset-list-funding-modals/asset-list-funding-modals.tsx Outdated Show resolved Hide resolved

Prithpal-Sooriya reviewed Feb 7, 2025

View reviewed changes

ui/components/app/assets/hooks/useAssetListTokenDetection.tsx Show resolved Hide resolved

Prithpal-Sooriya reviewed Feb 7, 2025

View reviewed changes

ui/components/app/assets/token-list/token-list.tsx Show resolved Hide resolved

Prithpal-Sooriya reviewed Feb 7, 2025

View reviewed changes

ui/selectors/selectors.js Show resolved Hide resolved

Prithpal-Sooriya approved these changes Feb 7, 2025

View reviewed changes

salimtb approved these changes Feb 7, 2025

View reviewed changes

gambinish requested a review from davidmurdoch February 7, 2025 16:39

vinnyhoward approved these changes Feb 7, 2025

View reviewed changes

davidmurdoch approved these changes Feb 7, 2025

View reviewed changes

Merge branch 'main' into refactor/mmassets-492_chain-agnostic-asset-list

3df8360

gambinish enabled auto-merge February 7, 2025 18:38

gambinish added this pull request to the merge queue Feb 7, 2025

Merged via the queue into main with commit 43efd3f Feb 7, 2025
111 checks passed

gambinish deleted the refactor/mmassets-492_chain-agnostic-asset-list branch February 7, 2025 19:22

github-actions bot locked and limited conversation to collaborators Feb 7, 2025

metamaskbot added the release-12.13.0 Issue or pull request that will be included in release 12.13.0 label Feb 7, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: `asset-list` and `token-list` #29886

refactor: `asset-list` and `token-list` #29886

gambinish commented Jan 23, 2025 •

edited

Loading

github-actions bot commented Jan 23, 2025

metamaskbot commented Feb 5, 2025

metamaskbot commented Feb 5, 2025

metamaskbot commented Feb 6, 2025

vinnyhoward left a comment

davidmurdoch left a comment

metamaskbot commented Feb 7, 2025

metamaskbot commented Feb 7, 2025

refactor: asset-list and token-list #29886

refactor: asset-list and token-list #29886

Conversation

gambinish commented Jan 23, 2025 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jan 23, 2025

metamaskbot commented Feb 5, 2025

metamaskbot commented Feb 5, 2025

metamaskbot commented Feb 6, 2025

vinnyhoward left a comment

Choose a reason for hiding this comment

davidmurdoch left a comment

Choose a reason for hiding this comment

metamaskbot commented Feb 7, 2025

metamaskbot commented Feb 7, 2025

refactor: `asset-list` and `token-list` #29886

refactor: `asset-list` and `token-list` #29886

gambinish commented Jan 23, 2025 •

edited

Loading