feat: improve xchain swaps slippage settings with decimals and warnings

[ghgoodreau]

Description

The slippage settings for xchain transactions was not allowing users to input a decimal (i.e. 0.5%), only whole numbers (0, 1, so on...). It also did not display a warning for low slippage settings. This addresses both by allowing the user to input decimal numbers, and displaying a warning when the custom slippage is set to <0.5% in the settings modal.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MMS-1830

Manual testing steps

1. Go to the xchain swaps transaction preparation page.
2. Edit slippage settings.
3. Notice decimals are now allowed, and a warning is displayed with low slippage.

Screenshots/Recordings

Before

After

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 [25483db]

• 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1627 ± 64 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	245	2052	1571	332	159
		domContentLoaded	1380	2038	1598	131	63
		load	1389	2047	1627	132	64
		domInteractive	24	94	38	21	10
		backgroundConnect	8	76	29	22	11
		firstReactRender	15	70	40	23	11
		getState	5	90	20	21	10
		initialActions	0	1	0	0	0
		loadScripts	1004	1640	1197	127	61
		setupStore	6	52	12	13	6
		uiStartup	1610	2276	1840	157	76

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 291 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [a557648]

• 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1724 ± 46 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	332	1933	1650	317	152
		domContentLoaded	1543	1902	1704	98	47
		load	1609	1936	1724	96	46
		domInteractive	26	319	59	65	31
		backgroundConnect	8	71	22	15	7
		firstReactRender	16	76	34	22	10
		getState	6	55	21	19	9
		initialActions	0	1	0	0	0
		loadScripts	1085	1445	1266	84	40
		setupStore	6	62	17	18	8
		uiStartup	1845	2193	1968	111	53

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 291 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[infiniteflower]

Worked for decimal separator as a period.

Does this work for languages where the decimal separator is a comma?

EDIT: nvm, seems like MM keeps commas for tokens like ETH, and percentage values

EDIT2: eh sometimes ETH is comma separated, sometimes not

[metamaskbot]

Builds ready [3b07d96]

• 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1763 ± 74 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	727	2057	1706	262	126
		domContentLoaded	1518	1989	1726	136	65
		load	1523	2054	1763	153	74
		domInteractive	22	121	47	30	15
		backgroundConnect	9	119	40	29	14
		firstReactRender	16	72	27	16	8
		getState	4	85	25	24	11
		initialActions	0	1	0	0	0
		loadScripts	1076	1575	1291	130	63
		setupStore	6	58	18	19	9
		uiStartup	1729	2400	2020	177	85

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

• background: 43 Bytes (0.00%)
• ui: 359 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [d6d1448]

• 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1995 ± 95 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	238	2464	1745	627	301
		domContentLoaded	1697	2428	1972	189	91
		load	1729	2466	1995	197	95
		domInteractive	23	90	47	19	9
		backgroundConnect	10	63	27	16	7
		firstReactRender	18	82	43	21	10
		getState	6	69	33	23	11
		initialActions	0	1	0	0	0
		loadScripts	1259	1867	1487	156	75
		setupStore	7	56	14	12	6
		uiStartup	1917	2787	2292	217	104

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 359 Bytes (0.00%)
• common: 0 Bytes (0.00%)