diff --git a/.github/ISSUE_TEMPLATE/evm.md b/.github/ISSUE_TEMPLATE/evm.md new file mode 100644 index 000000000000..e7298aaae56a --- /dev/null +++ b/.github/ISSUE_TEMPLATE/evm.md @@ -0,0 +1,32 @@ +--- +name: Deploy Contract Request +about: Request to deploy contracts on a new EVM-compatible chain. +title: '[EVM Chain] Request to deploy contracts on ' +labels: '' +assignees: DimensionDev/dev-smartcontract +--- + +Request to depoly contracts on . + + + +## Chain Info + +| Name | Content | +| ------------ | ------- | +| Name | \- | +| ChainId | \- | +| Website | \- | +| RPC Endponit | \- | + + +## Checklist + +The following contracts are requested. + ++ [RedPacket](https://github.com/DimensionDev/RedPacket) ++ [Initial Twitter Offer](https://github.com/DimensionDev/InitialTwitterOffering) ++ Dummy Qualification ++ BalanceChecker ++ Multicall ++ UniswapInterfaceMulticall diff --git a/.github/workflows/deploy-proxy.yml b/.github/workflows/deploy-proxy.yml deleted file mode 100644 index 9bd3176fa268..000000000000 --- a/.github/workflows/deploy-proxy.yml +++ /dev/null @@ -1,30 +0,0 @@ -name: Publish Proxy Package - -on: - workflow_dispatch: -jobs: - build: - runs-on: ubuntu-20.04 - permissions: - packages: write - contents: read - steps: - - uses: actions/checkout@v2 - with: - ref: ${{ github.event.pull_request.head.sha }} - fetch-depth: 0 - - uses: pnpm/action-setup@v2.2.1 - - uses: actions/setup-node@v2 - with: - cache: pnpm - - uses: DimensionDev/github-token-action@latest - with: - registry: true - - run: pnpm install - - run: pnpm build - name: Build solution - - run: pnpm build - name: Build provider-proxy Package - working-directory: packages/provider-proxy - - run: npm publish - working-directory: packages/provider-proxy/dist diff --git a/.i18n-codegen.json b/.i18n-codegen.json index 6b40857beeb0..2da603920852 100644 --- a/.i18n-codegen.json +++ b/.i18n-codegen.json @@ -32,8 +32,7 @@ "type": "i18next/react-hooks", "hooks": "useSharedI18N", "namespace": "shared", - "trans": "SharedTrans", - "sourceMap": "inline" + "trans": "SharedTrans" } }, { @@ -44,8 +43,7 @@ "type": "i18next/react-hooks", "hooks": "useSharedBaseI18N", "namespace": "shareBase", - "trans": "SharedBaseTrans", - "sourceMap": "inline" + "trans": "SharedBaseTrans" } }, { @@ -56,8 +54,7 @@ "type": "i18next/react-hooks", "hooks": "useDashboardI18N", "namespace": "dashboard", - "trans": "DashboardTrans", - "sourceMap": "inline" + "trans": "DashboardTrans" } }, { @@ -68,8 +65,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "io.mask.example", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -80,8 +76,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "io.mask.debugger", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -92,8 +87,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "com.maskbook.wallet", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -104,8 +98,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "com.mask.flow", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -116,8 +109,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "com.maskbook.fileservice", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -128,8 +120,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "com.maskbook.cyberconnect", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -140,8 +131,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "bio.rss3", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -152,8 +142,18 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "money.juicebox", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" + } + }, + { + "input": "./packages/plugins/EVM/src/locales/en-US.json", + "output": "./packages/plugins/EVM/src/locales/i18n_generated", + "parser": { "type": "i18next", "contextSeparator": "$", "pluralSeparator": "_" }, + "generator": { + "type": "i18next/react-hooks", + "hooks": "useI18N", + "namespace": "com.mask.evm", + "trans": "Translate" } }, { @@ -164,8 +164,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "com.maskbook.solana", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -176,8 +175,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "com.mask.next_id", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -188,8 +186,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "__template__", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -200,8 +197,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "io.gopluslabs.security", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -212,8 +208,18 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "io.mask.cross-chain-bridge", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" + } + }, + { + "input": "./packages/mask/src/plugins/RedPacket/locales/en-US.json", + "output": "./packages/mask/src/plugins/RedPacket/locales/i18n_generated", + "parser": { "type": "i18next", "contextSeparator": "$", "pluralSeparator": "_" }, + "generator": { + "type": "i18next/react-hooks", + "hooks": "useI18N", + "namespace": "com.maskbook.red_packet", + "trans": "Translate" } }, { @@ -236,8 +242,7 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "com.maskbook.tip", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" } }, { @@ -248,8 +253,29 @@ "type": "i18next/react-hooks", "hooks": "useI18N", "namespace": "com.maskbook.avatar", - "trans": "Translate", - "sourceMap": "inline" + "trans": "Translate" + } + }, + { + "input": "./packages/mask/src/plugins/Trader/locales/en-US.json", + "output": "./packages/mask/src/plugins/Trader/locales/i18n_generated", + "parser": { "type": "i18next", "contextSeparator": "$", "pluralSeparator": "_" }, + "generator": { + "type": "i18next/react-hooks", + "hooks": "useI18N", + "namespace": "com.maskbook.trader", + "trans": "Translate" + } + }, + { + "input": "./packages/mask/src/plugins/Gitcoin/locales/en-US.json", + "output": "./packages/mask/src/plugins/Gitcoin/locales/i18n_generated", + "parser": { "type": "i18next", "contextSeparator": "$", "pluralSeparator": "_" }, + "generator": { + "type": "i18next/react-hooks", + "hooks": "useI18N", + "namespace": "com.maskbook.gitcoin", + "trans": "Translate" } }, { diff --git a/.prettierignore b/.prettierignore index b3703149f7e7..0f8cab04ff43 100644 --- a/.prettierignore +++ b/.prettierignore @@ -168,3 +168,7 @@ common/autoinstallers/*/.npmrc packages/storybook-shared/*.js packages/storybook-shared/*.map packages/storybook-shared/*.d.ts + +# Requires Prettier support for typescript 4.7 +# https://github.com/prettier/prettier/issues/12640 +packages/web3-shared/base/src/specs/index.ts diff --git a/cspell.json b/cspell.json index 5b2abfcf4b11..73ea8057f0bb 100644 --- a/cspell.json +++ b/cspell.json @@ -149,6 +149,7 @@ "pressable", "promi", "proxied", + "portto", "pushstate", "pvtsutils", "qrcode", @@ -180,6 +181,7 @@ "subrepo", "sushiswap", "swappable", + "solflare", "testid", "thegraph", "timelock", @@ -195,6 +197,7 @@ "typechain", "typehash", "typeson", + "toruslabs", "unencrypted", "unreviewed", "unstake", diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md deleted file mode 100644 index e9c4c414a9c4..000000000000 --- a/docs/ARCHITECTURE.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -author: Jack-Works -maintainer: - - Jack-Works - - Septs ---- - -# Mask Network Architecture Overview - -![WIP](https://img.shields.io/badge/status-wip-orange.svg?style=flat-square) - -> This document describes the Mask Network protocols, the subsystems, -> the interfaces, and how it all fits together. -> It delegates non-interface details to other specs as much as possible. -> This is meant as a top-level view of the protocol and how the system fits together. - -## Subsystems - -### Background service - -The entry point is `packages/mask/src/background-service.ts` - -Background service is like a "backend" or "server" in a normal web app. -It is running on a web page that not visible to the user ([background page in Web Extensions][background-page]). -The background page hosts mosts of our non-UI-related work in the Mask Network. If you see code like - -[background-page]: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts - -```js -Services.Crypto.encrypt(...) -``` - -It is sending the request to the background service. - -### Content scripts - -The entry point is `packages/mask/src/content-script.ts`. - -All UI on the Twitter/Facebook are rendered by the content scripts. - -### Options page (or Dashboard) - -The entry point is `packages/mask/src/extension/options-page/index.tsx`. - -This is a normal web app that interacts with the background page. - -### Injected scripts - -The entry point is `packages/mask/src/extension/injected-script/index.ts`. - -Generally, you don't need to modify this. It provides the ability to change the main Realm of the web page. (Thus we can emulate some DOM events). - -![Architecture overview](https://user-images.githubusercontent.com/5390719/109270562-28f4a700-7849-11eb-9a7a-b364318bdeec.png) diff --git a/docs/FAQ.md b/docs/FAQ.md deleted file mode 100644 index 543bef8d0847..000000000000 --- a/docs/FAQ.md +++ /dev/null @@ -1,103 +0,0 @@ -# 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 `` temporarily to verify if it is a problem with your component not supporting Strict Mode. - -DO NOT remove ``. - -## 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., - -- 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., - -## 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() -``` diff --git a/docs/blockchain-integration.md b/docs/blockchain-integration.md deleted file mode 100644 index 7b625e76c890..000000000000 --- a/docs/blockchain-integration.md +++ /dev/null @@ -1 +0,0 @@ -# Blockchain Integration diff --git a/docs/bounty-development-guide.md b/docs/bounty-development-guide.md deleted file mode 100644 index 2e3f8887d93e..000000000000 --- a/docs/bounty-development-guide.md +++ /dev/null @@ -1,74 +0,0 @@ -# Bounty Development Guide - -Hi, Awesome people! Welcome to start a bounty task on Mask Network. - -## Tech Requirements - -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 — 👍 -- [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. - -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. - -## 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. - -### Core Packages - -- `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 - -- `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 Packages - -- `packages/web3-constants` Each Web3 constant must set up for all known 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. - -## Learn Through Examples - -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. - -### Dapp Plugins - -| 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 status tag while the progress on-going. - -| Status | Description | -| ------------------- | ---------------------------------------------------------------------------- | -| `Bounty: Started` | The DEV team noticed your request. You will receive comments from reviewers. | -| `Bounty: Reviewed` | The QA team noticed your request. You will receive bugs from reviewers. | -| `Bounty: Qualified` | Your request is qualifed. It will ship soon. | diff --git a/docs/concepts.md b/docs/concepts.md deleted file mode 100644 index 8f2f9615e826..000000000000 --- a/docs/concepts.md +++ /dev/null @@ -1,21 +0,0 @@ -# Concepts - -## Persona - -## Post Payload - -## Wallet - -## Dashboard - -## Popup - -## SNS Provider - -## Wallet Provider - -## Plugin - -## Network - -## ChainId diff --git a/docs/css-in-js.md b/docs/css-in-js.md deleted file mode 100644 index d92374225867..000000000000 --- a/docs/css-in-js.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -author: Jack-Works -maintainer: - - Jack-Works - - Septs ---- - -# CSS in JS guide in Mask Network - -## General guides - -- ✅ For recommendations -- ⚠ For warnings -- 🚫 For forbidden -- ✅ Use [the Box component provided by the library](https://next.material-ui.com/components/box/#main-content) - when the CSS is simple and only used once. -- ✅ CSS custom variables is OK but do not abuse it. - Get the variable from the theme if it is possible. -- ✅ CSS grid is OK but you may want to use the `Grid` component. - Choose the fit one based on your need. -- 🚫 DO NOT use mystery abbreviations in the `sx` properties, e.g. `` - (DON'T) but `` (DO, easier to read). - -## Guides on the `makeStyles` style - -```ts -const useStyle = makeStyles()((theme) => ({ - root: { margin: theme.spacing(4) }, -})) -``` - -### Change style of MUI components - -✅ DO - -```js - -} -``` - -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() - } -} -``` - -## Examples - -| Wallet | Implementation | -| ------------- | -------------- | -| MetaMask | \- | -| WalletConnect | \- | -| Fortmatic | \- | diff --git a/package.json b/package.json index 627d5fa00fad..634ec7a4ab43 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "spellcheck": "cspell lint --no-must-find-files" }, "dependencies": { - "@dimensiondev/kit": "0.0.0-20220228054820-f2378be", + "@dimensiondev/kit": "0.0.0-20220501022859-60d5533", "@emotion/cache": "^11.7.1", "@emotion/react": "^11.9.0", "@emotion/serialize": "^1.0.3", diff --git a/packages/.eslintrc.json b/packages/.eslintrc.json index a06fafd88039..7654e02a4c00 100644 --- a/packages/.eslintrc.json +++ b/packages/.eslintrc.json @@ -83,6 +83,7 @@ "@dimensiondev/type/no-instanceof-wrapper": "error", "@dimensiondev/type/no-wrapper-type-reference": "error", "@dimensiondev/unicode/specific-set": "error", + "@typescript-eslint/array-type": ["error", { "default": "array-simple" }], "@typescript-eslint/await-thenable": "error", "@typescript-eslint/no-base-to-string": "off", "@typescript-eslint/no-implied-eval": "error", diff --git a/packages/backup-format/src/utils/hex2buffer.ts b/packages/backup-format/src/utils/hex2buffer.ts index 4b8f76f2e0c2..b4fa7099a733 100644 --- a/packages/backup-format/src/utils/hex2buffer.ts +++ b/packages/backup-format/src/utils/hex2buffer.ts @@ -22,7 +22,7 @@ export function hex2buffer(hexString: string, padded?: boolean) { } /** @internal */ -function concat(...buf: (Uint8Array | number[])[]) { +function concat(...buf: Array) { const res = new Uint8Array(sum(buf.map((item) => item.length))) let offset = 0 buf.forEach((item) => { diff --git a/packages/backup-format/src/version-1/index.ts b/packages/backup-format/src/version-1/index.ts index 7abf0376c303..4f001c0dc895 100644 --- a/packages/backup-format/src/version-1/index.ts +++ b/packages/backup-format/src/version-1/index.ts @@ -89,16 +89,16 @@ interface BackupJSONFileVersion1 { publicKey: EC_Public_JsonWebKey privateKey: EC_Private_JsonWebKey localKey: AESJsonWebKey - previousIdentifiers?: { network: string; userId: string }[] + previousIdentifiers?: Array<{ network: string; userId: string }> nickname?: string }> people?: Array<{ network: string userId: string publicKey: EC_Public_JsonWebKey - previousIdentifiers?: { network: string; userId: string }[] + previousIdentifiers?: Array<{ network: string; userId: string }> nickname?: string - groups?: { network: string; groupID: string; virtualGroupOwner: string | null }[] + groups?: Array<{ network: string; groupID: string; virtualGroupOwner: string | null }> // Note: those props are not existed in the backup, just to make the code more readable privateKey?: EC_Private_JsonWebKey diff --git a/packages/backup-format/src/version-2/index.ts b/packages/backup-format/src/version-2/index.ts index 2ed7c710d425..7a9da8856975 100644 --- a/packages/backup-format/src/version-2/index.ts +++ b/packages/backup-format/src/version-2/index.ts @@ -322,7 +322,7 @@ interface BackupJSONFileVersion2 { privateKey?: JsonWebKey localKey?: JsonWebKey nickname?: string - linkedProfiles: [/** ProfileIdentifier.toText() */ string, LinkedProfileDetails][] + linkedProfiles: Array<[/** ProfileIdentifier.toText() */ string, LinkedProfileDetails]> createdAt: number // Unix timestamp updatedAt: number // Unix timestamp }> @@ -345,7 +345,7 @@ interface BackupJSONFileVersion2 { postBy: string // ProfileIdentifier.toText() identifier: string // PostIVIdentifier.toText() postCryptoKey?: JsonWebKey - recipients: 'everyone' | [/** ProfileIdentifier.toText() */ string, { reason: RecipientReasonJSON[] }][] + recipients: 'everyone' | Array<[/** ProfileIdentifier.toText() */ string, { reason: RecipientReasonJSON[] }]> /** @deprecated */ recipientGroups: never[] foundAt: number // Unix timestamp diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json index d2d156cf0f55..b14d4407dc72 100644 --- a/packages/dashboard/package.json +++ b/packages/dashboard/package.json @@ -19,6 +19,7 @@ "@masknet/backup-format": "workspace:*", "@masknet/icons": "workspace:*", "@masknet/plugin-example": "workspace:*", + "@masknet/plugin-evm": "workspace:*", "@masknet/plugin-flow": "workspace:*", "@masknet/plugin-infra": "workspace:*", "@masknet/plugin-solana": "workspace:*", @@ -32,6 +33,8 @@ "@masknet/web3-providers": "workspace:*", "@masknet/web3-shared-base": "workspace:*", "@masknet/web3-shared-evm": "workspace:*", + "@masknet/web3-shared-solana": "workspace:*", + "@masknet/web3-shared-flow": "workspace:*", "@msgpack/msgpack": "^2.7.2", "@servie/events": "^3.0.0", "@types/color": "^3.0.3", diff --git a/packages/dashboard/src/components/CreateWalletForm/index.tsx b/packages/dashboard/src/components/CreateWalletForm/index.tsx index ddb77638de16..2a5df398e1a0 100644 --- a/packages/dashboard/src/components/CreateWalletForm/index.tsx +++ b/packages/dashboard/src/components/CreateWalletForm/index.tsx @@ -31,11 +31,11 @@ const useStyles = makeStyles()((theme) => ({ // TODO: actions, and icon may be an img url export interface CreateWalletFormProps { - options: { + options: Array<{ label: string icon: React.ReactNode value: number - }[] + }> } export function CreateWalletForm(props: CreateWalletFormProps) { diff --git a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx index e6c47ef72ec6..00e45b050a9b 100644 --- a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx +++ b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx @@ -30,7 +30,8 @@ import { import { useDashboardI18N } from '../../locales' import { MaskColorVar } from '@masknet/theme' import { DashboardRoutes } from '@masknet/shared-base' -import { NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' +import { useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3' const ListItemLinkUnStyled = ({ to, ...props }: ListItemProps & { to: string }) => { const navigate = useNavigate() diff --git a/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx b/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx index a2533c89433e..7d44196acfe0 100644 --- a/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx +++ b/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx @@ -1,9 +1,10 @@ import { memo, useCallback, useMemo } from 'react' import { useNavigate } from 'react-router-dom' import { makeStyles } from '@masknet/theme' -import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui' -import { useAccount } from '@masknet/web3-shared-evm' -import { PluginMessages, Services } from '../../../API' +import { openWindow } from '@masknet/shared-base-ui' +import { useAccount } from '@masknet/plugin-infra/web3' +import { Services } from '../../../API' +import { NetworkPluginID } from '@masknet/web3-shared-base' import { PersonaContext } from '../../../pages/Personas/hooks/usePersonaContext' import { DashboardRoutes, EnhanceableSite } from '@masknet/shared-base' import { PluginId } from '@masknet/plugin-infra' @@ -31,10 +32,10 @@ const useStyles = makeStyles()((theme) => ({ export const FeaturePromotions = memo(() => { const { classes } = useStyles() const navigate = useNavigate() - const account = useAccount() + const account = useAccount(NetworkPluginID.PLUGIN_EVM) const { currentPersona, connectPersona } = PersonaContext.useContainer() - const { setDialog: setBuyDialog } = useRemoteControlledDialog(PluginMessages.Transak.buyTokenDialogUpdated) + // const { setDialog: setBuyDialog } = useRemoteControlledDialog(PluginMessages.Transak.buyTokenDialogUpdated) const isConnectedTwitter = useMemo(() => { if (!currentPersona) return false @@ -46,10 +47,10 @@ export const FeaturePromotions = memo(() => { }, [currentPersona]) const openTransakDialog = useCallback(() => { - setBuyDialog({ - open: true, - address: account ?? '', - }) + // setBuyDialog({ + // open: true, + // address: account ?? '', + // }) }, []) const openTwitter = (pluginId: string) => async () => { diff --git a/packages/dashboard/src/hooks/useGasOptions.ts b/packages/dashboard/src/hooks/useGasOptions.ts deleted file mode 100644 index c9f42b64bb11..000000000000 --- a/packages/dashboard/src/hooks/useGasOptions.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { GasOption, isEIP1559Supported, useChainId } from '@masknet/web3-shared-evm' -import { useMemo } from 'react' -import { useAsync } from 'react-use' -import { useDashboardI18N } from '../locales' -import { PluginServices } from '../API' - -const { Wallet: WalletRPC } = PluginServices -export function useGasOptions() { - const t = useDashboardI18N() - const chainId = useChainId() - const is1559Supported = useMemo(() => isEIP1559Supported(chainId), [chainId]) - const { value: gasFromMetaMask, loading: getFromMetaMaskLoading } = useAsync(async () => { - if (!is1559Supported) return - - return WalletRPC.getEstimateGasFees(chainId) - }, [is1559Supported, chainId]) - - // #region Get gas options from debank - const { value: gasFromDebank, loading: getFromDebankLoading } = useAsync(async () => { - if (is1559Supported) return - const response = await WalletRPC.getGasPriceDictFromDeBank(chainId) - if (!response) return null - return { - low: response.data.slow.price, - medium: response.data.normal.price, - high: response.data.fast.price, - } - }, [is1559Supported, chainId]) - // #endregion - - const gasOptions = is1559Supported ? gasFromMetaMask : gasFromDebank - - const options = useMemo(() => { - return [ - { - title: t.wallet_gas_fee_settings_low(), - gasOption: GasOption.Low, - gasPrice: gasOptions?.low ?? 0, - }, - { - title: t.wallet_gas_fee_settings_medium(), - gasOption: GasOption.Medium, - gasPrice: gasOptions?.medium ?? 0, - }, - { - title: t.wallet_gas_fee_settings_high(), - gasOption: GasOption.High, - gasPrice: gasOptions?.high ?? 0, - }, - ] - }, [is1559Supported, gasOptions]) - - return { - value: options, - loading: is1559Supported ? getFromMetaMaskLoading : getFromDebankLoading, - gasOptions, - } -} diff --git a/packages/dashboard/src/initialization/Dashboard.tsx b/packages/dashboard/src/initialization/Dashboard.tsx index c16bcb6cc643..83b4c5155b97 100644 --- a/packages/dashboard/src/initialization/Dashboard.tsx +++ b/packages/dashboard/src/initialization/Dashboard.tsx @@ -10,19 +10,15 @@ import { import { I18NextProviderHMR, SharedContextProvider } from '@masknet/shared' import { ErrorBoundary } from '@masknet/shared-base-ui' import { createInjectHooksRenderer, useActivatedPluginsDashboard } from '@masknet/plugin-infra/dashboard' -import { NetworkPluginID, PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra/web3' -import { Web3Provider } from '@masknet/web3-shared-evm' - +import { PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra/web3' import { i18NextInstance } from '@masknet/shared-base' import '../utils/kv-storage' import './PluginHost' import { Pages } from '../pages/routes' -import { Web3Context } from '../web3/context' import { useAppearance, usePluginID } from '../pages/Personas/api' import { PersonaContext } from '../pages/Personas/hooks/usePersonaContext' -import { fixWeb3State } from '../../../mask/src/plugins/EVM/UI/Web3State' const PluginRender = createInjectHooksRenderer(useActivatedPluginsDashboard, (x) => x.GlobalInjection) @@ -30,9 +26,6 @@ export default function DashboardRoot() { const pluginID = usePluginID() const PluginsWeb3State = useAllPluginsWeb3State() - // TODO: migrate EVM plugin - fixWeb3State(PluginsWeb3State[NetworkPluginID.PLUGIN_EVM], Web3Context) - // #region theme const appearance = useAppearance() const mode = useSystemPreferencePalette() @@ -47,28 +40,26 @@ export default function DashboardRoot() { // #endregion return ( - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/packages/dashboard/src/initialization/PluginHost.ts b/packages/dashboard/src/initialization/PluginHost.ts index 272c30c82d69..848bb1d4954f 100644 --- a/packages/dashboard/src/initialization/PluginHost.ts +++ b/packages/dashboard/src/initialization/PluginHost.ts @@ -2,9 +2,9 @@ import './plugins' import { Emitter } from '@servie/events' import { startPluginDashboard, Plugin } from '@masknet/plugin-infra/dashboard' +import { createI18NBundle, i18NextInstance } from '@masknet/shared-base' import { Services, Messages } from '../API' -import { createI18NBundle, createSubscriptionFromAsync, i18NextInstance } from '@masknet/shared-base' -import { InMemoryStorages, PersistentStorages } from '../utils/kv-storage' +import { createSharedContext } from '../../../mask/src/plugin-infra/host' const PluginHost: Plugin.__Host.Host = { minimalMode: { @@ -16,23 +16,7 @@ const PluginHost: Plugin.__Host.Host = { addI18NResource(plugin, resource) { createI18NBundle(plugin, resource)(i18NextInstance) }, - createContext: (pluginID, signal) => { - const currentPersonaSub = createSubscriptionFromAsync( - Services.Settings.getCurrentPersonaIdentifier, - undefined, - Messages.events.currentPersonaIdentifier.on, - signal, - ) - return { - createKVStorage(type, defaultValues) { - if (type === 'memory') return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal) - else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal) - }, - personaSign: Services.Identity.signWithPersona, - walletSign: Services.Ethereum.personalSign, - currentPersona: currentPersonaSub, - } - }, + createContext: createSharedContext, } setTimeout(() => { Messages.events.pluginMinimalModeChanged.on(([id, status]) => { diff --git a/packages/dashboard/src/initialization/isolated_bridge.ts b/packages/dashboard/src/initialization/isolated_bridge.ts index 9e941f0812b0..e7b621e94ac0 100644 --- a/packages/dashboard/src/initialization/isolated_bridge.ts +++ b/packages/dashboard/src/initialization/isolated_bridge.ts @@ -24,11 +24,9 @@ function installPluginService() { const Wallet = channelOf('com.maskbook.wallet') const Transak = channelOf('com.maskbook.transak') const Swap = channelOf('com.maskbook.trader') - const Pets = channelOf('com.maskbook.pets') - setPluginMessages({ Wallet, Transak, Swap, Pets }) + setPluginMessages({ Wallet, Transak, Swap }) setPluginServices({ Wallet: initRPCBridge(PluginMessages.Wallet.events.rpc), - Swap: initRPCBridge(PluginMessages.Swap.rpc), }) } diff --git a/packages/dashboard/src/pages/CreateMaskWallet/components/CreateMnemonic/index.tsx b/packages/dashboard/src/pages/CreateMaskWallet/components/CreateMnemonic/index.tsx index fc44340b5553..d672c8b0df22 100644 --- a/packages/dashboard/src/pages/CreateMaskWallet/components/CreateMnemonic/index.tsx +++ b/packages/dashboard/src/pages/CreateMaskWallet/components/CreateMnemonic/index.tsx @@ -3,7 +3,6 @@ import { Alert, Box, Button, Typography } from '@mui/material' import { makeStyles, MaskColorVar } from '@masknet/theme' import { InfoIcon, RefreshIcon } from '@masknet/icons' import { useDashboardI18N } from '../../../../locales' -import { ChainId, ProviderType } from '@masknet/web3-shared-evm' import { MnemonicReveal } from '../../../../components/Mnemonic' import { VerifyMnemonicDialog } from '../VerifyMnemonicDialog' import { useAsyncFn, useAsyncRetry } from 'react-use' @@ -115,14 +114,10 @@ const CreateMnemonic = memo(() => { const account = await Services.Settings.getSelectedWalletAddress() if (!account) { - await PluginServices.Wallet.updateAccount({ + await PluginServices.Wallet.updateMaskAccount({ account: address_, - providerType: ProviderType.MaskWallet, }) - const chainId = searchParams.get('chainId') - if (chainId) { - await PluginServices.Wallet.selectAccount([address_], Number(chainId) as ChainId) - } + await PluginServices.Wallet.selectMaskAccount([address_]) } return address_ diff --git a/packages/dashboard/src/pages/Settings/api.ts b/packages/dashboard/src/pages/Settings/api.ts index 894e2bfbd781..2d922ef5b290 100644 --- a/packages/dashboard/src/pages/Settings/api.ts +++ b/packages/dashboard/src/pages/Settings/api.ts @@ -1,15 +1,9 @@ import { createGlobalState } from '@masknet/shared-base-ui' import { Messages, Services } from '../../API' -import type { DataProvider } from '@masknet/public-api' import type { AccountType, BackupFileInfo, Scenario, Locale } from './type' export const [useLanguage] = createGlobalState(Services.Settings.getLanguage, Messages.events.languageSettings.on) -export const [useTrendingDataSource] = createGlobalState( - Services.Settings.getTrendingDataSource, - Messages.events.currentDataProviderSettings.on, -) - const BASE_RUL = 'https://vaalh28dbi.execute-api.ap-east-1.amazonaws.com/api' interface BackupBaseRequest { diff --git a/packages/dashboard/src/pages/Settings/components/DataSourceSetting.tsx b/packages/dashboard/src/pages/Settings/components/DataSourceSetting.tsx deleted file mode 100644 index b89cd5166e09..000000000000 --- a/packages/dashboard/src/pages/Settings/components/DataSourceSetting.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { MenuItem } from '@mui/material' -import SettingSelect from './SettingSelect' -import { useTrendingDataSource } from '../api' -import { Services } from '../../../API' -import { MarketTrendProvider } from '../../../type' - -export default function DataSourceSetting() { - const source = useTrendingDataSource() - const handleChange = (event: any) => { - const value = event.target.value - Services.Settings.setTrendingDataSource(value) - } - - return ( - - CoinGecko - CoinMarketCap - Uniswap Info - - ) -} diff --git a/packages/dashboard/src/pages/Wallets/api.ts b/packages/dashboard/src/pages/Wallets/api.ts deleted file mode 100644 index d16731b30b45..000000000000 --- a/packages/dashboard/src/pages/Wallets/api.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { createGlobalState } from '@masknet/shared-base-ui' -import { Messages, Services } from '../../API' - -export const [useCurrentCollectibleDataProvider] = createGlobalState( - Services.Settings.getCurrentCollectibleDataProvider, - (x) => Messages.events.currentNonFungibleAssetDataProviderSettings.on(x), -) - -export const [useCurrentSelectedWalletNetwork] = createGlobalState( - Services.Settings.getCurrentSelectedWalletNetwork, - (x) => Messages.events.currentNetworkSettings.on(x), -) diff --git a/packages/dashboard/src/pages/Wallets/components/AddCollectibleDialog/index.tsx b/packages/dashboard/src/pages/Wallets/components/AddCollectibleDialog/index.tsx index 05e0a75d6da2..1037b19e6ec9 100644 --- a/packages/dashboard/src/pages/Wallets/components/AddCollectibleDialog/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/AddCollectibleDialog/index.tsx @@ -1,19 +1,13 @@ -import { FormEvent, memo, useCallback, useEffect, useState } from 'react' +import { FormEvent, memo, useEffect, useState } from 'react' import { MaskDialog, MaskTextField } from '@masknet/theme' import { Box, Button, DialogActions, DialogContent } from '@mui/material' -import { - EthereumTokenType, - isSameAddress, - useERC721ContractDetailed, - useERC721TokenDetailedCallback, - useWallet, -} from '@masknet/web3-shared-evm' +import { NetworkPluginID } from '@masknet/web3-shared-base' import { EthereumAddress } from 'wallet.ts' import { useDashboardI18N } from '../../../../locales' import { z } from 'zod' import { Controller, useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' -import { PluginServices } from '../../../../API' +import { useWeb3Connection, useWallet, useChainId } from '@masknet/plugin-infra/web3' export interface AddCollectibleDialogProps { open: boolean @@ -31,41 +25,48 @@ enum FormErrorType { } export const AddCollectibleDialog = memo(({ open, onClose }) => { - const wallet = useWallet() + const wallet = useWallet(NetworkPluginID.PLUGIN_EVM) const [address, setAddress] = useState('') - const { value: contractDetailed, loading: contractDetailLoading } = useERC721ContractDetailed(address) - const [tokenId, setTokenId, erc721TokenDetailedCallback] = useERC721TokenDetailedCallback(contractDetailed) - - const onSubmit = useCallback(async () => { - if (contractDetailLoading || !wallet) return - - const tokenInDB = await PluginServices.Wallet.getToken(EthereumTokenType.ERC721, address, tokenId) - if (tokenInDB) throw new Error(FormErrorType.Added) - - const tokenDetailed = await erc721TokenDetailedCallback() - - if ( - (tokenDetailed && !isSameAddress(tokenDetailed.info.owner, wallet.address)) || - !tokenDetailed || - !tokenDetailed.info.owner - ) { - throw new Error(FormErrorType.NotExist) - } else { - await PluginServices.Wallet.addToken(tokenDetailed) - onClose() - } - }, [contractDetailLoading, wallet, address, tokenId, erc721TokenDetailedCallback]) - - return ( - - ) + const [tokenId, setTokenId] = useState('') + const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM) + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + + return null + + // const [tokenId, setTokenId, erc721TokenDetailedCallback] = useERC721TokenDetailedCallback(contractDetailed) + + // const onSubmit = useCallback(async () => { + // if (contractDetailLoading || !wallet) return + + // const tokenInDB = await PluginServices.Wallet.getToken(SchemaType.ERC721, address, tokenId) + // if (tokenInDB) throw new Error(FormErrorType.Added) + + // const tokenDetailed = await connection?.getNonFungibleToken(address ?? '', tokenId, { + // chainId, + // }) + + // if ( + // (tokenDetailed && !isSameAddress(tokenDetailed.info.owner, wallet.address)) || + // !tokenDetailed || + // !tokenDetailed.info.owner + // ) { + // throw new Error(FormErrorType.NotExist) + // } else { + // await PluginServices.Wallet.addToken(tokenDetailed) + // onClose() + // } + // }, [contractDetailLoading, wallet, address, tokenId, erc721TokenDetailedCallback]) + + // return ( + // + // ) }) export interface AddCollectibleDialogUIProps { diff --git a/packages/dashboard/src/pages/Wallets/components/AddTokenConfirmUI/index.tsx b/packages/dashboard/src/pages/Wallets/components/AddTokenConfirmUI/index.tsx index be023076b0c5..3e559f0f5522 100644 --- a/packages/dashboard/src/pages/Wallets/components/AddTokenConfirmUI/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/AddTokenConfirmUI/index.tsx @@ -2,14 +2,15 @@ import { memo } from 'react' import { useDashboardI18N } from '../../../../locales' import { Box, Button, DialogActions, DialogContent, Stack, Typography } from '@mui/material' import { makeStyles } from '@masknet/theme' -import type { ERC20TokenDetailed } from '@masknet/web3-shared-evm' import { TokenIcon } from '@masknet/shared' import { useFormContext } from 'react-hook-form' +import type { FungibleToken } from '@masknet/web3-shared-base' +import type { ChainId, SchemaType } from '@masknet/web3-shared-evm' export interface AddTokenConfirmUIProps { onBack: () => void onConfirm: () => void - token?: ERC20TokenDetailed + token?: FungibleToken balance?: string } @@ -58,7 +59,7 @@ export const AddTokenConfirmUI = memo(({ token, balance, address={token?.address ?? ''} name={token?.name} chainId={token?.chainId} - logoURI={token?.logoURI} + logoURI={token?.logoURL} AvatarProps={{ sx: { width: 48, height: 48 } }} /> diff --git a/packages/dashboard/src/pages/Wallets/components/AddTokenFormUI/index.tsx b/packages/dashboard/src/pages/Wallets/components/AddTokenFormUI/index.tsx index 64a925333c93..aa94b934baac 100644 --- a/packages/dashboard/src/pages/Wallets/components/AddTokenFormUI/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/AddTokenFormUI/index.tsx @@ -2,13 +2,14 @@ import { memo } from 'react' import { useDashboardI18N } from '../../../../locales' import { Button, DialogActions, DialogContent, TextField } from '@mui/material' import { makeStyles } from '@masknet/theme' -import type { ERC20TokenDetailed } from '@masknet/web3-shared-evm' import { useFormContext, Controller } from 'react-hook-form' +import type { ChainId, SchemaType } from '@masknet/web3-shared-evm' +import type { FungibleToken } from '@masknet/web3-shared-base' export interface AddTokenFormUIProps { onNext: () => void onClose: () => void - token?: ERC20TokenDetailed + token?: FungibleToken } const useStyles = makeStyles()((theme) => ({ diff --git a/packages/dashboard/src/pages/Wallets/components/Assets/index.tsx b/packages/dashboard/src/pages/Wallets/components/Assets/index.tsx index 0dfc10391166..53927168aa98 100644 --- a/packages/dashboard/src/pages/Wallets/components/Assets/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/Assets/index.tsx @@ -1,9 +1,10 @@ -import { type Web3Plugin, NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3' +import { memo, useEffect, useState } from 'react' +import { useCurrentWeb3NetworkPluginID, Web3Helper } from '@masknet/plugin-infra/web3' import { makeStyles, useTabs } from '@masknet/theme' import { TabContext, TabList, TabPanel } from '@mui/lab' import { Box, Button, Tab } from '@mui/material' -import { memo, useEffect, useState } from 'react' import { usePickToken } from '@masknet/shared' +import { NetworkPluginID } from '@masknet/web3-shared-base' import { ContentContainer } from '../../../../components/ContentContainer' import { useDashboardI18N } from '../../../../locales' import { AddCollectibleDialog } from '../AddCollectibleDialog' @@ -38,7 +39,7 @@ export enum AssetTab { const assetTabs = [AssetTab.Token, AssetTab.Collectibles] as const interface TokenAssetsProps { - network: Web3Plugin.NetworkDescriptor | null + network: Web3Helper.NetworkDescriptorAll | null } export const Assets = memo(({ network }) => { diff --git a/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx b/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx index 88763228ff6d..c631b671625e 100644 --- a/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx @@ -1,13 +1,14 @@ +import { memo } from 'react' +import { noop } from 'lodash-unified' import { CardIcon, DownloadIcon, MaskWalletIcon, SendIcon, SwapIcon } from '@masknet/icons' -import type { Web3Plugin } from '@masknet/plugin-infra/web3' import { MiniNetworkSelector } from '@masknet/shared' import { DashboardRoutes } from '@masknet/shared-base' import { MaskColorVar } from '@masknet/theme' +import type { NetworkDescriptor, NetworkPluginID } from '@masknet/web3-shared-base' import { Box, Button, buttonClasses, styled, Typography } from '@mui/material' -import { noop } from 'lodash-unified' -import { memo } from 'react' import { useDashboardI18N } from '../../../../locales' import { useIsMatched } from '../../hooks' +import type { Web3Helper } from '@masknet/plugin-infra/web3' const BalanceContainer = styled('div')( ({ theme }) => ` @@ -75,10 +76,23 @@ export interface BalanceCardProps { onBuy(): void onSwap(): void onReceive(): void - networks: Web3Plugin.NetworkDescriptor[] - selectedNetwork: Web3Plugin.NetworkDescriptor | null + networks: Array< + NetworkDescriptor< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['NetworkType'] + > + > + selectedNetwork: NetworkDescriptor< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['NetworkType'] + > | null showOperations: boolean - onSelectNetwork(network: Web3Plugin.NetworkDescriptor | null): void + onSelectNetwork( + network: NetworkDescriptor< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['NetworkType'] + > | null, + ): void } export const Balance = memo( @@ -114,9 +128,12 @@ export const Balance = memo( disabledNonCurrentNetwork={isDisabledNonCurrentChainSelect} selectedNetwork={selectedNetwork} networks={networks} - onSelect={(network: Web3Plugin.NetworkDescriptor | null) => - networks.length <= 1 ? noop : onSelectNetwork(network) - } + onSelect={( + network: NetworkDescriptor< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['NetworkType'] + > | null, + ) => (networks.length <= 1 ? noop : onSelectNetwork(network))} /> diff --git a/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx b/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx index 106b6bf9ad8d..eefdac98ecd6 100644 --- a/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx @@ -1,17 +1,18 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react' +import { useHoverDirty } from 'react-use' +import { WalletIcon, NFTCardStyledAssetPlayer } from '@masknet/shared' import { Box, Button, Link, Tooltip, Typography } from '@mui/material' import { makeStyles, MaskColorVar } from '@masknet/theme' +import { NetworkPluginID, NonFungibleAsset } from '@masknet/web3-shared-base' import { CollectiblePlaceholder } from '../CollectiblePlaceHolder' -import { useHoverDirty } from 'react-use' import { useDashboardI18N } from '../../../../locales' -import { WalletIcon, NFTCardStyledAssetPlayer } from '@masknet/shared' import { ChangeNetworkTip } from '../FungibleTokenTableRow/ChangeNetworkTip' import { - NetworkPluginID, - useNetworkDescriptor, + useChainId, useCurrentWeb3NetworkPluginID, + useNetworkDescriptor, useWeb3State, - Web3Plugin, + Web3Helper, } from '@masknet/plugin-infra/web3' const useStyles = makeStyles()((theme) => ({ @@ -94,20 +95,23 @@ const useStyles = makeStyles()((theme) => ({ })) export interface CollectibleCardProps { - chainId: number - token: Web3Plugin.NonFungibleToken + token: NonFungibleAsset< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + > onSend(): void renderOrder: number } -export const CollectibleCard = memo(({ chainId, token, onSend, renderOrder }) => { +export const CollectibleCard = memo(({ token, onSend, renderOrder }) => { const t = useDashboardI18N() - const { Utils } = useWeb3State() + const chainId = useChainId() const { classes } = useStyles() const ref = useRef(null) + const { Others } = useWeb3State() as Web3Helper.Web3StateAll const [isHoveringTooltip, setHoveringTooltip] = useState(false) const isHovering = useHoverDirty(ref) - const networkDescriptor = useNetworkDescriptor(token.contract?.chainId) + const networkDescriptor = useNetworkDescriptor(undefined, token.contract?.chainId) const isOnCurrentChain = useMemo(() => chainId === token.contract?.chainId, [chainId, token]) const currentPluginId = useCurrentWeb3NetworkPluginID() @@ -119,10 +123,9 @@ export const CollectibleCard = memo(({ chainId, token, onS const sendable = currentPluginId === NetworkPluginID.PLUGIN_EVM const showSendButton = (isHovering || isHoveringTooltip) && sendable - let nftLink - if (Utils?.resolveNonFungibleTokenLink && token.contract) { - nftLink = Utils?.resolveNonFungibleTokenLink?.(token.contract?.chainId, token.contract.address, token.tokenId) - } + const nftLink = useMemo(() => { + return Others?.explorerResolver.nonFungibleTokenLink(token.chainId, token.address, token.tokenId) + }, [currentPluginId, token.chainId, token.address, token.tokenId]) return ( @@ -130,7 +133,7 @@ export const CollectibleCard = memo(({ chainId, token, onS - {(token.metadata?.assetURL || token.metadata?.iconURL) && token.contract ? ( + {(token.metadata?.mediaURL || token.metadata?.imageURL) && token.contract ? ( (({ chainId, token, onS contractAddress={token.contract.address} chainId={token.contract.chainId} renderOrder={renderOrder} - url={token.metadata.assetURL || token.metadata.iconURL} + url={token.metadata.imageURL || token.metadata.mediaURL} tokenId={token.tokenId} classes={{ loadingFailImage: classes.loadingFailImage, @@ -183,7 +186,7 @@ export const CollectibleCard = memo(({ chainId, token, onS ) : ( - {token.name || token.tokenId} + {token.metadata?.name || token.tokenId} )} diff --git a/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx b/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx index d41558f5516b..cf03dcd06f4a 100644 --- a/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx @@ -2,22 +2,20 @@ import { Dispatch, memo, SetStateAction, useCallback, useEffect, useRef, useStat import { useNavigate } from 'react-router-dom' import { Box, Stack, TablePagination } from '@mui/material' import { makeStyles } from '@masknet/theme' +import { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base' import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder' -import { DashboardRoutes, EMPTY_LIST } from '@masknet/shared-base' +import { DashboardRoutes } from '@masknet/shared-base' import { EmptyPlaceholder } from '../EmptyPlaceholder' import { CollectibleCard } from '../CollectibleCard' import { useDashboardI18N } from '../../../../locales' -import { PluginMessages } from '../../../../API' import { TransferTab } from '../Transfer' import { - useNetworkDescriptor, - useWeb3State as useWeb3PluginState, - Web3Plugin, useAccount, useCurrentWeb3NetworkPluginID, - NetworkPluginID, + useNetworkDescriptor, + useNonFungibleAssets, + Web3Helper, } from '@masknet/plugin-infra/web3' -import { useAsyncRetry } from 'react-use' const useStyles = makeStyles()({ root: { @@ -37,7 +35,7 @@ const useStyles = makeStyles()({ }) interface CollectibleListProps { - selectedNetwork: Web3Plugin.NetworkDescriptor | null + selectedNetwork: Web3Helper.NetworkDescriptorAll | null } const ITEM_SIZE = { @@ -49,42 +47,45 @@ export const CollectibleList = memo(({ selectedNetwork }) const [page, setPage] = useState(0) const navigate = useNavigate() const account = useAccount() - const { Asset } = useWeb3PluginState() + const { value = [], error, retry, loading } = useNonFungibleAssets() const network = useNetworkDescriptor() const [loadingSize, setLoadingSize] = useState(0) - const [renderData, setRenderData] = useState([]) + const [renderData, setRenderData] = useState< + Array< + NonFungibleToken< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + > + > + >([]) - const { - value = { data: EMPTY_LIST, hasNextPage: false }, - error: collectiblesError, - loading: isQuerying, - retry, - } = useAsyncRetry( - async () => Asset?.getNonFungibleAssets?.(account, { page, size: 20 }, undefined, selectedNetwork || undefined), - [account, Asset?.getNonFungibleAssets, network, selectedNetwork], - ) useEffect(() => { - const unsubscribeTokens = PluginMessages.Wallet.events.erc721TokensUpdated.on(() => retry()) - const unsubscribeSocket = PluginMessages.Wallet.events.socketMessageUpdated.on((info) => { - if (!info.done) { - retry() - } - }) - return () => { - unsubscribeTokens() - unsubscribeSocket() - } + // const unsubscribeTokens = PluginMessages.Wallet.events.erc721TokensUpdated.on(() => retry()) + // const unsubscribeSocket = PluginMessages.Wallet.events.socketMessageUpdated.on((info) => { + // if (!info.done) { + // retry() + // } + // }) + // return () => { + // unsubscribeTokens() + // unsubscribeSocket() + // } }, [retry]) useEffect(() => { if (!loadingSize) return - const render = value.data.slice(page * loadingSize, (page + 1) * loadingSize) + const render = value.slice(page * loadingSize, (page + 1) * loadingSize) setRenderData(render) - }, [value.data, loadingSize, page]) + }, [value, loadingSize, page]) const currentPluginId = useCurrentWeb3NetworkPluginID() const onSend = useCallback( - (detail: Web3Plugin.NonFungibleToken) => { + ( + detail: NonFungibleToken< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + >, + ) => { // Sending NFT is only available on EVM currently. if (currentPluginId !== NetworkPluginID.PLUGIN_EVM) return navigate(DashboardRoutes.WalletsTransfer, { @@ -97,19 +98,18 @@ export const CollectibleList = memo(({ selectedNetwork }) [currentPluginId], ) - const hasNextPage = (page + 1) * loadingSize < value.data.length - const isLoading = renderData.length === 0 && isQuerying + const hasNextPage = (page + 1) * loadingSize < value.length + const isLoading = renderData.length === 0 && loading return ( setLoadingSize(size)} /> @@ -118,30 +118,29 @@ export const CollectibleList = memo(({ selectedNetwork }) export interface CollectibleListUIProps { page: number - onPageChange: Dispatch> hasNextPage: boolean isLoading: boolean isEmpty: boolean showPagination: boolean - chainId: number - dataSource: Web3Plugin.NonFungibleToken[] - onSend(detail: Web3Plugin.NonFungibleToken): void + chainId?: Web3Helper.ChainIdAll + dataSource: Array< + NonFungibleToken< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + > + > + onSend( + detail: NonFungibleToken< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + >, + ): void + onPageChange: Dispatch> setLoadingSize(fn: (pre: number | undefined) => number): void } export const CollectibleListUI = memo( - ({ - page, - onPageChange, - isLoading, - isEmpty, - hasNextPage, - showPagination, - chainId, - dataSource, - onSend, - setLoadingSize, - }) => { + ({ page, onPageChange, isLoading, isEmpty, hasNextPage, showPagination, dataSource, onSend, setLoadingSize }) => { const t = useDashboardI18N() const { classes } = useStyles() const ref = useRef(null) @@ -167,7 +166,6 @@ export const CollectibleListUI = memo( {dataSource.map((x, index) => (
(({ chainId }) => { const { classes } = useStyles() const t = useDashboardI18N() - const networkDescriptor = useNetworkDescriptor(chainId) + const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM, chainId) return (
diff --git a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx index dd7a4a744d6a..d0b80f54abf1 100644 --- a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx @@ -1,25 +1,17 @@ -import { memo, useCallback, useEffect, useState } from 'react' +import { memo, useCallback, useEffect } from 'react' +import { useNavigate } from 'react-router-dom' +import BigNumber from 'bignumber.js' import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material' import { makeStyles, MaskColorVar } from '@masknet/theme' import { useDashboardI18N } from '../../../../locales' import { EmptyPlaceholder } from '../EmptyPlaceholder' import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder' import { FungibleTokenTableRow } from '../FungibleTokenTableRow' -import { useWeb3State } from '@masknet/web3-shared-evm' -import BigNumber from 'bignumber.js' -import { useRemoteControlledDialog } from '@masknet/shared-base-ui' +import { formatBalance, FungibleAsset, NetworkPluginID } from '@masknet/web3-shared-base' +import { DashboardRoutes, EMPTY_LIST } from '@masknet/shared-base' +import { useCurrentWeb3NetworkPluginID, useFungibleAssets, useWeb3State, Web3Helper } from '@masknet/plugin-infra/web3' import { PluginMessages } from '../../../../API' -import { DashboardRoutes } from '@masknet/shared-base' -import { useNavigate } from 'react-router-dom' -import { useAsync } from 'react-use' -import { - useNetworkDescriptor, - useWeb3State as useWeb3PluginState, - Web3Plugin, - useAccount, - NetworkPluginID, - useCurrentWeb3NetworkPluginID, -} from '@masknet/plugin-infra/web3' +import { useRemoteControlledDialog } from '@masknet/shared-base-ui' const useStyles = makeStyles()((theme) => ({ container: { @@ -69,53 +61,57 @@ interface TokenTableProps { export const FungibleTokenTable = memo(({ selectedChainId }) => { const navigate = useNavigate() - const account = useAccount() - const { Asset } = useWeb3PluginState() - const { portfolioProvider } = useWeb3State() - const network = useNetworkDescriptor() - const [tokenUpdateCount, setTokenUpdateCount] = useState(0) - const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginMessages.Swap.swapDialogUpdated) - const { - error: detailedTokensError, - loading: detailedTokensLoading, - value: detailedTokens, - } = useAsync( - async () => Asset?.getFungibleAssets?.(account, portfolioProvider, network!), - [account, Asset, portfolioProvider, tokenUpdateCount], - ) + value: fungibleAssets = EMPTY_LIST, + loading: fungibleAssetsLoading, + error: fungibleAssetsError, + } = useFungibleAssets(NetworkPluginID.PLUGIN_EVM) + const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginMessages.Swap.swapDialogUpdated) useEffect(() => { - PluginMessages.Wallet.events.erc20TokensUpdated.on(() => - setTimeout(() => setTokenUpdateCount((prev) => prev + 1), 100), - ) + // PluginMessages.Wallet.events.erc20TokensUpdated.on(() => + // setTimeout(() => setTokenUpdateCount((prev) => prev + 1), 100), + // ) }, []) - const onSwap = useCallback((token: Web3Plugin.FungibleToken) => { - openSwapDialog({ - open: true, - traderProps: { - defaultInputCoin: { - id: token.id, - name: token.name || '', - symbol: token.symbol || '', - contract_address: token.address, - decimals: token.decimals, + const onSwap = useCallback( + ( + token: FungibleAsset< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + >, + ) => { + openSwapDialog({ + open: true, + traderProps: { + defaultInputCoin: { + id: token.id, + name: token.name || '', + symbol: token.symbol || '', + contract_address: token.address, + decimals: token.decimals, + }, }, - }, - }) - }, []) + }) + }, + [], + ) const onSend = useCallback( - (token: Web3Plugin.FungibleToken) => navigate(DashboardRoutes.WalletsTransfer, { state: { token } }), + ( + token: FungibleAsset< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + >, + ) => navigate(DashboardRoutes.WalletsTransfer, { state: { token } }), [], ) return ( !selectedChainId || x.chainId === selectedChainId)} + isLoading={fungibleAssetsLoading} + isEmpty={!fungibleAssetsLoading && (!!fungibleAssetsError || !fungibleAssets?.length)} + dataSource={fungibleAssets.filter((x) => !selectedChainId || x.chainId === selectedChainId)} onSwap={onSwap} onSend={onSend} /> @@ -125,16 +121,31 @@ export const FungibleTokenTable = memo(({ selectedChainId }) => export interface TokenTableUIProps { isLoading: boolean isEmpty: boolean - dataSource: Web3Plugin.Asset[] - onSwap(token: Web3Plugin.FungibleToken): void - onSend(token: Web3Plugin.FungibleToken): void + dataSource: Array< + FungibleAsset< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + > + > + onSwap( + token: FungibleAsset< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + >, + ): void + onSend( + token: FungibleAsset< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + >, + ): void } export const TokenTableUI = memo(({ onSwap, onSend, isLoading, isEmpty, dataSource }) => { const t = useDashboardI18N() const { classes } = useStyles() const currentPluginId = useCurrentWeb3NetworkPluginID() - const { Utils } = useWeb3PluginState() + const { Others } = useWeb3State() return ( @@ -171,11 +182,9 @@ export const TokenTableUI = memo(({ onSwap, onSend, isLoading {dataSource .sort((first, second) => { - const firstValue = new BigNumber( - Utils?.formatBalance?.(first.balance, first.token.decimals) ?? '', - ) + const firstValue = new BigNumber(formatBalance(first.balance, first.decimals) ?? '') const secondValue = new BigNumber( - Utils?.formatBalance?.(second.balance, second.token.decimals) ?? '', + formatBalance(second.balance, second.decimals) ?? '', ) if (firstValue.isEqualTo(secondValue)) return 0 @@ -184,8 +193,8 @@ export const TokenTableUI = memo(({ onSwap, onSend, isLoading }) .map((asset, index) => ( onSend(asset.token)} - onSwap={() => onSwap(asset.token)} + onSend={() => onSend(asset)} + onSwap={() => onSwap(asset)} asset={asset} key={index} /> diff --git a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/ChangeNetworkTip.tsx b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/ChangeNetworkTip.tsx index 25741491728f..4a28680f46cf 100644 --- a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/ChangeNetworkTip.tsx +++ b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/ChangeNetworkTip.tsx @@ -2,7 +2,7 @@ import { memo } from 'react' import { Link, Typography } from '@mui/material' import { useDashboardI18N } from '../../../../locales' import { MaskColorVar } from '@masknet/theme' -import { useNetworkDescriptors, useProviderDescriptor, useWeb3UI } from '@masknet/plugin-infra/web3' +import { useNetworkDescriptors, useProviderDescriptor, useWeb3UI, Web3Helper } from '@masknet/plugin-infra/web3' interface ChangeNetworkTipProps { chainId?: number @@ -11,9 +11,10 @@ interface ChangeNetworkTipProps { export const ChangeNetworkTip = memo(({ chainId }) => { const t = useDashboardI18N() - const providerDescriptor = useProviderDescriptor() - const { NetworkIconClickBait } = useWeb3UI().SelectNetworkMenu ?? {} - const networkDescriptors = useNetworkDescriptors() + const providerDescriptor = useProviderDescriptor() as Web3Helper.ProviderDescriptorAll + const networkDescriptors = useNetworkDescriptors() as Web3Helper.NetworkDescriptorAll[] + const Web3UI = useWeb3UI() as Web3Helper.Web3UIAll + const { NetworkIconClickBait } = Web3UI.SelectNetworkMenu ?? {} const targetNetwork = networkDescriptors.find((x) => x.chainId === chainId) if (!chainId) return null diff --git a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/index.tsx b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/index.tsx index 90edd2545002..6b2a962805ec 100644 --- a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/index.tsx @@ -4,19 +4,25 @@ import { Box, Button, TableCell, TableRow, Tooltip, Typography } from '@mui/mate import { getMaskColor, makeStyles } from '@masknet/theme' import { FormattedCurrency, TokenIcon, WalletIcon } from '@masknet/shared' import { - CurrencyType, - NetworkPluginID, useChainId, useNetworkDescriptors, useCurrentWeb3NetworkPluginID, useWeb3State, - Web3Plugin, + Web3Helper, } from '@masknet/plugin-infra/web3' +import { + CurrencyType, + formatBalance, + formatCurrency, + FungibleAsset, + NetworkPluginID, + pow10, + toFixed, +} from '@masknet/web3-shared-base' import { ChainId } from '@masknet/web3-shared-evm' import { useDashboardI18N } from '../../../../locales' import { ChangeNetworkTip } from './ChangeNetworkTip' import { getTokenUSDValue } from '../../utils/getTokenUSDValue' -import { pow10, toFixed } from '@masknet/web3-shared-base' const useStyles = makeStyles()((theme) => ({ icon: { @@ -66,7 +72,10 @@ const useStyles = makeStyles()((theme) => ({ })) export interface TokenTableRowProps { - asset: Web3Plugin.Asset + asset: FungibleAsset< + Web3Helper.Definition[NetworkPluginID]['ChainId'], + Web3Helper.Definition[NetworkPluginID]['SchemaType'] + > onSwap(): void onSend(): void } @@ -75,10 +84,10 @@ export const FungibleTokenTableRow = memo(({ asset, onSend, const t = useDashboardI18N() const { classes } = useStyles() const currentChainId = useChainId() - const { Utils } = useWeb3State() + const { Others } = useWeb3State() const networkDescriptors = useNetworkDescriptors() const currentPluginId = useCurrentWeb3NetworkPluginID() - const isOnCurrentChain = useMemo(() => currentChainId === asset.token.chainId, [asset, currentChainId]) + const isOnCurrentChain = useMemo(() => currentChainId === asset.chainId, [asset, currentChainId]) return ( @@ -87,30 +96,30 @@ export const FungibleTokenTableRow = memo(({ asset, onSend, x.chainId === asset.token.chainId)?.icon} + networkIcon={networkDescriptors.find((x) => x.chainId === asset.chainId)?.icon} /> - {asset.token.symbol} + {asset.symbol} - {toFixed(Utils?.formatBalance?.(asset.balance, asset.token.decimals) ?? '', 6)} + {toFixed(formatBalance(asset.balance, asset.decimals) ?? '', 6)} {asset.price?.[CurrencyType.USD] ? new BigNumber(asset.price[CurrencyType.USD] ?? '').gt(pow10(-6)) - ? Utils?.formatCurrency?.(Number.parseFloat(asset.price[CurrencyType.USD] ?? ''), '$') + ? formatCurrency(Number.parseFloat(asset.price[CurrencyType.USD] ?? '')) : '<0.000001' : '-'} @@ -122,8 +131,8 @@ export const FungibleTokenTableRow = memo(({ asset, onSend, ) : ( )} @@ -133,7 +142,7 @@ export const FungibleTokenTableRow = memo(({ asset, onSend, } + title={} placement="top" classes={{ tooltip: classes.tip, arrow: classes.tipArrow }} arrow> @@ -152,9 +161,9 @@ export const FungibleTokenTableRow = memo(({ asset, onSend, } + title={} placement="top" classes={{ tooltip: classes.tip, arrow: classes.tipArrow }} arrow> @@ -162,11 +171,11 @@ export const FungibleTokenTableRow = memo(({ asset, onSend, - - - ) - }, -) + ) : null} + + + {address} + + + + + + + ) +}) diff --git a/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx b/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx index dd2ce2717fd5..10528de822ea 100644 --- a/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx @@ -1,14 +1,15 @@ import { memo } from 'react' import { MaskDialog } from '@masknet/theme' import { useDashboardI18N } from '../../../../locales' -import { ERC20TokenList } from '@masknet/shared' +import { FungibleTokenList } from '@masknet/shared' import { DialogContent } from '@mui/material' -import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm' +import type { FungibleToken } from '@masknet/web3-shared-base' +import type { ChainId, SchemaType } from '@masknet/web3-shared-evm' export interface SelectTokenDialogProps { open: boolean onClose: () => void - onSelect?(token: FungibleTokenDetailed | null): void + onSelect?(token: FungibleToken | null): void } // todo use remote dialog for add token list dialog @@ -18,7 +19,7 @@ export const SelectTokenDialog = memo(({ open, onClose, return ( - + ) diff --git a/packages/dashboard/src/pages/Wallets/components/TransactionIcon/index.tsx b/packages/dashboard/src/pages/Wallets/components/TransactionIcon/index.tsx index acd6fd483c64..26c68d834126 100644 --- a/packages/dashboard/src/pages/Wallets/components/TransactionIcon/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/TransactionIcon/index.tsx @@ -1,6 +1,7 @@ import { memo, useMemo } from 'react' import { CloseIcon, DownloadIcon, InteractionIcon, ITOIcon, RedPacketIcon, UploadIcon } from '@masknet/icons' -import { FilterTransactionType, isSameAddress, TransactionType, useRedPacketConstants } from '@masknet/web3-shared-evm' +import { isSameAddress } from '@masknet/web3-shared-base' +import { FilterTransactionType, TransactionType, useRedPacketConstants } from '@masknet/web3-shared-evm' import { makeStyles, MaskColorVar } from '@masknet/theme' import { Box } from '@mui/material' import classNames from 'classnames' @@ -29,7 +30,7 @@ const useStyles = makeStyles()(() => ({ export interface TransactionIconProps { type?: string - transactionType: string + transactionType?: string address: string failed: boolean } @@ -52,7 +53,7 @@ export interface TransactionIconUIProps { isRedPacket: boolean isFailed: boolean type?: string - transactionType: string + transactionType?: string } export const TransactionIconUI = memo(({ isFailed, isRedPacket, type, transactionType }) => { diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx index 936f25160b62..7cbb411891cf 100644 --- a/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx +++ b/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx @@ -1,9 +1,10 @@ -import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm' import { memo, useMemo, useState } from 'react' import { Checkbox, ImageListItem, ImageListItemBar, Box } from '@mui/material' import { getMaskColor, makeStyles, MaskColorVar } from '@masknet/theme' import { CheckedBorderIcon, CheckedIcon } from '@masknet/icons' import { NFTCardStyledAssetPlayer } from '@masknet/shared' +import type { NonFungibleToken } from '@masknet/web3-shared-base' +import type { ChainId, SchemaType } from '@masknet/web3-shared-evm' const useStyles = makeStyles()({ card: { @@ -60,7 +61,7 @@ const useStyles = makeStyles()({ }) export interface NFTCardProps { - token: ERC721TokenDetailed + token: NonFungibleToken selectedTokenId: string onSelect(tokenId: string): void renderOrder: number @@ -103,8 +104,8 @@ export const NFTCard = memo(({ token, selectedTokenId, onSelect, r }} className={isDisabled ? classes.disabled : ''}> > selectedTokenId: string loading: boolean error?: boolean diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx index 8b28406f77b6..f544b66511ab 100644 --- a/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx +++ b/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx @@ -1,46 +1,52 @@ import { RightIcon } from '@masknet/icons' +import { useGasLimit, useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm' import { - NetworkPluginID, - TokenType, + useChainId, + useFungibleTokenBalance, + useGasPrice, useLookupAddress, useNetworkDescriptor, useWeb3State, - Web3Plugin, + useNativeToken, + useNativeTokenPrice, } from '@masknet/plugin-infra/web3' -import { NetworkType } from '@masknet/public-api' import { FormattedAddress, TokenAmountPanel, usePickToken } from '@masknet/shared' import { MaskColorVar, MaskTextField } from '@masknet/theme' -import { isGreaterThan, isZero, multipliedBy, rightShift } from '@masknet/web3-shared-base' +import { + TokenType, + FungibleToken, + isGreaterThan, + isSameAddress, + isZero, + multipliedBy, + NetworkPluginID, + rightShift, +} from '@masknet/web3-shared-base' import { addGasMargin, - EthereumTokenType, + SchemaType, formatWeiToEther, - FungibleTokenDetailed, - isEIP1559Supported, - isSameAddress, - useChainId, - useFungibleTokenBalance, - useGasLimit, - useGasPrice, - useNativeTokenDetailed, useTokenConstants, - useTokenTransferCallback, + ChainId, + chainResolver, + explorerResolver, + isValidAddress, + NetworkType, } from '@masknet/web3-shared-evm' import TuneIcon from '@mui/icons-material/Tune' import { Box, Button, IconButton, Link, Popover, Stack, Typography } from '@mui/material' import BigNumber from 'bignumber.js' import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useUpdateEffect } from 'react-use' -import { EthereumAddress } from 'wallet.ts' import { useDashboardI18N } from '../../../../locales' import { useGasConfig } from '../../hooks/useGasConfig' -import { useNativeTokenPrice } from './useNativeTokenPrice' -interface TransferERC20Props { - token: FungibleTokenDetailed | Web3Plugin.FungibleToken +export interface TransferERC20Props { + token: FungibleToken } const GAS_LIMIT = 21000 + export const TransferERC20 = memo(({ token }) => { const t = useDashboardI18N() const { NATIVE_TOKEN_ADDRESS } = useTokenConstants() @@ -53,14 +59,14 @@ export const TransferERC20 = memo(({ token }) => { const network = useNetworkDescriptor() const [gasLimit_, setGasLimit_] = useState(0) - const { value: defaultGasPrice = '0' } = useGasPrice() + const { value: defaultGasPrice = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM) - const [selectedToken, setSelectedToken] = useState(token) + const [selectedToken, setSelectedToken] = useState(token) const pickToken = usePickToken() - const chainId = useChainId() - const is1559Supported = useMemo(() => isEIP1559Supported(chainId), [chainId]) + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + const is1559Supported = useMemo(() => chainResolver.isSupport(chainId, 'EIP1559'), [chainId]) - const { Utils } = useWeb3State() + const { Others } = useWeb3State() useEffect(() => { setSelectedToken(token) @@ -68,22 +74,22 @@ export const TransferERC20 = memo(({ token }) => { // workaround: transferERC20 should support non-evm network const isNativeToken = isSameAddress(selectedToken?.address, NATIVE_TOKEN_ADDRESS) - const tokenType = isNativeToken ? EthereumTokenType.Native : EthereumTokenType.ERC20 + const tokenType = isNativeToken ? SchemaType.Native : SchemaType.ERC20 // balance - const { value: tokenBalance = '0', retry: refetchTokenBalance } = useFungibleTokenBalance( - tokenType, + const { value: tokenBalance = '0', retry: tokenBalanceRetry } = useFungibleTokenBalance( + NetworkPluginID.PLUGIN_EVM, selectedToken?.address ?? '', ) - const nativeToken = useNativeTokenDetailed() - const nativeTokenPrice = useNativeTokenPrice() + const nativeToken = useNativeToken(NetworkPluginID.PLUGIN_EVM) + const nativeTokenPrice = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM) // #region resolve ENS domain const { value: registeredAddress = '', error: resolveDomainError, loading: resolveDomainLoading, - } = useLookupAddress(address, NetworkPluginID.PLUGIN_EVM) + } = useLookupAddress(NetworkPluginID.PLUGIN_EVM, address) // #endregion // transfer amount @@ -91,12 +97,12 @@ export const TransferERC20 = memo(({ token }) => { const erc20GasLimit = useGasLimit( selectedToken.type === TokenType.Fungible ? selectedToken.symbol === nativeToken.value?.symbol - ? EthereumTokenType.Native - : EthereumTokenType.ERC20 - : selectedToken.type, + ? SchemaType.Native + : SchemaType.ERC20 + : selectedToken.schema, selectedToken.address, transferAmount, - EthereumAddress.isValid(address) ? address : registeredAddress, + isValidAddress(address) ? address : registeredAddress, ) const { gasConfig, onCustomGasSetting, gasLimit, maxFee } = useGasConfig(gasLimit_, GAS_LIMIT) @@ -110,14 +116,14 @@ export const TransferERC20 = memo(({ token }) => { const price = is1559Supported && maxFee ? new BigNumber(maxFee) : gasPrice return multipliedBy(gasLimit, price) }, [gasLimit, gasPrice, maxFee, is1559Supported]) - const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice) + const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice.value ?? 0) const maxAmount = useMemo(() => { const price = is1559Supported && maxFee ? new BigNumber(maxFee) : gasPrice const gasFee = multipliedBy(addGasMargin(gasLimit), price) let amount_ = new BigNumber(tokenBalance || '0') - amount_ = selectedToken.type === EthereumTokenType.Native ? amount_.minus(gasFee) : amount_ + amount_ = selectedToken.schema === SchemaType.Native ? amount_.minus(gasFee) : amount_ return BigNumber.max(0, amount_).toFixed() }, [tokenBalance, gasPrice, selectedToken?.type, amount, gasLimit, maxFee, is1559Supported]) @@ -125,18 +131,18 @@ export const TransferERC20 = memo(({ token }) => { const onTransfer = useCallback(async () => { let hash: string | undefined - if (EthereumAddress.isValid(address)) { + if (isValidAddress(address)) { hash = await transferCallback(transferAmount, address, gasConfig, memo) - } else if (Utils?.isValidDomain?.(address)) { + } else if (Others?.isValidDomain?.(address)) { hash = await transferCallback(transferAmount, registeredAddress, gasConfig, memo) } if (typeof hash === 'string') { setMemo('') setAddress('') setAmount('') - refetchTokenBalance() + tokenBalanceRetry() } - }, [transferAmount, address, memo, selectedToken.decimals, transferCallback, gasConfig, registeredAddress, Utils]) + }, [transferAmount, address, memo, selectedToken.decimals, transferCallback, gasConfig, registeredAddress, Others]) // #region validation const validationMessage = useMemo(() => { @@ -144,9 +150,9 @@ export const TransferERC20 = memo(({ token }) => { if (isGreaterThan(rightShift(amount, selectedToken.decimals), maxAmount)) return t.wallets_transfer_error_insufficient_balance({ symbol: selectedToken.symbol ?? '' }) if (!address) return t.wallets_transfer_error_address_absence() - if (!(EthereumAddress.isValid(address) || Utils?.isValidDomain?.(address))) + if (!(isValidAddress(address) || Others?.isValidDomain?.(address))) return t.wallets_transfer_error_invalid_address() - if (Utils?.isValidDomain?.(address) && (resolveDomainError || !registeredAddress)) { + if (Others?.isValidDomain?.(address) && (resolveDomainError || !registeredAddress)) { if (network?.type !== NetworkType.Ethereum) return t.wallet_transfer_error_no_ens_support() return t.wallet_transfer_error_no_address_has_been_set_name() } @@ -158,10 +164,10 @@ export const TransferERC20 = memo(({ token }) => { tokenBalance, selectedToken, amount, - Utils, registeredAddress, resolveDomainError, network, + Others, ]) // #endregion @@ -171,7 +177,7 @@ export const TransferERC20 = memo(({ token }) => { return ( @@ -184,7 +190,7 @@ export const TransferERC20 = memo(({ token }) => { {address} - + @@ -202,7 +208,7 @@ export const TransferERC20 = memo(({ token }) => { ) } - if (Utils?.isValidDomain?.(address) && resolveDomainError) { + if (Others?.isValidDomain?.(address) && resolveDomainError) { return ( @@ -217,7 +223,7 @@ export const TransferERC20 = memo(({ token }) => { }, [ registeredAddress, address, - Utils?.isValidDomain, + Others?.isValidDomain, MaskColorVar, resolveDomainError, network?.type, @@ -268,7 +274,7 @@ export const TransferERC20 = memo(({ token }) => { maxAmount={maxAmount} balance={tokenBalance} label={t.wallets_transfer_amount()} - token={selectedToken as FungibleTokenDetailed} + token={selectedToken} onAmountChange={setAmount} SelectTokenChip={{ loading: false, diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx index 3f546e33fd4c..4056869e28fc 100644 --- a/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx +++ b/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx @@ -1,46 +1,46 @@ -import { zodResolver } from '@hookform/resolvers/zod' -import { RightIcon } from '@masknet/icons' -import { NetworkPluginID, useLookupAddress, useNetworkDescriptor, useWeb3State } from '@masknet/plugin-infra/web3' -import { WalletMessages } from '@masknet/plugin-wallet' -import { NetworkType } from '@masknet/public-api' -import { FormattedAddress } from '@masknet/shared' -import { DashboardRoutes } from '@masknet/shared-base' -import { useRemoteControlledDialog } from '@masknet/shared-base-ui' import { makeStyles, MaskColorVar, MaskTextField } from '@masknet/theme' -import { useERC721TokenDetailedOwnerList } from '@masknet/web3-providers' -import { multipliedBy } from '@masknet/web3-shared-base' -import { - ERC721ContractDetailed, - ERC721TokenDetailed, - EthereumTokenType, - formatWeiToEther, - isSameAddress, - isValidAddress, - useAccount, - useChainId, - useGasLimit, - useGasPrice, - useNativeTokenDetailed, - useTokenTransferCallback, -} from '@masknet/web3-shared-evm' -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' -import TuneIcon from '@mui/icons-material/Tune' import { Box, Button, IconButton, Link, Popover, Stack, Typography } from '@mui/material' -import { unionBy } from 'lodash-unified' import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' -import { Controller, useForm } from 'react-hook-form' -import { useLocation, useNavigate } from 'react-router-dom' import { useAsync, useUpdateEffect } from 'react-use' import { v4 as uuid } from 'uuid' -import { EthereumAddress } from 'wallet.ts' -import { z } from 'zod' -import { Services } from '../../../../API' -import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder' +import { + isSameAddress, + NonFungibleToken, + NonFungibleTokenContract, + multipliedBy, + NetworkPluginID, +} from '@masknet/web3-shared-base' +import { SchemaType, formatWeiToEther, NetworkType, ChainId, explorerResolver } from '@masknet/web3-shared-evm' +// import { useERC721TokenDetailedOwnerList } from '@masknet/web3-providers' +import { FormattedAddress } from '@masknet/shared' import { useDashboardI18N } from '../../../../locales' -import { useGasConfig } from '../../hooks/useGasConfig' +import { WalletMessages } from '@masknet/plugin-wallet' import { SelectNFTList } from './SelectNFTList' +import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder' +import { z } from 'zod' +import { EthereumAddress } from 'wallet.ts' +import { Controller, useForm } from 'react-hook-form' +import { zodResolver } from '@hookform/resolvers/zod' +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' +import TuneIcon from '@mui/icons-material/Tune' +import { useNavigate, useLocation } from 'react-router-dom' +import { DashboardRoutes } from '@masknet/shared-base' +import { useRemoteControlledDialog } from '@masknet/shared-base-ui' +import { useGasConfig } from '../../hooks/useGasConfig' +import { unionBy } from 'lodash-unified' import { TransferTab } from './types' -import { useNativeTokenPrice } from './useNativeTokenPrice' +import { + useAccount, + useChainId, + useGasPrice, + useLookupAddress, + useNetworkDescriptor, + useWeb3State, + useNativeToken, + useNativeTokenPrice, +} from '@masknet/plugin-infra/web3' +import { RightIcon } from '@masknet/icons' +import { useGasLimit, useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm' const useStyles = makeStyles()((theme) => ({ disabled: { @@ -58,14 +58,14 @@ const GAS_LIMIT = 30000 export const TransferERC721 = memo(() => { const t = useDashboardI18N() - const chainId = useChainId() + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const anchorEl = useRef(null) const { state } = useLocation() as { - state: { erc721Token?: ERC721TokenDetailed; type?: TransferTab } | null + state: { erc721Token?: NonFungibleToken; type?: TransferTab } | null } const { classes } = useStyles() - const [defaultToken, setDefaultToken] = useState(null) + const [defaultToken, setDefaultToken] = useState | null>(null) const navigate = useNavigate() const [popoverOpen, setPopoverOpen] = useState(false) const [recipientError, setRecipientError] = useState<{ @@ -73,18 +73,22 @@ export const TransferERC721 = memo(() => { message: string } | null>(null) const [minPopoverWidth, setMinPopoverWidth] = useState(0) - const [contract, setContract] = useState() + const [contract, setContract] = useState>() const [id] = useState(uuid) const [gasLimit_, setGasLimit_] = useState(0) const network = useNetworkDescriptor() - const { Utils } = useWeb3State() + const { Others } = useWeb3State() + + const account = useAccount(NetworkPluginID.PLUGIN_EVM) + const nativeToken = useNativeToken(NetworkPluginID.PLUGIN_EVM) + const nativeTokenPrice = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM) // form const schema = z.object({ recipient: z .string() .refine( - (address) => EthereumAddress.isValid(address) || Utils?.isValidDomain?.(address), + (address) => EthereumAddress.isValid(address) || Others?.isValidDomain?.(address), t.wallets_incorrect_address(), ), contract: z.string().min(1, t.wallets_collectible_contract_is_empty()), @@ -106,11 +110,11 @@ export const TransferERC721 = memo(() => { useEffect(() => { if (!state) return if (!state.erc721Token || state.type !== TransferTab.Collectibles) return - if (state.erc721Token.contractDetailed.chainId !== chainId) return - if (contract && !isSameAddress(contract.address, state.erc721Token.contractDetailed.address)) return + if (state.erc721Token.chainId !== chainId) return + if (!isSameAddress(contract?.address, state.erc721Token.address)) return - setContract(state.erc721Token.contractDetailed) - setValue('contract', state.erc721Token.contractDetailed.name) + setContract(state.erc721Token.contract) + setValue('contract', state.erc721Token.contract?.name ?? '') setValue('tokenId', state.erc721Token.tokenId) setDefaultToken(state.erc721Token) }, [state]) @@ -122,35 +126,34 @@ export const TransferERC721 = memo(() => { value: registeredAddress = '', error: resolveDomainError, loading: resolveDomainLoading, - } = useLookupAddress(allFormFields.recipient, NetworkPluginID.PLUGIN_EVM) + } = useLookupAddress(NetworkPluginID.PLUGIN_EVM, allFormFields.recipient) // #endregion // #region check contract address and account address useAsync(async () => { - const recipient = allFormFields.recipient - setRecipientError(null) - if (!recipient && !registeredAddress) return - if (!isValidAddress(recipient) && !isValidAddress(registeredAddress)) return - - clearErrors() - if (isSameAddress(recipient, account) || isSameAddress(registeredAddress, account)) { - setRecipientError({ - type: 'account', - message: t.wallets_transfer_error_same_address_with_current_account(), - }) - } - const result = await Services.Ethereum.getCode(recipient) - if (result !== '0x') { - setRecipientError({ - type: 'contractAddress', - message: t.wallets_transfer_error_is_contract_address(), - }) - } + // const recipient = allFormFields.recipient + // setRecipientError(null) + // if (!recipient && !registeredAddress) return + // if (!isValidAddress(recipient) && !isValidAddress(registeredAddress)) return + // clearErrors() + // if (isSameAddress(recipient, account) || isSameAddress(registeredAddress, account)) { + // setRecipientError({ + // type: 'account', + // message: t.wallets_transfer_error_same_address_with_current_account(), + // }) + // } + // const result = await EVM_RPC.getCode(recipient) + // if (result !== '0x') { + // setRecipientError({ + // type: 'contractAddress', + // message: t.wallets_transfer_error_is_contract_address(), + // }) + // } }, [allFormFields.recipient, clearErrors, registeredAddress]) // #endregion const erc721GasLimit = useGasLimit( - EthereumTokenType.ERC721, + SchemaType.ERC721, contract?.address, undefined, EthereumAddress.isValid(allFormFields.recipient) ? allFormFields.recipient : registeredAddress, @@ -162,11 +165,8 @@ export const TransferERC721 = memo(() => { }, [erc721GasLimit.value]) const { gasConfig, onCustomGasSetting, gasLimit } = useGasConfig(gasLimit_, GAS_LIMIT) - const account = useAccount() - const nativeToken = useNativeTokenDetailed() - const nativeTokenPrice = useNativeTokenPrice() const [{ loading: isTransferring }, transferCallback] = useTokenTransferCallback( - EthereumTokenType.ERC721, + SchemaType.ERC721, contract?.address ?? '', ) @@ -174,47 +174,47 @@ export const TransferERC721 = memo(() => { const { value: defaultGasPrice = '0' } = useGasPrice() const gasPrice = gasConfig.gasPrice || defaultGasPrice const gasFee = useMemo(() => multipliedBy(gasLimit, gasPrice), [gasLimit, gasPrice]) - const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice) + const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice.value ?? 0) // dialog const { setDialog: setSelectContractDialog } = useRemoteControlledDialog( WalletMessages.events.selectNftContractDialogUpdated, (ev) => { - if (ev.open || !ev.contract || ev.uuid !== id) return - if (!contract || (contract && !isSameAddress(contract.address, ev.contract.address))) { - if ( - contract && - defaultToken && - !isSameAddress(contract.address, defaultToken.contractDetailed.address) - ) { - setDefaultToken(null) - } - setValue('contract', ev.contract.name || ev.contract.address, { shouldValidate: true }) - setContract(ev.contract) - setValue('tokenId', '') - } + // if (ev.open || !ev.contract || ev.uuid !== id) return + // if (!contract || (contract && !isSameAddress(contract.address, ev.contract.address))) { + // if (contract && defaultToken && !isSameAddress(contract.address, defaultToken.address)) { + // setDefaultToken(null) + // } + // setValue('contract', ev.contract.name || ev.contract.address, { shouldValidate: true }) + // setContract(ev.contract) + // setValue('tokenId', '') + // } }, ) - const { - asyncRetry: { loading: loadingOwnerList }, - tokenDetailedOwnerList = [], - refreshing, - } = useERC721TokenDetailedOwnerList(contract, account) + // const { + // asyncRetry: { loading: loadingOwnerList }, + // tokenDetailedOwnerList = [], + // refreshing, + // } = useERC721TokenDetailedOwnerList(contract, account) + + const loadingOwnerList = false + const tokenDetailedOwnerList: Array> = [] + const refreshing = false const onTransfer = useCallback( async (data: FormInputs) => { let hash: string | undefined if (EthereumAddress.isValid(data.recipient)) { hash = await transferCallback(data.tokenId, data.recipient, gasConfig) - } else if (Utils?.isValidDomain?.(data.recipient) && EthereumAddress.isValid(registeredAddress)) { + } else if (Others?.isValidDomain?.(data.recipient) && EthereumAddress.isValid(registeredAddress)) { hash = await transferCallback(data.tokenId, registeredAddress, gasConfig) } if (typeof hash === 'string') { navigate(DashboardRoutes.WalletsHistory) } }, - [transferCallback, contract?.address, gasConfig, registeredAddress, Utils?.isValidDomain, navigate], + [transferCallback, contract?.address, gasConfig, registeredAddress, Others?.isValidDomain], ) const ensContent = useMemo(() => { @@ -223,7 +223,7 @@ export const TransferERC721 = memo(() => { return ( @@ -235,7 +235,7 @@ export const TransferERC721 = memo(() => { {allFormFields.recipient} - + @@ -253,7 +253,7 @@ export const TransferERC721 = memo(() => { ) } - if (Utils?.isValidDomain?.(allFormFields.recipient) && resolveDomainError) { + if (Others?.isValidDomain?.(allFormFields.recipient) && resolveDomainError) { return ( @@ -267,7 +267,7 @@ export const TransferERC721 = memo(() => { }, [ allFormFields.recipient, resolveDomainError, - Utils?.isValidDomain, + Others?.isValidDomain, resolveDomainLoading, network, registeredAddress, @@ -278,10 +278,10 @@ export const TransferERC721 = memo(() => { }, [ensContent]) const contractIcon = useMemo(() => { - if (!contract?.iconURL) return null + if (!contract?.logoURL) return null return ( - + ) }, [contract]) diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/index.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/index.tsx index 4bd3a214af25..13a58bd68212 100644 --- a/packages/dashboard/src/pages/Wallets/components/Transfer/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/Transfer/index.tsx @@ -4,12 +4,14 @@ import { Box, Tab } from '@mui/material' import { useTabs } from '@masknet/theme' import { TabContext, TabList, TabPanel } from '@mui/lab' import { TransferERC20 } from './TransferERC20' -import { ERC721TokenDetailed, useNativeTokenDetailed } from '@masknet/web3-shared-evm' import { useLocation } from 'react-router-dom' import { useDashboardI18N } from '../../../../locales' import { TransferERC721 } from './TransferERC721' import { TransferTab } from './types' -import type { Web3Plugin } from '@masknet/plugin-infra/web3' +import { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base' +import type { ChainId, SchemaType } from '@masknet/web3-shared-evm' +import { useNativeToken } from '@masknet/plugin-infra/web3' + const assetTabs = [TransferTab.Token, TransferTab.Collectibles] as const export * from './types' @@ -17,9 +19,13 @@ export * from './types' export const Transfer = memo(() => { const t = useDashboardI18N() const { state } = useLocation() as { - state: { token?: Web3Plugin.FungibleToken; erc721Token?: ERC721TokenDetailed; type?: TransferTab } | null + state: { + token?: FungibleToken + erc721Token?: FungibleToken + type?: TransferTab + } | null } - const { value: nativeToken } = useNativeTokenDetailed() + const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM) const transferTabsLabel: Record = { [TransferTab.Token]: t.wallets_assets_token(), [TransferTab.Collectibles]: t.wallets_assets_collectibles(), diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/useNativeTokenPrice.ts b/packages/dashboard/src/pages/Wallets/components/Transfer/useNativeTokenPrice.ts deleted file mode 100644 index e906bc79387e..000000000000 --- a/packages/dashboard/src/pages/Wallets/components/Transfer/useNativeTokenPrice.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { useCallback, useEffect, useState } from 'react' -import { useInterval } from 'react-use' -import { CryptoPrice, CurrencyType, getCoinGeckoCoinId, useChainId } from '@masknet/web3-shared-evm' -import { UPDATE_CHAIN_STATE_DELAY } from '@masknet/plugin-wallet' - -const URL_BASE = 'https://api.coingecko.com/api/v3' -async function getNativeTokenPrice(tokenId: string, currency: CurrencyType) { - const requestPath = `${URL_BASE}/simple/price?ids=${tokenId}&vs_currencies=${currency}` - const prices = await fetch(requestPath).then((r) => r.json() as Promise) - return prices -} - -const USD = CurrencyType.USD - -export function useNativeTokenPrice() { - const chainId = useChainId() - const coinId = getCoinGeckoCoinId(chainId) - const [price, setPrice] = useState(0) - - const trackPrice = useCallback(() => { - if (!coinId) return - getNativeTokenPrice(coinId, USD).then((result) => setPrice(result[coinId][USD])) - }, [coinId]) - - useEffect(trackPrice, [trackPrice]) - useInterval(trackPrice, UPDATE_CHAIN_STATE_DELAY) - - return price -} diff --git a/packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx b/packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx index 6a67cf0cc5a9..11aaa86280f4 100644 --- a/packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx +++ b/packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx @@ -1,6 +1,6 @@ import React, { FC, memo } from 'react' import { Box, Button, Stack, Typography } from '@mui/material' -import { ProviderType, TransactionStatusType } from '@masknet/web3-shared-evm' +import { ProviderType } from '@masknet/web3-shared-evm' import { makeStyles, MaskColorVar } from '@masknet/theme' import { FormattedAddress, LoadingAnimation, WalletIcon } from '@masknet/shared' import { useRemoteControlledDialog } from '@masknet/shared-base-ui' @@ -9,14 +9,15 @@ import { useProviderDescriptor, useWallet, useWeb3State, - Web3Plugin, useReverseAddress, + useRecentTransactions, + Web3Helper, + useAccount, } from '@masknet/plugin-infra/web3' -import { EMPTY_LIST } from '@masknet/shared-base' import { PluginMessages } from '../../../../API' -import { useRecentTransactions } from '../../hooks/useRecentTransactions' import { useDashboardI18N } from '../../../../locales' import { useNetworkSelector } from './useNetworkSelector' +import { NetworkPluginID, TransactionStatusType } from '@masknet/web3-shared-base' const useStyles = makeStyles()((theme) => ({ bar: { @@ -63,12 +64,11 @@ const useStyles = makeStyles()((theme) => ({ export const WalletStateBar = memo(() => { const t = useDashboardI18N() + const account = useAccount() const wallet = useWallet() - const networkDescriptor = useNetworkDescriptor() - const providerDescriptor = useProviderDescriptor() - const { value: pendingTransactions = EMPTY_LIST } = useRecentTransactions({ - status: TransactionStatusType.NOT_DEPEND, - }) + const networkDescriptor = useNetworkDescriptor() as Web3Helper.NetworkDescriptorAll + const providerDescriptor = useProviderDescriptor() as Web3Helper.ProviderDescriptorAll + const pendingTransactions = useRecentTransactions(NetworkPluginID.PLUGIN_EVM, TransactionStatusType.NOT_DEPEND) const { openDialog: openWalletStatusDialog } = useRemoteControlledDialog( PluginMessages.Wallet.events.walletStatusDialogUpdated, @@ -80,15 +80,16 @@ export const WalletStateBar = memo(() => { const [menu, openMenu] = useNetworkSelector() - const { value: domain } = useReverseAddress(wallet?.address) + const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, account) - if (!wallet) { + if (!account) { return } return ( { interface WalletStateBarUIProps { isPending: boolean - network?: Web3Plugin.NetworkDescriptor - provider?: Web3Plugin.ProviderDescriptor - wallet?: Web3Plugin.Wallet + network?: Web3Helper.NetworkDescriptorAll + provider?: Web3Helper.ProviderDescriptorAll + name?: string + address?: string domain?: string openConnectWalletDialog(): void openMenu: ReturnType[1] @@ -113,7 +115,8 @@ export const WalletStateBarUI: FC isPending, network, provider, - wallet, + name, + address, domain, openConnectWalletDialog, openMenu, @@ -121,9 +124,9 @@ export const WalletStateBarUI: FC }) => { const t = useDashboardI18N() const { classes } = useStyles() - const { Utils } = useWeb3State() + const { Others } = useWeb3State() - if (!wallet || !network || !provider) return null + if (!network || !provider) return null return ( @@ -165,19 +168,19 @@ export const WalletStateBarUI: FC {provider.type !== ProviderType.MaskWallet ? ( - {domain && Utils?.formatDomainName ? Utils.formatDomainName(domain) : provider.name} + {domain && Others?.formatDomainName ? Others.formatDomainName(domain) : provider.name} ) : ( - {wallet.name} - {domain && Utils?.formatDomainName ? ( - {Utils.formatDomainName(domain)} + {name} + {domain && Others?.formatDomainName ? ( + {Others.formatDomainName(domain)} ) : null} )} - + diff --git a/packages/dashboard/src/pages/Wallets/components/WalletStateBar/useNetworkSelector.tsx b/packages/dashboard/src/pages/Wallets/components/WalletStateBar/useNetworkSelector.tsx index a221eba8c480..48229a080206 100644 --- a/packages/dashboard/src/pages/Wallets/components/WalletStateBar/useNetworkSelector.tsx +++ b/packages/dashboard/src/pages/Wallets/components/WalletStateBar/useNetworkSelector.tsx @@ -2,7 +2,14 @@ import { MenuItem, Stack, Typography } from '@mui/material' import { makeStyles } from '@masknet/theme' import { SuccessIcon } from '@masknet/icons' import { WalletIcon, useMenu } from '@masknet/shared' -import { useChainId, useNetworkDescriptors, useProviderDescriptor, useWeb3UI } from '@masknet/plugin-infra/web3' +import type { NetworkPluginID } from '@masknet/web3-shared-base' +import { + useChainId, + useNetworkDescriptors, + useProviderDescriptor, + useWeb3UI, + Web3Helper, +} from '@masknet/plugin-infra/web3' const useStyles = makeStyles()((theme) => ({ item: { @@ -18,13 +25,14 @@ const useStyles = makeStyles()((theme) => ({ }, })) -export const useNetworkSelector = () => { +export const useNetworkSelector = (pluginID?: NetworkPluginID) => { const { classes } = useStyles() const currentChainId = useChainId() - const providerDescriptor = useProviderDescriptor() - const networkDescriptors = useNetworkDescriptors() - const { NetworkIconClickBait } = useWeb3UI().SelectNetworkMenu ?? {} + const providerDescriptor = useProviderDescriptor() as Web3Helper.ProviderDescriptorAll + const networkDescriptors = useNetworkDescriptors() as Web3Helper.NetworkDescriptorAll[] + const Web3UI = useWeb3UI() as Web3Helper.Web3UIAll + const { NetworkIconClickBait } = Web3UI.SelectNetworkMenu ?? {} const networkMenu = useMenu( ...(networkDescriptors diff --git a/packages/dashboard/src/pages/Wallets/hooks/index.ts b/packages/dashboard/src/pages/Wallets/hooks/index.ts index ad00f5de33a3..25e929f50f28 100644 --- a/packages/dashboard/src/pages/Wallets/hooks/index.ts +++ b/packages/dashboard/src/pages/Wallets/hooks/index.ts @@ -1,5 +1,3 @@ -export * from './useAddressBook' export * from './useERC20TokensDetailed' export * from './useGasConfig' export * from './useIsMatched' -export * from './useRecentTransactions' diff --git a/packages/dashboard/src/pages/Wallets/hooks/useAddressBook.ts b/packages/dashboard/src/pages/Wallets/hooks/useAddressBook.ts deleted file mode 100644 index fbba94c40961..000000000000 --- a/packages/dashboard/src/pages/Wallets/hooks/useAddressBook.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { useEffect } from 'react' -import { useChainId } from '@masknet/web3-shared-evm' -import { useAsyncRetry } from 'react-use' -import { PluginMessages, PluginServices } from '../../../API' - -export function useAddressBook() { - const chainId = useChainId() - const result = useAsyncRetry(async () => PluginServices.Wallet.getAllAddress(chainId), [chainId]) - - useEffect(() => PluginMessages.Wallet.events.addressBookUpdated.on(result.retry), [result.retry]) - - return result -} diff --git a/packages/dashboard/src/pages/Wallets/hooks/useERC20TokensDetailed.ts b/packages/dashboard/src/pages/Wallets/hooks/useERC20TokensDetailed.ts index 3d5d5cad4ab0..0d11d923afaa 100644 --- a/packages/dashboard/src/pages/Wallets/hooks/useERC20TokensDetailed.ts +++ b/packages/dashboard/src/pages/Wallets/hooks/useERC20TokensDetailed.ts @@ -1,49 +1,43 @@ -import { - EthereumTokenType, - isSameAddress, - useAssetsFromChain, - useERC20TokensDetailedFromTokenLists, - useNativeTokenDetailed, - useTokenConstants, - useTokenListConstants, -} from '@masknet/web3-shared-evm' -import { uniqBy } from 'lodash-unified' -import { useMemo } from 'react' - export function useERC20TokensDetailed() { - const { ERC20 } = useTokenListConstants() - const { value: nativeTokenDetailed } = useNativeTokenDetailed() - const { value: erc20TokensDetailed = [], loading: erc20TokensDetailedLoading } = - useERC20TokensDetailedFromTokenLists(ERC20) + // const { FUNGIBLE_TOKEN_LISTS = [] } = useTokenListConstants() + // const { value: nativeTokenDetailed } = useFungibleToken(NetworkPluginID.PLUGIN_EVM) + // const { value: erc20TokensDetailed = [], loading: erc20TokensDetailedLoading } = useFungibleTokensFromTokenList( + // NetworkPluginID.PLUGIN_EVM, + // ) - // #region mask token - const { MASK_ADDRESS } = useTokenConstants() - // #endregion + // // #region mask token + // const { MASK_ADDRESS } = useTokenConstants() + // // #endregion - const tokens = useMemo( - () => - uniqBy( - nativeTokenDetailed ? [nativeTokenDetailed, ...erc20TokensDetailed] : [...erc20TokensDetailed], - (x) => x.address.toLowerCase(), - ).sort((a, z) => { - if (a.type === EthereumTokenType.Native) return -1 - if (z.type === EthereumTokenType.Native) return 1 - if (isSameAddress(a.address, MASK_ADDRESS)) return -1 - if (isSameAddress(z.address, MASK_ADDRESS)) return 1 - return 0 - }), - [nativeTokenDetailed, erc20TokensDetailed.length], - ) + // const tokens = useMemo( + // () => + // uniqBy( + // nativeTokenDetailed ? [nativeTokenDetailed, ...erc20TokensDetailed] : [...erc20TokensDetailed], + // (x) => x.address.toLowerCase(), + // ).sort((a, z) => { + // if (a.type === SchemaType.Native) return -1 + // if (z.type === SchemaType.Native) return 1 + // if (isSameAddress(a.address, MASK_ADDRESS)) return -1 + // if (isSameAddress(z.address, MASK_ADDRESS)) return 1 + // return 0 + // }), + // [nativeTokenDetailed, erc20TokensDetailed.length], + // ) - const { - value: assetsDetailedChain = [], - loading: assetsDetailedChainLoading, - error: assetsDetailedChainError, - } = useAssetsFromChain(tokens) + // const { + // value: assetsDetailedChain = [], + // loading: assetsDetailedChainLoading, + // error: assetsDetailedChainError, + // } = useAssetsFromChain(tokens) + // return { + // value: assetsDetailedChain, + // loading: erc20TokensDetailedLoading || assetsDetailedChainLoading, + // error: assetsDetailedChainError, + // } return { - value: assetsDetailedChain, - loading: erc20TokensDetailedLoading || assetsDetailedChainLoading, - error: assetsDetailedChainError, + value: [], + loading: false, + error: undefined, } } diff --git a/packages/dashboard/src/pages/Wallets/hooks/useGasConfig.ts b/packages/dashboard/src/pages/Wallets/hooks/useGasConfig.ts index 51b62436afaf..4b28631e388c 100644 --- a/packages/dashboard/src/pages/Wallets/hooks/useGasConfig.ts +++ b/packages/dashboard/src/pages/Wallets/hooks/useGasConfig.ts @@ -1,24 +1,25 @@ import { useEffect, useMemo, useState } from 'react' import { toHex } from 'web3-utils' import BigNumber from 'bignumber.js' -import { formatGweiToWei, GasOption, isEIP1559Supported, useChainId, useGasPrice } from '@masknet/web3-shared-evm' +import { chainResolver, formatGweiToWei } from '@masknet/web3-shared-evm' import { useRemoteControlledDialog } from '@masknet/shared-base-ui' import { WalletMessages } from '@masknet/plugin-wallet' -import { useGasOptions } from '../../../hooks/useGasOptions' +import { useChainId, useGasOptions, useGasPrice } from '@masknet/plugin-infra/web3' +import { GasOptionType, NetworkPluginID } from '@masknet/web3-shared-base' export const useGasConfig = (gasLimit: number, minGasLimit: number) => { - const chainId = useChainId() + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const [gasLimit_, setGasLimit_] = useState(0) const [customGasPrice, setCustomGasPrice] = useState(0) - const [gasOption, setGasOption] = useState(GasOption.Medium) + const [gasOption, setGasOption] = useState(GasOptionType.NORMAL) const [maxFee, setMaxFee] = useState(0) const [priorityFee, setPriorityFee] = useState(0) - const is1559Supported = useMemo(() => isEIP1559Supported(chainId), [chainId]) - const { value: defaultGasPrice = '0' } = useGasPrice() + const is1559Supported = useMemo(() => chainResolver.isSupport(chainId, 'EIP1559'), [chainId]) + const { value: defaultGasPrice = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM) const gasPrice = customGasPrice || defaultGasPrice - const { gasOptions } = useGasOptions() + const { value: gasOptions } = useGasOptions(NetworkPluginID.PLUGIN_EVM) const { setDialog: setGasSettingDialog, closeDialog } = useRemoteControlledDialog( WalletMessages.events.gasSettingDialogUpdated, @@ -44,29 +45,28 @@ export const useGasConfig = (gasLimit: number, minGasLimit: number) => { if (!gasOptions) return if (is1559Supported) { - const gasLevel = gasOptions.medium as Exclude + const gasLevel = gasOptions.normal setMaxFee((oldVal) => { - return !oldVal ? formatGweiToWei(gasLevel?.suggestedMaxFeePerGas ?? 0) : oldVal + return !oldVal ? formatGweiToWei(gasLevel?.suggestedMaxFeePerGas ?? '0') : oldVal }) setPriorityFee((oldVal) => { - return !oldVal ? formatGweiToWei(gasLevel?.suggestedMaxPriorityFeePerGas ?? 0) : oldVal + return !oldVal ? formatGweiToWei(gasLevel?.suggestedMaxPriorityFeePerGas ?? '0') : oldVal }) } else { - setCustomGasPrice((oldVal) => (!oldVal ? (gasOptions.medium as number) : oldVal)) + setCustomGasPrice((oldVal) => (!oldVal ? gasOptions.normal.suggestedMaxFeePerGas : oldVal)) } - }, [is1559Supported, gasOptions?.medium]) + }, [is1559Supported, gasOptions?.normal]) useEffect(() => { if (!gasOptions) return - if (is1559Supported) { - const gasLevel = gasOptions.medium as Exclude + const gasLevel = gasOptions.normal setMaxFee(formatGweiToWei(gasLevel?.suggestedMaxFeePerGas ?? 0)) setPriorityFee(formatGweiToWei(gasLevel?.suggestedMaxPriorityFeePerGas ?? 0)) } else { - setCustomGasPrice(gasOptions.medium as number) + setCustomGasPrice(gasOptions.normal.suggestedMaxFeePerGas) } - }, [chainId, gasOptions?.medium]) + }, [chainId, gasOptions?.normal]) const gasConfig = useMemo(() => { return is1559Supported diff --git a/packages/dashboard/src/pages/Wallets/hooks/useRecentTransactions.ts b/packages/dashboard/src/pages/Wallets/hooks/useRecentTransactions.ts deleted file mode 100644 index 96e38d16f58b..000000000000 --- a/packages/dashboard/src/pages/Wallets/hooks/useRecentTransactions.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { useEffect } from 'react' -import { useAsyncRetry } from 'react-use' -import { useAccount, useChainId } from '@masknet/web3-shared-evm' -import { PluginMessages, PluginServices } from '../../../API' -import type { RecentTransactionOptions } from '../../../../../mask/src/plugins/Wallet/services' - -// todo: should merge in plugin infra package when plugin infra ready -export function useRecentTransactions(options?: RecentTransactionOptions) { - const account = useAccount() - const chainId = useChainId() - - const result = useAsyncRetry(async () => { - if (!account) return [] - return PluginServices.Wallet.getRecentTransactions(chainId, account, options) - }, [chainId, account, JSON.stringify(options)]) - - useEffect(() => PluginMessages.Wallet.events.transactionStateUpdated.on(result.retry), [result.retry]) - useEffect(() => PluginMessages.Wallet.events.transactionsUpdated.on(result.retry), [result.retry]) - - return result -} diff --git a/packages/dashboard/src/pages/Wallets/index.tsx b/packages/dashboard/src/pages/Wallets/index.tsx index d211a8c7eace..413fbdd66e2e 100644 --- a/packages/dashboard/src/pages/Wallets/index.tsx +++ b/packages/dashboard/src/pages/Wallets/index.tsx @@ -1,22 +1,19 @@ import { getRegisteredWeb3Networks, - NetworkPluginID, useAccount, useChainId, - useNetworkDescriptor, useCurrentWeb3NetworkPluginID, - useWallet, + useFungibleAssets, + useNetworkDescriptor, useWallets, - useWeb3State as useWeb3PluginState, - Web3Plugin, + Web3Helper, } from '@masknet/plugin-infra/web3' +import { DashboardRoutes, EMPTY_LIST, relativeRouteOf } from '@masknet/shared-base' import { useRemoteControlledDialog } from '@masknet/shared-base-ui' -import { DashboardRoutes, relativeRouteOf } from '@masknet/shared-base' -import { useWeb3State } from '@masknet/web3-shared-evm' +import { NetworkPluginID } from '@masknet/web3-shared-base' import BigNumber from 'bignumber.js' import { useEffect, useMemo, useState } from 'react' import { Route, Routes, useLocation, useNavigate } from 'react-router-dom' -import { useAsync } from 'react-use' import { PluginMessages } from '../../API' import { PageFrame } from '../../components/PageFrame' import { useDashboardI18N } from '../../locales' @@ -31,16 +28,14 @@ import { StartUp } from './StartUp' import { getTokenUSDValue } from './utils/getTokenUSDValue' const r = relativeRouteOf(DashboardRoutes.Wallets) + function Wallets() { - const wallet = useWallet() + const t = useDashboardI18N() const wallets = useWallets() const navigate = useNavigate() - const t = useDashboardI18N() - const currentChainId = useChainId() - const { Asset } = useWeb3PluginState() + const chainId = useChainId() const account = useAccount() - const { portfolioProvider } = useWeb3State() - const network = useNetworkDescriptor() + const { value: fungibleAssets = EMPTY_LIST } = useFungibleAssets(NetworkPluginID.PLUGIN_EVM) const { pathname } = useLocation() const isWalletPath = useIsMatched(DashboardRoutes.Wallets) @@ -50,19 +45,15 @@ function Wallets() { const [receiveOpen, setReceiveOpen] = useState(false) const networks = getRegisteredWeb3Networks() - const networkDescriptor = useNetworkDescriptor() const pluginId = useCurrentWeb3NetworkPluginID() - const [selectedNetwork, setSelectedNetwork] = useState( + const networkDescriptor = useNetworkDescriptor() as Web3Helper.NetworkDescriptorAll + const [selectedNetwork, setSelectedNetwork] = useState( networkDescriptor ?? null, ) - const { openDialog: openBuyDialog } = useRemoteControlledDialog(PluginMessages.Transak.buyTokenDialogUpdated) + const { openDialog: openBuyDialog } = useRemoteControlledDialog(PluginMessages.Transak?.buyTokenDialogUpdated) const { openDialog: openSwapDialog } = useRemoteControlledDialog(PluginMessages.Swap.swapDialogUpdated) - const { value: detailedTokens } = useAsync( - async () => Asset?.getFungibleAssets?.(account, portfolioProvider, network!), - [account, Asset, portfolioProvider, network], - ) const renderNetworks = useMemo(() => { return networks.filter((x) => pluginId === x.networkSupporterPluginID && x.isMainnet) }, [networks, pluginId]) @@ -87,13 +78,13 @@ function Wallets() { }, [pathname, defaultNetwork]) const balance = useMemo(() => { - if (!detailedTokens || !detailedTokens.length) return 0 + if (!fungibleAssets || !fungibleAssets.length) return 0 - const values = detailedTokens + const values = fungibleAssets .filter((x) => (selectedNetwork ? x.chainId === selectedNetwork.chainId : true)) .map((y) => getTokenUSDValue(y.value)) return BigNumber.sum(...values).toNumber() - }, [selectedNetwork, detailedTokens]) + }, [selectedNetwork, fungibleAssets]) const pateTitle = useMemo(() => { if (wallets.length === 0) return t.create_wallet_form_title() @@ -107,7 +98,7 @@ function Wallets() { return ( }> - {!wallet ? ( + {!account ? ( ) : ( <> @@ -127,18 +118,13 @@ function Wallets() { } /> } + element={} /> )} - {wallet ? ( - setReceiveOpen(false)} - /> + {account ? ( + setReceiveOpen(false)} /> ) : null} ) diff --git a/packages/dashboard/src/pages/Wallets/utils/getTokenUSDValue.tsx b/packages/dashboard/src/pages/Wallets/utils/getTokenUSDValue.tsx index 92ae2df56215..80d01ae43070 100644 --- a/packages/dashboard/src/pages/Wallets/utils/getTokenUSDValue.tsx +++ b/packages/dashboard/src/pages/Wallets/utils/getTokenUSDValue.tsx @@ -1,4 +1,4 @@ -import { CurrencyType } from '@masknet/plugin-infra/web3' +import { CurrencyType } from '@masknet/web3-shared-base' export const getTokenUSDValue = (value?: { [key in CurrencyType]?: string }) => value ? Number.parseFloat(value[CurrencyType.USD] ?? '') : 0 diff --git a/packages/dashboard/src/web3/context.ts b/packages/dashboard/src/web3/context.ts deleted file mode 100644 index d97ac196dc69..000000000000 --- a/packages/dashboard/src/web3/context.ts +++ /dev/null @@ -1,155 +0,0 @@ -import type { Subscription } from 'use-subscription' -import { - ChainId, - ERC1155TokenDetailed, - ERC721TokenDetailed, - FungibleAssetProvider, - ProviderType, - ERC20TokenDetailed, - EthereumTokenType, - NetworkType, - Web3ProviderType, - isInjectedProvider, -} from '@masknet/web3-shared-evm' -import { getProxyWebsocketInstance } from '@masknet/web3-shared-base' -import { Services, Messages, PluginServices, PluginMessages } from '../API' -import { TokenList } from '@masknet/web3-providers' - -export const Web3Context: Web3ProviderType = { - allowTestnet: createSubscriptionFromAsync(Services.Settings.getWalletAllowTestChain, false, () => { - return () => {} - }), - account: createSubscriptionFromAsync( - async () => { - const providerType = await Services.Settings.getCurrentSelectedWalletProvider() - if (isInjectedProvider(providerType) || providerType === ProviderType.Fortmatic) return '' - return Services.Settings.getSelectedWalletAddress() - }, - '', - (callback) => { - const a = Messages.events.currentAccountSettings.on(callback) - const b = Messages.events.currentProviderSettings.on(callback) - return () => void [a(), b()] - }, - ), - tokenPrices: createSubscriptionFromAsync( - Services.Settings.getTokenPrices, - {}, - Messages.events.currentTokenPricesSettings.on, - ), - chainId: createSubscriptionFromAsync( - Services.Settings.getChainId, - ChainId.Mainnet, - Messages.events.currentChainIdSettings.on, - ), - providerType: createSubscriptionFromAsync( - Services.Settings.getCurrentSelectedWalletProvider, - ProviderType.MaskWallet, - Messages.events.currentProviderSettings.on, - ), - networkType: createSubscriptionFromAsync( - Services.Settings.getCurrentSelectedWalletNetwork, - NetworkType.Ethereum, - Messages.events.currentNetworkSettings.on, - ), - walletPrimary: createSubscriptionFromAsync( - PluginServices.Wallet.getWalletPrimary, - null, - PluginMessages.Wallet.events.walletsUpdated.on, - ), - wallets: createSubscriptionFromAsync( - PluginServices.Wallet.getWallets, - [], - PluginMessages.Wallet.events.walletsUpdated.on, - ), - erc20Tokens: createSubscriptionFromAsync( - () => PluginServices.Wallet.getTokens(EthereumTokenType.ERC20), - [], - PluginMessages.Wallet.events.erc20TokensUpdated.on, - ), - erc721Tokens: createSubscriptionFromAsync( - () => PluginServices.Wallet.getTokens(EthereumTokenType.ERC721), - [], - PluginMessages.Wallet.events.erc721TokensUpdated.on, - ), - erc1155Tokens: createSubscriptionFromAsync( - () => PluginServices.Wallet.getTokens(EthereumTokenType.ERC1155), - [], - PluginMessages.Wallet.events.erc1155TokensUpdated.on, - ), - portfolioProvider: createSubscriptionFromAsync( - Services.Settings.getCurrentPortfolioDataProvider, - FungibleAssetProvider.DEBANK, - Messages.events.currentFungibleAssetDataProviderSettings.on, - ), - - addToken: PluginServices.Wallet.addToken, - removeToken: PluginServices.Wallet.removeToken, - trustToken: PluginServices.Wallet.trustToken, - blockToken: PluginServices.Wallet.blockToken, - - request: Services.Ethereum.request, - - getAssetsList: PluginServices.Wallet.getAssetsList, - getAssetsListNFT: PluginServices.Wallet.getAssetsListNFT, - getCollectionsNFT: PluginServices.Wallet.getCollectionsNFT, - getAddressNamesList: PluginServices.Wallet.getAddressNames, - getTransactionList: PluginServices.Wallet.getTransactionList, - fetchERC20TokensFromTokenLists: TokenList.fetchERC20TokensFromTokenLists, - providerSocket: getProxyWebsocketInstance((info) => - PluginMessages.Wallet.events.socketMessageUpdated.sendToAll(info), - ), -} - -// double check -function createSubscriptionFromAsync( - f: () => Promise, - defaultValue: T, - onChange: (callback: () => void) => () => void, -): Subscription { - // 0 - idle, 1 - updating state, > 1 - waiting state - let beats = 0 - let state = defaultValue - const { subscribe, trigger } = getEventTarget() - f() - .then((v) => (state = v)) - .finally(trigger) - const flush = async () => { - state = await f() - beats -= 1 - if (beats > 0) { - beats = 1 - setTimeout(flush, 0) - } else if (beats < 0) { - beats = 0 - } - trigger() - } - return { - getCurrentValue: () => state, - subscribe: (sub) => { - const a = subscribe(sub) - const b = onChange(async () => { - beats += 1 - if (beats === 1) flush() - }) - return () => void [a(), b()] - }, - } -} - -function getEventTarget() { - const event = new EventTarget() - const EVENT = 'event' - let timer: ReturnType - function trigger() { - clearTimeout(timer) - // delay to update state to ensure that all settings to be synced globally - timer = setTimeout(() => event.dispatchEvent(new Event(EVENT)), 600) - } - function subscribe(f: () => void) { - event.addEventListener(EVENT, f) - return () => event.removeEventListener(EVENT, f) - } - return { trigger, subscribe } -} diff --git a/packages/dashboard/stories/components/Wallet/CollectibleCard.tsx b/packages/dashboard/stories/components/Wallet/CollectibleCard.tsx index 580fce31c65c..9eb9a44101b1 100644 --- a/packages/dashboard/stories/components/Wallet/CollectibleCard.tsx +++ b/packages/dashboard/stories/components/Wallet/CollectibleCard.tsx @@ -1,32 +1,36 @@ import { story } from '@masknet/storybook-shared' +import { TokenType } from '@masknet/web3-shared-base' +import { SchemaType } from '@masknet/web3-shared-evm' import { CollectibleCard as C } from '../../../src/pages/Wallets/components/CollectibleCard' -import { TokenType } from '@masknet/plugin-infra/web3' const { meta, of } = story(C) export default meta({ title: 'Components/Wallet/Collectible Card' }) export const CollectibleCard = of({ args: { - chainId: 1, token: { id: 'token_id', chainId: 1, tokenId: '608932', + address: '', type: TokenType.NonFungible, - name: 'Rarible 1155', - description: '', - owner: 'test_owner', + schema: SchemaType.ERC721, + owner: { + nickname: 'test_owner', + }, metadata: { + chainId: 1, name: 'Rarible 1155', + symbol: 'RAB', description: '', mediaType: '', }, contract: { - id: 'address', - address: 'address', chainId: 1, name: '', symbol: '', + address: 'address', + schema: SchemaType.ERC721, }, }, onSend() {}, diff --git a/packages/dashboard/stories/components/Wallet/ReceiveDialog.tsx b/packages/dashboard/stories/components/Wallet/ReceiveDialog.tsx index 0605dd6ab693..3cf9b1b35df2 100644 --- a/packages/dashboard/stories/components/Wallet/ReceiveDialog.tsx +++ b/packages/dashboard/stories/components/Wallet/ReceiveDialog.tsx @@ -1,7 +1,6 @@ import { story } from '@masknet/storybook-shared' -import { ReceiveDialogUI as C } from '../../../src/pages/Wallets/components/ReceiveDialog' import { action } from '@storybook/addon-actions' -import { NetworkType } from '@masknet/web3-shared-evm' +import { ReceiveDialogUI as C } from '../../../src/pages/Wallets/components/ReceiveDialog' const { meta, of } = story(C) @@ -11,8 +10,6 @@ export const ReceiveDialog = of({ args: { open: true, onClose: action('onClose'), - chainName: 'Ethereum', - walletAddress: '0xFD7A5D91AF554ACD8ED07c7911E8556a7D20D88a', - currentNetworkType: NetworkType.Ethereum, + address: '0xFD7A5D91AF554ACD8ED07c7911E8556a7D20D88a', }, }) diff --git a/packages/dashboard/tsconfig.json b/packages/dashboard/tsconfig.json index cfb7a22eb371..f65c8ec8ec49 100644 --- a/packages/dashboard/tsconfig.json +++ b/packages/dashboard/tsconfig.json @@ -18,6 +18,8 @@ { "path": "../web3-providers" }, { "path": "../icons/" }, { "path": "../plugin-infra" }, + { "path": "../plugins/Solana/" }, + { "path": "../plugins/EVM/" }, { "path": "../plugins/Flow/" }, { "path": "../plugins/Wallet/" }, { "path": "../backup-format/" }, diff --git a/packages/encryption/src/encryption/Decryption.ts b/packages/encryption/src/encryption/Decryption.ts index ca41d207507e..ba50cec0ba9f 100644 --- a/packages/encryption/src/encryption/Decryption.ts +++ b/packages/encryption/src/encryption/Decryption.ts @@ -167,7 +167,7 @@ async function* v38To40StaticECDH( } type StaticV38OrOlderECDH = { type: 'static-v38-or-older' - derive: (postKeyIV: Uint8Array) => Promise<(readonly [key: AESCryptoKey, iv: Uint8Array])[]> + derive: (postKeyIV: Uint8Array) => Promise> } type EphemeralECDH = { type: 'ephemeral' diff --git a/packages/encryption/src/encryption/v38-ecdh.ts b/packages/encryption/src/encryption/v38-ecdh.ts index e01036308290..91e82cba52db 100644 --- a/packages/encryption/src/encryption/v38-ecdh.ts +++ b/packages/encryption/src/encryption/v38-ecdh.ts @@ -27,7 +27,7 @@ export async function deriveAESByECDH_version38OrOlderExtraSteps( deriveAESByECDH: (key: EC_Public_CryptoKey) => Promise, pub: EC_Public_CryptoKey, iv: Uint8Array, -): Promise<(readonly [key: AESCryptoKey, iv: Uint8Array])[]> { +): Promise> { const deriveResult = await deriveAESByECDH(pub) const extraSteps = deriveResult.map(async (key) => { const derivedKeyRaw = await crypto.subtle.exportKey('raw', key) diff --git a/packages/injected-script/main/EventListenerPatch/capture.ts b/packages/injected-script/main/EventListenerPatch/capture.ts index a70a3e4e0556..30c231554d85 100644 --- a/packages/injected-script/main/EventListenerPatch/capture.ts +++ b/packages/injected-script/main/EventListenerPatch/capture.ts @@ -1,7 +1,7 @@ import { clone_into, redefineEventTargetPrototype, unwrapXRay_CPPBindingObject } from '../utils' import { apply, error, no_xray_Proxy, warn, xray_Map } from '../intrinsic' -const CapturingEvents: Set = new Set(['keyup', 'input', 'paste', 'change'] as (keyof DocumentEventMap)[]) +const CapturingEvents: Set = new Set(['keyup', 'input', 'paste', 'change'] as Array) type EventListenerDescriptor = { once: boolean; passive: boolean; capture: boolean } const CapturedListeners = new WeakMap>>() diff --git a/packages/injected-script/main/GlobalVariableBridge/index.ts b/packages/injected-script/main/GlobalVariableBridge/index.ts index c9569d02f980..c832ab3981a6 100644 --- a/packages/injected-script/main/GlobalVariableBridge/index.ts +++ b/packages/injected-script/main/GlobalVariableBridge/index.ts @@ -13,14 +13,27 @@ function read(path: string) { const fragments = apply(split, path, ['.' as any]) let result: any = window while (fragments.length !== 0) { - const key = apply(shift, fragments, []) - result = key ? result[key] : result + try { + const key = apply(shift, fragments, []) + result = key ? result[key] : result + } catch { + return + } } return result } export function access(path: string, id: number, property: string) { - handlePromise(id, () => read(path)[property]) + handlePromise(id, () => { + const item = read(path)[property] + + // the public key cannot transfer correctly between pages, since stringify it manually + if (path === 'solflare' && property === 'publicKey') { + return item.toBase58() + } + + return item + }) } export function callRequest(path: string, id: number, request: unknown) { @@ -37,16 +50,22 @@ export function bindEvent(path: string, bridgeEvent: keyof InternalEvents, event read(path).on( event, clone_into((...args: any[]) => { - sendEvent(bridgeEvent, event, args) + // TODO: type unsound + sendEvent(bridgeEvent, path, event, args) }), ) } function untilInner(name: string) { if (has(window, name)) return apply<(result: true) => Promise>(resolve, Promise, [true]) - return new Promise((r) => { + + let restCheckTimes = 150 // 30s + + return new Promise((resolve) => { function check() { - if (has(window, name)) return r(true) + restCheckTimes -= 1 + if (restCheckTimes < 0) return + if (has(window, name)) return resolve(true) apply(setTimeout, window, [check, 200]) } check() diff --git a/packages/injected-script/main/communicate.ts b/packages/injected-script/main/communicate.ts index 44489e68e40a..ffc597ebf0ed 100644 --- a/packages/injected-script/main/communicate.ts +++ b/packages/injected-script/main/communicate.ts @@ -27,43 +27,19 @@ document.addEventListener(CustomEventId, (e) => { case 'resolvePromise': return - // solana - case 'solanaBridgeRequestListen': - return apply(bindEvent, null, ['solana', 'solanaBridgeOnEvent', ...r[1]]) - case 'solanaBridgeExecute': - return apply(execute, null, [...r[1]]) - case 'solanaBridgeSendRequest': - return apply(callRequest, null, ['solana', ...r[1]]) - case 'solanaBridgePrimitiveAccess': - return apply(access, null, ['solana', ...r[1]]) - case 'untilSolanaBridgeOnline': - return apply(until, null, ['solana', ...r[1]]) - case 'solanaBridgeOnEvent': - return - - // ethereum - case 'ethBridgeRequestListen': - return apply(bindEvent, null, ['ethereum', 'ethBridgeOnEvent', ...r[1]]) - case 'ethBridgeSendRequest': - return apply(callRequest, null, ['ethereum', ...r[1]]) - case 'ethBridgePrimitiveAccess': - return apply(access, null, ['ethereum', ...r[1]]) - case 'untilEthBridgeOnline': - return apply(until, null, ['ethereum', ...r[1]]) - case 'ethBridgeOnEvent': - return - - // coin98 - case 'coin98BridgeRequestListen': - return apply(bindEvent, null, ['coin98.provider', 'coin98BridgeOnEvent', ...r[1]]) - case 'coin98BridgeSendRequest': - return apply(callRequest, null, ['coin98.provider', ...r[1]]) - case 'coin98BridgePrimitiveAccess': - return apply(access, null, ['coin98.provider', ...r[1]]) - case 'untilCoin98BridgeOnline': - return apply(until, null, ['coin98', ...r[1]]) - case 'coin98BridgeOnEvent': + // web3 + case 'web3BridgeBindEvent': + return apply(bindEvent, null, r[1]) + case 'web3BridgeEmitEvent': return + case 'web3BridgeSendRequest': + return apply(callRequest, null, r[1]) + case 'web3BridgePrimitiveAccess': + return apply(access, null, r[1]) + case 'web3UntilBridgeOnline': + return apply(until, null, r[1]) + case 'web3BridgeExecute': + return apply(execute, null, r[1]) default: const neverEvent: never = r[0] diff --git a/packages/injected-script/package.json b/packages/injected-script/package.json index 308b4efd55ff..9d322954c7cb 100644 --- a/packages/injected-script/package.json +++ b/packages/injected-script/package.json @@ -13,9 +13,6 @@ "build": "rollup -c", "start": "rollup -c -w" }, - "dependencies": { - "web3-core-helpers": "1.7.3" - }, "devDependencies": { "@rollup/plugin-sucrase": "^4.0.4", "rollup": "^2.73.0", diff --git a/packages/injected-script/sdk/Base.ts b/packages/injected-script/sdk/Base.ts new file mode 100644 index 000000000000..253aa966ec3f --- /dev/null +++ b/packages/injected-script/sdk/Base.ts @@ -0,0 +1,101 @@ +import { createPromise, sendEvent } from './utils' + +export class InjectedProvider { + private events = new Map>() + private isReadyInternal = false + private isConnectedInternal = false + + constructor(public pathname: string) { + this.startup() + } + + private async startup() { + await this.untilAvailable() + + this.on('connected', () => { + this.isConnectedInternal = true + }) + this.on('disconnect', () => { + this.isConnectedInternal = false + }) + + this.isConnectedInternal = (await this.getProperty('isConnected')) as boolean + } + + get isReady() { + return this.isReadyInternal + } + + get isConnected() { + return this.isConnectedInternal + } + + /** + * Build the connection. + */ + connect(options: unknown): Promise { + return createPromise((id) => sendEvent('web3BridgeExecute', [this.pathname, 'connect'].join('.'), id, options)) + } + + /** + * Break the connections. + */ + disconnect(): Promise { + return createPromise((id) => sendEvent('web3BridgeExecute', [this.pathname, 'disconnect'].join('.'), id)) + } + + /** + * Wait until the sdk object injected into the page. + */ + async untilAvailable(validator: () => Promise = () => Promise.resolve(true)): Promise { + await createPromise((id) => sendEvent('web3UntilBridgeOnline', this.pathname.split('.')[0], id)) + if (await validator()) { + this.isReadyInternal = true + } + } + + /** + * Send RPC request to the sdk object. + */ + request(data: unknown): Promise { + return createPromise((id) => sendEvent('web3BridgeExecute', [this.pathname, 'request'].join('.'), id, data)) + } + + /** + * Add event listener on the sdk object. + */ + on(event: string, callback: (...args: any) => void): () => void { + if (!this.events.has(event)) { + this.events.set(event, new Set()) + sendEvent('web3BridgeBindEvent', this.pathname, 'web3BridgeEmitEvent', event) + } + const set = this.events.get(event)! + set.add(callback) + return () => void set.delete(callback) + } + + /** + * Remove event listener from the sdk object. + */ + off(event: string, callback: (...args: any) => void): void { + this.events.get(event)?.delete(callback) + } + + /** + * Emit event and invoke registered listeners + */ + emit(event: string, data: unknown[]) { + for (const f of this.events.get(event) || []) { + try { + Reflect.apply(f, null, data) + } catch {} + } + } + + /** + * Access primitive property on the sdk object. + */ + getProperty(key: string): Promise { + return createPromise((id) => sendEvent('web3BridgePrimitiveAccess', this.pathname, id, key)) + } +} diff --git a/packages/injected-script/sdk/Coin98.ts b/packages/injected-script/sdk/Coin98.ts new file mode 100644 index 000000000000..58512549ea7a --- /dev/null +++ b/packages/injected-script/sdk/Coin98.ts @@ -0,0 +1,28 @@ +import type { RequestArguments } from 'web3-core' +import { InjectedProvider } from './Base' + +export enum Coin98ProviderType { + EVM = 1, + Solana = 2, + Near = 3, +} + +export class Coin98Provider extends InjectedProvider { + constructor(protected type: Coin98ProviderType) { + const pathnameMap: Record = { + [Coin98ProviderType.EVM]: 'coin98.provider', + [Coin98ProviderType.Near]: 'coin98.near', + [Coin98ProviderType.Solana]: 'coin98.sol', + } + + super(pathnameMap[type]) + } + + override async request(data: RequestArguments): Promise { + // coin98 cannot handle it correctly (test with coin98 v6.0.3) + if (data.method === 'eth_chainId') { + return this.getProperty('chainId') + } + return super.request(data) + } +} diff --git a/packages/injected-script/sdk/MathWallet.ts b/packages/injected-script/sdk/MathWallet.ts new file mode 100644 index 000000000000..b426c3db3b76 --- /dev/null +++ b/packages/injected-script/sdk/MathWallet.ts @@ -0,0 +1,11 @@ +import { InjectedProvider } from './Base' + +export class MathWalletProvider extends InjectedProvider { + constructor() { + super('ethereum') + } + + override async untilAvailable(): Promise { + await super.untilAvailable(() => super.getProperty('isMathWallet') as Promise) + } +} diff --git a/packages/injected-script/sdk/MetaMask.ts b/packages/injected-script/sdk/MetaMask.ts new file mode 100644 index 000000000000..10e4d5182991 --- /dev/null +++ b/packages/injected-script/sdk/MetaMask.ts @@ -0,0 +1,11 @@ +import { InjectedProvider } from './Base' + +export class MetaMaskProvider extends InjectedProvider { + constructor() { + super('ethereum') + } + + override async untilAvailable(): Promise { + await super.untilAvailable(() => super.getProperty('isMetaMask') as Promise) + } +} diff --git a/packages/injected-script/sdk/Phantom.ts b/packages/injected-script/sdk/Phantom.ts new file mode 100644 index 000000000000..0065b8d0c715 --- /dev/null +++ b/packages/injected-script/sdk/Phantom.ts @@ -0,0 +1,7 @@ +import { InjectedProvider } from './Base' + +export class PhantomProvider extends InjectedProvider { + constructor() { + super('phantom.solana') + } +} diff --git a/packages/injected-script/sdk/Solflare.ts b/packages/injected-script/sdk/Solflare.ts new file mode 100644 index 000000000000..11f969b779a1 --- /dev/null +++ b/packages/injected-script/sdk/Solflare.ts @@ -0,0 +1,15 @@ +import { InjectedProvider } from './Base' + +export class SolflareProvider extends InjectedProvider { + constructor() { + super('solflare') + } + + override async connect(options: unknown): Promise { + await super.connect(options) + const publicKey = (await super.getProperty('publicKey')) as string + return { + publicKey, + } + } +} diff --git a/packages/injected-script/sdk/WalletLink.ts b/packages/injected-script/sdk/WalletLink.ts new file mode 100644 index 000000000000..d0003022cdd8 --- /dev/null +++ b/packages/injected-script/sdk/WalletLink.ts @@ -0,0 +1,12 @@ +import { InjectedProvider } from './Base' +import { createPromise, sendEvent } from './utils' + +export class WalletLinkProvider extends InjectedProvider { + constructor() { + super('walletLinkExtension') + } + + override connect(options: unknown): Promise { + return createPromise((id) => sendEvent('web3BridgeExecute', [this.pathname, 'enable'].join('.'), id, options)) + } +} diff --git a/packages/injected-script/sdk/bridgedCoin98.ts b/packages/injected-script/sdk/bridgedCoin98.ts deleted file mode 100644 index f39a1f9843b5..000000000000 --- a/packages/injected-script/sdk/bridgedCoin98.ts +++ /dev/null @@ -1,61 +0,0 @@ -import type { RequestArguments } from 'web3-core' -import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers' -import type { EthereumProvider } from '../shared' -import { createPromise, sendEvent } from './utils' - -function request(data: RequestArguments) { - return createPromise((id) => sendEvent('coin98BridgeSendRequest', id, data)) -} - -function send(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void) { - createPromise((id) => - sendEvent('coin98BridgeSendRequest', id, { - method: payload.method, - params: payload.params, - }), - ).then( - (value) => { - callback(null, { - jsonrpc: '2.0', - id: payload.id as number, - result: value, - }) - }, - (error) => { - if (error instanceof Error) callback(error) - }, - ) -} - -/** Interact with the current ethereum provider */ -export const bridgedCoin98Provider: EthereumProvider = { - request, - send, - sendAsync: send, - on(event, callback) { - if (!bridgedCoin98.has(event)) { - bridgedCoin98.set(event, new Set()) - sendEvent('coin98BridgeRequestListen', event) - } - const map = bridgedCoin98.get(event)! - map.add(callback) - return () => void map.delete(callback) - }, - getProperty(key) { - return createPromise((id) => sendEvent('coin98BridgePrimitiveAccess', id, key)) - }, - untilAvailable() { - return createPromise((id) => sendEvent('untilCoin98BridgeOnline', id)) - }, -} - -const bridgedCoin98 = new Map>() -/** @internal */ -export function onCoin98Event(event: string, data: unknown[]) { - for (const f of bridgedCoin98.get(event) || []) { - try { - Reflect.apply(f, null, data) - } catch {} - } - return -} diff --git a/packages/injected-script/sdk/bridgedEthereum.ts b/packages/injected-script/sdk/bridgedEthereum.ts deleted file mode 100644 index 27354de35bce..000000000000 --- a/packages/injected-script/sdk/bridgedEthereum.ts +++ /dev/null @@ -1,61 +0,0 @@ -import type { RequestArguments } from 'web3-core' -import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers' -import type { EthereumProvider } from '../shared' -import { createPromise, sendEvent } from './utils' - -function request(data: RequestArguments) { - return createPromise((id) => sendEvent('ethBridgeSendRequest', id, data)) -} - -function send(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void) { - createPromise((id) => - sendEvent('ethBridgeSendRequest', id, { - method: payload.method, - params: payload.params, - }), - ).then( - (value) => { - callback(null, { - jsonrpc: '2.0', - id: payload.id as number, - result: value, - }) - }, - (error) => { - if (error instanceof Error) callback(error) - }, - ) -} - -/** Interact with the current ethereum provider */ -export const bridgedEthereumProvider: EthereumProvider = { - request, - send, - sendAsync: send, - on(event, callback) { - if (!bridgedEthereum.has(event)) { - bridgedEthereum.set(event, new Set()) - sendEvent('ethBridgeRequestListen', event) - } - const map = bridgedEthereum.get(event)! - map.add(callback) - return () => void map.delete(callback) - }, - getProperty(key) { - return createPromise((id) => sendEvent('ethBridgePrimitiveAccess', id, key)) - }, - untilAvailable() { - return createPromise((id) => sendEvent('untilEthBridgeOnline', id)) - }, -} - -const bridgedEthereum = new Map>() -/** @internal */ -export function onEthEvent(event: string, data: unknown[]) { - for (const f of bridgedEthereum.get(event) || []) { - try { - Reflect.apply(f, null, data) - } catch {} - } - return -} diff --git a/packages/injected-script/sdk/bridgedSolana.ts b/packages/injected-script/sdk/bridgedSolana.ts deleted file mode 100644 index bfa57053a617..000000000000 --- a/packages/injected-script/sdk/bridgedSolana.ts +++ /dev/null @@ -1,97 +0,0 @@ -import type { RequestArguments } from 'web3-core' -import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers' -import { createPromise, sendEvent } from './utils' - -function request(data: RequestArguments) { - return createPromise((id) => sendEvent('solanaBridgeSendRequest', id, data)) -} - -function send(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void) { - createPromise((id) => - sendEvent('solanaBridgeSendRequest', id, { - method: payload.method, - params: payload.params, - }), - ).then( - (value) => { - callback(null, { - jsonrpc: '2.0', - id: payload.id as number, - result: value, - }) - }, - (error) => { - if (error instanceof Error) callback(error) - }, - ) -} - -let isConnected = false -/** Interact with the current solana provider */ -export const bridgedSolanaProvider: BridgedSolanaProvider = { - connect(opts) { - return createPromise((id) => sendEvent('solanaBridgeExecute', 'solana.connect', id, opts)) - }, - request, - send, - sendAsync: send, - on(event, callback) { - if (!bridgedSolana.has(event)) { - bridgedSolana.set(event, new Set()) - sendEvent('solanaBridgeRequestListen', event) - } - const map = bridgedSolana.get(event)! - map.add(callback) - return () => void map.delete(callback) - }, - getProperty(key) { - return createPromise((id) => sendEvent('solanaBridgePrimitiveAccess', id, key)) - }, - isConnected, - untilAvailable() { - return createPromise((id) => sendEvent('untilSolanaBridgeOnline', id)) - }, -} - -async function watchConnectStatus() { - const connected = await bridgedSolanaProvider.getProperty('isConnected') - if (connected !== undefined) { - isConnected = connected - } - bridgedSolanaProvider.on('connected', () => { - isConnected = true - }) - bridgedSolanaProvider.on('disconnect', () => { - isConnected = false - }) -} -watchConnectStatus() - -export interface BridgedSolanaProvider { - // _bn: result of serialization - connect(opts?: { onlyIfTrusted: boolean }): Promise<{ publicKey: { _bn: string } }> - /** Wait for window.solana object appears. */ - untilAvailable(): Promise - /** Send JSON RPC to the solana provider. */ - request(data: RequestArguments): Promise - /** Send JSON RPC */ - send(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void): void - /** Async send JSON RPC */ - sendAsync(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void): void - /** Add event listener */ - on(event: string, callback: (...args: any) => void): () => void - /** Access primitive property on the window.solana object. */ - getProperty(key: 'isPhantom' | 'isConnected'): Promise - /** Call window.solana.isConnected */ - isConnected: boolean -} -const bridgedSolana = new Map>() -/** @internal */ -export function onSolanaEvent(event: string, data: unknown[]) { - for (const f of bridgedSolana.get(event) || []) { - try { - Reflect.apply(f, null, data) - } catch {} - } - return -} diff --git a/packages/injected-script/sdk/index.ts b/packages/injected-script/sdk/index.ts index 5c0b8e0d8afa..3a0555c8dd27 100644 --- a/packages/injected-script/sdk/index.ts +++ b/packages/injected-script/sdk/index.ts @@ -1,12 +1,21 @@ import { CustomEventId, decodeEvent } from '../shared' -import { onEthEvent } from './bridgedEthereum' -import { onCoin98Event } from './bridgedCoin98' -import { onSolanaEvent } from './bridgedSolana' +import { Coin98Provider, Coin98ProviderType } from './Coin98' +import { PhantomProvider } from './Phantom' +import { SolflareProvider } from './Solflare' +import { MetaMaskProvider } from './MetaMask' import { sendEvent, rejectPromise, resolvePromise } from './utils' +import { MathWalletProvider } from './MathWallet' +import { WalletLinkProvider } from './WalletLink' -export { bridgedEthereumProvider } from './bridgedEthereum' -export { bridgedCoin98Provider } from './bridgedCoin98' -export { bridgedSolanaProvider } from './bridgedSolana' +export type { EthereumProvider, InternalEvents } from '../shared' + +export const injectedCoin98EVMProvider = new Coin98Provider(Coin98ProviderType.EVM) +export const injectedCoin98SolanaProvider = new Coin98Provider(Coin98ProviderType.Solana) +export const injectedPhantomProvider = new PhantomProvider() +export const injectedSolflareProvider = new SolflareProvider() +export const injectedMetaMaskProvider = new MetaMaskProvider() +export const injectedMathWalletProvider = new MathWalletProvider() +export const injectedWalletLinkProvider = new WalletLinkProvider() export function pasteText(text: string) { sendEvent('paste', text) @@ -39,29 +48,29 @@ document.addEventListener(CustomEventId, (e) => { case 'rejectPromise': return rejectPromise(...r[1]) - case 'ethBridgeOnEvent': - return onEthEvent(...r[1]) - case 'coin98BridgeOnEvent': - return onCoin98Event(...r[1]) - case 'solanaBridgeOnEvent': - return onSolanaEvent(...r[1]) - case 'ethBridgeSendRequest': - case 'ethBridgePrimitiveAccess': - case 'ethBridgeRequestListen': - case 'coin98BridgeSendRequest': - case 'coin98BridgePrimitiveAccess': - case 'coin98BridgeRequestListen': - case 'solanaBridgeSendRequest': - case 'solanaBridgePrimitiveAccess': - case 'solanaBridgeRequestListen': - case 'solanaBridgeExecute': + case 'web3BridgeEmitEvent': + const [pathname, eventName, data] = r[1] + const provider = [ + injectedCoin98EVMProvider, + injectedCoin98SolanaProvider, + injectedPhantomProvider, + injectedMetaMaskProvider, + injectedMathWalletProvider, + injectedWalletLinkProvider, + ].find((x) => x.pathname === pathname) + + provider?.emit(eventName, data) + return + + case 'web3BridgeBindEvent': + case 'web3BridgeSendRequest': + case 'web3BridgeExecute': + case 'web3UntilBridgeOnline': + case 'web3BridgePrimitiveAccess': case 'input': case 'paste': case 'pasteImage': case 'instagramUpload': - case 'untilEthBridgeOnline': - case 'untilCoin98BridgeOnline': - case 'untilSolanaBridgeOnline': case 'hookInputUploadOnce': break default: diff --git a/packages/injected-script/sdk/tsconfig.json b/packages/injected-script/sdk/tsconfig.json index a7c4f0e0842b..4b3dd476cc66 100644 --- a/packages/injected-script/sdk/tsconfig.json +++ b/packages/injected-script/sdk/tsconfig.json @@ -5,6 +5,16 @@ "outDir": "../dist/sdk", "tsBuildInfoFile": "../dist/sdk.tsbuildinfo" }, - "files": ["./index.ts", "./bridgedEthereum.ts", "./bridgedCoin98.ts", "./bridgedSolana.ts", "utils.ts"], + "files": [ + "index.ts", + "Base.ts", + "Phantom.ts", + "Solflare.ts", + "Coin98.ts", + "MetaMask.ts", + "MathWallet.ts", + "WalletLink.ts", + "utils.ts" + ], "references": [{ "path": "../shared/" }] } diff --git a/packages/injected-script/shared/index.ts b/packages/injected-script/shared/index.ts index c42978c4288b..c69bb30fb17c 100644 --- a/packages/injected-script/shared/index.ts +++ b/packages/injected-script/shared/index.ts @@ -1,5 +1,4 @@ import type { RequestArguments } from 'web3-core' -import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers' export const CustomEventId = 'c8a6c18e-f6a3-472a-adf3-5335deb80db6' export interface InternalEvents { @@ -19,45 +18,19 @@ export interface InternalEvents { */ hookInputUploadOnce: [format: string, fileName: string, file: number[], triggerOnActiveElementNow: boolean] - // #region Eth inpage provider bridge + // #region web3 bridge /** Request the bridge to listen on an event. */ - ethBridgeRequestListen: [eventName: string] + web3BridgeBindEvent: [path: string, responseEventName: keyof InternalEvents, eventName: string] /** When a event happened. */ - ethBridgeOnEvent: [eventName: string, data: unknown[]] + web3BridgeEmitEvent: [path: string, eventName: string, data: unknown[]] /** Send JSON RPC request. */ - ethBridgeSendRequest: [req_id: number, request: unknown] + web3BridgeSendRequest: [path: string, req_id: number, request: unknown] /** Access primitive property on the window.ethereum object. */ - ethBridgePrimitiveAccess: [req_id: number, property: string] + web3BridgePrimitiveAccess: [path: string, req_id: number, property: string] /** Wait until window.ethereum appears */ - untilEthBridgeOnline: [req_id: number] - // #endregion - - // #region Eth inpage provider bridge - /** Request the bridge to listen on an event. */ - coin98BridgeRequestListen: [eventName: string] - /** When a event happened. */ - coin98BridgeOnEvent: [eventName: string, data: unknown[]] - /** Send JSON RPC request. */ - coin98BridgeSendRequest: [req_id: number, request: unknown] - /** Access primitive property on the window.ethereum object. */ - coin98BridgePrimitiveAccess: [req_id: number, property: string] - /** Wait until window.ethereum appears */ - untilCoin98BridgeOnline: [req_id: number] - // #endregion - - // #region Solana inpage provider bridge + web3UntilBridgeOnline: [path: string, req_id: number] /** Request the bridge to call function. */ - solanaBridgeExecute: [path: string, req_id: number, opts?: { onlyIfTrusted: boolean }] - /** Request the bridge to listen on an event. */ - solanaBridgeRequestListen: [eventName: string] - /** When a event happened. */ - solanaBridgeOnEvent: [eventName: string, data: unknown[]] - /** Send JSON RPC request. */ - solanaBridgeSendRequest: [req_id: number, request: unknown] - /** Access primitive property on the window.solana object. */ - solanaBridgePrimitiveAccess: [req_id: number, property: string] - /** Wait until window.solana appears */ - untilSolanaBridgeOnline: [req_id: number] + web3BridgeExecute: [path: string, req_id: number, opts?: unknown] // #endregion /** A simple RPC. */ @@ -72,12 +45,10 @@ export interface EthereumProvider { untilAvailable(): Promise /** Send JSON RPC to the ethereum provider. */ request(data: RequestArguments): Promise - /** Send JSON RPC */ - send(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void): void - /** Async send JSON RPC */ - sendAsync(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void): void /** Add event listener */ on(event: string, callback: (...args: any) => void): () => void + /** Remove event listener */ + off(event: string, callback: (...args: any) => void): void /** Access primitive property on the ethereum object. */ getProperty(key: string): Promise } diff --git a/packages/mask/background/database/avatar-cache/avatar.ts b/packages/mask/background/database/avatar-cache/avatar.ts index 1488e8bf04f1..cf993a959ba3 100644 --- a/packages/mask/background/database/avatar-cache/avatar.ts +++ b/packages/mask/background/database/avatar-cache/avatar.ts @@ -19,7 +19,7 @@ async function nativeImpl(identifiers: IdentifierWithAvatar[]): Promise> { - const promises: Promise[] = [] + const promises: Array> = [] const map = new Map() const t = createTransaction(await createAvatarDBAccess(), 'readonly')('avatars') diff --git a/packages/mask/background/database/post/dbType.ts b/packages/mask/background/database/post/dbType.ts index 4ccf9e3490ad..890481c1d85a 100644 --- a/packages/mask/background/database/post/dbType.ts +++ b/packages/mask/background/database/post/dbType.ts @@ -7,7 +7,7 @@ export declare namespace PostDB_HistoryTypes { postBy: { userId: string; network: string } | undefined identifier: string recipientGroups?: unknown - recipients?: { userId: string; network: string }[] + recipients?: Array<{ userId: string; network: string }> foundAt: Date postCryptoKey?: CryptoKey } diff --git a/packages/mask/background/database/utils/openDB.ts b/packages/mask/background/database/utils/openDB.ts index 1581315ca75b..4c5c9fcc5e65 100644 --- a/packages/mask/background/database/utils/openDB.ts +++ b/packages/mask/background/database/utils/openDB.ts @@ -109,7 +109,7 @@ export function createDBAccessWithAsyncUpgrade[] = StoreNames[], + TxStores extends Array> = Array>, StoreName extends StoreNames = StoreNames, Writable extends boolean = boolean, > extends Pick< @@ -170,14 +170,14 @@ export interface IDBPSafeObjectStore< } export type IDBPSafeTransaction< DBTypes extends DBSchema, - TxStores extends StoreNames[], + TxStores extends Array>, Mode extends IDBTransactionMode = 'readonly', > = Omit, 'mode' | 'objectStoreNames' | 'objectStore' | 'store'> & { readonly objectStoreNames: TypedDOMStringList & string> readonly mode: IDBTransactionMode readonly __writable__?: Mode extends 'readwrite' ? true : boolean readonly __stores__?: Record< - TxStores extends readonly (infer ValueOfUsedStoreName)[] + TxStores extends ReadonlyArray ? ValueOfUsedStoreName extends string | number | symbol ? ValueOfUsedStoreName : never @@ -194,7 +194,7 @@ export function createTransaction[] = []>(...storeNames: UsedStoreName) => { + return > = []>(...storeNames: UsedStoreName) => { return db.transaction(storeNames, mode) as IDBPSafeTransaction } } diff --git a/packages/mask/background/services/__utils__/convert.ts b/packages/mask/background/services/__utils__/convert.ts index dcbb60a43f30..88814d3f4c27 100644 --- a/packages/mask/background/services/__utils__/convert.ts +++ b/packages/mask/background/services/__utils__/convert.ts @@ -25,8 +25,8 @@ export function toProfileInformation(profiles: ProfileRecord[]) { /** @internal */ export function toPersonaInformation(personas: PersonaRecord[], t: FullPersonaDBTransaction<'readonly'>) { const personaInfo: PersonaInformation[] = [] - const dbQueryPass2: Promise[] = [] - const dbQuery: Promise[] = personas.map(async (persona) => { + const dbQueryPass2: Array> = [] + const dbQuery: Array> = personas.map(async (persona) => { const map: ProfileInformation[] = [] personaInfo.push({ nickname: persona.nickname, diff --git a/packages/mask/background/services/backup/restore.ts b/packages/mask/background/services/backup/restore.ts index 4153d80322c8..4471113809e9 100644 --- a/packages/mask/background/services/backup/restore.ts +++ b/packages/mask/background/services/backup/restore.ts @@ -44,7 +44,7 @@ export async function addUnconfirmedBackup(raw: string): Promise { +): Promise }> { if (!unconfirmedBackup.has(id)) return undefined const backup = unconfirmedBackup.get(id)! return { diff --git a/packages/mask/background/services/crypto/decryption.ts b/packages/mask/background/services/crypto/decryption.ts index 5f8fcca2131e..dc520dfaa1dc 100644 --- a/packages/mask/background/services/crypto/decryption.ts +++ b/packages/mask/background/services/crypto/decryption.ts @@ -101,7 +101,7 @@ async function* decryption(payload: string | Uint8Array, context: DecryptionCont } const id = new PostIVIdentifier( SocialNetworkEnumToProfileDomain(currentSocialNetwork), - encodeArrayBuffer(iv.buffer), + encodeArrayBuffer(new Uint8Array(iv.buffer)), ) // #endregion diff --git a/packages/mask/background/services/helper/deprecated-storage.ts b/packages/mask/background/services/helper/deprecated-storage.ts index 9e618ad9e031..a55a66364678 100644 --- a/packages/mask/background/services/helper/deprecated-storage.ts +++ b/packages/mask/background/services/helper/deprecated-storage.ts @@ -5,7 +5,7 @@ import { timeout } from '@dimensiondev/kit' * Make sure that the storage is used serially. */ class MutexStorage { - private tasks: (() => void)[] = [] + private tasks: Array<() => void> = [] private locked = false private lock() { diff --git a/packages/mask/package.json b/packages/mask/package.json index b905e413fdd2..a8850fcb04b6 100644 --- a/packages/mask/package.json +++ b/packages/mask/package.json @@ -6,7 +6,6 @@ "@balancer-labs/sor": "^1.0.0", "@dimensiondev/holoflows-kit": "^0.9.0-20220520093249-0870919", "@dimensiondev/mask-wallet-core": "0.1.0-20211013082857-eb62e5f", - "@dimensiondev/metamask-extension-provider": "3.0.6-20210519045409-1835d4d", "@dimensiondev/secp256k1-webcrypto": "1.0.0-20220412114204-be816df", "@ethersproject/abi": "^5.4.0", "@ethersproject/address": "^5.0.4", @@ -26,6 +25,7 @@ "@masknet/plugin-debugger": "workspace:*", "@masknet/plugin-example": "workspace:*", "@masknet/plugin-file-service": "workspace:*", + "@masknet/plugin-evm": "workspace:*", "@masknet/plugin-flow": "workspace:*", "@masknet/plugin-go-plus-security": "workspace:*", "@masknet/plugin-infra": "workspace:*", @@ -61,13 +61,11 @@ "@types/react-virtualized-auto-sizer": "^1.0.1", "@types/react-window": "^1.8.4", "@types/remarkable": "^2.0.3", - "@types/socket.io-client": "^1.4.36", "@types/use-subscription": "^1.0.0", "@types/uuid": "^8.3.4", "@uniswap/sdk-core": "^3.0.1", "@uniswap/v2-sdk": "3.0.0-alpha.2", "@uniswap/v3-sdk": "^3.3.2", - "@walletconnect/client": "^1.2.2", "anchorme": "^2.1.2", "assert": "^2.0.0", "async-call-rpc": "^6.0.2", @@ -82,7 +80,6 @@ "date-fns": "^2.28.0", "elliptic": "^6.5.3", "ethereumjs-util": "^7.1.0", - "ethjs-ens": "^2.0.1", "event-iterator": "^2.0.0", "fuse.js": "^6.6.2", "graphql": "^15.5.1", diff --git a/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx b/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx index 19437b576d23..da45c6f35cbd 100644 --- a/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx +++ b/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx @@ -2,6 +2,8 @@ import { memo, PropsWithChildren, useCallback } from 'react' import { Typography, Link as MaterialLink } from '@mui/material' import type { RenderFragmentsContextType } from '@masknet/typed-message/dom' import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script' +import { useChainId } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' export const Container = memo(function Container(props: PropsWithChildren<{}>) { return ( @@ -20,6 +22,7 @@ export const Link = memo(function Anchor(props: RenderFragmentsContextType.LinkP }) export function useTagEnhancer(kind: 'hash' | 'cash', content: string) { + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const plugin = useActivatedPluginsSNSAdaptor(false) .filter((x) => x.enhanceTag) .at(0) @@ -32,7 +35,7 @@ export function useTagEnhancer(kind: 'hash' | 'cash', content: string) { ) const onMouseEnter: React.EventHandler> = useCallback( (event) => { - const cancel = plugin?.enhanceTag?.onHover?.(kind, content, event) + const cancel = plugin?.enhanceTag?.onHover?.(kind, content, event, chainId) event.currentTarget.addEventListener('mouseleave', () => cancel?.(), { once: true }) }, [plugin], diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index 5852e1f06d72..5a3beacdb0c7 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -292,7 +292,7 @@ "plugin_wallet_connected_with": "Connected with", "plugin_wallet_connecting_with": "Connecting with", "plugin_wallet_metamask_error_already_request": "You've opened the popup, please confirm.", - "plugin_wallet_connect_tip": "Please make sure that your {{providerName}} wallet is provided by the offical {{providerShortenLink}}.", + "plugin_wallet_connect_tip": "Please make sure that your {{providerName}} wallet is provided by the official {{providerShortenLink}}.", "plugin_wallet_select_a_nft_contract": "Select an NFT Contract", "plugin_wallet_select_a_nft_owner": "Select an NFT Contract Owner", "plugin_wallet_select_a_nft_operator": "Select an NFT Contract Operator", @@ -346,6 +346,54 @@ "plugin_nft_avatar_recommend_feature_description": "Set your NFT as profile picture with exclusive aura", "application_hint": "Socialize and show off your NFTs. People can bid,buy, view your valuable NFTs without leaving Twitter.", "plugin_red_packet_create": "Create a Lucky Drop", + "plugin_red_packet_claimed": "Claimed", + "plugin_red_packet_erc20_tab_title": "Token", + "plugin_red_packet_erc721_tab_title": "Collectibles", + "plugin_red_packet_name": "Lucky Drop", + "plugin_red_packet_recommend_feature_description": "Astonish your friends with a surprise gift", + "plugin_red_packet_description": "Gift crypto or NFTs to any users, first come, first served.", + "plugin_red_packet_erc721_insufficient_balance": "Insufficient Balance", + "plugin_red_packet_details": "Lucky Drop Details", + "plugin_red_packet_split_mode": "Split Mode", + "plugin_red_packet_average": "Average", + "plugin_red_packet_random": "Random", + "plugin_red_packet_shares": "Shares", + "plugin_red_packet_best_wishes": "Best Wishes!", + "plugin_red_packet_create_new": "New", + "plugin_red_packet_claim": "Claim", + "plugin_red_packet_claiming": "Claiming...", + "plugin_red_packet_refund": "Refund", + "plugin_red_packet_empty": "Empty", + "plugin_red_packet_data_broken": "The Lucky Drop can’t be sent due to data damage. Please withdraw the assets after {{duration}}.", + "plugin_red_packet_refunding": "Refunding", + "plugin_red_packet_select_existing": "Past", + "plugin_red_packet_share_unclaimed_message_official_account": "Hi friends, I just found a lucky drop sent by @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim lucky drops.\n#mask_io #LuckyDrop\n{{payload}}", + "plugin_red_packet_share_unclaimed_message_not_twitter": "Hi friends, I just found a lucky drop sent by @{{sender}} on {{network}} network. \n{{payload}}", + "plugin_red_packet_share_message_official_account": "I just claimed a lucky drop from @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim lucky drops.\n#mask_io #LuckyDrop\n{{payload}}", + "plugin_red_packet_share_message_not_twitter": "I just claimed a lucky drop from @{{sender}} on {{network}} network. \n{{payload}}", + "plugin_red_packet_nft_share_foreshow_message": "@{{sender}} is sending an NFT lucky drop on {{network}} network. Follow @{{account}} (mask.io) to claim NFT lucky drops.\n#mask_io #LuckyDrop\n{{payload}}", + "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{sender}} is sending an NFT lucky drop on {{network}} network. \n{{payload}}", + "plugin_red_packet_nft_share_claimed_message": "I just claimed an NFT lucky drop from @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim NFT lucky drops.\n#mask_io #LuckyDrop\n{{payload}}", + "plugin_red_packet_nft_share_claimed_message_not_twitter": "I just claimed an NFT lucky drop from @{{sender}} on {{network}} network. \n{{payload}}", + "plugin_red_packet_nft_tip": "This is an NFT lucky drop.", + "plugin_red_packet_nft_no_history": "You haven’t created any NFT lucky drop yet. Try to create and share lucky with your friends.", + "plugin_red_packet_attached_message": "Attached Message", + "plugin_red_packet_from": "From: @{{name}}", + "plugin_red_packet_description_claimed": "You got {{amount}} {{symbol}}", + "plugin_red_packet_description_expired": "The Lucky Drop is expired.", + "plugin_red_packet_description_refunded": "The Lucky Drop has been refunded.", + "plugin_red_packet_description_refund": "You could refund {{balance}} {{symbol}}.", + "plugin_red_packet_description_empty": "The Lucky Drop is empty.", + "plugin_red_packet_description_broken": "The Lucky Drop is broken.", + "plugin_red_packet_description_failover": "{{shares}} shares / {{total}} {{symbol}}", + "plugin_red_packet_amount_per_share": "Amount per Share", + "plugin_red_packet_send_symbol": "Send {{amount}} {{symbol}}", + "plugin_red_packet_amount_total": "Amount Total", + "plugin_red_packet_next": "Next", + "plugin_red_packet_back": "Back", + "plugin_red_packet_hint": "You can withdraw the remaining balance 24 hours after the Lucky Drop is sent.", + "plugin_red_packet_token": "Token", + "plugin_red_packet_message_label": "Title", "plugin_red_packet_create_with_token": "Create a Lucky Drop with {{amount}} {{symbol}}", "plugin_nft_red_packet_create": "Create an NFT Lucky Drop", "plugin_red_packet_nft_account_name": "Wallet account", @@ -641,7 +689,7 @@ "plugin_collectible_invalid_reserve_price": "Invalid reserve price", "plugin_collectible_place_a_bid": "Place a Bid", "plugin_collectible_make_an_offer": "Make an Offer", - "plugin_collectible_approved_by_open_sea": "By checking this box, I acknowledge that this item has not been reviewed or approved by OpenSea.", + "plugin_collectible_approved_by_opensea": "By checking this box, I acknowledge that this item has not been reviewed or approved by OpenSea.", "plugin_collectible_legal_text": "By checking this box, I agree to OpenSea's Terms of Service.", "plugin_collectibles_name": "Collectibles", "plugin_collectibles_description": "Display specific information of collectibles in OpenSea and Rarible, make an offer directly on social media.", diff --git a/packages/mask/shared-ui/locales/ja-JP.json b/packages/mask/shared-ui/locales/ja-JP.json index 118edbbc103a..4b48d2b94990 100644 --- a/packages/mask/shared-ui/locales/ja-JP.json +++ b/packages/mask/shared-ui/locales/ja-JP.json @@ -104,14 +104,8 @@ "plugin_wallet_return_mobile_wallet_options": "モバイルウォレットのオプションに戻る", "plugin_wallet_view_qr_code": "QR コードを表示する", "plugin_red_packet_create_with_token": "{{symbol}} で投げ銭を作成する", - "plugin_gitcoin_readme": "このサービスを利用するにあたり、寄付金額の 5% が Gitcoin grants development fund に寄付されます", "plugin_gitcoin_select_a_token": "トークンを選択する", - "plugin_gitcoin_enter_an_amount": "量を決める", - "plugin_gitcoin_grant_not_available": "Grantは有効ではありません", "plugin_gitcoin_insufficient_balance": "{{symbol}} の残高が足りません", - "plugin_gitcoin_donate": "寄付する", - "plugin_gitcoin_last_updated": "最新の更新：", - "plugin_gitcoin_view_on": "Gitcoin で見る", "plugin_trader_swap": "スワップ", "plugin_trader_wrap": "ラップ", "plugin_trader_unwrap": "アンラップ", @@ -322,7 +316,6 @@ "plugin_collectible_invalid_reserve_price": "無効な予約価格", "plugin_collectible_place_a_bid": "入札する", "plugin_collectible_make_an_offer": "オファーする", - "plugin_collectible_approved_by_open_sea": "このボックスをチェックすることで、このアイテムが OpenSea によってレビューまたは承認されていないことを認めます。", "plugin_collectible_legal_text": "このボックスをチェックすることで、OpenSea の利用規約に同意します。", "plugin_snapshot_info_title": "情報", "plugin_snapshot_info_strategy": "戦略家", diff --git a/packages/mask/shared-ui/locales/ko-KR.json b/packages/mask/shared-ui/locales/ko-KR.json index b69cc4e22da5..1f19a9ec60cb 100644 --- a/packages/mask/shared-ui/locales/ko-KR.json +++ b/packages/mask/shared-ui/locales/ko-KR.json @@ -214,16 +214,8 @@ "plugin_wallet_cancel_sign": "서명이 실패되었습니다.", "plugin_red_packet_create_with_token": "{{symbol}} 으로 빨간 백 만드는 중", "plugin_red_packet_nft_account_name": "지갑 계정", - "plugin_gitcoin_readme": "이 서비스를 이용하면 Gitcoin 개발 기금에 당신의 기여금의 5%를 기부할 것이다.", - "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund", "plugin_gitcoin_select_a_token": "토큰 선택", - "plugin_gitcoin_enter_an_amount": "수액 입력", - "plugin_gitcoin_grant_not_available": "이용 불가", "plugin_gitcoin_insufficient_balance": "{{symbol}} 잔액 부족", - "plugin_gitcoin_donate": "기부", - "plugin_gitcoin_last_updated": "신규 업데이트", - "plugin_gitcoin_by": "By", - "plugin_gitcoin_view_on": "Gitcoin에서 보기", "plugin_trader_safety_alert_title": "토큰 안정성 알림", "plugin_trader_safety_alert": "누구나 ERC20 토큰을 만들고 이름을 지을 수 있다. 토큰이 없는 프로젝트를 대표한다고 주장하는 토큰과 현존 토큰의 가짜 버전을 만드는 경우도 많습니다. Etherscan과 마찬가지로 이 사이트는 모든 ERC20 토큰에 대한 분석을 자동으로 추적합니다. ERC20 토큰과 상호 작용하기 전에 미리 잘 조사하시길 바랍니다.", "plugin_trader_total_supply": "총 공급량", @@ -478,7 +470,6 @@ "plugin_collectible_invalid_reserve_price": "무효한 최저 경매 가격입니다.", "plugin_collectible_place_a_bid": "입찰", "plugin_collectible_make_an_offer": "오퍼하기", - "plugin_collectible_approved_by_open_sea": "이 백스를 체크하면 OpenSea에서 이 항목을 리뷰받거나 승인받지 않았다는 것을 알 수 있습니다.", "plugin_collectible_legal_text": "이 박스를 체크하면 OpenSea의 항목과 서비스 동의합니다.", "plugin_cryptoartai_description_title": "설명", "plugin_cryptoartai_edition": "Edition of", diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json index ecb471a7d0e4..15bad2408dce 100644 --- a/packages/mask/shared-ui/locales/qya-AA.json +++ b/packages/mask/shared-ui/locales/qya-AA.json @@ -1,4 +1,11 @@ { + "promote_red_packet": "crwdns16898:0crwdne16898:0", + "promote_ito": "crwdns16900:0crwdne16900:0", + "promote_ito_short": "crwdns16902:0crwdne16902:0", + "promote_file_service": "crwdns16904:0crwdne16904:0", + "promote_savings": "crwdns16906:0{{amount}}crwdnd16906:0{{symbol}}crwdnd16906:0{{chain}}crwdnd16906:0{{account}}crwdne16906:0", + "promote_collectible": "crwdns16908:0crwdne16908:0", + "promote_snapshot": "crwdns16910:0crwdne16910:0", "database_backup": "crwdns10051:0crwdne10051:0", "database_overwrite": "crwdns10053:0crwdne10053:0", "database_clear": "crwdns10055:0crwdne10055:0", @@ -46,9 +53,13 @@ "application_settings_tab_plug_app-listed-placeholder": "crwdns16228:0crwdne16228:0", "application_settings_tab_plug_app-unlisted-placeholder": "crwdns16230:0crwdne16230:0", "additional_post_box__encrypted_post_pre": "crwdns3991:0{{encrypted}}crwdne3991:0", - "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "crwdns9169:0{{account}}crwdnd9169:0{{encrypted}}crwdne9169:0", - "additional_post_box__encrypted_post_pre_red_packet": "crwdns3995:0{{encrypted}}crwdne3995:0", - "additional_post_box__steganography_post_pre": "crwdns3997:0{{random}}crwdne3997:0", + "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "crwdns9169:0{{account}}crwdnd9169:0$t(promote_red_packet)crwdnd9169:0{{encrypted}}crwdne9169:0", + "additional_post_box__encrypted_post_pre_red_packet": "crwdns3995:0$t(promote_red_packet)crwdnd3995:0{{encrypted}}crwdne3995:0", + "additional_post_box__encrypted_post_pre_ito_twitter_official_account": "crwdns16912:0$t(promote_ito)crwdnd16912:0{{encrypted}}crwdne16912:0", + "additional_post_box__encrypted_post_pre_ito": "crwdns16914:0$t(promote_ito)crwdnd16914:0{{encrypted}}crwdne16914:0", + "additional_post_box__encrypted_post_pre_file_service_twitter_official_account": "crwdns16916:0$t(promote_file_service)crwdnd16916:0{{encrypted}}crwdne16916:0", + "additional_post_box__encrypted_post_pre_file_service": "crwdns16918:0$t(promote_file_service)crwdnd16918:0{{encrypted}}crwdne16918:0", + "additional_post_box__steganography_post_pre": "crwdns3997:0{{random}}crwdnd3997:0$t(promote_red_packet)crwdne3997:0", "auto_paste_failed_dialog_title": "crwdns3999:0crwdne3999:0", "auto_paste_failed_dialog_content": "crwdns4001:0crwdne4001:0", "auto_paste_failed_dialog_image_caption": "crwdns4003:0crwdne4003:0", @@ -133,6 +144,9 @@ "user_guide_tip_2": "crwdns9061:0crwdne9061:0", "user_guide_tip_3": "crwdns13019:0crwdne13019:0", "user_guide_tip_4": "crwdns16572:0crwdne16572:0", + "plugin_avatar_setup_share_title": "crwdns16920:0crwdne16920:0", + "plugin_avatar_setup_pfp_share": "crwdns16922:0crwdne16922:0", + "plugin_avatar_setup_success": "crwdns16924:0crwdne16924:0", "mask_network": "crwdns10321:0crwdne10321:0", "import": "crwdns4193:0crwdne4193:0", "no_search_result": "crwdns4217:0crwdne4217:0", @@ -331,22 +345,60 @@ "plugin_nft_avatar_recommend_feature_description": "crwdns16626:0crwdne16626:0", "application_hint": "crwdns16628:0crwdne16628:0", "plugin_red_packet_create": "crwdns11873:0crwdne11873:0", + "plugin_red_packet_claimed": "crwdns16926:0crwdne16926:0", + "plugin_red_packet_erc20_tab_title": "crwdns16928:0crwdne16928:0", + "plugin_red_packet_erc721_tab_title": "crwdns16930:0crwdne16930:0", + "plugin_red_packet_name": "crwdns16932:0crwdne16932:0", + "plugin_red_packet_recommend_feature_description": "crwdns16934:0crwdne16934:0", + "plugin_red_packet_description": "crwdns16936:0crwdne16936:0", + "plugin_red_packet_erc721_insufficient_balance": "crwdns16938:0crwdne16938:0", + "plugin_red_packet_details": "crwdns16940:0crwdne16940:0", + "plugin_red_packet_split_mode": "crwdns16942:0crwdne16942:0", + "plugin_red_packet_average": "crwdns16944:0crwdne16944:0", + "plugin_red_packet_random": "crwdns16946:0crwdne16946:0", + "plugin_red_packet_shares": "crwdns16948:0crwdne16948:0", + "plugin_red_packet_best_wishes": "crwdns16950:0crwdne16950:0", + "plugin_red_packet_create_new": "crwdns16952:0crwdne16952:0", + "plugin_red_packet_claim": "crwdns16954:0crwdne16954:0", + "plugin_red_packet_claiming": "crwdns16956:0crwdne16956:0", + "plugin_red_packet_refund": "crwdns16958:0crwdne16958:0", + "plugin_red_packet_empty": "crwdns16960:0crwdne16960:0", + "plugin_red_packet_data_broken": "crwdns16962:0{{duration}}crwdne16962:0", + "plugin_red_packet_refunding": "crwdns16964:0crwdne16964:0", + "plugin_red_packet_select_existing": "crwdns16966:0crwdne16966:0", + "plugin_red_packet_share_unclaimed_message_official_account": "crwdns16968:0{{sender}}crwdnd16968:0{{network}}crwdnd16968:0{{account}}crwdnd16968:0{{payload}}crwdne16968:0", + "plugin_red_packet_share_unclaimed_message_not_twitter": "crwdns16970:0{{sender}}crwdnd16970:0{{network}}crwdnd16970:0{{payload}}crwdne16970:0", + "plugin_red_packet_share_message_official_account": "crwdns16972:0{{sender}}crwdnd16972:0{{network}}crwdnd16972:0{{account}}crwdnd16972:0{{payload}}crwdne16972:0", + "plugin_red_packet_share_message_not_twitter": "crwdns16974:0{{sender}}crwdnd16974:0{{network}}crwdnd16974:0{{payload}}crwdne16974:0", + "plugin_red_packet_nft_share_foreshow_message": "crwdns16976:0{{sender}}crwdnd16976:0{{network}}crwdnd16976:0{{account}}crwdnd16976:0{{payload}}crwdne16976:0", + "plugin_red_packet_nft_share_foreshow_message_not_twitter": "crwdns16978:0{{sender}}crwdnd16978:0{{network}}crwdnd16978:0{{payload}}crwdne16978:0", + "plugin_red_packet_nft_share_claimed_message": "crwdns16980:0{{sender}}crwdnd16980:0{{network}}crwdnd16980:0{{account}}crwdnd16980:0{{payload}}crwdne16980:0", + "plugin_red_packet_nft_share_claimed_message_not_twitter": "crwdns16982:0{{sender}}crwdnd16982:0{{network}}crwdnd16982:0{{payload}}crwdne16982:0", + "plugin_red_packet_nft_tip": "crwdns16984:0crwdne16984:0", + "plugin_red_packet_nft_no_history": "crwdns16986:0crwdne16986:0", + "plugin_red_packet_attached_message": "crwdns16988:0crwdne16988:0", + "plugin_red_packet_from": "crwdns16990:0{{name}}crwdne16990:0", + "plugin_red_packet_description_claimed": "crwdns16992:0{{amount}}crwdnd16992:0{{symbol}}crwdne16992:0", + "plugin_red_packet_description_expired": "crwdns16994:0crwdne16994:0", + "plugin_red_packet_description_refunded": "crwdns16996:0crwdne16996:0", + "plugin_red_packet_description_refund": "crwdns16998:0{{balance}}crwdnd16998:0{{symbol}}crwdne16998:0", + "plugin_red_packet_description_empty": "crwdns17000:0crwdne17000:0", + "plugin_red_packet_description_broken": "crwdns17002:0crwdne17002:0", + "plugin_red_packet_description_failover": "crwdns17004:0{{shares}}crwdnd17004:0{{total}}crwdnd17004:0{{symbol}}crwdne17004:0", + "plugin_red_packet_amount_per_share": "crwdns17006:0crwdne17006:0", + "plugin_red_packet_send_symbol": "crwdns17008:0{{amount}}crwdnd17008:0{{symbol}}crwdne17008:0", + "plugin_red_packet_amount_total": "crwdns17010:0crwdne17010:0", + "plugin_red_packet_next": "crwdns17012:0crwdne17012:0", + "plugin_red_packet_back": "crwdns17014:0crwdne17014:0", + "plugin_red_packet_hint": "crwdns17016:0crwdne17016:0", + "plugin_red_packet_token": "crwdns17018:0crwdne17018:0", + "plugin_red_packet_message_label": "crwdns17020:0crwdne17020:0", "plugin_red_packet_create_with_token": "crwdns4775:0{{amount}}crwdnd4775:0{{symbol}}crwdne4775:0", "plugin_nft_red_packet_create": "crwdns11875:0crwdne11875:0", "plugin_red_packet_nft_account_name": "crwdns8159:0crwdne8159:0", "plugin_red_packet_nft_shift_select_tip": "crwdns10819:0{{text}}crwdne10819:0", - "plugin_gitcoin_readme": "crwdns4789:0crwdne4789:0", - "plugin_gitcoin_readme_fund_link": "crwdns4791:0crwdne4791:0", "plugin_gitcoin_select_a_token": "crwdns4793:0crwdne4793:0", - "plugin_gitcoin_name": "crwdns16238:0crwdne16238:0", - "plugin_gitcoin_description": "crwdns16240:0crwdne16240:0", - "plugin_gitcoin_enter_an_amount": "crwdns4795:0crwdne4795:0", - "plugin_gitcoin_grant_not_available": "crwdns4797:0crwdne4797:0", "plugin_gitcoin_insufficient_balance": "crwdns4799:0{{symbol}}crwdne4799:0", - "plugin_gitcoin_donate": "crwdns4801:0crwdne4801:0", - "plugin_gitcoin_last_updated": "crwdns4803:0crwdne4803:0", - "plugin_gitcoin_by": "crwdns4805:0crwdne4805:0", - "plugin_gitcoin_view_on": "crwdns4807:0crwdne4807:0", "plugin_trader_fail_to_load": "crwdns10207:0crwdne10207:0", "plugin_trader_lbp_pool_in_balancer": "crwdns10209:0crwdne10209:0", "plugin_trader_swap_description": "crwdns16242:0crwdne16242:0", @@ -535,10 +587,10 @@ "plugin_ito_qualification_failed": "crwdns5139:0crwdne5139:0", "plugin_ito_congratulations": "crwdns5153:0crwdne5153:0", "plugin_ito_out_of_stock_hit": "crwdns5155:0crwdne5155:0", - "plugin_ito_claim_success_share": "crwdns5157:0{{user}}crwdnd5157:0{{account}}crwdnd5157:0{{symbol}}crwdnd5157:0{{link}}crwdne5157:0", - "plugin_ito_claim_success_share_no_official_account": "crwdns9179:0{{user}}crwdnd9179:0{{symbol}}crwdnd9179:0{{link}}crwdne9179:0", - "plugin_ito_claim_foreshow_share": "crwdns5159:0{{symbol}}crwdnd5159:0{{name}}crwdnd5159:0{{account}}crwdnd5159:0{{link}}crwdne5159:0", - "plugin_ito_claim_foreshow_share_no_official_account": "crwdns9181:0{{symbol}}crwdnd9181:0{{name}}crwdnd9181:0{{link}}crwdne9181:0", + "plugin_ito_claim_success_share": "crwdns5157:0{{user}}crwdnd5157:0{{account}}crwdnd5157:0{{symbol}}crwdnd5157:0$t(promote_ito_short)crwdnd5157:0{{link}}crwdne5157:0", + "plugin_ito_claim_success_share_no_official_account": "crwdns9179:0{{user}}crwdnd9179:0{{symbol}}crwdnd9179:0$t(promote_ito_short)crwdnd9179:0{{link}}crwdne9179:0", + "plugin_ito_claim_foreshow_share": "crwdns5159:0{{symbol}}crwdnd5159:0{{name}}crwdnd5159:0{{account}}crwdnd5159:0{{link}}crwdnd5159:0$t(promote_ito_short)crwdne5159:0", + "plugin_ito_claim_foreshow_share_no_official_account": "crwdns9181:0{{symbol}}crwdnd9181:0{{name}}crwdnd9181:0{{link}}crwdnd9181:0$t(promote_ito_short)crwdne9181:0", "plugin_ito_password": "crwdns5161:0{{password}}crwdne5161:0", "plugin_ito_status_no_start": "crwdns5163:0crwdne5163:0", "plugin_ito_status_ongoing": "crwdns5165:0crwdne5165:0", @@ -636,7 +688,7 @@ "plugin_collectible_invalid_reserve_price": "crwdns5343:0crwdne5343:0", "plugin_collectible_place_a_bid": "crwdns5345:0crwdne5345:0", "plugin_collectible_make_an_offer": "crwdns5347:0crwdne5347:0", - "plugin_collectible_approved_by_open_sea": "crwdns5349:0crwdne5349:0", + "plugin_collectible_approved_by_opensea": "crwdns17022:0crwdne17022:0", "plugin_collectible_legal_text": "crwdns5351:0crwdne5351:0", "plugin_collectibles_name": "crwdns16248:0crwdne16248:0", "plugin_collectibles_description": "crwdns16250:0crwdne16250:0", diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json index 98ebee360881..15065f7e3f97 100644 --- a/packages/mask/shared-ui/locales/zh-CN.json +++ b/packages/mask/shared-ui/locales/zh-CN.json @@ -1,4 +1,6 @@ { + "promote_red_packet": "🧧🧧🧧 尝试给你的好友发送代币或 NFTs 红包，分享此时的喜悦吧！ 安装 Mask.io 发送你的第一个红包。", + "promote_file_service": "📃📃📃 尝试在推特上使用永久的、去中心化的文件存储功能。安装 Mask.io 上传并分享你的第一份永久的去中心化存储文件，由主流去中心化存储方案提供技术支持。", "database_backup": "备份数据库", "database_overwrite": "使用备份覆盖数据库", "database_clear": "清空数据库", @@ -38,6 +40,10 @@ "additional_post_box__encrypted_post_pre": "安装 #mask_io 解密此贴文 ！ {{encrypted}}", "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "使用 #mask_io 来认领这个红包！@{{account}} {{encrypted}}", "additional_post_box__encrypted_post_pre_red_packet": "使用 #mask_io 来认领这个红包！@{{encrypted}}", + "additional_post_box__encrypted_post_pre_ito_twitter_official_account": "$t(promote_ito)\n {{encrypted}}", + "additional_post_box__encrypted_post_pre_ito": "$t(promote_ito) {{encrypted}}", + "additional_post_box__encrypted_post_pre_file_service_twitter_official_account": "$t(promote_file_service)\n {{encrypted}}", + "additional_post_box__encrypted_post_pre_file_service": "$t(promote_file_service) {{encrypted}}", "additional_post_box__steganography_post_pre": "此图片使用#mask_io加密。📪🔑 安装mask.io解密它。 {{random}}", "auto_paste_failed_dialog_title": "手动粘贴", "auto_paste_failed_dialog_content": "请复制下面的文本和图片(如果有的话)再进行发布。", @@ -293,16 +299,8 @@ "plugin_nft_red_packet_create": "创建一个NFT红包", "plugin_red_packet_nft_account_name": "钱包账户", "plugin_red_packet_nft_shift_select_tip": "您也可以使用 {{text}} 选择多个NFT。", - "plugin_gitcoin_readme": "通过使用此服务，您将同时向 Gitcoin grants development fund 捐赠您5%捐款。", - "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/gitcoin-sustainability-fund", "plugin_gitcoin_select_a_token": "选择代币", - "plugin_gitcoin_enter_an_amount": "输入数额", - "plugin_gitcoin_grant_not_available": "授权不可用", "plugin_gitcoin_insufficient_balance": "{{symbol}} 余额不足", - "plugin_gitcoin_donate": "捐赠", - "plugin_gitcoin_last_updated": "最新更新：", - "plugin_gitcoin_by": "提供者为：", - "plugin_gitcoin_view_on": "在 Gitcoin 上查看", "plugin_trader_fail_to_load": "无法加载趋势信息自 ", "plugin_trader_lbp_pool_in_balancer": "Balancer 的 LBP 池", "plugin_trader_tutorial": "教程", @@ -578,7 +576,6 @@ "plugin_collectible_invalid_reserve_price": "无效底标价格", "plugin_collectible_place_a_bid": "出价", "plugin_collectible_make_an_offer": "发出报价", - "plugin_collectible_approved_by_open_sea": "通过勾选此框，我确认此收藏品尚未被 OpenSea 审核或批准。", "plugin_collectible_legal_text": "通过勾选此框，我同意OpenSea的 服务条款。", "plugin_cryptoartai_description_title": "描述", "plugin_cryptoartai_edition": "版本：", diff --git a/packages/mask/shared-ui/locales/zh-TW.json b/packages/mask/shared-ui/locales/zh-TW.json index 227d7a9a385e..769ed86e1897 100644 --- a/packages/mask/shared-ui/locales/zh-TW.json +++ b/packages/mask/shared-ui/locales/zh-TW.json @@ -197,15 +197,8 @@ "plugin_wallet_not_available_on": "{{network}} 不可用", "plugin_wallet_connect_wallet": "連接錢包", "plugin_red_packet_create_with_token": "使用 {{symbol}} 建立紅包", - "plugin_gitcoin_readme": "通過使用此服務，您還將向 Gitcoin grants development fund 捐款 5%", "plugin_gitcoin_select_a_token": "選擇一個代幣", - "plugin_gitcoin_enter_an_amount": "輸入一個金額", - "plugin_gitcoin_grant_not_available": "Grant 無法使用", "plugin_gitcoin_insufficient_balance": "{{symbol}} 餘額不足", - "plugin_gitcoin_donate": "捐款", - "plugin_gitcoin_last_updated": "最近更新：", - "plugin_gitcoin_by": "提供者為", - "plugin_gitcoin_view_on": "在 Gitcoin 觀看", "plugin_trader_tutorial": "新手教學", "plugin_trader_safety_agree": "我瞭解", "plugin_trader_total_supply": "供應總量", @@ -431,7 +424,6 @@ "plugin_collectible_invalid_reserve_price": "錯誤的底標價格", "plugin_collectible_place_a_bid": "出價", "plugin_collectible_make_an_offer": "商議價格", - "plugin_collectible_approved_by_open_sea": "通過勾選此框，我確認此收藏品未經 OpenSea 審查。", "plugin_collectible_legal_text": "通過勾選此框，我同意 OpenSea 的 使用者條約。", "plugin_cryptoartai_description_title": "描述", "plugin_cryptoartai_operator": "執行者", diff --git a/packages/mask/shared/flags.ts b/packages/mask/shared/flags.ts index 491cd4f32baf..b9b2cac8cdbc 100644 --- a/packages/mask/shared/flags.ts +++ b/packages/mask/shared/flags.ts @@ -24,11 +24,8 @@ export const Flags = { toolbox_enabled: webOnly, /** Prohibit the use of test networks in production */ wallet_allow_testnet: betaOrInsiderOnly || process.env.NODE_ENV !== 'production', - LBP_whitelist_enabled: process.env.NODE_ENV === 'production', // #endregion - EIP1559_enabled: true, - bsc_enabled: true, polygon_enabled: true, arbitrum_enabled: true, diff --git a/packages/mask/src/UIRoot.tsx b/packages/mask/src/UIRoot.tsx index e820a9a59f6a..f4efbceb2acc 100644 --- a/packages/mask/src/UIRoot.tsx +++ b/packages/mask/src/UIRoot.tsx @@ -1,22 +1,19 @@ import { Suspense } from 'react' -import { Web3Provider } from '@masknet/web3-shared-evm' import { StyledEngineProvider, Theme } from '@mui/material' -import { NetworkPluginID, PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra/web3' +import { PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra/web3' import { I18NextProviderHMR, SharedContextProvider } from '@masknet/shared' import { ErrorBoundary, ErrorBoundaryBuildInfoContext, useValueRef } from '@masknet/shared-base-ui' import { i18NextInstance } from '@masknet/shared-base' -import { Web3Context } from './web3/context' import { buildInfoMarkdown } from './utils/BuildInfoMarkdown' import { activatedSocialNetworkUI } from './social-network' import { isFacebook } from './social-network-adaptor/facebook.com/base' import { pluginIDSettings } from './settings/settings' -import { fixWeb3State } from './plugins/EVM/UI/Web3State' import { getBackgroundColor } from './utils' import { isTwitter } from './social-network-adaptor/twitter.com/base' import { MaskThemeProvider } from '@masknet/theme' const identity = (jsx: React.ReactNode) => jsx as JSX.Element -function compose(init: React.ReactNode, ...f: ((children: React.ReactNode) => JSX.Element)[]) { +function compose(init: React.ReactNode, ...f: Array<(children: React.ReactNode) => JSX.Element>) { // eslint-disable-next-line unicorn/no-array-reduce return f.reduceRight((prev, curr) => curr(prev), <>{init}) } @@ -37,19 +34,12 @@ export function MaskUIRoot({ children, kind, useTheme }: MaskUIRootProps) { const pluginID = useValueRef(pluginIDSettings) const PluginsWeb3State = useAllPluginsWeb3State() - // TODO: migrate EVM plugin - fixWeb3State(PluginsWeb3State[NetworkPluginID.PLUGIN_EVM], Web3Context) - return compose( children, (jsx) => , (jsx) => , (jsx) => , - (jsx) => ( - - - - ), + (jsx) => , (jsx) => , kind === 'page' ? (jsx) => : identity, (jsx) => ( diff --git a/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx b/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx index 018425f6fa70..b1e41f6c209d 100644 --- a/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx +++ b/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx @@ -5,7 +5,7 @@ import { PluginI18NFieldRender, usePluginI18NField, } from '@masknet/plugin-infra/content-script' -import { useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3' +import { useChainId, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3' import { ErrorBoundary } from '@masknet/shared-base-ui' import { Result } from 'ts-results' import { RedPacketPluginID } from '../../plugins/RedPacket/constants' @@ -13,7 +13,6 @@ import { ITO_PluginID } from '../../plugins/ITO/constants' import { ClickableChip } from '../shared/SelectRecipients/ClickableChip' import { makeStyles } from '@masknet/theme' import { useCallback, useState, useRef, forwardRef, memo, useImperativeHandle, useMemo } from 'react' -import { useChainId } from '@masknet/web3-shared-evm' import { Trans } from 'react-i18next' const useStyles = makeStyles()((theme) => ({ sup: { diff --git a/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx b/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx index 1ab0de6a8474..04c7deb6aa61 100644 --- a/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx +++ b/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx @@ -15,7 +15,7 @@ import { type PostContext, usePostInfoDetails, usePostInfo } from '@masknet/plug import { Some } from 'ts-results' function progressReducer( - state: { key: string; progress: SuccessDecryption | FailureDecryption | DecryptionProgress }[], + state: Array<{ key: string; progress: SuccessDecryption | FailureDecryption | DecryptionProgress }>, payload: { type: 'refresh' key: string diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx index aaf461822524..077d37edc208 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx @@ -4,11 +4,11 @@ import { useActivatedPluginsSNSAdaptor, usePluginI18NField, } from '@masknet/plugin-infra/content-script' -import { useAvailablePlugins } from '@masknet/plugin-infra/web3' +import { useAddressNames, useAvailablePlugins } from '@masknet/plugin-infra/web3' import { ConcealableTabs } from '@masknet/shared' import { EMPTY_LIST, NextIDPlatform } from '@masknet/shared-base' import { makeStyles, useStylesExtends } from '@masknet/theme' -import { useAddressNames } from '@masknet/web3-shared-evm' +import { NetworkPluginID } from '@masknet/web3-shared-base' import { Box, CircularProgress, Typography } from '@mui/material' import { first } from 'lodash-unified' import { useEffect, useMemo, useState } from 'react' @@ -50,7 +50,10 @@ export function ProfileTabContent(props: ProfileTabContentProps) { const identity = useCurrentVisitingIdentity() const { currentConnectedPersona } = usePersonaConnectStatus() const platform = activatedSocialNetworkUI.configuration.nextIDConfig?.platform as NextIDPlatform - const { value: addressNames = EMPTY_LIST, loading: loadingAddressNames } = useAddressNames(identity) + const { value: addressNames = EMPTY_LIST, loading: loadingAddressNames } = useAddressNames( + NetworkPluginID.PLUGIN_EVM, + identity, + ) const { value: personaList = EMPTY_LIST, loading: loadingPersonaList } = useNextIDBoundByPlatform( platform as NextIDPlatform, identity.identifier?.userId, diff --git a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx index c917be2bf891..5d09af03a749 100644 --- a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx +++ b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx @@ -1,7 +1,7 @@ import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script' const PluginRenderer = createInjectHooksRenderer( - useActivatedPluginsSNSAdaptor.visibility.useNotMinimalMode, + useActivatedPluginsSNSAdaptor.visibility.useAnyMode, (x) => x.SearchResultBox, ) diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx index 6a2593c93cca..09d5be7955ad 100644 --- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx +++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx @@ -10,17 +10,17 @@ import { ListItemText as MuiListItemText, Box, } from '@mui/material' -import { TransactionStatusType } from '@masknet/web3-shared-evm' +import { TransactionStatusType } from '@masknet/web3-shared-base' import { useNetworkDescriptor, useProviderDescriptor, useAccount, - useWallet, useChainColor, useChainIdValid, - useChainDetailed, useWeb3State, useReverseAddress, + useChainIdMainnet, + useRecentTransactions, } from '@masknet/plugin-infra/web3' import { useCallback, useEffect } from 'react' import { WalletIcon } from '@masknet/shared' @@ -28,7 +28,6 @@ import { useRemoteControlledDialog } from '@masknet/shared-base-ui' import { WalletMessages } from '../../plugins/Wallet/messages' import { useI18N } from '../../utils' import { hasNativeAPI, nativeAPI } from '../../../shared/native-rpc' -import { useRecentTransactions } from '../../plugins/Wallet/hooks/useRecentTransactions' import GuideStep from '../GuideStep' import { AccountBalanceWalletIcon } from '@masknet/icons' import { makeStyles } from '@masknet/theme' @@ -205,16 +204,13 @@ function ToolboxHintForWallet(props: ToolboxHintProps) { function useToolbox() { const { t } = useI18N() const account = useAccount() - const selectedWallet = useWallet() const chainColor = useChainColor() const chainIdValid = useChainIdValid() - const chainDetailed = useChainDetailed() - const { Utils } = useWeb3State() + const chainIdMainnet = useChainIdMainnet() + const { Others } = useWeb3State() // #region recent pending transactions - const { value: pendingTransactions = [] } = useRecentTransactions({ - status: TransactionStatusType.NOT_DEPEND, - }) + const pendingTransactions = useRecentTransactions(undefined, TransactionStatusType.NOT_DEPEND) // #endregion // #region Wallet @@ -226,15 +222,15 @@ function useToolbox() { ) // #endregion - const isWalletValid = !!account && selectedWallet && chainIdValid + const isWalletValid = !!account && chainIdValid - const { value: domain } = useReverseAddress(account) + const { value: domain } = useReverseAddress(undefined, account) function renderButtonText() { if (!account) return t('plugin_wallet_connect_wallet') if (!chainIdValid) return t('plugin_wallet_wrong_network') if (pendingTransactions.length <= 0) - return Utils?.formatDomainName?.(domain) || Utils?.formatAddress?.(account, 4) || account + return Others?.formatDomainName?.(domain) || Others?.formatAddress?.(account, 4) || account return ( <> @@ -255,8 +251,7 @@ function useToolbox() { const walletTitle = renderButtonText() - const shouldDisplayChainIndicator = - account && chainIdValid && chainDetailed?.network && chainDetailed.network !== 'mainnet' + const shouldDisplayChainIndicator = account && chainIdValid && !chainIdMainnet return { openWallet, isWalletValid, diff --git a/packages/mask/src/components/shared/AbstractTab.tsx b/packages/mask/src/components/shared/AbstractTab.tsx index 6b6d5c8dbc73..fc124d5bbcfc 100644 --- a/packages/mask/src/components/shared/AbstractTab.tsx +++ b/packages/mask/src/components/shared/AbstractTab.tsx @@ -23,11 +23,13 @@ interface TabPanelProps extends BoxProps { export interface AbstractTabProps extends withClasses<'tab' | 'tabs' | 'tabPanel' | 'indicator' | 'focusTab' | 'tabPaper' | 'flexContainer'> { - tabs: (Omit & { - cb?: () => void - disableFocusRipple?: boolean - disableRipple?: boolean - })[] + tabs: Array< + Omit & { + cb?: () => void + disableFocusRipple?: boolean + disableRipple?: boolean + } + > state?: readonly [number, (next: number) => void] index?: number disableFocusRipple?: boolean diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index bba3a2fd9cfc..777f5128dfd1 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -1,9 +1,9 @@ import { useContext, createContext, PropsWithChildren, useMemo, useCallback, useEffect } from 'react' import { makeStyles, getMaskColor } from '@masknet/theme' import { Typography } from '@mui/material' -import { useChainId } from '@masknet/web3-shared-evm' import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script' -import { useCurrentWeb3NetworkPluginID, useAccount, NetworkPluginID } from '@masknet/plugin-infra/web3' +import { useCurrentWeb3NetworkPluginID, useAccount, useChainId } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' import { formatPersonaPublicKey } from '@masknet/shared-base' import { getCurrentSNSNetwork } from '../../social-network-adaptor/utils' import { activatedSocialNetworkUI } from '../../social-network' diff --git a/packages/mask/src/components/shared/NetworkTab.tsx b/packages/mask/src/components/shared/NetworkTab.tsx index 6087c1306c27..9118b57fb286 100644 --- a/packages/mask/src/components/shared/NetworkTab.tsx +++ b/packages/mask/src/components/shared/NetworkTab.tsx @@ -1,6 +1,6 @@ import { makeStyles, MaskColorVar, useStylesExtends } from '@masknet/theme' import AbstractTab, { AbstractTabProps } from './AbstractTab' -import { ChainId, getChainDetailed } from '@masknet/web3-shared-evm' +import { ChainId, chainResolver } from '@masknet/web3-shared-evm' import { isDashboardPage } from '@masknet/shared-base' interface StyleProps { @@ -59,7 +59,7 @@ export function NetworkTab(props: NetworkTabProps) { }) const tabProps: AbstractTabProps = { - tabs: chains.map((chainId) => createTabItem(getChainDetailed(chainId)?.chain ?? 'Unknown', chainId)), + tabs: chains.map((chainId) => createTabItem(chainResolver.chainName(chainId) ?? 'Unknown', chainId)), index: chains.indexOf(chainId), classes, hasOnlyOneChild: true, diff --git a/packages/mask/src/components/shared/SelectWallet/WalletInList.tsx b/packages/mask/src/components/shared/SelectWallet/WalletInList.tsx index d109e73c35b3..589bab99144e 100644 --- a/packages/mask/src/components/shared/SelectWallet/WalletInList.tsx +++ b/packages/mask/src/components/shared/SelectWallet/WalletInList.tsx @@ -3,7 +3,8 @@ import ListItemButton from '@mui/material/ListItemButton' import { makeStyles, useStylesExtends } from '@masknet/theme' import CheckIcon from '@mui/icons-material/Check' import type { DefaultComponentProps } from '@mui/material/OverridableComponent' -import { formatEthereumAddress, useBlockie, Wallet } from '@masknet/web3-shared-evm' +import { formatEthereumAddress, Wallet } from '@masknet/web3-shared-evm' +import { useBlockie } from '@masknet/plugin-infra/web3' import { useI18N } from '../../../utils' const useStyle = makeStyles()((theme) => ({ diff --git a/packages/mask/src/components/shared/TokenPrice.tsx b/packages/mask/src/components/shared/TokenPrice.tsx index fb6818ece882..0c2d255667e4 100644 --- a/packages/mask/src/components/shared/TokenPrice.tsx +++ b/packages/mask/src/components/shared/TokenPrice.tsx @@ -1,8 +1,8 @@ import type { FC, HTMLProps } from 'react' import type BigNumber from 'bignumber.js' -import { ChainId, CurrencyType, isZeroAddress } from '@masknet/web3-shared-evm' -import { useNativeTokenPrice, useTokenPrice } from '../../plugins/Wallet/hooks/useTokenPrice' -import { multipliedBy } from '@masknet/web3-shared-base' +import { ChainId, isZeroAddress } from '@masknet/web3-shared-evm' +import { CurrencyType, multipliedBy, NetworkPluginID } from '@masknet/web3-shared-base' +import { useFungibleTokenPrice, useNativeTokenPrice } from '@masknet/plugin-infra/web3' interface TokenPriceProps extends Omit, 'children'> { chainId: ChainId @@ -18,8 +18,15 @@ export const TokenPrice: FC = ({ currencyType = CurrencyType.USD, ...rest }) => { - const tokenPrice = useTokenPrice(chainId, contractAddress?.toLowerCase(), currencyType) - const nativeTokenPrice = useNativeTokenPrice(chainId) + const { value: tokenPrice = 0 } = useFungibleTokenPrice( + NetworkPluginID.PLUGIN_EVM, + contractAddress?.toLowerCase(), + { + chainId, + currencyType, + }, + ) + const { value: nativeTokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, { chainId }) const price = isZeroAddress(contractAddress) ? nativeTokenPrice : tokenPrice return ${multipliedBy(amount, price).toFixed(2)} } diff --git a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx index 2226ba0b7573..1585e82c42e3 100644 --- a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx +++ b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx @@ -1,9 +1,17 @@ -import { ExternalLink } from 'react-feather' -import { ChainId, ProviderType, NetworkType, useAccount, useProviderType } from '@masknet/web3-shared-evm' -import { Button, Link, Typography } from '@mui/material' -import { makeStyles } from '@masknet/theme' -import { useWeb3State, useNetworkDescriptor, useProviderDescriptor, Web3Plugin } from '@masknet/plugin-infra/web3' +import { + useAccount, + useNetworkDescriptor, + useProviderDescriptor, + useProviderType, + useReverseAddress, + useWeb3State, +} from '@masknet/plugin-infra/web3' import { FormattedAddress, WalletIcon } from '@masknet/shared' +import { makeStyles } from '@masknet/theme' +import { Account, NetworkPluginID } from '@masknet/web3-shared-base' +import { ChainId, ProviderType } from '@masknet/web3-shared-evm' +import { Button, Link, Typography } from '@mui/material' +import { ExternalLink } from 'react-feather' import { useI18N } from '../../../utils' const useStyles = makeStyles()((theme) => ({ @@ -86,7 +94,9 @@ const useStyles = makeStyles()((theme) => ({ }, })) interface CurrentWalletBox { - wallet: Web3Plugin.ConnectionResult + wallet: Account & { + providerType: ProviderType + } walletName?: string changeWallet: () => void notInPop?: boolean @@ -95,13 +105,13 @@ export function CurrentWalletBox(props: CurrentWalletBox) { const { t } = useI18N() const { classes } = useStyles() const { wallet, walletName, notInPop, changeWallet } = props - const providerType = useProviderType() - const providerDescriptor = useProviderDescriptor(wallet.providerType ?? providerType) - const networkDescriptor = useNetworkDescriptor(wallet.networkType) - const frontAccount = useAccount() + const providerType = useProviderType(NetworkPluginID.PLUGIN_EVM) + const providerDescriptor = useProviderDescriptor(NetworkPluginID.PLUGIN_EVM, providerType) + const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM) + const frontAccount = useAccount(NetworkPluginID.PLUGIN_EVM) const account = notInPop ? frontAccount : wallet.account - const { Utils } = useWeb3State() ?? {} - + const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM) ?? {} + const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet.account) return account ? (
- {walletName} + {providerType !== ProviderType.MaskWallet ? ( + + {domain && Others?.formatDomainName + ? Others.formatDomainName(domain) + : providerDescriptor?.name} + + ) : ( + <> + + {walletName ?? providerDescriptor?.name} + + {domain && Others?.formatDomainName ? ( + {Others.formatDomainName(domain)} + ) : null} + + )}
- + diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx index b407d054dea6..110be98a396f 100644 --- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx +++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx @@ -13,8 +13,8 @@ import { ImageIcon } from '@masknet/shared' import { Typography } from '@mui/material' import { useEffect } from 'react' import { useI18N } from '../../../utils' -import type { Web3Plugin } from '@masknet/plugin-infra/src/web3-types' -import type { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-evm' +import type { Account } from '@masknet/web3-shared-base' +import type { ChainId, ProviderType } from '@masknet/web3-shared-evm' import { LoadingButton } from '@mui/lab' import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton' @@ -99,7 +99,9 @@ export enum SignSteps { interface StepsProps { step: SignSteps nickname?: string - wallet: Web3Plugin.ConnectionResult + wallet: Account & { + providerType: ProviderType + } disableConfirm?: boolean confirmLoading: boolean notInPop?: boolean diff --git a/packages/mask/src/components/shared/WalletStatusBox/TransactionList.tsx b/packages/mask/src/components/shared/WalletStatusBox/TransactionList.tsx index 3e729c601caa..f7d0141c4d05 100644 --- a/packages/mask/src/components/shared/WalletStatusBox/TransactionList.tsx +++ b/packages/mask/src/components/shared/WalletStatusBox/TransactionList.tsx @@ -1,24 +1,14 @@ +import { FC, forwardRef, useCallback, useMemo, useState } from 'react' +import { useAsync } from 'react-use' import { LinkOutIcon } from '@masknet/icons' -import { useWeb3State } from '@masknet/plugin-infra/web3' -import { WalletMessages } from '@masknet/plugin-wallet' +import { useChainId, useWeb3, useWeb3State, Web3Helper } from '@masknet/plugin-infra/web3' import { makeStyles } from '@masknet/theme' -import { - ChainId, - getContractOwnerDomain, - isSameAddress, - TransactionStateType, - TransactionStatusType, - useChainId, - useWeb3, -} from '@masknet/web3-shared-evm' +import { isSameAddress, RecentTransaction, TransactionStatusType } from '@masknet/web3-shared-base' +import { getContractOwnerDomain } from '@masknet/web3-shared-evm' import { Grid, GridProps, Link, List, ListItem, ListProps, Stack, Typography } from '@mui/material' import classnames from 'classnames' import format from 'date-fns/format' import { noop } from 'lodash-unified' -import { FC, forwardRef, useCallback, useEffect, useMemo, useState } from 'react' -import { useAsync } from 'react-use' -import Services from '../../../extension/service' -import type { RecentTransaction } from '../../../plugins/Wallet/services/transaction' import { useI18N } from '../../../utils' const useStyles = makeStyles()((theme) => ({ @@ -78,44 +68,46 @@ const statusTextColorMap: Record = { [TransactionStatusType.NOT_DEPEND]: '#FFB915', [TransactionStatusType.SUCCEED]: '#60DFAB', [TransactionStatusType.FAILED]: '#FF5F5F', - [TransactionStatusType.CANCELLED]: '#FF5F5F', } const getContractFunctionName = async (data: string | undefined) => { if (!data) return null const sig = data.slice(0, 10) - const name = await Services.Ethereum.getContractFunctionName(sig) - return name ? name.replace(/_/g, ' ') : 'Contract Interaction' + // const name = await Services.Ethereum.getContractFunctionName(sig) + // return name ? name.replace(/_/g, ' ') : 'Contract Interaction' + return '' } interface TransactionProps extends GridProps { - chainId: ChainId - transaction: RecentTransaction - onClear?(tx: RecentTransaction): void + chainId: Web3Helper.ChainIdAll + transaction: RecentTransaction + onClear?(tx: RecentTransaction): void } const Transaction: FC = ({ chainId, transaction: tx, onClear = noop, ...rest }) => { const { t } = useI18N() - const { Utils } = useWeb3State() const { classes, theme } = useStyles() const statusTextMap: Record = { [TransactionStatusType.NOT_DEPEND]: t('recent_transaction_pending'), [TransactionStatusType.SUCCEED]: t('recent_transaction_success'), [TransactionStatusType.FAILED]: t('recent_transaction_failed'), - [TransactionStatusType.CANCELLED]: t('recent_transaction_cancelled'), } const web3 = useWeb3() + const { Others } = useWeb3State() as Web3Helper.Web3StateAll + const { value: targetAddress } = useAsync(async () => { - if (tx.receipt?.contractAddress) return tx.receipt.contractAddress - if (tx.payload?.params?.[0].to) return tx.payload.params[0].to as string - const transaction = await web3.eth.getTransaction(tx.hash) - return transaction.to + return '' + // if (tx.receipt?.contractAddress) return tx.receipt.contractAddress + // if (tx.payload?.params?.[0].to) return tx.payload.params[0].to as string + // const transaction = await web3?.eth.getTransaction(tx.hash) + // return transaction.to }, [web3, tx]) const address = (targetAddress || '').toLowerCase() - const txData = tx.payload?.params?.[0].data as string | undefined + // const txData = tx.payload?.params?.[0].data as string | undefined const { value: functionName } = useAsync(async () => { - return getContractFunctionName(txData) - }, [txData]) + return '' + // return getContractFunctionName(txData) + }, []) const handleClear = useCallback(() => { onClear(tx) @@ -125,19 +117,19 @@ const Transaction: FC = ({ chainId, transaction: tx, onClear = const [txStatus, setTxStatus] = useState(tx.status) - useEffect(() => { - return WalletMessages.events.transactionStateUpdated.on((data) => { - if ('receipt' in data && tx.hash === data.receipt?.transactionHash) { - switch (data.type) { - case TransactionStateType.CONFIRMED: - setTxStatus(TransactionStatusType.SUCCEED) - break - case TransactionStateType.FAILED: - setTxStatus(TransactionStatusType.FAILED) - } - } - }) - }, [tx.hash]) + // useEffect(() => { + // return WalletMessages.events.transactionStateUpdated.on((data) => { + // if ('receipt' in data && tx.id === data.receipt?.transactionHash) { + // switch (data.type) { + // case TransactionStateType.CONFIRMED: + // setTxStatus(TransactionStatusType.SUCCEED) + // break + // case TransactionStateType.FAILED: + // setTxStatus(TransactionStatusType.FAILED) + // } + // } + // }) + // }, [tx.id]) return ( @@ -151,19 +143,19 @@ const Transaction: FC = ({ chainId, transaction: tx, onClear = {functionName} - {format(tx.at, 'yyyy.MM.dd hh:mm')} + {format(tx.createdAt, 'yyyy.MM.dd hh:mm')} {address && isSameAddress(domainOrAddress, address) - ? Utils?.formatAddress?.(address, 4) + ? Others?.formatAddress?.(address, 4) : domainOrAddress || address} @@ -186,8 +178,8 @@ const Transaction: FC = ({ chainId, transaction: tx, onClear = } interface Props extends ListProps { - transactions: RecentTransaction[] - onClear?(tx: RecentTransaction): void + transactions: Array> + onClear?(tx: RecentTransaction): void } export const TransactionList: FC = forwardRef(({ className, transactions, onClear = noop, ...rest }, ref) => { @@ -197,7 +189,7 @@ export const TransactionList: FC = forwardRef(({ className, transactions, return ( {transactions.map((tx) => ( - + ))} diff --git a/packages/mask/src/components/shared/WalletStatusBox/index.tsx b/packages/mask/src/components/shared/WalletStatusBox/index.tsx index f0f8eb6f7a2d..85c3dcd1b279 100644 --- a/packages/mask/src/components/shared/WalletStatusBox/index.tsx +++ b/packages/mask/src/components/shared/WalletStatusBox/index.tsx @@ -7,6 +7,7 @@ import { useReverseAddress, useWallet, useWeb3State, + Web3Helper, } from '@masknet/plugin-infra/web3' import { FormattedAddress, useSnackbarCallback, WalletIcon } from '@masknet/shared' import { isDashboardPage } from '@masknet/shared-base' @@ -105,9 +106,8 @@ export function WalletStatusBox(props: WalletStatusBox) { const providerType = useProviderType() const providerDescriptor = useProviderDescriptor() const networkDescriptor = useNetworkDescriptor() - const { Utils } = useWeb3State() ?? {} - - const { value: domain } = useReverseAddress(account) + const { Others } = useWeb3State() as Web3Helper.Web3StateAll + const { value: domain } = useReverseAddress(undefined, account) // #region copy addr to clipboard const [, copyToClipboard] = useCopyToClipboard() @@ -150,8 +150,8 @@ export function WalletStatusBox(props: WalletStatusBox) {
{providerType !== ProviderType.MaskWallet ? ( - {domain && Utils?.formatDomainName - ? Utils.formatDomainName(domain) + {domain && Others?.formatDomainName + ? Others.formatDomainName(domain) : providerDescriptor?.name} ) : ( @@ -159,15 +159,17 @@ export function WalletStatusBox(props: WalletStatusBox) { {wallet?.name ?? providerDescriptor?.name} - {domain && Utils?.formatDomainName ? ( - {Utils.formatDomainName(domain)} + {domain && Others?.formatDomainName ? ( + + {Others.formatDomainName(domain)} + ) : null} )}
- + diff --git a/packages/mask/src/components/shared/WalletStatusBox/usePendingTransactions.tsx b/packages/mask/src/components/shared/WalletStatusBox/usePendingTransactions.tsx index fe2f39e54a01..ac1abe4f7b9c 100644 --- a/packages/mask/src/components/shared/WalletStatusBox/usePendingTransactions.tsx +++ b/packages/mask/src/components/shared/WalletStatusBox/usePendingTransactions.tsx @@ -1,14 +1,13 @@ -import { EMPTY_LIST } from '@masknet/shared-base' +import { + useClearTransactionsCallback, + useRemoveTransactionCallback, + useRecentTransactions, +} from '@masknet/plugin-infra/web3' import { makeStyles } from '@masknet/theme' -import { TransactionStatusType } from '@masknet/web3-shared-evm' +import { TransactionStatusType } from '@masknet/web3-shared-base' import { Typography } from '@mui/material' import classnames from 'classnames' import { useState } from 'react' -import { - useClearRecentTransactions, - useRecentTransactions, - useRemoveRecentTransaction, -} from '../../../plugins/Wallet/hooks' import { useI18N } from '../../../utils' import { TransactionList } from './TransactionList' @@ -37,18 +36,16 @@ export function usePendingTransactions() { const { t } = useI18N() // #region recent pending transactions - const { value: pendingTransactions = EMPTY_LIST } = useRecentTransactions({ - status: TransactionStatusType.NOT_DEPEND, - }) + const pendingTransactions = useRecentTransactions(undefined, TransactionStatusType.NOT_DEPEND) // frozenTxes would not be reactive to pendingTransactions, // it would be recreated then the list shows up. const [meltedTxHashes, setMeltedTxHashes] = useState([]) - const clearRecentTxes = useClearRecentTransactions() - const removeRecentTx = useRemoveRecentTransaction() + const clearRecentTxes = useClearTransactionsCallback() + const removeRecentTx = useRemoveTransactionCallback() - const transactions = pendingTransactions.slice(0, 5).filter((tx) => !meltedTxHashes.includes(tx.hash)) + const transactions = pendingTransactions.slice(0, 5).filter((tx) => !meltedTxHashes.includes(tx.id)) // #endregion const summary = pendingTransactions.length ? (
@@ -74,8 +71,8 @@ export function usePendingTransactions() { { - setMeltedTxHashes((list) => [...list, tx.hash]) - removeRecentTx(tx.hash) + setMeltedTxHashes((list) => [...list, tx.id]) + removeRecentTx(tx.id) }} /> ) diff --git a/packages/mask/src/database/helpers/pagination.ts b/packages/mask/src/database/helpers/pagination.ts index 9d267b7a5ca3..ea6f4619e7c6 100644 --- a/packages/mask/src/database/helpers/pagination.ts +++ b/packages/mask/src/database/helpers/pagination.ts @@ -3,7 +3,7 @@ import type { IDBPSafeTransaction } from '../../../background/database/utils/ope export async function queryTransactionPaged< DBType extends DBSchema, - TxStores extends StoreNames[], + TxStores extends Array>, Mode extends 'readonly' | 'readwrite', RecordType extends IDBPCursorWithValueIteratorValue['value'], >( diff --git a/packages/mask/src/env.d.ts b/packages/mask/src/env.d.ts index 9996c0915d7e..2359dc684c18 100644 --- a/packages/mask/src/env.d.ts +++ b/packages/mask/src/env.d.ts @@ -4,14 +4,3 @@ /// /// /// - -declare module 'ethjs-ens' { - import { provider as Provider } from 'web3-core' - import { ChainId } from '../../web3-shared/evm' - - export default class Ens { - constructor(options: { provider: Provider; network: ChainId }) {} - lookup(name: string): Promise - reverse(address: string): Promise - } -} diff --git a/packages/mask/src/extension/background-script/BackupService.ts b/packages/mask/src/extension/background-script/BackupService.ts index 6c97ebfeb4a1..611800f67790 100644 --- a/packages/mask/src/extension/background-script/BackupService.ts +++ b/packages/mask/src/extension/background-script/BackupService.ts @@ -3,7 +3,7 @@ export * from '../../../background/services/backup' import { assertEnvironment, Environment } from '@dimensiondev/holoflows-kit' assertEnvironment(Environment.ManifestBackground) -import { currySameAddress, isSameAddress, ProviderType } from '@masknet/web3-shared-evm' +import { currySameAddress, isSameAddress } from '@masknet/web3-shared-base' import { exportMnemonic, exportPrivateKey, @@ -96,14 +96,16 @@ delegateWalletRestore(async function (backup) { async function backupAllWallets(): Promise { const allSettled = await Promise.allSettled( ( - await getWallets(ProviderType.MaskWallet) - ).map(async (wallet) => { - return { - ...wallet, - mnemonic: wallet.derivationPath ? await exportMnemonic(wallet.address) : undefined, - privateKey: wallet.derivationPath ? undefined : await exportPrivateKey(wallet.address), - } - }), + await getWallets() + ) + .filter((x) => x.storedKeyInfo) + .map(async (wallet) => { + return { + ...wallet, + mnemonic: wallet.derivationPath ? await exportMnemonic(wallet.address) : undefined, + privateKey: wallet.derivationPath ? undefined : await exportPrivateKey(wallet.address), + } + }), ) const wallets_ = allSettled.map((x) => (x.status === 'fulfilled' ? WalletRecordToJSONFormat(x.value) : null)) if (wallets_.some((x) => !x)) throw new Error('Failed to backup wallets.') @@ -111,7 +113,7 @@ async function backupAllWallets(): Promise { } async function backupAllLegacyWallets(): Promise { - const x = await getLegacyWallets(ProviderType.MaskWallet) + const x = await getLegacyWallets() return x.map(LegacyWalletRecordToJSONFormat) } diff --git a/packages/mask/src/extension/background-script/EthereumService.ts b/packages/mask/src/extension/background-script/EthereumService.ts deleted file mode 100644 index 583984838923..000000000000 --- a/packages/mask/src/extension/background-script/EthereumService.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './EthereumServices/request' -export * from './EthereumServices/provider' -export * from './EthereumServices/nonce' -export * from './EthereumServices/network' -export * from './EthereumServices/rpc' diff --git a/packages/mask/src/extension/background-script/EthereumServices/network.ts b/packages/mask/src/extension/background-script/EthereumServices/network.ts deleted file mode 100644 index 363c92387c6a..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/network.ts +++ /dev/null @@ -1,243 +0,0 @@ -import type { - SignedTransaction, - Transaction, - TransactionConfig, - TransactionReceipt, - PastLogsOptions, - Log, -} from 'web3-core' -import { toHex } from 'web3-utils' -import { - ChainId, - EthereumChainDetailed, - EthereumMethodType, - RequestOptions, - SendOverrides, -} from '@masknet/web3-shared-evm' -import { request } from './request' - -export async function getChainId(overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_CHAIN_ID, - }, - overrides, - ) -} - -export async function getAccounts(overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_ACCOUNTS, - }, - overrides, - ) -} - -export async function getCode(address: string, overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_GET_CODE, - params: [address, 'latest'], - }, - overrides, - ) -} - -export async function getGasPrice(overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_GAS_PRICE, - }, - overrides, - ) -} - -export async function getBlockNumber(overrides?: SendOverrides) { - const blockNumber = await request( - { - method: EthereumMethodType.ETH_BLOCK_NUMBER, - }, - overrides, - ) - return Number.parseInt(blockNumber, 16) || 0 -} - -export async function getBalance(address: string, overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_GET_BALANCE, - params: [address, 'latest'], - }, - overrides, - ) -} - -export async function getTransactionByHash(hash: string, overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_GET_TRANSACTION_BY_HASH, - params: [hash], - }, - overrides, - ) -} - -export async function getTransactionReceipt(hash: string, overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.MASK_GET_TRANSACTION_RECEIPT, - params: [hash], - }, - overrides, - ) -} - -export async function getTransactionCount(address: string, overrides?: SendOverrides) { - const count = await request( - { - method: EthereumMethodType.ETH_GET_TRANSACTION_COUNT, - params: [address, 'latest'], - }, - overrides, - ) - return Number.parseInt(count, 16) || 0 -} - -export async function getPendingTransactions(address: string, overrides?: SendOverrides) { - const filterId = await request( - { - method: EthereumMethodType.ETH_NEW_PENDING_TRANSACTION_FILTER, - params: [], - }, - overrides, - ) - const transactions = await request( - { - method: EthereumMethodType.ETH_GET_FILTER_CHANGES, - params: [filterId], - }, - overrides, - ) - return transactions -} - -export async function call(config: TransactionConfig, overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_CALL, - params: [config, 'latest'], - }, - overrides, - ) -} - -export async function estimateGas(config: TransactionConfig, overrides?: SendOverrides) { - const gas = await request( - { - method: EthereumMethodType.ETH_ESTIMATE_GAS, - params: [config], - }, - overrides, - ) - return Number.parseInt(gas, 16) || 0 -} - -export async function sign(dataToSign: string, address: string, overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_SIGN, - params: [dataToSign, address], - }, - overrides, - ) -} - -export async function personalSign( - dataToSign: string, - address: string, - password?: string, - overrides?: SendOverrides, - requestOptions?: RequestOptions, -) { - return request( - { - method: EthereumMethodType.PERSONAL_SIGN, - params: [dataToSign, address, password].filter((x) => typeof x !== 'undefined'), - }, - overrides, - requestOptions, - ) -} - -export async function typedDataSign(address: string, dataToSign: string, overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_SIGN_TYPED_DATA, - params: [address, dataToSign], - }, - overrides, - ) -} - -export async function addEthereumChain( - chainDetailed: EthereumChainDetailed, - address?: string, - overrides?: SendOverrides, -) { - return request( - { - method: EthereumMethodType.WALLET_ADD_ETHEREUM_CHAIN, - params: [chainDetailed, address].filter(Boolean), - }, - overrides, - ) -} - -export async function switchEthereumChain(chainId: ChainId, overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.WALLET_SWITCH_ETHEREUM_CHAIN, - params: [ - { - chainId: toHex(chainId), - }, - ], - }, - overrides, - ) -} - -export async function signTransaction(config: TransactionConfig, overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_SIGN_TRANSACTION, - params: [config], - }, - overrides, - ) -} - -export async function sendTransaction(config: TransactionConfig, overrides?: SendOverrides) { - return request( - { - method: EthereumMethodType.ETH_SEND_TRANSACTION, - params: [config], - }, - overrides, - ) -} - -export async function getPastLogs(config: PastLogsOptions, overrides?: SendOverrides) { - return new Promise((resolve, reject) => - request( - { - method: EthereumMethodType.ETH_GET_LOGS, - params: [config], - }, - overrides, - ) - .then((result) => resolve(result)) - .catch(() => resolve([])), - ) -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/nonce.ts b/packages/mask/src/extension/background-script/EthereumServices/nonce.ts deleted file mode 100644 index 4963d8a79965..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/nonce.ts +++ /dev/null @@ -1,131 +0,0 @@ -import { ProviderType } from '@masknet/web3-shared-evm' -import { EthereumAddress } from 'wallet.ts' -import { getTransactionCount } from './network' -import { currentMaskWalletChainIdSettings } from '../../../plugins/Wallet/settings' - -class NonceManager { - constructor(private address: string) {} - private nonce = NonceManager.INITIAL_NONCE - private locked = false - private tasks: (() => void)[] = [] - - private lock() { - this.locked = true - } - private unlock() { - this.locked = false - } - private continue() { - if (!this.locked) this.tasks.shift()?.() - } - private async getRemoteNonce() { - return new Promise(async (resolve, reject) => { - const callback = (e: unknown, nonce?: number) => { - if (e) reject(e) - // TODO: is 0 a correct value if nonce is undefined? - else resolve(nonce ?? 0) - this.unlock() - this.continue() - } - const run = async () => { - try { - this.lock() - callback( - null, - // Only mask wallets need to use Nonce - await getTransactionCount(this.address, { - providerType: ProviderType.MaskWallet, - chainId: currentMaskWalletChainIdSettings.value, - }), - ) - } catch (error) { - callback(error) - } - } - if (this.locked) this.tasks.push(run) - else run() - }) - } - private async setLocalNonce(nonce: number) { - return new Promise(async (resolve, reject) => { - const callback = (e: Error | null) => { - if (e) reject(e) - else resolve() - this.unlock() - this.continue() - } - const run = async () => { - this.lock() - this.nonce = nonce - callback(null) - } - if (this.locked) this.tasks.push(run) - else run() - }) - } - - public async getNonce() { - const nonce = this.nonce === NonceManager.INITIAL_NONCE ? await this.getRemoteNonce() : this.nonce - await this.setLocalNonce(nonce) - return nonce - } - public async setNonce(nonce: number) { - await this.setLocalNonce(nonce) - } - public async resetNonce() { - const nonce = await this.getRemoteNonce() - await this.setLocalNonce(nonce) - } - - static INITIAL_NONCE = -1 -} - -const cache = new Map() - -/** - * Get current available nonce, call commitNonce() after the transaction succeed - * @param address the account address - */ -export function getNonce(address_: string) { - const address = EthereumAddress.checksumAddress(address_) - if (!cache.has(address)) cache.set(address, new NonceManager(address)) - return cache.get(address)!.getNonce() -} - -/** - * Commit to a new nonce only call when transaction succeed - * @param address the account address - */ -export async function commitNonce(address_: string) { - const address = EthereumAddress.checksumAddress(address_) - if (!cache.has(address)) cache.set(address, new NonceManager(address)) - return setNonce(address, (await cache.get(address)!.getNonce()) + 1) -} - -/** - * Set a new nonce regardless the old one - * @param address the account address - * @param nonce the new nonce - */ -export function setNonce(address_: string, nonce: number) { - const address = EthereumAddress.checksumAddress(address_) - if (!cache.has(address)) cache.set(address, new NonceManager(address)) - return cache.get(address)!.setNonce(nonce) -} - -/** - * Sync local nonce to remote one (depend on your current node) - * @param address the account address - */ -export function resetNonce(address_: string) { - const address = EthereumAddress.checksumAddress(address_) - if (!cache.has(address)) cache.set(address, new NonceManager(address)) - return cache.get(address)!.resetNonce() -} - -/** - * Sync all nonces - */ -export async function resetAllNonce() { - await Promise.all(Array.from(cache.values()).map((m) => m.resetNonce())) -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/provider.ts b/packages/mask/src/extension/background-script/EthereumServices/provider.ts deleted file mode 100644 index 633c9c06999a..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/provider.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { first } from 'lodash-unified' -import { defer } from '@dimensiondev/kit' -import type { ChainId, ProviderType } from '@masknet/web3-shared-evm' -import * as MaskWallet from './providers/MaskWallet' -import * as MetaMask from './providers/MetaMask' -import * as WalletConnect from './providers/WalletConnect' -import * as CustomNetwork from './providers/CustomNetwork' -import * as Injected from './providers/Injected' -import * as Fortmatic from './providers/Fortmatic' - -// #region connect WalletConnect -// Step 1: Generate the connection URI and render a QRCode for scanning by the user -export async function createConnectionURI() { - return (await WalletConnect.createConnector()).uri -} - -// Step 2: If user confirmed the request we will receive the 'connect' event -type Account = { account?: string; chainId: ChainId } -let deferredConnect: Promise | null = null -let resolveConnect: ((result: Account) => void) | undefined -let rejectConnect: ((error: Error) => void) | undefined - -export async function connectWalletConnect() { - const [deferred, resolve, reject] = defer() - - deferredConnect = deferred - resolveConnect = resolve - rejectConnect = reject - createWalletConnect().then(resolve, reject) - - return deferred -} - -export async function createWalletConnect() { - const connector = await WalletConnect.createConnectorIfNeeded() - - if (connector.connected) - return { - account: first(connector.accounts), - chainId: connector.chainId, - } - - const { accounts, chainId } = await WalletConnect.requestAccounts() - return { - account: first(accounts), - chainId, - } -} - -export async function untilWalletConnect() { - if (!deferredConnect) throw new Error('No connection.') - return deferredConnect -} - -export async function cancelWalletConnect() { - rejectConnect?.(new Error('User rejected the request.')) -} -// #endregion - -export async function connectMaskWallet(expectedChainId: ChainId) { - const { accounts, chainId } = await MaskWallet.requestAccounts(expectedChainId) - return { - account: first(accounts), - chainId, - } -} - -export async function connectMetaMask() { - const { accounts, chainId } = await MetaMask.requestAccounts() - return { - account: first(accounts), - chainId, - } -} - -// #region fortmatic -export async function connectFortmatic(expectedChainId: ChainId) { - const { accounts, chainId } = await Fortmatic.requestAccounts(expectedChainId) - return { - account: first(accounts), - chainId, - } -} - -export async function disconnectFortmatic(expectedChainId: ChainId) { - await Fortmatic.dismissAccounts(expectedChainId) -} -// #endregion - -export async function connectCustomNetwork() { - const { accounts, chainId } = await CustomNetwork.requestAccounts() - return { - account: first(accounts), - chainId, - } -} - -// #region connect injected provider -export async function connectInjected() { - const { accounts, chainId } = await Injected.requestAccounts() - return { - account: first(accounts), - chainId, - } -} - -export async function notifyInjectedEvent(name: string, event: unknown, providerType: ProviderType) { - switch (name) { - case 'accountsChanged': - await Injected.onAccountsChanged(event as string[], providerType) - break - case 'chainChanged': - await Injected.onChainIdChanged(event as string, providerType) - break - default: - throw new Error(`Unknown event name: ${name}.`) - } -} -// #endregion diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/CustomNetwork.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/CustomNetwork.ts deleted file mode 100644 index ff7182ca9ffa..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/providers/CustomNetwork.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ChainId } from '@masknet/web3-shared-evm' - -export function createWeb3() { - throw new Error('To be implemented.') -} - -export async function requestAccounts() { - return { - accounts: [], - chainId: ChainId.Mainnet, - } -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/Fortmatic.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/Fortmatic.ts deleted file mode 100644 index 2116fb6d9127..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/providers/Fortmatic.ts +++ /dev/null @@ -1,97 +0,0 @@ -import Web3 from 'web3' -import type { RequestArguments } from 'web3-core' -import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers' -import { defer } from '@dimensiondev/kit' -import { ChainId, EthereumMethodType } from '@masknet/web3-shared-evm' -import { EVM_Messages } from '../../../../plugins/EVM/messages' -import { resetAccount } from '../../../../plugins/Wallet/services' - -// #region redirect requests to the content page -let id = 0 - -async function request(requestArguments: RequestArguments) { - id += 1 - const requestId = id - const [deferred, resolve, reject] = defer() - - function onResponse({ payload, result, error }: EVM_Messages['FORTMATIC_PROVIDER_RPC_RESPONSE']) { - if (payload.id !== requestId) return - if (error) reject(error) - else resolve(result) - } - - setTimeout( - () => reject(new Error('The request is timeout.')), - requestArguments.method === EthereumMethodType.MASK_LOGIN_FORTMATIC ? 3 * 60 * 1000 : 45 * 1000, - ) - EVM_Messages.events.FORTMATIC_PROVIDER_RPC_RESPONSE.on(onResponse) - EVM_Messages.events.FORTMATIC_PROVIDER_RPC_REQUEST.sendToVisiblePages({ - payload: { - jsonrpc: '2.0', - id: requestId, - params: [], - ...requestArguments, - }, - }) - - deferred.finally(() => { - EVM_Messages.events.FORTMATIC_PROVIDER_RPC_RESPONSE.off(onResponse) - }) - - return deferred -} - -function send(payload: JsonRpcPayload, callback: (error: Error | null, response?: JsonRpcResponse) => void) { - request({ - method: payload.method, - params: payload.params, - }) - .then((result) => { - callback(null, { - id: payload.id as number, - jsonrpc: '2.0', - result, - }) - }) - .catch((error) => { - callback(error) - }) -} -// #endregion - -let web3: Web3 | null = null - -export function createProvider() { - return { - request, - send, - sendAsync: send, - } -} - -export function createWeb3() { - if (web3) return web3 - web3 = new Web3(createProvider()) - return web3 -} - -export async function requestAccounts(expectedChainId: ChainId) { - const provider = createProvider() - const response = await provider.request({ - method: EthereumMethodType.MASK_LOGIN_FORTMATIC, - params: [expectedChainId], - }) - return response as { - chainId: ChainId - accounts: string[] - } -} - -export async function dismissAccounts(expectedChainId: ChainId) { - const provider = createProvider() - await provider.request({ - method: EthereumMethodType.MASK_LOGOUT_FORTMATIC, - params: [expectedChainId], - }) - resetAccount() -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/Injected.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/Injected.ts deleted file mode 100644 index 461e7e6c6089..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/providers/Injected.ts +++ /dev/null @@ -1,123 +0,0 @@ -import { first } from 'lodash-unified' -import { defer } from '@dimensiondev/kit' -import Web3 from 'web3' -import type { RequestArguments } from 'web3-core' -import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers' -import { ChainId, EthereumMethodType, ProviderType } from '@masknet/web3-shared-evm' -import { EVM_Messages } from '../../../../plugins/EVM/messages' -import { currentChainIdSettings, currentProviderSettings } from '../../../../plugins/Wallet/settings' -import { updateAccount } from '../../../../plugins/Wallet/services' - -// #region redirect requests to the content page -let id = 0 - -async function request(requestArguments: RequestArguments) { - id += 1 - const requestId = id - const [deferred, resolve, reject] = defer() - - function onResponse({ payload, result, error }: EVM_Messages['INJECTED_PROVIDER_RPC_RESPONSE']) { - if (payload.id !== requestId) return - if (error) reject(error) - else resolve(result) - } - - setTimeout( - () => reject(new Error('The request is timeout.')), - requestArguments.method === EthereumMethodType.ETH_REQUEST_ACCOUNTS ? 3 * 60 * 1000 : 45 * 1000, - ) - EVM_Messages.events.INJECTED_PROVIDER_RPC_RESPONSE.on(onResponse) - EVM_Messages.events.INJECTED_PROVIDER_RPC_REQUEST.sendToVisiblePages({ - payload: { - jsonrpc: '2.0', - id: requestId, - params: [], - ...requestArguments, - }, - }) - - deferred.finally(() => { - EVM_Messages.events.INJECTED_PROVIDER_RPC_RESPONSE.off(onResponse) - }) - - return deferred -} - -function send(payload: JsonRpcPayload, callback: (error: Error | null, response?: JsonRpcResponse) => void) { - request({ - method: payload.method, - params: payload.params, - }) - .then((result) => { - callback(null, { - id: payload.id as number, - jsonrpc: '2.0', - result, - }) - }) - .catch((error) => { - callback(error) - }) -} -// #endregion - -let web3: Web3 | null = null - -export function createProvider() { - return { - request, - send, - sendAsync: send, - } -} - -export function createWeb3() { - if (web3) return web3 - web3 = new Web3(createProvider()) - return web3 -} - -export async function requestAccounts() { - const web3 = createWeb3() - const chainId = await web3.eth.getChainId() - const accounts = await web3.eth.requestAccounts() - return { - chainId, - accounts, - } -} - -export async function ensureConnectedAndUnlocked() { - const web3 = createWeb3() - try { - const accounts = await web3.eth.requestAccounts() - throw accounts - } catch (error) { - const accounts = error - if (Array.isArray(accounts)) { - if (accounts.length === 0) throw new Error('Injected Web3 is locked or it has not connected any accounts.') - else if (accounts.length > 0) return // valid - } - // Any other error means failed to connect injected web3 - throw new Error('Failed to connect to injected Web3.') - } -} - -export async function onAccountsChanged(accounts: string[], providerType: ProviderType) { - if (currentProviderSettings.value !== providerType) return - await updateAccount({ - account: first(accounts), - providerType, - }) -} - -export async function onChainIdChanged(id: string, providerType: ProviderType) { - if (currentProviderSettings.value !== providerType) return - - // learn more: https://docs.metamask.io/guide/ethereum-provider.html#chain-ids and https://chainid.network/ - const chainId = Number.parseInt(id, 16) || ChainId.Mainnet - if (currentChainIdSettings.value === chainId) return - await updateAccount({ - chainId, - }) -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts deleted file mode 100644 index 39ed6db6b0f1..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts +++ /dev/null @@ -1,89 +0,0 @@ -import MaskWallet from 'web3' -import type { HttpProvider } from 'web3-core' -import { PopupRoutes } from '@masknet/shared-base' -import { ChainId, getChainRPC, ProviderType } from '@masknet/web3-shared-evm' -import { currentChainIdSettings } from '../../../../plugins/Wallet/settings' -import { openPopupWindow } from '../../../../../background/services/helper' -import { WalletRPC } from '../../../../plugins/Wallet/messages' - -// #region providers -const providerPool = new Map() - -export function createProvider(url: string): HttpProvider { - const provider = - providerPool.get(url) ?? - new MaskWallet.providers.HttpProvider(url, { - timeout: 20000, // ms - // @ts-ignore - clientConfig: { - keepalive: true, - keepaliveInterval: 1, // ms - }, - reconnect: { - auto: true, - delay: 5000, // ms - maxAttempts: Number.MAX_SAFE_INTEGER, - onTimeout: true, - }, - }) - providerPool.set(url, provider) - return provider -} -// #endregion - -// #region web3 instances -const instancePool = new Map() -const SEED = Math.floor(Math.random() * 4) - -function createWeb3Instance(provider: HttpProvider) { - return ( - instancePool.get(provider.host) ?? - (() => { - const newInstance = new MaskWallet(provider) - instancePool.set(provider.host, newInstance) - return newInstance - })() - ) -} - -export function createWeb3({ - url = '', - chainId = currentChainIdSettings.value, - privKeys = [], -}: { - url?: string - chainId?: ChainId - privKeys?: string[] -} = {}) { - url = url || getChainRPC(chainId, SEED) - const provider = createProvider(url) - const web3 = createWeb3Instance(provider) - if (privKeys.length) { - web3.eth.accounts.wallet.clear() - privKeys.forEach((k) => k && k !== '0x' && web3.eth.accounts.wallet.add(k)) - } - return web3 -} -// #endregion - -export async function requestAccounts(chainId: ChainId) { - const wallets = await WalletRPC.getWallets(ProviderType.MaskWallet) - return new Promise<{ - chainId: ChainId - accounts: string[] - }>(async (resolve, reject) => { - try { - await WalletRPC.selectAccountPrepare((accounts, chainId) => { - resolve({ - chainId, - accounts, - }) - }) - await openPopupWindow(wallets.length > 0 ? PopupRoutes.SelectWallet : undefined, { - chainId, - }) - } catch { - reject(new Error('Failed to connect to Mask Network.')) - } - }) -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/MetaMask.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/MetaMask.ts deleted file mode 100644 index 57e4f1b66bff..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/providers/MetaMask.ts +++ /dev/null @@ -1,112 +0,0 @@ -import Web3 from 'web3' -import type { provider as Provider } from 'web3-core' -import { first } from 'lodash-unified' -import createMetaMaskProvider, { MetaMaskInpageProvider } from '@dimensiondev/metamask-extension-provider' -import { ChainId, ProviderType } from '@masknet/web3-shared-evm' -import { delay } from '@dimensiondev/kit' -import { updateAccount } from '../../../../plugins/Wallet/services' -import { currentChainIdSettings, currentProviderSettings } from '../../../../plugins/Wallet/settings' -import { replaceRecentTransaction } from '../../../../plugins/Wallet/services/transaction/database' - -let provider: MetaMaskInpageProvider | null = null -let web3: Web3 | null = null - -async function onAccountsChanged(accounts: string[]) { - if (currentProviderSettings.value !== ProviderType.MetaMask) return - await updateAccount({ - account: first(accounts), - providerType: ProviderType.MetaMask, - chainId: typeof provider?.chainId === 'string' ? Number.parseInt(provider.chainId, 16) : undefined, - }) -} - -async function onChainIdChanged(id: string) { - if (currentProviderSettings.value !== ProviderType.MetaMask) return - - // learn more: https://docs.metamask.io/guide/ethereum-provider.html#chain-ids and https://chainid.network/ - const chainId = Number.parseInt(id, 16) || ChainId.Mainnet - if (currentChainIdSettings.value === chainId) return - await updateAccount({ - chainId, - }) -} - -async function onMessage(message: { - type: 'tx_replacement' - data: { - oldTx: string - newTx: string - nonce: string - from: string - } -}) { - if (message.type !== 'tx_replacement') return - await replaceRecentTransaction( - currentChainIdSettings.value, - message.data.from, - message.data.oldTx, - message.data.newTx, - ) -} - -export async function createProvider() { - if (provider?.chainId) return provider - provider = createMetaMaskProvider() - - // wait for building the connection - await delay(1000) - - if (!provider || provider.chainId === null) { - provider = null - throw new Error('Unable to create provider.') - } - - provider.on('accountsChanged', onAccountsChanged as (...args: unknown[]) => void) - provider.on('chainChanged', onChainIdChanged as (...args: unknown[]) => void) - provider.on('message', onMessage as (...args: unknown[]) => void) - return provider -} - -// MetaMask provider can be wrapped into web3 lib directly. -// https://github.com/MetaMask/extension-provider -export async function createWeb3() { - const provider_ = (await createProvider()) as Provider - if (!web3) web3 = new Web3(provider_) - else web3.setProvider(provider_) - return web3 -} - -export async function requestAccounts() { - const web3 = await createWeb3() - const chainId = await web3.eth.getChainId() - const accounts = await web3.eth.requestAccounts() - return { - chainId, - accounts, - } -} - -export async function ensureConnectedAndUnlocked() { - const web3 = await createWeb3() - try { - const accounts = await web3.eth.requestAccounts() - throw accounts - } catch (error) { - const accounts = error - if (Array.isArray(accounts)) { - if (accounts.length === 0) throw new Error('MetaMask is locked or it has not connected any accounts.') - else if (accounts.length > 0) return // valid - } - // Any other error means failed to connect MetaMask - throw new Error('Failed to connect to MetaMask.') - } -} - -export async function isUnlocked() { - try { - // it's an experimental API. we should not depend on. - return provider?._metamask?.isUnlocked() ?? false - } catch { - return false - } -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts deleted file mode 100644 index b5f1133b1544..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { first } from 'lodash-unified' -import type { JsonRpcResponse } from 'web3-core-helpers' -import WalletConnect from '@walletconnect/client' -import type { IJsonRpcRequest } from '@walletconnect/types' -import { ProviderType, ChainId } from '@masknet/web3-shared-evm' -import * as MaskWallet from './MaskWallet' -import { resetAccount, updateAccount } from '../../../../plugins/Wallet/services' -import { currentChainIdSettings, currentProviderSettings } from '../../../../plugins/Wallet/settings' - -let connector: WalletConnect | null = null - -/** - * Create a new connector and destroy the previous one if exists - */ -export async function createConnector() { - if (connector?.connected) return connector - - // create a new connector - connector = new WalletConnect({ - bridge: 'https://uniswap.bridge.walletconnect.org', - clientMeta: { - name: 'Mask Network', - description: 'Mask Network', - url: 'https://mask.io', - icons: ['https://mask.io/apple-touch-icon.png'], - }, - }) - connector.on('connect', onConnect) - connector.on('session_update', onUpdate) - connector.on('disconnect', onDisconnect) - connector.on('error', onDisconnect) - if (!connector.connected) await connector.createSession() - return connector -} - -export async function createConnectorIfNeeded() { - if (connector) return connector - return createConnector() -} - -// #region rpc -export async function signPersonalMessage(data: string, address: string, password: string) { - if (!connector) throw new Error('Connection Lost.') - return (await connector.signPersonalMessage([data, address, password])) as string -} - -export async function signTypedDataMessage(data: string, address: string) { - if (!connector) throw new Error('Connection Lost.') - return (await connector.signTypedData([data, address])) as string -} - -export async function sendCustomRequest(payload: IJsonRpcRequest) { - if (!connector) throw new Error('Connection Lost.') - return (await connector.sendCustomRequest(payload as IJsonRpcRequest)) as JsonRpcResponse -} -// #endregion - -// Wrap promise as PromiEvent because WalletConnect returns transaction hash only -// docs: https://docs.walletconnect.org/client-api -export function createWeb3({ chainId = currentChainIdSettings.value }: { chainId?: ChainId } = {}) { - return MaskWallet.createWeb3({ - chainId, - }) -} -// #endregion - -/** - * Request accounts from WalletConnect - * @param timeout - */ -export async function requestAccounts() { - const connector_ = await createConnectorIfNeeded() - return new Promise<{ accounts: string[]; chainId: ChainId }>(async (resolve, reject) => { - function resolve_() { - resolve({ - accounts: connector_.accounts, - chainId: connector_.chainId, - }) - } - if (connector_.accounts.length) { - resolve_() - return - } - connector_.on('connect', resolve_) - connector_.on('update', resolve_) - connector_.on('error', reject) - }) -} - -const onConnect = () => onUpdate(null) - -const onUpdate = async ( - error: Error | null, - payload?: { - params: { - chainId: number - accounts: string[] - }[] - }, -) => { - if (error) return - if (!connector?.accounts.length) return - if (currentProviderSettings.value !== ProviderType.WalletConnect) return - await updateAccount({ - name: connector.peerMeta?.name, - account: first(connector.accounts), - chainId: connector.chainId, - providerType: ProviderType.WalletConnect, - }) -} - -const onDisconnect = async (error: Error | null) => { - if (connector?.connected) await connector.killSession() - connector = null - if (currentProviderSettings.value !== ProviderType.WalletConnect) return - await resetAccount({ - providerType: ProviderType.WalletConnect, - }) -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/request.ts b/packages/mask/src/extension/background-script/EthereumServices/request.ts deleted file mode 100644 index acaa98c14af6..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/request.ts +++ /dev/null @@ -1,262 +0,0 @@ -import type { RequestArguments, TransactionConfig } from 'web3-core' -import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers' -import { - EthereumMethodType, - EthereumTransactionConfig, - formatGweiToWei, - formatWeiToGwei, - isEIP1559Supported, - ProviderType, - RequestOptions, - SendOverrides, - TransactionStateType, -} from '@masknet/web3-shared-evm' -import { - currentChainIdSettings, - currentMaskWalletAccountSettings, - currentMaskWalletChainIdSettings, - currentProviderSettings, -} from '../../../plugins/Wallet/settings' -import { WalletRPC } from '../../../plugins/Wallet/messages' -import { INTERNAL_nativeSend, INTERNAL_send } from './send' -import { defer } from '@dimensiondev/kit' -import { hasNativeAPI, nativeAPI } from '../../../../shared/native-rpc' -import { openPopupWindow, removePopupWindow } from '../../../../background/services/helper' -import { toHex } from 'web3-utils' -import { isLessThan } from '@masknet/web3-shared-base' - -let id = 0 - -const UNCONFIRMED_CALLBACK_MAP = new Map void>() -const RISK_METHOD_LIST = [ - EthereumMethodType.ETH_SIGN, - EthereumMethodType.PERSONAL_SIGN, - EthereumMethodType.ETH_SIGN_TYPED_DATA, - EthereumMethodType.ETH_DECRYPT, - EthereumMethodType.ETH_GET_ENCRYPTION_PUBLIC_KEY, - EthereumMethodType.ETH_SEND_TRANSACTION, -] - -function getSendMethod() { - if (hasNativeAPI && nativeAPI) return INTERNAL_nativeSend - return INTERNAL_send -} - -function getPayloadId(payload: JsonRpcPayload) { - return typeof payload.id === 'string' ? Number.parseInt(payload.id, 10) : payload.id -} - -function isRiskMethod(method: EthereumMethodType) { - return RISK_METHOD_LIST.includes(method) -} - -function isSendMethod(method: EthereumMethodType) { - return method === EthereumMethodType.ETH_SEND_TRANSACTION -} - -async function requestSend( - payload: JsonRpcPayload, - callback: (error: Error | null, response?: JsonRpcResponse) => void, - overrides?: SendOverrides, - options?: RequestOptions, -) { - id += 1 - const notifyProgress = isSendMethod(payload.method as EthereumMethodType) - const { providerType = currentProviderSettings.value } = overrides ?? {} - - const chainId = - overrides?.chainId ?? - (providerType === ProviderType.MaskWallet - ? currentMaskWalletChainIdSettings.value - : currentChainIdSettings.value) - - const { popupsWindow = true } = options ?? {} - - const payload_ = { - ...payload, - id, - } - - if (payload_.method === EthereumMethodType.ETH_SEND_TRANSACTION) { - const [config] = payload_.params as [EthereumTransactionConfig] - - // If the default gas config be less than low option, force reset it - if (isEIP1559Supported(chainId)) { - const results = await WalletRPC.getEstimateGasFees(chainId) - - if ( - results?.low?.suggestedMaxFeePerGas && - results?.medium && - (isLessThan( - config?.maxFeePerGas ? formatWeiToGwei(config.maxFeePerGas) : 0, - results.low.suggestedMaxFeePerGas, - ) || - isLessThan( - config?.maxPriorityFeePerGas ? formatWeiToGwei(config.maxPriorityFeePerGas) : 0, - results.low.suggestedMaxPriorityFeePerGas, - )) - ) { - payload_.params![0] = { - ...config, - maxFeePerGas: toHex(formatGweiToWei(results.medium.suggestedMaxFeePerGas).toFixed(0)), - maxPriorityFeePerGas: toHex( - formatGweiToWei(results.medium.suggestedMaxPriorityFeePerGas).toFixed(0), - ), - } - } - } else { - const results = await WalletRPC.getGasPriceDictFromDeBank(chainId) - if (results?.data.slow.price && isLessThan((config?.gasPrice as string) ?? 0, results.data.slow.price)) { - payload_.params![0] = { - ...config, - gasPrice: toHex(results.data.normal.price), - } - } - } - } - - const hijackedCallback = (error: Error | null, response?: JsonRpcResponse) => { - if (error && notifyProgress) - WalletRPC.notifyPayloadProgress(payload_, { - type: TransactionStateType.FAILED, - error, - }) - callback(error, response) - } - - // redirect risk rpc to the mask wallet - if ( - !hasNativeAPI && - providerType === ProviderType.MaskWallet && - isRiskMethod(payload_.method as EthereumMethodType) - ) { - try { - if (notifyProgress) - WalletRPC.addProgress({ - payload: payload_, - state: { - type: TransactionStateType.WAIT_FOR_CONFIRMING, - }, - }) - await WalletRPC.pushUnconfirmedRequest(payload_) - } catch (error) { - hijackedCallback(error instanceof Error ? error : new Error('Failed to add request.')) - return - } - UNCONFIRMED_CALLBACK_MAP.set(payload_.id, hijackedCallback) - if (popupsWindow) openPopupWindow() - return - } - if (notifyProgress) - WalletRPC.addProgress({ - payload, - state: { - type: - providerType === ProviderType.MaskWallet - ? TransactionStateType.UNKNOWN - : TransactionStateType.WAIT_FOR_CONFIRMING, - }, - }) - getSendMethod()(payload_, hijackedCallback, overrides) -} - -export async function request( - requestArguments: RequestArguments, - overrides?: SendOverrides, - options?: RequestOptions, -) { - return new Promise(async (resolve, reject) => { - requestSend( - { - jsonrpc: '2.0', - id, - params: [], - ...requestArguments, - }, - (error, response) => { - if (error || response?.error) reject(error ?? response?.error) - else resolve(response?.result) - }, - overrides, - options, - ) - }) -} - -export async function confirmRequest(payload: JsonRpcPayload, disableClose?: boolean) { - const pid = getPayloadId(payload) - if (!pid) return - const [deferred, resolve, reject] = defer() - getSendMethod()( - payload, - (error, response) => { - UNCONFIRMED_CALLBACK_MAP.get(pid)?.(error, response) - if (error) reject(error) - else if (response?.error) reject(new Error(`Failed to send transaction: ${response.error}`)) - else { - WalletRPC.deleteUnconfirmedRequest(payload) - .then(() => { - if (disableClose) return - return removePopupWindow() - }) - .then(() => { - UNCONFIRMED_CALLBACK_MAP.delete(pid) - }) - resolve(response) - } - }, - { - account: currentMaskWalletAccountSettings.value, - chainId: currentMaskWalletChainIdSettings.value, - providerType: ProviderType.MaskWallet, - }, - ) - return deferred -} - -export async function rejectRequest(payload: JsonRpcPayload) { - const pid = getPayloadId(payload) - if (!pid) return - UNCONFIRMED_CALLBACK_MAP.get(pid)?.(new Error('User rejected!')) - await WalletRPC.deleteUnconfirmedRequest(payload) - await removePopupWindow() - UNCONFIRMED_CALLBACK_MAP.delete(pid) -} - -export async function replaceRequest(hash: string, payload: JsonRpcPayload, overrides?: TransactionConfig) { - const pid = getPayloadId(payload) - if (!pid || payload.method !== EthereumMethodType.ETH_SEND_TRANSACTION) return - - const [config] = payload.params as [TransactionConfig] - return request( - { - method: EthereumMethodType.MASK_REPLACE_TRANSACTION, - params: [ - hash, - { - ...config, - ...overrides, - }, - ], - }, - { - account: currentMaskWalletAccountSettings.value, - chainId: currentMaskWalletChainIdSettings.value, - providerType: ProviderType.MaskWallet, - }, - ) -} - -export async function cancelRequest(hash: string, payload: JsonRpcPayload, overrides?: TransactionConfig) { - const pid = getPayloadId(payload) - if (!pid || payload.method !== EthereumMethodType.ETH_SEND_TRANSACTION) return - - const [config] = payload.params as [TransactionConfig] - return replaceRequest(hash, payload, { - ...config, - ...overrides, - to: config.from as string, - data: '0x', - value: '0x0', - }) -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts b/packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts deleted file mode 100644 index 5460b661eaa2..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts +++ /dev/null @@ -1,66 +0,0 @@ -import type { AbiItem } from 'web3-utils' -import * as ABICoder from 'web3-eth-abi' - -// built in abis -import BulkCheckout from '@masknet/web3-contracts/abis/BulkCheckout.json' -import ITO2 from '@masknet/web3-contracts/abis/ITO2.json' -import NftHappyRedPacket from '@masknet/web3-contracts/abis/NftHappyRedPacket.json' -import HappyRedPacketV4 from '@masknet/web3-contracts/abis/HappyRedPacketV4.json' -import ERC20 from '@masknet/web3-contracts/abis/ERC20.json' -import RouterV2ABI from '@masknet/web3-contracts/abis/RouterV2.json' -import SwapRouter from '@masknet/web3-contracts/abis/SwapRouter.json' -import MaskBox from '@masknet/web3-contracts/abis/MaskBox.json' - -// fix the type error -const coder = ABICoder as unknown as ABICoder.AbiCoder - -type InternalItem = { - name: string - parameters: { - name: string - type: string - }[] -} - -const ABI_MAP: Map = new Map() - -export function readABI(sig?: string) { - if (!sig) return - return ABI_MAP.get(sig) -} - -// #region construct built-in abis -function constructABI(abi: AbiItem[]) { - abi.forEach((x) => { - if (x.type !== 'function') return - if (x.stateMutability === 'pure' || x.stateMutability === 'view') return - const { name, inputs = [] } = x - if (!name) return - try { - const sig = coder.encodeFunctionSignature(`${x.name}(${inputs.map((y) => y.type).join(',')})`) - if (ABI_MAP.has(sig)) - console.warn(`The signature of ${`${x.name}(${inputs.map((y) => y.type).join(',')})`} already exists.`) - ABI_MAP.set(sig, { - name, - parameters: - inputs.map((y) => ({ - name: y.name, - type: y.type, - })) ?? [], - }) - } catch (error) { - console.log('Failed to encode function signature from below ABI:') - console.log(x) - } - }) -} - -constructABI(BulkCheckout as AbiItem[]) // donate gitcoin grants -constructABI(ITO2 as AbiItem[]) -constructABI(NftHappyRedPacket as AbiItem[]) -constructABI(HappyRedPacketV4 as AbiItem[]) -constructABI(MaskBox as AbiItem[]) -constructABI(ERC20 as AbiItem[]) -constructABI(RouterV2ABI as AbiItem[]) // uniswap V2 like -constructABI(SwapRouter as AbiItem[]) // uniswap V3 like -// #endregion diff --git a/packages/mask/src/extension/background-script/EthereumServices/rpc/index.ts b/packages/mask/src/extension/background-script/EthereumServices/rpc/index.ts deleted file mode 100644 index a57e7e9851c2..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/rpc/index.ts +++ /dev/null @@ -1,197 +0,0 @@ -import * as ABICoder from 'web3-eth-abi' -import { - isSameAddress, - EthereumRpcComputed, - EthereumRpcType, - EthereumMethodType, - getChainDetailedCAIP, - ZERO_ADDRESS, - isZeroAddress, -} from '@masknet/web3-shared-evm' -import type { TransactionConfig } from 'web3-core' -import type { JsonRpcPayload } from 'web3-core-helpers' -import { getCode } from '../network' -import { readABI } from './abi' -import { isZero } from '@masknet/web3-shared-base' - -// fix the type error -const coder = ABICoder as unknown as ABICoder.AbiCoder - -function isEmptyHex(hex: string) { - return !hex || ['0x', '0x0'].includes(hex) -} - -function getData(tx: TransactionConfig) { - const { data } = tx - if (!data) return - if (isEmptyHex(data)) return - if (!data.startsWith('0x')) return `0x${data}` - return data -} - -function getTo(tx: TransactionConfig) { - const { to } = tx - if (!to) return ZERO_ADDRESS - if (isEmptyHex(to)) return ZERO_ADDRESS - return to -} - -function getFunctionSignature(tx: TransactionConfig) { - const data = getData(tx) - return data?.slice(0, 10) -} - -function getFunctionParameters(tx: TransactionConfig) { - const data = getData(tx) - return data?.slice(10) -} - -export async function getComputedPayload(payload: JsonRpcPayload): Promise { - switch (payload.method) { - // sign - case EthereumMethodType.ETH_SIGN: - case EthereumMethodType.PERSONAL_SIGN: - return { - type: EthereumRpcType.SIGN, - to: payload.params![1], - data: payload.params![0], - } - case EthereumMethodType.ETH_SIGN_TYPED_DATA: - return { - type: EthereumRpcType.SIGN_TYPED_DATA, - to: payload.params![0], - data: payload.params![1], - } - - // decrypt - case EthereumMethodType.ETH_DECRYPT: - return { - type: EthereumRpcType.ETH_DECRYPT, - to: payload.params![1], - secret: payload.params![0], - } - case EthereumMethodType.ETH_GET_ENCRYPTION_PUBLIC_KEY: - return { - type: EthereumRpcType.ETH_GET_ENCRYPTION_PUBLIC_KEY, - account: payload.params![0], - } - - // asset - case EthereumMethodType.WATCH_ASSET: - case EthereumMethodType.WATCH_ASSET_LEGACY: - return { - type: EthereumRpcType.WATCH_ASSET, - asset: payload.params![0], - } - - // wallet - case EthereumMethodType.WALLET_SWITCH_ETHEREUM_CHAIN: - return { - type: EthereumRpcType.WALLET_SWITCH_ETHEREUM_CHAIN, - chain: getChainDetailedCAIP(Number.parseInt(payload.params![0], 16)), - } - case EthereumMethodType.WALLET_ADD_ETHEREUM_CHAIN: - return { - type: EthereumRpcType.WALLET_SWITCH_ETHEREUM_CHAIN, - chain: payload.params![0], - } - - // contract interaction - case EthereumMethodType.ETH_SEND_TRANSACTION: - return getSendTransactionComputedPayload(payload) as Promise - - default: - return - } -} -export function getContractFunctionName(signature: string) { - const abi = readABI(signature) - return abi?.name -} - -export type ComputedPayload = - | undefined - | { - type: EthereumRpcType.CONTRACT_INTERACTION - name?: string - parameters?: Record - _tx: any - } - | { - type: EthereumRpcType.CONTRACT_DEPLOYMENT - code: string - _tx: any - } - | { - type: EthereumRpcType.SEND_ETHER | EthereumRpcType.CANCEL - _tx: any - } -export async function getSendTransactionComputedPayload(payload: JsonRpcPayload): Promise { - const config = - payload.method === EthereumMethodType.MASK_REPLACE_TRANSACTION ? payload.params![1] : payload.params![0] - const from = (config.from as string | undefined) ?? '' - const value = (config.value as string | undefined) ?? '0x0' - const data = getData(config) - const to = getTo(config) - const signature = getFunctionSignature(config) - const parameters = getFunctionParameters(config) - - if (data) { - // contract interaction - const abi = readABI(signature) - - if (abi) { - try { - return { - type: EthereumRpcType.CONTRACT_INTERACTION, - name: abi.name, - parameters: coder.decodeParameters(abi.parameters, parameters ?? ''), - _tx: config, - } - } catch { - // do nothing - } - } - - // contract deployment - if (isZeroAddress(to)) { - return { - type: EthereumRpcType.CONTRACT_DEPLOYMENT, - code: data, - _tx: config, - } - } - } - - if (to) { - let code = '' - try { - code = await getCode(to) - } catch { - code = '' - } - - // cancel tx - if (isSameAddress(from, to) && isZero(value)) { - return { - type: EthereumRpcType.CANCEL, - _tx: config, - } - } - - // send ether - if (isEmptyHex(code)) { - return { - type: EthereumRpcType.SEND_ETHER, - _tx: config, - } - } else { - return { - type: EthereumRpcType.CONTRACT_INTERACTION, - _tx: config, - } - } - } - - return -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/send.ts b/packages/mask/src/extension/background-script/EthereumServices/send.ts deleted file mode 100644 index f13fc170f3b5..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/send.ts +++ /dev/null @@ -1,526 +0,0 @@ -import { EthereumAddress } from 'wallet.ts' -import { toHex } from 'web3-utils' -import type { HttpProvider } from 'web3-core' -import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers' -import { toBuffer } from 'ethereumjs-util' -import { safeUnreachable } from '@dimensiondev/kit' -import { - addGasMargin, - ChainId, - EthereumErrorType, - EthereumMethodType, - EthereumRpcType, - isEIP1559Supported, - isSameAddress, - ProviderType, - SendOverrides, - getPayloadHash, - getPayloadConfig, - getPayloadChainId, - getTransactionHash, - isZeroAddress, - getPayloadAccount, -} from '@masknet/web3-shared-evm' -import type { IJsonRpcRequest } from '@walletconnect/types' -import * as MetaMask from './providers/MetaMask' -import * as Injected from './providers/Injected' -import * as WalletConnect from './providers/WalletConnect' -import * as Fortmatic from './providers/Fortmatic' -import { getWallet } from '../../../plugins/Wallet/services' -import { createWeb3 } from './web3' -import { commitNonce, getNonce, resetNonce } from './nonce' -import { - currentAccountSettings, - currentChainIdSettings, - currentProviderSettings, -} from '../../../plugins/Wallet/settings' -import { Flags } from '../../../../shared' -import { nativeAPI } from '../../../../shared/native-rpc' -import { WalletRPC } from '../../../plugins/Wallet/messages' -import { getSendTransactionComputedPayload, ComputedPayload } from './rpc' -import { getError, hasError } from './error' -import { signTypedData, SignTypedDataVersion } from '@metamask/eth-sig-util' - -function isReadOnlyMethod(payload: JsonRpcPayload) { - return [ - EthereumMethodType.ETH_GET_CODE, - EthereumMethodType.ETH_GAS_PRICE, - EthereumMethodType.ETH_BLOCK_NUMBER, - EthereumMethodType.ETH_GET_BALANCE, - EthereumMethodType.ETH_GET_TRANSACTION_BY_HASH, - EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT, - EthereumMethodType.MASK_GET_TRANSACTION_RECEIPT, - EthereumMethodType.ETH_GET_TRANSACTION_COUNT, - EthereumMethodType.ETH_ESTIMATE_GAS, - EthereumMethodType.ETH_CALL, - EthereumMethodType.ETH_GET_LOGS, - ].includes(payload.method as EthereumMethodType) -} - -function isSignableMethod(payload: JsonRpcPayload) { - return [ - EthereumMethodType.ETH_SIGN, - EthereumMethodType.PERSONAL_SIGN, - EthereumMethodType.ETH_SIGN_TRANSACTION, - EthereumMethodType.MASK_REPLACE_TRANSACTION, - EthereumMethodType.ETH_SIGN_TYPED_DATA, - EthereumMethodType.ETH_SEND_TRANSACTION, - ].includes(payload.method as EthereumMethodType) -} - -function getTo(computedPayload: ComputedPayload) { - if (!computedPayload) return '' - switch (computedPayload.type) { - case EthereumRpcType.SEND_ETHER: - return (computedPayload._tx.to as string) ?? '' - case EthereumRpcType.CONTRACT_INTERACTION: - if (['transfer', 'transferFrom'].includes(computedPayload.name ?? '')) - return (computedPayload.parameters?.to as string) ?? '' - } - return '' -} - -async function handleTransferTransaction(chainId: ChainId, payload: JsonRpcPayload) { - if (payload.method !== EthereumMethodType.ETH_SEND_TRANSACTION) return - const computedPayload = await getSendTransactionComputedPayload(payload) - if (!computedPayload) return - - const from = (computedPayload._tx.from as string) ?? '' - const to = getTo(computedPayload) - - if (!isSameAddress(from, to) && !isZeroAddress(to)) await WalletRPC.addAddress(chainId, to) -} - -function handleRecentTransaction( - chainId: ChainId, - account: string, - payload: JsonRpcPayload, - response: JsonRpcResponse | undefined, -) { - const hash = getTransactionHash(response) - if (!hash) return - WalletRPC.watchTransaction(chainId, hash, payload) - WalletRPC.addRecentTransaction(chainId, account, hash, payload) -} - -function handleReplaceRecentTransaction( - chainId: ChainId, - previousHash: string, - account: string, - payload: JsonRpcPayload, - response: JsonRpcResponse | undefined, -) { - const hash = getTransactionHash(response) - if (!hash) return - WalletRPC.watchTransaction(chainId, hash, payload) - WalletRPC.replaceRecentTransaction(chainId, account, previousHash, hash, payload) -} - -async function handleNonce( - chainId: ChainId, - account: string, - error: Error | null, - response: JsonRpcResponse | undefined, -) { - if (chainId !== currentChainIdSettings.value) return - const error_ = (error ?? response?.error) as { message: string } | undefined - const message = error_?.message ?? '' - if (!EthereumAddress.isValid(account)) return - // nonce too low - // nonce too high - // transaction too old - const isGeneralErrorNonce = /\bnonce|transaction\b/im.test(message) && /\b(low|high|old)\b/im.test(message) - const isAuroraErrorNonce = message.includes('ERR_INCORRECT_NONCE') - if (isGeneralErrorNonce || isAuroraErrorNonce) resetNonce(account) - else if (!error_) commitNonce(account) -} - -/** - * This API is only used internally. Please use requestSend instead in order to share the same payload id globally. - * @param payload - * @param callback - * @param sendOverrides - */ -export async function INTERNAL_send( - payload: JsonRpcPayload, - callback: (error: Error | null, response?: JsonRpcResponse) => void, - { - chainId = currentChainIdSettings.value, - account = currentAccountSettings.value, - providerType = currentProviderSettings.value, - }: SendOverrides = {}, -) { - const chainIdFinally = getPayloadChainId(payload) ?? chainId - const accountFinally = getPayloadAccount(payload) ?? account - const wallet = providerType === ProviderType.MaskWallet ? await getWallet(accountFinally) : null - const privKey = isSignableMethod(payload) && wallet ? await WalletRPC.exportPrivateKey(wallet.address) : undefined - const web3 = await createWeb3({ - chainId: chainIdFinally, - privKeys: privKey ? [privKey] : [], - providerType: isReadOnlyMethod(payload) ? ProviderType.MaskWallet : providerType, - }) - const provider = web3.currentProvider as HttpProvider | undefined - - // unable to create provider - if (!provider) { - callback(new Error('Failed to create provider.')) - return - } - - // illegal payload - if (typeof payload.id === 'undefined') { - callback(new Error('Unknown payload id.')) - return - } - - async function personalSign() { - const [data, address] = payload.params as [string, string] - switch (providerType) { - case ProviderType.MaskWallet: - try { - const signed = await web3.eth.sign(data, address) - callback(null, { - jsonrpc: '2.0', - id: payload.id as number, - result: signed, - }) - } catch (error) { - callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE)) - } - break - case ProviderType.MetaMask: - await MetaMask.ensureConnectedAndUnlocked() - provider?.send( - { - ...payload, - params: [data, address, ''], - }, - callback, - ) - break - case ProviderType.WalletConnect: - try { - callback(null, { - jsonrpc: '2.0', - id: payload.id as number, - result: await WalletConnect.signPersonalMessage(data, address, ''), - }) - } catch (error) { - callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE)) - } - break - case ProviderType.Coin98: - case ProviderType.WalletLink: - case ProviderType.MathWallet: - try { - callback(null, { - jsonrpc: '2.0', - id: payload.id as number, - result: await Injected.createProvider().request({ - method: EthereumMethodType.PERSONAL_SIGN, - params: payload.params, - }), - }) - } catch (error) { - callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE)) - } - break - case ProviderType.Fortmatic: - try { - callback(null, { - jsonrpc: '2.0', - id: payload.id as number, - result: await Fortmatic.createProvider().request({ - method: EthereumMethodType.PERSONAL_SIGN, - params: payload.params, - }), - }) - } catch (error) { - callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE)) - } - break - case ProviderType.CustomNetwork: - throw new Error('To be implemented.') - default: - safeUnreachable(providerType) - } - } - - async function typedDataSign() { - const [address, dataToSign] = payload.params as [string, string] - switch (providerType) { - case ProviderType.MaskWallet: - const signed = signTypedData({ - privateKey: toBuffer('0x' + privKey), - data: JSON.parse(dataToSign), - version: SignTypedDataVersion.V4, - }) - try { - callback(null, { - jsonrpc: '2.0', - id: payload.id as number, - result: signed, - }) - } catch (error) { - callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE)) - } - break - case ProviderType.WalletConnect: - try { - callback(null, { - jsonrpc: '2.0', - id: payload.id as number, - result: await WalletConnect.signTypedDataMessage(address, dataToSign), - }) - } catch (error) { - callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE)) - } - break - default: - provider?.send(payload, callback) - } - } - - async function sendTransaction() { - const hash = getPayloadHash(payload) - const config = getPayloadConfig(payload) - - if (!config) { - callback(getError(null, null, EthereumErrorType.ERR_SEND_TRANSACTION)) - return - } - - // add nonce - if (providerType === ProviderType.MaskWallet && config.from && !config.nonce) - config.nonce = await getNonce(config.from as string) - - // add gas margin - if (config.gas) config.gas = addGasMargin(config.gas).toString() - config.gas = toHex(config.gas ?? '0') - - // add chain id - if (!config.chainId) config.chainId = chainIdFinally - - // if the transaction is eip-1559, need to remove gasPrice from the config, - if (Flags.EIP1559_enabled && isEIP1559Supported(chainIdFinally)) { - config.gasPrice = undefined - } else { - config.maxFeePerGas = undefined - config.maxPriorityFeePerGas = undefined - } - - // send the transaction - switch (providerType) { - case ProviderType.MaskWallet: - if (!wallet?.storedKeyInfo || !privKey) { - callback(getError(null, null, EthereumErrorType.ERR_SIGN_TRANSACTION)) - return - } - - // send the signed transaction - const signed = await web3.eth.accounts.signTransaction(config, privKey) - if (!signed.rawTransaction) { - callback(getError(null, null, EthereumErrorType.ERR_SIGN_TRANSACTION)) - return - } - - provider?.send( - { - ...payload, - method: EthereumMethodType.ETH_SEND_RAW_TRANSACTION, - params: [signed.rawTransaction], - }, - (error, response) => { - callback( - hasError(error, response) - ? getError(error, response, EthereumErrorType.ERR_SEND_TRANSACTION) - : null, - response, - ) - switch (payload.method) { - case EthereumMethodType.ETH_SEND_TRANSACTION: - handleNonce(chainIdFinally, accountFinally, error, response) - handleTransferTransaction(chainIdFinally, payload) - handleRecentTransaction(chainIdFinally, accountFinally, payload, response) - break - case EthereumMethodType.MASK_REPLACE_TRANSACTION: - handleReplaceRecentTransaction(chainIdFinally, hash, accountFinally, payload, response) - break - } - }, - ) - break - case ProviderType.MetaMask: - try { - await MetaMask.ensureConnectedAndUnlocked() - provider?.send(payload, (error, response) => { - callback( - hasError(error, response) - ? getError(error, response, EthereumErrorType.ERR_SEND_TRANSACTION) - : null, - response, - ) - handleTransferTransaction(chainIdFinally, payload) - handleRecentTransaction(chainIdFinally, accountFinally, payload, response) - }) - } catch (error) { - callback(getError(error, null, EthereumErrorType.ERR_SEND_TRANSACTION)) - break - } - break - case ProviderType.WalletConnect: - try { - const response = await WalletConnect.sendCustomRequest(payload as IJsonRpcRequest) - callback(null, response) - handleTransferTransaction(chainIdFinally, payload) - handleRecentTransaction(chainIdFinally, accountFinally, payload, response) - } catch (error) { - callback(getError(error, null, EthereumErrorType.ERR_SEND_TRANSACTION)) - } - break - case ProviderType.Coin98: - case ProviderType.WalletLink: - case ProviderType.MathWallet: - await Injected.ensureConnectedAndUnlocked() - Injected.createProvider().send(payload, (error, response) => { - callback( - hasError(error, response) - ? getError(error, response, EthereumErrorType.ERR_SEND_TRANSACTION) - : null, - response, - ) - handleTransferTransaction(chainIdFinally, payload) - handleRecentTransaction(chainIdFinally, accountFinally, payload, response) - }) - break - case ProviderType.Fortmatic: - Fortmatic.createProvider().send(payload, (error, response) => { - callback( - hasError(error, response) - ? getError(error, response, EthereumErrorType.ERR_SEND_TRANSACTION) - : null, - response, - ) - handleTransferTransaction(chainIdFinally, payload) - handleRecentTransaction(chainIdFinally, accountFinally, payload, response) - }) - break - case ProviderType.CustomNetwork: - throw new Error('To be implemented.') - default: - safeUnreachable(providerType) - } - } - - async function getTransactionReceipt() { - const [hash] = payload.params as [string] - - // redirect receipt queries to tx watcher - const transaction = await WalletRPC.getRecentTransaction(chainIdFinally, accountFinally, hash, { - receipt: true, - }) - - try { - callback(null, { - id: payload.id, - jsonrpc: payload.jsonrpc, - result: transaction?.receipt ?? null, - } as JsonRpcResponse) - } catch { - callback(null, { - id: payload.id, - jsonrpc: payload.jsonrpc, - result: null, - } as JsonRpcResponse) - } - } - - try { - switch (payload.method) { - case EthereumMethodType.ETH_ACCOUNTS: - callback(null, { - id: payload.id, - jsonrpc: payload.jsonrpc, - result: [accountFinally], - } as JsonRpcResponse) - break - case EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT: - await getTransactionReceipt() - break - case EthereumMethodType.PERSONAL_SIGN: - await personalSign() - break - case EthereumMethodType.ETH_SIGN_TYPED_DATA: - await typedDataSign() - break - case EthereumMethodType.ETH_SEND_TRANSACTION: - await sendTransaction() - break - case EthereumMethodType.MASK_GET_TRANSACTION_RECEIPT: - provider.send( - { - ...payload, - method: EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT, - }, - callback, - ) - break - case EthereumMethodType.MASK_REPLACE_TRANSACTION: - if (providerType !== ProviderType.MaskWallet) - throw new Error(`Cannot replace transaction for ${providerType}.`) - await sendTransaction() - break - default: - provider.send(payload, callback) - break - } - } catch (error) { - callback(getError(error, null, 'Failed to send request.')) - } -} - -/** - * This API redirects requests to the native app. - * @param payload - * @param callback - * @param sendOverrides - */ -export async function INTERNAL_nativeSend( - payload: JsonRpcPayload, - callback: (error: Error | null, response?: JsonRpcResponse) => void, - { account = currentAccountSettings.value, chainId = currentChainIdSettings.value }: SendOverrides = {}, -) { - const chainIdFinally = getPayloadChainId(payload) ?? chainId - const accountFinally = getPayloadAccount(payload) ?? account - const config = getPayloadConfig(payload) - if (config && !config.chainId) config.chainId = chainIdFinally - if (payload.method === EthereumMethodType.MASK_GET_TRANSACTION_RECEIPT) - payload.method = EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT - - try { - let response: JsonRpcResponse | undefined - if (nativeAPI?.type === 'Android') { - const jsonResponse = await nativeAPI?.api.sendJsonString(JSON.stringify(payload)) - response = JSON.parse(jsonResponse) - } else { - const _ = await nativeAPI?.api.send(payload) - if (_) { - const { error, ...rest } = _ - response = { ...rest } - if (error) response.error = { message: error } - } - } - callback(null, response) - if (payload.method === EthereumMethodType.ETH_SEND_TRANSACTION) { - handleNonce(chainIdFinally, accountFinally, null, response) - handleTransferTransaction(chainIdFinally, payload) - handleRecentTransaction(chainIdFinally, accountFinally, payload, response) - } - } catch (error) { - if (!(error instanceof Error)) return - callback(error, undefined) - if (payload.method === EthereumMethodType.ETH_SEND_TRANSACTION) { - handleNonce(chainIdFinally, accountFinally, error, undefined) - } - } -} diff --git a/packages/mask/src/extension/background-script/EthereumServices/web3.ts b/packages/mask/src/extension/background-script/EthereumServices/web3.ts deleted file mode 100644 index 7ac048b8e847..000000000000 --- a/packages/mask/src/extension/background-script/EthereumServices/web3.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { ProviderType } from '@masknet/web3-shared-evm' -import { unreachable } from '@dimensiondev/kit' -import * as MaskWallet from './providers/MaskWallet' -import * as MetaMask from './providers/MetaMask' -import * as WalletConnect from './providers/WalletConnect' -import * as Injected from './providers/Injected' -import * as Fortmatic from './providers/Fortmatic' -import { currentChainIdSettings, currentProviderSettings } from '../../../plugins/Wallet/settings' - -export async function createWeb3({ - chainId = currentChainIdSettings.value, - providerType = currentProviderSettings.value, - privKeys = [] as string[], -} = {}) { - switch (providerType) { - case ProviderType.MaskWallet: - return MaskWallet.createWeb3({ - chainId, - privKeys, - }) - case ProviderType.MetaMask: - return MetaMask.createWeb3() - case ProviderType.WalletConnect: - return WalletConnect.createWeb3({ - chainId, - }) - case ProviderType.Coin98: - case ProviderType.WalletLink: - case ProviderType.MathWallet: - return Injected.createWeb3() - case ProviderType.Fortmatic: - return Fortmatic.createWeb3() - case ProviderType.CustomNetwork: - throw new Error('To be implemented.') - default: - unreachable(providerType) - } -} diff --git a/packages/mask/src/extension/background-script/Jobs/StartPluginWorker.ts b/packages/mask/src/extension/background-script/Jobs/StartPluginWorker.ts index 20a108bdcfde..9ad270d96164 100644 --- a/packages/mask/src/extension/background-script/Jobs/StartPluginWorker.ts +++ b/packages/mask/src/extension/background-script/Jobs/StartPluginWorker.ts @@ -1,9 +1,6 @@ import { startPluginWorker, Plugin } from '@masknet/plugin-infra/background-worker' -import { createSubscriptionFromAsync } from '@masknet/shared-base' -import { InMemoryStorages, MaskMessages, PersistentStorages } from '../../../../shared' import { createPluginDatabase } from '../../../../background/database/plugin-db' -import { createPluginHost } from '../../../plugin-infra/host' -import { Services } from '../../service' +import { createPluginHost, createSharedContext } from '../../../plugin-infra/host' export default function (signal: AbortSignal) { startPluginWorker(createPluginHost(signal, createWorkerContext)) } @@ -11,22 +8,10 @@ export default function (signal: AbortSignal) { function createWorkerContext(pluginID: string, signal: AbortSignal): Plugin.Worker.WorkerContext { let storage: Plugin.Worker.DatabaseStorage = undefined! - const currentPersonaSub = createSubscriptionFromAsync( - Services.Settings.getCurrentPersonaIdentifier, - undefined, - MaskMessages.events.currentPersonaIdentifier.on, - signal, - ) return { + ...createSharedContext(pluginID, signal), getDatabaseStorage() { return storage || (storage = createPluginDatabase(pluginID, signal)) }, - createKVStorage(type, defaultValues) { - if (type === 'memory') return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal) - else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal) - }, - personaSign: Services.Identity.signWithPersona, - walletSign: Services.Ethereum.personalSign, - currentPersona: currentPersonaSub, } } diff --git a/packages/mask/src/extension/background-script/SettingsService.ts b/packages/mask/src/extension/background-script/SettingsService.ts index 384325828e4c..552e3ec153a4 100644 --- a/packages/mask/src/extension/background-script/SettingsService.ts +++ b/packages/mask/src/extension/background-script/SettingsService.ts @@ -8,18 +8,7 @@ import { currentPluginMinimalModeNOTEnabled, pluginIDSettings, } from '../../settings/settings' -import { currentDataProviderSettings } from '../../plugins/Trader/settings' -import { - currentAccountSettings, - currentNetworkSettings, - currentProviderSettings, - currentChainIdSettings, - currentFungibleAssetDataProviderSettings, - currentNonFungibleAssetDataProviderSettings, - currentGasOptionsSettings, - currentTokenPricesSettings, -} from '../../plugins/Wallet/settings' -import { Flags, MaskMessages } from '../../../shared' +import { MaskMessages } from '../../../shared' import { queryPersonasDB } from '../../../background/database/persona/db' export * from '../../../background/services/settings' @@ -38,28 +27,6 @@ function create(settings: InternalSettings) { export const [getPluginID, setPluginID] = create(pluginIDSettings) export const [getTheme, setTheme] = create(appearanceSettings) export const [getLanguage, setLanguage] = create(languageSettings) -export const [getChainId, setChainId] = create(currentChainIdSettings) -export const [getTokenPrices, setTokenPrices] = create(currentTokenPricesSettings) -export const [getGasOptions, setGasOptions] = create(currentGasOptionsSettings) -export const [getGasPrice, setGasPrice] = create(currentGasOptionsSettings) -export const [getTrendingDataSource, setTrendingDataSource] = create(currentDataProviderSettings) -export const [getCurrentSelectedWalletProvider, setCurrentSelectedWalletProvider] = create(currentProviderSettings) - -export const [getCurrentSelectedWalletNetwork, setCurrentSelectedWalletNetwork] = create(currentNetworkSettings) - -export const [getSelectedWalletAddress, setSelectedWalletAddress] = create(currentAccountSettings) - -export const [getCurrentPortfolioDataProvider, setCurrentPortfolioDataProvider] = create( - currentFungibleAssetDataProviderSettings, -) - -export const [getCurrentCollectibleDataProvider, setCurrentCollectibleDataProvider] = create( - currentNonFungibleAssetDataProviderSettings, -) - -export async function getWalletAllowTestChain() { - return Flags.wallet_allow_testnet -} export async function getCurrentPersonaIdentifier(): Promise { await currentPersonaIdentifier.readyPromise diff --git a/packages/mask/src/extension/dashboard/index.tsx b/packages/mask/src/extension/dashboard/index.tsx index 79aaec76e3bb..1305a375dec4 100644 --- a/packages/mask/src/extension/dashboard/index.tsx +++ b/packages/mask/src/extension/dashboard/index.tsx @@ -1,28 +1,28 @@ // @ts-ignore in case circle dependency make typescript complains import { setService, setPluginMessages, setMessages, setPluginServices, IntegratedDashboard } from '@masknet/dashboard' +import { startPluginDashboard } from '@masknet/plugin-infra/dashboard' import Services from '../service' import { WalletRPC, WalletMessages } from '../../plugins/Wallet/messages' -import { PluginTransakMessages } from '../../plugins/Transak/messages' -import { PluginTraderMessages, PluginTraderRPC } from '../../plugins/Trader/messages' -import { PluginPetMessages } from '../../plugins/Pets/messages' +// import { PluginTransakMessages } from '../../plugins/Transak/messages' +// import { PluginTraderMessages, PluginTraderRPC } from '../../plugins/Trader/messages' +// import { PluginPetMessages } from '../../plugins/Pets/messages' import { MaskMessages } from '../../utils/messages' -import { startPluginDashboard } from '@masknet/plugin-infra/dashboard' -import { createPluginHost } from '../../plugin-infra/host' +import { createPluginHost, createSharedContext } from '../../plugin-infra/host' import type { DashboardPluginMessages, DashboardPluginServices } from '@masknet/shared' import { createNormalReactRoot } from '../../utils/createNormalReactRoot' -import { InMemoryStorages, PersistentStorages } from '../../../shared/kv-storage' import { status } from '../../setup.ui' -import { createSubscriptionFromAsync } from '@masknet/shared-base' +import { PluginTransakMessages } from '../../plugins/Transak/messages' +import { PluginTraderMessages } from '../../plugins/Trader/messages' const msg: DashboardPluginMessages = { Wallet: WalletMessages, Swap: PluginTraderMessages, Transak: PluginTransakMessages, - Pets: PluginPetMessages, + // Pets: PluginPetMessages, } const rpc: DashboardPluginServices = { Wallet: WalletRPC, - Swap: PluginTraderRPC, + // Swap: PluginTraderRPC, } // @ts-ignore To avoid build failure due to the circular project reference setService(Services) @@ -32,23 +32,5 @@ setMessages(MaskMessages) setPluginServices(rpc) // @ts-ignore setPluginMessages(msg) -startPluginDashboard( - createPluginHost(undefined, (pluginID, signal) => { - const currentPersonaSub = createSubscriptionFromAsync( - Services.Settings.getCurrentPersonaIdentifier, - undefined, - MaskMessages.events.currentPersonaIdentifier.on, - signal, - ) - return { - createKVStorage(type, defaultValues) { - if (type === 'memory') return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal) - else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal) - }, - personaSign: Services.Identity.signWithPersona, - walletSign: Services.Ethereum.personalSign, - currentPersona: currentPersonaSub, - } - }), -) +startPluginDashboard(createPluginHost(undefined, createSharedContext)) status.then(() => createNormalReactRoot()) diff --git a/packages/mask/src/extension/options-page/DashboardComponents/ActionsBarNFT.tsx b/packages/mask/src/extension/options-page/DashboardComponents/ActionsBarNFT.tsx index c3dae3f12d68..b99f0123ef89 100644 --- a/packages/mask/src/extension/options-page/DashboardComponents/ActionsBarNFT.tsx +++ b/packages/mask/src/extension/options-page/DashboardComponents/ActionsBarNFT.tsx @@ -2,10 +2,12 @@ import { useCallback } from 'react' import { IconButton, MenuItem } from '@mui/material' import { makeStyles, useStylesExtends } from '@masknet/theme' import MoreHorizIcon from '@mui/icons-material/MoreHoriz' -import { Wallet, ERC721TokenDetailed, EthereumTokenType, useChainIdValid } from '@masknet/web3-shared-evm' +import { Wallet, SchemaType, ChainId } from '@masknet/web3-shared-evm' import { useMenu, useI18N } from '../../../utils' import { useModal } from '../DashboardDialogs/Base' import { DashboardWalletHideTokenConfirmDialog, DashboardWalletTransferDialogNFT } from '../DashboardDialogs/Wallet' +import { useChainIdValid } from '@masknet/plugin-infra/web3' +import type { NonFungibleToken } from '@masknet/web3-shared-base' const useStyles = makeStyles()((theme) => ({ more: { @@ -15,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({ export interface ActionsBarNFT_Props extends withClasses<'more'> { wallet: Wallet - token: ERC721TokenDetailed + token: NonFungibleToken } export function ActionsBarNFT(props: ActionsBarNFT_Props) { @@ -29,7 +31,7 @@ export function ActionsBarNFT(props: ActionsBarNFT_Props) { const [transferDialog, , openTransferDialogOpen] = useModal(DashboardWalletTransferDialogNFT) const [hideTokenConfirmDialog, , openHideTokenConfirmDialog] = useModal(DashboardWalletHideTokenConfirmDialog) const [menu, openMenu] = useMenu([ - token.contractDetailed.type === EthereumTokenType.ERC721 ? ( + token.schema === SchemaType.ERC721 ? ( openTransferDialogOpen({ token })}> {t('transfer')} diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx index 904b03e508ea..41bbf9ac37f7 100644 --- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx +++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx @@ -1,8 +1,9 @@ import { Card, Link, useTheme } from '@mui/material' import { makeStyles } from '@masknet/theme' -import { Wallet, ERC721TokenDetailed, resolveCollectibleLink, NonFungibleAssetProvider } from '@masknet/web3-shared-evm' +import type { Wallet, NonFungibleAssetProvider, ChainId, SchemaType } from '@masknet/web3-shared-evm' import { NFTCardStyledAssetPlayer } from '@masknet/shared' import { ActionsBarNFT } from '../ActionsBarNFT' +import type { NonFungibleToken } from '@masknet/web3-shared-base' const useStyles = makeStyles()((theme) => ({ root: { @@ -56,7 +57,7 @@ const useStyles = makeStyles()((theme) => ({ export interface CollectibleCardProps { provider: NonFungibleAssetProvider wallet?: Wallet - token: ERC721TokenDetailed + token: NonFungibleToken readonly?: boolean renderOrder: number } @@ -66,20 +67,16 @@ export function CollectibleCard(props: CollectibleCardProps) { const { classes } = useStyles() const theme = useTheme() return ( - +
{readonly || !wallet ? null : ( )} ({ collectionWrap: { @@ -33,7 +33,7 @@ const useStyles = makeStyles()((theme) => ({ interface CollectionIconProps { selectedCollection?: string - collection?: ERC721ContractDetailed + collection?: NonFungibleToken onClick?(): void } @@ -49,7 +49,7 @@ export const CollectionIcon = memo(({ collection, onClick, PopperProps={{ disablePortal: true, }} - title={collection.name} + title={collection.metadata?.name ?? ''} arrow> (({ collection, onClick, isSameAddress(collection.address, selectedCollection) ? classes.selected : '', )} onClick={onClick}> - {collection.iconURL ? ( + {collection.collection?.iconURL ? ( ) : ( )} diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx index 5ce0d2948847..c866f0fcd77b 100644 --- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx +++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx @@ -1,27 +1,15 @@ -import { createContext, useEffect, useMemo, useState } from 'react' -import { useValueRef } from '@masknet/shared-base-ui' -import { - AddressName, - ChainId, - ERC721ContractDetailed, - ERC721TokenDetailed, - isSameAddress, - NonFungibleAssetProvider, - SocketState, - useCollectibles, - useCollections, - Wallet, -} from '@masknet/web3-shared-evm' -import { Box, Button, Skeleton, Stack, styled, Typography } from '@mui/material' -import { makeStyles, useStylesExtends } from '@masknet/theme' -import { currentNonFungibleAssetDataProviderSettings } from '../../../../plugins/Wallet/settings' -import { useI18N } from '../../../../utils' +import { createContext } from 'react' +import type { IdentityAddress, NonFungibleAsset } from '@masknet/web3-shared-base' +import type { ChainId, NonFungibleAssetProvider, SchemaType, Wallet } from '@masknet/web3-shared-evm' +import { Button, styled, Typography } from '@mui/material' +import { makeStyles } from '@masknet/theme' import { CollectibleCard } from './CollectibleCard' -import { WalletMessages } from '@masknet/plugin-wallet' -import { CollectionIcon } from './CollectionIcon' -import { uniqBy } from 'lodash-unified' -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' -import { ReversedAddress } from '@masknet/shared' +// import { useI18N } from '../../../../utils' +// import { CollectionIcon } from './CollectionIcon' +// import { uniqBy } from 'lodash-unified' +// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown' +// import { ReversedAddress } from '@masknet/shared' +// import { useNonFungibleAssets } from '@masknet/plugin-infra/web3' export const CollectibleContext = createContext<{ collectiblesRetry: () => void @@ -115,7 +103,7 @@ const useStyles = makeStyles()((theme) => ({ interface CollectibleItemProps { provider: NonFungibleAssetProvider wallet?: Wallet - token: ERC721TokenDetailed + token: NonFungibleAsset readonly?: boolean renderOrder: number } @@ -134,7 +122,7 @@ function CollectibleItem(props: CollectibleItemProps) { />
- {token.info.name} + {token.metadata?.name}
@@ -144,7 +132,7 @@ function CollectibleItem(props: CollectibleItemProps) { interface CollectibleListUIProps extends withClasses<'empty' | 'button' | 'text'> { provider: NonFungibleAssetProvider wallet?: Wallet - collectibles: ERC721TokenDetailed[] + collectibles: Array> loading: boolean collectiblesRetry: () => void error: string | undefined @@ -152,268 +140,277 @@ interface CollectibleListUIProps extends withClasses<'empty' | 'button' | 'text' hasRetry?: boolean } function CollectibleListUI(props: CollectibleListUIProps) { - const { provider, wallet, collectibles, loading, collectiblesRetry, error, readonly, hasRetry = true } = props - const { t } = useI18N() - const classes = useStylesExtends(useStyles(), props) + return null + // const { provider, wallet, collectibles, loading, collectiblesRetry, error, readonly, hasRetry = true } = props + // const { t } = useI18N() + // const classes = useStylesExtends(useStyles(), props) - useEffect(() => WalletMessages.events.erc721TokensUpdated.on(collectiblesRetry)) + // // useEffect(() => WalletMessages.events.erc721TokensUpdated.on(collectiblesRetry)) - return ( - - - {loading && ( - - {Array.from({ length: 3 }) - .fill(0) - .map((_, i) => ( - - - - - ))} - - )} - {error || (collectibles.length === 0 && !loading) ? ( - - {t('dashboard_no_collectible_found')} - {hasRetry ? ( - - ) : null} - - ) : ( - - {collectibles.map((token, index) => ( - - ))} - - )} - - - ) + // return ( + // + // + // {loading && ( + // + // {Array.from({ length: 3 }) + // .fill(0) + // .map((_, i) => ( + // + // + // + // + // ))} + // + // )} + // {error || (collectibles.length === 0 && !loading) ? ( + // + // {t('dashboard_no_collectible_found')} + // {hasRetry ? ( + // + // ) : null} + // + // ) : ( + // + // {collectibles.map((token, index) => ( + // + // ))} + // + // )} + // + // + // ) } export interface CollectibleListProps extends withClasses<'empty' | 'button'> { address: string - collectibles: ERC721TokenDetailed[] + collectibles: Array> error?: string loading: boolean retry(): void } export function CollectibleList(props: CollectibleListProps) { - const { address, collectibles, error, loading, retry } = props - const provider = useValueRef(currentNonFungibleAssetDataProviderSettings) - const classes = props.classes ?? {} + return null + // const { address, collectibles, error, loading, retry } = props + // const classes = props.classes ?? {} - return ( - - ) + // return ( + // + // ) } export function CollectionList({ addressName, onSelectAddress, }: { - addressName: AddressName + addressName: IdentityAddress onSelectAddress: (event: React.MouseEvent) => void }) { - const chainId = ChainId.Mainnet - const { t } = useI18N() - const { classes } = useStyles() - const [selectedCollection, setSelectedCollection] = useState('all') - const { resolvedAddress: address } = addressName + return null + // const chainId = ChainId.Mainnet + // const { t } = useI18N() + // const { classes } = useStyles() + // const [selectedCollection, setSelectedCollection] = useState< + // NonFungibleAsset | 'all' | undefined + // >('all') + // const { address } = addressName - useEffect(() => { - setSelectedCollection('all') - }, [address]) + // useEffect(() => { + // setSelectedCollection('all') + // }, [address]) - const { data: collectionsFormRemote } = useCollections(address, chainId) - const { - data: collectibles, - state: loadingCollectibleDone, - retry: retryFetchCollectible, - } = useCollectibles(address, chainId) + // const { value: collectionsFormRemote } = useNonFungibleAssets(NetworkPluginID.PLUGIN_EVM, SchemaType.ERC721, { + // account: address, + // }) + // const { + // value: collectibles, + // state: loadingCollectibleDone, + // retry: retryFetchCollectible, + // } = useNonFungibleAssets(NetworkPluginID.PLUGIN_EVM, address, chainId) - const isLoading = loadingCollectibleDone !== SocketState.done + // const isLoading = loadingCollectibleDone !== SocketState.done - const renderWithRarible = useMemo(() => { - if (isLoading) return [] - return collectibles.filter((item) => !item.collection) - }, [collectibles?.length]) + // const renderWithRarible = useMemo(() => { + // if (isLoading) return [] + // return collectibles.filter((item) => !item.collection) + // }, [collectibles?.length]) - const renderCollectibles = useMemo(() => { - if (selectedCollection === 'all') return collectibles - if (!selectedCollection) return collectibles.filter((x) => !x.collection) + // const renderCollectibles = useMemo(() => { + // if (selectedCollection === 'all') return collectibles + // if (!selectedCollection) return collectibles.filter((x) => !x.collection) - return (collectibles ?? []).filter((x) => { - return isSameAddress(selectedCollection.address, x.contractDetailed.address) - }) - }, [selectedCollection, collectibles.length]) + // return (collectibles ?? []).filter((x) => { + // return isSameAddress(selectedCollection.address, x.contractDetailed.address) + // }) + // }, [selectedCollection, collectibles.length]) - const collections = useMemo(() => { - return uniqBy( - collectibles.map((x) => x.contractDetailed), - (x) => x.address.toLowerCase(), - ).map((x) => { - const item = collectionsFormRemote.find((c) => isSameAddress(c.address, x.address)) - if (item) { - return { - name: item.name, - symbol: item.name, - baseURI: item.iconURL, - iconURL: item.iconURL, - address: item.address, - } as ERC721ContractDetailed - } - return x - }) - }, [collectibles.length, collectionsFormRemote.length]) + // const collections = useMemo(() => { + // return uniqBy( + // collectibles.map((x) => x.contractDetailed), + // (x) => x.address.toLowerCase(), + // ).map((x) => { + // const item = collectionsFormRemote.find((c) => isSameAddress(c.address, x.address)) + // if (item) { + // return { + // id: item.address, + // chainId: ChainId.Mainnet, + // schema: SchemaType.ERC721, + // name: item.name, + // symbol: item.name, + // logoURL: item.iconURL, + // address: item.address, + // } as NonFungibleTokenContract + // } + // return x + // }) + // }, [collectibles.length, collectionsFormRemote.length]) - if (!isLoading && !collectibles.length) - return ( - <> - {addressName && ( - - - - - - )} - - - {t('dashboard_no_collectible_found')} - - - - ) + // if (!isLoading && !collectibles.length) + // return ( + // <> + // {addressName && ( + // + // + // + // + // + // )} + // + // + // {t('dashboard_no_collectible_found')} + // + // + // + // ) - return ( - - - - setSelectedCollection('all')}> - ALL - - theme.palette.primary.main} fontSize="12px"> - {t('dashboard_collectible_menu_all', { - count: collectibles.length, - })} - - - - - - - - - - {!selectedCollection && selectedCollection !== 'all' && ( - - - Other - {loadingCollectibleDone && renderCollectibles.length - ? `(${renderCollectibles.length})` - : null} - - - )} - {selectedCollection && selectedCollection !== 'all' && ( - - - - {selectedCollection.name} - {loadingCollectibleDone && renderCollectibles.length - ? `(${renderCollectibles.length})` - : null} - - - )} - - - - - {collections.map((x, i) => { - return ( - - setSelectedCollection(x)} - /> - - ) - })} - {!!renderWithRarible.length && ( - - setSelectedCollection(undefined)} - /> - - )} - - - - ) + // return ( + // + // + // + // setSelectedCollection('all')}> + // ALL + // + // theme.palette.primary.main} fontSize="12px"> + // {t('dashboard_collectible_menu_all', { + // count: collectibles.length, + // })} + // + // + // + // + // + // + // + // + // + // {!selectedCollection && selectedCollection !== 'all' && ( + // + // + // Other + // {loadingCollectibleDone && renderCollectibles.length + // ? `(${renderCollectibles.length})` + // : null} + // + // + // )} + // {selectedCollection && selectedCollection !== 'all' && ( + // + // + // + // {selectedCollection.metadata?.name} + // {loadingCollectibleDone && renderCollectibles.length + // ? `(${renderCollectibles.length})` + // : null} + // + // + // )} + // + // + // + // + // {collections.map((x, i) => { + // return ( + // + // setSelectedCollection(x)} + // /> + // + // ) + // })} + // {!!renderWithRarible.length && ( + // + // setSelectedCollection(undefined)} + // /> + // + // )} + // + // + // + // ) } diff --git a/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/HideTokenConfirm.tsx b/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/HideTokenConfirm.tsx index 38a48bd74250..b6776c6e93a2 100644 --- a/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/HideTokenConfirm.tsx +++ b/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/HideTokenConfirm.tsx @@ -1,49 +1,53 @@ import { Trash2 as TrashIcon } from 'react-feather' import { Button, Box, BoxProps } from '@mui/material' -import { unreachable } from '@dimensiondev/kit' -import { - ERC20TokenDetailed, - ERC721TokenDetailed, - EthereumTokenType, - FungibleTokenDetailed, - isNativeTokenAddress, -} from '@masknet/web3-shared-evm' +import { SchemaType, isNativeTokenAddress, ChainId } from '@masknet/web3-shared-evm' import { useSnackbarCallback } from '@masknet/shared' -import { WalletRPC } from '../../../../plugins/Wallet/messages' import { useI18N } from '../../../../utils' import { DebounceButton } from '../../DashboardComponents/ActionButton' import { DashboardDialogCore, DashboardDialogWrapper, WrappedDialogProps } from '../Base' import type { Wallet } from '@masknet/web3-shared-evm' import { makeStyles } from '@masknet/theme' import classNames from 'classnames' +import type { FungibleToken, NonFungibleToken } from '@masknet/web3-shared-base' export function DashboardWalletHideTokenConfirmDialog( - props: WrappedDialogProps<{ wallet: Wallet; token: FungibleTokenDetailed | ERC721TokenDetailed }>, + props: WrappedDialogProps<{ + wallet: Wallet + token: FungibleToken | NonFungibleToken + }>, ) { const { wallet, token } = props.ComponentProps! const { t } = useI18N() const tokenAddress = - (token as FungibleTokenDetailed).address ?? (token as ERC721TokenDetailed).contractDetailed.address - const tokenName = (token as FungibleTokenDetailed).name ?? (token as ERC721TokenDetailed).info.name + (token as FungibleToken).address ?? + (token as NonFungibleToken).contract?.address + const tokenName = + (token as FungibleToken).name ?? + (token as NonFungibleToken).metadata?.name const onConfirm = useSnackbarCallback( - () => { - const type = ((token as FungibleTokenDetailed).type ?? - (token as ERC721TokenDetailed).contractDetailed.type) as - | EthereumTokenType.Native - | EthereumTokenType.ERC20 - | EthereumTokenType.ERC721 - switch (type) { - case EthereumTokenType.Native: - throw new Error('Unable to hide the native token.') - case EthereumTokenType.ERC20: - return WalletRPC.updateWalletToken(wallet.address, token as ERC20TokenDetailed, { - strategy: 'block', - }) - case EthereumTokenType.ERC721: - return WalletRPC.removeToken(token as ERC721TokenDetailed) - default: - unreachable(type) - } + async () => { + return + // const schema = ((token as FungibleToken).schema ?? + // (token as NonFungibleToken).schema) as + // | SchemaType.Native + // | SchemaType.ERC20 + // | SchemaType.ERC721 + // switch (schema) { + // case SchemaType.Native: + // throw new Error('Unable to hide the native token.') + // case SchemaType.ERC20: + // return WalletRPC.updateWalletToken( + // wallet.address, + // token as FungibleToken, + // { + // strategy: 'block', + // }, + // ) + // case SchemaType.ERC721: + // return WalletRPC.removeToken(token as NonFungibleToken) + // default: + // unreachable(schema) + // } }, [wallet.address, token], props.onClose, diff --git a/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/TransferNFT.tsx b/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/TransferNFT.tsx index f6983243d16a..bd504b825864 100644 --- a/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/TransferNFT.tsx +++ b/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/TransferNFT.tsx @@ -1,14 +1,16 @@ -import { useOpenShareTxDialog } from '@masknet/shared' -import { makeStyles } from '@masknet/theme' -import { ERC721TokenDetailed, useTokenTransferCallback } from '@masknet/web3-shared-evm' import { Button, TextField } from '@mui/material' +import { makeStyles } from '@masknet/theme' import { useCallback, useContext, useMemo, useState } from 'react' import { EthereumAddress } from 'wallet.ts' +import type { ChainId, SchemaType } from '@masknet/web3-shared-evm' +import { useI18N } from '../../../../utils' import { Image } from '../../../../components/shared/Image' import { MaskIconOutlined } from '../../../../resources/MaskIcon' -import { useI18N } from '../../../../utils' import { CollectibleContext } from '../../DashboardComponents/CollectibleList' import { DashboardDialogCore, DashboardDialogWrapper, WrappedDialogProps } from '../Base' +import type { NonFungibleToken } from '@masknet/web3-shared-base' +import { useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm' +import { useOpenShareTxDialog } from '@masknet/shared' const useTransferDialogStylesNFT = makeStyles()((theme) => ({ root: { @@ -24,7 +26,9 @@ const useTransferDialogStylesNFT = makeStyles()((theme) => ({ }, })) -export function DashboardWalletTransferDialogNFT(props: WrappedDialogProps<{ token: ERC721TokenDetailed }>) { +export function DashboardWalletTransferDialogNFT( + props: WrappedDialogProps<{ token: NonFungibleToken }>, +) { const { token } = props.ComponentProps! const { onClose } = props @@ -35,10 +39,7 @@ export function DashboardWalletTransferDialogNFT(props: WrappedDialogProps<{ tok const { collectiblesRetry } = useContext(CollectibleContext) // #region transfer tokens - const [{ loading }, transferCallback] = useTokenTransferCallback( - token.contractDetailed.type, - token.contractDetailed.address, - ) + const [{ loading }, transferCallback] = useTokenTransferCallback(token.schema, token.address) const openShareTxDialog = useOpenShareTxDialog() const onTransfer = useCallback(async () => { @@ -66,13 +67,13 @@ export function DashboardWalletTransferDialogNFT(props: WrappedDialogProps<{ tok ) : ( diff --git a/packages/mask/src/extension/popups/UI.tsx b/packages/mask/src/extension/popups/UI.tsx index 72f0d9e9b5ad..56cbec3aa866 100644 --- a/packages/mask/src/extension/popups/UI.tsx +++ b/packages/mask/src/extension/popups/UI.tsx @@ -5,8 +5,6 @@ import { PopupRoutes } from '@masknet/shared-base' import { usePopupFullPageTheme } from '../../utils/theme/useClassicMaskFullPageTheme' import '../../social-network-adaptor/browser-action' import { PopupContext } from './hook/usePopupContext' -import { Web3Provider } from '@masknet/web3-shared-evm' -import { PopupWeb3Context } from '../../web3/context' import { PopupFrame } from './components/PopupFrame' import { MaskUIRoot } from '../../UIRoot' import { PageTitleContext } from './context' @@ -31,31 +29,29 @@ export default function Popups() { return ( - - - - - - )} /> - )} /> - } /> - } /> - } - /> - } - /> - } /> - - {/* TODO: Should only load plugins when the page is plugin-aware. */} - - - - - + + + + + )} /> + )} /> + } /> + } /> + } + /> + } + /> + } /> + + {/* TODO: Should only load plugins when the page is plugin-aware. */} + + + + ) diff --git a/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx b/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx index 61f2aa5dfe41..90c6d22eea49 100644 --- a/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx +++ b/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx @@ -2,13 +2,20 @@ import { memo, useCallback } from 'react' import { Box, MenuItem, Typography } from '@mui/material' import { makeStyles } from '@masknet/theme' import { Flags } from '../../../../../shared' -import { ChainId, ProviderType, useAccount, useChainId } from '@masknet/web3-shared-evm' -import { getRegisteredWeb3Networks, NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra/web3' -import { currentMaskWalletAccountSettings, currentProviderSettings } from '../../../../plugins/Wallet/settings' +import { ChainId, ProviderType, NetworkType } from '@masknet/web3-shared-evm' +import { + getRegisteredWeb3Networks, + useAccount, + useChainId, + Web3Helper, + useWeb3State, + useProviderType, +} from '@masknet/plugin-infra/web3' +import { currentMaskWalletAccountSettings } from '../../../../plugins/Wallet/settings' import { ChainIcon, useMenuConfig, WalletIcon } from '@masknet/shared' -import { useValueRef } from '@masknet/shared-base-ui' import { ArrowDownRound } from '@masknet/icons' import { WalletRPC } from '../../../../plugins/Wallet/messages' +import { NetworkDescriptor, NetworkPluginID } from '@masknet/web3-shared-base' const useStyles = makeStyles()((theme) => ({ root: { @@ -50,16 +57,18 @@ const useStyles = makeStyles()((theme) => ({ })) export const NetworkSelector = memo(() => { - const networks = getRegisteredWeb3Networks() - const account = useAccount() - const chainId = useChainId() - const providerType = useValueRef(currentProviderSettings) + const networks = getRegisteredWeb3Networks().filter( + (x) => x.networkSupporterPluginID === NetworkPluginID.PLUGIN_EVM, + ) as Array> + + const web3State = useWeb3State(NetworkPluginID.PLUGIN_EVM) + const account = useAccount(NetworkPluginID.PLUGIN_EVM) + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + const providerType = useProviderType(NetworkPluginID.PLUGIN_EVM) const onChainChange = useCallback( - async (chainId: ChainId) => { + async (chainId: Web3Helper.Definition[NetworkPluginID.PLUGIN_EVM]['ChainId']) => { if (providerType === ProviderType.MaskWallet) { - await WalletRPC.updateAccount({ - chainId, - }) + await web3State.Provider?.connect(chainId, ProviderType.MaskWallet) } return WalletRPC.updateMaskAccount({ chainId, @@ -79,14 +88,13 @@ export const NetworkSelector = memo(() => { }) export interface NetworkSelectorUIProps { - currentNetwork: Web3Plugin.NetworkDescriptor - networks: Web3Plugin.NetworkDescriptor[] + currentNetwork: NetworkDescriptor + networks: Array> onChainChange: (chainId: ChainId) => void } -export const NetworkSelectorUI = memo(({ currentNetwork, onChainChange }) => { +export const NetworkSelectorUI = memo(({ currentNetwork, onChainChange, networks }) => { const { classes } = useStyles() - const networks = getRegisteredWeb3Networks() const [menu, openMenu] = useMenuConfig( networks diff --git a/packages/mask/src/extension/popups/components/WalletStateBar/index.tsx b/packages/mask/src/extension/popups/components/WalletStateBar/index.tsx index a6defa097ebf..166c85d84856 100644 --- a/packages/mask/src/extension/popups/components/WalletStateBar/index.tsx +++ b/packages/mask/src/extension/popups/components/WalletStateBar/index.tsx @@ -2,10 +2,11 @@ import { FC, memo } from 'react' import { LoadingIcon } from '@masknet/icons' import { FormattedAddress, WalletIcon } from '@masknet/shared' import { makeStyles } from '@masknet/theme' -import { NetworkPluginID, useProviderDescriptor, useWeb3State } from '@masknet/plugin-infra/web3' +import { useProviderDescriptor, useWeb3State } from '@masknet/plugin-infra/web3' import { formatEthereumAddress, ProviderType } from '@masknet/web3-shared-evm' +import { NetworkPluginID } from '@masknet/web3-shared-base' import { Box, Stack, StackProps, Typography } from '@mui/material' -import { NetworkSelector } from '../../components/NetworkSelector' +import { NetworkSelector } from '../NetworkSelector' import { useI18N } from '../../../../utils' const useStyles = makeStyles()((theme) => ({ @@ -40,8 +41,8 @@ export const WalletStateBarUI: FC = memo( ({ isPending, walletAddress, walletName, openConnectWalletDialog, children, domain, ...rest }) => { const { t } = useI18N() const { classes } = useStyles() - const { Utils } = useWeb3State() - const providerDescriptor = useProviderDescriptor(ProviderType.MaskWallet, NetworkPluginID.PLUGIN_EVM) + const { Others } = useWeb3State() + const providerDescriptor = useProviderDescriptor(NetworkPluginID.PLUGIN_EVM, ProviderType.MaskWallet) if (!providerDescriptor) return null @@ -72,7 +73,7 @@ export const WalletStateBarUI: FC = memo( {walletName ?? '-'} {domain ? ( - {Utils?.formatDomainName?.(domain)} + {Others?.formatDomainName?.(domain)} ) : null} diff --git a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/UI.tsx b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/UI.tsx index 8e532097d390..59c2d0bab29d 100644 --- a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/UI.tsx +++ b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/UI.tsx @@ -1,7 +1,7 @@ import { memo, useCallback, useState } from 'react' import { makeStyles } from '@masknet/theme' -import { ChainId, formatEthereumAddress, resolveAddressLinkOnExplorer } from '@masknet/web3-shared-evm' -import { NetworkPluginID, useNetworkDescriptor } from '@masknet/plugin-infra/web3' +import { ChainId, explorerResolver, formatEthereumAddress } from '@masknet/web3-shared-evm' +import { useNetworkDescriptor } from '@masknet/plugin-infra/web3' import { FormattedAddress, ImageIcon } from '@masknet/shared' import { Button, Link, Typography } from '@mui/material' import { CopyIconButton } from '../../../components/CopyIconButton' @@ -9,6 +9,7 @@ import { CircleLoadingIcon, DeleteIcon, EmptyIcon, PopupLinkIcon } from '@maskne import type { ConnectedWalletInfo } from '../type' import { DisconnectWalletDialog } from '../components/DisconnectWalletDialog' import { useI18N } from '../../../../../utils' +import { NetworkPluginID } from '@masknet/web3-shared-base' const useStyles = makeStyles()(() => ({ container: { @@ -122,7 +123,7 @@ export const ConnectedWalletsUI = memo( }, []) // TODO: remove this after next dot id support multiple chain - const networkDescriptor = useNetworkDescriptor(ChainId.Mainnet, NetworkPluginID.PLUGIN_EVM) + const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM, ChainId.Mainnet) if (loading) return ( @@ -152,7 +153,7 @@ export const ConnectedWalletsUI = memo( diff --git a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx index c7ecbc8a9e26..e3bb5ab38390 100644 --- a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx +++ b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx @@ -3,8 +3,8 @@ import { useTitle } from '../../../hook/useTitle' import { useI18N } from '../../../../../utils' import { ConnectedWalletsUI } from './UI' import { PersonaContext } from '../hooks/usePersonaContext' -import { NetworkPluginID, useChainId, useWallets, useWeb3State } from '@masknet/plugin-infra/web3' -import { isSameAddress } from '@masknet/web3-shared-evm' +import { useChainId, useWallets, useWeb3State } from '@masknet/plugin-infra/web3' +import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base' import { NextIDAction, NextIDPlatform, PopupRoutes } from '@masknet/shared-base' import { useAsync, useAsyncFn } from 'react-use' import { compact, sortBy } from 'lodash-unified' @@ -16,7 +16,7 @@ import { useLocation, useNavigate } from 'react-router-dom' const ConnectedWallets = memo(() => { const { t } = useI18N() - const chainId = useChainId() + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const { NameService } = useWeb3State(NetworkPluginID.PLUGIN_EVM) const wallets = useWallets() const navigate = useNavigate() @@ -32,7 +32,7 @@ const ConnectedWallets = memo(() => { const results = await Promise.all( proofs.map(async (x, index) => { if (x.platform === NextIDPlatform.Ethereum) { - const domain = await NameService?.reverse?.(x.identity) + const domain = await NameService?.reverse?.(chainId, x.identity) if (domain) return { @@ -68,7 +68,7 @@ const ConnectedWallets = memo(() => { return x }) .reverse() - }, [wallets, NameService, proofs]) + }, [wallets, NameService, proofs, chainId]) const [confirmState, onConfirmRelease] = useAsyncFn( async (wallet?: ConnectedWalletInfo) => { diff --git a/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx b/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx index 43bc7b3a90a3..0014cd2b9eaf 100644 --- a/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx +++ b/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx @@ -1,19 +1,11 @@ +import urlcat from 'urlcat' import { memo, useEffect, useMemo } from 'react' import { useAsync, useAsyncFn, useLocation } from 'react-use' import { useNavigate } from 'react-router-dom' import { EMPTY_LIST, NextIDAction, NextIDPlatform, PopupRoutes } from '@masknet/shared-base' import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme' import { NextIDProof } from '@masknet/web3-providers' -import { - ChainId, - EthereumRpcType, - isSameAddress, - NetworkType, - ProviderType, - resolveProviderName, - useWallets, -} from '@masknet/web3-shared-evm' -import type { Web3Plugin } from '@masknet/plugin-infra/dist/web3-types' +import { ChainId, providerResolver, ProviderType } from '@masknet/web3-shared-evm' import { SignSteps, Steps } from '../../../../../components/shared/VerifyWallet/Steps' import Services from '../../../../service' import { PersonaContext } from '../hooks/usePersonaContext' @@ -21,8 +13,8 @@ import { useTitle } from '../../../hook/useTitle' import { useI18N } from '../../../../../utils' import { useUnconfirmedRequest } from '../../Wallet/hooks/useUnConfirmedRequest' import { PopupContext } from '../../../hook/usePopupContext' -import urlcat from 'urlcat' -import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3' +import { Account, isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base' +import { useReverseAddress, useWallets, useWeb3Connection, useWeb3State } from '@masknet/plugin-infra/web3' const useStyles = makeStyles()((theme) => ({ container: { @@ -40,13 +32,18 @@ const VerifyWallet = memo(() => { const { signed, setSigned } = PopupContext.useContainer() const navigate = useNavigate() const location = useLocation() + + const wallet: Account & { + providerType: ProviderType + address?: string + } = location.state.usr + const { showSnackbar } = usePopupCustomSnackbar() const { value: request } = useUnconfirmedRequest() - const wallet: Web3Plugin.ConnectionResult = location.state.usr - const { value: domain } = useReverseAddress(wallet.account) - const { Utils } = useWeb3State() ?? {} - const wallets = useWallets() - + const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM) + const wallets = useWallets(NetworkPluginID.PLUGIN_EVM) + const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM) + const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet?.account) const { value: bounds } = useAsync(async () => { if (!wallet.account) return EMPTY_LIST return NextIDProof.queryExistedBindingByPlatform(NextIDPlatform.Ethereum, wallet.account) @@ -64,13 +61,14 @@ const VerifyWallet = memo(() => { }, [bounds]) const walletName = () => { - if (domain && Utils?.formatDomainName) return Utils.formatDomainName(domain) - if (wallet.providerType !== ProviderType.MaskWallet) return `${resolveProviderName(wallet.providerType)} Wallet` + if (domain && Others?.formatDomainName) return Others.formatDomainName(domain) + if (wallet.providerType !== ProviderType.MaskWallet) + return `${providerResolver.providerName(wallet.providerType)} Wallet` return wallets.find((x) => isSameAddress(x.address, wallet.account))?.name ?? 'Wallet' } useEffect(() => { - if (request?.computedPayload?.type !== EthereumRpcType.SIGN) return + // if (request?.computedPayload?.type !== EthereumRpcType.SIGN) return navigate(urlcat(PopupRoutes.WalletSignRequest, { goBack: true }), { state: wallet, @@ -107,19 +105,14 @@ const VerifyWallet = memo(() => { const [{ value: walletSignState }, walletSign] = useAsyncFn(async () => { if (!payload || !currentPersona?.identifier.publicKeyAsHex) return false try { - const walletSig = await Services.Ethereum.personalSign( - payload.signPayload, - wallet.account, - '', - { - chainId: wallet.chainId, - account: wallet.account, - providerType: wallet.providerType, - }, - { popupsWindow: false }, - ) + const walletSignature = await connection?.signMessage(payload.signPayload, 'personaSign', { + chainId: wallet.chainId, + account: wallet.account, + providerType: wallet.providerType, + popupsWindow: false, + }) - if (!walletSig) throw new Error('Wallet sign failed') + if (!walletSignature) throw new Error('Wallet sign failed') await NextIDProof.bindProof( payload.uuid, currentPersona.identifier.publicKeyAsHex, @@ -128,7 +121,7 @@ const VerifyWallet = memo(() => { wallet.account, payload.createdAt, { - walletSignature: walletSig, + walletSignature, signature, }, ) @@ -140,10 +133,10 @@ const VerifyWallet = memo(() => { showSnackbar(t('popups_verify_wallet_sign_failed'), { variant: 'error' }) return false } - }, [currentPersona?.identifier.publicKeyAsHex, payload, wallet, signature]) + }, [currentPersona?.identifier.publicKeyAsHex, payload, wallet, signature, connection]) const changeWallet = () => { - navigate(urlcat(PopupRoutes.ConnectWallet, { goBack: true })) + navigate(PopupRoutes.ConnectWallet) } const [{ loading: confirmLoading, value: step = SignSteps.Ready }, handleConfirm] = useAsyncFn(async () => { diff --git a/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx b/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx index 4cc50f93e4d0..d4a0a4b932bd 100644 --- a/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx +++ b/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx @@ -1,15 +1,16 @@ -import { useChainId } from '@masknet/web3-shared-evm' +import { useChainId } from '@masknet/plugin-infra/web3' import { useMemo } from 'react' import { useNavigate, useLocation } from 'react-router-dom' import { useUpdateEffect } from 'react-use' import { Trader } from '../../../../../plugins/Trader/SNSAdaptor/trader/Trader' import type { Coin } from '../../../../../plugins/Trader/types' import { PopupRoutes } from '@masknet/shared-base' +import { NetworkPluginID } from '@masknet/web3-shared-base' export function SwapBox() { const location = useLocation() const navigate = useNavigate() - const chainId = useChainId() + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const coin = useMemo(() => { if (!location.search) return undefined diff --git a/packages/mask/src/extension/popups/pages/Swap/index.tsx b/packages/mask/src/extension/popups/pages/Swap/index.tsx index 7386a1ab1b48..24a9fa499fd8 100644 --- a/packages/mask/src/extension/popups/pages/Swap/index.tsx +++ b/packages/mask/src/extension/popups/pages/Swap/index.tsx @@ -1,17 +1,15 @@ +import { useCallback } from 'react' import { Appearance, applyMaskColorVars, makeStyles } from '@masknet/theme' -import { TransactionStatusType, useChainId, useWallet, Web3Provider } from '@masknet/web3-shared-evm' import { ThemeProvider, Typography } from '@mui/material' import { SharedContextProvider } from '@masknet/shared' -import { useCallback } from 'react' -import { useRecentTransactions } from '../../../../plugins/Wallet/hooks/useRecentTransactions' +import { TransactionStatusType, NetworkPluginID } from '@masknet/web3-shared-base' import Services from '../../../service' import { WalletStateBarUI } from '../../components/WalletStateBar' import { SwapBox } from './SwapBox' -import { SwapWeb3Context } from '../../../../web3/context' import { PopupRoutes } from '@masknet/shared-base' import { useI18N } from '../../../../utils' import { useSwapPageTheme } from '../../../../utils/theme/useSwapPageTheme' -import { NetworkPluginID, useReverseAddress } from '@masknet/plugin-infra/web3' +import { useChainId, useReverseAddress, useRecentTransactions, useWallet } from '@masknet/plugin-infra/web3' import { TargetChainIdContext } from '../../../../plugins/Trader/trader/useTargetChainIdContext' import { AllProviderTradeContext } from '../../../../plugins/Trader/trader/useAllProviderTradeContext' @@ -68,53 +66,48 @@ const useStyles = makeStyles()((theme) => { export default function SwapPage() { const { t } = useI18N() const { classes } = useStyles() - const chainId = useChainId() + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + const wallet = useWallet(NetworkPluginID.PLUGIN_EVM) const theme = useSwapPageTheme() - const { value: pendingTransactions = [] } = useRecentTransactions({ - status: TransactionStatusType.NOT_DEPEND, - }) - const wallet = useWallet() + const pendingTransactions = useRecentTransactions(NetworkPluginID.PLUGIN_EVM, TransactionStatusType.NOT_DEPEND) const openPopupsWindow = useCallback(() => { Services.Helper.openPopupWindow(PopupRoutes.SelectWallet, { chainId, - internal: true, }) }, [chainId]) - const { value: domain } = useReverseAddress(wallet?.address, NetworkPluginID.PLUGIN_EVM) + const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet?.address) applyMaskColorVars(document.body, Appearance.light) return ( - - - -
-
-
- 0} - openConnectWalletDialog={openPopupsWindow} - walletName={wallet?.name} - domain={domain} - walletAddress={wallet?.address} - /> -
-
- - {t('plugin_trader_swap')} - - - - - - -
-
+ + +
+
+
+ 0} + openConnectWalletDialog={openPopupsWindow} + walletName={wallet?.name} + domain={domain} + walletAddress={wallet?.address} + /> +
+
+ + {t('plugin_trader_swap')} + + + + + + +
- - - +
+ + ) } diff --git a/packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx index 27a6eb20d567..33f52c6c8da3 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx @@ -6,11 +6,12 @@ import { HD_PATH_WITHOUT_INDEX_ETHEREUM } from '@masknet/plugin-wallet' import { useAsync, useAsyncFn } from 'react-use' import { WalletRPC } from '../../../../../plugins/Wallet/messages' import { DeriveWalletTable } from '../components/DeriveWalletTable' -import { currySameAddress, ProviderType, useWallets } from '@masknet/web3-shared-evm' +import { currySameAddress, NetworkPluginID } from '@masknet/web3-shared-base' +import { useWallets } from '@masknet/plugin-infra/web3' import { useI18N } from '../../../../../utils' import { LoadingButton } from '@mui/lab' import { PopupRoutes } from '@masknet/shared-base' -import { currentAccountSettings, currentMaskWalletAccountSettings } from '../../../../../plugins/Wallet/settings' +import { currentMaskWalletAccountSettings } from '../../../../../plugins/Wallet/settings' import { first } from 'lodash-unified' import { useTitle } from '../../../hook/useTitle' @@ -78,7 +79,7 @@ const AddDeriveWallet = memo(() => { const location = useLocation() const state = location.state as any as { mnemonic?: string } | undefined const { classes } = useStyles() - const wallets = useWallets(ProviderType.MaskWallet) + const wallets = useWallets(NetworkPluginID.PLUGIN_EVM) const walletName = new URLSearchParams(location.search).get('name') const { mnemonic } = state || {} @@ -143,12 +144,6 @@ const AddDeriveWallet = memo(() => { account: firstWallet, }) } - if (!currentAccountSettings.value) { - await WalletRPC.updateAccount({ - account: firstWallet, - providerType: ProviderType.MaskWallet, - }) - } } navigate(PopupRoutes.Wallet, { replace: true }) }, [mnemonic, walletName, wallets.length]) diff --git a/packages/mask/src/extension/popups/pages/Wallet/AddToken/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/AddToken/index.tsx index 0b1e207d5c09..3de7f9c1f87a 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/AddToken/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/AddToken/index.tsx @@ -1,8 +1,8 @@ import { memo } from 'react' import { Button, Stack, Typography } from '@mui/material' import { makeStyles } from '@masknet/theme' -import { useWallet } from '@masknet/web3-shared-evm' -import { ERC20TokenList } from '@masknet/shared' +import { FungibleTokenList } from '@masknet/shared' +import { useBlockedFungibleTokens } from '@masknet/plugin-infra/web3' import { useI18N } from '../../../../../utils' import { useNavigate } from 'react-router-dom' import { useTitle } from '../../../hook/useTitle' @@ -40,11 +40,9 @@ const useStyles = makeStyles()({ const AddToken = memo(() => { const { t } = useI18N() - const wallet = useWallet() const { classes } = useStyles() const navigate = useNavigate() - - const excludeTokens = Array.from(wallet?.erc20_token_whitelist ?? []) + const blackList = useBlockedFungibleTokens() useTitle(t('add_token')) @@ -52,7 +50,10 @@ const AddToken = memo(() => { <>
{t('popups_wallet_token')} - + x.address)} + FixedSizeListProps={{ height: 340, itemSize: 54 }} + />
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx index 11ed0a8a9d8b..ab3a7672b380 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx @@ -1,25 +1,17 @@ import urlcat from 'urlcat' -import type { TransactionReceipt } from 'web3-core' import { memo, useState } from 'react' import { useNavigate } from 'react-router-dom' import { makeStyles } from '@masknet/theme' import { useContainer } from 'unstated-next' import { Button, Link, List } from '@mui/material' -import { - ChainId, - EthereumRpcType, - isNativeTokenAddress, - isSameAddress, - resolveTransactionLinkOnExplorer, - useChainId, -} from '@masknet/web3-shared-evm' +import { NetworkPluginID, RecentTransaction } from '@masknet/web3-shared-base' +import type { ChainId, Transaction } from '@masknet/web3-shared-evm' import { PopupRoutes } from '@masknet/shared-base' import { WalletContext } from '../../hooks/useWalletContext' -import type { RecentTransaction } from '../../../../../../plugins/Wallet/services' import { useI18N } from '../../../../../../utils' import { ReplaceType } from '../../type' import { ActivityListItem } from './ActivityListItem' -import type { ComputedPayload } from '../../../../../background-script/EthereumService' +import { useChainId, useWeb3State } from '@masknet/plugin-infra/web3' const useStyles = makeStyles()({ list: { @@ -100,32 +92,25 @@ export interface ActivityListProps { export const ActivityList = memo(({ tokenAddress }) => { const { transactions } = useContainer(WalletContext) + const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM) + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) - const dataSource = - transactions?.filter((transaction) => { - if (!tokenAddress) return true - else if (isNativeTokenAddress(tokenAddress)) - return transaction.computedPayload?.type === EthereumRpcType.SEND_ETHER - else if ( - transaction.computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION && - (transaction.computedPayload?.name === 'transfer' || - transaction.computedPayload?.name === 'transferFrom') - ) { - return isSameAddress(transaction.computedPayload?._tx?.to, tokenAddress) - } - return false - }) ?? [] - - const chainId = useChainId() - return + return ( + + ) }) export interface ActivityListUIProps { - dataSource: RecentTransaction[] + dataSource: Array & { _tx: Transaction }> chainId: ChainId + formatterTransactionLink?: (chainId: ChainId, id: string) => string } -export const ActivityListUI = memo(({ dataSource, chainId }) => { +export const ActivityListUI = memo(({ dataSource, chainId, formatterTransactionLink }) => { const { classes } = useStyles() const { t } = useI18N() const [isExpand, setExpand] = useState(!(dataSource.length > 3)) @@ -138,20 +123,16 @@ export const ActivityListUI = memo(({ dataSource, chainId } <> {dataSource.slice(0, !isExpand ? 3 : undefined).map((transaction, index) => { - const toAddress = getToAddress(transaction.receipt, transaction.computedPayload) return ( { e.preventDefault() setTransaction(transaction) @@ -185,26 +166,3 @@ export const ActivityListUI = memo(({ dataSource, chainId } ) }) - -function getToAddress(receipt?: TransactionReceipt | null, computedPayload?: ComputedPayload | null) { - if (!computedPayload) return undefined - const type = computedPayload.type - switch (type) { - case EthereumRpcType.SEND_ETHER: - return receipt?.to - case EthereumRpcType.CONTRACT_INTERACTION: - switch (computedPayload.name) { - case 'transfer': - case 'transferFrom': - return computedPayload.parameters?.to - case 'approve': - default: - return receipt?.to - } - case EthereumRpcType.CONTRACT_DEPLOYMENT: - return receipt?.to - case EthereumRpcType.CANCEL: - default: - return undefined - } -} diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx index c6b017372d63..49414ebd395b 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx @@ -1,7 +1,7 @@ import { memo, useCallback } from 'react' import { useNavigate } from 'react-router-dom' import { useContainer } from 'unstated-next' -import { Asset, formatBalance } from '@masknet/web3-shared-evm' +import type { ChainId, SchemaType } from '@masknet/web3-shared-evm' import { PopupRoutes } from '@masknet/shared-base' import { List, ListItem, ListItemText } from '@mui/material' import { makeStyles } from '@masknet/theme' @@ -9,6 +9,7 @@ import { ArrowRightIcon } from '@masknet/icons' import { TokenIcon, FormattedBalance } from '@masknet/shared' import { WalletContext } from '../../hooks/useWalletContext' import { isNaN } from 'lodash-unified' +import { formatBalance, FungibleAsset } from '@masknet/web3-shared-base' const useStyles = makeStyles()({ list: { @@ -41,6 +42,8 @@ const useStyles = makeStyles()({ }, }) +type Asset = FungibleAsset + export const AssetsList = memo(() => { const navigate = useNavigate() const { assets, setCurrentToken } = useContainer(WalletContext) @@ -65,18 +68,18 @@ export const AssetsListUI = memo(({ dataSource, onItemClick } onItemClick(asset)}> diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx index c5fd78aead04..9f5c426d2316 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx @@ -14,8 +14,10 @@ import { import { makeStyles } from '@masknet/theme' import { FormattedAddress, FormattedBalance } from '@masknet/shared' import { CheckedBorderIcon, CheckedIcon } from '@masknet/icons' -import { formatBalance, formatEthereumAddress, useWeb3 } from '@masknet/web3-shared-evm' +import { formatEthereumAddress } from '@masknet/web3-shared-evm' import { useI18N } from '../../../../../../utils' +import { useWeb3 } from '@masknet/plugin-infra/web3' +import { formatBalance, NetworkPluginID } from '@masknet/web3-shared-base' const useStyles = makeStyles()({ header: { @@ -41,7 +43,7 @@ const useStyles = makeStyles()({ export interface DeriveWalletTableProps { loading: boolean - dataSource?: { address: string; added: boolean; selected: boolean }[] + dataSource?: Array<{ address: string; added: boolean; selected: boolean }> onCheck: (checked: boolean, index: number) => void confirmLoading: boolean } @@ -104,8 +106,8 @@ export interface DeriveWalletTableRowProps { } export const DeriveWalletTableRow = memo(({ address, added, onCheck, selected }) => { const { classes } = useStyles() - const web3 = useWeb3() - const { loading, value: balance } = useAsync(async () => web3.eth.getBalance(address), [web3, address]) + const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM) + const { loading, value: balance } = useAsync(async () => web3?.eth.getBalance(address) ?? '0', [web3, address]) return ( diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx index 8a2d9ac92a67..c2053f4bccc1 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx @@ -11,7 +11,8 @@ import { useContainer } from 'unstated-next' import { WalletContext } from '../../hooks/useWalletContext' import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder' import { Navigator } from '../../../../components/Navigator' -import { useWallet } from '@masknet/web3-shared-evm' +import { useWallet } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' const useStyles = makeStyles()({ content: { @@ -75,7 +76,7 @@ enum WalletTabs { export const WalletAssets = memo(() => { const navigate = useNavigate() - const wallet = useWallet() + const wallet = useWallet(NetworkPluginID.PLUGIN_EVM) return wallet ? navigate(PopupRoutes.AddToken)} /> : null }) diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx index a5f2cf5e5d73..145581a79350 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx @@ -2,10 +2,10 @@ import { makeStyles } from '@masknet/theme' import { memo, MouseEvent } from 'react' import { Box, Link, Typography } from '@mui/material' import { CopyIconButton } from '../../../../components/CopyIconButton' -import type { Web3Plugin } from '@masknet/plugin-infra/web3' import { ChainIcon, FormattedAddress, WalletIcon } from '@masknet/shared' -import { ChainId, Wallet, formatEthereumAddress, resolveAddressLinkOnExplorer } from '@masknet/web3-shared-evm' +import { ChainId, formatEthereumAddress, explorerResolver, NetworkType } from '@masknet/web3-shared-evm' import { ArrowDropIcon, MaskBlueIcon, PopupLinkIcon } from '@masknet/icons' +import type { NetworkDescriptor, Wallet } from '@masknet/web3-shared-base' const useStyles = makeStyles()(() => ({ container: { @@ -77,7 +77,7 @@ const useStyles = makeStyles()(() => ({ }, })) interface WalletHeaderUIProps { - currentNetwork: Web3Plugin.NetworkDescriptor + currentNetwork: NetworkDescriptor chainId: ChainId onOpenNetworkSelector: (event: MouseEvent) => void onActionClick: () => void @@ -133,7 +133,7 @@ export const WalletHeaderUI = memo( event.stopPropagation()} style={{ width: 12, height: 12 }} - href={resolveAddressLinkOnExplorer(chainId, wallet.address ?? '')} + href={explorerResolver.addressLink(chainId, wallet.address ?? '')} target="_blank" rel="noopener noreferrer"> diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/index.tsx index b3418b5fdf25..40fa7127b746 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/index.tsx @@ -2,16 +2,22 @@ import { memo, useCallback, useMemo } from 'react' import { makeStyles } from '@masknet/theme' import { useMatch, useNavigate } from 'react-router-dom' import { PopupRoutes } from '@masknet/shared-base' -import { ChainId, useChainId, ProviderType, useWallet } from '@masknet/web3-shared-evm' +import type { ChainId, NetworkType } from '@masknet/web3-shared-evm' import { WalletHeaderUI } from './UI' -import { getRegisteredWeb3Networks, NetworkPluginID, useAccount } from '@masknet/plugin-infra/web3' +import { + getRegisteredWeb3Networks, + useAccount, + useChainId, + useProviderType, + useWallet, +} from '@masknet/plugin-infra/web3' import { Flags } from '../../../../../../../shared' import { MenuItem, Typography } from '@mui/material' import { useMenuConfig, WalletIcon, ChainIcon } from '@masknet/shared' -import { currentMaskWalletAccountSettings, currentProviderSettings } from '../../../../../../plugins/Wallet/settings' +import { currentMaskWalletAccountSettings } from '../../../../../../plugins/Wallet/settings' import { WalletRPC } from '../../../../../../plugins/Wallet/messages' -import { useValueRef } from '@masknet/shared-base-ui' import { NormalHeader } from '../../../../components/NormalHeader' +import { NetworkDescriptor, NetworkPluginID } from '@masknet/web3-shared-base' const useStyles = makeStyles()({ menu: { @@ -25,13 +31,16 @@ const useStyles = makeStyles()({ export const WalletHeader = memo(() => { const { classes } = useStyles() - const account = useAccount() - const chainId = useChainId() - const wallet = useWallet() const navigate = useNavigate() - const providerType = useValueRef(currentProviderSettings) + const account = useAccount(NetworkPluginID.PLUGIN_EVM) + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + const wallet = useWallet(NetworkPluginID.PLUGIN_EVM) + const providerType = useProviderType(NetworkPluginID.PLUGIN_EVM) + + const networks = getRegisteredWeb3Networks().filter( + (x) => x.networkSupporterPluginID === NetworkPluginID.PLUGIN_EVM, + ) as Array> - const networks = getRegisteredWeb3Networks() const currentNetwork = useMemo( () => networks.find((x) => x.chainId === chainId) ?? networks[0], [networks, chainId], @@ -44,11 +53,6 @@ export const WalletHeader = memo(() => { const onChainChange = useCallback( async (chainId: ChainId) => { - if (providerType === ProviderType.MaskWallet) { - await WalletRPC.updateAccount({ - chainId, - }) - } return WalletRPC.updateMaskAccount({ chainId, account: currentMaskWalletAccountSettings.value, diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletInfo/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletInfo/index.tsx index 329a9700a0ad..f244427aba2f 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/components/WalletInfo/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/components/WalletInfo/index.tsx @@ -1,14 +1,15 @@ import { memo } from 'react' +import { useNavigate, useLocation, useMatch } from 'react-router-dom' import { Box, Typography } from '@mui/material' import { makeStyles } from '@masknet/theme' import { MoreHoriz } from '@mui/icons-material' import { EditIcon, MaskWalletIcon } from '@masknet/icons' import { FormattedAddress } from '@masknet/shared' -import { useNavigate, useLocation, useMatch } from 'react-router-dom' import { PopupRoutes } from '@masknet/shared-base' -import { formatEthereumAddress, useWallet } from '@masknet/web3-shared-evm' +import { NetworkPluginID } from '@masknet/web3-shared-base' +import { formatEthereumAddress } from '@masknet/web3-shared-evm' import { CopyIconButton } from '../../../../components/CopyIconButton' -import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3' +import { useReverseAddress, useWallet, useWeb3State } from '@masknet/plugin-infra/web3' const useStyles = makeStyles()({ container: { @@ -64,12 +65,11 @@ const useStyles = makeStyles()({ }) export const WalletInfo = memo(() => { - const wallet = useWallet() + const wallet = useWallet(NetworkPluginID.PLUGIN_EVM) const navigate = useNavigate() const address = new URLSearchParams(useLocation().search).get('address') - - const { value: domain } = useReverseAddress(address ?? wallet?.address, NetworkPluginID.PLUGIN_EVM) - const { Utils } = useWeb3State() + const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, address ?? wallet?.address) + const { Others } = useWeb3State() const excludePath = useMatch(PopupRoutes.WalletSettings) @@ -83,7 +83,7 @@ export const WalletInfo = memo(() => { onSettingClick={() => navigate(PopupRoutes.WalletSettings)} hideSettings={!!excludePath} domain={domain} - formatDomainName={Utils?.formatDomainName} + formatDomainName={Others?.formatDomainName} /> ) }) diff --git a/packages/mask/src/extension/popups/pages/Wallet/hooks/useSetWalletNameForm.ts b/packages/mask/src/extension/popups/pages/Wallet/hooks/useSetWalletNameForm.ts index c688bf612a52..5a46f5770ae8 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/hooks/useSetWalletNameForm.ts +++ b/packages/mask/src/extension/popups/pages/Wallet/hooks/useSetWalletNameForm.ts @@ -1,7 +1,8 @@ import { z as zod } from 'zod' import { useForm, UseFormReturn } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' -import { useWallets } from '@masknet/web3-shared-evm' +import { useWallets } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' const schema = zod.object({ name: zod.string().min(1).max(12), @@ -9,7 +10,7 @@ const schema = zod.object({ export function useSetWalletNameForm( defaultName?: string, ): UseFormReturn<{ name: string }, object> & { schema: typeof schema } { - const wallets = useWallets() + const wallets = useWallets(NetworkPluginID.PLUGIN_EVM) const formValue = useForm>({ mode: 'onChange', diff --git a/packages/mask/src/extension/popups/pages/Wallet/hooks/useUnConfirmedRequest.ts b/packages/mask/src/extension/popups/pages/Wallet/hooks/useUnConfirmedRequest.ts index e15421ad5f6b..c3f8a2ce4189 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/hooks/useUnConfirmedRequest.ts +++ b/packages/mask/src/extension/popups/pages/Wallet/hooks/useUnConfirmedRequest.ts @@ -1,17 +1,28 @@ import { useAsyncRetry } from 'react-use' import { WalletRPC } from '../../../../../plugins/Wallet/messages' -import Services from '../../../../service' import { useEffect } from 'react' import { WalletMessages } from '@masknet/plugin-wallet' +import { getPayloadConfig } from '@masknet/web3-shared-evm' +import { useChainId, useWeb3State } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' export const useUnconfirmedRequest = () => { + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + const { TransactionFormatter } = useWeb3State(NetworkPluginID.PLUGIN_EVM) const result = useAsyncRetry(async () => { const payload = await WalletRPC.topUnconfirmedRequest() if (!payload) return - const computedPayload = await Services.Ethereum.getComputedPayload(payload) + const computedPayload = getPayloadConfig(payload) + + if (!computedPayload) return { payload } + + const formatterTransaction = await TransactionFormatter?.formatTransaction(chainId, computedPayload) + const transactionContext = await TransactionFormatter?.createContext(chainId, computedPayload) return { payload, computedPayload, + formatterTransaction, + transactionContext, } }, []) diff --git a/packages/mask/src/extension/popups/pages/Wallet/hooks/useWalletContext.ts b/packages/mask/src/extension/popups/pages/Wallet/hooks/useWalletContext.ts index f0e2d407ad7c..2b2734684d80 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/hooks/useWalletContext.ts +++ b/packages/mask/src/extension/popups/pages/Wallet/hooks/useWalletContext.ts @@ -1,24 +1,20 @@ import { useState } from 'react' import { createContainer } from 'unstated-next' -import { useAssets, useTrustedERC20Tokens, Asset, useChainDetailed, Wallet } from '@masknet/web3-shared-evm' -import { useRecentTransactions } from '../../../../../plugins/Wallet/hooks/useRecentTransactions' -import type { RecentTransaction } from '../../../../../plugins/Wallet/services' +import { useChainId, useRecentTransactions, useFungibleAssets } from '@masknet/plugin-infra/web3' +import { FungibleAsset, NetworkPluginID, RecentTransaction, Wallet } from '@masknet/web3-shared-base' +import type { ChainId, SchemaType, Transaction } from '@masknet/web3-shared-evm' function useWalletContext() { - const chainDetailed = useChainDetailed() - const erc20Tokens = useTrustedERC20Tokens() - const { value: assets, loading } = useAssets(erc20Tokens) - const { value: transactions } = useRecentTransactions({ - receipt: true, - computedPayload: true, - }) - const [currentToken, setCurrentToken] = useState() - const [transaction, setTransaction] = useState() + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + const { value: assets, loading } = useFungibleAssets(NetworkPluginID.PLUGIN_EVM) + const transactions = useRecentTransactions(NetworkPluginID.PLUGIN_EVM) + const [currentToken, setCurrentToken] = useState>() + const [transaction, setTransaction] = useState>() const [selectedWallet, setSelectedWallet] = useState() return { currentToken, setCurrentToken, - assets: assets.filter((asset) => asset.token.chainId === chainDetailed?.chainId), + assets: assets?.filter((asset) => asset.chainId === chainId) ?? [], transactions, assetsLoading: loading, transaction, diff --git a/packages/mask/src/extension/popups/pages/Wallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/index.tsx index d92e23141335..968c38702f36 100644 --- a/packages/mask/src/extension/popups/pages/Wallet/index.tsx +++ b/packages/mask/src/extension/popups/pages/Wallet/index.tsx @@ -1,5 +1,4 @@ import { WalletStartUp } from './components/StartUp' -import { EthereumRpcType, useWallet } from '@masknet/web3-shared-evm' import { WalletAssets } from './components/WalletAssets' import { Route, Routes, useNavigate, useLocation } from 'react-router-dom' import { lazy, Suspense, useEffect } from 'react' @@ -8,11 +7,14 @@ import { WalletContext } from './hooks/useWalletContext' import { LoadingPlaceholder } from '../../components/LoadingPlaceholder' import { useAsyncRetry } from 'react-use' import { WalletMessages, WalletRPC } from '../../../../plugins/Wallet/messages' -import Services from '../../../service' import SelectWallet from './SelectWallet' import { useWalletLockStatus } from './hooks/useWalletLockStatus' import urlcat from 'urlcat' import { WalletHeader } from './components/WalletHeader' +import { useChainId, useWallet, useWeb3State } from '@masknet/plugin-infra/web3' +import { NetworkPluginID, TransactionDescriptorType } from '@masknet/web3-shared-base' +import { EthereumMethodType, getPayloadConfig } from '@masknet/web3-shared-evm' + const ImportWallet = lazy(() => import('./ImportWallet')) const AddDeriveWallet = lazy(() => import('./AddDeriveWallet')) const WalletSettings = lazy(() => import('./WalletSettings')) @@ -34,14 +36,13 @@ const LegacyWalletRecovery = lazy(() => import('./LegacyWalletRecovery')) const ReplaceTransaction = lazy(() => import('./ReplaceTransaction')) const ConnectWallet = lazy(() => import('./ConnectWallet')) -const exclusionDetectLocked = [PopupRoutes.Unlock, PopupRoutes.ConnectWallet] - const r = relativeRouteOf(PopupRoutes.Wallet) export default function Wallet() { - const wallet = useWallet() + const wallet = useWallet(NetworkPluginID.PLUGIN_EVM) const location = useLocation() const navigate = useNavigate() - + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + const { TransactionFormatter } = useWeb3State(NetworkPluginID.PLUGIN_EVM) const { isLocked, loading: getLockStatusLoading } = useWalletLockStatus() const { loading, retry } = useAsyncRetry(async () => { @@ -54,34 +55,36 @@ export default function Wallet() { ].some((item) => item === location.pathname) ) return - const payload = await WalletRPC.topUnconfirmedRequest() if (!payload) return + const computedPayload = getPayloadConfig(payload) + if (!computedPayload) return - const computedPayload = await Services.Ethereum.getComputedPayload(payload) - const value = { - payload, - computedPayload, + const formatterTransaction = await TransactionFormatter?.formatTransaction(chainId, computedPayload) + + if ( + formatterTransaction && + [TransactionDescriptorType.INTERACTION, TransactionDescriptorType.TRANSFER].includes( + formatterTransaction.type, + ) + ) { + navigate(PopupRoutes.ContractInteraction, { replace: true }) } - if (value?.computedPayload) { - switch (value.computedPayload.type) { - case EthereumRpcType.SIGN: - case EthereumRpcType.SIGN_TYPED_DATA: + if (computedPayload) { + switch (payload.method) { + case EthereumMethodType.ETH_SIGN: + case EthereumMethodType.ETH_SIGN_TYPED_DATA: navigate(PopupRoutes.WalletSignRequest, { replace: true }) break - case EthereumRpcType.CONTRACT_INTERACTION: - case EthereumRpcType.SEND_ETHER: - navigate(PopupRoutes.ContractInteraction, { replace: true }) - break default: break } } - }, [location.search, location.pathname]) + }, [location.search, location.pathname, chainId]) useEffect(() => { - if (!(isLocked && !getLockStatusLoading && !exclusionDetectLocked.some((x) => x === location.pathname))) return + if (!(isLocked && !getLockStatusLoading && location.pathname !== PopupRoutes.Unlock)) return navigate(urlcat(PopupRoutes.Unlock, { from: location.pathname }), { replace: true }) }, [isLocked, location.pathname, getLockStatusLoading]) diff --git a/packages/mask/src/extension/popups/render.tsx b/packages/mask/src/extension/popups/render.tsx index 264c7fc796fc..c38758d2a722 100644 --- a/packages/mask/src/extension/popups/render.tsx +++ b/packages/mask/src/extension/popups/render.tsx @@ -1,32 +1,10 @@ import { startPluginDashboard } from '@masknet/plugin-infra/dashboard' -import { createNormalReactRoot, MaskMessages } from '../../utils' -import { createPluginHost } from '../../plugin-infra/host' -import { Services } from '../service' +import { createNormalReactRoot } from '../../utils' +import { createPluginHost, createSharedContext } from '../../plugin-infra/host' import { status } from '../../setup.ui' import Popups from './UI' -import { InMemoryStorages, PersistentStorages } from '../../../shared/kv-storage' -import { createSubscriptionFromAsync } from '@masknet/shared-base' status.then(() => createNormalReactRoot()) // TODO: Should only load plugins when the page is plugin-aware. - -startPluginDashboard( - createPluginHost(undefined, (pluginID, signal) => { - const currentPersonaSub = createSubscriptionFromAsync( - Services.Settings.getCurrentPersonaIdentifier, - undefined, - MaskMessages.events.currentPersonaIdentifier.on, - signal, - ) - return { - createKVStorage(type, defaultValues) { - if (type === 'memory') return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal) - else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal) - }, - personaSign: Services.Identity.signWithPersona, - walletSign: Services.Ethereum.personalSign, - currentPersona: currentPersonaSub, - } - }), -) +startPluginDashboard(createPluginHost(undefined, createSharedContext)) diff --git a/packages/mask/src/extension/service.ts b/packages/mask/src/extension/service.ts index 754274da7808..cd748dff8099 100644 --- a/packages/mask/src/extension/service.ts +++ b/packages/mask/src/extension/service.ts @@ -25,7 +25,6 @@ export const Services = { Identity: add(() => import('../../background/services/identity'), 'Identity'), Backup: add(() => import('./background-script/BackupService'), 'Backup'), Helper: add(() => import('../../background/services/helper'), 'Helper'), - Ethereum: add(() => import('./background-script/EthereumService'), 'Ethereum'), SocialNetwork: add(() => import('./background-script/SocialNetworkService'), 'SocialNetwork'), Settings: add(() => import('./background-script/SettingsService'), 'Settings'), ThirdPartyPlugin: add(() => import('./background-script/ThirdPartyPlugin'), 'ThirdPartyPlugin'), @@ -44,7 +43,6 @@ if (process.env.manifest === '2' && import.meta.webpackHot && isEnvironment(Envi '../../background/services/identity', './background-script/BackupService', '../../background/services/helper', - './background-script/EthereumService', './background-script/SettingsService', './background-script/ThirdPartyPlugin', './background-script/SocialNetworkService', diff --git a/packages/mask/src/plugin-infra/host.ts b/packages/mask/src/plugin-infra/host.ts index a2896190c9c5..8b37170ba81b 100644 --- a/packages/mask/src/plugin-infra/host.ts +++ b/packages/mask/src/plugin-infra/host.ts @@ -1,11 +1,85 @@ // All plugin manager need to call createPluginHost so let's register plugins implicitly. import './register' +import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers' import type { Plugin } from '@masknet/plugin-infra' import { Emitter } from '@servie/events' import { MaskMessages } from '../../shared/messages' import Services from '../extension/service' -import { createI18NBundle, i18NextInstance } from '@masknet/shared-base' +import { + createI18NBundle, + createSubscriptionFromAsync, + createSubscriptionFromValueRef, + EMPTY_LIST, + i18NextInstance, +} from '@masknet/shared-base' +import { InMemoryStorages, PersistentStorages } from '../../shared' +import { nativeAPI, hasNativeAPI } from '../../shared/native-rpc' +import { currentMaskWalletAccountSettings, currentMaskWalletChainIdSettings } from '../plugins/Wallet/settings' +import { WalletMessages, WalletRPC } from '../plugins/Wallet/messages' + +export function createSharedContext(pluginID: string, signal: AbortSignal): Plugin.Shared.SharedContext { + return { + createKVStorage(type: 'memory' | 'persistent', defaultValues: T) { + if (type === 'memory') return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal) + else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal) + }, + + nativeType: nativeAPI?.type, + hasNativeAPI, + + send: async (payload: JsonRpcPayload) => { + if (nativeAPI?.type === 'iOS') { + return nativeAPI.api.send(payload) as unknown as JsonRpcResponse + } else { + const response = await nativeAPI?.api.sendJsonString(JSON.stringify(payload)) + if (!response) throw new Error('Failed to send request to native APP.') + return JSON.parse(response) as JsonRpcResponse + } + }, + + openPopupWindow: Services.Helper.openPopupWindow, + closePopupWindow: Services.Helper.removePopupWindow, + + account: createSubscriptionFromValueRef(currentMaskWalletAccountSettings), + chainId: createSubscriptionFromValueRef(currentMaskWalletChainIdSettings), + + currentPersona: createSubscriptionFromAsync( + Services.Settings.getCurrentPersonaIdentifier, + undefined, + MaskMessages.events.currentPersonaIdentifier.on, + signal, + ), + + wallets: createSubscriptionFromAsync( + () => WalletRPC.getWallets(), + EMPTY_LIST, + WalletMessages.events.walletsUpdated.on, + ), + walletPrimary: createSubscriptionFromAsync( + () => WalletRPC.getWalletPrimary(), + null, + WalletMessages.events.walletsUpdated.on, + ), + + personaSignMessage: Services.Identity.signWithPersona, + + updateAccount: WalletRPC.updateMaskAccount, + resetAccount: WalletRPC.resetMaskAccount, + selectAccountPrepare: WalletRPC.selectMaskAccountPrepare, + + signTransaction: WalletRPC.signTransaction, + signTypedData: WalletRPC.signTypedData, + signPersonalMessage: WalletRPC.signPersonalMessage, + + addWallet: WalletRPC.updateWallet, + updateWallet: WalletRPC.updateWallet, + removeWallet: WalletRPC.removeWallet, + + shiftUnconfirmedRequest: WalletRPC.shiftUnconfirmedRequest, + pushUnconfirmedRequest: WalletRPC.pushUnconfirmedRequest, + } +} export function createPluginHost( signal: AbortSignal | undefined, diff --git a/packages/mask/src/plugin-infra/register.js b/packages/mask/src/plugin-infra/register.js index 2c38073d8643..4e253d8cae1a 100644 --- a/packages/mask/src/plugin-infra/register.js +++ b/packages/mask/src/plugin-infra/register.js @@ -13,13 +13,13 @@ import '@masknet/plugin-cyberconnect' import '@masknet/plugin-go-plus-security' import '@masknet/plugin-cross-chain-bridge' import '../plugins/Wallet' -import '../plugins/EVM' +import '@masknet/plugin-evm' import '../plugins/RedPacket' import '../plugins/ITO' import '../plugins/Snapshot' import '../plugins/Savings' import '../plugins/Collectible' -import '../plugins/External' +// import '../plugins/External' import '../plugins/Transak' import '../plugins/Gitcoin' import '../plugins/Polls' @@ -33,7 +33,6 @@ import '../plugins/Avatar' import '../plugins/Furucombo' import '../plugins/MaskBox' import '../plugins/NextID' -// import '../plugins/Profile' import '../plugins/Pets' import '../plugins/CryptoartAI' import '../plugins/FindTruman' diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx index cf764d336c71..54ac7d765065 100644 --- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx +++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx @@ -1,15 +1,17 @@ -import { useI18N } from '../../../utils' -import { Tab, Tabs, Paper, Card, CardHeader, CardContent, Link, Typography, Avatar, Box } from '@mui/material' import { useState } from 'react' +import { Tab, Tabs, Paper, Card, CardHeader, CardContent, Link, Typography, Avatar, Box } from '@mui/material' import { makeStyles } from '@masknet/theme' +import { NetworkPluginID } from '@masknet/web3-shared-base' +import { useChainId } from '@masknet/plugin-infra/web3' +import { useI18N } from '../../../utils' import { CollectionView } from './CollectionView' import { DetailsView } from './DetailsView' -import { ChainId, formatWeiToEther, useChainId } from '@masknet/web3-shared-evm' +import { ChainId, formatWeiToEther } from '@masknet/web3-shared-evm' import { useFetchProject } from '../hooks/useProject' import { ActionBar } from './ActionBar' import { resolveProjectLinkOnArtBlocks, resolveUserLinkOnArtBlocks } from '../pipes' import { ArtBlocksLogoUrl } from '../constants' -import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary' +import { ChainBoundary } from '../../../web3/UI/ChainBoundary' const useStyles = makeStyles()((theme) => { return { @@ -60,7 +62,7 @@ interface CollectibleProps { export function Collectible(props: CollectibleProps) { const { t } = useI18N() const { classes } = useStyles() - const chainId = useChainId() + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const [tabIndex, setTabIndex] = useState(0) const { value, loading, error } = useFetchProject(props.projectId) @@ -68,7 +70,7 @@ export function Collectible(props: CollectibleProps) { if (loading) return {t('loading')} - if (error || !value) + if (error || !project) return ( {t('plugin_artblocks_smt_wrong')} @@ -132,9 +134,12 @@ export function Collectible(props: CollectibleProps) { - + - + ) diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/CollectionView.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/CollectionView.tsx index bb477728ab8e..74456aea4b03 100644 --- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/CollectionView.tsx +++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/CollectionView.tsx @@ -4,7 +4,8 @@ import { useTheme } from '@mui/material/styles' import { MobileStepper, Button, Box, Paper, Typography, Skeleton, Link } from '@mui/material' import { KeyboardArrowLeft, KeyboardArrowRight, OpenInNew } from '@mui/icons-material' import { makeStyles } from '@masknet/theme' -import { useChainId } from '@masknet/web3-shared-evm' +import { useChainId } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' import { resolveImageLinkOnArtBlocks, resolveTokenLinkOnArtBlocks } from '../pipes' import { buildTokenId } from '../utils' import type { Project } from '../types' @@ -82,7 +83,7 @@ export function CollectionView(props: CollectionProps) { const { project } = props const [isImageLoaded, setImageLoaded] = useState(false) const [activeStep, setActiveStep] = useState(1) - const chainId = useChainId() + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const currentSelectedToken = { tokenId: buildTokenId(Number(project.projectId), activeStep - 1), diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/DetailsView.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/DetailsView.tsx index 8618514b58b2..414584aeb33a 100644 --- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/DetailsView.tsx +++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/DetailsView.tsx @@ -1,12 +1,8 @@ import { FormattedAddress } from '@masknet/shared' import { makeStyles } from '@masknet/theme' -import { - formatEthereumAddress, - formatWeiToEther, - getChainName, - resolveAddressLinkOnExplorer, - useChainId, -} from '@masknet/web3-shared-evm' +import { formatEthereumAddress, formatWeiToEther, chainResolver, explorerResolver } from '@masknet/web3-shared-evm' +import { useChainId, useWeb3State } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' import { OpenInNew } from '@mui/icons-material' import { Typography, Box, Link } from '@mui/material' import BigNumber from 'bignumber.js' @@ -60,7 +56,8 @@ export function DetailsView(props: DetailsViewProps) { const { classes } = useStyles() const { project } = props const { t } = useI18N() - const chainId = useChainId() as number + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM) const artistName = ` ${project.artistName}` const invocations = `${project.invocations} of ${project.maxInvocations}` @@ -130,12 +127,12 @@ export function DetailsView(props: DetailsViewProps) { {t('plugin_artblocks_blockchain_row')} - {getChainName(chainId)} + {chainResolver.chainName(chainId)} {t('plugin_artblocks_contract_row')} diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx index 21fa65afa4b9..0aaf83acab0f 100644 --- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx +++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx @@ -1,13 +1,9 @@ +import { useCallback, useMemo, useState } from 'react' +import { Trans } from 'react-i18next' import { InjectedDialog, TokenAmountPanel, useOpenShareTxDialog, useShowConfirm } from '@masknet/shared' import { makeStyles } from '@masknet/theme' -import { leftShift } from '@masknet/web3-shared-base' -import { - ERC20TokenDetailed, - EthereumTokenType, - FungibleTokenDetailed, - useArtBlocksConstants, - useFungibleTokenWatched, -} from '@masknet/web3-shared-evm' +import { FungibleToken, leftShift, NetworkPluginID } from '@masknet/web3-shared-base' +import { SchemaType, useArtBlocksConstants, ChainId } from '@masknet/web3-shared-evm' import { Card, CardActions, @@ -18,16 +14,15 @@ import { Link, Typography, } from '@mui/material' -import { useCallback, useMemo, useState } from 'react' -import { Trans } from 'react-i18next' -import { usePostLink } from '../../../components/DataSource/usePostInfo' import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton' +import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary' +import { useFungibleTokenWatched } from '@masknet/plugin-infra/web3' +import { usePostLink } from '../../../components/DataSource/usePostInfo' import { activatedSocialNetworkUI } from '../../../social-network' import { isFacebook } from '../../../social-network-adaptor/facebook.com/base' import { isTwitter } from '../../../social-network-adaptor/twitter.com/base' import { useI18N } from '../../../utils' import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary' -import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary' import { usePurchaseCallback } from '../hooks/usePurchaseCallback' import type { Project } from '../types' @@ -58,23 +53,23 @@ export function PurchaseDialog(props: ActionBarProps) { const { classes } = useStyles() const { project, open, onClose } = props - const { token, balance } = useFungibleTokenWatched({ - type: project.currencySymbol === 'ETH' || !project.currencySymbol ? 0 : 1, - address: project.currencyAddress ? project.currencyAddress : '', - }) + const { token, balance } = useFungibleTokenWatched( + NetworkPluginID.PLUGIN_EVM, + project.currencyAddress ? project.currencyAddress : '', + ) const [ToS_Checked, setToS_Checked] = useState(false) const [{ loading: isPurchasing }, purchaseCallback] = usePurchaseCallback( project.projectId, project.pricePerTokenInWei, - token.value?.type, + token.value?.schema, ) const price = useMemo( () => leftShift(project.pricePerTokenInWei, token.value?.decimals), [project.pricePerTokenInWei, token.value?.decimals], ) - const postLink = usePostLink() + const shareText = [ t( isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI) @@ -142,7 +137,7 @@ export function PurchaseDialog(props: ActionBarProps) { label={t('plugin_artblocks_price_per_mint')} amount={price.toString()} balance={balance.value ?? '0'} - token={token.value as FungibleTokenDetailed} + token={token.value as FungibleToken} onAmountChange={() => {}} /> - - {token.value?.type === EthereumTokenType.Native ? actionButton : null} - {token.value?.type === EthereumTokenType.ERC20 ? ( + + {token.value?.schema === SchemaType.Native ? actionButton : null} + {token.value?.schema === SchemaType.ERC20 ? ( + token={token.value}> {actionButton} ) : null} - + diff --git a/packages/mask/src/plugins/ArtBlocks/hooks/useArtBlocksContract.ts b/packages/mask/src/plugins/ArtBlocks/hooks/useArtBlocksContract.ts index 3f75f28411fa..f65d9d2581ec 100644 --- a/packages/mask/src/plugins/ArtBlocks/hooks/useArtBlocksContract.ts +++ b/packages/mask/src/plugins/ArtBlocks/hooks/useArtBlocksContract.ts @@ -1,14 +1,14 @@ import type { AbiItem } from 'web3-utils' -import { useContract, useArtBlocksConstants } from '@masknet/web3-shared-evm' +import { useContract } from '@masknet/plugin-infra/web3-evm' +import { useArtBlocksConstants } from '@masknet/web3-shared-evm' import ArtBlocksCoreContractABI from '@masknet/web3-contracts/abis/ArtBlocksMinterContract.json' import type { ArtBlocksMinterContract } from '@masknet/web3-contracts/types/ArtBlocksMinterContract' +import { useChainId } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' export function useArtBlocksContract() { const { GEN_ART_721_MINTER } = useArtBlocksConstants() - const genArt721MinterContract = useContract( - GEN_ART_721_MINTER, - ArtBlocksCoreContractABI as AbiItem[], - ) - return genArt721MinterContract + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) + return useContract(chainId, GEN_ART_721_MINTER, ArtBlocksCoreContractABI as AbiItem[]) } diff --git a/packages/mask/src/plugins/ArtBlocks/hooks/useProject.ts b/packages/mask/src/plugins/ArtBlocks/hooks/useProject.ts index bf833669a492..07f314f76ef2 100644 --- a/packages/mask/src/plugins/ArtBlocks/hooks/useProject.ts +++ b/packages/mask/src/plugins/ArtBlocks/hooks/useProject.ts @@ -1,11 +1,12 @@ +import { NetworkPluginID } from '@masknet/web3-shared-base' import { fetchProject } from '../apis' -import { useAsync } from 'react-use' -import { useChainId } from '@masknet/web3-shared-evm' +import { useAsyncRetry } from 'react-use' +import { useChainId } from '@masknet/plugin-infra/web3' export function useFetchProject(projectId: string) { - const chainId = useChainId() + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) - return useAsync(async () => { + return useAsyncRetry(async () => { if (!projectId) return null return fetchProject(chainId, projectId) diff --git a/packages/mask/src/plugins/ArtBlocks/hooks/usePurchaseCallback.ts b/packages/mask/src/plugins/ArtBlocks/hooks/usePurchaseCallback.ts index 77dd05ef5df4..42bd8fed4fd5 100644 --- a/packages/mask/src/plugins/ArtBlocks/hooks/usePurchaseCallback.ts +++ b/packages/mask/src/plugins/ArtBlocks/hooks/usePurchaseCallback.ts @@ -1,19 +1,21 @@ +import { useAccount, useChainId } from '@masknet/plugin-infra/web3' import type { PayableTx } from '@masknet/web3-contracts/types/types' -import { EthereumTokenType, TransactionEventType, useAccount, useChainId } from '@masknet/web3-shared-evm' +import { NetworkPluginID } from '@masknet/web3-shared-base' +import { SchemaType, TransactionEventType } from '@masknet/web3-shared-evm' import BigNumber from 'bignumber.js' import { useAsyncFn } from 'react-use' import { useArtBlocksContract } from './useArtBlocksContract' -export function usePurchaseCallback(projectId: string, amount: string, tokenType?: number) { - const account = useAccount() - const chainId = useChainId() +export function usePurchaseCallback(projectId: string, amount: string, schema?: SchemaType) { + const account = useAccount(NetworkPluginID.PLUGIN_EVM) + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const genArt721MinterContract = useArtBlocksContract() return useAsyncFn(async () => { if (!genArt721MinterContract) return - const value = new BigNumber(tokenType === EthereumTokenType.Native ? amount : 0).toFixed() + const value = new BigNumber(schema === SchemaType.Native ? amount : 0).toFixed() const config = { from: account, value, @@ -40,5 +42,5 @@ export function usePurchaseCallback(projectId: string, amount: string, tokenType reject(error) }) }) - }, [account, amount, chainId, genArt721MinterContract, tokenType]) + }, [account, amount, chainId, genArt721MinterContract]) } diff --git a/packages/mask/src/plugins/ArtBlocks/hooks/useToken.ts b/packages/mask/src/plugins/ArtBlocks/hooks/useToken.ts index 7dc92e4cafbf..23333706533c 100644 --- a/packages/mask/src/plugins/ArtBlocks/hooks/useToken.ts +++ b/packages/mask/src/plugins/ArtBlocks/hooks/useToken.ts @@ -1,11 +1,12 @@ +import { useAsyncRetry } from 'react-use' +import { useChainId } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' import { fetchToken } from '../apis' -import { useAsync } from 'react-use' -import { useChainId } from '@masknet/web3-shared-evm' export function useFetchToken(tokenId: number) { - const chainId = useChainId() + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) - return useAsync(async () => { + return useAsyncRetry(async () => { if (!tokenId) return null return fetchToken(chainId, tokenId) diff --git a/packages/mask/src/plugins/ArtBlocks/pipes/index.ts b/packages/mask/src/plugins/ArtBlocks/pipes/index.ts index 0d5423f3771d..55ff9ad0bb0e 100644 --- a/packages/mask/src/plugins/ArtBlocks/pipes/index.ts +++ b/packages/mask/src/plugins/ArtBlocks/pipes/index.ts @@ -1,4 +1,5 @@ -import { ChainId, createLookupTableResolver } from '@masknet/web3-shared-evm' +import { ChainId } from '@masknet/web3-shared-evm' +import { createLookupTableResolver } from '@masknet/web3-shared-base' import urlcat from 'urlcat' import { ArtBlocksRopstenUrl, diff --git a/packages/mask/src/plugins/Avatar/Application/NFTAvatarsDialog.tsx b/packages/mask/src/plugins/Avatar/Application/NFTAvatarsDialog.tsx index d76817e316b6..3c2ef4a3cb51 100644 --- a/packages/mask/src/plugins/Avatar/Application/NFTAvatarsDialog.tsx +++ b/packages/mask/src/plugins/Avatar/Application/NFTAvatarsDialog.tsx @@ -7,7 +7,7 @@ import type { SelectTokenInfo, TokenInfo } from '../types' import { PersonaPage } from './PersonaPage' import { DialogContent } from '@mui/material' import { useI18N } from '../locales/i18n_generated' -import { isSameAddress } from '@masknet/web3-shared-evm' +import { isSameAddress } from '@masknet/web3-shared-base' import { makeStyles } from '@masknet/theme' const useStyles = makeStyles()((theme) => ({ diff --git a/packages/mask/src/plugins/Avatar/Application/NFTList.tsx b/packages/mask/src/plugins/Avatar/Application/NFTList.tsx index eb9615527ce4..35ab6e8e0167 100644 --- a/packages/mask/src/plugins/Avatar/Application/NFTList.tsx +++ b/packages/mask/src/plugins/Avatar/Application/NFTList.tsx @@ -1,5 +1,6 @@ import { makeStyles, useTabs } from '@masknet/theme' -import { ChainId, ERC721TokenDetailed } from '@masknet/web3-shared-evm' +import type { NonFungibleToken } from '@masknet/web3-shared-base' +import { ChainId, SchemaType } from '@masknet/web3-shared-evm' import { TabContext, TabPanel } from '@mui/lab' import { Tab, Tabs, Typography } from '@mui/material' import { Application_NFT_LIST_PAGE, SUPPORTED_CHAIN_IDS } from '../constants' @@ -33,9 +34,9 @@ const useStyles = makeStyles<{ currentTab: Application_NFT_LIST_PAGE }>()((theme interface NFTListProps { address: string tokenInfo?: TokenInfo - onSelect: (token: ERC721TokenDetailed) => void + onSelect: (token: NonFungibleToken) => void onChangePage?: (page: Application_NFT_LIST_PAGE) => void - tokens?: ERC721TokenDetailed[] + tokens?: Array> children?: React.ReactElement } @@ -89,7 +90,7 @@ export function NFTList(props: NFTListProps) { {SUPPORTED_CHAIN_IDS.map((x, i) => ( y.contractDetailed.chainId === x) ?? []} + tokens={tokens.filter((y) => y.chainId === x) ?? []} tokenInfo={tokenInfo} chainId={x} address={address} diff --git a/packages/mask/src/plugins/Avatar/Application/NFTListDialog.tsx b/packages/mask/src/plugins/Avatar/Application/NFTListDialog.tsx index 1488f4fc3deb..e0eef7044b40 100644 --- a/packages/mask/src/plugins/Avatar/Application/NFTListDialog.tsx +++ b/packages/mask/src/plugins/Avatar/Application/NFTListDialog.tsx @@ -1,5 +1,7 @@ import { makeStyles, useCustomSnackbar } from '@masknet/theme' -import { ChainId, ERC721TokenDetailed, isSameAddress, SocketState, useCollectibles } from '@masknet/web3-shared-evm' +import { ChainId, SchemaType } from '@masknet/web3-shared-evm' +import { isSameAddress, NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base' +import { useCollectibles } from '../hooks/useCollectibles' import { Box, Button, DialogActions, DialogContent, Skeleton, Stack, Typography } from '@mui/material' import { useCallback, useState, useEffect } from 'react' import { downloadUrl } from '../../../utils' @@ -11,7 +13,7 @@ import { Translate, useI18N } from '../locales' import { AddressNames } from './WalletList' import { NFTList } from './NFTList' import { Application_NFT_LIST_PAGE } from '../constants' -import { NetworkPluginID, useAccount, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3' +import { useChainId, useAccount, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3' import { NFTWalletConnect } from './WalletConnect' const useStyles = makeStyles()((theme) => ({ @@ -73,9 +75,9 @@ const useStyles = makeStyles()((theme) => ({ }, })) -function isSameToken(token?: ERC721TokenDetailed, tokenInfo?: TokenInfo) { +function isSameToken(token?: NonFungibleToken, tokenInfo?: TokenInfo) { if (!token && !tokenInfo) return false - return isSameAddress(token?.contractDetailed.address, tokenInfo?.address) && token?.tokenId === tokenInfo?.tokenId + return isSameAddress(token?.address, tokenInfo?.address) && token?.tokenId === tokenInfo?.tokenId } interface NFTListDialogProps { onNext: () => void @@ -87,14 +89,14 @@ interface NFTListDialogProps { export function NFTListDialog(props: NFTListDialogProps) { const { onNext, wallets, onSelected, tokenInfo } = props const { classes } = useStyles() - - const account = useAccount() + const account = useAccount(NetworkPluginID.PLUGIN_EVM) + const chainId = useChainId(NetworkPluginID.PLUGIN_EVM) const [open_, setOpen_] = useState(false) const [selectedAccount, setSelectedAccount] = useState('') - const [selectedToken, setSelectedToken] = useState() + const [selectedToken, setSelectedToken] = useState>() const [disabled, setDisabled] = useState(false) const t = useI18N() - const [tokens, setTokens] = useState([]) + const [tokens, setTokens] = useState>>([]) const [currentPage, setCurrentPage] = useState( Application_NFT_LIST_PAGE.Application_nft_tab_eth_page, ) @@ -102,27 +104,22 @@ export function NFTListDialog(props: NFTListDialogProps) { const POLYGON_PAGE = Application_NFT_LIST_PAGE.Application_nft_tab_polygon_page const currentPluginId = useCurrentWeb3NetworkPluginID() - const { - data: collectibles, - error, - retry, - state, - } = useCollectibles(selectedAccount, currentPage !== POLYGON_PAGE ? ChainId.Mainnet : ChainId.Matic) + const { collectibles, retry, error, loading } = useCollectibles() const { showSnackbar } = useCustomSnackbar() const onChange = useCallback((address: string) => { setSelectedAccount(address) }, []) - const onSelect = (token: ERC721TokenDetailed) => { + const onSelect = (token: NonFungibleToken) => { setSelectedToken(token) } const onSave = useCallback(async () => { - if (!selectedToken?.info?.imageURL) return + if (!selectedToken?.metadata?.imageURL) return setDisabled(true) try { - const image = await downloadUrl(selectedToken.info.imageURL) + const image = await downloadUrl(selectedToken.metadata.imageURL) onSelected({ image: URL.createObjectURL(image), account: selectedAccount, token: selectedToken }) onNext() setDisabled(false) @@ -146,8 +143,8 @@ export function NFTListDialog(props: NFTListDialogProps) { useEffect(() => setSelectedAccount(account || wallets?.[0]?.identity || ''), [account, wallets]) - const onAddClick = (token: ERC721TokenDetailed) => { - setTokens((_tokens) => uniqBy([..._tokens, token], (x) => x.contractDetailed.address && x.tokenId)) + const onAddClick = (token: NonFungibleToken) => { + setTokens((_tokens) => uniqBy([..._tokens, token], (x) => x.contract?.address && x.tokenId)) } const onChangePage = (name: Application_NFT_LIST_PAGE) => { @@ -206,7 +203,7 @@ export function NFTListDialog(props: NFTListDialogProps) { const NoNFTList = () => { if (currentPage === POLYGON_PAGE && tokens.length === 0) return AddCollectible else if (currentPage === POLYGON_PAGE && tokens.length) return - if (state !== SocketState.done) { + if (loading) { return LoadStatus } if (error) { @@ -241,7 +238,7 @@ export function NFTListDialog(props: NFTListDialogProps) { address={selectedAccount} onSelect={onSelect} onChangePage={onChangePage} - tokens={uniqBy([...tokens, ...collectibles], (x) => x.contractDetailed.address && x.tokenId)} + tokens={uniqBy([...tokens, ...collectibles], (x) => x.contract?.address && x.id)} children={NoNFTList()} /> )} diff --git a/packages/mask/src/plugins/Avatar/Application/NFTListPage.tsx b/packages/mask/src/plugins/Avatar/Application/NFTListPage.tsx index 065ead46a817..d8afc8b3dd32 100644 --- a/packages/mask/src/plugins/Avatar/Application/NFTListPage.tsx +++ b/packages/mask/src/plugins/Avatar/Application/NFTListPage.tsx @@ -1,11 +1,7 @@ +import { useImageChecker } from '@masknet/plugin-infra/web3' import { makeStyles } from '@masknet/theme' -import { - ChainId, - createERC721Token, - ERC721TokenDetailed, - EthereumTokenType, - useImageChecker, -} from '@masknet/web3-shared-evm' +import type { NonFungibleToken } from '@masknet/web3-shared-base' +import { ChainId, createERC721Token, SchemaType } from '@masknet/web3-shared-evm' import { Box, Skeleton } from '@mui/material' import { useState } from 'react' import { NFTImage } from '../SNSAdaptor/NFTImage' @@ -49,31 +45,19 @@ interface NFTListPageProps { chainId: ChainId address: string tokenInfo?: TokenInfo - tokens: ERC721TokenDetailed[] - onSelect?: (token: ERC721TokenDetailed) => void + tokens: Array> + onSelect?: (token: NonFungibleToken) => void children?: React.ReactElement } export function NFTListPage(props: NFTListPageProps) { const { classes } = useStyles() const { onSelect, chainId, tokenInfo, tokens, children } = props - const [selectedToken, setSelectedToken] = useState( - tokenInfo - ? createERC721Token( - { - name: '', - address: tokenInfo.address, - chainId, - symbol: '', - type: EthereumTokenType.ERC721, - }, - {}, - tokenInfo.tokenId, - ) - : undefined, + const [selectedToken, setSelectedToken] = useState | undefined>( + tokenInfo ? createERC721Token(chainId, tokenInfo.address, tokenInfo.tokenId) : undefined, ) - const onChange = (token: ERC721TokenDetailed) => { + const onChange = (token: NonFungibleToken) => { if (!token) return setSelectedToken(token) onSelect?.(token) @@ -84,7 +68,7 @@ export function NFTListPage(props: NFTListPageProps) { {children ?? - tokens.map((token: ERC721TokenDetailed, i) => ( + tokens.map((token: NonFungibleToken, i) => ( void - selectedToken?: ERC721TokenDetailed + token: NonFungibleToken + onChange: (token: NonFungibleToken) => void + selectedToken?: NonFungibleToken } function NFTImageCollectibleAvatar({ token, onChange, selectedToken }: NFTImageCollectibleAvatarProps) { const { classes } = useStyles() - const { value: isImageToken, loading } = useImageChecker(token.info?.imageURL) + const { value: isImageToken, loading } = useImageChecker(token.metadata?.imageURL) if (loading) return ( diff --git a/packages/mask/src/plugins/Avatar/Application/UploadAvatarDialog.tsx b/packages/mask/src/plugins/Avatar/Application/UploadAvatarDialog.tsx index c310ea817d8e..48654698c1ad 100644 --- a/packages/mask/src/plugins/Avatar/Application/UploadAvatarDialog.tsx +++ b/packages/mask/src/plugins/Avatar/Application/UploadAvatarDialog.tsx @@ -3,7 +3,8 @@ import AvatarEditor from 'react-avatar-editor' import { makeStyles, useCustomSnackbar } from '@masknet/theme' import { useCallback, useState } from 'react' import { NextIDStorage, Twitter, TwitterBaseAPI } from '@masknet/web3-providers' -import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm' +import { ChainId, SchemaType } from '@masknet/web3-shared-evm' +import type { NonFungibleToken } from '@masknet/web3-shared-base' import { getAvatarId } from '../../../social-network-adaptor/twitter.com/utils/user' import { usePersonaConnectStatus } from '../../../components/DataSource/usePersonaConnectStatus' import { BindingProof, fromHex, PersonaIdentifier, ProfileIdentifier, toBase64 } from '@masknet/shared-base' @@ -33,7 +34,7 @@ interface UploadAvatarDialogProps { account?: string isBindAccount?: boolean image?: string | File - token?: ERC721TokenDetailed + token?: NonFungibleToken proof?: BindingProof onBack: () => void onClose: () => void @@ -84,22 +85,23 @@ async function saveToNextID(info: NextIDAvatarMeta, persona?: PersonaIdentifier, async function Save( account: string, isBindAccount: boolean, - token: ERC721TokenDetailed, + token: NonFungibleToken, data: AvatarInfo, persona: PersonaIdentifier, proof: BindingProof, identifier: ProfileIdentifier, ) { - if (!data) return false + if (!data || !token.contract?.address) return false const info: NextIDAvatarMeta = { nickname: data.nickname, userId: data.userId, imageUrl: data.imageUrl, avatarId: data.avatarId, - address: token.contractDetailed.address, + address: token.contract?.address, tokenId: token.tokenId, - chainId: token.contractDetailed.chainId, + chainId: token.contract?.chainId ?? ChainId.Mainnet, + schema: token.contract?.schema ?? SchemaType.ERC20, } if (isBindAccount) { diff --git a/packages/mask/src/plugins/Avatar/Application/WalletConnect.tsx b/packages/mask/src/plugins/Avatar/Application/WalletConnect.tsx index 14f261fad9cd..cdfc012139c2 100644 --- a/packages/mask/src/plugins/Avatar/Application/WalletConnect.tsx +++ b/packages/mask/src/plugins/Avatar/Application/WalletConnect.tsx @@ -1,14 +1,15 @@ import { WalletMessages } from '@masknet/plugin-wallet' import { useRemoteControlledDialog } from '@masknet/shared-base-ui' import { makeStyles, useStylesExtends } from '@masknet/theme' -import { resolveProviderHomeLink, useProviderType } from '@masknet/web3-shared-evm' +import { providerResolver } from '@masknet/web3-shared-evm' +import { useProviderType } from '@masknet/plugin-infra/web3' import { Box, Button, Link, Typography } from '@mui/material' import { WalletIcon } from '../assets/wallet' import LaunchIcon from '@mui/icons-material/Launch' import { useI18N } from '../locales/i18n_generated' import type { HTMLProps } from 'react' import { ApplicationSmallIcon } from '../assets/application' -import { NetworkPluginID } from '@masknet/plugin-infra/web3' +import { NetworkPluginID } from '@masknet/web3-shared-base' const useStyles = makeStyles()((theme) => ({ root: { @@ -47,7 +48,7 @@ interface NFTWalletConnectProps extends withClasses<'root'> {} export function NFTWalletConnect(props: NFTWalletConnectProps) { const classes = useStylesExtends(useStyles(), props) - const providerType = useProviderType() + const providerType = useProviderType(NetworkPluginID.PLUGIN_EVM) const t = useI18N() const { setDialog: openSelectProviderDialog } = useRemoteControlledDialog( @@ -71,19 +72,21 @@ export function NFTWalletConnect(props: NFTWalletConnectProps) { Mask Network - - - + {providerType ? ( + + + + ) : null}