fix: Address design review for NFT token send

[pedronfigueiredo]

Description

A few changes were made, namely:

• Leverage NftItem component to display a square thumbnail of the Nft image
• Update spending cap indicators to abbreviate long decimal numbers and show complete numbers on a tooltip
• Center align token name
• Add # to the token id
• Change background color for native token fallback thumbnail

Related issues

Fixes: #28370

Manual testing steps

1. Go to this page...

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 [b246755]

• 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 (2089 ± 81 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1842	2483	2091	170	82
		domContentLoaded	1815	2421	2053	162	78
		load	1842	2488	2089	168	81
		domInteractive	15	238	61	47	23
		backgroundConnect	10	69	37	21	10
		firstReactRender	77	156	107	15	7
		getState	5	62	15	15	7
		initialActions	0	1	0	0	0
		loadScripts	1285	1817	1502	135	65
		setupStore	6	57	15	17	8
		uiStartup	2051	2737	2309	171	82

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

• background: 0 Bytes (0.00%)
• ui: 1.28 KiB (0.02%)
• common: 199 Bytes (0.00%)

[metamaskbot]

Builds ready [74ff74f]

• 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 (2083 ± 93 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	361	2508	1985	415	199
		domContentLoaded	1763	2386	2049	180	87
		load	1774	2529	2083	194	93
		domInteractive	31	88	50	16	8
		backgroundConnect	8	141	38	30	14
		firstReactRender	51	117	77	17	8
		getState	57	169	101	22	11
		initialActions	0	1	0	0	0
		loadScripts	1289	1824	1543	152	73
		setupStore	7	18	9	3	2
		uiStartup	2010	3122	2398	249	119

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

• background: 0 Bytes (0.00%)
• ui: 1.37 KiB (0.02%)
• common: 199 Bytes (0.00%)

[vinistevam]

should we uncomment this line and remove line 17?

[pedronfigueiredo]

Good catch!

[metamaskbot]

Builds ready [f1bb54f]

• 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 (2128 ± 88 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	262	2507	2037	446	214
		domContentLoaded	1807	2409	2089	168	81
		load	1813	2523	2128	183	88
		domInteractive	30	66	44	11	5
		backgroundConnect	8	159	40	36	17
		firstReactRender	52	318	124	79	38
		getState	50	272	120	56	27
		initialActions	0	1	0	0	0
		loadScripts	1330	1823	1577	138	66
		setupStore	6	38	10	7	3
		uiStartup	2132	3109	2552	287	138

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

• background: 0 Bytes (0.00%)
• ui: 1.39 KiB (0.02%)
• common: 199 Bytes (0.00%)