refactor: reduce use of web3-* packages

.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,

packages/mask/popups/pages/Wallet/Interaction/TransactionRequest.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
-import { NetworkPluginID } from '@masknet/shared-base'
+import { NetworkPluginID, toHex } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { useChainContext, usePrivyWallet, useWallet, useWeb3State } from '@masknet/web3-hooks-base'
 import { GasOptionType, MessageStateType, TransactionDescriptorType } from '@masknet/web3-shared-base'
@@ -15,12 +15,10 @@ import {
 } from '@masknet/web3-shared-evm'
 import { Box, Button, Typography } from '@mui/material'
 import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
-import { BigNumber } from 'bignumber.js'
 import { produce } from 'immer'
 import { compact, mapValues, omit } from 'lodash-es'
 import { useCallback, useEffect, useState } from 'react'
 import { useLatest } from 'react-use'
-import defer * as web3_utils from 'web3-utils'
 import { TransactionPreview } from '../../../components/TransactionPreview/index.js'
 import { UnlockERC20Token } from '../../../components/UnlockERC20Token/index.js'
 import { UnlockERC721Token } from '../../../components/UnlockERC721Token/index.js'
@@ -125,6 +123,8 @@ export function TransactionRequest(props: InteractionItemProps) {
         if (privyWallet) {
             const provider = await privyWallet.getEthereumProvider()
             const result: string = await provider.request(request.request.arguments)
+            // TODO:
+            // eslint-disable-next-line react-compiler/react-compiler
             mockingPrivyPid += 1
             await Message?.updateMessage(request.ID, {
                 request: request.request,
@@ -175,12 +175,12 @@ export function TransactionRequest(props: InteractionItemProps) {
                     ...(gasConfig ?
                         mapValues(omit(gasConfig, 'gasOptionType'), (value, key) => {
                             if (key === 'gasCurrency' || !value) return
-                            return web3_utils.toHex(value)
+                            return toHex(value)
                         })
                     :   {}),
-                    gasLimit: web3_utils.toHex(new BigNumber(gasConfig?.gas ?? x.gas).toString()),
-                    chainId: web3_utils.toHex(x.chainId),
-                    nonce: web3_utils.toHex(x.nonce),
+                    gasLimit: toHex(gasConfig?.gas ?? x.gas),
+                    chainId: toHex(x.chainId),
+                    nonce: toHex(x.nonce),
                 }
             }),
         )

packages/mask/popups/pages/Wallet/utils.ts

@@ -1,5 +1,4 @@
 import { mapKeys } from 'lodash-es'
-import defer * as web3_utils from 'web3-utils'
 import { EVMWeb3 } from '@masknet/web3-providers'
 import { ERC20Abi } from '@masknet/web3-contracts/types/ERC20.js'
 import { toFixed, type RecentTransaction } from '@masknet/web3-shared-base'
@@ -12,6 +11,7 @@ import {
 } from '@masknet/web3-shared-evm'
 import { ReplaceType, type GasSetting } from './type.js'
 import { GasSettingModal } from '../../modals/modal-controls.js'
+import { toHex } from '@masknet/shared-base'
 
 const MaxUint256 = toFixed('0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff')
 
@@ -38,7 +38,7 @@ export async function modifyTransaction(
     const newConfig = {
         ...candidate,
         ...oldGasSettings,
-        ...mapKeys(gasSettings, (value) => (typeof value === 'undefined' ? value : web3_utils.toHex(value))),
+        ...mapKeys(gasSettings, (value) => (typeof value === 'undefined' ? value : toHex(value))),
     }
     if (replaceType === ReplaceType.CANCEL) {
         await EVMWeb3.cancelTransaction(transaction.id, newConfig, {

packages/plugins/ArtBlocks/src/hooks/useArtBlocksContract.ts

@@ -1,11 +1,12 @@
-import type { AbiItem } from 'web3-utils'
 import { useContract } from '@masknet/web3-hooks-evm'
 import { type ChainId, useArtBlocksConstants } from '@masknet/web3-shared-evm'
-import ArtBlocksCoreContractABI from '@masknet/web3-contracts/abis/ArtBlocksMinterContract.json' with { type: 'json' }
 
-import type { ArtBlocksMinterContract } from '@masknet/web3-contracts/types/ArtBlocksMinterContract.js'
+import {
+    ArtBlocksMinterContractAbi,
+    type ArtBlocksMinterContract,
+} from '@masknet/web3-contracts/types/ArtBlocksMinterContract.js'
 
 export function useArtBlocksContract(chainId: ChainId) {
     const { GEN_ART_721_MINTER } = useArtBlocksConstants(chainId)
-    return useContract<ArtBlocksMinterContract>(chainId, GEN_ART_721_MINTER, ArtBlocksCoreContractABI as AbiItem[])
+    return useContract<ArtBlocksMinterContract>(chainId, GEN_ART_721_MINTER, ArtBlocksMinterContractAbi)
 }

packages/plugins/Claim/src/hooks/useAirDropActivity.ts

@@ -1,13 +1,14 @@
 import { last } from 'lodash-es'
-import defer * as web3_utils from 'web3-utils'
 // cspell:disable-next-line
 import { MerkleTree } from 'merkletreejs'
 import { secondsToMilliseconds } from 'date-fns'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { Airdrop } from '@masknet/web3-providers'
 import { isSameAddress } from '@masknet/web3-shared-base'
-import { type ChainId, formatEtherToWei, pack } from '@masknet/web3-shared-evm'
+import { type ChainId, formatEtherToWei } from '@masknet/web3-shared-evm'
 import { useQuery } from '@tanstack/react-query'
+import { encodePacked, keccak256, type Hex } from 'viem'
+import { toHex } from '@masknet/shared-base'
 
 export function useAirDropActivity(chainId: ChainId) {
     const { account } = useChainContext()
@@ -22,13 +23,23 @@ export function useAirDropActivity(chainId: ChainId) {
             const claimerList = Object.entries(claimers)
             const claimer = claimerList.find(([address]) => isSameAddress(address, account))
             const airdropList = claimerList.map(([address, amount]) => {
-                return web3_utils.keccak256(pack(['address', 'uint256'], [address, formatEtherToWei(amount)]))
+                return encodePacked(
+                    ['address', 'uint256'],
+                    [address as Hex, BigInt(formatEtherToWei(amount).toFixed(0))],
+                )
+            })
+            const merkleTree = new MerkleTree(airdropList, (value: Buffer) => keccak256(toHex(value)), {
+                sortPairs: true,
             })
-            const merkleTree = new MerkleTree(airdropList, web3_utils.keccak256, { sortPairs: true })
             const amount = claimer ? last(claimer) : undefined
             const leaf =
                 amount ?
-                    web3_utils.keccak256(pack(['address', 'uint256'], [account, formatEtherToWei(amount)]))
+                    keccak256(
+                        encodePacked(
+                            ['address', 'uint256'],
+                            [account as Hex, BigInt(formatEtherToWei(amount).toFixed(0))],
+                        ),
+                    )
                 :   undefined
 
             const merkleProof = leaf ? merkleTree.getHexProof(leaf) : undefined

packages/plugins/Claim/src/hooks/useClaimAirdrop.tsx

@@ -1,9 +1,7 @@
 import { useRef, useCallback } from 'react'
 import { useAsyncFn } from 'react-use'
-import type { AbiItem } from 'web3-utils'
 import { useTheme } from '@mui/material'
-import type { AirdropV2 } from '@masknet/web3-contracts/types/AirdropV2.js'
-import AirDropV2ABI from '@masknet/web3-contracts/abis/AirdropV2.json' with { type: 'json' }
+import { AirdropV2Abi, type AirdropV2 } from '@masknet/web3-contracts/types/AirdropV2.js'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { useContract } from '@masknet/web3-hooks-evm'
 import {
@@ -31,7 +29,7 @@ export function useClaimAirdrop(
     const theme = useTheme()
     const { account, providerType, chainId: globalChainId } = useChainContext()
     const { CONTRACT_ADDRESS } = useAirdropClaimersConstants(chainId)
-    const airdropContract = useContract<AirdropV2>(chainId, CONTRACT_ADDRESS, AirDropV2ABI as AbiItem[])
+    const airdropContract = useContract<AirdropV2>(chainId, CONTRACT_ADDRESS, AirdropV2Abi)
 
     const { setDialog } = useRemoteControlledDialog(PluginClaimMessage.claimSuccessDialogEvent)