Replace npm/yarn/pnpm with npm2yarn

docs/dapp/opl/README.md

@@ -42,8 +42,8 @@ they handle from each other.
 Start by adding the [`@oasisprotocol/sapphire-contracts`] NPM package to your
 Hardhat project so you can import `OPL.sol`:
 
-```shell
-pnpm add @oasisprotocol/sapphire-contracts
+```shell npm2yarn
+npm install @oasisprotocol/sapphire-contracts
 ```
 
 [`@oasisprotocol/sapphire-contracts`]: http://npmjs.com/package/@oasisprotocol/sapphire-contracts

docs/dapp/opl/build.md

@@ -6,16 +6,16 @@ Now that we have written our two smart contracts, let's compile and deploy them!
 
 Compile both the host and enclave smart contracts by invoking:
 
-```sh
+```shell
 npx hardhat compile
 ```
 
 ### Deploying
 
 We can make deployments easier by using [Hardhat deploy](https://github.com/wighawag/hardhat-deploy).
 
-```sh
-pnpm install -D hardhat-deploy
+```shell npm2yarn
+npm install -D hardhat-deploy
 ```
 
 
@@ -104,13 +104,13 @@ index cd8df42..0875e8e 100644
 
 We can start local Hardhat node again:
 
-```sh
+```shell
 npx hardhat node
 ```
 
 Our deploy should succeed locally.
 
-```sh
+```shell
 npx hardhat deploy-local --network localhost
 Nothing to compile
 No need to generate any newer typings.
@@ -135,13 +135,13 @@ Chain [Faucet](https://testnet.bnbchain.org/faucet-smart) and Sapphire [faucet](
 
 We will use a common private key for both the host and enclave smart contracts.
 
-```sh
+```shell
 export PRIVATE_KEY=
 ```
 
 Deploy the enclave smart contract using Testnet parameters.
 
-```sh
+```shell
 npx hardhat deploy-ballot-box --network sapphire_testnet --host-network bsc_testnet
 Nothing to compile
 No need to generate any newer typings.
@@ -152,7 +152,7 @@ BallotBox 0xFb40591a8df155da291A4B52E4Df9901a95b7C06
 Next, use the obtained `BallotBox` address below to deploy the host smart
 contract:
 
-```sh
+```shell
 npx hardhat deploy-dao --network bsc_testnet --ballot-box-addr {BALLOT_BOX_ADDR}
 Nothing to compile
 No need to generate any newer typings.

docs/dapp/opl/frontend.md

@@ -10,7 +10,7 @@ We will take a shortcut and bypass developing a VueJS app. Instead, we will
 simply apply a sparse checkout of the complete frontend repo. Inside your
 `opl-secret-ballot` directory run:
 
-```sh
+```shell
 git init .
 git remote add -f origin https://github.com/oasisprotocol/playground
 git checkout origin/main opl-secret-ballot/frontend
@@ -23,18 +23,18 @@ Next, update the `@oasislabs/secret-ballot-backend` package name in
 We recommend using [pnpm](https://pnpm.io) to install dependencies, but `yarn`
 and `npm` will work with some modifications around workspaces.
 
-```sh
-pnpm install
+```shell npm2yarn
+npm install
 ```
 
 Compile and Hot-Reload for Development
-```sh
-pnpm run dev
+```shell npm2yarn
+npm run dev
 ```
 
 Build assets for deployment
-```sh
-pnpm run build
+```shell npm2yarn
+npm run build
 ```
 
 We can now reference the deployed contracts in our frontend Vue app.
@@ -61,8 +61,8 @@ VITE_PINATA_JWT=
 ### Start
 
 Start Vue app
-```sh
-pnpm run dev
+```shell npm2yarn
+npm run dev
 ```
 
 ### MetaMask

docs/dapp/opl/setup.md

@@ -5,7 +5,7 @@ version [18](https://nodejs.org/en/blog/announcements/v18-release-announce).
 
 We will be using a monorepo for both the frontend and backend of our dApp.
 
-```sh
+```shell
 mkdir opl-secret-ballot;
 mkdir opl-secret-ballot/backend;
 mkdir opl-secret-ballot/frontend;
@@ -35,14 +35,14 @@ specify the version of Hardhat to install.
 
 :::
 
-```sh
+```shell
 cd opl-secret-ballot/backend && npx hardhat
 ```
 
 When initializing the Hardhat application, we would like to use the `backend`
 directory as the project root.
 
-```sh
+```shell
 Hardhat project root: · /Users/oasis/opl-secret-ballot/backend
 ```
 
@@ -56,8 +56,8 @@ config file.
 - `@openzeppelin/contracts` contains standardized DAO contracts which we will
 use to build the secret ballot application.
 
-```sh
-pnpm install -D @openzeppelin/contracts @oasisprotocol/sapphire-contracts @oasisprotocol/sapphire-hardhat
+```shell npm2yarn
+npm install -D @openzeppelin/contracts @oasisprotocol/sapphire-contracts @oasisprotocol/sapphire-hardhat
 ```
 
 You should be able to start your localhost Hardhat node.

docs/dapp/sapphire/browser.md

@@ -19,13 +19,20 @@ Go ahead and clone the original [Hardhat boilerplate repo]. Move to the checked
 out folder and **apply the Sapphire-specific changes** to `hardhat.config.js`
 as [described in the quickstart][quickstart].
 
-Next, install dependencies and deploy the contract on the Testnet with the private
-key of the account holding some [TEST tokens]:
+Next, install dependencies. The boilerplate project uses
+[pnpm], but `yarn` and `npm` will also work with some modifications
+around workspaces:
 
+```shell npm2yarn
+npm install
+npm install -D @oasisprotocol/sapphire-paratime
 ```
-pnpm install
-pnpm add -D @oasisprotocol/sapphire-paratime
-PRIVATE_KEY="0x..." pnpm hardhat run scripts/deploy.js --network sapphire_testnet
+
+Now, you can deploy the contract on the Testnet with the private key of the
+account holding some [TEST tokens]:
+
+```shell
+PRIVATE_KEY="0x..." npx hardhat run scripts/deploy.js --network sapphire_testnet
 ```
 
 This will compile the contract and deploy it on the Testnet. In addition
@@ -46,9 +53,9 @@ out [line 66]. Read [the guide](guide.mdx#contract-logs) to learn more.
 Now, let's explore the frontend of our dApp. Begin by moving into the
 `frontend` folder and install dependencies:
 
-```shell
-pnpm install
-pnpm add -D @oasisprotocol/sapphire-paratime
+```shell npm2yarn
+npm install
+npm install -D @oasisprotocol/sapphire-paratime
 ```
 
 The main frontend logic is stored in `frontend/src/components/Dapp.js`. Apply
@@ -136,9 +143,14 @@ instances:
 
 ## Trying it
 
-Start the frontend by typing `pnpm run start`. If all goes well the web server
-will spin up and your browser should automatically open
-`http://localhost:3000`.
+Start the frontend by typing:
+
+```shell npm2yarn
+npm run start
+```
+
+If all goes well the web server will spin up and your browser should
+automatically open `http://localhost:3000`.
 
 ![Hardhat boilerplate frontend](../images/sapphire/hardhat-boilerplate-frontend1.png)
 
@@ -192,4 +204,5 @@ repository.
 [sapphire-testnet]: ./README.mdx#testnet
 [Sapphire ParaTime examples]: https://github.com/oasisprotocol/sapphire-paratime/tree/main/examples/hardhat-boilerplate
 [social-media]: ../../get-involved/README.md#social-media-channels
+[pnpm]: https://pnpm.io
 [TEST tokens]: quickstart.mdx#get-some-sapphire-testnet-tokens

docs/dapp/sapphire/gasless.md

@@ -277,9 +277,9 @@ Starting with an empty folder, let us install the
 [Oasis fork of the GSN command line tool](https://github.com/oasislabs/gsn) by
 using the following commands:
 
-```shell
-pnpm init
-pnpm install -D @oasislabs/opengsn-cli
+```shell npm2yarn
+npm init
+npm install -D @oasislabs/opengsn-cli
 ```
 
 Next, we will export our hex-encoded private key (**without** the leading `0x`)
@@ -380,8 +380,8 @@ the [upstream OpenGSN website](https://docs.opengsn.org/javascript-client/gsn-he
 
 First, install the OpenGSN contracts package:
 
-```shell
-pnpm install -D @opengsn/[email protected]
+```shell npm2yarn
+npm install -D @opengsn/[email protected]
 ```
 
 Then follow the remainder of the steps from the

docs/dapp/sapphire/precompiles.md

@@ -27,8 +27,8 @@ using the `contracts/Sapphire.sol` wrapper library for a more comfortable
 experience. The examples below are written against it. The library is provided
 by the `@oasisprotocol/sapphire-contracts` npm package.
 
-```shell
-yarn add -D @oasisprotocol/sapphire-contracts
+```shell npm2yarn
+npm install -D @oasisprotocol/sapphire-contracts
 ```
 
 Then, you can use the wrapper library inside your `.sol` contract file as

docs/dapp/sapphire/quickstart.mdx

@@ -49,11 +49,11 @@ We're going to use Hardhat, but Sapphire should be compatible with your dev
 environment of choice. Let us know if things are not as expected!
 
 1. Make & enter a new directory
-2. `npx hardhat@~2.12.0` then create a TypeScript project.
+2. `npx hardhat@~2.16.0` then create a TypeScript project.
 3. Add [`@oasisprotocol/sapphire-hardhat`] as dependency:
 
-  ```sh
-  pnpm add -D @oasisprotocol/sapphire-hardhat
+  ```shell npm2yarn
+  npm install -D @oasisprotocol/sapphire-hardhat
   ```
 
 4. Install `@nomicfoundation/hardhat-toolbox`, TypeScript and other peer
@@ -154,8 +154,8 @@ Pretty cool if you ask me!
 
 Anyway, make it happen by running
 
-```sh
-PRIVATE_KEY="0x..." pnpm hardhat run scripts/run-vigil.ts --network sapphire_testnet
+```shell
+PRIVATE_KEY="0x..." npx hardhat run scripts/run-vigil.ts --network sapphire_testnet
 ```
 
 And if you see something like the following, you'll know you're well on the road

docusaurus.config.js

@@ -32,7 +32,16 @@ const config = {
           numberPrefixParser: false,
           path: 'docs',
           beforeDefaultRemarkPlugins: [codeBlockSnippetsPlugin],
-          remarkPlugins: [crossRepoLinksPlugin],
+          remarkPlugins: [
+            crossRepoLinksPlugin,
+            [
+              require('@docusaurus/remark-plugin-npm2yarn'),
+              {
+                sync: true,                 // Sync the tab page across the whole docs website.
+                converters:['pnpm','yarn'], // Package managers to use.
+              },
+            ],
+          ],
           routeBasePath: '/',
           showLastUpdateTime: true,
           sidebarPath: require.resolve('./sidebars.js'),

package.json

@@ -22,6 +22,7 @@
     "@docusaurus/core": "^2.4.1",
     "@docusaurus/plugin-client-redirects": "^2.4.1",
     "@docusaurus/preset-classic": "^2.4.1",
+    "@docusaurus/remark-plugin-npm2yarn": "^2.4.1",
     "@easyops-cn/docusaurus-search-local": "^0.34.0",
     "@mdx-js/react": "^1.6.22",
     "@mermaid-js/mermaid-cli": "^9.3.0",

yarn.lock

@@ -1561,6 +1561,15 @@
     "@types/react" "*"
     prop-types "^15.6.2"
 
+"@docusaurus/remark-plugin-npm2yarn@^2.4.1":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@docusaurus/remark-plugin-npm2yarn/-/remark-plugin-npm2yarn-2.4.3.tgz#ce29ad152176e9ff746f142f1e2d02c2e6b76249"
+  integrity sha512-gBSzRPls2Nc1M+X8hTXLUJQ8mk+pTet7CGeTtgV02Hsk1G22yHYoCBW3r1aIqR27mVUHW9O5X4AN/Dt8x8Ifkg==
+  dependencies:
+    npm-to-yarn "^2.0.0"
+    tslib "^2.4.1"
+    unist-util-visit "^2.0.3"
+
 "@docusaurus/[email protected]":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/theme-classic/-/theme-classic-2.4.1.tgz#0060cb263c1a73a33ac33f79bb6bc2a12a56ad9e"
@@ -6808,6 +6817,11 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+npm-to-yarn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/npm-to-yarn/-/npm-to-yarn-2.1.0.tgz#ff4e18028d18eb844691f1ccb556be5f3ccfde34"
+  integrity sha512-2C1IgJLdJngq1bSER7K7CGFszRr9s2rijEwvENPEgI0eK9xlD3tNwDc0UJnRj7FIT2aydWm72jB88uVswAhXHA==
+
 nprogress@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
@@ -8866,6 +8880,11 @@ tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
   integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
 
+tslib@^2.4.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 [email protected]:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"