metamask / website Goto Github PK

View Code? Open in Web Editor NEW

32.0 32.0 40.0 270.37 MB

The MetaMask website

Home Page: https://metamask.io

License: MIT License

JavaScript 71.32% SCSS 3.20% TypeScript 16.85% HTML 0.01% MDX 8.63%

website's Introduction

Built With:

React
Gatsby
❤️ from ConsenSys Digital Experiences Circle

🚀 Quick start

Ask @davidnguyen88 or @jlazoff for config files

Start it up

git clone [email protected]:MetaMask/website.git
yarn
yarn develop

View site

MetaMask is now running at http://localhost:8000!

There is also a GraphQL API at http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

What's where?

Gatsby file structure documentation

.
├── public/
├── src/
    ├── components/
    ├── fonts/
    ├── fragments/
      ├──GraphQL_Documentation.md
    ├── images/
      ├── icons/
      ├── social-icons/
      ├── metamask-logo.svg
      ├── ...
    ├── lib/
      ├── theme.js
    ├── pages/
      ├── index.js
      ├── about.js
      ├── ...
    ├── html.js
├── gatsby-config.js
├── .env
├── GraphQL_Query_Documentation.md
├── package.json
└── README.md

Key Files

gatsby-config.js

The main configuration file for a Gatsby site. This is where you can specify information about your site (metadata), site title ,and description, which Gatsby plugins we are using, etc. (Check out the config docs for more detail).

src/fragments/ GraphQL query fragments that create standard data requests across components

src/lib/theme.js Contains styling constants for font sizes and weights, device sizes for media queries, shadows, and colors.

public/

Automatically generated output of gatsby build process for production.

src/pages

Files within this directory are turned into routes with the name of the file (e.g. about.js becomes /about). Only files within /pages are allowed to make dynamic GraphQL queries which cascade data down to components.

src/html.js Entry file used by Gatsby for all rendered pages html template

website's People

Contributors

Stargazers

Watchers

website's Issues

Update security at metamask email everywhere

We have a number of places on the website that point to [email protected]. We're going to be disabling that address and would like to replace all instances of it with [email protected].

Allow installing firefox extension directly from web page

This isn't possible for Chrome, but I have learned that Nuance does this here for Firefox, so it should be possible for us too.

Broken link to Template Snap on Flask page

There is a broken link to the Template Snap on the Flask page.

Page: https://metamask.io/flask/
Broken link: https://metamask.github.io/template-snap/

Scroll to the "Built for Developers" section
Click "Try out a live Snap with MetaMask Flask here"

Result: Leads to a missing page. I believe the link should be "https://github.com/MetaMask/template-snap"

Update Terms of Use

Update our new Terms of Use https://docs.google.com/document/d/1gJZ0pZ2EFaL2lfnnVKifGjkZgqttzEnFLuwn2fhz5I4/edit
on the site https://metamask.io/terms.html
And change the last updated date

[Metamask] Site Map page doesn't have mobile-friendly text formatting

YNS: https://jira.younetco.com/browse/CFCONSENSYS-1048

https://metamask.io/sitemap/

The text on the Site Map page has some formatting issues and isn't very readable on mobile browser.
Reproducible in Safari and Chrome on iPhone 12 Mini

[Feature request] Add RSS to MetaMask News

Internal Ticket: https://github.com/Consensys/metamask-website/issues/482

Add bug-bounty page

We need a highly visible place for security researchers to find our bug bounty program and learn our preferred process of responsible disclosure.

Example of our current biggest bug bounty:
MetaMask/metamask-extension#3127

A couple examples from other projects:

Update Team Page

Add Brad Decker, Andre, and Jake. Remove members no longer on the team.

Create an "uninstall" landing page

Webteam Ticket: https://github.com/ConsenSys/dx-team/issues/1339

Desc:

We need to set up a URL that the MetaMask Extension can call when a user removes/uninstalls the extension. If the user has previously opted-in to metrics, we also want to ping Segment of an App Uninstalled event.

There are two parts.

Create new page. Some ideas include:

Add code snippet below to <HEAD> of this page only.
Implement page design (for v1 we will be using the Figma designs here for "without survey". Survey may be a v2).

<script>
const DEV_WRITE_KEY = “PZkSwsTBxW1BrbyIYEUjFBEumGvTyjcz”, PROD_WRITE_KEY = “MHae0tTVRqyHDim9qQ9ablSZpvm3Tvzc”;
const params = new Proxy(new URLSearchParams(window.location.search), { get: (searchParams, prop) => searchParams.get(prop), });
const WRITE_KEY = (params.env == ‘prod’) ? PROD_WRITE_KEY : DEV_WRITE_KEY;

!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey=WRITE_KEY;analytics.SNIPPET_VERSION="4.15.2";
  // only ping Segment if an id exists
  if (params.id) {
    analytics.load(WRITE_KEY);

    // identify user by anonId
    analytics.identify(params.id);
    analytics.track('App Uninstalled', {
      app_version: params.av
    });
    // clear session cookies. meant to be one-time event to close loop
    analytics.reset();
  }
}}();
</script>

MetaMask Snaps page Snaps guides button is missing an image

Web Ticket: https://github.com/Consensys/dx-team/issues/1650

URLs:

Primary URL: https://metamask.io/snaps/

Details:

See screenshot below. There is an image missing from this component. I don't know if it's possible to find it in an older version of the page.

Screenshots

[Metamask] Snaps page button is not centered

URLs:

Primary URL: https://metamask.io/snaps/
Figma URL:

Details:

Live in MetaMask Flask button is not centered. See screenshot below. This is left-aligned but it is supposed to be centered.

Screenshots

Additional context

Forms don't have dark mode support

YNS: https://jira.younetco.com/browse/CFCONSENSYS-1061

https://metamask.io/institutions

The Request Access and Download Brochure forms in the Institutions page don't have the correct formatting for dark mode. The text is difficult to read with the dark background.
Reproducible on desktop and mobile browsers

MetaMask website tab icon is gone

Internal Ticket: https://github.com/ConsenSys/dx-team/issues/1534

Desc:
Look at metamask.io, tab icon is lost.

Chrome download label

CSI Ticket: https://github.com/ConsenSys/dx-team/issues/1512

Desc:
Website has chrome as the only option but it is supported by any chromium browser-- Maybe adjust it to be called "download for chromium" or something along those lines

`yarn install` fails with Python `>=3.11`

CSI Ticket: https://github.com/ConsenSys/dx-team/issues/1511

node-gyp fails to run during installation of gatsby-cli due to ValueError: invalid mode: 'rU' while trying to load binding.gyp.

This is because U mode has been removed in Python 3.11.

Upgrading node-gyp will solve the problem.

Publish security audit

We have a new security audit ready to make public in https://metamask.io/security/

- Cure53 - March 2023 - [Report](https://metamask.io/files/key-tree-audit-report.pdf)

I'm attaching the PDF to this ticket. Please, store it in the proper place.

PDF: MM-02-report.pdf

Add a Swiss financial intermediary to enable swiss francs payments. 🇨🇭

Current view in Metamask Portfolio Buy and Sell:

For users from Switzerland only EUR payments are enabled. No payments in swiss francs.

DFX.swiss is a Swiss company and offers exactly that. Same as Moonpay, Banxa and Transak but with Swiss Francs. Based in Switzerland, regulated in Switzerland, bank account in Switzerland and of course Swiss currency. 🇨🇭

What needs to be done to make it possible to integrate DFX?

I apologize if I have opened this issue here in an inappropriate place. I have not found a better place. 🙏🙈

Various updates

Suggested updates

https://gist.github.com/BboyAkers/67d5567f162aa9763f39b9c8f0a94617

Add FAQs

Add FAQs page
Not ready yet. Need some final passes.
https://docs.google.com/document/d/1VbF8ybAlEPrFhnJdYHgc0jaI8XMeFPyB37_sSHljZxI/edit

Fix two broken links on Flask webpage

I have fixed the following two broken links on the /flask/ page:

Try out a live snap with MetaMask Flask here
Get involved with our Snaps developer community and user community on Discord (I removed "and user community" and changed the one link for "developer community")

These changes have been made in the staging section. Please review them, copy over to production and publish.

Enable hosting brand assets and resources

Web Team Ticket:

https://github.com/ConsenSys/dx-team/issues/1549

Desc:

Let's host subpage for all brand assets and resources. For starters, let's just do our logos as an SVG. The fox svg can be found here. The assets should be stored under a path like assets/. The icon would then be assets/icon.svg.