refactor: dao tab title (#10873)

DimensionDev · Sep 27, 2023 · e8c67fb · e8c67fb
1 parent b153432
commit e8c67fb
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 25 deletions.
diff --git a/packages/plugins/NextID/src/components/NextIdPage.tsx b/packages/plugins/NextID/src/components/NextIdPage.tsx
@@ -57,7 +57,7 @@ export const NextIdPage = memo(function NextIdPage() {
         })
     }, [openPopupWindow])
 
-    const getActionComponent = useMemo(() => {
+    const ActionComponent = useMemo(() => {
         if (!isOwn) return <OtherLackWalletAction />
 
         if (!personaConnectStatus.hasPersona || !personaConnectStatus.connected || !personaConnectStatus.verified) {
@@ -84,7 +84,7 @@ export const NextIdPage = memo(function NextIdPage() {
         <>
             <PluginCardFrameMini>
                 <ThemeProvider theme={MaskLightTheme}>
-                    <PluginEnableBoundary pluginID={PluginID.Web3Profile}>{getActionComponent}</PluginEnableBoundary>
+                    <PluginEnableBoundary pluginID={PluginID.Web3Profile}>{ActionComponent}</PluginEnableBoundary>
                 </ThemeProvider>
             </PluginCardFrameMini>
             {openBindDialog && currentPersona && isOwn ? (

diff --git a/packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx b/packages/plugins/Snapshot/src/SiteAdaptor/ProfileView.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useState, useTransition } from 'react'
 import { LoadingBase, MaskDarkTheme, MaskLightTheme, MaskTabList, makeStyles, useTabs } from '@masknet/theme'
 import { CardContent, Stack, Tab, ThemeProvider, Typography, useTheme } from '@mui/material'
-import { PluginEnableBoundary } from '@masknet/shared'
+import { PluginCardFrameMini, PluginEnableBoundary } from '@masknet/shared'
 import type { DAOResult } from '@masknet/web3-shared-base'
 import type { ChainId } from '@masknet/web3-shared-evm'
 import { TabContext } from '@mui/lab'
@@ -34,6 +34,10 @@ const useStyles = makeStyles()((theme) => ({
         marginTop: '10px !important',
         flexGrow: 0,
     },
+    iconSnapshot: {
+        marginRight: 6,
+        marginTop: 2,
+    },
 }))
 
 export interface ProfileViewProps extends withClasses<'content' | 'footer'> {
@@ -76,15 +80,15 @@ export function ProfileView(props: ProfileViewProps) {
 
     if (isMinimalMode) {
         return (
-            <ProfileCard {...ProfileCardProps}>
-                <Stack className={classes.root}>
-                    <ThemeProvider theme={MaskLightTheme}>
-                        <PluginEnableBoundary pluginID={PluginID.Snapshot}>
-                            <PluginDescriptor />
-                        </PluginEnableBoundary>
-                    </ThemeProvider>
-                </Stack>
-            </ProfileCard>
+            <PluginCardFrameMini
+                title={t.plugin_snapshot_info_snapshot()}
+                icon={<Icons.Snapshot className={classes.iconSnapshot} />}>
+                <ThemeProvider theme={MaskLightTheme}>
+                    <PluginEnableBoundary pluginID={PluginID.Snapshot}>
+                        <PluginDescriptor />
+                    </PluginEnableBoundary>
+                </ThemeProvider>
+            </PluginCardFrameMini>
         )
     }
 

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/TrendingView.tsx
@@ -244,7 +244,7 @@ export function TrendingView(props: TrendingViewProps) {
         setTab(tabs[0])
     }, [result, tabs[0]])
 
-    const tabComponents = useMemo(() => {
+    const TabComponents = useMemo(() => {
         const configs = [
             {
                 key: ContentTab.Market,
@@ -322,7 +322,8 @@ export function TrendingView(props: TrendingViewProps) {
     // #endregion
 
     const { coin, tickers } = trending
-    const component = (
+
+    const Component = (
         <TrendingViewDeck
             classes={{
                 body: classes.body,
@@ -366,7 +367,7 @@ export function TrendingView(props: TrendingViewProps) {
                             }
                         }}
                         aria-label="Network Tabs">
-                        {tabComponents}
+                        {TabComponents}
                     </MaskTabList>
                 </Stack>
             </TabContext>
@@ -474,11 +475,11 @@ export function TrendingView(props: TrendingViewProps) {
         return (
             <PluginCardFrameMini>
                 <ThemeProvider theme={MaskLightTheme}>
-                    <PluginEnableBoundary pluginID={PluginID.Web3Profile}>{component}</PluginEnableBoundary>
+                    <PluginEnableBoundary pluginID={PluginID.Web3Profile}>{Component}</PluginEnableBoundary>
                 </ThemeProvider>
             </PluginCardFrameMini>
         )
     }
 
-    return component
+    return Component
 }
diff --git a/packages/shared/src/UI/components/PluginCardFrame/index.tsx b/packages/shared/src/UI/components/PluginCardFrame/index.tsx
@@ -1,7 +1,7 @@
+import { useMemo } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { Link, Stack, Typography } from '@mui/material'
 import { Icons } from '@masknet/icons'
-import { useMemo } from 'react'
 import { useSharedI18N } from '../../../locales/index.js'
 import { LoadingStatus } from '../index.js'
 
@@ -38,31 +38,32 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface PluginCardFrameMiniProps {
-    name?: React.ReactNode
+    icon?: React.ReactNode
+    title?: React.ReactNode
     provider?: React.ReactNode
     providerLink?: string
     children?: React.ReactNode
 }
 
-export function PluginCardFrameMini({ name, provider, providerLink, children }: PluginCardFrameMiniProps) {
+export function PluginCardFrameMini({ icon, title, provider, providerLink, children }: PluginCardFrameMiniProps) {
     const t = useSharedI18N()
     const { classes } = useStyles()
 
-    const defaultPluginName = useMemo(() => {
+    const PluginName = useMemo(() => {
         return (
             <Stack className={classes.title} direction="row">
-                <Icons.Web3Profile className={classes.web3Icon} />
+                {icon ?? <Icons.Web3Profile className={classes.web3Icon} />}
                 <Typography fontSize={16} fontWeight={700}>
-                    {t.plugin_card_frame_default_title()}
+                    {title ?? t.plugin_card_frame_default_title()}
                 </Typography>
             </Stack>
         )
-    }, [])
+    }, [icon, title])
 
     return (
         <Stack className={classes.container}>
             <Stack direction="row" justifyContent="space-between" p={1.5}>
-                {name ?? defaultPluginName}
+                {PluginName}
                 <Stack direction="row" gap={0.5}>
                     <Typography className={classes.item1}>{t.plugin_card_frame_default_provided_by()}</Typography>
                     <Typography className={classes.item2}>