feat: add <ConcealableTabs />

packages/icons/general/LeftArrow.tsx

@@ -0,0 +1,14 @@
+import { createIcon } from '../utils'
+
+export const LeftArrowIcon = createIcon(
+    'LeftArrowIcon',
+    <g>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16.5655 4.93744C16.8779 5.24986 16.8779 5.75639 16.5655 6.06881L10.1312 12.5031L16.5655 18.9374C16.8779 19.2499 16.8779 19.7564 16.5655 20.0688C16.2531 20.3812 15.7465 20.3812 15.4341 20.0688L8.43412 13.0688C8.1217 12.7564 8.1217 12.2499 8.43412 11.9374L15.4341 4.93744C15.7465 4.62502 16.2531 4.62502 16.5655 4.93744Z"
+            fill="currentColor"
+        />
+    </g>,
+    '0 0 25 25',
+)

packages/icons/general/RightArrow.tsx

@@ -0,0 +1,14 @@
+import { createIcon } from '../utils'
+
+export const RightArrowIcon = createIcon(
+    'RightArrowIcon',
+    <g>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.93451 20.0626C8.62209 19.7501 8.62209 19.2436 8.93451 18.9312L15.3688 12.4969L8.93451 6.06256C8.62209 5.75014 8.62209 5.24361 8.93451 4.93119C9.24693 4.61877 9.75346 4.61877 10.0659 4.93119L17.0659 11.9312C17.3783 12.2436 17.3783 12.7501 17.0659 13.0626L10.0659 20.0626C9.75346 20.375 9.24693 20.375 8.93451 20.0626Z"
+            fill="currentColor"
+        />
+    </g>,
+    '0 0 25 25',
+)

packages/icons/general/index.ts

@@ -36,6 +36,8 @@ export * from './Copy'
 export * from './ArrowBack'
 export * from './Setting'
 export * from './ArrowRight'
+export * from './LeftArrow'
+export * from './RightArrow'
 export * from './Trash'
 export * from './BackUp'
 export * from './Warning'

packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx

@@ -1,25 +1,25 @@
 import {
     createInjectHooksRenderer,
-    Plugin,
     PluginId,
     useActivatedPluginsSNSAdaptor,
+    usePluginI18NField,
 } from '@masknet/plugin-infra/content-script'
 import { useAvailablePlugins } from '@masknet/plugin-infra/web3'
+import { ConcealableTabs } from '@masknet/shared'
 import { EMPTY_LIST, NextIDPlatform } from '@masknet/shared-base'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { useAddressNames } from '@masknet/web3-shared-evm'
-import { Box, CircularProgress } from '@mui/material'
+import { Box, CircularProgress, Typography } from '@mui/material'
 import { first } from 'lodash-unified'
 import { useEffect, useMemo, useState } from 'react'
 import { useUpdateEffect } from 'react-use'
 import { activatedSocialNetworkUI } from '../../social-network'
 import { isTwitter } from '../../social-network-adaptor/twitter.com/base'
-import { MaskMessages } from '../../utils'
+import { MaskMessages, useI18N } from '../../utils'
 import { useLocationChange } from '../../utils/hooks/useLocationChange'
 import { useCurrentVisitingIdentity, useLastRecognizedIdentity } from '../DataSource/useActivatedUI'
 import { useNextIDBoundByPlatform } from '../DataSource/useNextID'
 import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus'
-import { PageTab } from '../InjectedComponents/PageTab'
 
 function getTabContent(tabId: string) {
     return createInjectHooksRenderer(useActivatedPluginsSNSAdaptor.visibility.useAnyMode, (x) => {
@@ -31,13 +31,9 @@ function getTabContent(tabId: string) {
 
 const useStyles = makeStyles()((theme) => ({
     root: {},
-    tags: {
-        padding: theme.spacing(2),
-    },
-    metadata: {},
     content: {
         position: 'relative',
-        padding: theme.spacing(1),
+        padding: theme.spacing(2, 1),
     },
 }))
 
@@ -46,8 +42,9 @@ export interface ProfileTabContentProps extends withClasses<'text' | 'button' |
 export function ProfileTabContent(props: ProfileTabContentProps) {
     const classes = useStylesExtends(useStyles(), props)
 
+    const { t } = useI18N()
     const [hidden, setHidden] = useState(true)
-    const [selectedTab, setSelectedTab] = useState<Plugin.SNSAdaptor.ProfileTab | undefined>()
+    const [selectedTab, setSelectedTab] = useState<string | undefined>()
 
     const currentIdentity = useLastRecognizedIdentity()
     const identity = useCurrentVisitingIdentity()
@@ -63,31 +60,42 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
         currentIdentity.identifier.userId === identity.identifier.userId &&
         personaList.findIndex((persona) => persona?.persona === currentConnectedPersona?.publicHexKey) === -1
 
+    const translate = usePluginI18NField()
     const activatedPlugins = useActivatedPluginsSNSAdaptor('any')
-    const tabs = useAvailablePlugins(activatedPlugins)
-        .flatMap((x) => x.ProfileTabs?.map((y) => ({ ...y, pluginID: x.ID })) ?? [])
-        .filter((z) => z.Utils?.shouldDisplay?.(identity, addressNames) ?? true)
-        .sort((a, z) => {
-            // order those tabs from next id first
-            if (a.pluginID === PluginId.NextID) return -1
-            if (z.pluginID === PluginId.NextID) return 1
-
-            // order those tabs from collectible first
-            if (a.pluginID === PluginId.Collectible) return -1
-            if (z.pluginID === PluginId.Collectible) return 1
-
-            // place those tabs from debugger last
-            if (a.pluginID === PluginId.Debugger) return 1
-            if (z.pluginID === PluginId.Debugger) return -1
-
-            // place those tabs from dao before the last
-            if (a.pluginID === PluginId.DAO) return 1
-            if (z.pluginID === PluginId.DAO) return -1
-
-            return a.priority - z.priority
-        })
-
-    const selectedTabComputed = selectedTab ?? first(tabs)
+    const availablePlugins = useAvailablePlugins(activatedPlugins)
+    const displayPlugins = useMemo(() => {
+        return availablePlugins
+            .flatMap((x) => x.ProfileTabs?.map((y) => ({ ...y, pluginID: x.ID })) ?? [])
+            .filter((z) => z.Utils?.shouldDisplay?.(identity, addressNames) ?? true)
+    }, [availablePlugins, identity, addressNames])
+    const tabs = useMemo(() => {
+        return displayPlugins
+            .sort((a, z) => {
+                // order those tabs from next id first
+                if (a.pluginID === PluginId.NextID) return -1
+                if (z.pluginID === PluginId.NextID) return 1
+
+                // order those tabs from collectible first
+                if (a.pluginID === PluginId.Collectible) return -1
+                if (z.pluginID === PluginId.Collectible) return 1
+
+                // place those tabs from debugger last
+                if (a.pluginID === PluginId.Debugger) return 1
+                if (z.pluginID === PluginId.Debugger) return -1
+
+                // place those tabs from dao before the last
+                if (a.pluginID === PluginId.DAO) return 1
+                if (z.pluginID === PluginId.DAO) return -1
+
+                return a.priority - z.priority
+            })
+            .map((x) => ({
+                id: x.ID,
+                label: typeof x.label === 'string' ? x.label : translate(x.pluginID, x.label),
+            }))
+    }, [displayPlugins, translate])
+
+    const selectedTabId = selectedTab ?? first(tabs)?.id
 
     useLocationChange(() => {
         setSelectedTab(undefined)
@@ -110,12 +118,12 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
     }, [identity])
 
     const ContentComponent = useMemo(() => {
-        const tab =
+        const tabId =
             isTwitter(activatedSocialNetworkUI) && currentAccountNotConnectPersona
-                ? tabs?.find((tab) => tab?.pluginID === PluginId.NextID)?.ID
-                : selectedTabComputed?.ID
-        return getTabContent(tab ?? '')
-    }, [selectedTabComputed?.ID, identity.identifier.userId])
+                ? displayPlugins?.find((tab) => tab?.pluginID === PluginId.NextID)?.ID
+                : selectedTabId
+        return getTabContent(tabId ?? '')
+    }, [selectedTabId, identity.identifier.userId, tabs])
 
     if (hidden) return null
 
@@ -134,8 +142,14 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
 
     return (
         <div className={classes.root}>
-            <div className={classes.tags}>
-                <PageTab tabs={tabs} selectedTab={selectedTabComputed} onChange={setSelectedTab} />
+            <div>
+                {tabs.length ? (
+                    <ConcealableTabs<string> tabs={tabs} selectedId={selectedTabId} onChange={setSelectedTab} />
+                ) : (
+                    <Typography variant="body2" color="textPrimary" align="center" sx={{ paddingTop: 8 }}>
+                        {t('web3_tab_hint')}
+                    </Typography>
+                )}
             </div>
             <div className={classes.content}>
                 <ContentComponent

packages/mask/src/plugins/NextID/components/BindingItem.tsx

@@ -73,13 +73,7 @@ export const BindingItem = memo<Item>(({ platform, identity, tipable, deletable,
 
     if (platform === NextIDPlatform.Ethereum) {
         return (
-            <Stack
-                direction="row"
-                justifyContent="space-between"
-                alignItems="center"
-                mx={1}
-                mb={4}
-                className={classes.item}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center" className={classes.item}>
                 <Stack direction="row" alignItems="center" gap="12px">
                     <ImageIcon size={18} icon={networkDescriptor?.icon} />
                     <Typography className={classes.address}>{formatEthereumAddress(identity, 4)}</Typography>