Skip to content

Commit

Permalink
feat: Hook in Portfolio Entry Points (#27607)
Browse files Browse the repository at this point in the history 
## **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 <julia.collins@consensys.net>
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
Co-authored-by: Ziad Saab <ziad.saab@gmail.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
  • Loading branch information
@julesat22 @legobeat
@ziad-saab @georgewrmarshall
5 people authored Nov 21, 2024
1 parent a1b6ba7 commit 02d52b4
Show file tree
Hide file tree
Showing 4 changed files with 237 additions and 90 deletions.
6 changes: 6 additions & 0 deletions app/_locales/en/messages.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 17 additions & 3 deletions ui/pages/asset/asset.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use "design-system";
@use 'design-system';

.asset {
&__container {
Expand Down Expand Up @@ -42,5 +42,19 @@
}
}

.chart-up { stroke: var(--color-success-default); }
.chart-down { stroke: var(--color-error-default); }
.chart-up {
stroke: var(--color-success-default);
}

.chart-down {
stroke: var(--color-error-default);
}

.asset-page__spending-caps {
text-decoration: none;

&:hover {
color: var(--color-primary-alternative);
text-decoration: underline;
}
}
224 changes: 152 additions & 72 deletions ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,36 @@ exports[`AssetPage should render a native asset 1`] = `
<div
class="mm-box mm-box--margin-top-2 mm-box--display-flex mm-box--gap-7 mm-box--flex-direction-column"
>
<div
class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column"
>
<h3
class="mm-box mm-text mm-text--heading-md mm-box--padding-bottom-4 mm-box--color-text-default"
>
Token details
</h3>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
>
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
>
Spending caps
</p>
<a
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"
href="https://portfolio.test/?metamaskEntry=asset_page&metametricsId=&metricsEnabled=false&marketingEnabled=false&accountAddress=0x1&tab=spending-caps"
rel="noopener noreferrer"
target="_blank"
>
Edit in Portfolio
</a>
</div>
</div>
</div>
<div
class="mm-box mm-box--margin-bottom-8"
>
Expand Down Expand Up @@ -555,59 +585,84 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
Token details
</h3>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
>
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
<div
class="mm-box"
>
Contract address
</p>
<div>
<div
aria-describedby="tippy-tooltip-9"
class=""
data-original-title="Copy to clipboard"
data-tooltipped=""
style="display: inline;"
tabindex="0"
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
>
<button
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"
data-testid="address-copy-button-text"
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
>
<span
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
Contract address
</p>
<div>
<div
aria-describedby="tippy-tooltip-9"
class=""
data-original-title="Copy to clipboard"
data-tooltipped=""
style="display: inline;"
tabindex="0"
>
<div
class="mm-box mm-box--display-flex"
<button
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"
data-testid="address-copy-button-text"
>
0x30937...C4936
</div>
</span>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
<span
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
>
<div
class="mm-box mm-box--display-flex"
>
0x30937...C4936
</div>
</span>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
</div>
</div>
</div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
>
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
>
Token decimal
</p>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
18
</p>
</div>
</div>
</div>
</div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
>
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
>
Token decimal
Spending caps
</p>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
<a
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"
href="https://portfolio.test/?metamaskEntry=asset_page&metametricsId=&metricsEnabled=false&marketingEnabled=false&accountAddress=0x1&tab=spending-caps"
rel="noopener noreferrer"
target="_blank"
>
18
</p>
Edit in Portfolio
</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -1038,59 +1093,84 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
Token details
</h3>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
>
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
<div
class="mm-box"
>
Contract address
</p>
<div>
<div
aria-describedby="tippy-tooltip-10"
class=""
data-original-title="Copy to clipboard"
data-tooltipped=""
style="display: inline;"
tabindex="0"
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
>
<button
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"
data-testid="address-copy-button-text"
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
>
<span
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
Contract address
</p>
<div>
<div
aria-describedby="tippy-tooltip-10"
class=""
data-original-title="Copy to clipboard"
data-tooltipped=""
style="display: inline;"
tabindex="0"
>
<div
class="mm-box mm-box--display-flex"
<button
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"
data-testid="address-copy-button-text"
>
0xe4246...85f55
</div>
</span>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
<span
class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
>
<div
class="mm-box mm-box--display-flex"
>
0xe4246...85f55
</div>
</span>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/copy.svg');"
/>
</button>
</div>
</div>
</div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
>
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
>
Token decimal
</p>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
18
</p>
</div>
</div>
</div>
</div>
<div
class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-space-between"
>
<p
class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-alternative"
>
Token decimal
Spending caps
</p>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
<a
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"
href="https://portfolio.test/?metamaskEntry=asset_page&metametricsId=&metricsEnabled=false&marketingEnabled=false&accountAddress=0x1&tab=spending-caps"
rel="noopener noreferrer"
target="_blank"
>
18
</p>
Edit in Portfolio
</a>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 02d52b4

Please sign in to comment.