fix: PortfolioView swap native token bug

[gambinish]

Description

When PORTFOLIO_VIEW feature flag is enabled, when swapping a native token from a different chain than the globally selected chain, the incorrect native token would be prepoulated in the fromToken in the swap UI.

For instance, if user is on Ethereum mainnet, navigated to POL, then attempted to swap, the globally selected network would change from Ethereum mainnet to Polygon mainnet (expected), but the swaps fromToken would still be POL (unexpected)

Changes in this PR fixes this, and prepoulates fromToken with the native token from the correct chain.

Related issues

Fixes: #28534

Manual testing steps

1. PORTFOLIO_VIEW=1 yarn webpack --watch
2. Import wallet with at least two networks added
3. When "All Networks" is toggled, attempt to swap a native token from another network. Ensure that the token prepopulated in the swap UI is the native token from the correct chain
4. Ensure swap completes successfully.

Screenshots/Recordings

Screen.Recording.2024-11-21.at.2.41.16.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.

[github-actions]

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.

[metamaskbot]

Builds ready [77c0ad0]

• 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, 7
  • common: 0, 1, 10, 11, 12, 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 (1855 ± 68 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	328	2269	1790	367	176
		domContentLoaded	1656	2248	1823	140	67
		load	1666	2271	1855	142	68
		domInteractive	22	77	40	17	8
		backgroundConnect	9	93	33	24	11
		firstReactRender	48	301	131	66	32
		getState	5	86	21	26	12
		initialActions	0	1	0	0	0
		loadScripts	1187	1700	1330	121	58
		setupStore	6	71	19	22	10
		uiStartup	1876	2575	2151	229	110

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

• background: 0 Bytes (0.00%)
• ui: 23 Bytes (0.00%)
• common: 32 Bytes (0.00%)

[metamaskbot]

Builds ready [5da7495]

• 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, 7
  • common: 0, 1, 10, 11, 12, 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 (2058 ± 80 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1784	2325	2061	166	80
		domContentLoaded	1743	2256	2010	156	75
		load	1784	2322	2058	166	80
		domInteractive	27	91	50	18	9
		backgroundConnect	9	88	46	27	13
		firstReactRender	72	154	109	22	11
		getState	4	68	28	20	10
		initialActions	0	1	0	0	0
		loadScripts	1250	1720	1494	143	69
		setupStore	6	60	13	15	7
		uiStartup	1994	2544	2271	178	86

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

• background: 0 Bytes (0.00%)
• ui: 23 Bytes (0.00%)
• common: 32 Bytes (0.00%)

[Prithpal-Sooriya]

Approved as a second reviewer. Can someone with more domain knowledge double check it?

[metamaskbot]

Builds ready [591cc4b]

• 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, 7
  • common: 0, 1, 10, 11, 12, 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 (1625 ± 51 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1471	1968	1635	106	51
		domContentLoaded	1424	1891	1606	98	47
		load	1468	1972	1625	107	51
		domInteractive	21	74	37	17	8
		backgroundConnect	8	81	20	17	8
		firstReactRender	16	89	47	27	13
		getState	4	41	8	8	4
		initialActions	0	1	0	0	0
		loadScripts	1047	1430	1189	82	39
		setupStore	6	79	21	25	12
		uiStartup	1681	2299	1926	174	83

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

• background: 0 Bytes (0.00%)
• ui: 22 Bytes (0.00%)
• common: 32 Bytes (0.00%)