refactor: reduce use of web3-* packages (#12373)

Co-authored-by: Jack-Works <Jack-Works@users.noreply.github.com>

Author: Jack-Works

.vscode/settings.json

@@ -1,7 +1,8 @@
 {
-    "typescript.tsdk": "node_modules/typescript/lib",
-    "typescript.preferences.importModuleSpecifierEnding": "js",
-    "typescript.experimental.useTsgo": true,
+    "js/ts.tsdk.path": "node_modules/typescript/lib",
+    "js/ts.preferences.importModuleSpecifierEnding": "js",
+    // https://github.com/microsoft/typescript-go/issues/2780
+    "js/ts.experimental.useTsgo": false,
     "js/ts.implicitProjectConfig.module": "NodeNext",
     "js/ts.implicitProjectConfig.target": "ESNext",
     "editor.formatOnSave": true,

eslint.config.js

@@ -465,6 +465,12 @@ const moduleSystemRules = {
                     message: 'Avoid using type unsafe methods.',
                     importNames: ['get'],
                 },
+                {
+                    name: 'viem',
+                    message:
+                        'Use toHex from @masknet/shared-base. They have different behaviors on "0x-" strings. If you want to use the original toHex, import it like import { toHex as viem_toHex } from "viem".',
+                    importNames: ['toHex'],
+                },
                 {
                     name: 'react-use',
                     importNames: ['useLocalStorage'],

packages/mask/background/services/helper/firefly.ts

@@ -74,7 +74,7 @@ export async function encrypt(plainText: string, cryptoKey: string): Promise<str
     )
 
     const hex = toHex(new Uint8Array(encryptedBuffer))
-    return hex.startsWith('0x') ? hex.slice(2) : hex
+    return hex.slice(2)
 }
 
 export interface DesktopLinkInfoResponse {

packages/mask/background/services/wallet/services/legacyWallet.ts

@@ -45,7 +45,7 @@ async function makePrivateKey(record: LegacyWalletRecord) {
         record._private_key_ ?
             await recoverWalletFromPrivateKey(record._private_key_)
         :   await recoverWalletFromMnemonicWords(record.mnemonic, record.passphrase, record.path)
-    return `0x${toHex(privateKey)}`
+    return toHex(privateKey)
 }
 
 async function recoverWalletFromMnemonicWords(
@@ -64,7 +64,7 @@ async function recoverWalletFromMnemonicWords(
         address: wallet_ts.EthereumAddress.from(walletPublicKey).address,
         privateKey: walletPrivateKey,
         privateKeyValid: true,
-        privateKeyInHex: `0x${toHex(walletPrivateKey)}`,
+        privateKeyInHex: toHex(walletPrivateKey),
         path,
         mnemonic,
         passphrase,

packages/mask/background/services/wallet/services/wallet/index.ts

@@ -1,14 +1,14 @@
 import * as bip39 from 'bip39'
 import { first, last, omit } from 'lodash-es'
-import defer * as web3_utils from 'web3-utils'
 import { toBytes } from '@ethereumjs/util'
 import { api } from '@dimensiondev/mask-wallet-core/proto'
 import { Signer } from '@masknet/web3-providers'
-import { ImportSource, type SignMessage, type Wallet } from '@masknet/shared-base'
+import { ImportSource, toHex, type SignMessage, type Wallet } from '@masknet/shared-base'
 import { HD_PATH_WITHOUT_INDEX_ETHEREUM } from '@masknet/web3-shared-base'
 import * as Mask from '../maskwallet/index.js'
 import * as database from './database/index.js'
 import * as password from './password.js'
+import { keccak256 } from 'viem'
 
 const MAX_DERIVE_COUNT = 99
 
@@ -60,9 +60,7 @@ export async function createMnemonicWords() {
 }
 
 export async function createMnemonicId(mnemonic: string) {
-    const id = web3_utils.sha3(mnemonic)
-    if (!id) throw new Error('Failed to create mnemonic id.')
-    return id
+    return keccak256(toHex(mnemonic))
 }
 
 export async function getPrimaryWalletByMnemonicId(mnemonicId?: string) {

packages/mask/content-script/site-adaptors/twitter.com/collecting/post.ts

@@ -1,8 +1,7 @@
 import { memoize } from 'lodash-es'
-import defer * as web3_utils from 'web3-utils'
 import { IntervalWatcher } from '@dimensiondev/holoflows-kit'
 import type { PostInfo } from '@masknet/plugin-infra/content-script'
-import { EnhanceableSite, PostIdentifier, ProfileIdentifier } from '@masknet/shared-base'
+import { EnhanceableSite, PostIdentifier, ProfileIdentifier, toHex } from '@masknet/shared-base'
 import {
     FlattenTypedMessage,
     extractTextFromTypedMessage,
@@ -29,6 +28,7 @@ import {
     toastLinkSelector,
 } from '../utils/selector.js'
 import { IdentityProviderTwitter } from './identity.js'
+import { keccak256 } from 'viem'
 
 function getParentTweetNode(node: HTMLElement) {
     return node.closest<HTMLElement>('[data-testid="tweet"]')
@@ -122,7 +122,7 @@ function registerPostCollectorInner(
             const tweetNode = getTweetNode(node)
             const parentTweetNode = isQuotedTweet(tweetNode) ? getParentTweetNode(tweetNode!) : null
             if (!tweetNode || shouldSkipDecrypt(node, tweetNode)) {
-                return `keccak256:${web3_utils.keccak256(node.innerText)}`
+                return `keccak256:${keccak256(toHex(node.innerText))}`
             }
             const parentTweetId = parentTweetNode ? getPostId(parentTweetNode) : ''
             const tweetId = getPostId(tweetNode)

packages/mask/content-script/site-adaptors/twitter.com/utils/fetch.ts

@@ -1,4 +1,3 @@
-import defer * as web3_utils from 'web3-utils'
 import { flattenDeep } from 'lodash-es'
 import { normalizeImageURL, parseId } from './url.js'
 import {
@@ -16,6 +15,8 @@ import {
 } from '@masknet/typed-message'
 import { collectNodeText, collectTwitterEmoji } from '../../../utils/index.js'
 import { IMAGE_RENDER_IGNORE } from '../customization/render-fragments.js'
+import { keccak256 } from 'viem'
+import { toHex } from '@masknet/shared-base'
 
 /**
  * Get post id from dom, including normal tweet, quoted tweet and retweet one
@@ -38,9 +39,9 @@ export function getPostId(node: HTMLElement) {
     } else if (timeNode) {
         // Quoted tweet in timeline has no a status link to detail page,
         // so use the timestamp as post id instead
-        pid = `timestamp-keccak256:${web3_utils.keccak256(timeNode.getAttribute('datetime')!)}`
+        pid = `timestamp-keccak256:${keccak256(toHex(timeNode.getAttribute('datetime')!))}`
     } else {
-        pid = `keccak256:${web3_utils.keccak256(node.innerText)}`
+        pid = `keccak256:${keccak256(toHex(node.innerText))}`
     }
 
     // You can't retweet a tweet or a retweet, but only cancel retweeting

packages/mask/dashboard/pages/CreateMaskWallet/AddDeriveWallet/index.tsx

@@ -3,11 +3,10 @@ import urlcat from 'urlcat'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { useAsyncFn } from 'react-use'
 import { useLocation, useNavigate } from 'react-router-dom'
-import defer * as web3_utils from 'web3-utils'
 import { useQueries, useQuery } from '@tanstack/react-query'
 import { delay } from '@masknet/kit'
 import { DeriveWalletTable } from '@masknet/shared'
-import { DashboardRoutes, EMPTY_LIST } from '@masknet/shared-base'
+import { DashboardRoutes, EMPTY_LIST, toHex } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { useWallet, useWallets } from '@masknet/web3-hooks-base'
 import { EVMWeb3 } from '@masknet/web3-providers'
@@ -28,6 +27,7 @@ import { SetupFrameController } from '../../../components/SetupFrame/index.js'
 import { ResetWalletContext } from '../context.js'
 import Services from '#services'
 import { Trans } from '@lingui/react/macro'
+import { keccak256 } from 'viem'
 
 const useStyles = makeStyles()((theme) => ({
     header: {
@@ -85,7 +85,7 @@ export const Component = memo(function AddDeriveWallet() {
 
     const { mnemonic, password, isReset } = state
     // Avoid leaking mnemonic to react-query
-    const mnemonicHash = web3_utils.sha3(mnemonic)
+    const mnemonicHash = keccak256(toHex(mnemonic))
     const [pathIndexes, setPathIndexes] = useState<number[]>([])
     const { handlePasswordAndWallets } = ResetWalletContext.useContainer()
 

packages/mask/popups/pages/Wallet/GasSetting/GasSetting1559.tsx

@@ -4,14 +4,13 @@ import { useNavigate } from 'react-router-dom'
 import { Controller, useForm } from 'react-hook-form'
 import { isEmpty } from 'lodash-es'
 import { z as zod } from 'zod'
-import defer * as web3_utils from 'web3-utils'
 import { BigNumber } from 'bignumber.js'
 import { makeStyles } from '@masknet/theme'
 import { formatGweiToEther, formatGweiToWei, formatWeiToEther, formatWeiToGwei } from '@masknet/web3-shared-evm'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Typography } from '@mui/material'
 import { LoadingButton } from '@mui/lab'
-import { NetworkPluginID, PopupRoutes, NUMERIC_INPUT_REGEXP_PATTERN } from '@masknet/shared-base'
+import { NetworkPluginID, PopupRoutes, NUMERIC_INPUT_REGEXP_PATTERN, toHex } from '@masknet/shared-base'
 import {
     formatCurrency,
     GasOptionType,
@@ -31,6 +30,7 @@ import { StyledInput } from '../../../components/StyledInput/index.js'
 import Services from '#services'
 import { FormattedCurrency } from '@masknet/shared'
 import { Trans, useLingui } from '@lingui/react/macro'
+import { formatGwei } from 'viem'
 
 const useStyles = makeStyles()((theme) => ({
     options: {
@@ -236,9 +236,9 @@ export const GasSetting1559 = memo(() => {
         if (value.formatterTransaction._tx.maxFeePerGas && value.formatterTransaction._tx.maxPriorityFeePerGas) {
             setValue(
                 'maxPriorityFeePerGas',
-                web3_utils.fromWei(toFixed(value.formatterTransaction._tx.maxPriorityFeePerGas), 'gwei'),
+                formatGwei(BigInt(toFixed(value.formatterTransaction._tx.maxPriorityFeePerGas))),
             )
-            setValue('maxFeePerGas', web3_utils.fromWei(toFixed(value.formatterTransaction._tx.maxFeePerGas), 'gwei'))
+            setValue('maxFeePerGas', formatGwei(BigInt(toFixed(value.formatterTransaction._tx.maxFeePerGas))))
         } else {
             setOption(1)
         }
@@ -268,9 +268,9 @@ export const GasSetting1559 = memo(() => {
                 param === 'latest' ? param : (
                     {
                         ...Object(param),
-                        gas: web3_utils.toHex(new BigNumber(data.gasLimit).toString()),
-                        maxPriorityFeePerGas: web3_utils.toHex(formatGweiToWei(data.maxPriorityFeePerGas).toFixed(0)),
-                        maxFeePerGas: web3_utils.toHex(formatGweiToWei(data.maxFeePerGas).toFixed(0)),
+                        gas: toHex(data.gasLimit),
+                        maxPriorityFeePerGas: toHex(formatGweiToWei(data.maxPriorityFeePerGas).toFixed(0)),
+                        maxFeePerGas: toHex(formatGweiToWei(data.maxFeePerGas).toFixed(0)),
                     }
                 ),
             )

packages/mask/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx

@@ -4,10 +4,9 @@ import { Controller, useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 import { BigNumber } from 'bignumber.js'
 import { isEmpty } from 'lodash-es'
-import defer * as web3_utils from 'web3-utils'
 import { z as zod } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { NetworkPluginID, NUMERIC_INPUT_REGEXP_PATTERN, PopupRoutes } from '@masknet/shared-base'
+import { NetworkPluginID, NUMERIC_INPUT_REGEXP_PATTERN, PopupRoutes, toHex } from '@masknet/shared-base'
 import { Typography } from '@mui/material'
 import { LoadingButton } from '@mui/lab'
 import { useChainContext, useGasOptions, useNativeToken, useNativeTokenPrice } from '@masknet/web3-hooks-base'
@@ -228,8 +227,8 @@ export const Prior1559GasSetting = memo(() => {
             if (!value) return
             const config = value.payload.params!.map((param) => ({
                 ...Object(param),
-                gas: web3_utils.toHex(new BigNumber(data.gasLimit).toString()),
-                gasPrice: web3_utils.toHex(formatGweiToWei(data.gasPrice).toString()),
+                gas: toHex(data.gasLimit),
+                gasPrice: toHex(formatGweiToWei(data.gasPrice).toFixed(0)),
             }))
             await Services.Wallet.updateUnconfirmedRequest({
                 ...value.payload,