feat: Add `AddressInput` Snaps component #30579

hmalik88 · 2025-02-26T14:23:37Z

Description

Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions:

What is the reason for the change? A new Snaps component, AddressInput, was added.
What is the improvement/solution? This component allows a user to input an address and have the component match against internal accounts to render a jazzicon & display name along with the address.

Related issues

Fixes:

Manual testing steps

Build the extension from this branch
Navigate to the test-snaps site
Trigger the custom dialog from the send flow example snap.
Enter an address into the address input field and observe the results.

Screenshots/Recordings

After

Screen.Recording.2025-02-26.at.3.33.10.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 · 2025-02-26T14:23:48Z

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 · 2025-02-26T15:58:55Z

Builds ready [7c32ed8]

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

Page Load Metrics (1897 ± 105 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1547	2401	1912	225	108
		domContentLoaded	1539	2383	1868	214	103
		load	1545	2439	1897	218	105
		domInteractive	24	133	45	30	14
		backgroundConnect	10	100	37	26	12
		firstReactRender	15	94	33	22	11
		getState	5	61	23	20	10
		initialActions	0	1	0	0	0
		loadScripts	1147	1781	1408	159	76
		setupStore	9	70	29	23	11
		uiStartup	1751	2795	2197	265	127

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

background: 0 Bytes (0.00%)
ui: 5.95 KiB (0.08%)
common: 277 Bytes (0.00%)

metamaskbot · 2025-02-26T18:03:18Z

Builds ready [ed10499]

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

Page Load Metrics (1525 ± 53 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1329	1750	1522	108	52
		domContentLoaded	1321	1718	1500	100	48
		load	1330	1765	1525	111	53
		domInteractive	23	56	28	8	4
		backgroundConnect	9	103	29	24	12
		firstReactRender	13	63	25	18	9
		getState	5	65	18	19	9
		initialActions	0	1	0	0	0
		loadScripts	950	1266	1111	78	38
		setupStore	7	41	10	7	4
		uiStartup	1520	2116	1751	148	71

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

background: 0 Bytes (0.00%)
ui: 6 KiB (0.08%)
common: 253 Bytes (0.00%)

metamaskbot · 2025-02-26T19:33:22Z

Builds ready [24717e1]

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

Page Load Metrics (1756 ± 63 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1585	2186	1756	130	62
		domContentLoaded	1539	2166	1715	130	63
		load	1577	2188	1756	131	63
		domInteractive	25	133	42	25	12
		backgroundConnect	11	150	45	31	15
		firstReactRender	14	74	35	23	11
		getState	5	55	13	12	6
		initialActions	0	0	0	0	0
		loadScripts	1136	1712	1297	117	56
		setupStore	7	56	12	10	5
		uiStartup	1807	2494	2011	157	75

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

background: 0 Bytes (0.00%)
ui: 6.09 KiB (0.08%)
common: 233 Bytes (0.00%)

ui/components/app/snaps/snap-ui-address-input/snap-ui-address-input.tsx

…nsion into fb/snaps-bump-v96

metamaskbot · 2025-03-25T17:23:28Z

Builds ready [a20a91c]

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, 8
- 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 (3847 ± 1985 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1606	19905	3624	4102	1970
		domContentLoaded	1492	19106	3364	3990	1916
		load	1629	20176	3847	4135	1985
		domInteractive	25	274	57	60	29
		backgroundConnect	109	1383	532	312	150
		firstReactRender	26	371	119	71	34
		getState	28	557	281	160	77
		initialActions	0	1	0	0	0
		loadScripts	1109	17568	2581	3671	1763
		setupStore	14	385	174	112	54
		uiStartup	2063	22435	6706	4378	2102

metamaskbot · 2025-03-25T22:21:23Z

Builds ready [cea4122]

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, 8
- 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 (2109 ± 166 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	370	2856	1971	487	234
		domContentLoaded	1584	2502	1929	260	125
		load	1661	2917	2109	346	166
		domInteractive	26	112	41	19	9
		backgroundConnect	18	431	186	124	59
		firstReactRender	19	155	68	38	18
		getState	10	149	71	39	19
		initialActions	0	1	0	0	0
		loadScripts	1170	1905	1414	177	85
		setupStore	12	87	36	20	10
		uiStartup	2139	5208	3100	895	430

metamaskbot · 2025-03-25T23:43:53Z

Builds ready [078d766]

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, 8
- 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 (3777 ± 2413 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	300	20622	3558	5000	2401
		domContentLoaded	1337	20519	3325	4939	2372
		load	1389	20668	3777	5025	2413
		domInteractive	24	739	95	168	81
		backgroundConnect	11	4377	460	934	448
		firstReactRender	16	232	68	56	27
		getState	4	2084	221	450	216
		initialActions	0	1	0	0	0
		loadScripts	973	20104	2749	4802	2306
		setupStore	8	1291	141	282	135
		uiStartup	1538	21261	5248	5540	2660

ui/components/app/snaps/snap-ui-address-input/snap-ui-address-input.tsx

metamaskbot · 2025-03-26T12:30:16Z

Builds ready [44c1765]

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, 8
- 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 (2848 ± 460 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1720	4356	2654	857	412
		domContentLoaded	1627	3914	2341	734	353
		load	1716	4697	2848	959	460
		domInteractive	29	229	74	62	30
		backgroundConnect	70	1927	507	395	190
		firstReactRender	23	207	113	47	23
		getState	25	626	211	156	75
		initialActions	0	1	0	0	0
		loadScripts	1133	3144	1609	482	232
		setupStore	15	313	129	97	47
		uiStartup	1900	20642	6284	4272	2051

…nsion into fb/snaps-bump-v96

hmalik88 added 13 commits February 19, 2025 11:23

add address input component

7a31820

Merge branch 'main' into hm/add-address-input

6f2093e

add address input component

b6fedff

update selectors

2d82f3a

add matched address logic

77b1a9d

remove unnecessary scss file

1fd5273

lint fix

191e848

add xl size to text field

e4619d9

update props

782491c

finish address input component

5dc327d

add component to safe component list

a8c4806

add address input mapper

19142aa

Merge branch 'main' into hm/add-address-input

edc7639

metamaskbot added the team-snaps-platform Snaps Platform team label Feb 26, 2025

hmalik88 added 7 commits February 26, 2025 09:30

add missing prop

59fc0a5

add comment

360651e

parse state value to account id

fda818a

refactor

682c0eb

Merge branch 'main' into hm/add-address-input

8ffa45b

Add missing type

f85d6a1

Merge branch 'main' into hm/add-address-input

7c32ed8

fix selector

ed10499

hmalik88 added 2 commits February 26, 2025 13:10

fix styling

cc322af

fix state update

24717e1

hmalik88 added 2 commits February 26, 2025 15:26

add address input tests

4435589

Merge branch 'main' into hm/add-address-input

9f9a543

FrederikBolding reviewed Mar 25, 2025

View reviewed changes

ui/components/app/snaps/snap-ui-address-input/snap-ui-address-input.tsx Outdated Show resolved Hide resolved

FrederikBolding reviewed Mar 25, 2025

View reviewed changes

ui/components/app/snaps/snap-ui-address-input/snap-ui-address-input.tsx Show resolved Hide resolved

hmalik88 added 2 commits March 25, 2025 12:41

Merge branch 'fb/snaps-bump-v96' of github.com:MetaMask/metamask-exte…

03d2ade

…nsion into fb/snaps-bump-v96

Merge branch 'fb/snaps-bump-v96' into hm/add-address-input

a20a91c

pass formatted value to handleInputChange

cea4122

hmalik88 added 2 commits March 25, 2025 18:43

fix quirks

2b757fd

update snapshots

078d766

lint fix

2bc45a6

FrederikBolding reviewed Mar 26, 2025

View reviewed changes

ui/components/app/snaps/snap-ui-address-input/snap-ui-address-input.tsx Outdated Show resolved Hide resolved

hmalik88 added 3 commits March 26, 2025 06:47

apply code review

337ab06

fixes

6a45125

update tests

c42def4

FrederikBolding reviewed Mar 26, 2025

View reviewed changes

ui/components/app/snaps/snap-ui-address-input/snap-ui-address-input.tsx Outdated Show resolved Hide resolved

refactor

44c1765

FrederikBolding force-pushed the fb/snaps-bump-v96 branch from 1ad201f to 3466976 Compare March 26, 2025 13:34

hmalik88 and others added 7 commits March 26, 2025 12:41

update logic to account for displayAvatar prop

08ed74e

Merge branch 'fb/snaps-bump-v96' of github.com:MetaMask/metamask-exte…

ebe681e

…nsion into fb/snaps-bump-v96

Merge branch 'fb/snaps-bump-v96' into hm/add-address-input

d7e4f5f

add extra condition to ensure matched info doesn't display on clear

209bfdb

Merge branch 'fb/snaps-bump-v96' into hm/add-address-input

91d683b

Fix crash with empty input

21b560e

Tweak displayAvatar behavior

20f22fb

FrederikBolding approved these changes Mar 27, 2025

View reviewed changes

FrederikBolding merged commit 4d227e6 into fb/snaps-bump-v96 Mar 27, 2025
56 of 91 checks passed

FrederikBolding deleted the hm/add-address-input branch March 27, 2025 11:07

github-actions bot locked and limited conversation to collaborators Mar 27, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add `AddressInput` Snaps component #30579

feat: Add `AddressInput` Snaps component #30579

hmalik88 commented Feb 26, 2025 •

edited

Loading

github-actions bot commented Feb 26, 2025

metamaskbot commented Feb 26, 2025

metamaskbot commented Feb 26, 2025

metamaskbot commented Feb 26, 2025

metamaskbot commented Mar 25, 2025

metamaskbot commented Mar 25, 2025

metamaskbot commented Mar 25, 2025

metamaskbot commented Mar 26, 2025

feat: Add AddressInput Snaps component #30579

feat: Add AddressInput Snaps component #30579

Conversation

hmalik88 commented Feb 26, 2025 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Feb 26, 2025

metamaskbot commented Feb 26, 2025

metamaskbot commented Feb 26, 2025

metamaskbot commented Feb 26, 2025

metamaskbot commented Mar 25, 2025

metamaskbot commented Mar 25, 2025

metamaskbot commented Mar 25, 2025

metamaskbot commented Mar 26, 2025

feat: Add `AddressInput` Snaps component #30579

feat: Add `AddressInput` Snaps component #30579

hmalik88 commented Feb 26, 2025 •

edited

Loading