diff --git a/.github/workflows/deploy-proxy.yml b/.github/workflows/deploy-proxy.yml
index 9bd3176fa268..3bcc0997a8c6 100644
--- a/.github/workflows/deploy-proxy.yml
+++ b/.github/workflows/deploy-proxy.yml
@@ -1,7 +1,8 @@
 name: Publish Proxy Package
 
 on:
-  workflow_dispatch:
+  push:
+    branches: [fix/nftscan-image-url]
 jobs:
   build:
     runs-on: ubuntu-20.04
diff --git a/cspell.json b/cspell.json
index b26de3d954c0..fd922f7317f4 100644
--- a/cspell.json
+++ b/cspell.json
@@ -275,6 +275,7 @@
         "nrge",
         "nrgt",
         "nyfi",
+        "okex",
         "openocean",
         "pausable",
         "pkts",
@@ -287,6 +288,7 @@
         "redpackets",
         "renfil",
         "shapeclip",
+        "ssrb",
         "steth",
         "swaptoken",
         "testweb",
diff --git a/package.json b/package.json
index f3673747e6e7..d1c6a2792c9a 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "yarn": ">=999.0.0",
     "npm": ">=999.0.0"
   },
-  "version": "2.7.0",
+  "version": "2.8.1",
   "private": true,
   "license": "AGPL-3.0-or-later",
   "scripts": {
diff --git a/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx b/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx
index d782c2df2c3c..88763228ff6d 100644
--- a/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx
@@ -122,10 +122,13 @@ export const Balance = memo<BalanceCardProps>(
                 </Box>
                 {showOperations && (
                     <ButtonGroup>
-                        <Button size="small" onClick={onSend} endIcon={<SendIcon fontSize="inherit" />}>
+                        <Button
+                            size="small"
+                            onClick={onSend}
+                            endIcon={<SendIcon style={{ fill: '#fff' }} fontSize="inherit" />}>
                             {t.wallets_balance_Send()}
                         </Button>
-                        <Button size="small" onClick={onBuy} endIcon={<CardIcon fill="none" fontSize="inherit" />}>
+                        <Button size="small" onClick={onBuy} endIcon={<CardIcon fontSize="inherit" />}>
                             {t.wallets_balance_Buy()}
                         </Button>
                         <Button size="small" onClick={onSwap} endIcon={<SwapIcon fontSize="inherit" />}>
diff --git a/packages/icons/general/Copy.tsx b/packages/icons/general/Copy.tsx
index cfc5ae8e708c..71387634955f 100644
--- a/packages/icons/general/Copy.tsx
+++ b/packages/icons/general/Copy.tsx
@@ -7,13 +7,11 @@ export const CopyIcon = createIcon(
             fillRule="evenodd"
             clipRule="evenodd"
             d="M7.736 12.538c-.898 0-1.68-.267-2.244-.793-.566-.53-.858-1.273-.858-2.117V4.882c0-.84.29-1.58.852-2.109.558-.525 1.335-.795 2.226-.8h.003l4.383-.001c.898 0 1.68.267 2.244.793.566.53.858 1.273.858 2.117v4.746c0 .84-.29 1.58-.852 2.109-.558.525-1.335.794-2.226.8h-.003l-4.383.001v-.533.533Zm0-1.066c-.689 0-1.19-.203-1.516-.507-.32-.3-.52-.745-.52-1.337V4.882c0-.588.198-1.032.516-1.332.322-.303.82-.506 1.5-.51h.002l4.38-.002c.689 0 1.19.203 1.515.507.321.3.52.745.52 1.337v4.746c0 .588-.197 1.032-.516 1.332-.321.302-.818.506-1.5.51l-4.381.002Z"
-            fill="#767F8D"
         />
         <path
             fillRule="evenodd"
             clipRule="evenodd"
             d="M5.41 14.615c-.898 0-1.68-.267-2.243-.793-.567-.53-.86-1.273-.86-2.117V6.959c0-1.084.484-1.986 1.37-2.489a.533.533 0 1 1 .526.928c-.514.292-.828.816-.828 1.561v4.746c0 .592.199 1.037.52 1.337.325.304.826.507 1.515.507l4.382-.002c.763-.005 1.295-.259 1.612-.628a.533.533 0 1 1 .81.695c-.563.654-1.418.994-2.418 1h-.003l-4.383.001v-.533.533Z"
-            fill="#767F8D"
         />
     </g>,
     '0 0 16 17',
diff --git a/packages/mask/background/network/gun/encryption/queryPostKey.ts b/packages/mask/background/network/gun/encryption/queryPostKey.ts
index b5fecca3f820..b321a06eaf98 100644
--- a/packages/mask/background/network/gun/encryption/queryPostKey.ts
+++ b/packages/mask/background/network/gun/encryption/queryPostKey.ts
@@ -1,10 +1,10 @@
-import { decodeArrayBuffer, encodeArrayBuffer } from '@dimensiondev/kit'
-import type { DecryptStaticECDH_PostKey, EncryptionResultE2EMap } from '@masknet/encryption'
+import { decodeArrayBuffer, encodeArrayBuffer, isNonNull, unreachable } from '@dimensiondev/kit'
+import { type DecryptStaticECDH_PostKey, type EncryptionResultE2EMap, SocialNetworkEnum } from '@masknet/encryption'
 import type { EC_Public_CryptoKey, EC_Public_JsonWebKey } from '@masknet/shared-base'
 import { CryptoKeyToJsonWebKey } from '../../../../utils-pure'
 import { getGunData, pushToGunDataArray, subscribeGunMapData } from '@masknet/gun-utils'
 import { EventIterator } from 'event-iterator'
-import { noop } from 'lodash-unified'
+import { isObject, noop, uniq } from 'lodash-unified'
 import { queryPublicKey } from '../../../database/persona/helper'
 
 // !!! Change how this file access Gun will break the compatibility of v40 payload decryption.
@@ -36,31 +36,47 @@ namespace Version38Or39 {
         version: -38 | -39,
         iv: Uint8Array,
         minePublicKey: EC_Public_CryptoKey,
-        networkHint: string,
+        network: SocialNetworkEnum,
         abortSignal: AbortSignal,
     ): AsyncGenerator<DecryptStaticECDH_PostKey, void, undefined> {
         const minePublicKeyJWK = await CryptoKeyToJsonWebKey(minePublicKey)
-        const { keyHash, postHash } = await calculatePostKeyPartition(version, networkHint, iv, minePublicKeyJWK)
+        const { keyHash, postHash } = await calculatePostKeyPartition(version, network, iv, minePublicKeyJWK)
 
         /* cspell:disable-next-line */
         // ? In this step we get something like ["jzarhbyjtexiE7aB1DvQ", "jzarhuse6xlTAtblKRx9"]
-        console.log(`[@masknet/encryption] Reading key partition [${postHash}][${keyHash}]`)
-        const internalNodeNames = Object.keys((await getGunData(postHash, keyHash)) || {}).filter((x) => x !== '_')
+        console.log(
+            `[@masknet/encryption] Reading key partition [${postHash[0]}][${keyHash}] and [${postHash[1]}][${keyHash}]`,
+        )
+        const internalNodeNames = uniq(
+            (
+                await Promise.all([
+                    //
+                    getGunData(postHash[0], keyHash),
+                    getGunData(postHash[1], keyHash),
+                ])
+            )
+                .filter(isNonNull)
+                .filter(isObject)
+                .map(Object.keys)
+                .flat()
+                .filter((x) => x !== '_'),
+        )
         // ? In this step we get all keys in this category (gun2[postHash][keyHash])
         const resultPromise = internalNodeNames.map((key) => getGunData(key))
 
         const iter = new EventIterator<DecryptStaticECDH_PostKey>((queue) => {
+            // immediate results
             for (const result of resultPromise) result.then(emit, noop)
-
-            async function main() {
-                const iter = subscribeGunMapData([postHash], isValidData, abortSignal)
-                for await (const data of iter) emit(data)
-                queue.stop()
+            // future results
+            Promise.all([
+                main(subscribeGunMapData([postHash[1]], isValidData, abortSignal)),
+                main(subscribeGunMapData([postHash[0]], isValidData, abortSignal)),
+            ]).then(() => queue.stop())
+
+            async function main(keyProvider: AsyncGenerator<unknown>) {
+                for await (const data of keyProvider) emit(data)
             }
-
-            main()
-
-            function emit(result: any) {
+            function emit(result: unknown) {
                 if (abortSignal.aborted) return
                 if (!isValidData(result)) return
                 queue.push({
@@ -86,10 +102,10 @@ namespace Version38Or39 {
     export async function publishPostAESKey_version39Or38(
         version: -39 | -38,
         postIV: Uint8Array,
-        networkHint: string,
+        network: SocialNetworkEnum,
         receiversKeys: PublishedAESKeyRecord[] | EncryptionResultE2EMap,
     ) {
-        const postHash = await hashIV(networkHint, postIV)
+        const [postHash] = await hashIV(network, postIV)
         if (Array.isArray(receiversKeys)) {
             // Store AES key to gun
             receiversKeys.forEach(async ({ aesKey, receiverKey }) => {
@@ -137,23 +153,34 @@ namespace Version38Or39 {
 
     async function calculatePostKeyPartition(
         version: -38 | -39,
-        networkHint: string,
+        network: SocialNetworkEnum,
         iv: Uint8Array,
         key: EC_Public_JsonWebKey,
     ) {
-        const postHash = await hashIV(networkHint, iv)
+        const postHash = await hashIV(network, iv)
         // In version > -39, we will use stable hash to prevent unstable result for key hashing
 
         const keyHash = version === -39 ? await hashKey39(key) : await hashKey38(key)
         return { postHash, keyHash }
     }
 
-    async function hashIV(networkHint: string, iv: Uint8Array) {
+    async function hashIV(network: SocialNetworkEnum, iv: Uint8Array): Promise<[string, string]> {
         const hashPair = '9283464d-ee4e-4e8d-a7f3-cf392a88133f'
         const N = 2
 
-        const hash = await work(encodeArrayBuffer(iv), hashPair)
-        return networkHint + '-' + hash.slice(0, N)
+        const hash = (await work(encodeArrayBuffer(iv), hashPair)).slice(0, N)
+        const networkHint = getNetworkHint(network)
+        return [`${networkHint}${hash}`, `${networkHint}-${hash}`]
+    }
+
+    function getNetworkHint(x: SocialNetworkEnum) {
+        if (x === SocialNetworkEnum.Facebook) return ''
+        if (x === SocialNetworkEnum.Twitter) return 'twitter-'
+        if (x === SocialNetworkEnum.Minds) return 'minds-'
+        if (x === SocialNetworkEnum.Instagram) return 'instagram-'
+        if (x === SocialNetworkEnum.Unknown)
+            throw new TypeError('[@masknet/encryption] Current SNS network is not correctly configured.')
+        unreachable(x)
     }
 
     // The difference between V38 and V39 is: V39 is not stable (JSON.stringify)
diff --git a/packages/mask/background/services/crypto/appendEncryption.ts b/packages/mask/background/services/crypto/appendEncryption.ts
index 9eacc2f45ed2..85913162c69b 100644
--- a/packages/mask/background/services/crypto/appendEncryption.ts
+++ b/packages/mask/background/services/crypto/appendEncryption.ts
@@ -1,4 +1,10 @@
-import { appendEncryptionTarget, EC_Key, EC_KeyCurveEnum, SupportedPayloadVersions } from '@masknet/encryption'
+import {
+    appendEncryptionTarget,
+    EC_Key,
+    EC_KeyCurveEnum,
+    SocialNetworkEnum,
+    SupportedPayloadVersions,
+} from '@masknet/encryption'
 import type { EC_Public_CryptoKey, PostIVIdentifier, ProfileIdentifier } from '@masknet/shared-base'
 import { deriveAESByECDH, queryPublicKey } from '../../database/persona/helper'
 import { updatePostDB, queryPostDB } from '../../database/post'
@@ -10,6 +16,7 @@ export async function appendShareTarget(
     post: PostIVIdentifier,
     target: ProfileIdentifier[],
     whoAmI: ProfileIdentifier,
+    network: SocialNetworkEnum,
 ): Promise<void> {
     if (version === -39 || version === -40) throw new TypeError('invalid version')
     const key = await getPostKeyCache(post)
@@ -38,7 +45,7 @@ export async function appendShareTarget(
         },
     )
 
-    publishPostAESKey_version39Or38(-38, post.toIV(), whoAmI.network, e2e)
+    publishPostAESKey_version39Or38(-38, post.toIV(), network, e2e)
 
     updatePostDB(
         {
diff --git a/packages/mask/background/services/crypto/decryption.ts b/packages/mask/background/services/crypto/decryption.ts
index 22d2640a2238..d38f57442e67 100644
--- a/packages/mask/background/services/crypto/decryption.ts
+++ b/packages/mask/background/services/crypto/decryption.ts
@@ -1,4 +1,4 @@
-import { encodeArrayBuffer, unreachable } from '@dimensiondev/kit'
+import { encodeArrayBuffer } from '@dimensiondev/kit'
 import {
     decrypt,
     parsePayload,
@@ -158,7 +158,7 @@ async function* decryption(payload: string | Uint8Array, context: DecryptionCont
                     -38,
                     iv,
                     author,
-                    getNetworkHint(context.currentSocialNetwork),
+                    context.currentSocialNetwork,
                     signal || new AbortController().signal,
                 )
             },
@@ -170,7 +170,7 @@ async function* decryption(payload: string | Uint8Array, context: DecryptionCont
                     -39,
                     iv,
                     author,
-                    getNetworkHint(context.currentSocialNetwork),
+                    context.currentSocialNetwork,
                     signal || new AbortController().signal,
                 )
             },
@@ -185,16 +185,6 @@ async function* decryption(payload: string | Uint8Array, context: DecryptionCont
     return null
 }
 
-function getNetworkHint(x: SocialNetworkEnum) {
-    if (x === SocialNetworkEnum.Facebook) return ''
-    if (x === SocialNetworkEnum.Twitter) return 'twitter-'
-    if (x === SocialNetworkEnum.Minds) return 'minds-'
-    if (x === SocialNetworkEnum.Instagram) return 'instagram-'
-    if (x === SocialNetworkEnum.Unknown)
-        throw new TypeError('[@masknet/encryption] Current SNS network is not correctly configured.')
-    unreachable(x)
-}
-
 /** @internal */
 export async function getPostKeyCache(id: PostIVIdentifier) {
     const post = await queryPostDB(id)
diff --git a/packages/mask/background/services/crypto/encryption.ts b/packages/mask/background/services/crypto/encryption.ts
index 6f3a30844055..17f3d8774732 100644
--- a/packages/mask/background/services/crypto/encryption.ts
+++ b/packages/mask/background/services/crypto/encryption.ts
@@ -7,6 +7,8 @@ import {
     EncryptionResultE2EMap,
     EncryptTargetE2E,
     EncryptTargetPublic,
+    SocialNetworkEnum,
+    SocialNetworkEnumToProfileDomain,
 } from '@masknet/encryption'
 import { encryptByLocalKey, deriveAESByECDH, queryPublicKey } from '../../database/persona/helper'
 import { savePostKeyToDB } from '../../database/post/helper'
@@ -18,13 +20,11 @@ export async function encryptTo(
     content: SerializableTypedMessages,
     target: EncryptTargetPublic | EncryptTargetE2E,
     whoAmI: ProfileIdentifier | undefined,
-    IdentifierNetwork: string,
+    network: SocialNetworkEnum,
 ): Promise<string> {
-    // always use identifier network from ProfileIdentifier if possible.
-    if (whoAmI) IdentifierNetwork = whoAmI.network
     const { identifier, output, postKey, e2e } = await encrypt(
         {
-            network: IdentifierNetwork,
+            network: whoAmI?.network || SocialNetworkEnumToProfileDomain(network),
             author: whoAmI,
             message: content,
             target,
@@ -59,7 +59,7 @@ export async function encryptTo(
     })().catch((error) => console.error('[@masknet/encryption] Failed to save post key to DB', error))
 
     if (target.type === 'E2E') {
-        publishPostAESKey_version39Or38(-38, identifier.toIV(), IdentifierNetwork, e2e!)
+        publishPostAESKey_version39Or38(-38, identifier.toIV(), network, e2e!)
     }
     if (typeof output !== 'string') throw new Error('version -37 is not enabled yet!')
     return output
diff --git a/packages/mask/background/services/identity/persona/sign.ts b/packages/mask/background/services/identity/persona/sign.ts
index c9df9f86e9c2..0874941e056b 100644
--- a/packages/mask/background/services/identity/persona/sign.ts
+++ b/packages/mask/background/services/identity/persona/sign.ts
@@ -12,7 +12,7 @@ import { MaskMessages } from '../../../../shared'
 import { PersonaIdentifier, fromBase64URL, PopupRoutes, ECKeyIdentifier } from '@masknet/shared-base'
 import { queryPersonasWithPrivateKey } from '../../../../background/database/persona/db'
 import { openPopupWindow } from '../../../../background/services/helper'
-import { delay } from '@dimensiondev/kit'
+import { delay, encodeText } from '@dimensiondev/kit'
 export interface SignRequest {
     /** Use that who to sign this message. */
     identifier?: PersonaIdentifier
@@ -56,8 +56,7 @@ export async function generateSignResult(signer: ECKeyIdentifier, message: strin
     const persona = (await queryPersonasWithPrivateKey()).find((x) => x.identifier === signer)
     if (!persona) throw new Error('Persona not found')
 
-    // will have problem with UTF-8?
-    const length = message.length
+    const length = encodeText(message).length
     const messageHash = keccakFromString(`\x19Ethereum Signed Message:\n${length}${message}`, 256)
     const privateKey = Buffer.from(fromBase64URL(persona.privateKey.d!))
     const signature = ecsign(messageHash, privateKey)
diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
index 5471db0b8fa6..a23d1f59150e 100644
--- a/packages/mask/shared-ui/locales/en-US.json
+++ b/packages/mask/shared-ui/locales/en-US.json
@@ -64,7 +64,8 @@
     "compose_encrypt_visible_to_all_sub": "Everyone",
     "compose_encrypt_visible_to_private": "Private",
     "compose_encrypt_visible_to_private_sub": "Just Me",
-    "compose_shared_friends": "1 friend",
+    "compose_shared_friends_one": "1 friend",
+    "compose_shared_friends_other": "{{count}} friends",
     "compose_encrypt_visible_to_share": "Share with",
     "compose_encrypt_visible_to_share_sub": "Just Selected Contacts",
     "compose_encrypt_share_dialog_empty": "No encrypted friends, you can try searching.",
@@ -336,14 +337,14 @@
     "plugin_wallet_name_placeholder": "Enter 1-12 characters",
     "plugin_wallet_fail_to_sign": "Failed to sign password.",
     "plugin_wallet_cancel_sign": "Signature canceled.",
-    "plugin_nft_avatar_recommend_feature_description": "Set your NFT as profile picture with exclusive aura",
+    "plugin_nft_avatar_recommend_feature_description": "Set your NFT as profile picture with exclusive aura.",
     "plugin_red_packet_display_name": "Plugin: Lucky Drop",
     "application_hint": "Socialize and show off your NFTs. People can bid,buy, view your valuable NFTs without leaving Twitter.",
     "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_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",
diff --git a/packages/mask/src/components/CompositionDialog/CompositionUI.tsx b/packages/mask/src/components/CompositionDialog/CompositionUI.tsx
index 6578c5ba4333..cb7f0962ef19 100644
--- a/packages/mask/src/components/CompositionDialog/CompositionUI.tsx
+++ b/packages/mask/src/components/CompositionDialog/CompositionUI.tsx
@@ -39,6 +39,8 @@ const useStyles = makeStyles()((theme) => ({
         position: 'absolute',
         bottom: 0,
         width: '100%',
+        left: '50%',
+        transform: 'translateX(-50%)',
         display: 'flex',
         padding: '14px 16px',
         boxSizing: 'border-box',
@@ -47,7 +49,6 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         background: theme.palette.background.paper,
         boxShadow: `0px 0px 20px 0px ${theme.palette.background.messageShadow}`,
-        transform: 'translateX(-16px)',
     },
     between: {
         justifyContent: 'space-between',
@@ -78,6 +79,11 @@ const useStyles = makeStyles()((theme) => ({
         boxSizing: 'border-box',
         borderRadius: 8,
     },
+    sendIcon: {
+        width: 18,
+        height: 18,
+        fill: theme.palette.text.buttonText,
+    },
 }))
 
 export interface LazyRecipients {
@@ -239,7 +245,7 @@ export const CompositionDialogUI = forwardRef<CompositionRef, CompositionProps>(
                     loadingPosition="start"
                     variant="roundedContained"
                     onClick={onSubmit}
-                    startIcon={<SendIcon style={{ width: 18, height: 18 }} />}>
+                    startIcon={<SendIcon className={classes.sendIcon} />}>
                     {t('post_dialog__button')}
                 </LoadingButton>
             </div>
diff --git a/packages/mask/src/components/CompositionDialog/EncryptionMethodSelector.tsx b/packages/mask/src/components/CompositionDialog/EncryptionMethodSelector.tsx
index 66628247b110..27c34a0ba7d7 100644
--- a/packages/mask/src/components/CompositionDialog/EncryptionMethodSelector.tsx
+++ b/packages/mask/src/components/CompositionDialog/EncryptionMethodSelector.tsx
@@ -13,6 +13,12 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.text.secondary,
         marginRight: 12,
     },
+    divider: {
+        width: '100%',
+        height: 1,
+        background: theme.palette.divider,
+        margin: '8px 0',
+    },
     rightIcon: {
         marginLeft: 'auto',
     },
@@ -48,8 +54,8 @@ export function EncryptionMethodSelector(props: EncryptionMethodSelectorProps) {
                     value={EncryptionMethodType.Text}
                     title={t('compose_encrypt_method_text')}
                     subTitle={t('compose_encrypt_method_text_sub_title')}
-                    showDivider
                 />
+                <div className={classes.divider} />
                 <PopoverListItem
                     value={EncryptionMethodType.Image}
                     title={t('compose_encrypt_method_image')}
diff --git a/packages/mask/src/components/CompositionDialog/EncryptionTargetSelector.tsx b/packages/mask/src/components/CompositionDialog/EncryptionTargetSelector.tsx
index 761a2bd490a4..5937def1eeb3 100644
--- a/packages/mask/src/components/CompositionDialog/EncryptionTargetSelector.tsx
+++ b/packages/mask/src/components/CompositionDialog/EncryptionTargetSelector.tsx
@@ -90,21 +90,22 @@ export function EncryptionTargetSelector(props: EncryptionTargetSelectorProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
     const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-    const e2eDisabledMessage = props.e2eDisabled ? (
-        <div className={classes.flex}>
-            <Typography className={classes.mainTitle}>{t('persona_required')}</Typography>
-            <Typography
-                className={classes.create}
-                onClick={() => {
-                    if (props.e2eDisabled === E2EUnavailableReason.NoLocalKey) return
-                    props.e2eDisabled === E2EUnavailableReason.NoPersona
-                        ? props.onCreatePersona()
-                        : props.onConnectPersona()
-                }}>
-                {props.e2eDisabled === E2EUnavailableReason.NoPersona ? t('create') : t('connect')}
-            </Typography>
-        </div>
-    ) : null
+    const e2eDisabledMessage =
+        props.e2eDisabled && props.e2eDisabled !== E2EUnavailableReason.NoLocalKey ? (
+            <div className={classes.flex}>
+                <Typography className={classes.mainTitle}>{t('persona_required')}</Typography>
+                <Typography
+                    className={classes.create}
+                    onClick={() => {
+                        if (props.e2eDisabled === E2EUnavailableReason.NoLocalKey) return
+                        props.e2eDisabled === E2EUnavailableReason.NoPersona
+                            ? props.onCreatePersona()
+                            : props.onConnectPersona()
+                    }}>
+                    {props.e2eDisabled === E2EUnavailableReason.NoPersona ? t('create') : t('connect')}
+                </Typography>
+            </div>
+        ) : null
     const noLocalKeyMessage = props.e2eDisabled === E2EUnavailableReason.NoLocalKey && (
         <div className={classes.flex}>
             <Typography className={classes.mainTitle}>{t('compose_no_local_key')}</Typography>
@@ -114,7 +115,10 @@ export function EncryptionTargetSelector(props: EncryptionTargetSelectorProps) {
     const selectedTitle = () => {
         const selected = props.target
         const shareWithNum = props.selectedRecipientLength
-        if (selected === EncryptionTargetType.E2E) return t('compose_shared_friends', { count: shareWithNum })
+        if (selected === EncryptionTargetType.E2E)
+            return shareWithNum > 1
+                ? t('compose_shared_friends_other', { count: shareWithNum })
+                : t('compose_shared_friends_one')
         else if (selected === EncryptionTargetType.Public) return t('compose_encrypt_visible_to_all')
         else if (selected === EncryptionTargetType.Self) return t('compose_encrypt_visible_to_private')
         unreachable(selected)
@@ -134,20 +138,23 @@ export function EncryptionTargetSelector(props: EncryptionTargetSelectorProps) {
                     value={EncryptionTargetType.Public}
                     title={t('compose_encrypt_visible_to_all')}
                     subTitle={t('compose_encrypt_visible_to_all_sub')}
-                    showDivider
                 />
+                <div className={classes.divider} />
                 <PopoverListItem
                     onItemClick={() => props.onChange(EncryptionTargetType.Self)}
                     disabled={!!props.e2eDisabled}
                     value={EncryptionTargetType.Self}
                     title={t('compose_encrypt_visible_to_private')}
                     subTitle={t('compose_encrypt_visible_to_private_sub')}
-                    showDivider
                 />
                 {e2eDisabledMessage}
                 {noLocalKeyMessage}
+                <div className={classes.divider} />
                 <PopoverListItem
-                    onItemClick={() => props.onChange(EncryptionTargetType.E2E)}
+                    onItemClick={() => {
+                        props.onChange(EncryptionTargetType.E2E)
+                        setAnchorEl(null)
+                    }}
                     itemTail={<RightArrowIcon className={classes.rightIcon} />}
                     disabled={!!props.e2eDisabled}
                     value={EncryptionTargetType.E2E}
diff --git a/packages/mask/src/components/CompositionDialog/PopoverListItem.tsx b/packages/mask/src/components/CompositionDialog/PopoverListItem.tsx
index 3024a9274cf9..b69206b74ce4 100644
--- a/packages/mask/src/components/CompositionDialog/PopoverListItem.tsx
+++ b/packages/mask/src/components/CompositionDialog/PopoverListItem.tsx
@@ -8,12 +8,6 @@ const useStyles = makeStyles()((theme) => ({
         display: 'flex',
         alignItems: 'center',
     },
-    divider: {
-        width: '100%',
-        height: 1,
-        background: theme.palette.divider,
-        margin: '8px 0',
-    },
     mainTitle: {
         fontSize: 14,
         color: theme.palette.text.primary,
@@ -34,11 +28,10 @@ interface PopoverListItemProps {
     title: string
     subTitle?: string
     disabled?: boolean
-    showDivider?: boolean
     onItemClick?(): void
 }
 export function PopoverListItem(props: PopoverListItemProps) {
-    const { title, subTitle, value, itemTail, disabled, showDivider, onItemClick } = props
+    const { title, subTitle, value, itemTail, disabled, onItemClick } = props
     const { classes, cx } = useStyles()
     return (
         <>
@@ -53,7 +46,6 @@ export function PopoverListItem(props: PopoverListItemProps) {
                 </Box>
                 {itemTail}
             </div>
-            {showDivider && <div className={classes.divider} />}
         </>
     )
 }
diff --git a/packages/mask/src/components/CompositionDialog/useSubmit.ts b/packages/mask/src/components/CompositionDialog/useSubmit.ts
index c58b539f13b9..632718d60c6e 100644
--- a/packages/mask/src/components/CompositionDialog/useSubmit.ts
+++ b/packages/mask/src/components/CompositionDialog/useSubmit.ts
@@ -25,7 +25,7 @@ export function useSubmit(onClose: () => void, reason: 'timeline' | 'popup' | 'r
                 content,
                 target,
                 lastRecognizedIdentity?.identifier ?? fallbackProfile,
-                activatedSocialNetworkUI.networkIdentifier,
+                activatedSocialNetworkUI.encryptionNetwork,
             )
             const encrypted = socialNetworkEncoder(activatedSocialNetworkUI.encryptionNetwork, _encrypted)
 
diff --git a/packages/mask/src/components/DataSource/useNextID.ts b/packages/mask/src/components/DataSource/useNextID.ts
index 7988024e2b59..c68873a46e22 100644
--- a/packages/mask/src/components/DataSource/useNextID.ts
+++ b/packages/mask/src/components/DataSource/useNextID.ts
@@ -65,8 +65,7 @@ export function useNextIDConnectStatus() {
     const personaConnectStatus = usePersonaConnectStatus()
     const lastState = useSetupGuideStatusState()
     const lastRecognized = useLastRecognizedIdentity()
-    const [username] = useState(lastState.username || lastRecognized.identifier?.userId || '')
-
+    const username = lastRecognized.identifier?.userId || lastState.username || ''
     const {
         value: VerificationStatus = NextIDVerificationStatus.Other,
         retry,
@@ -117,7 +116,7 @@ export function useNextIDConnectStatus() {
         isOpenedVerifyDialog = true
         isOpenedFromButton = false
         return NextIDVerificationStatus.WaitingVerify
-    }, [username, enableNextID, isOpenedVerifyDialog, currentPersonaIdentifier.value])
+    }, [username, enableNextID, isOpenedVerifyDialog, personaConnectStatus, currentPersonaIdentifier.value])
 
     return {
         isVerified: VerificationStatus === NextIDVerificationStatus.Verified,
diff --git a/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx b/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx
index 1d3575ceaebd..10fa0f051c6a 100644
--- a/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx
+++ b/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPostSuccess.tsx
@@ -14,6 +14,7 @@ import { useAsyncRetry } from 'react-use'
 import Services from '../../../extension/service'
 import type { LazyRecipients } from '../../CompositionDialog/CompositionUI'
 import { delay } from '@dimensiondev/kit'
+import { activatedSocialNetworkUI } from '../../../social-network'
 
 export interface DecryptPostSuccessProps {
     message: TypedMessage
@@ -109,6 +110,7 @@ function AppendShareDetail(props: { onClose(): void; recipients: LazyRecipients;
                     iv,
                     profiles.map((x) => x.identifier),
                     props.whoAmI,
+                    activatedSocialNetworkUI.encryptionNetwork,
                 )
                 await delay(1500)
                 retry()
diff --git a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
index 5d09af03a749..c917be2bf891 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.useAnyMode,
+    useActivatedPluginsSNSAdaptor.visibility.useNotMinimalMode,
     (x) => x.SearchResultBox,
 )
 
diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
index 106098381aeb..6a2593c93cca 100644
--- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
+++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
@@ -91,6 +91,7 @@ export function ToolboxHintUnstyled(props: ToolboxHintProps) {
 function ToolboxHintForApplication(props: ToolboxHintProps) {
     const {
         ListItemButton = MuiListItemButton,
+        ListItemIcon = MuiListItemIcon,
         Container = 'div',
         Typography = MuiTypography,
         iconSize = 24,
@@ -104,7 +105,9 @@ function ToolboxHintForApplication(props: ToolboxHintProps) {
         <GuideStep step={1} total={4} tip={t('user_guide_tip_1')}>
             <Container>
                 <ListItemButton onClick={openDialog}>
-                    <MaskIcon style={{ width: iconSize, height: iconSize }} />
+                    <ListItemIcon>
+                        <MaskIcon style={{ width: iconSize, height: iconSize }} />
+                    </ListItemIcon>
                     {mini ? null : (
                         <ListItemText
                             primary={
diff --git a/packages/mask/src/components/shared/SelectRecipients/ProfileInList.tsx b/packages/mask/src/components/shared/SelectRecipients/ProfileInList.tsx
index 8be4ab514fc4..3f2a3f62be39 100644
--- a/packages/mask/src/components/shared/SelectRecipients/ProfileInList.tsx
+++ b/packages/mask/src/components/shared/SelectRecipients/ProfileInList.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { ListItemText, Checkbox, ListItemAvatar, ListItem } from '@mui/material'
 import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
 import Highlighter from 'react-highlight-words'
-import { formatPersonaPublicKey, ProfileInformationFromNextID } from '@masknet/shared-base'
+import { formatPersonaFingerprint, ProfileInformationFromNextID } from '@masknet/shared-base'
 import { Avatar } from '../../../utils/components/Avatar'
 import { CopyIcon } from '@masknet/icons'
 import { truncate } from 'lodash-unified'
@@ -112,7 +112,7 @@ export function ProfileInList(props: ProfileInListProps) {
         (ev: React.MouseEvent<HTMLButtonElement>) => props.onChange(ev, !props.selected),
         [props],
     )
-    const textToHighlight = formatPersonaPublicKey(profile.linkedPersona?.publicKeyAsHex?.toUpperCase() ?? '', 4)
+    const textToHighlight = formatPersonaFingerprint(profile.linkedPersona?.rawPublicKey?.toUpperCase() ?? '', 3)
     return (
         <ListItem
             disabled={props.disabled}
@@ -153,9 +153,9 @@ export function ProfileInList(props: ProfileInListProps) {
                         <CopyIcon
                             className={classes.actionIcon}
                             onClick={() => {
-                                const publicHexKey = profile.linkedPersona?.publicKeyAsHex
-                                if (!publicHexKey) return
-                                copyToClipboard(publicHexKey.toUpperCase())
+                                const rawPublicKey = profile.linkedPersona?.rawPublicKey
+                                if (!rawPublicKey) return
+                                copyToClipboard(rawPublicKey.toUpperCase())
                             }}
                         />
                         {profile.fromNextID && <div className={classes.badge}>Next.ID</div>}
diff --git a/packages/mask/src/components/shared/SelectRecipients/SelectRecipients.tsx b/packages/mask/src/components/shared/SelectRecipients/SelectRecipients.tsx
index 1109596e0435..cbd53aa2d57a 100644
--- a/packages/mask/src/components/shared/SelectRecipients/SelectRecipients.tsx
+++ b/packages/mask/src/components/shared/SelectRecipients/SelectRecipients.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { ProfileInformation as Profile, EMPTY_LIST, NextIDPlatform } from '@masknet/shared-base'
+import { ProfileInformation as Profile, EMPTY_LIST, NextIDPlatform, ECKeyIdentifier } from '@masknet/shared-base'
 import type { LazyRecipients } from '../../CompositionDialog/CompositionUI'
 import { SelectRecipientsDialogUI } from './SelectRecipientsDialog'
 import { useCurrentIdentity } from '../../DataSource/useActivatedUI'
@@ -23,7 +23,12 @@ const resolveNextIDPlatform = (value: string) => {
     if (isValidAddress(value)) return NextIDPlatform.Ethereum
     if (value.length >= 44) return NextIDPlatform.NextID
     if (/^\w{1,15}$/.test(value)) return NextIDPlatform.Twitter
-    return undefined
+    return
+}
+
+const resolveValueToSearch = (value: string) => {
+    if (value.length === 44) return new ECKeyIdentifier('secp256k1', value).publicKeyAsHex ?? value
+    return value.toLowerCase()
 }
 
 export function SelectRecipientsUI(props: SelectRecipientsUIProps) {
@@ -32,11 +37,12 @@ export function SelectRecipientsUI(props: SelectRecipientsUIProps) {
     const [valueToSearch, setValueToSearch] = useState('')
     const currentIdentity = useCurrentIdentity()
     const type = resolveNextIDPlatform(valueToSearch)
+    const value = resolveValueToSearch(valueToSearch)
     const { loading: searchLoading, value: NextIDResults } = useNextIDBoundByPlatform(
         type ?? NextIDPlatform.NextID,
-        valueToSearch.toLowerCase(),
+        value,
     )
-    const NextIDItems = useTwitterIdByWalletSearch(NextIDResults, valueToSearch, type)
+    const NextIDItems = useTwitterIdByWalletSearch(NextIDResults, value, type)
     const profileItems = items.recipients?.filter((x) => x.identifier !== currentIdentity?.identifier)
     const searchedList = uniqBy(
         profileItems?.concat(NextIDItems) ?? [],
@@ -53,11 +59,7 @@ export function SelectRecipientsUI(props: SelectRecipientsUIProps) {
             }}
             open={open}
             items={searchedList || EMPTY_LIST}
-            selected={
-                searchedList?.filter((x) =>
-                    selected.some((i) => i.linkedPersona?.publicKeyAsHex === x.linkedPersona?.publicKeyAsHex),
-                ) || EMPTY_LIST
-            }
+            selected={selected}
             disabled={false}
             submitDisabled={false}
             onSubmit={onClose}
diff --git a/packages/mask/src/components/shared/SelectRecipients/SelectRecipientsDialog.tsx b/packages/mask/src/components/shared/SelectRecipients/SelectRecipientsDialog.tsx
index 2b18c7fa2ffd..96aaee4656cf 100644
--- a/packages/mask/src/components/shared/SelectRecipients/SelectRecipientsDialog.tsx
+++ b/packages/mask/src/components/shared/SelectRecipients/SelectRecipientsDialog.tsx
@@ -7,6 +7,7 @@ import type { ProfileInformation as Profile, ProfileInformationFromNextID } from
 import { useI18N } from '../../../utils'
 import { ProfileInList } from './ProfileInList'
 import { SearchEmptyIcon, SearchIcon } from '@masknet/icons'
+import { uniqBy } from 'lodash-unified'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -100,14 +101,22 @@ export function SelectRecipientsDialogUI(props: SelectRecipientsDialogUIProps) {
     }, [props.open])
     const itemsAfterSearch = useMemo(() => {
         const fuse = new Fuse(items, {
-            keys: ['identifier.userId', 'nickname', 'walletAddress', 'linkedPersona.publicKeyAsHex'],
+            keys: [
+                'identifier.userId',
+                'nickname',
+                'walletAddress',
+                'linkedPersona.rawPublicKey',
+                'linkedPersona.publicKeyAsHex',
+            ],
             isCaseSensitive: false,
             ignoreLocation: true,
             threshold: 0,
         })
-        return search === '' ? items : fuse.search(search).map((item) => item.item)
+        return uniqBy(
+            (search === '' ? items : fuse.search(search).map((item) => item.item)).concat(props.selected),
+            (x) => x.linkedPersona?.rawPublicKey.toLowerCase(),
+        )
     }, [search, items])
-
     return (
         <InjectedDialog
             className={classes.root}
diff --git a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
index 9df906ccc2c1..2226ba0b7573 100644
--- a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
@@ -2,13 +2,7 @@ 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,
-    useReverseAddress,
-    Web3Plugin,
-} from '@masknet/plugin-infra/web3'
+import { useWeb3State, useNetworkDescriptor, useProviderDescriptor, Web3Plugin } from '@masknet/plugin-infra/web3'
 import { FormattedAddress, WalletIcon } from '@masknet/shared'
 import { useI18N } from '../../../utils'
 
@@ -107,8 +101,7 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
     const frontAccount = useAccount()
     const account = notInPop ? frontAccount : wallet.account
     const { Utils } = useWeb3State() ?? {}
-    const { value: domain } = useReverseAddress(wallet.account)
-    const _providerType = wallet.providerType ?? providerType
+
     return account ? (
         <section className={classes.currentAccount}>
             <WalletIcon
@@ -119,22 +112,7 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
             />
             <div className={classes.accountInfo}>
                 <div className={classes.infoRow}>
-                    {_providerType !== ProviderType.MaskWallet ? (
-                        <Typography className={classes.accountName}>
-                            {domain && Utils?.formatDomainName
-                                ? Utils.formatDomainName(domain)
-                                : providerDescriptor?.name}
-                        </Typography>
-                    ) : (
-                        <>
-                            <Typography className={classes.accountName}>
-                                {walletName ?? providerDescriptor?.name}
-                            </Typography>
-                            {domain && Utils?.formatDomainName ? (
-                                <Typography className={classes.domain}>{Utils.formatDomainName(domain)}</Typography>
-                            ) : null}
-                        </>
-                    )}
+                    <Typography className={classes.accountName}>{walletName}</Typography>
                 </div>
                 <div className={classes.infoRow}>
                     <Typography className={classes.address} variant="body2" title={account}>
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
index d01f32ccdfcf..14210849a253 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
@@ -114,6 +114,7 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
     } = props
 
     const [state, setState] = useState<ActionButtonPromiseState>('init')
+
     const completeClass = classNames(classes.success, b.className)
     const failClass = classNames(classes.failed, b.className)
 
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 09e057afa2b9..c7ecbc8a9e26 100644
--- a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx
@@ -3,7 +3,7 @@ import { useTitle } from '../../../hook/useTitle'
 import { useI18N } from '../../../../../utils'
 import { ConnectedWalletsUI } from './UI'
 import { PersonaContext } from '../hooks/usePersonaContext'
-import { useChainId, useWallets, useWeb3State } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, useChainId, useWallets, useWeb3State } from '@masknet/plugin-infra/web3'
 import { isSameAddress } from '@masknet/web3-shared-evm'
 import { NextIDAction, NextIDPlatform, PopupRoutes } from '@masknet/shared-base'
 import { useAsync, useAsyncFn } from 'react-use'
@@ -17,7 +17,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 const ConnectedWallets = memo(() => {
     const { t } = useI18N()
     const chainId = useChainId()
-    const { NameService } = useWeb3State()
+    const { NameService } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
     const wallets = useWallets()
     const navigate = useNavigate()
     const location = useLocation()
@@ -28,6 +28,7 @@ const ConnectedWallets = memo(() => {
     const { value: connectedWallets, loading: resolveWalletNameLoading } = useAsync(async () => {
         if (!proofs) return []
 
+        console.log(proofs)
         const results = await Promise.all(
             proofs.map(async (x, index) => {
                 if (x.platform === NextIDPlatform.Ethereum) {
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 2f5e9163bf6d..dac8682dbed9 100644
--- a/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx
@@ -4,7 +4,15 @@ 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 } from '@masknet/web3-shared-evm'
+import {
+    ChainId,
+    EthereumRpcType,
+    isSameAddress,
+    NetworkType,
+    ProviderType,
+    resolveProviderName,
+    useWallets,
+} from '@masknet/web3-shared-evm'
 import type { Web3Plugin } from '@masknet/plugin-infra/dist/web3-types'
 import { SignSteps, Steps } from '../../../../../components/shared/VerifyWallet/Steps'
 import Services from '../../../../service'
@@ -14,6 +22,7 @@ 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'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -33,8 +42,10 @@ const VerifyWallet = memo(() => {
     const location = useLocation()
     const { showSnackbar } = usePopupCustomSnackbar()
     const { value: request } = useUnconfirmedRequest()
-
     const wallet: Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType> = location.state.usr
+    const { value: domain } = useReverseAddress(wallet.account)
+    const { Utils } = useWeb3State() ?? {}
+    const wallets = useWallets()
 
     const { value: bounds } = useAsync(async () => {
         if (!wallet.account) return EMPTY_LIST
@@ -52,6 +63,12 @@ const VerifyWallet = memo(() => {
         return false
     }, [bounds])
 
+    const walletName = () => {
+        if (domain && Utils?.formatDomainName) return Utils.formatDomainName(domain)
+        if (wallet.providerType !== ProviderType.MaskWallet) return `${resolveProviderName(wallet.providerType)} Wallet`
+        return wallets.find((x) => isSameAddress(x.address, wallet.account))?.name ?? 'Wallet'
+    }
+
     useEffect(() => {
         if (request?.computedPayload?.type !== EthereumRpcType.SIGN) return
 
@@ -156,6 +173,7 @@ const VerifyWallet = memo(() => {
     return (
         <div className={classes.container}>
             <Steps
+                walletName={walletName()}
                 disableConfirm={isBound && !signed}
                 nickname={currentPersona.nickname}
                 wallet={wallet}
diff --git a/packages/mask/src/manifest.json b/packages/mask/src/manifest.json
index 20ea95ae94eb..11ca601842b0 100644
--- a/packages/mask/src/manifest.json
+++ b/packages/mask/src/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Mask Network",
-    "version": "2.7.0",
+    "version": "2.8.1",
     "manifest_version": 2,
     "permissions": ["storage", "downloads", "webNavigation", "activeTab"],
     "optional_permissions": ["<all_urls>", "notifications", "clipboardRead"],
diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx
index 7a227a1f65d2..b44d1b4de614 100644
--- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx
+++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/ActionBar.tsx
@@ -7,12 +7,18 @@ import type { Project } from '../types'
 
 const useStyles = makeStyles()((theme) => {
     return {
-        root: {},
+        root: {
+            flex: 1,
+        },
         content: {
             padding: theme.spacing(0),
         },
         button: {
-            flex: 1,
+            backgroundColor: theme.palette.maskColor.dark,
+            color: 'white',
+            '&:hover': {
+                backgroundColor: theme.palette.maskColor.dark,
+            },
         },
     }
 })
@@ -40,6 +46,7 @@ export function ActionBar(props: ActionBarProps) {
         <Box className={classes.root} display="flex" justifyContent="center">
             <ActionButton
                 className={classes.button}
+                fullWidth
                 color="primary"
                 variant="contained"
                 onClick={onOpenMintDialog}
diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx
index b1fe65404fac..cf764d336c71 100644
--- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx
+++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx
@@ -132,7 +132,7 @@ export function Collectible(props: CollectibleProps) {
                 </CardContent>
             </Card>
             <Box sx={{ flex: 1, display: 'flex', padding: 1.5 }}>
-                <EthereumChainBoundary chainId={props.chainId ?? chainId}>
+                <EthereumChainBoundary chainId={props.chainId ?? chainId} renderInTimeline>
                     <ActionBar project={project} />
                 </EthereumChainBoundary>
             </Box>
diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarButton.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarButton.tsx
index 17c4115fe58f..c12c6c864ef4 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarButton.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatarButton.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.text.primary,
         cursor: 'pointer',
     },
-    icon: {
+    setIcon: {
         width: 14,
         height: 14,
         marginLeft: 2,
@@ -29,7 +29,7 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-interface NFTAvatarButtonProps extends withClasses<'root' | 'text'> {
+interface NFTAvatarButtonProps extends withClasses<'root' | 'text' | 'icon'> {
     onClick: () => void
     showSetting?: boolean
 }
@@ -41,10 +41,10 @@ export function NFTAvatarButton(props: NFTAvatarButtonProps) {
 
     return (
         <div className={classes.root} onClick={onClick}>
-            <ApplicationSmallIcon />
+            <ApplicationSmallIcon className={classes.icon} />
             <Typography variant="body1" className={classes.text}>
                 <span style={{ marginLeft: 4, fontWeight: 600 }}>{t('nft_avatar')}</span>
-                {props.showSetting ? <GearSettingsIcon className={classes.icon} /> : null}
+                {props.showSetting ? <GearSettingsIcon className={classes.setIcon} /> : null}
             </Typography>
         </div>
     )
diff --git a/packages/mask/src/plugins/Avatar/assets/application.tsx b/packages/mask/src/plugins/Avatar/assets/application.tsx
index 7dc9378ccd8a..25e5dbb38573 100644
--- a/packages/mask/src/plugins/Avatar/assets/application.tsx
+++ b/packages/mask/src/plugins/Avatar/assets/application.tsx
@@ -57,7 +57,10 @@ export const ApplicationRoundIcon = createIcon(
 export const ApplicationSmallIcon = createIcon(
     'ApplicationSmallIcon',
     <g>
-        <path d="M7.41269 2.72136C8.6044 1.76113 10.2272 1.49067 11.7059 1.77176C13.0524 2.09302 14.2571 2.99892 14.9102 4.2237C15.3626 5.02921 15.5031 5.96227 15.509 6.87407C15.5079 9.23743 15.509 11.5996 15.5079 13.963C15.4689 14.2712 15.7122 14.4909 15.8669 14.7271C16.6016 15.7807 16.9453 17.0586 17.0055 18.3318C16.5638 18.3342 16.122 18.333 15.6803 18.3318C15.613 17.5098 15.4677 16.6877 15.0827 15.9496C13.8768 15.9436 12.6721 15.9696 11.4662 15.9578C11.4591 15.0626 11.4626 14.1673 11.4615 13.272C10.4327 13.0311 9.34613 13.2106 8.38 13.6098C6.53396 14.3882 5.28437 16.3369 5.29145 18.333H3.99934C3.93792 16.7551 4.59225 15.2007 5.62452 14.0256C5.76979 13.8886 5.71782 13.6736 5.73318 13.4964C5.72019 11.6846 5.74145 9.87167 5.72255 8.05988C5.67767 7.15753 5.70601 6.254 5.74735 5.35164C5.85483 4.27213 6.51742 3.31072 7.41269 2.72136ZM11.6422 3.08632C11.791 3.5056 12.1973 3.77017 12.3579 4.18827C12.8622 5.12606 12.7193 6.21148 12.7359 7.23194C12.7441 9.7134 12.7418 12.1937 12.7429 14.6752C13.2378 14.6763 13.7339 14.6787 14.2287 14.6693C14.2252 12.0709 14.2264 9.47128 14.2287 6.87289C14.2228 6.24573 14.1602 5.59967 13.8803 5.02803C13.4658 4.09497 12.6154 3.38159 11.6422 3.08632ZM7.93118 3.93434C7.27804 4.36071 6.95442 5.16149 6.97923 5.92447C8.47685 5.93864 9.97329 5.9292 11.4709 5.93038C11.5241 4.93472 10.8804 3.92371 9.89533 3.66859C9.23865 3.43592 8.52645 3.62253 7.93118 3.93434ZM7.0182 7.20241C7.01112 7.73508 7.03001 8.29492 7.31111 8.76617C7.72922 9.55868 8.59614 10.0453 9.48313 10.0725C9.48432 10.4953 9.48432 10.9181 9.48313 11.3421C8.56543 11.322 7.68434 10.9642 6.98986 10.3689C7.00285 11.1945 6.98986 12.0201 6.99931 12.8468C8.30677 12.0106 9.93077 11.6598 11.465 11.9055C11.4567 10.3382 11.4638 8.76971 11.4603 7.20241C9.98037 7.20123 8.49929 7.20123 7.0182 7.20241Z" />
+        <path
+            fill="currentColor"
+            d="M7.41269 2.72136C8.6044 1.76113 10.2272 1.49067 11.7059 1.77176C13.0524 2.09302 14.2571 2.99892 14.9102 4.2237C15.3626 5.02921 15.5031 5.96227 15.509 6.87407C15.5079 9.23743 15.509 11.5996 15.5079 13.963C15.4689 14.2712 15.7122 14.4909 15.8669 14.7271C16.6016 15.7807 16.9453 17.0586 17.0055 18.3318C16.5638 18.3342 16.122 18.333 15.6803 18.3318C15.613 17.5098 15.4677 16.6877 15.0827 15.9496C13.8768 15.9436 12.6721 15.9696 11.4662 15.9578C11.4591 15.0626 11.4626 14.1673 11.4615 13.272C10.4327 13.0311 9.34613 13.2106 8.38 13.6098C6.53396 14.3882 5.28437 16.3369 5.29145 18.333H3.99934C3.93792 16.7551 4.59225 15.2007 5.62452 14.0256C5.76979 13.8886 5.71782 13.6736 5.73318 13.4964C5.72019 11.6846 5.74145 9.87167 5.72255 8.05988C5.67767 7.15753 5.70601 6.254 5.74735 5.35164C5.85483 4.27213 6.51742 3.31072 7.41269 2.72136ZM11.6422 3.08632C11.791 3.5056 12.1973 3.77017 12.3579 4.18827C12.8622 5.12606 12.7193 6.21148 12.7359 7.23194C12.7441 9.7134 12.7418 12.1937 12.7429 14.6752C13.2378 14.6763 13.7339 14.6787 14.2287 14.6693C14.2252 12.0709 14.2264 9.47128 14.2287 6.87289C14.2228 6.24573 14.1602 5.59967 13.8803 5.02803C13.4658 4.09497 12.6154 3.38159 11.6422 3.08632ZM7.93118 3.93434C7.27804 4.36071 6.95442 5.16149 6.97923 5.92447C8.47685 5.93864 9.97329 5.9292 11.4709 5.93038C11.5241 4.93472 10.8804 3.92371 9.89533 3.66859C9.23865 3.43592 8.52645 3.62253 7.93118 3.93434ZM7.0182 7.20241C7.01112 7.73508 7.03001 8.29492 7.31111 8.76617C7.72922 9.55868 8.59614 10.0453 9.48313 10.0725C9.48432 10.4953 9.48432 10.9181 9.48313 11.3421C8.56543 11.322 7.68434 10.9642 6.98986 10.3689C7.00285 11.1945 6.98986 12.0201 6.99931 12.8468C8.30677 12.0106 9.93077 11.6598 11.465 11.9055C11.4567 10.3382 11.4638 8.76971 11.4603 7.20241C9.98037 7.20123 8.49929 7.20123 7.0182 7.20241Z"
+        />
     </g>,
     '0 0 21 20',
 )
diff --git a/packages/mask/src/plugins/Avatar/locales/ja-JP.json b/packages/mask/src/plugins/Avatar/locales/ja-JP.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Avatar/locales/ja-JP.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Avatar/locales/ko-KR.json b/packages/mask/src/plugins/Avatar/locales/ko-KR.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Avatar/locales/ko-KR.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Avatar/locales/languages.ts b/packages/mask/src/plugins/Avatar/locales/languages.ts
index db91c03aa516..67e418468ef3 100644
--- a/packages/mask/src/plugins/Avatar/locales/languages.ts
+++ b/packages/mask/src/plugins/Avatar/locales/languages.ts
@@ -3,17 +3,32 @@
 // Default fallback language in a family of languages are chosen by the alphabet order
 // To overwrite this, please overwrite packages/scripts/src/locale-kit-next/index.ts
 import en_US from './en-US.json'
+import ja_JP from './ja-JP.json'
+import ko_KR from './ko-KR.json'
+import qya_AA from './qya-AA.json'
+import zh_CN from './zh-CN.json'
+import zh_TW from './zh-TW.json'
 export const languages = {
     en: en_US,
+    ja: ja_JP,
+    ko: ko_KR,
+    qy: qya_AA,
+    'zh-CN': zh_CN,
+    zh: zh_TW,
 }
 // @ts-ignore
 if (import.meta.webpackHot) {
     // @ts-ignore
-    import.meta.webpackHot.accept(['./en-US.json'], () =>
-        globalThis.dispatchEvent?.(
-            new CustomEvent('MASK_I18N_HMR', {
-                detail: ['com.maskbook.avatar', { en: en_US }],
-            }),
-        ),
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './qya-AA.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: [
+                        'com.maskbook.avatar',
+                        { en: en_US, ja: ja_JP, ko: ko_KR, qy: qya_AA, 'zh-CN': zh_CN, zh: zh_TW },
+                    ],
+                }),
+            ),
     )
 }
diff --git a/packages/mask/src/plugins/Avatar/locales/qya-AA.json b/packages/mask/src/plugins/Avatar/locales/qya-AA.json
new file mode 100644
index 000000000000..2ba51b407b94
--- /dev/null
+++ b/packages/mask/src/plugins/Avatar/locales/qya-AA.json
@@ -0,0 +1,27 @@
+{
+    "application_dialog_title": "crwdns16640:0crwdne16640:0",
+    "application_edit_profile_dialog_title": "crwdns16642:0crwdne16642:0",
+    "persona_set_nft": "crwdns16644:0crwdne16644:0",
+    "persona_verification_failed": "crwdns16646:0crwdne16646:0",
+    "cancel": "crwdns16648:0crwdne16648:0",
+    "save": "crwdns16650:0crwdne16650:0",
+    "change": "crwdns16652:0crwdne16652:0",
+    "connect_your_wallet": "crwdns16654:0crwdne16654:0",
+    "upload_avatar_failed_message": "crwdns16656:0crwdne16656:0",
+    "upload_avatar_success_message": "crwdns16658:0crwdne16658:0",
+    "collectible_not_found": "crwdns16660:0crwdne16660:0",
+    "add_collectible": "crwdns16662:0crwdne16662:0",
+    "set_avatar_title": "crwdns16664:0crwdne16664:0",
+    "set_PFP_title": "crwdns16666:0crwdne16666:0",
+    "wallet_settings": "crwdns16668:0crwdne16668:0",
+    "persona_hint": "crwdns16670:0crwdne16670:0",
+    "copy_success_of_wallet_address": "crwdns16672:0crwdne16672:0",
+    "copied": "crwdns16674:0crwdne16674:0",
+    "collectible_on_polygon": "crwdns16676:0crwdne16676:0",
+    "collectible_no_eth": "crwdns16678:0crwdne16678:0",
+    "no_collectible_found": "crwdns16680:0crwdne16680:0",
+    "retry": "crwdns16682:0crwdne16682:0",
+    "application_hint": "crwdns16684:0crwdne16684:0",
+    "provider_by": "crwdns16686:0crwdne16686:0",
+    "wallet_non_evm_warning": "crwdns16688:0crwdne16688:0"
+}
diff --git a/packages/mask/src/plugins/Avatar/locales/zh-CN.json b/packages/mask/src/plugins/Avatar/locales/zh-CN.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Avatar/locales/zh-CN.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Avatar/locales/zh-TW.json b/packages/mask/src/plugins/Avatar/locales/zh-TW.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Avatar/locales/zh-TW.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx
index d17cb3043318..01215c1def57 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx
@@ -8,7 +8,7 @@ import { MakeOfferDialog } from './MakeOfferDialog'
 import { PostListingDialog } from './PostListingDialog'
 import { CheckoutDialog } from './CheckoutDialog'
 import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
-import { useChainId } from '@masknet/web3-shared-evm'
+import { ChainId } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -33,7 +33,6 @@ export function ActionBar(props: ActionBarProps) {
     const { classes } = useStyles()
     const { asset, assetOrder } = CollectibleState.useContainer()
     const assets = asset.value
-    const chainId = useChainId()
 
     const {
         open: openCheckoutDialog,
@@ -50,7 +49,7 @@ export function ActionBar(props: ActionBarProps) {
     if (!asset.value) return null
     return (
         <Box className={classes.root} sx={{ padding: 1.5 }} display="flex" justifyContent="center">
-            <EthereumChainBoundary chainId={chainId}>
+            <EthereumChainBoundary chainId={ChainId.Mainnet} renderInTimeline>
                 {!asset.value.isOwner && asset.value.is_auction && assetOrder.value ? (
                     <ActionButton
                         className={classes.button}
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx
index c87ac106b624..3fa81e9a5a0e 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx
@@ -43,6 +43,7 @@ const useStyles = makeStyles()((theme) => {
     return {
         content: {
             padding: 0,
+            borderRadius: 0,
         },
         footer: {
             display: 'flex',
@@ -168,7 +169,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
             open={open}
             onClose={onClose}>
             <DialogContent className={classes.content}>
-                <Card elevation={0}>
+                <Card elevation={0} className={classes.content}>
                     <CardContent>
                         {isVerified ? null : (
                             <Box sx={{ marginBottom: 2 }}>
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/OrderRow.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OrderRow.tsx
index f0b8f0a75305..b7e6d9c1f330 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/OrderRow.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OrderRow.tsx
@@ -108,7 +108,7 @@ export function OrderRow({ order, isDifferenceToken }: IRowProps) {
                                     order.current_price,
                                     order.payment_token_contract?.decimals,
                                     order.quantity,
-                                )}{' '}
+                                )?.toFixed()}{' '}
                                 {order.payment_token_contract?.symbol}
                             </>
                         </Typography>
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/PostListingDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/PostListingDialog.tsx
index 524573ebd2ad..d49080160c56 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/PostListingDialog.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/PostListingDialog.tsx
@@ -13,6 +13,7 @@ const useStyles = makeStyles()((theme) => {
     return {
         content: {
             padding: 0,
+            borderRadius: 0,
         },
         footer: {
             display: 'flex',
diff --git a/packages/mask/src/plugins/Collectible/constants.ts b/packages/mask/src/plugins/Collectible/constants.ts
index 65e2309325f2..15e3bab7f736 100644
--- a/packages/mask/src/plugins/Collectible/constants.ts
+++ b/packages/mask/src/plugins/Collectible/constants.ts
@@ -6,8 +6,7 @@ export const PLUGIN_ID = PluginId.Collectible
 export const PLUGIN_META_KEY = `${PluginId.Collectible}:1`
 
 export const openseaHostnames = ['opensea.io', 'testnets.opensea.io']
-export const openseaPathnameRegexMatcher = /^\/assets\/(0x[\dA-Fa-f]{40})\/(\d+)/
-
+export const openseaPathnameRegexMatcher = /^\/assets\/(?:ethereum\/)?(0x[\dA-Fa-f]{40})\/(\d+)/
 export const raribleHostnames = ['rarible.com', 'app.rarible.com', 'ropsten.rarible.com']
 export const rariblePathnameRegexMatcher = /^\/token\/(0x[\dA-Fa-f]{40}):(\d+)/
 
diff --git a/packages/mask/src/plugins/Collectible/types/opensea.ts b/packages/mask/src/plugins/Collectible/types/opensea.ts
index 98bbd2557b12..929bccf9b03d 100644
--- a/packages/mask/src/plugins/Collectible/types/opensea.ts
+++ b/packages/mask/src/plugins/Collectible/types/opensea.ts
@@ -216,10 +216,10 @@ export interface OpenSeaResponse extends Asset {
     background_color: string | null
     transfer_fee: string | null
     transfer_fee_payment_token: OpenSeaFungibleToken | null
-    top_ownerships: {
+    top_ownerships: Array<{
         owner: OpenSeaCustomAccount
         quantity: string
-    }[]
+    }>
     creator: OpenSeaCustomAccount
     endTime: string
 }
diff --git a/packages/mask/src/plugins/Collectible/types/rarible.ts b/packages/mask/src/plugins/Collectible/types/rarible.ts
index 28387ada41c6..772dc83e6877 100644
--- a/packages/mask/src/plugins/Collectible/types/rarible.ts
+++ b/packages/mask/src/plugins/Collectible/types/rarible.ts
@@ -60,10 +60,10 @@ export interface Creator {
 export interface Meta {
     name: string
     description: string
-    attributes: {
+    attributes: Array<{
         key: string
         value: string
-    }[]
+    }>
     image: {
         meta: {
             PREVIEW: {
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx
index 40165f6de8cf..5110aeea3625 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx
@@ -136,7 +136,7 @@ export function Collectible(props: CollectibleProps) {
                             target="_blank"
                             rel="noopener noreferrer">
                             <Avatar
-                                src={assetSource?.owner[0]?.ownerAvator ?? assetSource?.creator?.avatorPath ?? ''}
+                                src={assetSource?.owner[0]?.ownerAvatar ?? assetSource?.creator?.avatarPath ?? ''}
                             />
                         </Link>
                     }
@@ -267,7 +267,7 @@ export function Collectible(props: CollectibleProps) {
                 </CardContent>
             </CollectibleCard>
             <Box sx={{ display: 'flex', width: 'calc(100% - 24px)', padding: 1.5 }}>
-                <EthereumChainBoundary chainId={expectChainId ?? chainId}>
+                <EthereumChainBoundary chainId={expectChainId ?? chainId} renderInTimeline>
                     <ActionBar />
                 </EthereumChainBoundary>
             </Box>
diff --git a/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts b/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
index 0b11a8f2617e..31feb1eb43ff 100644
--- a/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
+++ b/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
@@ -136,13 +136,13 @@ export const getFungibleAssetsFn =
 
         const tokenUnavailableFromDebankResults = (await Promise.allSettled(allRequest))
             .map((x) => (x.status === 'fulfilled' ? x.value : null))
-            .filter((x) => Boolean(x)) as {
+            .filter((x) => Boolean(x)) as Array<{
             chainId: ChainId
             balance: string
             price: PriceRecord
-        }[]
+        }>
 
-        const nativeTokens: Web3Plugin.Asset<Web3Plugin.FungibleToken>[] = networks
+        const nativeTokens: Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>> = networks
             .filter(
                 (t) =>
                     t.isMainnet &&
diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/ConstPromise.ts b/packages/mask/src/plugins/FindTruman/SNSAdaptor/ConstPromise.ts
index 0d303203dda1..1c654cd8ab02 100644
--- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/ConstPromise.ts
+++ b/packages/mask/src/plugins/FindTruman/SNSAdaptor/ConstPromise.ts
@@ -20,8 +20,8 @@ export default class FindTrumanConstPromise {
     value?: FindTrumanConst
     err?: any
 
-    successCallback: ((value?: FindTrumanConst) => void)[] = []
-    failCallback: ((err: any) => void)[] = []
+    successCallback: Array<(value?: FindTrumanConst) => void> = []
+    failCallback: Array<(err: any) => void> = []
 
     resolve = (value: FindTrumanConst) => {
         if (this.status !== Status.PENDING) return
diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/FindTruman.tsx b/packages/mask/src/plugins/FindTruman/SNSAdaptor/FindTruman.tsx
index fd870fe64ebf..32943bdddaea 100644
--- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/FindTruman.tsx
+++ b/packages/mask/src/plugins/FindTruman/SNSAdaptor/FindTruman.tsx
@@ -102,6 +102,17 @@ const useStyles = makeStyles()((theme) => {
                 backgroundColor: theme.palette.primary.main,
             },
         },
+        button: {
+            backgroundColor: theme.palette.maskColor.dark,
+            color: 'white',
+            fontSize: 14,
+            fontWeight: 700,
+            width: '100%',
+            '&:hover': {
+                backgroundColor: theme.palette.maskColor.dark,
+            },
+            margin: '0 !important',
+        },
     }
 })
 
@@ -261,10 +272,11 @@ export function FindTruman(props: FindTrumanProps) {
             </Card>
 
             <Box style={{ padding: 12 }}>
-                <EthereumChainBoundary chainId={chainId}>
+                <EthereumChainBoundary chainId={chainId} renderInTimeline>
                     <EthereumWalletConnectedBoundary
-                        hideRiskWarningConfirmed
                         startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
+                        classes={{ button: classes.button }}
+                        renderInTimeline
                     />
                 </EthereumChainBoundary>
             </Box>
diff --git a/packages/mask/src/plugins/FindTruman/base.ts b/packages/mask/src/plugins/FindTruman/base.ts
index 4895ed1f8934..ad23830b6f09 100644
--- a/packages/mask/src/plugins/FindTruman/base.ts
+++ b/packages/mask/src/plugins/FindTruman/base.ts
@@ -1,4 +1,6 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { FIND_TRUMAN_PLUGIN_ID, FIND_TRUMAN_PLUGIN_NAME } from './constants'
 
 export const base: Plugin.Shared.Definition = {
@@ -12,6 +14,24 @@ export const base: Plugin.Shared.Definition = {
         architecture: { app: true, web: true },
         networks: { type: 'opt-out', networks: {} },
         target: 'stable',
+        web3: {
+            [NetworkPluginID.PLUGIN_EVM]: {
+                supportedChainIds: [
+                    ChainId.Mainnet,
+                    ChainId.BSC,
+                    ChainId.Matic,
+                    ChainId.Arbitrum,
+                    ChainId.xDai,
+                    ChainId.Fantom,
+                    ChainId.Avalanche,
+                    ChainId.Aurora,
+                    ChainId.Conflux,
+                    ChainId.Harmony,
+                ],
+            },
+            [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },
+            [NetworkPluginID.PLUGIN_SOLANA]: { supportedChainIds: [] },
+        },
     },
     contribution: {
         postContent: new Set([
diff --git a/packages/mask/src/plugins/FindTruman/types.ts b/packages/mask/src/plugins/FindTruman/types.ts
index 349cd201ae53..92ead19e5538 100644
--- a/packages/mask/src/plugins/FindTruman/types.ts
+++ b/packages/mask/src/plugins/FindTruman/types.ts
@@ -235,7 +235,7 @@ export interface SubmitPollParams {
 export interface SubmitCompletionParams {
     timestamp: number
     quesId: string
-    answers: { id: string; answer: string }[]
+    answers: Array<{ id: string; answer: string }>
 }
 
 export enum ClueConditionType {
diff --git a/packages/mask/src/plugins/Furucombo/UI/FurucomboView.tsx b/packages/mask/src/plugins/Furucombo/UI/FurucomboView.tsx
index b7118e239bc0..6b1b2a5148b5 100644
--- a/packages/mask/src/plugins/Furucombo/UI/FurucomboView.tsx
+++ b/packages/mask/src/plugins/Furucombo/UI/FurucomboView.tsx
@@ -94,7 +94,7 @@ export function FurucomboView(props: PoolViewProps) {
                 </Typography>
 
                 <Box sx={{ padding: 1.5 }}>
-                    <EthereumChainBoundary chainId={props.chainId} />
+                    <EthereumChainBoundary chainId={props.chainId} renderInTimeline />
                 </Box>
             </>
         )
@@ -120,7 +120,7 @@ export function FurucomboView(props: PoolViewProps) {
                 </CardContent>
             </Card>
             <Box sx={{ padding: 1.5 }}>
-                <EthereumChainBoundary chainId={props.chainId} />
+                <EthereumChainBoundary chainId={props.chainId} renderInTimeline />
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
index 05c1e3d799ad..154c34876ab4 100644
--- a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
+++ b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
@@ -73,7 +73,11 @@ const useStyles = makeStyles()((theme) => ({
         '-webkit-box-orient': 'vertical',
     },
     button: {
-        color: theme.palette.mode === 'dark' ? 'white' : 'black',
+        backgroundColor: theme.palette.maskColor.dark,
+        color: 'white',
+        '&:hover': {
+            backgroundColor: theme.palette.maskColor.dark,
+        },
         width: '100%',
     },
 }))
@@ -172,13 +176,8 @@ export function PreviewCard(props: PreviewCardProps) {
             <Box sx={{ display: 'flex', width: '100%' }}>
                 <Box sx={{ flex: 1, padding: 1.5 }}>
                     <Button
-                        variant="outlined"
                         fullWidth
                         className={classes.button}
-                        style={{
-                            lineHeight: 0,
-                            padding: 19,
-                        }}
                         target="_blank"
                         rel="noopener noreferrer"
                         href={urlcat('https://gitcoin.co', grant.url)}>
@@ -186,7 +185,9 @@ export function PreviewCard(props: PreviewCardProps) {
                     </Button>
                 </Box>
                 <Box sx={{ flex: 1, padding: 1.5 }}>
-                    <EthereumChainBoundary chainId={isGitCoinSupported(chainId) ? chainId : ChainId.Mainnet}>
+                    <EthereumChainBoundary
+                        chainId={isGitCoinSupported(chainId) ? chainId : ChainId.Mainnet}
+                        renderInTimeline>
                         <Button
                             variant="contained"
                             fullWidth
diff --git a/packages/mask/src/plugins/Gitcoin/base.ts b/packages/mask/src/plugins/Gitcoin/base.ts
index 65995d21a8a0..2ba903193d15 100644
--- a/packages/mask/src/plugins/Gitcoin/base.ts
+++ b/packages/mask/src/plugins/Gitcoin/base.ts
@@ -1,4 +1,6 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_DESCRIPTION } from './constants'
 
 export const base: Plugin.Shared.Definition = {
@@ -10,6 +12,13 @@ export const base: Plugin.Shared.Definition = {
         architecture: { app: true, web: true },
         networks: { type: 'opt-out', networks: {} },
         target: 'stable',
+        web3: {
+            [NetworkPluginID.PLUGIN_EVM]: {
+                supportedChainIds: [ChainId.Mainnet, ChainId.Rinkeby, ChainId.Matic, ChainId.Mumbai],
+            },
+            [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },
+            [NetworkPluginID.PLUGIN_SOLANA]: { supportedChainIds: [] },
+        },
     },
     contribution: { postContent: new Set([/https:\/\/gitcoin.co\/grants\/\d+/]) },
 }
diff --git a/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts b/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts
index b1e20207f16a..ffa862e25976 100644
--- a/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts
+++ b/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts
@@ -26,7 +26,7 @@ export function useDonateCallback(address: string, amount: string, token?: Fungi
     const account = useAccount()
     const [donateState, setDonateState] = useTransactionState()
 
-    const donations = useMemo((): [string, string, string][] => {
+    const donations = useMemo((): Array<[string, string, string]> => {
         if (!address || !token) return []
         if (!GITCOIN_ETH_ADDRESS || !GITCOIN_TIP_PERCENTAGE) return []
         const tipAmount = new BigNumber(GITCOIN_TIP_PERCENTAGE / 100).multipliedBy(amount)
diff --git a/packages/mask/src/plugins/GoodGhosting/SNSAdaptor/index.tsx b/packages/mask/src/plugins/GoodGhosting/SNSAdaptor/index.tsx
index b0135957811c..71f28a3b99ef 100644
--- a/packages/mask/src/plugins/GoodGhosting/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/GoodGhosting/SNSAdaptor/index.tsx
@@ -51,7 +51,7 @@ function Renderer(props: React.PropsWithChildren<{ url: string }>) {
     usePluginWrapper(true)
 
     return (
-        <EthereumChainBoundary chainId={ChainId.Matic}>
+        <EthereumChainBoundary chainId={ChainId.Matic} renderInTimeline>
             <PreviewCard id={id} />
         </EthereumChainBoundary>
     )
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanel.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanel.tsx
index f2755ef39927..130a27b8411c 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanel.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanel.tsx
@@ -91,8 +91,8 @@ export function ExchangeTokenPanel(props: ExchangeTokenPanelProps) {
         isSell,
         dataIndex,
         exchangeToken?.address,
-        excludeTokensAddress.sort((a, b) => a.localeCompare('en-US', b)).join(),
-        selectedTokensAddress.sort((a, b) => a.localeCompare('en-US', b)).join(),
+        excludeTokensAddress.sort((a, b) => a.localeCompare(b, 'en-US')).join(),
+        selectedTokensAddress.sort((a, b) => a.localeCompare(b, 'en-US')).join(),
     ])
     // #endregion
 
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
index fb5df44e3024..1d9a6294766c 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
@@ -185,7 +185,9 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
         minHeight: 35,
         '&:hover': {
             background: 'none',
+            borderColor: '#fff !important',
         },
+        background: 'none',
     },
     loadingWrap: {
         display: 'flex',
@@ -784,7 +786,7 @@ export function ITO(props: ITO_Props) {
                                     </ActionButton>
                                 </Box>
                                 <Box style={{ padding: 12, flex: 1 }}>
-                                    <EthereumChainBoundary chainId={payload.chain_id}>
+                                    <EthereumChainBoundary chainId={payload.chain_id} renderInTimeline>
                                         <EthereumWalletConnectedBoundary
                                             hideRiskWarningConfirmed
                                             startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
@@ -916,12 +918,7 @@ export function ITO_Error({ retryPoolPayload }: { retryPoolPayload: () => void }
             <Typography variant="body1" className={classes.loadingITO}>
                 {t('loading_failed')}
             </Typography>
-            <ActionButton
-                onClick={retryPoolPayload}
-                variant="outlined"
-                size="large"
-                color="primary"
-                className={classes.loadingITO_Button}>
+            <ActionButton onClick={retryPoolPayload} variant="outlined" className={classes.loadingITO_Button}>
                 {t('try_again')}
             </ActionButton>
         </Card>
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
index 7190867404a9..240ddc8a2edc 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
@@ -159,13 +159,13 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface NftAirdropCardProps {
-    campaignInfos: {
+    campaignInfos: Array<{
         campaignInfo: CampaignInfo
         claimableInfo: {
             claimable: boolean
             claimed: boolean
         }
-    }[]
+    }>
     loading: boolean
     retry: () => void
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/SwapDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/SwapDialog.tsx
index e9ce38bd599b..279a7d27f868 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/SwapDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/SwapDialog.tsx
@@ -159,7 +159,7 @@ export function SwapDialog(props: SwapDialogProps) {
         pickToken,
         exchangeTokens
             .map((x) => x.address)
-            .sort((a, b) => a.localeCompare('en-US', b))
+            .sort((a, b) => a.localeCompare(b, 'en-US'))
             .join(),
     ])
     // #endregion
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts
index 360546fee49f..025f0de90334 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts
@@ -1,17 +1,16 @@
 import { useAsyncRetry } from 'react-use'
-import { useAccount, useITOConstants, useChainId, isSameAddress, ChainId } from '@masknet/web3-shared-evm'
+import { useAccount, useITOConstants, isSameAddress, ChainId } from '@masknet/web3-shared-evm'
 import { checkAvailability } from '../../Worker/apis/checkAvailability'
 
-export function useAvailability(id: string, contract_address: string, from?: string, chainId?: ChainId) {
+export function useAvailability(id: string, contract_address: string, chainId: ChainId, from?: string) {
     const account = useAccount()
     const fromAccount = from ?? account
-    const _chainId = useChainId()
 
     const { ITO_CONTRACT_ADDRESS } = useITOConstants()
     const isV1 = isSameAddress(contract_address ?? '', ITO_CONTRACT_ADDRESS)
 
     return useAsyncRetry(async () => {
         if (!id || !contract_address) return null
-        return checkAvailability(id, account ?? fromAccount, contract_address, chainId ?? _chainId, isV1)
-    }, [id, account, fromAccount, _chainId, chainId])
+        return checkAvailability(id, account || fromAccount, contract_address, chainId, isV1)
+    }, [id, account, fromAccount, chainId])
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts
index d8df7c1a0b77..1682c08a1010 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts
@@ -12,8 +12,8 @@ export function useAvailabilityComputed(payload: JSON_PayloadInMask | JSON_Paylo
     const asyncResult = useAvailability(
         payload.pid,
         payload.contract_address,
-        payload.seller.address,
         payload.chain_id ?? chainId,
+        payload.seller.address,
     )
     const { value: availability, loading: loadingITO } = asyncResult
     const qualificationAddress =
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts
index cefaf4bad112..8779d7402a1a 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts
@@ -53,7 +53,7 @@ type paramsObjType = {
     total: string
     limit: string
     qualificationAddress: string
-    exchangeAmountsDivided: (readonly [BigNumber, BigNumber])[]
+    exchangeAmountsDivided: Array<readonly [BigNumber, BigNumber]>
     now: number
     invalidTokenAt: number
     exchangeAmounts: string[]
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useRegion.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useRegion.ts
index e283feedbd78..04de368b83af 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useRegion.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useRegion.ts
@@ -300,9 +300,9 @@ export function useIPRegion(): AsyncStateRetry<Region> {
     return useAsyncRetry(IPGeoResolver)
 }
 
-export function useRegionList(): Array<Region> {
+export function useRegionList(): Region[] {
     // TODO return name by i18n
-    return regions as Array<Region>
+    return regions as Region[]
 }
 
 export function useRegionSelect(initRegionCodes?: RegionCode[]) {
diff --git a/packages/mask/src/plugins/ITO/Worker/apis/checkAvailability.ts b/packages/mask/src/plugins/ITO/Worker/apis/checkAvailability.ts
index b2d4491c5ae5..ebc4b89e617d 100644
--- a/packages/mask/src/plugins/ITO/Worker/apis/checkAvailability.ts
+++ b/packages/mask/src/plugins/ITO/Worker/apis/checkAvailability.ts
@@ -11,7 +11,14 @@ const interFaceV2 = new Interface(ITO2_ABI)
 // ITO Contract readonly method, read it no matter on whatever chains you are.
 export async function checkAvailability(pid: string, from: string, to: string, chainId: ChainId, isV1 = false) {
     const callData = (isV1 ? interFaceV1 : interFaceV2).encodeFunctionData('check_availability', [pid])
-    const data = await Services.Ethereum.call({ to, from, data: callData }, { chainId })
+    const data = await Services.Ethereum.call(
+        {
+            to,
+            from,
+            data: callData,
+        },
+        { chainId },
+    )
     return decodeResult(data, isV1)
 }
 
diff --git a/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts b/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts
index 9a3cc8b4a9c6..9380fb990c71 100644
--- a/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts
+++ b/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts
@@ -58,7 +58,7 @@ export async function getCampaignInfo(id: number): Promise<CampaignInfo> {
             endTime: number
             startTime: number
             gamification: {
-                nfts: { nft: { image: string } }[]
+                nfts: Array<{ nft: { image: string } }>
             }
         }
     }>(`
diff --git a/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts b/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts
index 4f6ab889688c..9cba129fa129 100644
--- a/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts
+++ b/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts
@@ -68,7 +68,7 @@ async function fetchFromMarketSubgraph<T>(query: string, chainId?: ChainId) {
 
 export async function getTradeInfo(pid: string, trader: string) {
     const data = await fetchFromMarketSubgraph<{
-        buyInfos: {
+        buyInfos: Array<{
             buyer: {
                 address: string
                 name: string
@@ -77,23 +77,23 @@ export async function getTradeInfo(pid: string, trader: string) {
             amount: string
             amount_sold: string
             amount_bought: string
-        }[]
-        sellInfos: {
+        }>
+        sellInfos: Array<{
             buyer: {
                 address: string
                 name: string
             }
             token: JSON_PayloadOutMask['token']
             amount: string
-        }[]
-        destructInfos: {
+        }>
+        destructInfos: Array<{
             buyer: {
                 address: string
                 name: string
             }
             token: JSON_PayloadOutMask['token']
             amount: string
-        }[]
+        }>
     }>(`
     {
         buyInfos (where: { pool: "${pid.toLowerCase()}", buyer: "${trader.toLowerCase()}" }) {
@@ -147,12 +147,12 @@ export async function getPool(pid: string) {
 
 export async function getAllPoolsAsSeller(address: string, page: number, chainId: ChainId) {
     const data = await fetchFromMarketSubgraph<{
-        sellInfos: {
+        sellInfos: Array<{
             pool: JSON_PayloadOutMask & {
                 exchange_in_volumes: string[]
                 exchange_out_volumes: string[]
             }
-        }[]
+        }>
     }>(
         `
     {
@@ -183,12 +183,12 @@ export async function getAllPoolsAsSeller(address: string, page: number, chainId
 
 export async function getAllPoolsAsBuyer(address: string, chainId: ChainId) {
     const data = await fetchFromMarketSubgraph<{
-        buyInfos: {
+        buyInfos: Array<{
             pool: JSON_PayloadOutMask & {
                 exchange_in_volumes: string[]
                 exchange_out_volumes: string[]
             }
-        }[]
+        }>
     }>(
         `
     {
diff --git a/packages/mask/src/plugins/ITO/base.ts b/packages/mask/src/plugins/ITO/base.ts
index eddc066a64c6..2fc3c7dd2742 100644
--- a/packages/mask/src/plugins/ITO/base.ts
+++ b/packages/mask/src/plugins/ITO/base.ts
@@ -1,4 +1,6 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { ITO_MetaKey_1, ITO_MetaKey_2, ITO_PluginID } from './constants'
 
 export const base: Plugin.Shared.Definition = {
@@ -15,6 +17,23 @@ export const base: Plugin.Shared.Definition = {
             networks: {},
         },
         target: 'stable',
+        web3: {
+            [NetworkPluginID.PLUGIN_EVM]: {
+                supportedChainIds: [
+                    ChainId.Mainnet,
+                    ChainId.BSC,
+                    ChainId.Matic,
+                    ChainId.Arbitrum,
+                    ChainId.xDai,
+                    ChainId.Aurora,
+                    ChainId.Avalanche,
+                    ChainId.Fantom,
+                    ChainId.Harmony,
+                ],
+            },
+            [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },
+            [NetworkPluginID.PLUGIN_SOLANA]: { supportedChainIds: [] },
+        },
     },
     contribution: { metadataKeys: new Set([ITO_MetaKey_1, ITO_MetaKey_2]) },
 }
diff --git a/packages/mask/src/plugins/ITO/types.ts b/packages/mask/src/plugins/ITO/types.ts
index abe216b9556f..7e7649c54dae 100644
--- a/packages/mask/src/plugins/ITO/types.ts
+++ b/packages/mask/src/plugins/ITO/types.ts
@@ -57,7 +57,7 @@ export interface JSON_PayloadOutMask extends Omit<JSON_PayloadInMask, 'token' |
 
 export interface JSON_PayloadComposeMask extends Omit<JSON_PayloadInMask, 'token' | 'exchange_tokens'> {
     token: string
-    exchange_tokens: { address: string }[]
+    exchange_tokens: Array<{ address: string }>
 }
 
 export enum ITO_Status {
@@ -113,7 +113,7 @@ export interface CampaignInfo {
     chain: string
     endTime: number
     startTime: number
-    nfts: { image: string }[]
+    nfts: Array<{ image: string }>
 }
 
 export interface ClaimParams {
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
index bded23df3d24..864cfedc0113 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
@@ -39,6 +39,17 @@ const useTabsStyles = makeStyles()((theme) => ({
     tabPanel: {
         marginTop: `${theme.spacing(2)} !important`,
     },
+    button: {
+        backgroundColor: theme.palette.maskColor.dark,
+        color: 'white',
+        fontSize: 14,
+        fontWeight: 700,
+        width: '100%',
+        '&:hover': {
+            backgroundColor: theme.palette.maskColor.dark,
+        },
+        margin: '0 !important',
+    },
 }))
 
 export interface PreviewCardProps {}
@@ -238,8 +249,11 @@ export function PreviewCard(props: PreviewCardProps) {
                 />
             </Box>
             <Box style={{ padding: 12 }}>
-                <EthereumChainBoundary chainId={chainId}>
-                    <EthereumWalletConnectedBoundary ActionButtonProps={{ size: 'medium' }}>
+                <EthereumChainBoundary chainId={chainId} renderInTimeline>
+                    <EthereumWalletConnectedBoundary
+                        ActionButtonProps={{ size: 'medium' }}
+                        classes={{ button: tabClasses.button }}
+                        renderInTimeline>
                         <ActionButton
                             size="medium"
                             fullWidth
diff --git a/packages/mask/src/plugins/MaskBox/type.ts b/packages/mask/src/plugins/MaskBox/type.ts
index ac12d96c65a3..063518d7aac7 100644
--- a/packages/mask/src/plugins/MaskBox/type.ts
+++ b/packages/mask/src/plugins/MaskBox/type.ts
@@ -76,8 +76,8 @@ export interface BoxMetadata {
     name: string
     mediaType: MediaType
     mediaUrl: string
-    activities: {
+    activities: Array<{
         title: string
         body: string
-    }[]
+    }>
 }
diff --git a/packages/mask/src/plugins/MaskPluginWrapper.tsx b/packages/mask/src/plugins/MaskPluginWrapper.tsx
index 82f6f215d111..51af4b9882c0 100644
--- a/packages/mask/src/plugins/MaskPluginWrapper.tsx
+++ b/packages/mask/src/plugins/MaskPluginWrapper.tsx
@@ -74,14 +74,9 @@ const useStyles = makeStyles<{ backgroundGradient?: string }>()((theme, props) =
         body: {
             padding: theme.spacing(0),
         },
-        button: {
-            backgroundColor: theme.palette.maskColor.dark,
-            color: 'white',
-            width: 254,
-            '&,&:hover': {
-                background: theme.palette.maskColor.dark,
-            },
-            borderRadius: 9999,
+        providerBy: {
+            marginRight: theme.spacing(0.5),
+            color: theme.palette.mode === 'dark' ? '#536471' : theme.palette.text.secondary,
         },
     }
 })
@@ -101,12 +96,7 @@ export default function MaskPostExtraInfoWrapper(props: PluginWrapperProps) {
         )
         return (
             <Box className={classes.provider}>
-                <Typography
-                    sx={{ marginRight: 0.5 }}
-                    variant="body1"
-                    fontSize={14}
-                    fontWeight="400"
-                    color={theme.palette.text.secondary}>
+                <Typography variant="body1" fontSize={14} fontWeight="400" className={classes.providerBy}>
                     {t('plugin_provider_by')}
                 </Typography>
                 {main}
diff --git a/packages/mask/src/plugins/NextID/SNSAdaptor/index.tsx b/packages/mask/src/plugins/NextID/SNSAdaptor/index.tsx
index fce13f0f57f2..5400fae969c4 100644
--- a/packages/mask/src/plugins/NextID/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/NextID/SNSAdaptor/index.tsx
@@ -10,7 +10,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
     ProfileTabs: [
         {
             ID: `${PLUGIN_ID}_tabContent`,
-            label: 'Wallet',
+            label: 'Wallets',
             priority: 10,
             UI: {
                 TabContent: ({ personaList = EMPTY_LIST }) => <NextIdPage personaList={personaList} />,
diff --git a/packages/mask/src/plugins/NextID/components/BindingItem.tsx b/packages/mask/src/plugins/NextID/components/BindingItem.tsx
index 3619ac2cd908..8a618c8cbbd2 100644
--- a/packages/mask/src/plugins/NextID/components/BindingItem.tsx
+++ b/packages/mask/src/plugins/NextID/components/BindingItem.tsx
@@ -21,8 +21,8 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
     },
     copy: {
+        color: theme.palette.text.primary,
         fontSize: 16,
-        stroke: theme.palette.text.primary,
         cursor: 'pointer',
     },
     address: {
diff --git a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
index cba3c8cc5b66..9ffbed296835 100644
--- a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
+++ b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
@@ -109,7 +109,7 @@ export function NextIdPage({ personaList }: NextIdPageProps) {
         firstTab.click()
     }
 
-    if (personaActionButton) {
+    if (personaActionButton && isOwn) {
         return (
             <Stack justifyContent="center" direction="row" mt="24px">
                 {personaActionButton}
diff --git a/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx b/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx
index c97b4f92f9f9..c00395de221c 100644
--- a/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx
+++ b/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx
@@ -61,9 +61,7 @@ const useStyles = makeStyles()((theme) => ({
         minWidth: 'unset',
     },
     progress: {
-        bottom: theme.spacing(1),
-        right: theme.spacing(1),
-        padding: theme.spacing(1),
+        padding: 12,
     },
 }))
 
@@ -106,7 +104,11 @@ export function PoolTogetherView(props: PoolTogetherViewProps) {
     }, [_pools, maskPool])
 
     if (loading || loadingMask) {
-        return <CircularProgress className={classes.progress} color="primary" size={15} />
+        return (
+            <Box className={classes.progress}>
+                <CircularProgress />
+            </Box>
+        )
     }
 
     if (error || errorMask) {
@@ -149,6 +151,7 @@ export function PoolTogetherView(props: PoolTogetherViewProps) {
                 <EthereumChainBoundary
                     chainId={ChainId.Mainnet}
                     isValidChainId={(chainId) => [ChainId.Mainnet, ChainId.Matic].includes(chainId)}
+                    renderInTimeline
                 />
             </Box>
         </>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
index 27f65dc82f39..53f870a8a348 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
@@ -88,28 +88,28 @@ export function OperationFooter({
 
     return (
         <Box style={{ flex: 1, padding: 12 }}>
-            <EthereumChainBoundary chainId={chainId ?? ChainId.Mainnet}>
+            <EthereumChainBoundary chainId={chainId ?? ChainId.Mainnet} renderInTimeline>
                 <EthereumWalletConnectedBoundary
                     hideRiskWarningConfirmed
                     startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
+                    renderInTimeline
                     classes={{
-                        connectWallet: classes.connectWallet,
+                        button: classes.walletButton,
                     }}>
                     <Box className={classes.footer}>
                         {canRefund ? null : (
                             <ActionButton
                                 sx={{
                                     backgroundColor: theme.palette.maskColor.dark,
-                                    width: '100%',
-                                    color: 'white',
+                                    color: theme.palette.maskColor.white,
                                     '&:hover': {
                                         backgroundColor: theme.palette.maskColor.dark,
                                     },
                                     padding: 1.125,
                                 }}
+                                fullWidth
                                 startIcon={<SharedIcon style={{ fontSize: 18 }} />}
                                 variant="contained"
-                                fullWidth
                                 onClick={onShare}>
                                 {t('share')}
                             </ActionButton>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts
index b05f09cec7e1..33db3b03a390 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts
@@ -166,5 +166,15 @@ to {
             fontSize: 24,
             marginTop: 210,
         },
+        walletButton: {
+            backgroundColor: theme.palette.maskColor.dark,
+            color: 'white',
+            fontSize: 14,
+            fontWeight: 700,
+            width: '100%',
+            '&:hover': {
+                backgroundColor: theme.palette.maskColor.dark,
+            },
+        },
     }
 })
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
index ae666d666175..20febe418b79 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
@@ -15,7 +15,11 @@ import {
 import { DialogContent } from '@mui/material'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Web3Utils from 'web3-utils'
-import { useCurrentIdentity, useCurrentLinkedPersona } from '../../../components/DataSource/useActivatedUI'
+import {
+    useCurrentIdentity,
+    useCurrentLinkedPersona,
+    useLastRecognizedIdentity,
+} from '../../../components/DataSource/useActivatedUI'
 import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
 import Services from '../../../extension/service'
 import { useI18N } from '../../../utils'
@@ -95,8 +99,9 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
     const currentIdentity = useCurrentIdentity()
 
     const { value: linkedPersona } = useCurrentLinkedPersona()
-
-    const senderName = currentIdentity?.identifier.userId ?? linkedPersona?.nickname
+    const lastRecognized = useLastRecognizedIdentity()
+    const senderName =
+        lastRecognized.identifier?.userId ?? currentIdentity?.identifier.userId ?? linkedPersona?.nickname
     const { closeDialog: closeApplicationBoardDialog } = useRemoteControlledDialog(
         WalletMessages.events.ApplicationDialogUpdated,
     )
@@ -165,8 +170,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
             // the settings is not available
             if (!createSettings?.token) return
 
-            // TODO:
-            // early return happened
+            // TODO: early return happened
             // we should guide user to select the red packet in the existing list
             if (createState.type !== TransactionStateType.CONFIRMED) return
 
@@ -241,7 +245,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
 
     const tokenState = useState(RpTypeTabs.ERC20)
 
-    const dialogContentHeight = state[0] === DialogTabs.past ? 600 : tokenState[0] === RpTypeTabs.ERC20 ? 350 : 670
+    const dialogContentHeight = state[0] === DialogTabs.past ? 600 : tokenState[0] === RpTypeTabs.ERC20 ? 350 : 690
 
     const tabProps: AbstractTabProps = {
         tabs: [
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
index 04adabcfc0d4..63c55e2e534b 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
@@ -71,8 +71,8 @@ const useStyles = makeStyles()((theme) => {
             gridTemplateColumns: 'repeat(4, 1fr)',
             gap: 16,
             width: '100%',
-            height: 200,
             overflowY: 'auto',
+            height: 200,
             background: theme.palette.background.default,
             borderRadius: 12,
             padding: theme.spacing(1.5, 1.5, 1, 1),
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
index c60e2942897d..2ba0ebd9b8ac 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
@@ -244,7 +244,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
     const onSendOrRefund = useCallback(async () => {
         if (canRefund) await refundCallback()
         if (canSend) onSelect(removeUselessSendParams({ ...history, token: historyToken as FungibleTokenDetailed }))
-    }, [onSelect, refundCallback, canRefund, canSend, history])
+    }, [onSelect, refundCallback, canRefund, canSend, history, historyToken])
 
     // #region password lost tips
     const [anchorEl, setAnchorEl] = useState<(EventTarget & HTMLButtonElement) | null>(null)
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
index 7ed8a172141f..3db5fa3656c9 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
@@ -8,7 +8,7 @@ import {
     TransactionStateType,
 } from '@masknet/web3-shared-evm'
 import LaunchIcon from '@mui/icons-material/Launch'
-import { Grid, Card, CardHeader, Typography, Link, CardMedia, CardContent, Button, Box, Skeleton } from '@mui/material'
+import { Card, CardHeader, Typography, Link, CardMedia, CardContent, Button, Box, Skeleton } from '@mui/material'
 import { useCallback, useEffect, useState } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { useI18N } from '../../../utils'
@@ -23,7 +23,7 @@ import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { openWindow } from '@masknet/shared-base-ui'
-import { PluginWalletConnectIcon } from '@masknet/icons'
+import { PluginWalletConnectIcon, SharedIcon } from '@masknet/icons'
 import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
 
 const useStyles = makeStyles()((theme) => ({
@@ -81,9 +81,12 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: theme.spacing(1),
     },
     button: {
-        marginTop: '0 !important',
-        minHeight: 38,
-        height: 38,
+        backgroundColor: theme.palette.maskColor.dark,
+        color: 'white',
+        '&:hover': {
+            backgroundColor: theme.palette.maskColor.dark,
+        },
+        margin: '0 !important',
     },
     footer: {
         display: 'flex',
@@ -102,6 +105,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     buttonWrapper: {
         marginTop: 0,
+        display: 'flex',
     },
     loadingBox: {
         borderRadius: theme.spacing(1),
@@ -255,7 +259,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
         loading,
         retry: retryAvailability,
         error: availabilityError,
-    } = useAvailabilityNftRedPacket(payload.id, account)
+    } = useAvailabilityNftRedPacket(payload.id, account, payload.chainId)
     const [claimState, claimCallback, resetCallback] = useClaimNftRedpacketCallback(
         payload.id,
         availability?.totalAmount,
@@ -427,16 +431,22 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                     </div>
                 </Card>
             ) : availability.isClaimedAll || availability.isCompleted ? null : (
-                <Grid container spacing={2} className={classes.buttonWrapper}>
-                    <Grid item xs={availability.isClaimed ? 12 : 6}>
-                        <Button className={classes.button} fullWidth onClick={onShare} size="large" variant="contained">
+                <Box className={classes.buttonWrapper}>
+                    <Box sx={{ flex: 1, padding: 1.5 }}>
+                        <Button
+                            startIcon={<SharedIcon style={{ fontSize: 18 }} />}
+                            className={classes.button}
+                            fullWidth
+                            onClick={onShare}
+                            variant="contained">
                             {t('share')}
                         </Button>
-                    </Grid>
+                    </Box>
                     {availability.isClaimed ? null : (
-                        <Grid item xs={6}>
-                            <EthereumChainBoundary chainId={payload.chainId}>
+                        <Box sx={{ flex: 1, padding: 1.5 }}>
+                            <EthereumChainBoundary chainId={payload.chainId} renderInTimeline>
                                 <EthereumWalletConnectedBoundary
+                                    renderInTimeline
                                     startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
                                     classes={{
                                         connectWallet: classes.button,
@@ -454,9 +464,9 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                                     </ActionButton>
                                 </EthereumWalletConnectedBoundary>
                             </EthereumChainBoundary>
-                        </Grid>
+                        </Box>
                     )}
-                </Grid>
+                </Box>
             )}
         </div>
     )
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityNftRedPacket.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityNftRedPacket.ts
index 1537455aa3d1..7e09ff373c0d 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityNftRedPacket.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityNftRedPacket.ts
@@ -1,9 +1,10 @@
+import type { ChainId } from '@masknet/web3-shared-evm'
 import BigNumber from 'bignumber.js'
 import { useAsyncRetry } from 'react-use'
 import { useNftRedPacketContract } from './useNftRedPacketContract'
 
-export function useAvailabilityNftRedPacket(id: string, from: string) {
-    const nftRedPacketContract = useNftRedPacketContract()
+export function useAvailabilityNftRedPacket(id: string, from: string, chainId?: ChainId) {
+    const nftRedPacketContract = useNftRedPacketContract(chainId)
     return useAsyncRetry(async () => {
         if (!id || !nftRedPacketContract) return null
         const availability = await nftRedPacketContract.methods.check_availability(id).call({
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts
index f61aad97f449..14dabadf3fe6 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts
@@ -1,10 +1,10 @@
 import NftRedPacketABI from '@masknet/web3-contracts/abis/NftRedPacket.json'
-import { useContract, useNftRedPacketConstants } from '@masknet/web3-shared-evm'
+import { ChainId, useContract, useNftRedPacketConstants } from '@masknet/web3-shared-evm'
 import type { NftRedPacket } from '@masknet/web3-contracts/types/NftRedPacket'
 import type { AbiItem } from 'web3-utils'
 
-export function useNftRedPacketContract() {
-    const { RED_PACKET_NFT_ADDRESS } = useNftRedPacketConstants()
-    const contract = useContract<NftRedPacket>(RED_PACKET_NFT_ADDRESS, NftRedPacketABI as AbiItem[])
+export function useNftRedPacketContract(chainId?: ChainId) {
+    const { RED_PACKET_NFT_ADDRESS } = useNftRedPacketConstants(chainId)
+    const contract = useContract<NftRedPacket>(RED_PACKET_NFT_ADDRESS, NftRedPacketABI as AbiItem[], chainId)
     return contract
 }
diff --git a/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts b/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts
index c3a96cc598f8..33d07a7d27e7 100644
--- a/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts
+++ b/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts
@@ -57,7 +57,7 @@ const RED_PACKET_FIELDS = `
 
 type RedpacketFromSubgraphType = {
     chain_id: ChainId
-    claimers: { name: string; address: string }[]
+    claimers: Array<{ name: string; address: string }>
     contract_address: string
     contract_version: number
     block_number: number
diff --git a/packages/mask/src/plugins/RedPacket/base.ts b/packages/mask/src/plugins/RedPacket/base.ts
index 017b71a9a04b..cb9aeeea4ca9 100644
--- a/packages/mask/src/plugins/RedPacket/base.ts
+++ b/packages/mask/src/plugins/RedPacket/base.ts
@@ -1,4 +1,6 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { RedPacketMetaKey, RedPacketNftMetaKey, RedPacketPluginID } from './constants'
 
 export const base: Plugin.Shared.Definition = {
@@ -16,6 +18,24 @@ export const base: Plugin.Shared.Definition = {
             networks: {},
         },
         target: 'stable',
+        web3: {
+            [NetworkPluginID.PLUGIN_EVM]: {
+                supportedChainIds: [
+                    ChainId.Mainnet,
+                    ChainId.BSC,
+                    ChainId.Matic,
+                    ChainId.Arbitrum,
+                    ChainId.xDai,
+                    ChainId.Fantom,
+                    ChainId.Avalanche,
+                    ChainId.Aurora,
+                    ChainId.Harmony,
+                    ChainId.Conflux,
+                ],
+            },
+            [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },
+            [NetworkPluginID.PLUGIN_SOLANA]: { supportedChainIds: [] },
+        },
     },
     contribution: {
         metadataKeys: new Set([RedPacketMetaKey, RedPacketNftMetaKey]),
diff --git a/packages/mask/src/plugins/RedPacket/types.ts b/packages/mask/src/plugins/RedPacket/types.ts
index 824649e80d42..4d94b4e98a59 100644
--- a/packages/mask/src/plugins/RedPacket/types.ts
+++ b/packages/mask/src/plugins/RedPacket/types.ts
@@ -62,7 +62,7 @@ export interface RedPacketJSONPayload extends RedPacketBasic {
     token_type?: EthereumTokenType.Native | EthereumTokenType.ERC20
     token?: FungibleTokenDetailed
     token_address?: string
-    claimers?: { address: string; name: string }[]
+    claimers?: Array<{ address: string; name: string }>
     total_remaining?: string
 }
 
@@ -126,10 +126,10 @@ export interface NftRedPacketSubgraphInMask extends Omit<RedPacketBasic, 'is_ran
     chain_id: number
     message: string
     token_ids: string[]
-    claimers: {
+    claimers: Array<{
         name: string
         address: string
-    }[]
+    }>
     creator: {
         name: string
         address: string
diff --git a/packages/mask/src/plugins/Savings/constants.ts b/packages/mask/src/plugins/Savings/constants.ts
index 4f800312198b..83f06963c5e3 100644
--- a/packages/mask/src/plugins/Savings/constants.ts
+++ b/packages/mask/src/plugins/Savings/constants.ts
@@ -3,14 +3,14 @@ import { ChainId, createERC20Tokens, createNativeToken, FungibleTokenDetailed }
 export const SAVINGS_PLUGIN_NAME = 'Savings'
 export const SAVINGS_PLUGIN_ID = 'com.savings'
 
-export const LDO_PAIRS: [FungibleTokenDetailed, FungibleTokenDetailed][] = [
+export const LDO_PAIRS: Array<[FungibleTokenDetailed, FungibleTokenDetailed]> = [
     [
         createNativeToken(ChainId.Mainnet),
         createERC20Tokens('LDO_stETH_ADDRESS', 'Liquid staked Ether 2.0', 'stETH', 18)[ChainId.Mainnet],
     ],
 ]
 
-export const AAVE_PAIRS: [FungibleTokenDetailed, FungibleTokenDetailed][] = [
+export const AAVE_PAIRS: Array<[FungibleTokenDetailed, FungibleTokenDetailed]> = [
     [
         createERC20Tokens('USDT_ADDRESS', 'Tether USD', 'USDT', 6)[ChainId.Mainnet],
         createERC20Tokens('aUSDT_ADDRESS', 'Aave Interest bearing USDT', 'aUSDT', 6)[ChainId.Mainnet],
diff --git a/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts b/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts
index 9ce14d79921a..1349d35b9d31 100644
--- a/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts
+++ b/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts
@@ -80,13 +80,13 @@ export class AAVEProtocol implements SavingsProtocol {
             })
             const fullResponse: {
                 data: {
-                    reserves: {
+                    reserves: Array<{
                         id: string
                         name: string
                         decimals: number
                         underlyingAsset: string
                         liquidityRate: number
-                    }[]
+                    }>
                 }
             } = await response.json()
             const liquidityRate = +fullResponse.data.reserves[0].liquidityRate
@@ -132,11 +132,11 @@ export class AAVEProtocol implements SavingsProtocol {
 
             const fullResponse: {
                 data: {
-                    reserves: {
+                    reserves: Array<{
                         aToken: {
                             id: string
                         }
-                    }[]
+                    }>
                 }
             } = await response.json()
 
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/Snapshot.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/Snapshot.tsx
index 469c94c9436d..5a64acffcd48 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/Snapshot.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/Snapshot.tsx
@@ -128,7 +128,7 @@ export function Snapshot() {
                 </CardContent>
             </Card>
             <Box style={{ padding: 12 }}>
-                <EthereumChainBoundary chainId={chainId} />
+                <EthereumChainBoundary chainId={chainId} renderInTimeline />
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts b/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts
index 64411842eb66..5f266290aedf 100644
--- a/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts
+++ b/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts
@@ -113,7 +113,7 @@ export async function getScores(
     space: string,
     strategies: Strategy[],
 ) {
-    const scores: { [key in string]: number }[] = await ss.utils.getScores(
+    const scores: Array<{ [key in string]: number }> = await ss.utils.getScores(
         space,
         strategies,
         network,
diff --git a/packages/mask/src/plugins/Snapshot/types.ts b/packages/mask/src/plugins/Snapshot/types.ts
index 5959e80fad7d..d57fded9f0a8 100644
--- a/packages/mask/src/plugins/Snapshot/types.ts
+++ b/packages/mask/src/plugins/Snapshot/types.ts
@@ -89,11 +89,11 @@ export interface VoteItem {
     choice: string | undefined
     totalWeight: number | undefined
     choices:
-        | {
+        | Array<{
               index: number
               weight: number
               name: string
-          }[]
+          }>
         | undefined
     address: string
     authorIpfsHash: string
@@ -115,10 +115,10 @@ export type VoteItemList = {
 
 export interface ProposalResult {
     choice: string
-    powerDetail: {
+    powerDetail: Array<{
         power: number
         name: string
-    }[]
+    }>
     power: number
     percentage: number
 }
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx
index 7e77157fcb48..5193d749fe21 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx
@@ -63,7 +63,7 @@ export function CoinMetadataTable(props: CoinMetadataTableProps) {
         ['Tech Docs', trending.coin.tech_docs_urls],
         ['Source Code', trending.coin.source_code_urls],
         ['Community', trending.coin.community_urls],
-    ] as [string, string[] | undefined][]
+    ] as Array<[string, string[] | undefined]>
 
     return (
         <TableContainer className={classes.container} component={Paper} elevation={0}>
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx
index 20f7dca725ae..baae9010c044 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx
@@ -15,7 +15,7 @@ const DEFAULT_DIMENSION: Dimension = {
 }
 
 export interface PriceChartProps extends withClasses<'root'> {
-    data: { date: Date; value: number }[]
+    data: Array<{ date: Date; value: number }>
     width?: number
     height?: number
     currency: Currency
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/PriceChangedTable.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/PriceChangedTable.tsx
index 21e3693aae00..77b758e5c011 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/PriceChangedTable.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/PriceChangedTable.tsx
@@ -56,7 +56,7 @@ export function PriceChangedTable({ market }: PriceChangedTableProps) {
         },
     ]
 
-    const filteredRecords = records.filter((record) => typeof record.percentage === 'number') as Required<Record>[]
+    const filteredRecords = records.filter((record) => typeof record.percentage === 'number') as Array<Required<Record>>
 
     return (
         <TableContainer className={classes.container}>
diff --git a/packages/mask/src/plugins/Trader/apis/LBP/index.ts b/packages/mask/src/plugins/Trader/apis/LBP/index.ts
index 6f9e848c3aa2..5f3aa16d4f09 100644
--- a/packages/mask/src/plugins/Trader/apis/LBP/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/LBP/index.ts
@@ -18,10 +18,10 @@ async function fetchFromBalancerPoolSubgraph<T>(query: string) {
 
 export async function fetchLBP_PoolsByTokenAddress(address: string) {
     const data = await fetchFromBalancerPoolSubgraph<{
-        pools: {
+        pools: Array<{
             id: string
             createTime: number
-        }[]
+        }>
     }>(`
     {
         pools(
@@ -53,7 +53,7 @@ export async function fetchLBP_PoolTokenPrices(poolId: string, address: string,
         }
     `,
     )
-    const data = await fetchFromBalancerPoolSubgraph<Record<string, { price: string }[]>>(`
+    const data = await fetchFromBalancerPoolSubgraph<Record<string, Array<{ price: string }>>>(`
         query tokenPrices {
             ${queries.join('\n')}
         }
diff --git a/packages/mask/src/plugins/Trader/apis/coingecko/index.ts b/packages/mask/src/plugins/Trader/apis/coingecko/index.ts
index 201a83f7aff3..a0735a045a5e 100644
--- a/packages/mask/src/plugins/Trader/apis/coingecko/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/coingecko/index.ts
@@ -1,9 +1,12 @@
 import { COIN_GECKO_BASE_URL } from '../../constants'
 import { Flags } from '../../../../../shared'
+import { courier } from '@masknet/web3-providers'
 
 // #region get currency
 export async function getAllCurrencies() {
-    const response = await fetch(`${COIN_GECKO_BASE_URL}/simple/supported_vs_currencies`, { cache: 'force-cache' })
+    const response = await fetch(courier(`${COIN_GECKO_BASE_URL}/simple/supported_vs_currencies`), {
+        cache: 'force-cache',
+    })
     return response.json() as Promise<string[]>
 }
 // #endregion
@@ -16,7 +19,7 @@ export interface Coin {
 }
 
 export async function getAllCoins() {
-    const response = await fetch(`${COIN_GECKO_BASE_URL}/coins/list`, { cache: 'force-cache' })
+    const response = await fetch(courier(`${COIN_GECKO_BASE_URL}/coins/list`), { cache: 'force-cache' })
     return response.json() as Promise<Coin[]>
 }
 // #endregion
@@ -74,7 +77,7 @@ export interface CoinInfo {
     platforms: Record<string, string>
     name: string
     symbol: string
-    tickers: {
+    tickers: Array<{
         base: string
         target: string
         market: {
@@ -105,7 +108,7 @@ export interface CoinInfo {
         trade_url: string
         coin_id: string
         target_coin_id?: string
-    }[]
+    }>
 }
 
 export async function getCoinInfo(coinId: string) {
diff --git a/packages/mask/src/plugins/Trader/apis/trending/index.ts b/packages/mask/src/plugins/Trader/apis/trending/index.ts
index a8fa0cd65138..8949ef40297d 100644
--- a/packages/mask/src/plugins/Trader/apis/trending/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/trending/index.ts
@@ -192,8 +192,7 @@ async function getCoinTrending(id: string, currency: Currency, dataProvider: Dat
                     symbol: info.symbol.toUpperCase(),
                     is_mirrored: isMirroredKeyword(info.symbol),
 
-                    // TODO:
-                    // use current language setting
+                    // TODO: use current language setting
                     description: info.description.en,
                     market_cap_rank: info.market_cap_rank,
                     image_url: info.image.small,
diff --git a/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts b/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts
index 959e6798fd54..a59243a21705 100644
--- a/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts
@@ -20,14 +20,14 @@ export async function fetchLatestBlocks() {
     type status = {
         synced: string
         health: string
-        chains: {
+        chains: Array<{
             chainHeadBlock: {
                 number: number
             }
             latestBlock: {
                 number: number
             }
-        }[]
+        }>
     }
     const response = await fetchFromUniswapV2Health<{
         indexingStatusForCurrentVersion: status
diff --git a/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts b/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts
index dd59d68420f9..b70283cbc0ff 100644
--- a/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts
@@ -182,7 +182,7 @@ export async function fetchTokenDayData(address: string, date: Date) {
     const utcTimestamp = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
     const data = await fetchFromUniswapV2Subgraph<{
         data: {
-            tokenDayData: {
+            tokenDayData: Array<{
                 id: string
                 date: number
                 priceUSD: string
@@ -192,7 +192,7 @@ export async function fetchTokenDayData(address: string, date: Date) {
                 dailyVolumeETH: number
                 dailyVolumeToken: number
                 dailyVolumeUSD: number
-            }[]
+            }>
         }
     }>(`
         {
@@ -317,7 +317,7 @@ export async function fetchPairData(pairAddress: string, blockNumber?: string) {
  */
 export async function fetchPricesByBlocks(
     tokenAddress: string,
-    blocks: { blockNumber?: string; timestamp: number }[],
+    blocks: Array<{ blockNumber?: string; timestamp: number }>,
     skipCount = 50,
 ) {
     // avoiding request entity too large
diff --git a/packages/mask/src/plugins/Trader/graphs/usePriceLineChart.ts b/packages/mask/src/plugins/Trader/graphs/usePriceLineChart.ts
index e6a8cd169539..59296bedbfde 100644
--- a/packages/mask/src/plugins/Trader/graphs/usePriceLineChart.ts
+++ b/packages/mask/src/plugins/Trader/graphs/usePriceLineChart.ts
@@ -5,7 +5,7 @@ import type { Dimension } from './useDimension'
 
 export function usePriceLineChart(
     svgRef: RefObject<SVGSVGElement>,
-    data: { date: Date; value: number }[],
+    data: Array<{ date: Date; value: number }>,
     dimension: Dimension,
     id: string,
     color = 'steelblue',
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts
index 04220f26f898..ac7928175153 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts
@@ -24,8 +24,8 @@ export function useAllCurrencyCombinations(tradeProvider: TradeProvider, currenc
         return [...common, ...additionalA, ...additionalB].map((x) => toUniswapToken(chainId, x))
     }, [chainId, chainIdValid, tokenA?.address, tokenB?.address])
 
-    const basePairs: [Token, Token][] = useMemo(
-        () => flatMap(bases, (base): [Token, Token][] => bases.map((otherBase) => [base, otherBase])),
+    const basePairs: Array<[Token, Token]> = useMemo(
+        () => flatMap(bases, (base): Array<[Token, Token]> => bases.map((otherBase) => [base, otherBase])),
         [bases],
     )
 
@@ -73,7 +73,7 @@ export function useAllCommonPairs(tradeProvider: TradeProvider, currencyA?: Curr
     // only pass along valid pairs, non-duplicated pairs
     const allPairs_ = useMemo(() => {
         const filtered = new Map<string, Pair>()
-        for (const [state, pair] of allPairs as [PairState.EXISTS, Pair][]) {
+        for (const [state, pair] of allPairs as Array<[PairState.EXISTS, Pair]>) {
             // filter out invalid pairs
             if (state !== PairState.EXISTS) continue
             if (!pair) continue
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useAllV3Routes.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useAllV3Routes.ts
index b0d496ab37c2..6d2dff736c20 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useAllV3Routes.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useAllV3Routes.ts
@@ -11,10 +11,10 @@ function computeAllRoutes(
     pools: Pool[],
     chainId: number,
     currentPath: Pool[] = [],
-    allPaths: Route<Currency, Currency>[] = [],
+    allPaths: Array<Route<Currency, Currency>> = [],
     startCurrencyIn: Currency = currencyIn,
     maxHops = 2,
-): Route<Currency, Currency>[] {
+): Array<Route<Currency, Currency>> {
     const tokenIn = currencyIn?.wrapped
     const tokenOut = currencyOut?.wrapped
     if (!tokenIn || !tokenOut) throw new Error('Missing tokenIn/tokenOut')
@@ -54,7 +54,7 @@ function computeAllRoutes(
 export function useAllV3Routes(
     currencyIn?: Currency,
     currencyOut?: Currency,
-): { loading: boolean; routes: Route<Currency, Currency>[] } {
+): { loading: boolean; routes: Array<Route<Currency, Currency>> } {
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
     const { pools, loading: poolsLoading } = useV3SwapPools(currencyIn, currencyOut)
     const singleHopOnly = useSingleHopOnly()
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts b/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts
index 79640191d3db..5614c9170847 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts
@@ -19,12 +19,12 @@ export enum PoolState {
 
 export function usePools(
     tradeProvider: TradeProvider,
-    poolKeys: [Currency | undefined, Currency | undefined, FeeAmount | undefined][],
-): [PoolState, Pool | null][] {
+    poolKeys: Array<[Currency | undefined, Currency | undefined, FeeAmount | undefined]>,
+): Array<[PoolState, Pool | null]> {
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
     const context = useGetTradeContext(tradeProvider)
 
-    const transformed: ([Token, Token, FeeAmount] | null)[] = useMemo(() => {
+    const transformed: Array<[Token, Token, FeeAmount] | null> = useMemo(() => {
         return poolKeys.map(([currencyA, currencyB, feeAmount]) => {
             if (!chainId || !currencyA || !currencyB || !feeAmount) return null
 
@@ -111,7 +111,7 @@ export function usePool(
     currencyB: Currency | undefined,
     feeAmount: FeeAmount | undefined,
 ): [PoolState, Pool | null] {
-    const poolKeys: [Currency | undefined, Currency | undefined, FeeAmount | undefined][] = useMemo(
+    const poolKeys: Array<[Currency | undefined, Currency | undefined, FeeAmount | undefined]> = useMemo(
         () => [[currencyA, currencyB, feeAmount]],
         [currencyA, currencyB, feeAmount],
     )
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useV3SwapPools.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useV3SwapPools.ts
index 4e8d6591b71a..059f68186f7b 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useV3SwapPools.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useV3SwapPools.ts
@@ -19,7 +19,7 @@ export function useV3SwapPools(
 } {
     const allCurrencyCombinations = useAllCurrencyCombinations(TradeProvider.UNISWAP_V3, currencyIn, currencyOut)
 
-    const allCurrencyCombinationsWithAllFees: [Token, Token, FeeAmount][] = useMemo(
+    const allCurrencyCombinationsWithAllFees: Array<[Token, Token, FeeAmount]> = useMemo(
         () =>
             allCurrencyCombinations.flatMap<[Token, Token, FeeAmount]>(([tokenA, tokenB]) => [
                 [tokenA, tokenB, FeeAmount.LOW],
diff --git a/packages/mask/src/plugins/Trader/trending/useCurrentCurrency.ts b/packages/mask/src/plugins/Trader/trending/useCurrentCurrency.ts
index bfa644cd3812..c71eef46e687 100644
--- a/packages/mask/src/plugins/Trader/trending/useCurrentCurrency.ts
+++ b/packages/mask/src/plugins/Trader/trending/useCurrentCurrency.ts
@@ -3,12 +3,12 @@ import { DataProvider } from '@masknet/public-api'
 const CURRENCIES_MAP: Record<
     DataProvider,
     | undefined
-    | {
+    | Array<{
           id: string
           name: string
           symbol: string
           description: string
-      }[]
+      }>
 > = {
     [DataProvider.COIN_GECKO]: [
         {
diff --git a/packages/mask/src/plugins/Trader/types/0x.ts b/packages/mask/src/plugins/Trader/types/0x.ts
index 5d7ad2e8c5f6..5175a9d86ed0 100644
--- a/packages/mask/src/plugins/Trader/types/0x.ts
+++ b/packages/mask/src/plugins/Trader/types/0x.ts
@@ -76,11 +76,11 @@ export interface SwapQuoteResponse {
 export interface SwapValidationErrorResponse {
     code: number
     reason: string
-    validationErrors: {
+    validationErrors: Array<{
         code: number
         field: string
         reason: string
-    }[]
+    }>
 }
 
 export interface SwapServerErrorResponse {
diff --git a/packages/mask/src/plugins/Trader/types/trader.ts b/packages/mask/src/plugins/Trader/types/trader.ts
index 956f1a8fc0f7..20fa860c5e49 100644
--- a/packages/mask/src/plugins/Trader/types/trader.ts
+++ b/packages/mask/src/plugins/Trader/types/trader.ts
@@ -92,7 +92,9 @@ export interface TradeComputed<T = unknown> {
     maximumSold: BigNumber
     minimumReceived: BigNumber
     fee: BigNumber
-    path?: (PartialRequired<NativeTokenDetailed, 'address'> | PartialRequired<ERC20TokenDetailed, 'address'>)[][]
+    path?: Array<
+        Array<PartialRequired<NativeTokenDetailed, 'address'> | PartialRequired<ERC20TokenDetailed, 'address'>>
+    >
     trade_?: T
 }
 
diff --git a/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx b/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx
index 70ad5e11208e..01a30f0fc86e 100644
--- a/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx
+++ b/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx
@@ -63,7 +63,7 @@ export default function UnlockProtocolInPost(props: UnlockProtocolInPostProps) {
             ? renderWithUnlockProtocolMetadata(props.message.meta, (r) => {
                   return (
                       <Render>
-                          <EthereumChainBoundary chainId={chain} noSwitchNetworkTip={false}>
+                          <EthereumChainBoundary chainId={chain} noSwitchNetworkTip={false} renderInTimeline>
                               <Typography color="textPrimary">{content}</Typography>
                           </EthereumChainBoundary>
                       </Render>
@@ -95,7 +95,7 @@ export default function UnlockProtocolInPost(props: UnlockProtocolInPostProps) {
             ? renderWithUnlockProtocolMetadata(props.message.meta, (r) => {
                   return (
                       <Render>
-                          <EthereumChainBoundary chainId={chain} noSwitchNetworkTip={false}>
+                          <EthereumChainBoundary chainId={chain} noSwitchNetworkTip={false} renderInTimeline>
                               <Typography color="textPrimary">"{t('loading')}"</Typography>
                               <br />
                           </EthereumChainBoundary>
diff --git a/packages/mask/src/plugins/UnlockProtocol/Services.ts b/packages/mask/src/plugins/UnlockProtocol/Services.ts
index f18ca77677b2..5a3329a0095d 100644
--- a/packages/mask/src/plugins/UnlockProtocol/Services.ts
+++ b/packages/mask/src/plugins/UnlockProtocol/Services.ts
@@ -10,15 +10,15 @@ for (const [key, url] of Object.entries(graphEndpointKeyVal)) {
 }
 
 export interface verifyHolderResponse {
-    keyHolders: {
-        keys: {
+    keyHolders: Array<{
+        keys: Array<{
             expiration: number
             keyId: string
             lock: {
                 address: string
             }
-        }[]
-    }[]
+        }>
+    }>
 }
 
 const verifyHolder = async <verifyHolderResponse>(_lockAddress: string, _holder: string, _chain: number) => {
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx
index c55166e43d31..1b2614b87110 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx
@@ -19,6 +19,7 @@ import { WalletMessages, WalletRPC } from '../../messages'
 import { hasNativeAPI, nativeAPI } from '../../../../../shared/native-rpc'
 import { PluginProviderRender } from './PluginProviderRender'
 import { pluginIDSettings } from '../../../../settings/settings'
+import { useUpdateEffect } from 'react-use'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -70,7 +71,6 @@ export function SelectProviderDialog(props: SelectProviderDialogProps) {
         async (result?: Web3Plugin.ConnectionResult) => {
             if (result)
                 await WalletRPC.updateAccount(result as Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType>)
-
             if (undeterminedNetwork?.type === networkType) {
                 pluginIDSettings.value = undeterminedPluginID
             }
@@ -80,6 +80,12 @@ export function SelectProviderDialog(props: SelectProviderDialogProps) {
         [networkType, undeterminedNetwork?.type, undeterminedPluginID, closeDialog, isDashboard],
     )
 
+    useUpdateEffect(() => {
+        if (undeterminedNetwork?.type === networkType) {
+            pluginIDSettings.value = undeterminedPluginID
+        }
+    }, [undeterminedNetwork?.type, networkType])
+
     // not available for the native app
     if (hasNativeAPI) return null
 
diff --git a/packages/mask/src/plugins/Wallet/apis/ens.ts b/packages/mask/src/plugins/Wallet/apis/ens.ts
index a422c0cdb61a..48ec09c400c9 100644
--- a/packages/mask/src/plugins/Wallet/apis/ens.ts
+++ b/packages/mask/src/plugins/Wallet/apis/ens.ts
@@ -17,10 +17,10 @@ export async function fetchAddressNamesByTwitterId(twitterId: string) {
     if (!twitterId) return []
     const data = await fetchFromENSTextResolverSubgraph<{
         twitterHandle?: {
-            domains: {
+            domains: Array<{
                 id: string
                 owner: string
-            }[]
+            }>
         }
     }>(`
         query twitterHandle {
diff --git a/packages/mask/src/plugins/Wallet/services/wallet/index.ts b/packages/mask/src/plugins/Wallet/services/wallet/index.ts
index 29ef45a18c76..96c990f49f0c 100644
--- a/packages/mask/src/plugins/Wallet/services/wallet/index.ts
+++ b/packages/mask/src/plugins/Wallet/services/wallet/index.ts
@@ -51,11 +51,13 @@ export async function getWallet(address?: string) {
 }
 
 export async function getWallets(providerType?: ProviderType): Promise<
-    (Omit<WalletRecord, 'type'> & {
-        configurable: boolean
-        hasStoredKeyInfo: boolean
-        hasDerivationPath: boolean
-    })[]
+    Array<
+        Omit<WalletRecord, 'type'> & {
+            configurable: boolean
+            hasStoredKeyInfo: boolean
+            hasDerivationPath: boolean
+        }
+    >
 > {
     if (hasNativeAPI) {
         if (providerType && providerType !== ProviderType.MaskWallet) return []
@@ -112,11 +114,11 @@ export async function getDerivableAccounts(mnemonic: string, page: number, pageS
     })
     if (!imported?.StoredKey) throw new Error('Failed to import the wallet.')
 
-    const accounts: {
+    const accounts: Array<{
         index: number
         address: string
         derivationPath: string
-    }[] = []
+    }> = []
 
     for (let i = pageSize * page; i < pageSize * (page + 1); i += 1) {
         const derivationPath = `${HD_PATH_WITHOUT_INDEX_ETHEREUM}/${i}`
diff --git a/packages/mask/src/plugins/Wallet/types/debank.ts b/packages/mask/src/plugins/Wallet/types/debank.ts
index 2fb7972f7ecb..de4774be8edb 100644
--- a/packages/mask/src/plugins/Wallet/types/debank.ts
+++ b/packages/mask/src/plugins/Wallet/types/debank.ts
@@ -32,8 +32,7 @@ export interface TokenItem {
 
 export interface HistoryItem {
     cate_id: keyof HistoryResponse['data']['cate_dict']
-    // TODO:
-    // implement debt_liquidated
+    // TODO: implement debt_liquidated
     debt_liquidated: null
     id: string
     other_addr: string
diff --git a/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx b/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx
index 158285d2c292..d4dcb590841c 100644
--- a/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx
+++ b/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx
@@ -133,7 +133,7 @@ export function PoolView(props: PoolViewProps) {
                 </CardContent>
             </Card>
             <Box sx={{ display: 'flex', width: 'calc(100% - 24px)', padding: 1.5 }}>
-                <EthereumChainBoundary chainId={pool.chainId} />
+                <EthereumChainBoundary chainId={pool.chainId} renderInTimeline />
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/hooks/useLineChart.ts b/packages/mask/src/plugins/hooks/useLineChart.ts
index bd35c37089db..3555285d7133 100644
--- a/packages/mask/src/plugins/hooks/useLineChart.ts
+++ b/packages/mask/src/plugins/hooks/useLineChart.ts
@@ -5,7 +5,7 @@ import type { Dimension } from './useDimension'
 
 export function useLineChart(
     svgRef: RefObject<SVGSVGElement>,
-    data: { date: Date; value: number }[],
+    data: Array<{ date: Date; value: number }>,
     dimension: Dimension,
     id: string,
     opts: { color?: string; tickFormat?: string; formatTooltip?: Function },
diff --git a/packages/mask/src/plugins/hooks/usePriceLineChart.ts b/packages/mask/src/plugins/hooks/usePriceLineChart.ts
index f173a19c7e52..89998fc0966b 100644
--- a/packages/mask/src/plugins/hooks/usePriceLineChart.ts
+++ b/packages/mask/src/plugins/hooks/usePriceLineChart.ts
@@ -5,7 +5,7 @@ import { useLineChart } from './useLineChart'
 
 export function usePriceLineChart(
     svgRef: RefObject<SVGSVGElement>,
-    data: { date: Date; value: number }[],
+    data: Array<{ date: Date; value: number }>,
     dimension: Dimension,
     id: string,
     opts: { color?: string; sign?: string },
diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx
index 0271d175348d..7dd832f3934f 100644
--- a/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx
+++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx
@@ -6,7 +6,8 @@ import { ToolboxAtFacebook } from './ToolbarUI'
 export function injectToolboxHintAtFacebook(signal: AbortSignal, category: 'wallet' | 'application') {
     const watcher = new MutationObserverWatcher(toolBoxInSideBarSelector())
     startWatch(watcher, signal)
+    const hasTopNavBar = Boolean(document.querySelector<HTMLElement>('#ssrb_top_nav_start ~ [role="banner"]'))
     createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render(
-        <ToolboxAtFacebook category={category} />,
+        <ToolboxAtFacebook category={category} hasTopNavBar={hasTopNavBar} />,
     )
 }
diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
index da7d3003887c..bb5605084996 100644
--- a/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
+++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
@@ -3,8 +3,8 @@ import { ToolboxHintUnstyled } from '../../../components/InjectedComponents/Tool
 
 const fbBreakPoint = 700 /** px */
 
-const Container = styled('div')`
-    padding: 0 8px;
+const Container = styled('div')<{ hasTopNavBar: boolean }>`
+    padding: 0 ${(props) => (props.hasTopNavBar ? '8px' : '4px')};
 `
 const Item = styled(ListItemButton)`
     border-radius: 8px;
@@ -16,22 +16,23 @@ const Text = styled(Typography)`
     color: var(--primary-text);
     font-weight: 500;
 `
-const Icon = styled(ListItemIcon)`
-    min-width: 46px;
+const Icon = styled(ListItemIcon)<{ hasTopNavBar: boolean }>`
+    min-width: ${(props) => (props.hasTopNavBar ? '46px' : 'auto')};
+    margin-right: ${(props) => (props.hasTopNavBar ? '0px' : '12px')};
     @media screen and (max-height: ${fbBreakPoint}px) {
-        min-width: 36px;
+        min-width: ${(props) => (props.hasTopNavBar ? '36px' : 'auto')};
     }
 `
 
-export function ToolboxAtFacebook(props: { category: 'wallet' | 'application' }) {
+export function ToolboxAtFacebook(props: { category: 'wallet' | 'application'; hasTopNavBar: boolean }) {
     const isSmall = useMediaQuery(`(max-height: ${fbBreakPoint}px)`)
     return (
         <ToolboxHintUnstyled
-            iconSize={isSmall ? 24 : 32}
-            Container={Container}
+            iconSize={isSmall || !props.hasTopNavBar ? 24 : 32}
+            Container={({ children }) => <Container hasTopNavBar={props.hasTopNavBar}>{children}</Container>}
             ListItemButton={Item}
             Typography={Text}
-            ListItemIcon={Icon}
+            ListItemIcon={({ children }) => <Icon hasTopNavBar={props.hasTopNavBar}>{children}</Icon>}
             category={props.category}
         />
     )
diff --git a/packages/mask/src/social-network-adaptor/facebook.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/facebook.com/utils/selector.ts
index 4cadcc089825..e2d5930f2e9f 100644
--- a/packages/mask/src/social-network-adaptor/facebook.com/utils/selector.ts
+++ b/packages/mask/src/social-network-adaptor/facebook.com/utils/selector.ts
@@ -30,7 +30,7 @@ export const bioDescriptionSelector = () =>
 export const bioDescriptionSelectorOnMobile: () => LiveSelector<HTMLDivElement, true> = () => querySelector('#bio div')
 
 export const searchUserIdSelector: () => LiveSelector<HTMLAnchorElement, true> = () =>
-    querySelector<HTMLAnchorElement>('div[data-pagelet="ProfileTabs"] a[role="tab"]')
+    querySelector<HTMLAnchorElement>('div[role="tablist"][data-visualcompletion="ignore-dynamic"] a[role="tab"]')
 
 export const searchUserIdSelectorOnMobile: () => LiveSelector<HTMLAnchorElement, true> = () =>
     querySelector<HTMLAnchorElement>('#tlFeed div[data-sigil="scroll-area"] a:last-child')
@@ -88,7 +88,11 @@ export const searchFacebookConfirmAvatarImageSelector = () =>
 // #region
 
 export const toolBoxInSideBarSelector: () => LiveSelector<E, true> = () =>
-    querySelector<E>('[data-pagelet="LeftRail"] li:nth-child(2)')
+    querySelector<E>('#ssrb_left_rail_start')
+        .closest(1)
+        .querySelector('h2')
+        .closest(1)
+        .querySelector('div > div > div > :nth-child(2) > ul > li:nth-child(2)')
 
 // for getting normal tab style
 export const profileTabUnselectedSelector: () => LiveSelector<E, true> = () =>
diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/NFTAvatarEditProfile.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/NFTAvatarEditProfile.tsx
index b925601314d6..51e407b01eb8 100644
--- a/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/NFTAvatarEditProfile.tsx
+++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/NFTAvatarEditProfile.tsx
@@ -38,6 +38,9 @@ const useStyles = makeStyles()(() => ({
         color: '#ffffff',
         lineHeight: '12px',
     },
+    icon: {
+        color: 'white',
+    },
 }))
 
 export function openNFTAvatarSettingDialog() {
diff --git a/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
index 46f2e15ef256..977325171b2f 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
+++ b/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
@@ -28,14 +28,15 @@ export function startWatchThemeColor(signal: AbortSignal) {
         if (backgroundColor)
             backgroundColorRef.value = currentTheme.value === 'light' ? 'rgb(244, 244 ,245)' : 'rgb(26, 32, 37)'
     }
+    // init
+    currentTheme.value = getBackgroundColor(document.body) === 'rgb(255,255,255)' ? 'light' : 'dark'
 
     const watcher = new MutationObserverWatcher(themeListItemSelector())
-        .addListener('onAdd', updateThemeColor)
-        .addListener('onChange', updateThemeColor)
-        .startWatch({
-            childList: true,
-            subtree: true,
-        })
+    // update
+    watcher.addListener('onAdd', updateThemeColor).addListener('onChange', updateThemeColor).startWatch({
+        childList: true,
+        subtree: true,
+    })
     signal.addEventListener('abort', () => watcher.stopWatch())
 }
 
diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
index de15d87e68eb..77b4a151d92c 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
+++ b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
@@ -1,5 +1,5 @@
 import { ToolboxHintUnstyled } from '../../../components/InjectedComponents/ToolboxUnstyled'
-import { styled, ListItemButton, Typography, ListItemIcon, useMediaQuery } from '@mui/material'
+import { styled, ListItemButton, Typography, ListItemIcon, useMediaQuery, useTheme } from '@mui/material'
 
 const mindsBreakPoint = 1221 /** px */
 
@@ -42,7 +42,7 @@ const Icon = styled(ListItemIcon)`
 
 export function ToolboxHintAtMinds(props: { category: 'wallet' | 'application' }) {
     const mini = useMediaQuery(`(max-width: ${mindsBreakPoint}px)`)
-
+    const mode = useTheme().palette.mode
     return (
         <ToolboxHintUnstyled
             mini={mini}
diff --git a/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts
index 47fd391b1f1b..11ba52931f6e 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts
+++ b/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts
@@ -10,9 +10,7 @@ const querySelector = <T extends E, SingleMode extends boolean = true>(selector:
 export const rootSelector: () => LiveSelector<E, true> = () => querySelector<E>('m-app')
 
 export const themeListItemSelector: () => LiveSelector<HTMLAnchorElement, true> = () =>
-    querySelector<HTMLAnchorElement>(
-        'm-usermenu__v3 > div.m-user-menu.m-dropdown > ul > li:nth-child(5) .ng-star-inserted',
-    )
+    querySelector<HTMLAnchorElement>('.m-sidebarMore__dropdown > li:nth-child(7)')
 
 export const composerModalSelector: () => LiveSelector<E, true> = () => querySelector<E>('m-composer__modal')
 
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts b/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts
index 3eca2d3fb5c0..97535cbe94aa 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts
@@ -51,9 +51,12 @@ function resolveLastRecognizedIdentityInner(
 ) {
     const assign = async () => {
         await delay(5000)
-        const avatar = searchSelfAvatarSelector().evaluate()?.getAttribute('src') ?? ''
-        const handle = searchSelfHandleSelector().evaluate()?.textContent?.trim()?.replace(/^@/, '')
-        const nickname = searchSelfNicknameSelector().evaluate()?.textContent?.trim() ?? ''
+        const { collect } = recognizeDesktop()
+        const dataFromScript = collect()
+        const avatar = (searchSelfAvatarSelector().evaluate()?.getAttribute('src') || dataFromScript.avatar) ?? ''
+        const handle =
+            searchSelfHandleSelector().evaluate()?.textContent?.trim()?.replace(/^@/, '') || dataFromScript.handle
+        const nickname = (searchSelfNicknameSelector().evaluate()?.textContent?.trim() || dataFromScript.nickname) ?? ''
 
         if (handle) {
             ref.value = {
@@ -75,11 +78,8 @@ function resolveLastRecognizedIdentityInner(
                 attributeFilter: ['src'],
             })
 
-        window.addEventListener('locationchange', assign)
-        cancel.addEventListener('abort', () => {
-            window.removeEventListener('locationchange', assign)
-            watcher.stopWatch()
-        })
+        window.addEventListener('locationchange', assign, { signal: cancel })
+        cancel.addEventListener('abort', () => watcher.stopWatch(), { signal: cancel })
     }
 
     assign()
@@ -149,11 +149,8 @@ function resolveCurrentVisitingIdentityInner(
                 attributeFilter: ['src', 'content'],
             })
 
-        window.addEventListener('locationchange', assign)
-        cancel.addEventListener('abort', () => {
-            window.removeEventListener('locationchange', assign)
-            watcher.stopWatch()
-        })
+        window.addEventListener('locationchange', assign, { signal: cancel })
+        cancel.addEventListener('abort', () => watcher.stopWatch(), { signal: cancel })
     }
 
     assign()
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
index a51c4e3bcb8a..a3e1c4fb8a7b 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts
@@ -61,11 +61,11 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
         },
         dialogTitle: {
             display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
+            gridTemplateColumns: '1fr auto 1fr',
             alignItems: 'center',
             padding: 16,
             position: 'relative',
-            background: theme.palette.background.modalTitle,
+            background: theme.palette.maskColor.modelTitleBg,
             borderBottom: 'none',
             '& > p': {
                 fontSize: 18,
@@ -84,7 +84,6 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => {
             },
         },
         dialogContent: {
-            padding: 16,
             [smallQuery]: {
                 display: 'flex',
                 flexDirection: 'column',
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts
index 197b49efeb03..9e6c1f22d6a7 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts
+++ b/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts
@@ -114,7 +114,7 @@ export const postEditorInPopupSelector: () => LiveSelector<E, true> = () =>
 export const toolBoxInSideBarSelector: () => LiveSelector<E, true> = () =>
     querySelector<E>('[role="banner"] [role="navigation"] > div')
 export const sideBarProfileSelector: () => LiveSelector<E, true> = () =>
-    querySelector<E>('[role="banner"] [role="navigation"] [aria-label="Profile"] > div')
+    querySelector<E>('[role="banner"] [role="navigation"] [data-testid="AppTabBar_Profile_Link"] > div')
 export const postEditorInTimelineSelector: () => LiveSelector<E, true> = () =>
     querySelector<E>('[role="main"] :not(aside) > [role="progressbar"] ~ div [role="button"][aria-label]:nth-child(6)')
 
@@ -217,7 +217,7 @@ export const postsContentSelector = () =>
 export const postAvatarsContentSelector = () =>
     querySelectorAll('[data-testid="tweet"] > div > div > div > :nth-child(2)')
 
-const base = querySelector<HTMLScriptElement>('#react-root + script')
+const base = querySelector<HTMLScriptElement>('#react-root ~ script')
 const handle = /"screen_name":"(.*?)"/
 const name = /"name":"(.*?)"/
 const bio = /"description":"(.*?)"/
diff --git a/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts b/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts
index 1c083fb4ec90..5413c6bd916d 100644
--- a/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts
+++ b/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts
@@ -10,6 +10,8 @@ import { ValueRef } from '@dimensiondev/holoflows-kit'
 import { useValueRef } from '@masknet/shared-base-ui'
 import { languageSettings } from '../../settings/settings'
 import { cloneDeep, merge } from 'lodash-unified'
+import twitterColorSchema from '../../social-network-adaptor/twitter.com/customization/twitter-color-schema.json'
+import produce, { setAutoFreeze } from 'immer'
 
 const staticRef = createSubscriptionFromValueRef(new ValueRef('light'))
 const defaultUseTheme = (t: Theme) => t
@@ -22,9 +24,14 @@ export function useClassicMaskSNSTheme() {
     const palette = useSubscription(provider)
     const baseTheme = palette === 'dark' ? MaskDarkTheme : MaskLightTheme
 
+    setAutoFreeze(false)
+    const maskTheme = produce(baseTheme, (theme) => {
+        const colorSchema = twitterColorSchema[theme.palette.mode]
+        theme.palette.maskColor = colorSchema.maskColor
+    })
     // TODO: support RTL?
     const [localization, isRTL] = useThemeLanguage(useValueRef(languageSettings))
-    const theme = unstable_createMuiStrictModeTheme(baseTheme, localization)
+    const theme = unstable_createMuiStrictModeTheme(maskTheme, localization)
     return usePostTheme(theme)
 }
 
diff --git a/packages/mask/src/utils/theme/useSwapPageTheme.ts b/packages/mask/src/utils/theme/useSwapPageTheme.ts
index 0b333937e75d..1377a6039aa1 100644
--- a/packages/mask/src/utils/theme/useSwapPageTheme.ts
+++ b/packages/mask/src/utils/theme/useSwapPageTheme.ts
@@ -26,6 +26,7 @@ export function useSwapPageTheme() {
                 Object.assign(theme.palette[color], colorSchema[color])
             }
         })
+        theme.palette.maskColor = colorSchema.maskColor
         theme.palette.divider = colorSchema.divider
         theme.palette.secondaryDivider = colorSchema.secondaryDivider
         theme.components = theme.components || {}
diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
index 5eaaa17c574c..9626dece8fd5 100644
--- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Box, Typography, Theme, useTheme } from '@mui/material'
 import { makeStyles, MaskColorVar, ShadowRootTooltip, useStylesExtends } from '@masknet/theme'
 import type { SxProps } from '@mui/system'
@@ -35,14 +35,6 @@ import { WalletIcon } from '@masknet/shared'
 import { PluginWalletConnectIcon } from '@masknet/icons'
 
 const useStyles = makeStyles()((theme) => ({
-    button: {
-        backgroundColor: theme.palette.maskColor.dark,
-        color: 'white',
-        width: 254,
-        '&,&:hover': {
-            background: theme.palette.maskColor.dark,
-        },
-    },
     action: {
         textAlign: 'center',
         margin: theme.spacing(1),
@@ -67,13 +59,13 @@ export interface EthereumChainBoundaryProps extends withClasses<'switchButton'>
     switchButtonStyle?: SxProps<Theme>
     children?: React.ReactNode
     isValidChainId?: (actualChainId: ChainId, expectedChainId: ChainId) => boolean
+    renderInTimeline?: boolean
     ActionButtonPromiseProps?: Partial<ActionButtonPromiseProps>
 }
 
 export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
     const { t } = useI18N()
     const theme = useTheme()
-
     const pluginID = useCurrentWeb3NetworkPluginID()
     const plugin = useActivatedPlugin(pluginID, 'any')
 
@@ -170,6 +162,26 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
         if (!isChainMatched) await switchToChain()
     }, [account, isAllowed, isChainMatched, isPluginMatched, providerType, expectedChainId])
 
+    // TODO: will remove this and extract new boundary for timeline
+    const buttonProps = useMemo(() => {
+        return {
+            ...(props.renderInTimeline
+                ? {
+                      variant: 'contained',
+                      fullWidth: true,
+                      sx: {
+                          backgroundColor: theme.palette.maskColor.dark,
+                          color: theme.palette.maskColor.white,
+                          '&:hover': {
+                              backgroundColor: theme.palette.maskColor.dark,
+                          },
+                      },
+                  }
+                : {}),
+            ...props.ActionButtonPromiseProps,
+        } as Partial<ActionButtonPromiseProps>
+    }, [props.ActionButtonPromiseProps, props.renderInTimeline])
+
     const renderBox = (children?: React.ReactNode, tips?: string) => {
         return (
             <ShadowRootTooltip title={tips ?? ''} classes={{ tooltip: classes.tooltip }} arrow placement="top">
@@ -190,22 +202,13 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
             <>
                 {!props.hiddenConnectButton ? (
                     <ActionButton
-                        startIcon={<PluginWalletConnectIcon />}
+                        fullWidth
+                        startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
                         variant="contained"
                         size={props.ActionButtonPromiseProps?.size}
-                        sx={{
-                            backgroundColor: theme.palette.maskColor.dark,
-                            width: '100%',
-                            color: 'white',
-                            '&:hover': {
-                                backgroundColor: theme.palette.maskColor.dark,
-                            },
-                            margin: 0,
-                            lineHeight: 0,
-                            paddingTop: 1.25,
-                            paddingBottom: 1.25,
-                        }}
-                        onClick={openSelectProviderDialog}>
+                        sx={{ marginTop: 1.5 }}
+                        onClick={openSelectProviderDialog}
+                        {...buttonProps}>
                         {t('plugin_wallet_connect_wallet')}
                     </ActionButton>
                 ) : null}
@@ -244,21 +247,10 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                             <WalletIcon
                                 networkIcon={networkDescriptor?.icon} // switch the icon to meet design
                                 isBorderColorNotDefault
+                                size={18}
                             />
                         }
-                        sx={
-                            props.switchButtonStyle ?? {
-                                backgroundColor: theme.palette.maskColor.dark,
-                                width: '100%',
-                                color: 'white',
-                                '&:hover': {
-                                    backgroundColor: theme.palette.maskColor.dark,
-                                },
-                                padding: 1,
-                                margin: 0,
-                            }
-                        }
-                        style={{ borderRadius: 10 }}
+                        sx={props.switchButtonStyle}
                         init={
                             <span>
                                 {t('plugin_wallet_connect_network', {
@@ -276,7 +268,8 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                         executor={onSwitchChain}
                         completeOnClick={onSwitchChain}
                         failedOnClick="use executor"
-                        {...props.ActionButtonPromiseProps}
+                        fullWidth
+                        {...buttonProps}
                     />
                 ) : null}
             </>,
@@ -303,19 +296,7 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                             size={18}
                         />
                     }
-                    sx={
-                        props.switchButtonStyle ?? {
-                            backgroundColor: theme.palette.maskColor.dark,
-                            width: '100%',
-                            color: 'white',
-                            '&:hover': {
-                                backgroundColor: theme.palette.maskColor.dark,
-                            },
-                            padding: 1,
-                            margin: 0,
-                        }
-                    }
-                    style={{ borderRadius: 10, paddingTop: 11, paddingBottom: 11 }}
+                    sx={props.switchButtonStyle}
                     init={
                         <span>
                             {t('plugin_wallet_switch_network', { network: expectedNetwork.replace('Mainnet', '') })}
@@ -329,7 +310,8 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
                     executor={onSwitchChain}
                     completeOnClick={onSwitchChain}
                     failedOnClick="use executor"
-                    {...props.ActionButtonPromiseProps}
+                    fullWidth
+                    {...buttonProps}
                 />
             ) : null}
         </>,
diff --git a/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx b/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx
index 1f5a08c3e18d..6788498d2af1 100644
--- a/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx
@@ -10,6 +10,9 @@ import { useWalletRiskWarningDialog } from '../../plugins/Wallet/hooks/useWallet
 
 const useStyles = makeStyles()((theme) => ({
     button: {
+        marginTop: theme.spacing(1.5),
+    },
+    timeline: {
         backgroundColor: theme.palette.maskColor.dark,
         color: 'white',
         fontSize: 14,
@@ -18,11 +21,6 @@ const useStyles = makeStyles()((theme) => ({
         '&:hover': {
             backgroundColor: theme.palette.maskColor.dark,
         },
-        margin: 0,
-    },
-    grid: {
-        justifyContent: 'center',
-        padding: 8,
     },
 }))
 
@@ -33,10 +31,11 @@ export interface EthereumWalletConnectedBoundaryProps
     hideRiskWarningConfirmed?: boolean
     ActionButtonProps?: ActionButtonProps
     startIcon?: React.ReactNode
+    renderInTimeline?: boolean
 }
 
 export function EthereumWalletConnectedBoundary(props: EthereumWalletConnectedBoundaryProps) {
-    const { children = null, offChain = false, hideRiskWarningConfirmed = false } = props
+    const { children = null, offChain = false, hideRiskWarningConfirmed = false, renderInTimeline = false } = props
 
     const { t } = useI18N()
     const classes = useStylesExtends(useStyles(), props)
@@ -55,11 +54,15 @@ export function EthereumWalletConnectedBoundary(props: EthereumWalletConnectedBo
     )
     // #endregion
 
+    // TODO: will remove  this and extract new boundary for timeline
+    const buttonClass = classNames(
+        classNames(classes.button, classes.connectWallet, renderInTimeline ? classes.timeline : null),
+    )
     if (!account)
         return (
             <ActionButton
                 startIcon={props.startIcon}
-                className={classNames(classes.button, classes.connectWallet)}
+                className={buttonClass}
                 fullWidth
                 variant="contained"
                 onClick={openSelectProviderDialog}
@@ -71,7 +74,7 @@ export function EthereumWalletConnectedBoundary(props: EthereumWalletConnectedBo
     if (!isRiskWarningConfirmed && !hideRiskWarningConfirmed)
         return (
             <ActionButton
-                className={classNames(classes.button, classes.connectWallet)}
+                className={buttonClass}
                 fullWidth
                 variant="contained"
                 onClick={openRiskWarningDialog}
@@ -83,7 +86,7 @@ export function EthereumWalletConnectedBoundary(props: EthereumWalletConnectedBo
     if (isZero(nativeTokenBalance.value ?? '0') && !offChain)
         return (
             <ActionButton
-                className={classNames(classes.button, classes.gasFeeButton)}
+                className={buttonClass}
                 disabled={!nativeTokenBalance.error}
                 fullWidth
                 variant="contained"
@@ -95,12 +98,7 @@ export function EthereumWalletConnectedBoundary(props: EthereumWalletConnectedBo
 
     if (!chainIdValid && !offChain)
         return (
-            <ActionButton
-                className={classNames(classes.button, classes.invalidButton)}
-                disabled
-                fullWidth
-                variant="contained"
-                {...props.ActionButtonProps}>
+            <ActionButton className={buttonClass} disabled fullWidth variant="contained" {...props.ActionButtonProps}>
                 {t('plugin_wallet_invalid_network')}
             </ActionButton>
         )
diff --git a/packages/plugin-infra/src/hooks/useAvailablePlugins.ts b/packages/plugin-infra/src/hooks/useAvailablePlugins.ts
index 46f3776e6c81..eb2db2196c27 100644
--- a/packages/plugin-infra/src/hooks/useAvailablePlugins.ts
+++ b/packages/plugin-infra/src/hooks/useAvailablePlugins.ts
@@ -1,21 +1,7 @@
-import { useMemo } from 'react'
 import type { Plugin } from '../types'
-import { useChainId, useCurrentWeb3NetworkPluginID } from '../web3'
-import type { NetworkPluginID } from '../web3-types'
 
 type HasRequirement = { enableRequirement: Plugin.Shared.Definition['enableRequirement'] }
 
-function checkPluginAvailable(plugin: HasRequirement, pluginId: NetworkPluginID, chainId: number) {
-    const supportedChainIds = plugin.enableRequirement.web3?.[pluginId]?.supportedChainIds
-    if (!supportedChainIds) return true
-    return supportedChainIds.includes(chainId)
-}
-
 export function useAvailablePlugins<T extends HasRequirement>(plugins: T[]) {
-    const networkPluginId = useCurrentWeb3NetworkPluginID()
-    const chainId = useChainId(networkPluginId)
-    return useMemo(
-        () => plugins.filter((plugin) => checkPluginAvailable(plugin, networkPluginId, chainId)),
-        [plugins, networkPluginId, chainId],
-    )
+    return plugins
 }
diff --git a/packages/plugins/CrossChainBridge/src/base.ts b/packages/plugins/CrossChainBridge/src/base.ts
index 7625b7388e5b..2c83e4ed8e50 100644
--- a/packages/plugins/CrossChainBridge/src/base.ts
+++ b/packages/plugins/CrossChainBridge/src/base.ts
@@ -10,8 +10,7 @@ export const base: Plugin.Shared.Definition = {
     enableRequirement: {
         architecture: { app: false, web: true },
         networks: { type: 'opt-out', networks: {} },
-        target: 'beta',
+        target: 'stable',
     },
-    experimentalMark: true,
     i18n: languages,
 }
diff --git a/packages/plugins/CyberConnect/src/base.tsx b/packages/plugins/CyberConnect/src/base.tsx
index 83a0be124b1d..1d133b171379 100644
--- a/packages/plugins/CyberConnect/src/base.tsx
+++ b/packages/plugins/CyberConnect/src/base.tsx
@@ -1,4 +1,6 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { CYBERCONNECT_PLUGIN_ID } from './constants'
 
 export const base: Plugin.Shared.Definition = {
@@ -12,6 +14,17 @@ export const base: Plugin.Shared.Definition = {
         architecture: { app: false, web: true },
         networks: { type: 'opt-out', networks: {} },
         target: 'stable',
+        web3: {
+            [NetworkPluginID.PLUGIN_EVM]: {
+                supportedChainIds: [ChainId.Mainnet, ChainId.BSC, ChainId.Matic, ChainId.Arbitrum, ChainId.xDai],
+            },
+            [NetworkPluginID.PLUGIN_SOLANA]: {
+                supportedChainIds: [],
+            },
+            [NetworkPluginID.PLUGIN_FLOW]: {
+                supportedChainIds: [],
+            },
+        },
     },
     contribution: { postContent: new Set([/https:\/\/app.cyberconnect.me/]) },
 }
diff --git a/packages/plugins/FileService/src/locales/en-US.json b/packages/plugins/FileService/src/locales/en-US.json
index bc4b3c489cf5..c692f4d4435b 100644
--- a/packages/plugins/FileService/src/locales/en-US.json
+++ b/packages/plugins/FileService/src/locales/en-US.json
@@ -1,5 +1,5 @@
 {
-    "__display_name": "Plugin: File Service",
+    "__display_name": "File Service",
     "__description": "Upload and share files on top of Arweave network. Store data, permanently.",
     "__composition_entry": "📃 File Service",
     "on_insert": "Use the file",
diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/CheckSecurityDialog.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/CheckSecurityDialog.tsx
index 799f7107b49a..24175208b17d 100644
--- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/CheckSecurityDialog.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/CheckSecurityDialog.tsx
@@ -1,5 +1,5 @@
 import { Box, DialogContent, Stack } from '@mui/material'
-import { makeStyles, MaskDialog, useStylesExtends } from '@masknet/theme'
+import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { useI18N } from '../locales'
 import { SearchBox } from './components/SearchBox'
 import { useAsyncFn } from 'react-use'
@@ -11,6 +11,7 @@ import { Center, TokenSecurity } from './components/Common'
 import { DefaultPlaceholder } from './components/DefaultPlaceholder'
 import { NotFound } from './components/NotFound'
 import type { ChainId } from '@masknet/web3-shared-evm'
+import { InjectedDialog } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -26,7 +27,6 @@ const useStyles = makeStyles()((theme) => ({
         },
     },
     content: {
-        width: 552,
         height: 510,
         maxHeight: 510,
         paddingBottom: theme.spacing(3),
@@ -52,11 +52,7 @@ export function CheckSecurityDialog(props: BuyTokenDialogProps) {
     }, [])
 
     return (
-        <MaskDialog
-            DialogProps={{ classes: { paper: classes.paperRoot } }}
-            title={t.__plugin_name()}
-            open={open}
-            onBack={onClose}>
+        <InjectedDialog classes={{ paper: classes.paperRoot }} title={t.__plugin_name()} open={open} onClose={onClose}>
             <DialogContent className={classes.content}>
                 <Stack height="100%" spacing={2}>
                     <Box>
@@ -81,6 +77,6 @@ export function CheckSecurityDialog(props: BuyTokenDialogProps) {
                     </Box>
                 </Stack>
             </DialogContent>
-        </MaskDialog>
+        </InjectedDialog>
     )
 }
diff --git a/packages/shared-base/src/serializer/index.ts b/packages/shared-base/src/serializer/index.ts
index ce0800de0d53..291c57d4c345 100644
--- a/packages/shared-base/src/serializer/index.ts
+++ b/packages/shared-base/src/serializer/index.ts
@@ -12,7 +12,8 @@ const pendingRegister = new Set<() => void>()
 let typeson: Typeson | undefined
 function setup() {
     const { default: BigNumber } = BN
-    typeson = new Typeson({})
+    // https://github.com/dfahlander/typeson-registry/issues/27
+    typeson = new Typeson({ cyclic: false })
     typeson.register(builtin)
     typeson.register(specialNumbers)
     typeson.register([blob, file, filelist, imagebitmap])
diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx
index ed4b076351a1..daf41f78b39d 100644
--- a/packages/shared/src/UI/components/AssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -202,7 +202,7 @@ export const AssetPlayer = memo<AssetPlayerProps>((props) => {
                       ))
                     : props.loadingIcon ?? <AssetLoadingIcon className={classes.loadingIcon} />}
             </Box>
-            {IframeResizerMemo}
+            {AssetPlayerState.LOADING !== playerState && IframeResizerMemo}
         </>
     )
 })
diff --git a/packages/shared/src/UI/components/ERC20TokenList/index.tsx b/packages/shared/src/UI/components/ERC20TokenList/index.tsx
index 6d216633cbc4..1e68efe335c7 100644
--- a/packages/shared/src/UI/components/ERC20TokenList/index.tsx
+++ b/packages/shared/src/UI/components/ERC20TokenList/index.tsx
@@ -115,7 +115,7 @@ export const ERC20TokenList = memo<ERC20TokenListProps>((props) => {
         assetsLoading,
         assets
             .map((x) => x.token.address)
-            .sort((a, b) => a.localeCompare('en-US', b))
+            .sort((a, b) => a.localeCompare(b, 'en-US'))
             .join(),
     ])
 
diff --git a/packages/web3-providers/src/NFTScan/index.ts b/packages/web3-providers/src/NFTScan/index.ts
index e1dc4b639600..f91c0f8c84a0 100644
--- a/packages/web3-providers/src/NFTScan/index.ts
+++ b/packages/web3-providers/src/NFTScan/index.ts
@@ -69,6 +69,9 @@ function createERC721TokenAsset(asset: NFTScanAsset) {
             mediaUrl: resolveIPFSLinkFromURL(
                 JSON.parse(asset.nft_json ?? '{}').image ?? asset.nft_content_uri ?? payload.image ?? '',
             ),
+            imageURL: resolveIPFSLinkFromURL(
+                JSON.parse(asset.nft_json ?? '{}').image ?? asset.nft_content_uri ?? payload.image ?? '',
+            ),
             owner: asset.nft_holder ?? '',
         },
         asset.token_id,
diff --git a/packages/web3-providers/src/NextID/proof.ts b/packages/web3-providers/src/NextID/proof.ts
index 7e3e156d09ef..af86f21422b3 100644
--- a/packages/web3-providers/src/NextID/proof.ts
+++ b/packages/web3-providers/src/NextID/proof.ts
@@ -38,7 +38,7 @@ const getPersonaQueryURL = (platform: string, identity: string) =>
         identity,
     })
 
-const geyExistedBindingQueryURL = (platform: string, identity: string, personaPublicKey: string) =>
+const getExistedBindingQueryURL = (platform: string, identity: string, personaPublicKey: string) =>
     urlcat(BASE_URL, '/v1/proof/exists', {
         platform,
         identity,
@@ -81,7 +81,7 @@ export class NextIDProofAPI implements NextIDBaseAPI.Proof {
 
         // Should delete cache when proof status changed
         const cacheKeyOfQueryPersona = getPersonaQueryURL(NextIDPlatform.NextID, personaPublicKey)
-        const cacheKeyOfExistedBinding = geyExistedBindingQueryURL(platform, identity, personaPublicKey)
+        const cacheKeyOfExistedBinding = getExistedBindingQueryURL(platform, identity, personaPublicKey)
         deleteCache(cacheKeyOfQueryPersona)
         deleteCache(cacheKeyOfExistedBinding)
 
@@ -107,7 +107,7 @@ export class NextIDProofAPI implements NextIDBaseAPI.Proof {
     async queryIsBound(personaPublicKey: string, platform: NextIDPlatform, identity: string, enableCache?: boolean) {
         if (!platform && !identity) return false
 
-        const url = geyExistedBindingQueryURL(platform, identity, personaPublicKey)
+        const url = getExistedBindingQueryURL(platform, identity, personaPublicKey)
         const result = await fetchJSON<BindingProof>(url, {}, enableCache)
 
         return result.map(() => true).unwrapOr(false)
diff --git a/packages/web3-providers/src/coingecko/index.ts b/packages/web3-providers/src/coingecko/index.ts
index 129adb1c75c1..54a8d1d73e43 100644
--- a/packages/web3-providers/src/coingecko/index.ts
+++ b/packages/web3-providers/src/coingecko/index.ts
@@ -1,16 +1,20 @@
 import type { CurrencyType } from '@masknet/plugin-infra/web3'
 import { COINGECKO_URL_BASE } from './constants'
-import type { PriceAPI } from '..'
+import { courier } from '../helpers'
+import type { PriceAPI } from '../types'
 
 export class CoinGeckoAPI implements PriceAPI.Provider {
     async getTokenPrice(tokenId: string, currency: CurrencyType) {
         const requestPath = `${COINGECKO_URL_BASE}/simple/price?ids=${tokenId}&vs_currencies=${currency}`
-        const price = await fetch(requestPath).then((r) => r.json() as Promise<PriceAPI.CryptoPrice>)
+        const response = await fetch(courier(requestPath))
+        const price: PriceAPI.CryptoPrice = await response.json()
         return price[tokenId]
     }
 
     async getTokensPrice(tokenIds: string[], currency: CurrencyType) {
         const requestPath = `${COINGECKO_URL_BASE}/simple/price?ids=${tokenIds}&vs_currencies=${currency}`
-        return fetch(requestPath).then((r) => r.json() as Promise<PriceAPI.CryptoPrice>)
+        const response = await fetch(courier(requestPath))
+        const price: PriceAPI.CryptoPrice = await response.json()
+        return price
     }
 }
diff --git a/packages/web3-providers/src/index.ts b/packages/web3-providers/src/index.ts
index 319cb457e9eb..df0c0bd21ea1 100644
--- a/packages/web3-providers/src/index.ts
+++ b/packages/web3-providers/src/index.ts
@@ -13,6 +13,7 @@ import { InstagramAPI } from './instagram'
 import { GoPlusLabsAPI } from './gopluslabs'
 import { NextIDProofAPI, NextIDStorageAPI } from './NextID'
 
+export * from './helpers'
 export * from './types'
 export * from './hooks'
 export * from './opensea/utils'
diff --git a/packages/web3-providers/src/token-price/index.ts b/packages/web3-providers/src/token-price/index.ts
index f8bb408a46a5..ef955bffc462 100644
--- a/packages/web3-providers/src/token-price/index.ts
+++ b/packages/web3-providers/src/token-price/index.ts
@@ -1,4 +1,5 @@
 import type { CurrencyType } from '@masknet/plugin-infra/web3'
+import { courier } from '../helpers'
 import type { TokenPriceBaseAPI } from '../types'
 
 const URL_BASE = 'https://api.coingecko.com/api/v3'
@@ -7,12 +8,14 @@ export class TokenPriceAPI implements TokenPriceBaseAPI.Provider {
     async getTokenPrices(platform: string, contractAddresses: string[], currency: CurrencyType) {
         const addressList = contractAddresses.join(',')
         const requestPath = `${URL_BASE}/simple/token_price/${platform}?contract_addresses=${addressList}&vs_currencies=${currency}`
-        const prices = await fetch(requestPath).then((r) => r.json() as Promise<TokenPriceBaseAPI.CryptoPrice>)
+        const response = await fetch(courier(requestPath))
+        const prices: TokenPriceBaseAPI.CryptoPrice = await response.json()
         return prices
     }
     async getNativeTokenPrice(tokenIds: string[], currency: CurrencyType) {
         const requestPath = `${URL_BASE}/simple/price?ids=${tokenIds.join(',')}&vs_currencies=${currency}`
-        const prices = await fetch(requestPath).then((r) => r.json() as Promise<TokenPriceBaseAPI.CryptoPrice>)
+        const response = await fetch(courier(requestPath))
+        const prices: TokenPriceBaseAPI.CryptoPrice = await response.json()
         return prices
     }
 }
diff --git a/packages/web3-shared/evm/assets/chains.json b/packages/web3-shared/evm/assets/chains.json
index e870a59de6fc..4c8a00736ca8 100644
--- a/packages/web3-shared/evm/assets/chains.json
+++ b/packages/web3-shared/evm/assets/chains.json
@@ -814,7 +814,7 @@
     },
     {
         "name": "OKExChain Mainnet",
-        "chain": "okexchain",
+        "chain": "OKEx",
         "network": "mainnet",
         "features": [],
         "nativeCurrency": {
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts b/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
index c6f3234250a8..c14018b38fc1 100644
--- a/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
+++ b/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
@@ -8,21 +8,19 @@ import type { ERC20Bytes32 } from '@masknet/web3-contracts/types/ERC20Bytes32'
 import { useERC20TokenContract, useERC20TokenContracts } from '../contracts/useERC20TokenContract'
 import { useERC20TokenBytes32Contract, useERC20TokenBytes32Contracts } from '../contracts/useERC20TokenBytes32Contract'
 import { parseStringOrBytes32, createERC20Token, createNativeToken } from '../utils'
-import { useEthereumTokenType } from './useEthereumTokenType'
 
 export function useERC20TokenDetailed(address?: string, token?: Partial<ERC20TokenDetailed>, targetChainId?: ChainId) {
     const currentChainId = useChainId()
     const chainId = targetChainId ?? currentChainId
     const erc20TokenContract = useERC20TokenContract(address, chainId)
     const erc20TokenBytes32Contract = useERC20TokenBytes32Contract(address, chainId)
-    const tokenType = useEthereumTokenType(address)
 
     return useAsyncRetry(async () => {
         if (!address) return
         if (!EthereumAddress.isValid(address)) return
-        if (tokenType !== EthereumTokenType.ERC20) return
+
         return getERC20TokenDetailed(address, chainId, erc20TokenContract, erc20TokenBytes32Contract, token)
-    }, [chainId, token, erc20TokenContract, erc20TokenBytes32Contract, address, tokenType])
+    }, [chainId, token, erc20TokenContract, erc20TokenBytes32Contract, address])
 }
 
 export function useFungibleTokensDetailed(listOfToken: Pick<FungibleToken, 'address' | 'type'>[], _chainId?: ChainId) {
diff --git a/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts b/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts
index 93e933e1c887..81a63449bb6c 100644
--- a/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts
+++ b/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts
@@ -21,7 +21,7 @@ export function useERC20TokensDetailedFromTokenLists(
     const { fetchERC20TokensFromTokenLists } = useWeb3Context()
     const { value: tokensFromList = EMPTY_LIST, ...asyncResult } = useAsyncRetry(
         async () => (!lists || lists.length === 0 ? [] : fetchERC20TokensFromTokenLists(lists, chainId)),
-        [chainId, lists?.sort((a, b) => a.localeCompare('en-US', b)).join()],
+        [chainId, lists?.sort((a, b) => a.localeCompare(b, 'en-US')).join()],
     )
     // #endregion
     // #region fuse