Openrpc sidebar support two (MetaMask#811)

* Implement loadContent

* Added content loading for markdown

* Switch to using api-specs document

* Add instructions for watching api-specs changes

* Added docusaurus-openrpc plugin from npm

* remove garbage markdown

* remove more garbage generated md

* lint fix

* update yarn lock

* Update docusaurus-openrpc plugin version

* bump docusaurus-openrpc

* add navbar link to playground

* lint fix

* Removed Playground from navbar until we are ready to expose it to developers (MetaMask#737)

* wip

* Fixed deps

* Fixed deps

* Fixed yarn lock issue

* Fixed up yarn lock

* bump docusaurus-openrpc

* bump plugin

* Changed version of `@metamask/docusaurus-openrpc`

* Bumped @metamask/docusaurus-openrpc

* Changed links to new playground and bump plugin

* Remove dead link and incorrect recomendation

* Added OpenRPC docusuarus sidebar support

* Changed enhanced plugin to be in @metamask/docusaurus-openrpc

* Changed docusaurus config to use docusaurus-openrpc preset

* Fixed openrpcDocument url

* Fixed docusaurus-openrpc version

* Fixed docusaurus versions to be all using 2.4.1

* Fixed duplicate key in config

* Remove api playground from snaps docs

* Update docusaurus-openrpc to latest 2.0.0

* Fix linting issue

* Added newline at end of CONTRIBUTING.md

* Remove extra line CONTRIBUTING.md

* Fixed openrpcDocument link

* Added docusaurus-openrpc 0.2.1

* Fixed links to old api-playground

* Fixed broken link

---------

Co-authored-by: Shane Jonas <[email protected]>

docusaurus.config.js

@@ -35,22 +35,27 @@ const config = {
 
   presets: [
     [
-      "classic",
-      /** @type {import('@docusaurus/preset-classic').Options} */
+      "@metamask/docusaurus-openrpc/dist/preset",
+      /** @type {import('@metamask/docusaurus-openrpc/dist/preset').Options} */
       ({
         docs: {
           path: "wallet",
           routeBasePath: "wallet",
           sidebarPath: require.resolve("./wallet-sidebar.js"),
           breadcrumbs: false,
+          editUrl: "https://github.com/MetaMask/metamask-docs/edit/main/",
           remarkPlugins: [
             require("remark-docusaurus-tabs"),
             [remarkCodesandbox, {
               mode: "iframe",
               autoDeploy: process.env.NODE_ENV === "production",
             }],
           ],
-          editUrl: "https://github.com/MetaMask/metamask-docs/edit/main/",
+          openrpc: {
+            openrpcDocument: "https://metamask.github.io/api-specs/latest/openrpc.json",
+            path: "reference",
+            sidebarLabel: "API Playground",
+          },
         },
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
@@ -60,18 +65,17 @@ const config = {
   ],
   plugins: [
     [
-      "content-docs",
-      /** @type {import('@docusaurus/plugin-content-docs').PluginOptions} */
+      "@docusaurus/plugin-content-docs",
       ({
         id: "snaps",
         path: "snaps",
         routeBasePath: "snaps",
+        editUrl: "https://github.com/MetaMask/metamask-docs/edit/main/",
         sidebarPath: require.resolve("./snaps-sidebar.js"),
         breadcrumbs: false,
         remarkPlugins: [
           require("remark-docusaurus-tabs"),
         ],
-        editUrl: "https://github.com/MetaMask/metamask-docs/edit/main/",
       }),
     ],
     [
@@ -212,14 +216,11 @@ const config = {
         },
         items: [
           {
-            type: "doc",
-            docId: "index",
+            to: "wallet",
             label: "Wallet",
           },
           {
-            type: "doc",
-            docId: "index",
-            docsPluginId: "snaps",
+            to: "snaps",
             label: "Snaps",
           },
         ],

package.json

@@ -18,21 +18,23 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.0",
-    "@docusaurus/preset-classic": "2.4.0",
+    "@docusaurus/core": "2.4.1",
+    "@docusaurus/plugin-content-docs": "^2.4.1",
     "@mdx-js/react": "^1.6.22",
     "@metamask/design-tokens": "^1.11.1",
+    "@metamask/docusaurus-openrpc": "^0.2.1",
     "clsx": "^1.2.1",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remark-codesandbox": "^0.10.1",
     "remark-docusaurus-tabs": "^0.2.0"
   },
   "devDependencies": {
-    "@docusaurus/eslint-plugin": "^2.4.0",
-    "@docusaurus/module-type-aliases": "2.4.0",
-    "@docusaurus/plugin-client-redirects": "2.4.0",
+    "@docusaurus/eslint-plugin": "^2.4.1",
+    "@docusaurus/module-type-aliases": "2.4.1",
+    "@docusaurus/plugin-client-redirects": "2.4.1",
     "@lavamoat/allow-scripts": "^2.3.0",
     "@tsconfig/docusaurus": "^1.0.5",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
@@ -61,7 +63,17 @@
   "lavamoat": {
     "allowScripts": {
       "@docusaurus/core>@babel/runtime-corejs3>core-js-pure": false,
-      "@docusaurus/core>core-js": false
+      "@docusaurus/core>core-js": false,
+      "@metamask/docusaurus-openrpc>@docusaurus/plugin-content-docs>@docusaurus/core>@babel/runtime-corejs3>core-js-pure": false,
+      "@metamask/docusaurus-openrpc>@docusaurus/plugin-content-docs>@docusaurus/core>core-js": false,
+      "@metamask/docusaurus-openrpc>@open-rpc/docs-react>@stoplight/mosaic>@fortawesome/fontawesome-svg-core": false,
+      "@metamask/docusaurus-openrpc>@open-rpc/docs-react>@stoplight/mosaic>@fortawesome/fontawesome-svg-core>@fortawesome/fontawesome-common-types": false,
+      "@metamask/docusaurus-openrpc>@docusaurus/core>@babel/runtime-corejs3>core-js-pure": false,
+      "@metamask/docusaurus-openrpc>@docusaurus/core>core-js": false,
+      "@metamask/docusaurus-openrpc>docusaurus-open-rpc-docs-react>@stoplight/mosaic>@fortawesome/fontawesome-svg-core": false,
+      "@metamask/docusaurus-openrpc>docusaurus-open-rpc-docs-react>@stoplight/mosaic>@fortawesome/fontawesome-svg-core>@fortawesome/fontawesome-common-types": false,
+      "@metamask/docusaurus-openrpc>@metamask/open-rpc-docs-react>@stoplight/mosaic>@fortawesome/fontawesome-svg-core": false,
+      "@metamask/docusaurus-openrpc>@metamask/open-rpc-docs-react>@stoplight/mosaic>@fortawesome/fontawesome-svg-core>@fortawesome/fontawesome-common-types": false
     }
   }
 }

snaps/how-to/develop-a-snap.md

@@ -26,9 +26,6 @@ This page describes additional important steps when developing a snap.
 When developing a website that depends on Snaps, you need to know whether the user has
 [MetaMask Flask](../get-started/install-snaps.md#install-metamask-flask) installed.
 
-We recommend calling the
-[`web3_clientVersion`](https://metamask.github.io/api-playground/api-documentation/#web3_clientVersion)
-MetaMask RPC method to obtain this information.
 The following example uses the
 [`@metamask/detect-provider`](https://npmjs.com/package/@metamask/detect-provider) package to get
 the provider object from MetaMask first:

snaps/tutorials/transaction-insights.md

@@ -47,7 +47,7 @@ Instead, it provides transaction insights directly in the MetaMask transaction w
 
 In particular, the snap shows the user the percentage of gas fees they would pay for their transaction.
 It gets the current gas price by calling the
-[`eth_gasPrice`](https://metamask.github.io/api-playground/api-documentation/#eth_gasPrice) RPC
+[`eth_gasPrice`](/wallet/reference/eth_gasPrice) RPC
 method using the global Ethereum provider made available to snaps.
 
 To enable your snap to provide transaction insights and use the global Ethereum provider, open
@@ -80,7 +80,7 @@ export const onTransaction: OnTransactionHandler = async ({ transaction }) => {
   const currentGasPrice = await window.ethereum.request({
     method: 'eth_gasPrice',
   });
-  
+
   // Get fields from the transaction object.
   const transactionGas = parseInt(transaction.gas as string, 16);
   const currentGasPriceInWei = parseInt(currentGasPrice ?? '', 16);
@@ -126,7 +126,7 @@ To build and test your snap:
 
     ```bash
     You can now view site in the browser.
-    
+
       http://localhost:8000/
     ```
 

src/css/custom.css

@@ -110,3 +110,8 @@ img {
   padding: 10px;
   text-align: center;
 }
+
+/* Reset SVG to be inline by default */
+svg {
+  display: inline;
+}

tsconfig.json

@@ -2,7 +2,8 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "jsx": "react"
   },
   "include": [
     "./**/*"

wallet/concepts/signing-methods.md

@@ -10,7 +10,7 @@ Learn how to [use the recommended signing methods](../how-to/sign-data.md).
 
 ## eth_signTypedData_v4
 
-[`eth_signTypedData_v4`](https://metamask.github.io/api-playground/api-documentation/#eth_signTypedDatav4)
+[`eth_signTypedData_v4`](/wallet/reference/eth_signtypeddata_v4)
 is:
 
 - Cheap to verify on chain.
@@ -22,10 +22,10 @@ If onchain verifiability cost is a high priority,
 
 ## personal_sign
 
-[`personal_sign`](https://metamask.github.io/api-playground/api-documentation/#personal_sign): 
+[`personal_sign`](/wallet/reference/personal_sign):
 
 - Displays human-readable text when UTF-8 encoded, making it a popular choice for site logins
-  (for example, [Sign-In with Ethereum](../how-to/use-siwe.md)). 
+  (for example, [Sign-In with Ethereum](../how-to/use-siwe.md)).
 - Is protected against phishing signatures.
 
 The text prefix of `personal_sign` makes signatures expensive to verify on-chain.
@@ -50,7 +50,7 @@ use, or due to an inability to change the associated dapp.
 If a wallet user must interact with a dapp that uses `eth_sign` and accepts the risks,
 the wallet user can re-enable `eth_sign` through advanced settings.
 
-### eth_signTypedData_v1 and eth_signTypedData_v3 
+### eth_signTypedData_v1 and eth_signTypedData_v3
 
 `eth_signTypedData` was introduced by [EIP-712](https://eips.ethereum.org/EIPS/eip-712).
 The EIP-712 specification changed several times resulting in multiple versions
@@ -65,7 +65,7 @@ The earlier versions are:
   Read the
   [introductory blog post to this method](https://medium.com/metamask/eip712-is-coming-what-to-expect-and-how-to-use-it-bb92fd1a7a26).
 
-The missing `v2` represents an intermediary design that the Cipher browser implemented. 
+The missing `v2` represents an intermediary design that the Cipher browser implemented.
 
 All early versions of this method lack later security improvements.
 Use the latest version, [`eth_signTypedData_v4`](#eth_signtypeddata_v4).

wallet/get-started/access-accounts.md

@@ -81,7 +81,7 @@ async function getAccount() {
 
 ## Handle accounts
 
-Use the [`eth_accounts`](https://metamask.github.io/api-playground/api-documentation/#eth_accounts)
+Use the [`eth_accounts`](/wallet/reference/eth_accounts)
 RPC method to handle user accounts.
 Listen to the [`accountsChanged`](../reference/provider-api.md#accountschanged) provider event to
 be notified when the user changes accounts.

wallet/get-started/detect-network.md

@@ -8,7 +8,7 @@ sidebar_position: 4
 It's important to keep track of the user's network chain ID because all RPC requests are submitted
 to the currently connected network.
 
-Use the [`eth_chainId`](https://metamask.github.io/api-playground/api-documentation/#eth_chainId)
+Use the [`eth_chainId`](/wallet/reference/eth_chainId)
 RPC method to detect the chain ID of the user's current network.
 Listen to the [`chainChanged`](../reference/provider-api.md#chainchanged) provider event to
 detect when the user changes networks.

wallet/how-to/send-transactions.md

@@ -6,7 +6,7 @@ sidebar_position: 4
 # Send transactions
 
 You can send a transaction in MetaMask using the
-[`eth_sendTransaction`](https://metamask.github.io/api-playground/api-documentation/#eth_sendTransaction)
+[`eth_sendTransaction`](/wallet/reference/eth_sendTransaction)
 RPC method.
 
 For example, the following JavaScript gets the user's accounts and sends a transaction when they

wallet/how-to/sign-data.md

@@ -26,7 +26,7 @@ sign data using an unsupported method, in which case we recommend using your sta
 
 ## Use eth_signTypedData_v4
 
-[`eth_signTypedData_v4`](https://metamask.github.io/api-playground/api-documentation/#eth_signTypedData_v4)
+[`eth_signTypedData_v4`](/wallet/reference/eth_signTypedData_v4)
 provides the most human-readable signatures that are efficient to process on-chain.
 It follows the [EIP-712](https://eips.ethereum.org/EIPS/eip-712) specification to allow users to sign
 typed structured data that can be verified on-chain.
@@ -187,7 +187,7 @@ signTypedDataV4Button.addEventListener('click', async function (event) {
 
 ## Use personal_sign
 
-[`personal_sign`](https://metamask.github.io/api-playground/api-documentation/#personal_sign) is the
+[`personal_sign`](/wallet/reference/personal_sign) is the
 easiest way to request human-readable signatures that don't need to be efficiently processed on-chain.
 It's often used for signature challenges that are authenticated on a web server, such as
 [Sign-In with Ethereum](use-siwe.md).

wallet/how-to/use-sdk/mobile/ios.md

@@ -80,7 +80,7 @@ provider API method to call various [RPC API](../../../reference/rpc-api.md) met
 #### Example: Get chain ID
 
 The following example gets the user's chain ID by calling
-[`eth_chainId`](https://metamask.github.io/api-playground/api-documentation/#eth_chainId).
+[`eth_chainId`](/wallet/reference/eth_chainId).
 
 ```swift
 @State var chainId: String?
@@ -102,7 +102,7 @@ ethereum.request(chainIdRequest)?.sink(receiveCompletion: { completion in
 #### Example: Get account balance
 
 The following example gets the user's account balance by calling
-[`eth_getBalance`](https://metamask.github.io/api-playground/api-documentation/#eth_getBalance).
+[`eth_getBalance`](/wallet/reference/eth_getBalance).
 
 ```swift
 @State var balance: String?
@@ -134,7 +134,7 @@ ethereum.request(getBalanceRequest)?.sink(receiveCompletion: { completion in
 #### Example: Send transaction
 
 The following examples send a transaction by calling
-[`eth_sendTransaction`](https://metamask.github.io/api-playground/api-documentation/#eth_sendTransaction).
+[`eth_sendTransaction`](/wallet/reference/eth_sendTransaction).
 
 <!--tabs-->
 

wallet/how-to/use-siwe.md

@@ -42,7 +42,7 @@ This is to not break existing dapps that may have use cases for mismatched domai
 ## Example
 
 The following is an example of setting up SIWE with MetaMask using
-[`personal_sign`](https://metamask.github.io/api-playground/api-documentation/#personal_sign).
+[`personal_sign`](/wallet/reference/personal_sign).
 See the [live example](https://metamask.github.io/test-dapp/#siwe) and
 [test dapp source code](https://github.com/MetaMask/test-dapp).
 

wallet/reference/provider-api.md

@@ -64,7 +64,7 @@ In practice, if a method has parameters, they're almost always of type `Array<an
 If the request fails, the promise rejects with an [error](#errors).
 
 The following is an example of using `window.ethereum.request(args)` to call
-[`eth_sendTransaction`](https://metamask.github.io/api-playground/api-documentation/#eth_sendTransaction):
+[`eth_sendTransaction`](/wallet/reference/eth_sendTransaction):
 
 ```javascript
 params: [
@@ -138,7 +138,7 @@ window.ethereum.on('accountsChanged', handler: (accounts: Array<string>) => void
 ```
 
 The provider emits this event when the return value of the
-[`eth_accounts`](https://metamask.github.io/api-playground/api-documentation/#eth_accounts) RPC
+[`eth_accounts`](/wallet/reference/eth_accounts) RPC
 method changes.
 `eth_accounts` returns either an empty array, or an array that contains the addresses of the accounts
 the caller is permitted to access with the most recently used account first.
@@ -212,7 +212,7 @@ The `type` property identifies the kind of message.
 
 RPC subscription updates are a common use case for this event.
 For example, if you create a subscription using
-[`eth_subscribe`](https://metamask.github.io/api-playground/api-documentation/#eth_subscribe), each
+[`eth_subscribe`](/wallet/reference/eth_subscribe), each
 subscription update is emitted as a `message` event with a `type` of `eth_subscription`.
 
 ## Errors

wallet/reference/rpc-api.md

@@ -11,7 +11,7 @@ The API contains standard Ethereum JSON-RPC API methods and MetaMask-specific me
 
 :::tip MetaMask API playground
 The RPC methods are documented in the interactive
-[MetaMask JSON-RPC API Playground](https://metamask.github.io/api-playground/api-documentation/).
+[MetaMask JSON-RPC API Playground](/wallet/reference/wallet_watchasset).
 :::
 
 Methods in the API playground may have the following tags:
@@ -43,21 +43,21 @@ internally by MetaMask.
 
 Outside of [Snaps restricted methods](/snaps/reference/rpc-api/#restricted-methods), the only
 restricted method is
-[`eth_accounts`](https://metamask.github.io/api-playground/api-documentation/#eth_accounts), which
+[`eth_accounts`](/wallet/reference/eth_accounts), which
 allows you to access the user's Ethereum accounts.
 More restricted methods will be added in the future.
 
 ## Unrestricted methods
 
 Unrestricted methods have no corresponding permission, but they might still rely on permissions to
 succeed (for example, the signing methods require calling the restricted
-[`eth_accounts`](https://metamask.github.io/api-playground/api-documentation/#eth_accounts) method),
+[`eth_accounts`](/wallet/reference/eth_accounts) method),
 or they might require confirmation by the user (for example,
 [`wallet_addEthereumChain`](#wallet_addethereumchain)).
 
 The following are some MetaMask-specific unrestricted methods.
 For the full list of MetaMask JSON-RPC API methods, see the
-[API playground](https://metamask.github.io/api-playground/api-documentation/).
+[API playground](/wallet/reference/wallet_watchasset).
 
 ### eth_requestAccounts
 
@@ -68,7 +68,7 @@ This method is specified by [EIP-1102](https://eips.ethereum.org/EIPS/eip-1102).
 
 :::info
 Internally, this method calls [`wallet_requestPermissions`](#wallet_requestpermissions) for
-permission to call [`eth_accounts`](https://metamask.github.io/api-playground/api-documentation/#eth_accounts).
+permission to call [`eth_accounts`](/wallet/reference/eth_accounts).
 :::
 
 #### Returns
@@ -177,7 +177,7 @@ MetaMask also rejects the request if any of the following occurs:
   If you use an origin allowlist, they're blocked.
   :::
 - The RPC endpoint returns a different chain ID when
-  [`eth_chainId`](https://metamask.github.io/api-playground/api-documentation/#eth_chainId) is called.
+  [`eth_chainId`](/wallet/reference/eth_chainId) is called.
 - The chain ID corresponds to any default MetaMask chains.
 
 This method is specified by [EIP-3085](https://eips.ethereum.org/EIPS/eip-3085).