Preparing for deployment (MetaMask#17)

* Introduce pill component

* more semantic

* capitalize components

* correct MDX

* removing versioning on snaps, fix broken links, add lint command, add gh actions

* add cache to CI

* add cache CI

* bump

* review comments, add gitignore for vercel test files

.eslintignore

@@ -0,0 +1 @@
+/build

.eslintrc

@@ -11,12 +11,6 @@
       "rules": {
         "@typescript-eslint/no-var-requires": "off"
       }
-    },
-    {
-      "files": "**/*.md",
-      "rules": {
-        "no-multiple-empty-lines": ["error", { "max": 2 }]
-      }
     }
   ],
   "extends": [

.github/workflows/integration.yml

@@ -0,0 +1,23 @@
+name: Node.js CI
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+      - run: yarn install --prefer-offline
+      - run: yarn lint
+      - run: yarn build

.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vercel

api-sdk-sidebar.js

@@ -3,80 +3,80 @@
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebar = {
   apiSidebar: [
-    'index',
+    "index",
     {
-      type: 'category',
-      label: 'Get started',
-      link: { type: 'generated-index' },
+      type: "category",
+      label: "Get started",
+      link: { type: "generated-index" },
       collapsed: false,
       items: [
-        'get-started/set-up-dev-environment',
-        'get-started/run-test-network',
-        'get-started/detect-metamask',
-        'get-started/access-account',
-        'get-started/log-in-users'
-      ]
+        "get-started/set-up-dev-environment",
+        "get-started/run-test-network",
+        "get-started/detect-metamask",
+        "get-started/access-account",
+        "get-started/log-in-users",
+      ],
     },
     {
-      type: 'category',
-      label: 'How to',
-      link: { type: 'generated-index' },
+      type: "category",
+      label: "How to",
+      link: { type: "generated-index" },
       items: [
         {
-          type: 'category',
-          label: 'Use MetaMask SDK',
+          type: "category",
+          label: "Use MetaMask SDK",
           collapsed: true,
           link: {
-            type: 'doc',
-            id: 'how-to/use-sdk/index'
+            type: "doc",
+            id: "how-to/use-sdk/index",
           },
           items: [
-            'how-to/use-sdk/react-native',
-            'how-to/use-sdk/pure-js'
-          ]
+            "how-to/use-sdk/react-native",
+            "how-to/use-sdk/pure-js",
+          ],
         },
-        'how-to/use-mobile',
-        'how-to/interact-with-smart-contracts',
-        'how-to/send-transactions',
-        'how-to/sign-data',
-        'how-to/register-token',
-        'how-to/register-method-names',
-        'how-to/access-provider',
-        'how-to/use-onboarding-library',
-        'how-to/set-icon',
-        'how-to/migrate-api'
-      ]
+        "how-to/use-mobile",
+        "how-to/interact-with-smart-contracts",
+        "how-to/send-transactions",
+        "how-to/sign-data",
+        "how-to/register-token",
+        "how-to/register-method-names",
+        "how-to/access-provider",
+        "how-to/use-onboarding-library",
+        "how-to/set-icon",
+        "how-to/migrate-api",
+      ],
     },
     {
-      type: 'category',
-      label: 'Reference',
-      link: { type: 'generated-index' },
+      type: "category",
+      label: "Reference",
+      link: { type: "generated-index" },
       items: [
-        'reference/provider-api',
-        'reference/rpc-api',
-        'reference/sdk-js-options'
-      ]
+        "reference/provider-api",
+        "reference/rpc-api",
+        "reference/sdk-js-options",
+      ],
     },
     {
-      type: 'category',
-      label: 'Concepts',
-      link: { type: 'generated-index' },
+      type: "category",
+      label: "Concepts",
+      link: { type: "generated-index" },
       items: [
-        'concepts/sdk',
-        'concepts/signing-methods',
-        'concepts/onboarding-library'
-      ]
+        "concepts/sdk",
+        "concepts/signing-methods",
+        "concepts/onboarding-library",
+      ],
     },
     {
-      type: 'category',
-      label: 'Tutorials',
-      link: { type: 'generated-index' },
+      type: "category",
+      label: "Tutorials",
+      link: { type: "generated-index" },
       items: [
-        'tutorials/create-simple-dapp',
-        'tutorials/create-simple-dapp-with-sdk'
-      ]
-    }
-  ]
+        "tutorials/create-simple-dapp",
+        "tutorials/create-simple-dapp-with-sdk",
+      ],
+    },
+  ],
 };
 
 module.exports = sidebar;

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
 };

docusaurus.config.js

@@ -60,12 +60,6 @@ const config = {
         routeBasePath: "snaps",
         sidebarPath: require.resolve("./snaps-sidebar.js"),
         breadcrumbs: false,
-        versions: {
-          production: {
-            label: "Current",
-            badge: false,
-          },
-        },
       }),
     ],
   ],

package.json

@@ -12,7 +12,9 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "dependencies": {
     "@docusaurus/core": "2.2.0",

snaps-sidebar.js

@@ -16,15 +16,15 @@ const sidebar = {
 
   // But you can create a sidebar manually
   snapsSidebar: [
-    'index',
+    "index",
     {
       type: "category",
       label: "How To",
       link: { type: "generated-index" },
       items: [
         "how-to/guide",
         "how-to/patching-dependencies",
-      ]
+      ],
     },
     {
       type: "category",
@@ -33,10 +33,10 @@ const sidebar = {
       items: [
         "reference/rpc-api",
         "reference/permissions",
-        "reference/exports"
-      ]
-    }
-  ]
+        "reference/exports",
+      ],
+    },
+  ],
 };
 
 module.exports = sidebar;

snaps/how-to/guide.md

@@ -1,7 +1,7 @@
 # Development Guide
 
 :::tip Developer Preview Software
-[Snaps](./snaps.html) is pre-release software. To try Snaps, install [MetaMask Flask](https://metamask.io/flask).
+[Snaps](../) is pre-release software. To try Snaps, install [MetaMask Flask](https://metamask.io/flask).
 :::
 
 Developing a snap is much like developing any JavaScript project, but there are some things that may be new even to a seasoned developer.
@@ -20,7 +20,7 @@ Executing `mm-snap --help` will provide detailed usage instructions.
 ## The Anatomy of a Snap
 
 :::caution Prerequisite Reading
-This guide assumes that you've completed the ["Getting Started" tutorial](./snaps.html#getting-started).
+This guide assumes that you've completed the ["Getting Started" tutorial](../#getting-started).
 :::
 
 So, you have installed [MetaMask Flask](https://metamask.io/flask), cloned the [@metamask/template-snap-monorepo](https://github.com/MetaMask/template-snap-monorepo) repository, and have served the "Hello, World!" snap locally.
@@ -198,10 +198,10 @@ If this sounds like a lot to worry about, `mm-snap build` is your friend, becaus
 ## Developing a Snap
 
 Snaps exist in order to modify the functionality of MetaMask at runtime while only asking the user for permission.
-As we have seen in the [introduction to snaps](./snaps.html) and this guide, snaps can:
+As we have seen in the [introduction to snaps](../) and this guide, snaps can:
 
 1. Extend the dapp-facing MetaMask JSON-RPC API in arbitrary ways.
-1. Integrate with and extend the functionality of MetaMask using the [snaps RPC methods and permissions](./snaps-rpc-api.html).
+1. Integrate with and extend the functionality of MetaMask using the [snaps RPC methods and permissions](../reference/rpc-api).
 
 In this section, we'll go into detail about how to actually develop a snap and overcome common issues encountered during development.
 
@@ -224,7 +224,7 @@ If a snap is disabled, the user must re-enable it before it can start again.
 ### Permissions
 
 Just like dapps need to request the `eth_accounts` permission in order to access the user's Ethereum accounts, snaps need to request access to the sensitive methods in the snaps RPC API.
-Snaps can effectively expand the MetaMask RPC API by implementing their own and exposing it via `onRpcRequest`, but in order to integrate deeply with MetaMask, you need to make use of the Snaps RPC API's [restricted methods](./snaps-rpc-api.html#restricted-methods).
+Snaps can effectively expand the MetaMask RPC API by implementing their own and exposing it via `onRpcRequest`, but in order to integrate deeply with MetaMask, you need to make use of the Snaps RPC API's [restricted methods](../reference/rpc-api#restricted-methods).
 Access restriction is implemented using [EIP-2255 wallet permissions](https://eips.ethereum.org/EIPS/eip-2255), and you must specify the permissions required by your snap in the manifest's `initialPermissions` field.
 You can find an example of how to do this in the [template snap's manifest](https://github.com/MetaMask/template-snap-monorepo/blob/main/packages/snap/snap.manifest.json).
 
@@ -250,7 +250,7 @@ Via the MetaMask settings page, the user can see their installed snaps. For each
 - see its execution status (running, stopped, or crashed)
 - enable and disable the snap
 
-Other than the settings page, the only way a snap can modify the MetaMask UI is by creating a confirmation using the [`snap_confirm`](./snaps-rpc-api.html#snap-confirm) RPC method.
+Other than the settings page, the only way a snap can modify the MetaMask UI is by creating a confirmation using the [`snap_confirm`](../reference/rpc-api#snap-confirm) RPC method.
 This means that many snaps will have to rely on web pages (i.e., dapps) and their own RPC methods to present their data to the user.
 
 Providing more ways for snaps to modify the MetaMask UI is an important goal of the snaps system, and over time more and more snaps will be able to contain their user interfaces entirely within MetaMask itself.
@@ -330,7 +330,7 @@ In this way, you can identify if the error is due to your code or one of your de
 If the problem is in a dependency, you can try a different version or to fix the issue locally by using tools such as [`patch-package`](https://npmjs.com/package/patch-package) or by modifying the snap bundle file directly.
 
 :::tip Patching Dependencies
-You can read more about patching dependencies [here](./snaps-patching-dependencies.html)
+You can read more about patching dependencies [here](./patching-dependencies)
 :::
 
 To give you an idea of a common error and how to fix it, "sloppily" declared variables (i.e. assigning to a new variable without an explicit variable declaration) are forbidden in strict mode, and therefore in SES as well.
@@ -394,7 +394,7 @@ After publishing the Snap, any dapp can connect to the Snap by using the snapId
 ### Distributing Your Snap
 
 Since snaps are currently intended for a developer audience, MetaMask does not currently facilitate distributing snaps to a wide audience.
-If you have a website that expects the user to install a snap, ask the user to install MetaMask Flask, and then ask the user to install the snap using the [`wallet_enable`](./snaps-rpc-api.html#wallet-enable) RPC method.
+If you have a website that expects the user to install a snap, ask the user to install MetaMask Flask, and then ask the user to install the snap using the [`wallet_enable`](../reference/rpc-api#wallet-enable) RPC method.
 
 In the future, MetaMask will create some way for users to more easily discover snaps, but everyone will always be able to build, publish, and use snaps without MetaMask's permission.
 (Although we may try to make it difficult to use known scams.)

snaps/how-to/patching-dependencies.md

@@ -1,10 +1,10 @@
 # Patching Dependencies
 
 :::tip Only Available in MetaMask Flask
-[Snaps](./snaps.html) is only available in [MetaMask Flask](https://metamask.io/flask).
+[Snaps](../) is only available in [MetaMask Flask](https://metamask.io/flask).
 :::
 
-A problem that may arise as you develop your snap is that some dependencies make use of APIs that aren't available in the snaps execution environment. To work around this, we firstly recommend that you check if another library is available that makes use of the APIs made available for snaps (see [Snaps Development Guide](./snaps-development-guide.html#the-snap-execution-environment) for a list of APIs).
+A problem that may arise as you develop your snap is that some dependencies make use of APIs that aren't available in the snaps execution environment. To work around this, we firstly recommend that you check if another library is available that makes use of the APIs made available for snaps (see [Snaps Development Guide](./guide#the-snap-execution-environment) for a list of APIs).
 
 If you are unable to find another library (or version) that works with the snaps execution environment, another way of solving the problem is by patching the dependency yourself. For this we can leverage [`patch-package`](https://npmjs.com/package/patch-package).
 

snaps/reference/exports.md

@@ -81,7 +81,7 @@ module.exports.onRpcRequest = async ({ origin, request }) => {
 If the snap wants to provide transaction insights before a user signs a transaction, the snap must export a function called `onTransaction`. Whenever there is a contract interaction and a transaction is submitted via the extension, this function will be called. The raw unsigned transaction payload will be passed to the `onTransaction` handler function.
 
 :::tip Requesting the transaction insight permission
-In order for the extension to call the `onTransaction` method of the snap, the `endowment:transaction-insight` permission must be requested. see [Permissions](./snaps-permissions.html#endowment-transaction-insight)
+In order for the extension to call the `onTransaction` method of the snap, the `endowment:transaction-insight` permission must be requested. see [Permissions](./permissions#endowment-transaction-insight)
 :::
 
 ### Parameters

snaps/reference/permissions.md

@@ -8,7 +8,7 @@ Snaps is pre-release software. To try Snaps, install [MetaMask Flask](https://me
 Do you have feature requests? Other ideas? We'd love to hear about them! [Click here](https://github.com/MetaMask/snaps-monorepo/discussions) to join the discussion.
 :::
 
-To access certain powerful JavaScript globals or JSON-RPC methods, your snap will need to ask the user for permission. Snaps follow the [EIP-2255 wallet permissions specification](https://eips.ethereum.org/EIPS/eip-2255), and your snap's required permissions must be specified in the `initialPermissions` field of your [`snap.manifest.json` file](./snaps-development-guide.md#the-snap-manifest).
+To access certain powerful JavaScript globals or JSON-RPC methods, your snap will need to ask the user for permission. Snaps follow the [EIP-2255 wallet permissions specification](https://eips.ethereum.org/EIPS/eip-2255), and your snap's required permissions must be specified in the `initialPermissions` field of your [`snap.manifest.json` file](../how-to/guide#the-snap-manifest).
 
 ## Table of Contents
 
@@ -18,21 +18,21 @@ To access certain powerful JavaScript globals or JSON-RPC methods, your snap wil
 
 ### `endowment:long-running`
 
-For snaps that are computationally heavy and can't finish execution within [the snap lifecycle requirements](./snaps-development-guide.md#the-snap-lifecycle), the snap can request the `endowment:long-running` permission.
+For snaps that are computationally heavy and can't finish execution within [the snap lifecycle requirements](../how-to/guide#the-snap-lifecycle), the snap can request the `endowment:long-running` permission.
 This permission will effectively allow snaps to run indefinitely while processing RPC requests.
 
 ### `endowment:network-access`
 
 For snaps that need to access the internet, the snap can request the `endowment:network-access` permission. This permission will expose the global networking APIs `fetch` and `WebSocket` to the snap execution environment. Without this permission, these globals will not be available.
 
 :::caution Avoid XMLHttpRequest
-`XMLHttpRequest` is never available in snaps, and you should replace it with `fetch`. If your dependencies are using `XMLHttpRequest`, you can learn how to patch it away [here](./snaps-patching-dependencies.md#patching-the-use-of-xmlhttprequest).
+`XMLHttpRequest` is never available in snaps, and you should replace it with `fetch`. If your dependencies are using `XMLHttpRequest`, you can learn how to patch it away [here](../how-to/patching-dependencies#patching-the-use-of-xmlhttprequest).
 :::
 
 ### `endowment:transaction-insight`
 
-For snaps that provide transaction insights, the snap can request the `endowment:transaction-insight` permission. This permission grants a snap read-only access to raw transaction payloads, before they are accepted for signing by the user, by exporting the `onTransaction` method. see [Exports](./snaps-exports.html#ontransaction)
+For snaps that provide transaction insights, the snap can request the `endowment:transaction-insight` permission. This permission grants a snap read-only access to raw transaction payloads, before they are accepted for signing by the user, by exporting the `onTransaction` method. see [Exports](./exports#ontransaction)
 
 ## RPC Permissions
 
-To use any restricted RPC method, a snap will need to request permissions to access that method. For a list of available RPC methods and thus valid RPC permissions see [JSON-RPC API](./snaps-rpc-api.html#restricted-methods)
+To use any restricted RPC method, a snap will need to request permissions to access that method. For a list of available RPC methods and thus valid RPC permissions see [JSON-RPC API](./rpc-api#restricted-methods)

snaps/reference/rpc-api.md

@@ -58,7 +58,7 @@ interface WalletEnableResult {
 #### Description
 
 This is a convenience method for requesting the user's accounts and connecting to / installing snaps.
-You can think of it as a combination of [`eth_requestAccounts`](./rpc-api.html#eth-requestaccounts), [`wallet_installSnaps`](#wallet-installsnaps), and [`wallet_requestPermissions`](./rpc-api.html#wallet-requestpermissions).
+You can think of it as a combination of [`eth_requestAccounts`](#eth-requestaccounts), [`wallet_installSnaps`](#wallet-installsnaps), and [`wallet_requestPermissions`](#wallet-requestpermissions).
 
 See the examples for details.
 
@@ -332,7 +332,7 @@ console.log(result); // We happen to know that this will be `true` or `false`
 If a method is _restricted_, it means that you need the requisite permission before you can call it.
 Both snaps and dapps / websites can have permissions.
 Some permissions are only available to snaps, and some are only available to websites.
-See [here](./rpc-api.html#restricted-methods) for more information about the permission system.
+See [here](#restricted-methods) for more information about the permission system.
 
 ### `wallet_snap_*`