Skip to content

Commit 02d52b4

Browse files
julesat22Julia Collinslegobeatziad-saabgeorgewrmarshall
authored
feat: Hook in Portfolio Entry Points (#27607)
## **Description** 1. 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. 2. 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. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27607?quickstart=1) ## **Manual testing steps** 1. Connect an account 2. Go to this the assets page in the extension 3. Click on an asset 4. Under "Token details", there should be a category for all native and non-native token types for "Spending caps" 5. 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 6. Check that the link redirects to Portfolio ## **Screenshots/Recordings** ### **Before** <img width="359" alt="Screenshot 2024-10-03 at 10 45 22 AM" src="https://github.com/user-attachments/assets/783f8d0f-248f-4729-84cf-f100a7a2cb04"> ### **After** <img width="358" alt="Screenshot 2024-10-03 at 9 37 54 AM" src="https://github.com/user-attachments/assets/7dd2cb6f-3a1a-4245-a71b-e9186775ce87"> <img width="357" alt="Screenshot 2024-10-03 at 9 33 21 AM" src="https://github.com/user-attachments/assets/8b3b487b-0ef8-4a19-9407-95ef973d7002"> <img width="358" alt="Screenshot 2024-10-03 at 9 32 20 AM" src="https://github.com/user-attachments/assets/05618a7b-4d50-4871-a4b7-fbb860dcadf7"> ## **Pre-merge author checklist** - [X] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [X] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [X] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). 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. --------- Co-authored-by: Julia Collins <[email protected]> Co-authored-by: legobeat <[email protected]> Co-authored-by: Ziad Saab <[email protected]> Co-authored-by: georgewrmarshall <[email protected]>
1 parent a1b6ba7 commit 02d52b4

File tree

4 files changed

+237
-90
lines changed

4 files changed

+237
-90
lines changed

‎app/_locales/en/messages.json

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/pages/asset/asset.scss

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "design-system";
1+
@use 'design-system';
22

33
.asset {
44
&__container {
@@ -42,5 +42,19 @@
4242
}
4343
}
4444

45-
.chart-up { stroke: var(--color-success-default); }
46-
.chart-down { stroke: var(--color-error-default); }
45+
.chart-up {
46+
stroke: var(--color-success-default);
47+
}
48+
49+
.chart-down {
50+
stroke: var(--color-error-default);
51+
}
52+
53+
.asset-page__spending-caps {
54+
text-decoration: none;
55+
56+
&:hover {
57+
color: var(--color-primary-alternative);
58+
text-decoration: underline;
59+
}
60+
}

‎ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap

+152-72
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,36 @@ exports[`AssetPage should render a native asset 1`] = `
254254
<div
255255
class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--gap-7 mm-box--flex-direction-column"
256256
>
257+
<div
258+
class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column"
259+
>
260+
<h3
261+
class="mm-box mm-text mm-text--heading-md mm-box--padding-bottom-4 mm-box--color-text-default"
262+
>
263+
Token details
264+
</h3>
265+
<div
266+
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
267+
>
268+
<div
269+
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
270+
>
271+
<p
272+
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
273+
>
274+
Spending caps
275+
</p>
276+
<a
277+
class="mm-box mm-text mm-button-base asset-page__spending-caps mm-text--body-md-medium mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
278+
href="https://portfolio.test/?metamaskEntry=asset_page&metametricsId=&metricsEnabled=false&marketingEnabled=false&accountAddress=0x1&tab=spending-caps"
279+
rel="noopener noreferrer"
280+
target="_blank"
281+
>
282+
Edit in Portfolio
283+
</a>
284+
</div>
285+
</div>
286+
</div>
257287
<div
258288
class="mm-box mm-box--margin-bottom-8"
259289
>
@@ -555,59 +585,84 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
555585
Token details
556586
</h3>
557587
<div
558-
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
588+
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
559589
>
560-
<p
561-
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
590+
<div
591+
class="mm-box"
562592
>
563-
Contract address
564-
</p>
565-
<div>
566593
<div
567-
aria-describedby="tippy-tooltip-9"
568-
class=""
569-
data-original-title="Copy to clipboard"
570-
data-tooltipped=""
571-
style="display: inline;"
572-
tabindex="0"
594+
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
573595
>
574-
<button
575-
class="mm-box mm-text mm-button-base mm-button-base--size-sm multichain-address-copy-button mm-text--body-sm mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-primary-muted mm-box--rounded-pill"
576-
data-testid="address-copy-button-text"
596+
<p
597+
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
577598
>
578-
<span
579-
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
599+
Contract address
600+
</p>
601+
<div>
602+
<div
603+
aria-describedby="tippy-tooltip-9"
604+
class=""
605+
data-original-title="Copy to clipboard"
606+
data-tooltipped=""
607+
style="display: inline;"
608+
tabindex="0"
580609
>
581-
<div
582-
class="mm-box mm-box--display-flex"
610+
<button
611+
class="mm-box mm-text mm-button-base mm-button-base--size-sm multichain-address-copy-button mm-text--body-sm mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-primary-muted mm-box--rounded-pill"
612+
data-testid="address-copy-button-text"
583613
>
584-
0x30937...C4936
585-
</div>
586-
</span>
587-
<span
588-
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
589-
style="mask-image: url('./images/icons/copy.svg');"
590-
/>
591-
</button>
614+
<span
615+
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
616+
>
617+
<div
618+
class="mm-box mm-box--display-flex"
619+
>
620+
0x30937...C4936
621+
</div>
622+
</span>
623+
<span
624+
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
625+
style="mask-image: url('./images/icons/copy.svg');"
626+
/>
627+
</button>
628+
</div>
629+
</div>
630+
</div>
631+
<div
632+
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
633+
>
634+
<div
635+
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
636+
>
637+
<p
638+
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
639+
>
640+
Token decimal
641+
</p>
642+
<p
643+
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
644+
>
645+
18
646+
</p>
647+
</div>
592648
</div>
593649
</div>
594-
</div>
595-
<div
596-
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
597-
>
598650
<div
599651
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
600652
>
601653
<p
602654
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
603655
>
604-
Token decimal
656+
Spending caps
605657
</p>
606-
<p
607-
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
658+
<a
659+
class="mm-box mm-text mm-button-base asset-page__spending-caps mm-text--body-md-medium mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
660+
href="https://portfolio.test/?metamaskEntry=asset_page&metametricsId=&metricsEnabled=false&marketingEnabled=false&accountAddress=0x1&tab=spending-caps"
661+
rel="noopener noreferrer"
662+
target="_blank"
608663
>
609-
18
610-
</p>
664+
Edit in Portfolio
665+
</a>
611666
</div>
612667
</div>
613668
</div>
@@ -1038,59 +1093,84 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
10381093
Token details
10391094
</h3>
10401095
<div
1041-
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
1096+
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
10421097
>
1043-
<p
1044-
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
1098+
<div
1099+
class="mm-box"
10451100
>
1046-
Contract address
1047-
</p>
1048-
<div>
10491101
<div
1050-
aria-describedby="tippy-tooltip-10"
1051-
class=""
1052-
data-original-title="Copy to clipboard"
1053-
data-tooltipped=""
1054-
style="display: inline;"
1055-
tabindex="0"
1102+
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
10561103
>
1057-
<button
1058-
class="mm-box mm-text mm-button-base mm-button-base--size-sm multichain-address-copy-button mm-text--body-sm mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-primary-muted mm-box--rounded-pill"
1059-
data-testid="address-copy-button-text"
1104+
<p
1105+
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
10601106
>
1061-
<span
1062-
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
1107+
Contract address
1108+
</p>
1109+
<div>
1110+
<div
1111+
aria-describedby="tippy-tooltip-10"
1112+
class=""
1113+
data-original-title="Copy to clipboard"
1114+
data-tooltipped=""
1115+
style="display: inline;"
1116+
tabindex="0"
10631117
>
1064-
<div
1065-
class="mm-box mm-box--display-flex"
1118+
<button
1119+
class="mm-box mm-text mm-button-base mm-button-base--size-sm multichain-address-copy-button mm-text--body-sm mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-primary-muted mm-box--rounded-pill"
1120+
data-testid="address-copy-button-text"
10661121
>
1067-
0xe4246...85f55
1068-
</div>
1069-
</span>
1070-
<span
1071-
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
1072-
style="mask-image: url('./images/icons/copy.svg');"
1073-
/>
1074-
</button>
1122+
<span
1123+
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
1124+
>
1125+
<div
1126+
class="mm-box mm-box--display-flex"
1127+
>
1128+
0xe4246...85f55
1129+
</div>
1130+
</span>
1131+
<span
1132+
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
1133+
style="mask-image: url('./images/icons/copy.svg');"
1134+
/>
1135+
</button>
1136+
</div>
1137+
</div>
1138+
</div>
1139+
<div
1140+
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
1141+
>
1142+
<div
1143+
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
1144+
>
1145+
<p
1146+
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
1147+
>
1148+
Token decimal
1149+
</p>
1150+
<p
1151+
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
1152+
>
1153+
18
1154+
</p>
1155+
</div>
10751156
</div>
10761157
</div>
1077-
</div>
1078-
<div
1079-
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
1080-
>
10811158
<div
10821159
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
10831160
>
10841161
<p
10851162
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
10861163
>
1087-
Token decimal
1164+
Spending caps
10881165
</p>
1089-
<p
1090-
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
1166+
<a
1167+
class="mm-box mm-text mm-button-base asset-page__spending-caps mm-text--body-md-medium mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
1168+
href="https://portfolio.test/?metamaskEntry=asset_page&metametricsId=&metricsEnabled=false&marketingEnabled=false&accountAddress=0x1&tab=spending-caps"
1169+
rel="noopener noreferrer"
1170+
target="_blank"
10911171
>
1092-
18
1093-
</p>
1172+
Edit in Portfolio
1173+
</a>
10941174
</div>
10951175
</div>
10961176
</div>

0 commit comments

Comments
 (0)