From f63d85889076766fc74e16f78d81359d3e9573de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matev=C5=BE=20Jekovec?= Date: Thu, 5 Oct 2023 16:21:31 +0200 Subject: [PATCH 1/3] config: Add @docusaurus/remark-plugin-npm2yarn --- docusaurus.config.js | 11 ++++++++++- package.json | 1 + yarn.lock | 19 +++++++++++++++++++ 3 files changed, 30 insertions(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 7583b48e6b..ef0eab005f 100644 --- a/docusaurus.config.js +++ b/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'), diff --git a/package.json b/package.json index 35b728937b..9c15c93b91 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 63dfa2b01e..1acd8c7de5 100644 --- a/yarn.lock +++ b/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/theme-classic@2.4.1": 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== + type-detect@4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c" From 5abefd5cf0b2b7f8805a02b368f803ccbd0aa45a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matev=C5=BE=20Jekovec?= Date: Thu, 5 Oct 2023 16:22:04 +0200 Subject: [PATCH 2/3] docs: Use npm2yarn wherever we use npm/yarn/pnpm --- docs/dapp/opl/README.md | 4 ++-- docs/dapp/opl/build.md | 4 ++-- docs/dapp/opl/frontend.md | 16 +++++++------- docs/dapp/opl/setup.md | 4 ++-- docs/dapp/sapphire/browser.md | 35 +++++++++++++++++++++---------- docs/dapp/sapphire/gasless.md | 10 ++++----- docs/dapp/sapphire/precompiles.md | 4 ++-- docs/dapp/sapphire/quickstart.mdx | 10 ++++----- 8 files changed, 50 insertions(+), 37 deletions(-) diff --git a/docs/dapp/opl/README.md b/docs/dapp/opl/README.md index b620575024..7901fe16bc 100644 --- a/docs/dapp/opl/README.md +++ b/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 diff --git a/docs/dapp/opl/build.md b/docs/dapp/opl/build.md index 7014e9eb59..146fc01555 100644 --- a/docs/dapp/opl/build.md +++ b/docs/dapp/opl/build.md @@ -14,8 +14,8 @@ npx hardhat compile 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 ``` diff --git a/docs/dapp/opl/frontend.md b/docs/dapp/opl/frontend.md index 0417d2ee97..7954a99c91 100644 --- a/docs/dapp/opl/frontend.md +++ b/docs/dapp/opl/frontend.md @@ -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 diff --git a/docs/dapp/opl/setup.md b/docs/dapp/opl/setup.md index 2f273e4649..fa2f8cb9a6 100644 --- a/docs/dapp/opl/setup.md +++ b/docs/dapp/opl/setup.md @@ -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. diff --git a/docs/dapp/sapphire/browser.md b/docs/dapp/sapphire/browser.md index 39b6de994c..747c504797 100644 --- a/docs/dapp/sapphire/browser.md +++ b/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 diff --git a/docs/dapp/sapphire/gasless.md b/docs/dapp/sapphire/gasless.md index a10fa4861f..7147ed8c4e 100644 --- a/docs/dapp/sapphire/gasless.md +++ b/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/contracts@3.0.0-beta.2 +```shell npm2yarn +npm install -D @opengsn/contracts@3.0.0-beta.2 ``` Then follow the remainder of the steps from the diff --git a/docs/dapp/sapphire/precompiles.md b/docs/dapp/sapphire/precompiles.md index ca9d89e759..1c09d2c27a 100644 --- a/docs/dapp/sapphire/precompiles.md +++ b/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 diff --git a/docs/dapp/sapphire/quickstart.mdx b/docs/dapp/sapphire/quickstart.mdx index e303fa3abd..527dbab28e 100644 --- a/docs/dapp/sapphire/quickstart.mdx +++ b/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 From 58f52a403b273cc81473753acdbec114832a2c6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matev=C5=BE=20Jekovec?= Date: Mon, 9 Oct 2023 11:46:25 +0200 Subject: [PATCH 3/3] docs: Rename sh -> shell in codeblocks for consistency --- docs/dapp/opl/build.md | 12 ++++++------ docs/dapp/opl/frontend.md | 2 +- docs/dapp/opl/setup.md | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/dapp/opl/build.md b/docs/dapp/opl/build.md index 146fc01555..38e97ded81 100644 --- a/docs/dapp/opl/build.md +++ b/docs/dapp/opl/build.md @@ -6,7 +6,7 @@ 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 ``` @@ -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. diff --git a/docs/dapp/opl/frontend.md b/docs/dapp/opl/frontend.md index 7954a99c91..7ed4099190 100644 --- a/docs/dapp/opl/frontend.md +++ b/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 diff --git a/docs/dapp/opl/setup.md b/docs/dapp/opl/setup.md index fa2f8cb9a6..fa717959f1 100644 --- a/docs/dapp/opl/setup.md +++ b/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 ```