[Release] Hotfix 2.6.0 => 2.6.1 (patch)

.github/workflows/linters.yml

@@ -21,7 +21,7 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.head.sha }}
       - uses: actions/setup-node@v2
-      - run: npx prettier@2.5.0 --check .
+      - run: npx prettier@2.6.0 --check .
   markdownlint:
     runs-on: ubuntu-20.04
     steps:

.i18n-codegen.json

@@ -181,6 +181,30 @@
                 "trans": "Translate",
                 "sourceMap": "inline"
             }
+        },
+        {
+            "input": "./packages/plugins/GoPlusSecurity/src/locales/en-US.json",
+            "output": "./packages/plugins/GoPlusSecurity/src/locales/i18n_generated",
+            "parser": "i18next",
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "io.gopluslabs.security",
+                "trans": "Translate",
+                "sourceMap": "inline"
+            }
+        },
+        {
+            "input": "./packages/plugins/CrossChainBridge/src/locales/en-US.json",
+            "output": "./packages/plugins/CrossChainBridge/src/locales/i18n_generated",
+            "parser": "i18next",
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "io.mask.cross-chain-bridge",
+                "trans": "Translate",
+                "sourceMap": "inline"
+            }
         }
     ]
 }

cspell.json

@@ -46,6 +46,8 @@
         "caip",
         "canonify",
         "cashtag",
+        "cbridge",
+        "celer",
         "celo",
         "checksummed",
         "choudhary",
@@ -308,6 +310,7 @@
         "gamification",
         "getdodoroute",
         "getx",
+        "gopluslabs",
         "gorli",
         "gwapj",
         "hookform",
@@ -350,6 +353,7 @@
         "nyfi",
         "onflow",
         "openocean",
+        "pausable",
         "pkts",
         "pnpm",
         "poap",

docs/FAQ.md

@@ -0,0 +1,103 @@
+# FAQ
+
+## How to resolve merge conflicts in `pnpm-lock.yaml`?
+
+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 manually handle the conflicts in lock file
+> git merge develop
+
+# check out the lock file from the base branch
+> git checkout develop -- pnpm-lock.yaml
+
+# up the lockfile to date
+> pnpm install
+```
+
+## Why my Git hooks don't work?
+
+```bash
+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 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
+
+# e.g. check spell of the RSS3 plugin
+npx cspell lint ./packages/plugins/RSS3/**/*
+```
+
+Learn more: [`cspell.json`](https://cspell.org/configuration/#cspelljson)
+
+## Why were my components rendered many times?
+
+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 `<StrictMode />` temporarily to verify if it is a problem with your component not supporting Strict Mode.
+
+DO NOT remove `<StrictMode />`.
+
+## How to download CI builds?
+
+| 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                                           |
+
+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 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>
+
+## How to resolve "No CORS Headers" problem
+
+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.
+
+```txt
+/.*-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 clear the local settings?
+
+Open the background.html of the extension and execute the following scripts in the console.
+
+```js
+browser.storage.local.clear()
+```

docs/evm-integration.md

@@ -30,6 +30,10 @@ Mask Network fetches on-chain data from various data sources. Therefore, you can
 
 - <https://api.coingecko.com/api/v3/asset_platforms>
 
+### Web3 Constants Compile Config
+
+Add the chain name to `compileConstants()` in `packages/web3-constants/compile-constants.ts`.
+
 ### Token List
 
 The team maintains a token list <https://github.com/DimensionDev/Mask-Token-List>. So free feel to create one for the chain. And add the token list link to `packages/web3-constants/evm/token-list.json`.

docs/setup.md

@@ -0,0 +1,104 @@
+# 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`](../package.json) of Mask Network. As you can see, `NodeJS` and `pnpm` are required at least a specific version.
+
+We suggest you to use the latest Node.js version, and enable [corepack](https://nodejs.org/api/corepack.html).
+
+## Install
+
+### pnpm
+
+The [pnpm](https://pnpm.io/) is a disk space-efficient package manager. After NodeJS is preinstalled.
+
+If you have [corepack](https://nodejs.org/api/corepack.html) enabled, you can skip the `pnpm` section, `pnpm` is already available!
+
+If you want to setup pnpm manually, here is the [installation guide from pnpm](https://pnpm.io/installation).
+
+Now, you will need to have tools 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 `npx dev --help` to see the documentation.
+
+### 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. 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
+
+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 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 permission when the plugin is installed.
+
+![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)
+
+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
+
+And start the development by the following command:
+
+> 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.
+
+Your commit message should follow [Conventional Commits](https://www.conventionalcommits.org).
+
+### 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)

package.json

@@ -2,13 +2,13 @@
   "name": "mask-network",
   "packageManager": "pnpm@6.32.2",
   "engines": {
-    "node": ">=16.0.0",
+    "node": ">=17.0.0",
     "pnpm": ">=6.32.1",
     "we-only-allow-pnpm-in-our-project": ">=999.0.0",
     "yarn": ">=999.0.0",
     "npm": ">=999.0.0"
   },
-  "version": "2.6.0",
+  "version": "2.6.1",
   "private": true,
   "license": "AGPL-3.0-or-later",
   "scripts": {
@@ -27,7 +27,7 @@
     "spellcheck": "cspell lint --no-must-find-files"
   },
   "dependencies": {
-    "@dimensiondev/kit": "0.0.0-20220223101101-4e6f3b9",
+    "@dimensiondev/kit": "0.0.0-20220228054820-f2378be",
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.8.2",
     "@emotion/serialize": "^1.0.2",

packages/dashboard/package.json

@@ -15,6 +15,7 @@
     "@masknet/icons": "workspace:*",
     "@masknet/plugin-example": "workspace:*",
     "@masknet/plugin-flow": "workspace:*",
+    "@masknet/plugin-solana": "workspace:*",
     "@masknet/plugin-infra": "workspace:*",
     "@masknet/plugin-wallet": "workspace:*",
     "@masknet/public-api": "workspace:*",

packages/dashboard/src/components/DashboardFrame/Navigation.tsx

@@ -32,7 +32,7 @@ import {
 import { useDashboardI18N } from '../../locales'
 import { MaskColorVar } from '@masknet/theme'
 import { DashboardRoutes } from '@masknet/shared-base'
-import { NetworkPluginID, usePluginIDContext } from '@masknet/plugin-infra'
+import { NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra'
 
 const ListItemLinkUnStyled = ({ to, ...props }: ListItemProps & { to: string }) => {
     const navigate = useNavigate()
@@ -123,7 +123,7 @@ export function Navigation({ onClose }: NavigationProps) {
     const isLargeScreen = useMediaQuery<Theme>((theme) => theme.breakpoints.up('lg'))
     const t = useDashboardI18N()
     const mode = useTheme().palette.mode
-    const currentPluginId = usePluginIDContext()
+    const currentPluginId = useCurrentWeb3NetworkPluginID()
 
     const onExpand = (e: React.MouseEvent<HTMLElement>) => {
         e.stopPropagation()

packages/dashboard/src/components/FooterLine/index.tsx

@@ -7,6 +7,7 @@ import { About } from './About'
 import { Close } from '@mui/icons-material'
 import { Version } from './Version'
 import links from './links.json'
+import { openWindow } from '@masknet/shared-base-ui'
 
 const useStyles = makeStyles()((theme) => ({
     navRoot: {
@@ -105,9 +106,9 @@ export const FooterLine = memo(() => {
     const openVersionLink = (event: React.MouseEvent) => {
         // `MouseEvent.prototype.metaKey` on macOS (`Command` key), Windows (`Windows` key), Linux (`Super` key)
         if (process.env.channel === 'stable' && !event.metaKey) {
-            open(`${links.DOWNLOAD_LINK_STABLE_PREFIX}/v${version}`)
+            openWindow(`${links.DOWNLOAD_LINK_STABLE_PREFIX}/v${version}`)
         } else {
-            open(`${links.DOWNLOAD_LINK_UNSTABLE_PREFIX}/${process.env.COMMIT_HASH}`)
+            openWindow(`${links.DOWNLOAD_LINK_UNSTABLE_PREFIX}/${process.env.COMMIT_HASH}`)
         }
     }
     return (

packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx

@@ -1,7 +1,7 @@
 import { memo, useCallback, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { makeStyles } from '@masknet/theme'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { useAccount } from '@masknet/web3-shared-evm'
 import { PluginMessages, Services } from '../../../API'
 import { PersonaContext } from '../../../pages/Personas/hooks/usePersonaContext'
@@ -64,7 +64,7 @@ export const FeaturePromotions = memo(() => {
         connectPersona(currentPersona.identifier, EnhanceableSite.Twitter)
     }
 
-    const openMaskNetwork = () => window.open('https://twitter.com/realMaskNetwork')
+    const openMaskNetwork = () => openWindow('https://twitter.com/realMaskNetwork')
 
     return (
         <div className={classes.container}>

packages/dashboard/src/initialization/Dashboard.tsx

@@ -7,7 +7,7 @@ import {
     MaskDarkTheme,
     useSystemPreferencePalette,
 } from '@masknet/theme'
-import { I18NextProviderHMR } from '@masknet/shared'
+import { I18NextProviderHMR, SharedContextProvider } from '@masknet/shared'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
 import {
     createInjectHooksRenderer,
@@ -62,10 +62,12 @@ export default function DashboardRoot() {
                                 <ErrorBoundary>
                                     <CssBaseline />
                                     <CustomSnackbarProvider>
-                                        <HashRouter>
-                                            <Pages />
-                                        </HashRouter>
-                                        <PluginRender />
+                                        <SharedContextProvider>
+                                            <HashRouter>
+                                                <Pages />
+                                            </HashRouter>
+                                            <PluginRender />
+                                        </SharedContextProvider>
                                     </CustomSnackbarProvider>
                                 </ErrorBoundary>
                             </PersonaContext.Provider>