feat: Sort/Import Tokens in Extension

[gambinish]

Description

This PR adds Token sorting to the Asset List page, and also moves Token importing to the top of the Token List. A few of the main changes introduced:

1. Include NativeToken in TokenList component to be included in sorting logic, and treated (as far as sorting is concerned) as any other token in the list
2. Intoduce a tokenSortConfig into state that keeps track of the sort order, the key being sorted by, and the direction of the sort order. Also includes an action to update this state.
3. Introduce a useEffect that subscribes to tokenSortConfig as well as a few other application state variables to update and sort tokenList when appropriate.
4. Clean up asset-list component, and move some of it's relevant code into the useAccountTotalFiatBalance

Acceptance Criteria:

1. Tokens should be sorted by default by declining balance
2. Sort controls should sort tokens alphabetically, and by decreasing fiat token balance
3. Sort order should persist through refresh
4. Sort order should persist after app is closed and reopened
5. When a token gets imported, it should be included in the sort list, in the correct order in the list

A couple of disclaimers. There are still (at least) two bugs that I discovered that were not caught by tests:

1. When toggling preferred currency setting, Native Token sorted incorrectly by decreasing fiat balance ✅ fixed
2. When switching between accounts, token list does not update ✅ fixed

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MMASSETS-356

Manual testing steps

1. Go to AssetList page, and click dropdown and select option to sort by
2. Tokens should sort, and remain sorted through refresh and application close/open (it is in state)
3. Importing tokens should import them into the sort order

Screenshots/Recordings

Screen.Recording.2024-09-16.at.7.57.32.PM.mov

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.

[metamaskbot]

Builds ready [e7a879e]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2543 ± 485 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	901	4470	2397	1033	496
		domContentLoaded	1433	4386	2512	1013	486
		load	1475	4397	2543	1011	485
		domInteractive	12	382	81	80	38

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

• background: 1.38 KiB (0.03%)
• ui: 17.01 KiB (0.22%)
• common: 571 Bytes (0.01%)

[metamaskbot]

Builds ready [f4ef0da]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2007 ± 107 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1709	2441	2010	233	112
		domContentLoaded	1699	2313	1973	208	100
		load	1708	2418	2007	224	107
		domInteractive	15	261	51	58	28

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

• background: 1.38 KiB (0.03%)
• ui: 17.01 KiB (0.22%)
• common: 571 Bytes (0.01%)

[metamaskbot]

Builds ready [0cd3e25]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1840 ± 89 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	297	2465	1703	466	224
		domContentLoaded	1604	2391	1803	169	81
		load	1615	2463	1840	185	89
		domInteractive	26	86	47	20	9

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

• background: 1.38 KiB (0.03%)
• ui: 17.01 KiB (0.22%)
• common: 571 Bytes (0.01%)

[sonarcloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
85.7% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[metamaskbot]

Builds ready [c8467f6]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1934 ± 79 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	267	2292	1771	510	245
		domContentLoaded	1627	2245	1907	157	75
		load	1661	2280	1934	164	79
		domInteractive	29	101	56	19	9

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

• background: 1.38 KiB (0.03%)
• ui: 17.01 KiB (0.22%)
• common: 571 Bytes (0.01%)