feat: Hook in Portfolio Entry Points #27607

julesat22 · 2024-10-03T17:45:52Z

Description

What is the reason for the change?
Portfolio has requested to add in some entry points into the extension, so users can easily navigate to the Portfolio to view/ manage their spending caps.
What is the improvement/solution?
This adds value for the users who would like to view/ manage their spending caps as well as their portfolio.

Manual testing steps

Connect an account
Go to this the assets page in the extension
Click on an asset
Under "Token details", there should be a category for all native and non-native token types for "Spending caps"
Next to Spending caps, check the there is a link that routes the user to the portfolio with the "spendingCaps" tab and the user's account address passed as query params
Check that the link redirects to Portfolio

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 · 2024-10-03T17:46:06Z

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.

…to MMPD-1363

metamaskbot · 2024-10-04T14:55:48Z

Builds ready [4810377]

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 (1725 ± 62 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	318	1965	1666	334	160
		domContentLoaded	1521	1926	1704	124	59
		load	1529	1979	1725	128	62
		domInteractive	15	97	41	20	9

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

background: 0 Bytes (0.00%)
ui: 1.88 KiB (0.03%)
common: 133 Bytes (0.00%)

jclancy93 · 2024-10-07T10:14:14Z

The gap when the token list section is shown looks like it's less than other sections. The way folks have added padding/margins in this section looks inconsistent but adding a 6px margin top seems to make things look less cramped

ui/components/multichain/global-menu/global-menu.js

metamaskbot · 2024-10-08T04:08:22Z

Builds ready [72392f5]

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 (1861 ± 117 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1536	2497	1865	253	122
		domContentLoaded	1528	2427	1828	226	109
		load	1536	2496	1861	243	117
		domInteractive	20	104	50	23	11

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

background: 0 Bytes (0.00%)
ui: 1.88 KiB (0.02%)
common: 133 Bytes (0.00%)

…to MMPD-1363

julesat22 · 2024-10-15T16:51:34Z

The gap when the token list section is shown looks like it's less than other sections. The way folks have added padding/margins in this section looks inconsistent but adding a 6px margin top seems to make things look less cramped

Great catch, updated and a screenshot has been added to the overview that reflects the spacing changes

…to MMPD-1363

metamaskbot · 2024-11-14T18:20:43Z

Builds ready [adac4da]

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 (2046 ± 129 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1762	3086	2050	268	128
		domContentLoaded	1757	3070	2018	266	128
		load	1762	3089	2046	269	129
		domInteractive	17	99	51	23	11
		backgroundConnect	8	97	30	25	12
		firstReactRender	97	299	133	47	22
		getState	4	55	15	13	6
		initialActions	0	1	0	0	0
		loadScripts	1282	2093	1468	179	86
		setupStore	6	87	17	21	10
		uiStartup	1990	3316	2294	285	137

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

background: 0 Bytes (0.00%)
ui: 1.27 KiB (0.02%)
common: 85 Bytes (0.00%)

metamaskbot · 2024-11-14T20:16:46Z

Builds ready [a498e91]

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 (2364 ± 164 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	419	2945	2179	677	325
		domContentLoaded	1868	2882	2336	348	167
		load	1889	2921	2364	341	164
		domInteractive	36	169	84	32	16
		backgroundConnect	11	86	31	21	10
		firstReactRender	85	301	131	49	23
		getState	6	65	25	20	10
		initialActions	0	1	0	0	0
		loadScripts	1345	2170	1739	278	133
		setupStore	7	66	19	18	8
		uiStartup	2068	3227	2647	399	192

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

background: 0 Bytes (0.00%)
ui: 1.27 KiB (0.02%)
common: 85 Bytes (0.00%)

metamaskbot · 2024-11-14T21:30:38Z

Builds ready [05d9935]

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 (1909 ± 219 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	897	2059	1758	216	104
		domContentLoaded	1643	3758	1873	440	211
		load	1674	3858	1909	455	219
		domInteractive	17	148	60	40	19
		backgroundConnect	9	127	33	29	14
		firstReactRender	53	296	133	67	32
		getState	4	82	27	25	12
		initialActions	0	1	0	0	0
		loadScripts	1174	2977	1386	371	178
		setupStore	6	51	10	11	5
		uiStartup	1843	4310	2191	519	249

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

background: 0 Bytes (0.00%)
ui: 1.27 KiB (0.02%)
common: 85 Bytes (0.00%)

metamaskbot · 2024-11-19T16:29:00Z

Builds ready [f781e65]

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 (2197 ± 116 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1882	2888	2195	244	117
		domContentLoaded	1860	2805	2144	234	112
		load	1886	2867	2197	241	116
		domInteractive	29	172	58	37	18
		backgroundConnect	10	88	52	26	12
		firstReactRender	53	220	82	34	17
		getState	48	210	91	33	16
		initialActions	0	1	0	0	0
		loadScripts	1376	2155	1610	198	95
		setupStore	6	79	12	16	7
		uiStartup	2170	3238	2524	296	142

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

background: 0 Bytes (0.00%)
ui: 1.27 KiB (0.02%)
common: 85 Bytes (0.00%)

…stem

georgewrmarshall

LGTM! 🚀 Really nice work! I made one small adjustment to use the ButtonLink component, which I missed in the previous review. We can use it for both internal and external links—hope that’s okay!

Checked manual testing steps and linking to portfolio locally ✅
Checked semantic HTML ✅
Checked for design system consistency ✅

georgewrmarshall · 2024-11-19T16:48:01Z

ui/pages/asset/components/asset-page.tsx

+                  <ButtonLink
+                    className="asset-page__spending-caps mm-text--body-md-medium"
+                    href={portfolioSpendingCapsUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {t('editInPortfolio')}
+                  </ButtonLink>,


Updating to ButtonLink here to adhere to the design system which has a slightly different border for the link interaction.

Before

before.mov

After

after.mov

Still renders semantic HTML as the as is handled by the href prop

metamaskbot · 2024-11-19T17:20:39Z

Builds ready [0681cc4]

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 (2112 ± 84 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	242	2435	2020	447	214
		domContentLoaded	1756	2345	2072	165	79
		load	1774	2439	2112	175	84
		domInteractive	19	157	59	33	16
		backgroundConnect	13	94	37	27	13
		firstReactRender	62	114	79	15	7
		getState	48	115	92	16	8
		initialActions	0	1	0	0	0
		loadScripts	1269	1807	1549	149	72
		setupStore	6	51	10	10	5
		uiStartup	2048	2903	2412	208	100

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

background: 0 Bytes (0.00%)
ui: 1.23 KiB (0.02%)
common: 85 Bytes (0.00%)

Julia Collins added 3 commits October 3, 2024 09:47

feat: hook in portfolio spending caps touch points

a8a8a86

chore: fix messages

e741d11

fix: failing unit tests

6a0809a

julesat22 requested review from a team as code owners October 3, 2024 17:45

julesat22 added the team-portfolio label Oct 3, 2024

julesat22 changed the title ~~Hook in Portfolio "Spending Caps" Entry Points~~ ferat: Hook in Portfolio "Spending Caps" Entry Points Oct 3, 2024

Merge branch 'develop' into MMPD-1363

b7bf815

julesat22 changed the title ~~ferat: Hook in Portfolio "Spending Caps" Entry Points~~ feat: Hook in Portfolio "Spending Caps" Entry Points Oct 3, 2024

Julia Collins and others added 4 commits October 3, 2024 11:07

chore: move fn to inside click event

15d3fae

Merge branch 'MMPD-1363' of github.com:MetaMask/metamask-extension in…

5a8d22a

…to MMPD-1363

chore: remove unused import

4a41262

Merge branch 'develop' into MMPD-1363

4810377

Merge branch 'develop' into MMPD-1363

1d9fc12

legobeat reviewed Oct 8, 2024

View reviewed changes

ui/components/multichain/global-menu/global-menu.js Outdated Show resolved Hide resolved

Merge branch 'develop' into MMPD-1363

72392f5

Julia Collins added 2 commits October 15, 2024 09:49

chore: fix spacing

7c81878

Merge branch 'MMPD-1363' of github.com:MetaMask/metamask-extension in…

58054b9

…to MMPD-1363

chore: add unit test to on click event

de2f157

julesat22 requested a review from legobeat October 15, 2024 17:04

julesat22 and others added 5 commits October 15, 2024 10:08

Merge branch 'develop' into MMPD-1363

abeeaf8

chore: update snapshot

60544fb

Merge branch 'MMPD-1363' of github.com:MetaMask/metamask-extension in…

97293eb

…to MMPD-1363

fix: import order

85ae859

Merge branch 'develop' into MMPD-1363

534d945

ziad-saab added 4 commits November 13, 2024 12:02

Merge branch 'develop' into MMPD-1363

91ec2ef

Merge branch 'develop' into MMPD-1363

9efca78

Merge branch 'develop' into MMPD-1363

286d1bc

pr feedback

adac4da

ziad-saab dismissed GuiBibeau’s stale review via adac4da November 14, 2024 17:46

ziad-saab requested review from georgewrmarshall, darkwing and GuiBibeau November 14, 2024 17:47

update AssetPage snapshots

a498e91

ziad-saab force-pushed the MMPD-1363 branch from f7e965a to a498e91 Compare November 14, 2024 19:39

Merge branch 'develop' into MMPD-1363

05d9935

Merge branch 'develop' into MMPD-1363

f781e65

georgewrmarshall added 2 commits November 19, 2024 08:43

chore: updating text component to button link to align with design sy…

36f216b

…stem

chore: updating snapshots

0681cc4

georgewrmarshall approved these changes Nov 19, 2024

View reviewed changes

georgewrmarshall requested a review from ziad-saab November 19, 2024 16:50

GuiBibeau approved these changes Nov 19, 2024

View reviewed changes

ziad-saab added this pull request to the merge queue Nov 19, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Nov 19, 2024

GuiBibeau added this pull request to the merge queue Nov 21, 2024

Merged via the queue into develop with commit 02d52b4 Nov 21, 2024
77 checks passed

GuiBibeau deleted the MMPD-1363 branch November 21, 2024 17:00

github-actions bot locked and limited conversation to collaborators Nov 21, 2024

metamaskbot added the release-12.9.0 Issue or pull request that will be included in release 12.9.0 label Nov 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Hook in Portfolio Entry Points #27607

feat: Hook in Portfolio Entry Points #27607

julesat22 commented Oct 3, 2024 •

edited by ziad-saab

Loading

github-actions bot commented Oct 3, 2024

metamaskbot commented Oct 4, 2024

jclancy93 commented Oct 7, 2024

metamaskbot commented Oct 8, 2024

julesat22 commented Oct 15, 2024 •

edited

Loading

metamaskbot commented Nov 14, 2024

metamaskbot commented Nov 14, 2024

metamaskbot commented Nov 14, 2024

metamaskbot commented Nov 19, 2024

georgewrmarshall left a comment •

edited

Loading

georgewrmarshall Nov 19, 2024

metamaskbot commented Nov 19, 2024

feat: Hook in Portfolio Entry Points #27607

feat: Hook in Portfolio Entry Points #27607

Conversation

julesat22 commented Oct 3, 2024 • edited by ziad-saab Loading

Description

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Oct 3, 2024

metamaskbot commented Oct 4, 2024

jclancy93 commented Oct 7, 2024

metamaskbot commented Oct 8, 2024

julesat22 commented Oct 15, 2024 • edited Loading

metamaskbot commented Nov 14, 2024

metamaskbot commented Nov 14, 2024

metamaskbot commented Nov 14, 2024

metamaskbot commented Nov 19, 2024

georgewrmarshall left a comment • edited Loading

Choose a reason for hiding this comment

georgewrmarshall Nov 19, 2024

Choose a reason for hiding this comment

Before

After

metamaskbot commented Nov 19, 2024

julesat22 commented Oct 3, 2024 •

edited by ziad-saab

Loading

julesat22 commented Oct 15, 2024 •

edited

Loading

georgewrmarshall left a comment •

edited

Loading