From 9a82ce7686dac557bd271a41ab286fdfc5113815 Mon Sep 17 00:00:00 2001 From: guanbinrui Date: Wed, 16 Mar 2022 11:22:41 +0800 Subject: [PATCH 01/30] docs: add setup doc --- docs/FAQ.md | 15 ++++++ docs/caveats.md | 129 ----------------------------------------------- docs/concepts.md | 21 ++++++++ docs/setup.md | 111 ++++++++++++++++++++++++++++++++++++++++ docs/toc.md | 58 +++++++++++++++++++++ 5 files changed, 205 insertions(+), 129 deletions(-) create mode 100644 docs/FAQ.md delete mode 100644 docs/caveats.md create mode 100644 docs/concepts.md create mode 100644 docs/setup.md create mode 100644 docs/toc.md diff --git a/docs/FAQ.md b/docs/FAQ.md new file mode 100644 index 000000000000..067d42129d5c --- /dev/null +++ b/docs/FAQ.md @@ -0,0 +1,15 @@ +# FAQ + +## How to resolve merge conflicts in `pnpm-lock.yaml`? + +Do not try to pick either side of the lockfile. + +Drop both "ours" and "theirs" version (then the file will be in the base version). + +Then run `pnpm install` to up the lockfile to date. + +### My Git hooks don't work. + +```bash +npx husky install # on project root directory +``` diff --git a/docs/caveats.md b/docs/caveats.md deleted file mode 100644 index 476773684f88..000000000000 --- a/docs/caveats.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -author: Jack-Works -maintainer: - - Jack-Works - - Septs ---- - -# Caveats for developers - -Hi, Welcome to the Mask Network. Here is some note for developing Mask Network. - -Storybooks are deployed to - -## Setup - -This section is going to help you to set up the development environment of Mask Network. - -### Requirements - -To develop Mask Network, you need to have ... - -- Node 16 or higher -- [pnpm](https://pnpm.js.org) 6.32.1 - -## Development - -### Install - -```bash -pnpm install -``` - -If you encounter with error `EACCES: permission denied, open...'`, -please run `chown -R $USER /pathToYourProject/Mask` to solve. - -### Start the development server - -`pnpm start` is a preset of development command for Chromium-based browsers. - -If you need to develop in other environments (for example, firefox), please run `pnpm run go`, -it is an interactive CLI tool to help you to learn out how to compose the build flags. - -### Load extension into Chrome - -- Open `chrome://extensions` -- Switch on "**Developer mode**" -- Click "**Load unpacked version**" -- Select - - `project_root/dist` folder (in **development mode**) - - `project_root/build` folder (after a **production mode** build). - -### Load extension into Firefox - -- Open `about:debugging#/runtime/this-firefox` -- Click "**Load Temporary Add-on**" -- Select any file in the `dist` folder - -### Hot Module Reload - -This project supports Hot Module Reload which fasten the development process. - -To disable HMR, set an environment variable `NO_HMR` to _true_. - -### Debug tricks for Chromium-based devtools - -#### Debug Background Service - -To debug _background service_, click links right after **Inspect views** - -![An image displaying Chrome extension manage page](https://user-images.githubusercontent.com/5390719/103509131-5ce0cb00-4e9d-11eb-9aec-b24b9888b863.png) - -#### Debug Content Script - -To debug _content script_, open the devtools in the web page, -then you can select context as the following picture describes. - -![An image displaying how to select Mask Network as the debug context](https://user-images.githubusercontent.com/5390719/103509436-1a6bbe00-4e9e-11eb-9b18-bde021337944.png) - -It's important to select the correct context when you're debugging, -otherwise you cannot access all the global variables, -_save as temp variables_ also fails. - -#### Use React Devtools - -Run the following command to start the React Devtools. It doesn't work if you install it as a browser extension. - -> pnpx react-devtools - -Due to bug , React Devtools is conflict with React Fast Refresh. - -Please use the following command, it will start the development process in profile mode, which disables React Fast Refresh and enables React Devtools. - -> pnpx dev profile - -## Contribute your working - -### Git conversions - -`master` branch is our developing branch, `released` branch points to the latest released version. -[Git flow](https://github.com/nvie/gitflow) is recommended but not enforced. - -Please use [Conventional Commits](https://www.conventionalcommits.org) when committing. - -### Git hook not working - -```bash -npx husky install # on project root directory -``` - -### Using Git - -- [Using git rebase on the command line](https://docs.github.com/en/github/getting-started-with-github/using-git-rebase-on-the-command-line) -- [Configuring a remote for a fork](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/configuring-a-remote-for-a-fork) -- [Syncing a fork](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/syncing-a-fork) - -## Caveats for Library - -- `lodash`, List of unavailable functions. - 1. `_.chain` (not friendly to tree-shake). - 2. `_.template` (see [#1865](https://github.com/DimensionDev/Maskbook/issues/1865)) -- `crypto`, the Node.js built-in library cannot be used in the project. Please use Web Crypto API instead. - -## How to resolve merge conflicts in `pnpm-lock.yaml`? - -Do not try to pick either side of the lockfile. - -Drop both "ours" and "theirs" version (then the file will be in the base version). - -Then run `pnpm install` to up the lockfile to date. diff --git a/docs/concepts.md b/docs/concepts.md new file mode 100644 index 000000000000..be989e6b684b --- /dev/null +++ b/docs/concepts.md @@ -0,0 +1,21 @@ +# Concepts + +## Persona + +## Post Payload + +## Wallet + +## Dashboard + +## Popup + +## SNS Provider + +## Wallet Provider + +## Plugin + +## Network (Network as Plugin) + +## ChainId diff --git a/docs/setup.md b/docs/setup.md new file mode 100644 index 000000000000..fb5eee598a92 --- /dev/null +++ b/docs/setup.md @@ -0,0 +1,111 @@ +# Setup + +Hi, Welcome to the Mask Network. This guide will quickly take you through setting up the extension development environment. + +## Requirements + +Here is a snippet of engines requirements in the `package.json` of Mask Network. As you see, `NodeJS` and `pnpm` are required at least a specific version. + +```json +"engines": { + "node": ">=16.0.0", + "pnpm": ">=6.32.1", + } +``` + +## Install + +### NodeJS + +Please install NodeJS from the official document [here](https://nodejs.org/en/). Or install it from a Node version manager, e.g., [nvm](https://github.com/nvm-sh/nvm). + +### pnpm + +The [pnpm](https://pnpm.io/) is a disk space-efficient package manager. After NodeJS is preinstalled. You could easily get pnpm from + +```bash +npm install -g pnpm +``` + +Now, you will need to have packages installed to start development. + +```bash +pnpm install +``` + +> If you encounter with error `EACCES: permission denied, open...'`, please run `chown -R $USER /pathToYourProject/Mask` to solve. + +### Start the local development server + +For Chromium-based browsers (Chrome, Opera, Edge, etc.), please run `pnpm start`. It's preset of many development commands. + +If you need to develop in other environments (for example, Firefox), please run `pnpm run go`. It is an interactive CLI tool to help you learn how to compose the build flags. + +### Load the extension into your browser + +Mask Network has a huge codebase, and it might take time to let the webpack fully startup. It outcomes the `disk/` folder, which contains the unpacked source files of a development version of the Mask Network extension. + +For Chrome, + +- Open `chrome://extensions` or `Settings -> Extensions`. +- Turn on the `Developer mode` on the top right corner. +- It will present a top toolbar with an action button `Load unpacked` on it. Click it and choose the `dist/` folder to load the unpacked version of the Mask Network extension. You can drag and drop the `dist` folder into this page. +- If everything goes fine. Then, the Mask Network will guide you to the setup process. + +For Firefox, it's quite the same process. + +- Open `about:debugging#/runtime/this-firefox` +- Click the `Load Temporary Add-on…` and select the `dist/` folder to load the unpacked extension. +- If everything goes fine. The Mask Network will start to guide you to the setup process. + +## Debugging + +There is no difference between extension development and normal web development. As normal web development, only one front-end page to have, but an extension could have more than one page simultaneously. A background page without a user interface running all the time and an options page just like a normal web page with which users can interact. Moreover, an extension could inject content script into the currently visiting page with the allowance from the users. + +### Debug the background page + +The background page of the Mask Network extension maintains a bunch of fundamental services for front-end functions. Like Crypto Algorithm, Web3 SDKs, APIs to many third-party data providers, etc. They are stand-by all the time, once to be called for a specific task. + +To debug _background service_, click links right after **Inspect views** + +![An image displaying Chrome extension manage page](https://user-images.githubusercontent.com/5390719/103509131-5ce0cb00-4e9d-11eb-9aec-b24b9888b863.png) + +### Debug the content script + +Mask Network only injects content script with the permission approved by the user. For each new SNS website that Mask Network is going to support. It will present a prompt dialog for asking permission dynamically, rather than asking for all mightly permission at the plugin got installed. + +To debug _content script_, open the dev tools in the web page, +then you can select context as the following picture describes. + +![An image displaying how to select Mask Network as the debug context](https://user-images.githubusercontent.com/5390719/103509436-1a6bbe00-4e9e-11eb-9b18-bde021337944.png) + +It's important to select the correct context when you're debugging, +otherwise, you cannot access all the global variables, +_save as temp variables_ also fails. + +### Use React Devtools + +Run the following command to start the React Devtools. It doesn't work if you install it as a browser extension. + +> pnpx react-devtools + +Due to bug , React Devtools conflicts with React Fast Refresh. + +Please use the following command, and it will start the development process in profile mode, which disables React Fast Refresh and enables React Devtools. + +> pnpx dev profile + +## Contribute your working + +### Git conversions + +The `develop` branch is our developing branch, and the `released` branch points to the latest released version. +[Git flow](https://github.com/nvie/gitflow) is recommended but not enforced. + +Please use [Conventional Commits](https://www.conventionalcommits.org) when do committing. + +### Using Git + +- [Using git rebase on the command line](https://docs.github.com/en/github/getting-started-with-github/using-git-rebase-on-the-command-line) +- [Configuring a remote for a fork](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/configuring-a-remote-for-a-fork) +- [Syncing a fork](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests) diff --git a/docs/toc.md b/docs/toc.md new file mode 100644 index 000000000000..ab6c01cfb560 --- /dev/null +++ b/docs/toc.md @@ -0,0 +1,58 @@ +# TOC + +## Quick Start + +## Setup + +[setup](./setup.md) + +## Concepts + +- Persona +- Post Payload +- Wallet +- Dashboard +- Pop up +- SNS Provider +- Wallet Provider +- Plugin +- Network (Network as Plugin) +- ChainID + +## Guides + +- Plugin Development Guide +- Website Integration Guide +- Blockchain Integration Guide +- Wallet Provider Integration Guide +- i18n +- Form Guide + +## UI Components + +- shared +- Mask Icons + +## ECOSYSTEM + +- MaskBox +- MaskBridge + +## Reference + +- TypedMessage +- Mask Flavored EVM JSON RPC methods +- @mask/plugin-infra +- @mask/web3-constants +- @mask/web3-contracts +- @mask/web3-shared +- @mask/web3-providers + +## FAQ + +- Why there are two plugins folder in the codebase? +- How to bypass the CSP constraint? +- Help! My service doesn’t return a CORS header. +- How to read and clean my local settings? +- How to fix cspell errors? +- How to close react strict mode? From b7e956ca60b01e301865d22a98ad8e70d44eaf67 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Wed, 16 Mar 2022 12:29:27 +0800 Subject: [PATCH 02/30] docs: content script approve permission Co-authored-by: Jack Works --- docs/setup.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/setup.md b/docs/setup.md index fb5eee598a92..31ef8dfdab41 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -72,7 +72,9 @@ To debug _background service_, click links right after **Inspect views** ### Debug the content script -Mask Network only injects content script with the permission approved by the user. For each new SNS website that Mask Network is going to support. It will present a prompt dialog for asking permission dynamically, rather than asking for all mightly permission at the plugin got installed. +Mask Network only injects content script with permission from the user. + +For every new website that Mask Network is going to support, it will show a prompt dialog to ask permission dynamically, rather than asking for all mightly permission at the plugin got installed. To debug _content script_, open the dev tools in the web page, then you can select context as the following picture describes. From 87fe999af24a37bccc35f1e503c1c3cd3785f7f3 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Wed, 16 Mar 2022 12:29:40 +0800 Subject: [PATCH 03/30] docs: update command Co-authored-by: Jack Works --- docs/setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/setup.md b/docs/setup.md index 31ef8dfdab41..dbd785a6520b 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -95,7 +95,7 @@ Due to bug , React Devtools conf Please use the following command, and it will start the development process in profile mode, which disables React Fast Refresh and enables React Devtools. -> pnpx dev profile +> pnpx dev --profile ## Contribute your working From 448fdd178b0440055a75659b6c1422ec71301961 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Wed, 16 Mar 2022 12:29:57 +0800 Subject: [PATCH 04/30] docs: update git conversion Co-authored-by: Jack Works --- docs/setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/setup.md b/docs/setup.md index dbd785a6520b..2d74bfc3db16 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -104,7 +104,7 @@ Please use the following command, and it will start the development process in p The `develop` branch is our developing branch, and the `released` branch points to the latest released version. [Git flow](https://github.com/nvie/gitflow) is recommended but not enforced. -Please use [Conventional Commits](https://www.conventionalcommits.org) when do committing. +Your commit message should follow [Conventional Commits](https://www.conventionalcommits.org). ### Using Git From b0c61a70a9c9393dc9d3a01363de3f21b0610c8f Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Wed, 16 Mar 2022 12:30:30 +0800 Subject: [PATCH 05/30] docs: debugging section Co-authored-by: Jack Works --- docs/concepts.md | 2 +- docs/setup.md | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/concepts.md b/docs/concepts.md index be989e6b684b..8f2f9615e826 100644 --- a/docs/concepts.md +++ b/docs/concepts.md @@ -16,6 +16,6 @@ ## Plugin -## Network (Network as Plugin) +## Network ## ChainId diff --git a/docs/setup.md b/docs/setup.md index 2d74bfc3db16..f5ec718be6e4 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -60,7 +60,9 @@ For Firefox, it's quite the same process. ## Debugging -There is no difference between extension development and normal web development. As normal web development, only one front-end page to have, but an extension could have more than one page simultaneously. A background page without a user interface running all the time and an options page just like a normal web page with which users can interact. Moreover, an extension could inject content script into the currently visiting page with the allowance from the users. +There is no difference between extension development and normal web development. In normal web development, you only have a single web page (SPA), but an extension could have more than one page. + +There is an invisible "background page" running all the time and an "options page" like a normal web page. Moreover, an extension could inject "content script" into the currently visiting web page. ### Debug the background page From 3eedc2569a5d19d31c1bf30a36b29f4fcb384eb4 Mon Sep 17 00:00:00 2001 From: Randolph Chen Date: Tue, 15 Mar 2022 16:15:39 +0800 Subject: [PATCH 06/30] feat: add plugin development quickstart --- docs/Plugin-Development-Quickstart.md | 31 +++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 docs/Plugin-Development-Quickstart.md diff --git a/docs/Plugin-Development-Quickstart.md b/docs/Plugin-Development-Quickstart.md new file mode 100644 index 000000000000..b5b33ce60d6b --- /dev/null +++ b/docs/Plugin-Development-Quickstart.md @@ -0,0 +1,31 @@ +--- +author: Randolph +--- + +# Quickstart for Plugin Development + +## 1. Start a plugin file + +input following code to start a plugin file + +> npx gulp new-pkg + +...(a brief introduction about the files generated) + +## 2. How to inject ui + +1. change definitions in SNSAdaptor to add entry +2. what is metadata and how to decode and encode metadata + if we want to inject ui in a post, we need metadata that contains related infomation +3. write ui by our component + +## 3. How to interact with worker + +1. how to write Service to manage data +2. a brief introduction about backend page + +## 4. How to interact with blockchain + +1. how to send a transaction +2. how to get data stored in the blockchain +3. a brief introduction about transaction process From d251bc85c3a6fdb89fdc5f698f27ef68c4f9cd09 Mon Sep 17 00:00:00 2001 From: Randolph Chen Date: Tue, 15 Mar 2022 16:41:28 +0800 Subject: [PATCH 07/30] feat: change file name --- ...Development-Quickstart.md => plugin-development-quickstart.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/{Plugin-Development-Quickstart.md => plugin-development-quickstart.md} (100%) diff --git a/docs/Plugin-Development-Quickstart.md b/docs/plugin-development-quickstart.md similarity index 100% rename from docs/Plugin-Development-Quickstart.md rename to docs/plugin-development-quickstart.md From 03ff8492b9b644e280077cc1078d0e7dd1420579 Mon Sep 17 00:00:00 2001 From: guanbinrui Date: Wed, 16 Mar 2022 17:42:14 +0800 Subject: [PATCH 08/30] docs: add more docs --- docs/evm-integration.md | 26 +++++-- docs/mask-flavored-jsonrpc-api.md | 113 ++++++++++++++++++++++++++++ docs/wallet-provider-integration.md | 96 +++++++++++++++++++++++ 3 files changed, 230 insertions(+), 5 deletions(-) create mode 100644 docs/mask-flavored-jsonrpc-api.md create mode 100644 docs/wallet-provider-integration.md diff --git a/docs/evm-integration.md b/docs/evm-integration.md index 7cfddfc9ecf8..0958afa374d1 100644 --- a/docs/evm-integration.md +++ b/docs/evm-integration.md @@ -57,6 +57,25 @@ If there is no one deployed [these contracts](https://github.com/DimensionDev/mi - [ ] BalanceChecker - [ ] Other contracts from the Mask team +### Translate JSON-RPC + +For a chain that follows a different JSON-RPC protocol with the [Ethereum](https://eth.wiki/json-rpc/API), a transactor is used to `encode` and `decode` each request and make the chain just like an EVM-compatible one. + +E.g., the CELO chain can pay the transaction fee with non-native tokens. It supports to use [`feeCurrency`](https://docs.celo.org/celo-codebase/protocol/transactions/erc20-transaction-fees) field to set the token address, which doesn't exist in the original [`eth_sendTransaction`](https://eth.wiki/json-rpc/API#eth_sendtransaction) payload. You can fulfill this requirement by a transactor without altering any JSON-RPC facilities. + +```ts +class CeloTranslator extends Base { + override encode(context: Context) { + context.config = { + ...context.config, + feeCurrency: '0x0000000000000000000000000000000000000001', // suppose it's a token address + } + } +} +``` + +### 🎉 + Congratulation! You have done the coding part. ## Testing Checklist @@ -72,11 +91,8 @@ Before we ship the chain to the user, we need to do basic ability checks. ![image](https://user-images.githubusercontent.com/52657989/144754788-460bad98-bf62-4e5e-8592-ea8580430e63.png) - [ ] Check if the gas estimate dialog is working. - - Setup the chain for CoinGecko API. -Goto `chrome-extension://jkoeaghipilijlahjplgbfiocjhldnap/dashboard.html#/wallets/transfer` and check the estimated USD value is working. - -![image](https://user-images.githubusercontent.com/52657989/144754866-9c5f389b-6eb4-4325-8f3d-ae53ee6e3b4a.png) + - Setup the chain for CoinGecko API. - [ ] Trade with the DEX on the chain. @@ -91,7 +107,7 @@ Goto `chrome-extension://jkoeaghipilijlahjplgbfiocjhldnap/dashboard.html#/wallet - [ ] Transfer token on the transfer page of Dashboard and the wallet tab of the plugin popup. -## Learn More +## Examples | Chain | Pull Request Link | | --------- | ---------------------------------------------------- | diff --git a/docs/mask-flavored-jsonrpc-api.md b/docs/mask-flavored-jsonrpc-api.md new file mode 100644 index 000000000000..e80526e48da5 --- /dev/null +++ b/docs/mask-flavored-jsonrpc-api.md @@ -0,0 +1,113 @@ + + +# Mask Flavored JSON RPC API + +## Transaction + +### mask_watchTransaction + +Periodically retrieve the transaction receipt and cache the result in the background. + +> Note: The [`eth_getTransactionReceipt`](https://eth.wiki/json-rpc/API#eth_gettransactionreceipt) will read receipt from the cache instead of the RPC provider. If you really need the instant receipt you should use `mask_getTransactionReceipt`. + +#### Parameters + +- `string` the hash of transaction +- `config` the transaction config object. Learn more: [`eth_sendTransaction`](https://eth.wiki/json-rpc/API#eth_sendtransaction). + +#### Returns + +- `void` + +### mask_unwatchTransaction + +Stop watching a transaction. It means invoke [`eth_getTransactionReceipt`](https://eth.wiki/json-rpc/API#eth_gettransactionreceipt) with the given hash will always return `null`. + +#### Parameters + +- `string` the hash of transaction + +#### Returns + +- `void` + +### mask_getTransactionReceipt + +The non-hijacked version of [`eth_getTransactionReceipt`](https://eth.wiki/json-rpc/API#eth_gettransactionreceipt). + +### mask_replaceTransaction + +Replace a transaction with the given one. + +#### Parameters + +- `string` the hash of the transaction to be replaced +- `config` the transaction config object. Learn more: [`eth_sendTransaction`](https://eth.wiki/json-rpc/API#eth_sendtransaction). + +#### Returns + +- `void` + +### mask_cancelTransaction + +Cancel the given transaction. + +#### Parameters + +- `string` the hash of the transaction to be canceled +- `config` the transaction config object. Learn more: [`eth_sendTransaction`](https://eth.wiki/json-rpc/API#eth_sendtransaction). + +#### Returns + +- `void` + +### mask_confirmTransaction + +Confirm to send a risk transaction. + +#### Parameters + +- `void` + +#### Returns + +- `void` + +### mask_rejectTransaction + +Reject to send a risk transaction. + +#### Parameters + +- `void` + +#### Returns + +- `void` + +## Wallet + +### mask_requestAccounts + +Connect to any wallet on the back of Mask Network. + +#### Parameters + +- `number` or `void` the chain id of the expected chain +- `string` or `void` the network id of the expected chain (`NetworkPluginID`) + +#### Returns + +- `void` + +### mask_dismissAccounts + +Disconnect with the connected wallet. + +#### Parameters + +- `void` + +#### Returns + +- `void` diff --git a/docs/wallet-provider-integration.md b/docs/wallet-provider-integration.md new file mode 100644 index 000000000000..8e6a9f27e75a --- /dev/null +++ b/docs/wallet-provider-integration.md @@ -0,0 +1,96 @@ +# A new EVM-compatible wallet provider to Mask Network + +Any wallet available in a browser environment can integrate into Mask Network. Well know wallets like [MetaMask](https://metamask.io/), [WalletConnect](https://docs.walletconnect.com/) and [Fortmatic](https://fortmatic.com/) have already been integrated. Besides that, Mask Network is also able to host accounts by itself. + +## Overview + +```txt + Front End Page Background Page ++------------------+ +-----------------+ +| User | - Messaging API ---------- | RPC Composer | ++------------------+ +-----------------+ + | | ++------------------+ +-----------------+ +-----------------+ +| Bridge Component | - Event Emitter-- | Other Wallets | | Mask Wallet | ++------------------+ +-----------------+ +-----------------+ + | | ++------------------+ | +| Wallet SDK | | ++------------------+ | + | | + +------------------------- Network --------------------------+ +``` + +Above is an architecture overview illustrating how Mask Network integrates multiple wallets simultaneously. Roughly speaking, it includes two parts: the bridge component on the front end, and the JSON-RPC composer on the background end. They communicate with each other by leveraging the [Messaging Passing API](https://developer.chrome.com/docs/extensions/mv3/messaging/). + +As a quick example to let you know how all stuff spins. Here is a UI button that will emit an `eth_getBlockNumber` request once it is clicked. + +```tsx +import { useWeb3 } from '@masknet/web3-shared-evm' +function Example() { + const web3 = useWeb3() + const onClick = useCallback(async () => { + const blockNumber = await web3.eth.getBlockNumber() + console.log(`The current block number is ${blockNumber}.`) + }, [web3]) + return +} +``` + +First of all, it creates a [Web3](https://web3js.readthedocs.io/) instance which redirects all JSON-RPC requests to the [request](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/request.ts) service on the background page. If you'd like to read the source code, you will realise that there is a [Koa.js](https://koajs.com/) styled [composer](https://github.com/koajs/compose) built-in. A list of middleware is used and serve different purposes: a middleware stores transactions into DB, a middleware watches transaction status, a middleware notifies transaction progress, and so on. + +At the current stage, there are two kinds of wallets: Mask Wallet and other wallets. + +Mask Wallet sends requests to the network directly on the background page. If the request takes the response, then the user will get notified. + +But it's not that simple for other wallets. They are supported only on the front end. E.g., the [Fortmatic](https://docs.fortmatic.com/) SDK injects an iframe on the currently visiting page. Mask Network cannot invoke those SDKs on the background page as an extension. Because of that, they should take their requests to the front end and handle them there. Many mounted components, so-called `ProviderBridge`, listen to the `PROVIDER_RPC_REQUEST` event and call the corresponding SDK once they receive any request from the background. After the SKD finishes the work, they return the result to the bridged provider on the background page with the `PROVIDER_RPC_RESPONSE` event. + +It takes a quite long detour, but the benefit is all requests can leverage Mask Wallet abilities. + +## A Wallet on a bridged provider + +If the wallet that only works on the front end. It needs to use the bridged provider way. + +On the front end: + +- create a bridged provider by implementing the [`EIP1193Provider`](https://github.com/DimensionDev/Maskbook/blob/develop/packages/web3-shared/evm/types/index.ts) interface. +- instantiate the bridged provider in [useBridgedProvider](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/plugins/EVM/hooks/useBridgedProvider.ts) which was used by [``](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/plugins/EVM/UI/components/ProviderBridge.tsx). +- add a new `` in the [EVM](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/plugins/EVM/UI/SNSAdaptor/index.tsx) plugin to receive events from the background page. + +On the background page: + +- instantiate a [BridgedProvider](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/providers/Bridged.ts) and add it into the supported list in [getProvider](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/provider.ts). + +## A wallet without any UI + +If the wallet is totally UI free and can connect/disconnect by calling some APIs. It can send requests to those APIs directly. + +On the background page: + +- create a provider to extend from the [BaseProvider](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts) interface and add it into the supported list in [getProvider](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/provider.ts). + +## Interceptor + +The implementation of Ethereum JSON-RPC may very different between wallets. Those JSON-RPC requests will need some preprocessing before sending to the real wallet. Nevertheless, the Mask Network flavors a bunch of self-known RPC methods that were unknown to other wallets. Bypassing a such request will hit an unimplemented error. + + + +For this sake, the [`composer`](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/composer.ts) creates a middleware for intercepting JSON-RPC requests. Here is a quick example that converts the Mask Network flavored [`mask_requestAccounts`](./mask-flavored-jsonrpc-api.md#mask_requestaccounts) into an Ethereum styled [`eth_accounts`](https://eth.wiki/json-rpc/API#eth_accounts). + +```ts +export class Example implements Middleware { + async fn(context: Context, next: () => Promise) { + switch (context.method) { + case EthereumMethodType.MASK_REQUEST_ACCOUNTS: + context.requestArguments = { + ...context.requestArguments, + method: EthereumMethodType.ETH_ACCOUNTS, + } + break + default: + break + } + await next() + } +} +``` From ec3b18d7a71fee60d6b80e1f4d3697c8bf09a567 Mon Sep 17 00:00:00 2001 From: guanbinrui Date: Wed, 16 Mar 2022 18:01:12 +0800 Subject: [PATCH 09/30] docs: update bounty guide --- docs/bounty-development-guide.md | 44 +++++++++++++++++++++++++++++ docs/bounty-guide.md | 15 ---------- docs/evm-integration.md | 5 ++-- docs/mask-flavored-jsonrpc-api.md | 18 ++++++------ docs/setup.md | 7 +++-- docs/toc.md | 2 +- docs/wallet-provider-integration.md | 3 +- 7 files changed, 62 insertions(+), 32 deletions(-) create mode 100644 docs/bounty-development-guide.md delete mode 100644 docs/bounty-guide.md diff --git a/docs/bounty-development-guide.md b/docs/bounty-development-guide.md new file mode 100644 index 000000000000..da9c0ccdd9b4 --- /dev/null +++ b/docs/bounty-development-guide.md @@ -0,0 +1,44 @@ +# Bounty Development Guide + +Hi, Awesome people! Welcome to start a bounty task on Mask Network. + +## Tech Reqirements + +Mask Network extension is mainly written in TypeScript. The UI part is building with React upon [MUI](https://mui.com/getting-started/installation/) framework. Also, we write [CSS-in-JS](css-in-js.md). Use webpack to build the project. Besides that, we prefer widely adopting tech solutions that includes: + +- [Web3.js](https://web3js.readthedocs.io/) Ethereum JavaScript API +- [react-use](https://streamich.github.io/react-use/) React Hooks — 👍 +- [bignumber.js](https://mikemcl.github.io/bignumber.js/) A JavaScript library for arbitrary-precision arithmetic. +- [lodash](https://lodash.com/docs/) A modern JavaScript utility library delivering modularity, performance & extras. +- [urlcat](https://urlcat.dev/) A URL builder library for JavaScript. + +> If your bounty task is related to another project, it could have extra requirements that need to consider. + +The codebase is totally open sourced. Anyone can review it. If you are familiar with these libraries mentioned above, it will take less friction for you to get start. + +## General Content + +Firstly, you can clone the repository and [set up the development environment](setup.md). The codebase is easy to understand, although with a huge size. It's only a tree of packages. Each package serves a specific purpose, as its name says. Let's take a quick tour. + +### Core Packages + +- `packages/mask` The core part of the extension which adapts multiple social networks into the system, keeps the user's data safty, implements encrpytion & decryption protocols, and hosts a plugin system. +- `packages/plugin-infra` The definition of the plugin system, with a bunch of APIs to expose the core abilities to plugins. + +### Plugin Packages + +- `packages/plugins/*` + +### Shared Packages + +### Web3 Related Packages + +- `packages/web3-*` + +## Plugin + +If you want's add plugin, then MUST read this file [Plugin Development Guide](plugin-development-guide.md) + +## Internationalization (i18n) + +If you want's update locale, then MUST read this file [i18n Guide](i18n-guide.md) diff --git a/docs/bounty-guide.md b/docs/bounty-guide.md deleted file mode 100644 index 11b8a3dfeed8..000000000000 --- a/docs/bounty-guide.md +++ /dev/null @@ -1,15 +0,0 @@ -# Bounty Developer Guide - -## General content - -- [Mask Network Architecture Overview](ARCHITECTURE.md) -- [Caveats for developers](caveats.md) -- [How to use CSS in JS](css-in-js.md) - -## Plugin - -If you want's add plugin, then MUST read this file [Plugin Development Guide](plugin-development-guide.md) - -## Internationalization (i18n) - -If you want's update locale, then MUST read this file [i18n Guide](i18n-guide.md) diff --git a/docs/evm-integration.md b/docs/evm-integration.md index 0958afa374d1..724554355452 100644 --- a/docs/evm-integration.md +++ b/docs/evm-integration.md @@ -80,16 +80,15 @@ Congratulation! You have done the coding part. ## Testing Checklist -Before we ship the chain to the user, we need to do basic ability checks. +Here is a checklist for the basic abilities of a chain. Also, if you are a hunter of chain bounty, please do this list before inviting the team. - [ ] Check if the asset list and transaction history on the dashboard page work when you choose the chain as the network. - Setup the chain for DeBank API. - [ ] Check if the trending view is working. Try to hover a new chain token in any tweets. + - Setup the chain for Coingecko API. - Setup the chain for CoinMarketCap API. -![image](https://user-images.githubusercontent.com/52657989/144754788-460bad98-bf62-4e5e-8592-ea8580430e63.png) - - [ ] Check if the gas estimate dialog is working. - Setup the chain for CoinGecko API. diff --git a/docs/mask-flavored-jsonrpc-api.md b/docs/mask-flavored-jsonrpc-api.md index e80526e48da5..0403bdebfe94 100644 --- a/docs/mask-flavored-jsonrpc-api.md +++ b/docs/mask-flavored-jsonrpc-api.md @@ -4,7 +4,7 @@ ## Transaction -### mask_watchTransaction +### `mask_watchTransaction` Periodically retrieve the transaction receipt and cache the result in the background. @@ -19,7 +19,7 @@ Periodically retrieve the transaction receipt and cache the result in the backgr - `void` -### mask_unwatchTransaction +### `mask_unwatchTransaction` Stop watching a transaction. It means invoke [`eth_getTransactionReceipt`](https://eth.wiki/json-rpc/API#eth_gettransactionreceipt) with the given hash will always return `null`. @@ -31,11 +31,11 @@ Stop watching a transaction. It means invoke [`eth_getTransactionReceipt`](https - `void` -### mask_getTransactionReceipt +### `mask_getTransactionReceipt` The non-hijacked version of [`eth_getTransactionReceipt`](https://eth.wiki/json-rpc/API#eth_gettransactionreceipt). -### mask_replaceTransaction +### `mask_replaceTransaction` Replace a transaction with the given one. @@ -48,7 +48,7 @@ Replace a transaction with the given one. - `void` -### mask_cancelTransaction +### `mask_cancelTransaction` Cancel the given transaction. @@ -61,7 +61,7 @@ Cancel the given transaction. - `void` -### mask_confirmTransaction +### `mask_confirmTransaction` Confirm to send a risk transaction. @@ -73,7 +73,7 @@ Confirm to send a risk transaction. - `void` -### mask_rejectTransaction +### `mask_rejectTransaction` Reject to send a risk transaction. @@ -87,7 +87,7 @@ Reject to send a risk transaction. ## Wallet -### mask_requestAccounts +### `mask_requestAccounts` Connect to any wallet on the back of Mask Network. @@ -100,7 +100,7 @@ Connect to any wallet on the back of Mask Network. - `void` -### mask_dismissAccounts +### `mask_dismissAccounts` Disconnect with the connected wallet. diff --git a/docs/setup.md b/docs/setup.md index f5ec718be6e4..304231c7cde5 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -68,7 +68,7 @@ There is an invisible "background page" running all the time and an "options pag The background page of the Mask Network extension maintains a bunch of fundamental services for front-end functions. Like Crypto Algorithm, Web3 SDKs, APIs to many third-party data providers, etc. They are stand-by all the time, once to be called for a specific task. -To debug _background service_, click links right after **Inspect views** +To debug _background service_, click links right after **Inspect views**. ![An image displaying Chrome extension manage page](https://user-images.githubusercontent.com/5390719/103509131-5ce0cb00-4e9d-11eb-9aec-b24b9888b863.png) @@ -78,8 +78,9 @@ Mask Network only injects content script with permission from the user. For every new website that Mask Network is going to support, it will show a prompt dialog to ask permission dynamically, rather than asking for all mightly permission at the plugin got installed. -To debug _content script_, open the dev tools in the web page, -then you can select context as the following picture describes. +![An image displaying the Mask Network is asking the permission from the user](https://user-images.githubusercontent.com/52657989/158566232-30c52a17-0168-488c-a292-4fc4059ecb9c.png) + +To debug _content script_, open the dev tools in the web page, then you can select context as the following picture describes. ![An image displaying how to select Mask Network as the debug context](https://user-images.githubusercontent.com/5390719/103509436-1a6bbe00-4e9e-11eb-9b18-bde021337944.png) diff --git a/docs/toc.md b/docs/toc.md index ab6c01cfb560..7170f1de0e0c 100644 --- a/docs/toc.md +++ b/docs/toc.md @@ -52,7 +52,7 @@ - Why there are two plugins folder in the codebase? - How to bypass the CSP constraint? -- Help! My service doesn’t return a CORS header. +- Help! My API server doesn’t return a CORS header. - How to read and clean my local settings? - How to fix cspell errors? - How to close react strict mode? diff --git a/docs/wallet-provider-integration.md b/docs/wallet-provider-integration.md index 8e6a9f27e75a..8d6f5b721239 100644 --- a/docs/wallet-provider-integration.md +++ b/docs/wallet-provider-integration.md @@ -27,6 +27,7 @@ As a quick example to let you know how all stuff spins. Here is a UI button that ```tsx import { useWeb3 } from '@masknet/web3-shared-evm' + function Example() { const web3 = useWeb3() const onClick = useCallback(async () => { @@ -75,7 +76,7 @@ The implementation of Ethereum JSON-RPC may very different between wallets. Thos -For this sake, the [`composer`](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/composer.ts) creates a middleware for intercepting JSON-RPC requests. Here is a quick example that converts the Mask Network flavored [`mask_requestAccounts`](./mask-flavored-jsonrpc-api.md#mask_requestaccounts) into an Ethereum styled [`eth_accounts`](https://eth.wiki/json-rpc/API#eth_accounts). +For this sake, the [`composer`](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/composer.ts) creates a middleware for intercepting JSON-RPC requests. Here is a quick example that converts the Mask Network flavored [`mask_requestAccounts`](./mask-flavored-**jsonrpc**-api.md#mask_requestaccounts) into an Ethereum styled [`eth_accounts`](https://eth.wiki/json-rpc/API#eth_accounts). ```ts export class Example implements Middleware { From 423772e55aa37ccb1c7e974a47754a20af71c44e Mon Sep 17 00:00:00 2001 From: guanbinrui Date: Mon, 21 Mar 2022 16:45:35 +0800 Subject: [PATCH 10/30] doc: update pkg --- docs/bounty-development-guide.md | 9 ++++++--- docs/toc.md | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/bounty-development-guide.md b/docs/bounty-development-guide.md index da9c0ccdd9b4..7f56c02fa9d8 100644 --- a/docs/bounty-development-guide.md +++ b/docs/bounty-development-guide.md @@ -18,7 +18,7 @@ The codebase is totally open sourced. Anyone can review it. If you are familiar ## General Content -Firstly, you can clone the repository and [set up the development environment](setup.md). The codebase is easy to understand, although with a huge size. It's only a tree of packages. Each package serves a specific purpose, as its name says. Let's take a quick tour. +Firstly, you can clone the repository and [set up the development environment](setup.md). The codebase is easy to understand, although with a huge size. It divides into many packages. Each package serves a specific purpose, as its name says. Let's take a quick tour. ### Core Packages @@ -27,13 +27,16 @@ Firstly, you can clone the repository and [set up the development environment](s ### Plugin Packages -- `packages/plugins/*` +- `packages/plugins/*` All of integrated plugins. ### Shared Packages +- `packages/shared` Shared UI components and utilities. +- `packages/shared-base` Shared types, constants, and atomic units. Must be as pure as possible and testable. + ### Web3 Related Packages -- `packages/web3-*` +- `packages/web3-constants` Constants ## Plugin diff --git a/docs/toc.md b/docs/toc.md index 7170f1de0e0c..13f4493ad7c2 100644 --- a/docs/toc.md +++ b/docs/toc.md @@ -24,7 +24,7 @@ - Plugin Development Guide - Website Integration Guide - Blockchain Integration Guide -- Wallet Provider Integration Guide +- [Wallet Provider Integration Guide](./wallet-provider-integration.md) - i18n - Form Guide From 391c4ddfbde02531d80a68330ee10b46d9a58d1d Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 10:59:21 +0800 Subject: [PATCH 11/30] docs: add questions --- docs/FAQ.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 067d42129d5c..a21bf36ddf68 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -8,8 +8,14 @@ Drop both "ours" and "theirs" version (then the file will be in the base version Then run `pnpm install` to up the lockfile to date. -### My Git hooks don't work. +## My Git hooks don't work. ```bash npx husky install # on project root directory ``` + +## How to fix cspell errors? + +## How to close react strict mode? + +## How to download CI builds? From 1a50cd4cc07d25296542109d4dd13d1bf86c05fd Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 11:27:48 +0800 Subject: [PATCH 12/30] docs: add answer to "How to fix cspell errors?" --- docs/FAQ.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index a21bf36ddf68..8d4b26da45c6 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -14,7 +14,18 @@ Then run `pnpm install` to up the lockfile to date. npx husky install # on project root directory ``` -## How to fix cspell errors? +## How to fix cspell errors in CI? + +This project uses [cspell](https://github.com/streetsidesoftware/cspell) for checking typoes. You can add unlisted words into `cspell.json` to bypass cspell checking. After you update the configuration file, you could run checking locally before pushing it to make sure your patch is working. + +```bash +npx cspell lint pattern_that_match_your_files + +// e.g. check spell of the RSS3 plugin +npx cspell lint ./packages/plugins/RSS3/**/* +``` + +Learn more: [`cspell.json`](https://cspell.org/configuration/#cspelljson) ## How to close react strict mode? From 463d5b395e46f218bd21d38c57b8d5f99f955678 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 11:43:41 +0800 Subject: [PATCH 13/30] docs: add answer to React Strict Mode --- docs/FAQ.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 8d4b26da45c6..998584328ed4 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -27,6 +27,8 @@ npx cspell lint ./packages/plugins/RSS3/**/* Learn more: [`cspell.json`](https://cspell.org/configuration/#cspelljson) -## How to close react strict mode? +## Why were my components rendered many times? + +All components are working in [Strict Mode](https://reactjs.org/docs/strict-mode.html). See from the document. It helps to develop robust components in many ways. If you need to escape from it for some purpose, try to comment out those `` components to turn it off. After you finish your work, remember to render your components again with it turned on. **NEVER PUSH CODE WITHOUT TESTING IN STRICT MODE** ## How to download CI builds? From 5b6b41a85e5362e643f30417d1ffd3cf4756bfec Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 11:45:04 +0800 Subject: [PATCH 14/30] docs: update description --- docs/FAQ.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 998584328ed4..c7435c9581c2 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -29,6 +29,6 @@ Learn more: [`cspell.json`](https://cspell.org/configuration/#cspelljson) ## Why were my components rendered many times? -All components are working in [Strict Mode](https://reactjs.org/docs/strict-mode.html). See from the document. It helps to develop robust components in many ways. If you need to escape from it for some purpose, try to comment out those `` components to turn it off. After you finish your work, remember to render your components again with it turned on. **NEVER PUSH CODE WITHOUT TESTING IN STRICT MODE** +All components are working in [Strict Mode](https://reactjs.org/docs/strict-mode.html). The strict mode helps to develop robust components in many ways. If you need to escape from it for some purpose, try to comment out those `` components to turn it off. After you finish your work, remember to render your components again with it turned on. **NEVER PUSH CODE WITHOUT TESTING IN STRICT MODE** ## How to download CI builds? From b78417c05e576818cbe61206ffab072537643c28 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 12:01:50 +0800 Subject: [PATCH 15/30] docs: add answer for CI builds --- docs/FAQ.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/FAQ.md b/docs/FAQ.md index c7435c9581c2..076c91e6fc61 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -32,3 +32,20 @@ Learn more: [`cspell.json`](https://cspell.org/configuration/#cspelljson) All components are working in [Strict Mode](https://reactjs.org/docs/strict-mode.html). The strict mode helps to develop robust components in many ways. If you need to escape from it for some purpose, try to comment out those `` components to turn it off. After you finish your work, remember to render your components again with it turned on. **NEVER PUSH CODE WITHOUT TESTING IN STRICT MODE** ## How to download CI builds? + +There are many kinds of builds. Check the following table. + +| Name | Description | +| ---- | ----------- | +| MaskNetwork.base.zip | The default build, just like the Chromium one. | +| MaskNetwork.chromium-beta.zip | Build for Chromium based browsers with some insider features turned on. | +| MaskNetwork.chromium.zip | Build for Chromium based browsers | +| MaskNetwork.firefox.zip | Build for Firefox | +| MaskNetwork.gecko.zip | Build for Gecko based browsers | +| MaskNetwork.iOS.zip | Build for iOS native Mask app | + +You can download these builds in two places. + ++ Github: Open the pull request page, and click the **Actions** tab. Then on the opened page, click the **build** sub-item on the **Compile** item. On the action detailed page, click the **Summary** tab. Now you can download builds on the **Artifacts** section. E.g., https://github.com/DimensionDev/Maskbook/actions/runs/2026749204 ++ CircleCI: Open the pull request page, and scroll down to the review status card. Click **Show all checks** to find the ** +ci/circleci: build** item, and click the **details** link. On the opended CircleCI page, click the **ARTIFACTS** tab. E.g., https://app.circleci.com/pipelines/github/DimensionDev/Maskbook/24886/workflows/eeabcc93-6152-437f-a65d-24f0acee34a9/jobs/52795/artifacts From b85e912dde9ad3de72ab30c17b20f1b14406eed2 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 12:18:54 +0800 Subject: [PATCH 16/30] docs: add answer to lockfile --- docs/FAQ.md | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 076c91e6fc61..7f8680ae8a4a 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -2,13 +2,28 @@ ## How to resolve merge conflicts in `pnpm-lock.yaml`? -Do not try to pick either side of the lockfile. +Merge the target branch into yours and never mind those conflicts in `pnpm-lock.yaml`. And checkout the file to be the one on the target branch to revert changes your branch took in. Then run `pnpm install` to up the lockfile to date. + +E.g., your `feat/fantasy` branch conflicts with `develop` branch. + +```bash +> git branch --show-current +feat/fantasy + +# merge the develop branch and never mind conflicts in lockfile +> git merge develop + +# revoke lockfile to the one on the develop branch +> git checkout develop -- pnpm-lock.yaml + +# up the lockfile to date +> pnpm install +``` -Drop both "ours" and "theirs" version (then the file will be in the base version). Then run `pnpm install` to up the lockfile to date. -## My Git hooks don't work. +## Why my Git hooks don't work? ```bash npx husky install # on project root directory From 1eb836ceee4c27ca41be9ba53e388f68932b79e7 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 12:20:15 +0800 Subject: [PATCH 17/30] docs: update description --- docs/FAQ.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 7f8680ae8a4a..7c43ce201dac 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -20,9 +20,6 @@ feat/fantasy > pnpm install ``` - -Then run `pnpm install` to up the lockfile to date. - ## Why my Git hooks don't work? ```bash From 7ce6fac39cf602cad88384c269817596795551af Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 12:38:04 +0800 Subject: [PATCH 18/30] refactor: update description --- docs/FAQ.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 7c43ce201dac..a53218fd86d2 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -41,7 +41,11 @@ Learn more: [`cspell.json`](https://cspell.org/configuration/#cspelljson) ## Why were my components rendered many times? -All components are working in [Strict Mode](https://reactjs.org/docs/strict-mode.html). The strict mode helps to develop robust components in many ways. If you need to escape from it for some purpose, try to comment out those `` components to turn it off. After you finish your work, remember to render your components again with it turned on. **NEVER PUSH CODE WITHOUT TESTING IN STRICT MODE** +All components should working in [Strict Mode](https://reactjs.org/docs/strict-mode.html) and React 18 new [Strict Effects](https://github.com/reactwg/react-18/discussions/19). + +If you found your code not working correctly, please read the documentation above. In addition, you can comment out `` temporarily to verify if it is a problem with your component not supporting Strict Mode. + +DO NOT remove ``. ## How to download CI builds? From 7930e51f17b0bec2a7d8d044e4492029dace4f22 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 12:43:12 +0800 Subject: [PATCH 19/30] docs: update format --- docs/FAQ.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index a53218fd86d2..5d577c915a73 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -62,6 +62,11 @@ There are many kinds of builds. Check the following table. You can download these builds in two places. -+ Github: Open the pull request page, and click the **Actions** tab. Then on the opened page, click the **build** sub-item on the **Compile** item. On the action detailed page, click the **Summary** tab. Now you can download builds on the **Artifacts** section. E.g., https://github.com/DimensionDev/Maskbook/actions/runs/2026749204 ++ Github: Open the pull request page, and click the **Actions** tab. Then on the opened page, click the **build** sub-item on the **Compile** item. On the action detailed page, click the **Summary** tab. Now you can download builds on the **Artifacts** section. + + E.g., https://github.com/DimensionDev/Maskbook/actions/runs/2026749204 + + CircleCI: Open the pull request page, and scroll down to the review status card. Click **Show all checks** to find the ** -ci/circleci: build** item, and click the **details** link. On the opended CircleCI page, click the **ARTIFACTS** tab. E.g., https://app.circleci.com/pipelines/github/DimensionDev/Maskbook/24886/workflows/eeabcc93-6152-437f-a65d-24f0acee34a9/jobs/52795/artifacts +ci/circleci: build** item, and click the **details** link. On the opended CircleCI page, click the **ARTIFACTS** tab. + + E.g., https://app.circleci.com/pipelines/github/DimensionDev/Maskbook/24886/workflows/eeabcc93-6152-437f-a65d-24f0acee34a9/jobs/52795/artifacts From bd7fd3c98a91e3aab22bff1814c00f5ed17e34de Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 18:12:22 +0800 Subject: [PATCH 20/30] refactor: update description Co-authored-by: Jack Works --- docs/bounty-development-guide.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/bounty-development-guide.md b/docs/bounty-development-guide.md index 7f56c02fa9d8..f50e64bdd930 100644 --- a/docs/bounty-development-guide.md +++ b/docs/bounty-development-guide.md @@ -22,7 +22,8 @@ Firstly, you can clone the repository and [set up the development environment](s ### Core Packages -- `packages/mask` The core part of the extension which adapts multiple social networks into the system, keeps the user's data safty, implements encrpytion & decryption protocols, and hosts a plugin system. +- `packages/mask` The main extension which has multiple websites supports, keeps the user's data safe and hosts a plugin system. +- `packages/encryption` The encryption & decryption of mask network. - `packages/plugin-infra` The definition of the plugin system, with a bunch of APIs to expose the core abilities to plugins. ### Plugin Packages From 83585a20e2a0e3af4beb311540c5d4c6d7f6f0bd Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 18:12:47 +0800 Subject: [PATCH 21/30] refactor: update description Co-authored-by: Jack Works --- docs/bounty-development-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/bounty-development-guide.md b/docs/bounty-development-guide.md index f50e64bdd930..0c484c0928f4 100644 --- a/docs/bounty-development-guide.md +++ b/docs/bounty-development-guide.md @@ -18,7 +18,7 @@ The codebase is totally open sourced. Anyone can review it. If you are familiar ## General Content -Firstly, you can clone the repository and [set up the development environment](setup.md). The codebase is easy to understand, although with a huge size. It divides into many packages. Each package serves a specific purpose, as its name says. Let's take a quick tour. +After cloning the repository and [set up the development environment](setup.md). The codebase is constructed as a monorepo with many internal packages. Each package serves a specific purpose. Let's take a quick tour. ### Core Packages From ca6a462fb0008f0252034da0958f90b9193736d5 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 18:12:57 +0800 Subject: [PATCH 22/30] refactor: update description Co-authored-by: Jack Works --- docs/bounty-development-guide.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/bounty-development-guide.md b/docs/bounty-development-guide.md index 0c484c0928f4..b2325603219e 100644 --- a/docs/bounty-development-guide.md +++ b/docs/bounty-development-guide.md @@ -14,7 +14,8 @@ Mask Network extension is mainly written in TypeScript. The UI part is building > If your bounty task is related to another project, it could have extra requirements that need to consider. -The codebase is totally open sourced. Anyone can review it. If you are familiar with these libraries mentioned above, it will take less friction for you to get start. +If you are familiar with these libraries mentioned above, it will take less effort for you to get started. +The codebase is open-sourced under the AGPLv3 license. ## General Content From d6abb7571a2de27e636e29e86689eb7649341221 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 18:13:04 +0800 Subject: [PATCH 23/30] refactor: update description Co-authored-by: Jack Works --- docs/bounty-development-guide.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/bounty-development-guide.md b/docs/bounty-development-guide.md index b2325603219e..72d8b1b3df41 100644 --- a/docs/bounty-development-guide.md +++ b/docs/bounty-development-guide.md @@ -4,7 +4,9 @@ Hi, Awesome people! Welcome to start a bounty task on Mask Network. ## Tech Reqirements -Mask Network extension is mainly written in TypeScript. The UI part is building with React upon [MUI](https://mui.com/getting-started/installation/) framework. Also, we write [CSS-in-JS](css-in-js.md). Use webpack to build the project. Besides that, we prefer widely adopting tech solutions that includes: +Mask Network extension is written in TypeScript. The UI is written by React and [@mui](https://mui.com/) framework. We write CSS in [CSS-in-JS](css-in-js.md) style. + +We prefer widely adopting tech solutions that include: - [Web3.js](https://web3js.readthedocs.io/) Ethereum JavaScript API - [react-use](https://streamich.github.io/react-use/) React Hooks — 👍 From fcbf26bc302fb197c9d11fc8ed6e2acb1aea4d83 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 18:14:02 +0800 Subject: [PATCH 24/30] refactor: update description Co-authored-by: Jack Works --- docs/FAQ.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 5d577c915a73..3c9aad29ce78 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -57,7 +57,7 @@ There are many kinds of builds. Check the following table. | MaskNetwork.chromium-beta.zip | Build for Chromium based browsers with some insider features turned on. | | MaskNetwork.chromium.zip | Build for Chromium based browsers | | MaskNetwork.firefox.zip | Build for Firefox | -| MaskNetwork.gecko.zip | Build for Gecko based browsers | +| MaskNetwork.gecko.zip | Build for Android native Mask app | | MaskNetwork.iOS.zip | Build for iOS native Mask app | You can download these builds in two places. From 263bc2987ff85efe819fe40ac0ecd43214161821 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 18:14:09 +0800 Subject: [PATCH 25/30] refactor: update description Co-authored-by: Jack Works --- docs/FAQ.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 3c9aad29ce78..b725f1d08586 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -53,7 +53,7 @@ There are many kinds of builds. Check the following table. | Name | Description | | ---- | ----------- | -| MaskNetwork.base.zip | The default build, just like the Chromium one. | +| MaskNetwork.base.zip | The default build, currently is the same as the Chromium build. | | MaskNetwork.chromium-beta.zip | Build for Chromium based browsers with some insider features turned on. | | MaskNetwork.chromium.zip | Build for Chromium based browsers | | MaskNetwork.firefox.zip | Build for Firefox | From cf4505d045b89ab55cc73eeb57bf2793621486cc Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 18:14:20 +0800 Subject: [PATCH 26/30] refactor: update description Co-authored-by: Jack Works --- docs/FAQ.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index b725f1d08586..e66a0ffef9d7 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -49,7 +49,6 @@ DO NOT remove ``. ## How to download CI builds? -There are many kinds of builds. Check the following table. | Name | Description | | ---- | ----------- | From 3760c4976185431f9f5ef6506063df261d9ae024 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 18:14:29 +0800 Subject: [PATCH 27/30] refactor: update description Co-authored-by: Jack Works --- docs/FAQ.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index e66a0ffef9d7..1d51568480b2 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -13,7 +13,7 @@ feat/fantasy # merge the develop branch and never mind conflicts in lockfile > git merge develop -# revoke lockfile to the one on the develop branch +# check out the lock file from the base branch > git checkout develop -- pnpm-lock.yaml # up the lockfile to date From 37f9b787ff72069551d193f109edff7c8166e690 Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 24 Mar 2022 18:14:39 +0800 Subject: [PATCH 28/30] refactor: update description Co-authored-by: Jack Works --- docs/FAQ.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 1d51568480b2..3afd98a2c427 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -10,7 +10,7 @@ E.g., your `feat/fantasy` branch conflicts with `develop` branch. > git branch --show-current feat/fantasy -# merge the develop branch and never mind conflicts in lockfile +# merge the develop branch and never manually handle the conflicts in lock file > git merge develop # check out the lock file from the base branch From 449c7a06980208ff8ac81a10ccf1d4a037ab740f Mon Sep 17 00:00:00 2001 From: guanbinrui Date: Thu, 24 Mar 2022 18:56:38 +0800 Subject: [PATCH 29/30] docs: add more answers --- docs/FAQ.md | 60 +++++++++++++++++++++++++------- docs/bounty-development-guide.md | 5 ++- docs/toc.md | 11 +++--- 3 files changed, 58 insertions(+), 18 deletions(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 3afd98a2c427..b7c81da37682 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -33,7 +33,7 @@ This project uses [cspell](https://github.com/streetsidesoftware/cspell) for che ```bash npx cspell lint pattern_that_match_your_files -// e.g. check spell of the RSS3 plugin +# e.g. check spell of the RSS3 plugin npx cspell lint ./packages/plugins/RSS3/**/* ``` @@ -49,23 +49,59 @@ DO NOT remove ``. ## How to download CI builds? - -| Name | Description | -| ---- | ----------- | -| MaskNetwork.base.zip | The default build, currently is the same as the Chromium build. | +| Name | Description | +| ----------------------------- | ----------------------------------------------------------------------- | +| MaskNetwork.base.zip | The default build, currently is the same as the Chromium build. | | MaskNetwork.chromium-beta.zip | Build for Chromium based browsers with some insider features turned on. | -| MaskNetwork.chromium.zip | Build for Chromium based browsers | -| MaskNetwork.firefox.zip | Build for Firefox | -| MaskNetwork.gecko.zip | Build for Android native Mask app | -| MaskNetwork.iOS.zip | Build for iOS native Mask app | +| MaskNetwork.chromium.zip | Build for Chromium based browsers | +| MaskNetwork.firefox.zip | Build for Firefox | +| MaskNetwork.gecko.zip | Build for Android native Mask app | +| MaskNetwork.iOS.zip | Build for iOS native Mask app | You can download these builds in two places. -+ Github: Open the pull request page, and click the **Actions** tab. Then on the opened page, click the **build** sub-item on the **Compile** item. On the action detailed page, click the **Summary** tab. Now you can download builds on the **Artifacts** section. +- Github: Open the pull request page, and click the **Actions** tab. Then on the opened page, click the **build** sub-item on the **Compile** item. On the action detailed page, click the **Summary** tab. Now you can download builds on the **Artifacts** section. E.g., https://github.com/DimensionDev/Maskbook/actions/runs/2026749204 -+ CircleCI: Open the pull request page, and scroll down to the review status card. Click **Show all checks** to find the ** -ci/circleci: build** item, and click the **details** link. On the opended CircleCI page, click the **ARTIFACTS** tab. +- CircleCI: Open the pull request page, and scroll down to the review status card. Click **Show all checks** to find the ** + ci/circleci: build** item, and click the **details** link. On the opended CircleCI page, click the **ARTIFACTS** tab. E.g., https://app.circleci.com/pipelines/github/DimensionDev/Maskbook/24886/workflows/eeabcc93-6152-437f-a65d-24f0acee34a9/jobs/52795/artifacts + +## Help! The data service doesn’t return a CORS header. + +Please contact the service maintainer to add CORS headers, the extension will send requests in following origins: + +| Browser | Origin | +| -------- | --------------------------------------------------- | +| Chromium | chrome-extension://jkoeaghipilijlahjplgbfiocjhldnap | +| Firefox | moz-extension://id | + +The Chromium extension has a fixed id, but only on production mode. And the Firefox browser will set a new id each time it boots an extension. So, in summary, it's better to allow all origins which match the regexp below. + +```ts +;/.*-extension:\/\/[^\S]+/ +``` + +If you cannot reach the service maintainer another workaround is to use a proxy server to add CORS headers. To enable it try to change the request URL into `https://cors.r2d2.to/?=[url]`. + +```ts +// before +fetch('https://api.com') + +// after +fetch('https://cors.r2d2.to/?=https://api.com') +``` + +## How to read the local settings? + +Open the background.html of the extension and execute the following scripts in the console. + +```ts +// get all storage +browser.storage.local.get(null).then(console.log) + +// clear all stroage +browser.storage.local.clear() +``` diff --git a/docs/bounty-development-guide.md b/docs/bounty-development-guide.md index 72d8b1b3df41..97ef7eb42535 100644 --- a/docs/bounty-development-guide.md +++ b/docs/bounty-development-guide.md @@ -40,7 +40,10 @@ After cloning the repository and [set up the development environment](setup.md). ### Web3 Related Packages -- `packages/web3-constants` Constants +- `packages/web3-constants` Each Web3 constant must set up for all kowned chain IDs. +- `packages/web3-contracts` EVM contract ABIs and compiled TypeScript definitions. +- `packages/web3-provider` A hub of APIs for external data source. +- `packages/web3-shared-*` Shared hooks, utilities, types for each network. ## Plugin diff --git a/docs/toc.md b/docs/toc.md index 13f4493ad7c2..ef3ea184d4dd 100644 --- a/docs/toc.md +++ b/docs/toc.md @@ -21,7 +21,8 @@ ## Guides -- Plugin Development Guide +- [Bounty Development Guide](./bounty-development-guide.md) +- [Plugin Development Guide](./plugin-development-guide.md) - Website Integration Guide - Blockchain Integration Guide - [Wallet Provider Integration Guide](./wallet-provider-integration.md) @@ -33,15 +34,15 @@ - shared - Mask Icons -## ECOSYSTEM +## Ecosystem -- MaskBox -- MaskBridge +- [MaskBox](https://box.mask.io/) +- [MaskBridge](http://bridge.mask.io/) ## Reference - TypedMessage -- Mask Flavored EVM JSON RPC methods +- [Mask Flavored EVM JSON RPC methods](./mask-flavored-jsonrpc-api.md) - @mask/plugin-infra - @mask/web3-constants - @mask/web3-contracts From 6b65df0a4ed49fe2e4b39e8d250be3ddc3d57aa4 Mon Sep 17 00:00:00 2001 From: guanbinrui Date: Fri, 25 Mar 2022 00:31:11 +0800 Subject: [PATCH 30/30] docs: update docs --- docs/FAQ.md | 10 +++--- docs/blockchain-integration.md | 1 + docs/bounty-development-guide.md | 32 +++++++++++++++---- docs/evm-integration.md | 4 +-- docs/toc.md | 2 +- ...r-integration.md => wallet-integration.md} | 10 +++++- 6 files changed, 44 insertions(+), 15 deletions(-) create mode 100644 docs/blockchain-integration.md rename docs/{wallet-provider-integration.md => wallet-integration.md} (97%) diff --git a/docs/FAQ.md b/docs/FAQ.md index b7c81da37682..7cd66474d909 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -28,7 +28,7 @@ npx husky install # on project root directory ## How to fix cspell errors in CI? -This project uses [cspell](https://github.com/streetsidesoftware/cspell) for checking typoes. You can add unlisted words into `cspell.json` to bypass cspell checking. After you update the configuration file, you could run checking locally before pushing it to make sure your patch is working. +This project uses [cspell](https://github.com/streetsidesoftware/cspell) for checking typos. You can add unlisted words into `cspell.json` to bypass cspell checking. After you update the configuration file, you could run checking locally before pushing it to make sure your patch is working. ```bash npx cspell lint pattern_that_match_your_files @@ -62,12 +62,12 @@ You can download these builds in two places. - Github: Open the pull request page, and click the **Actions** tab. Then on the opened page, click the **build** sub-item on the **Compile** item. On the action detailed page, click the **Summary** tab. Now you can download builds on the **Artifacts** section. - E.g., https://github.com/DimensionDev/Maskbook/actions/runs/2026749204 + E.g., - CircleCI: Open the pull request page, and scroll down to the review status card. Click **Show all checks** to find the ** - ci/circleci: build** item, and click the **details** link. On the opended CircleCI page, click the **ARTIFACTS** tab. + ci/circleci: build** item, and click the **details** link. On the opened CircleCI page, click the **ARTIFACTS** tab. - E.g., https://app.circleci.com/pipelines/github/DimensionDev/Maskbook/24886/workflows/eeabcc93-6152-437f-a65d-24f0acee34a9/jobs/52795/artifacts + E.g., ## Help! The data service doesn’t return a CORS header. @@ -102,6 +102,6 @@ Open the background.html of the extension and execute the following scripts in t // get all storage browser.storage.local.get(null).then(console.log) -// clear all stroage +// clear all storage browser.storage.local.clear() ``` diff --git a/docs/blockchain-integration.md b/docs/blockchain-integration.md new file mode 100644 index 000000000000..7b625e76c890 --- /dev/null +++ b/docs/blockchain-integration.md @@ -0,0 +1 @@ +# Blockchain Integration diff --git a/docs/bounty-development-guide.md b/docs/bounty-development-guide.md index 97ef7eb42535..d00fb7fbdbe0 100644 --- a/docs/bounty-development-guide.md +++ b/docs/bounty-development-guide.md @@ -19,7 +19,7 @@ We prefer widely adopting tech solutions that include: If you are familiar with these libraries mentioned above, it will take less effort for you to get started. The codebase is open-sourced under the AGPLv3 license. -## General Content +## Packages After cloning the repository and [set up the development environment](setup.md). The codebase is constructed as a monorepo with many internal packages. Each package serves a specific purpose. Let's take a quick tour. @@ -38,17 +38,37 @@ After cloning the repository and [set up the development environment](setup.md). - `packages/shared` Shared UI components and utilities. - `packages/shared-base` Shared types, constants, and atomic units. Must be as pure as possible and testable. -### Web3 Related Packages +### Web3 Packages - `packages/web3-constants` Each Web3 constant must set up for all kowned chain IDs. - `packages/web3-contracts` EVM contract ABIs and compiled TypeScript definitions. - `packages/web3-provider` A hub of APIs for external data source. - `packages/web3-shared-*` Shared hooks, utilities, types for each network. -## Plugin +## Learn Through Examples -If you want's add plugin, then MUST read this file [Plugin Development Guide](plugin-development-guide.md) +Almost all bounty tasks for the Mask Network plugin relate to a plugin. After learning the basics, checkout those pull requests or plugins to learn quick from examples. -## Internationalization (i18n) +### Dapp Plugins -If you want's update locale, then MUST read this file [i18n Guide](i18n-guide.md) +| Plugin | Pull Request Links | +| ----------- | ----------------------------------------------------------------------------------------------- | +| Collectible | | +| Trader | | +| Savings | | + +### Network Plugins + +| Plugin | Pull Request Links | +| ---------- | -------------------------------------------------------------------------------------- | +| EVM Chains | | + +## Pull Request Conversions + +After bounty hacker opening a pull request. Reviewer will label it with `Type: Bounty`, and update a statu tags while the request on-going. + +| Status | Description | +| ------------------- | ---------------------------------------------------------------------------- | +| `Bounty: Started` | The DEV team noticed your request. You will receive comments from reviewers. | +| `Bounty: Reviewed` | The QA team notcied your request. You will receive bugs from reviewers. | +| `Bounty: Qualified` | Your request is qualifed. It will ship soon. | diff --git a/docs/evm-integration.md b/docs/evm-integration.md index 724554355452..65b18a1cb764 100644 --- a/docs/evm-integration.md +++ b/docs/evm-integration.md @@ -1,4 +1,4 @@ -# A new EVM-compatible chain to Mask Network +# EVM Chain Integration It's easy to integrate an EVM-compatible chain into Mask Network. After you add a new `ChainId` and `NetworkType` in `packages/web3-shared/evm/types/index.ts`. You can follow the TypeScript compiler. By fixing these errors, the integration progress will keep moving forward. Here is a complete instruction list to ensure you wouldn't miss anything. @@ -80,7 +80,7 @@ Congratulation! You have done the coding part. ## Testing Checklist -Here is a checklist for the basic abilities of a chain. Also, if you are a hunter of chain bounty, please do this list before inviting the team. +Here is the chain abilities checklist. If you are working on a bounty task, please do each task in list before inviting the team to review your pull request. - [ ] Check if the asset list and transaction history on the dashboard page work when you choose the chain as the network. - Setup the chain for DeBank API. diff --git a/docs/toc.md b/docs/toc.md index ef3ea184d4dd..f7c90098a1f4 100644 --- a/docs/toc.md +++ b/docs/toc.md @@ -25,7 +25,7 @@ - [Plugin Development Guide](./plugin-development-guide.md) - Website Integration Guide - Blockchain Integration Guide -- [Wallet Provider Integration Guide](./wallet-provider-integration.md) +- [Wallet Integration Guide](./wallet-integration.md) - i18n - Form Guide diff --git a/docs/wallet-provider-integration.md b/docs/wallet-integration.md similarity index 97% rename from docs/wallet-provider-integration.md rename to docs/wallet-integration.md index 8d6f5b721239..fafa581c988e 100644 --- a/docs/wallet-provider-integration.md +++ b/docs/wallet-integration.md @@ -1,4 +1,4 @@ -# A new EVM-compatible wallet provider to Mask Network +# Wallet Integration Any wallet available in a browser environment can integrate into Mask Network. Well know wallets like [MetaMask](https://metamask.io/), [WalletConnect](https://docs.walletconnect.com/) and [Fortmatic](https://fortmatic.com/) have already been integrated. Besides that, Mask Network is also able to host accounts by itself. @@ -95,3 +95,11 @@ export class Example implements Middleware { } } ``` + +## Examples + +| Wallet | Implementation | +| ------------- | -------------- | +| MetaMask | \- | +| WalletConnect | \- | +| Fortmatic | \- |