Add entry point for metalabs dapp into metamask home page

[meppsilon]

Explanation

We want to create entry point for the new MetaLabs dapp from the extension. This will give users a quick link to the MetaLabs dapp so they can benefit from the more in-depth portfolio view and other experimental features that the dapp will offer. In addition, we wanted this entry point to be at a location that all users could easily see and access.

For these reasons, I created a subHeader prop in the home component (underneath the tabs) to pass down a react node that displays a link to the metalabs url.

In addition, if the user has not interacted with the page, we will need the feature to request for account permissions from the user with the metalabs url as the origin and redirect to the metalabs page after. There were a couple changes that needed to happen for this to work: firstly, the metalabs url needed to be stored as a query string within the route as the app redirects to the permissions connect pages and secondly, the last page in the permissions connect flow ("permissions-page-container") needed to grab the metalabs url and open a new tab with it.

More Information

It would be ideal to parameterize the metalabs url because we might want to change the url for a number of reasons in the future. But I wasn't sure what the best mechanism for parameterizing the url was so I went ahead with the most prevalent technique throughout the app: adding the parameter to the .metamaskrc file. If there is another way to parameterize the url that you think fits better with what we are doing, please let me know.

Screenshots/Screencaps

Figma designs: https://www.figma.com/file/gi92L28Nr4PdUaLsTRhmkK/User-Flows---Master?node-id=3%3A1347

Manual Testing Steps

• Go to home screen on the extension
• Click "portfolio view" link
• Notice that you are redirected to the correct metalabs url

Pre-Merge Checklist

• [ ] PR template is filled out
• [ ] IF this PR fixes a bug, a test that would have caught the bug has been added
• [ ] PR is linked to the appropriate GitHub issue
• [ ] PR has been added to the appropriate release Milestone

+ If there are functional changes:

• [ ] Manual testing complete & passed
• [ ] "Extension QA Board" label has been applied

[github-actions[bot]]

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.

[dan437]

Do you want to wait until the Portfolio View is deployed to production before merging this PR?

[danjm]

@rachelcope This recording shows the designs / UX (the portfolio dapp doesn't render because the site is not live yet, but you can see the MetaMask experience). Does it look good to you?

https://user-images.githubusercontent.com/7499938/188881442-d8cc996f-711e-4fe0-b61f-54ad5c02c13b.mp4

[rachelcope]

What is the logic if the user doesn't close the "New" banner and then reopens MetaMask? Will the What's New modal appear over the "New" banner?