chore: remove avatar and recommend feature (#12256)

* chore: remove avatar and recommend feature

* fixup! chore: remove avatar and recommend feature

Author: swkatmask

packages/mask/shared/plugin-infra/register.js

@@ -14,7 +14,6 @@ import '@masknet/plugin-scam-warning/register'
 import '@masknet/plugin-collectible/register'
 import '@masknet/plugin-transak/register'
 import '@masknet/plugin-vcent/register'
-import '@masknet/plugin-avatar/register'
 import '@masknet/plugin-claim/register'
 import '@masknet/plugin-tips/register'
 import '@masknet/plugin-nextid/register'

packages/plugins/RedPacket/src/SiteAdaptor/index.tsx

@@ -128,20 +128,12 @@ const site: Plugin.SiteAdaptor.Definition = {
         (() => {
             const icon = <PluginIcon size={36} />
             const name = <Trans>Lucky Drop</Trans>
-            const recommendFeature = {
-                description: (
-                    <Trans>Send a surprise crypto giveaway. Tokens and NFTs on multiple chains are supported.</Trans>
-                ),
-                backgroundGradient: 'linear-gradient(180.54deg, #FF9A9E 0.71%, #FECFEF 98.79%, #FECFEF 99.78%)',
-                isFirst: true,
-            }
             return {
                 ApplicationEntryID: base.ID,
                 RenderEntryComponent(EntryComponentProps) {
                     return (
                         <ApplicationEntry
                             title={name}
-                            recommendFeature={recommendFeature}
                             {...EntryComponentProps}
                             icon={icon}
                             onClick={() => {
@@ -160,7 +152,6 @@ const site: Plugin.SiteAdaptor.Definition = {
                 name,
                 tutorialLink: 'https://mask.notion.site/Send-a-Lucky-Drop-a4c7d33e87d54f1e9f537838308e3a6b',
                 category: 'dapp',
-                recommendFeature,
             }
         })(),
     ],

packages/plugins/RedPacket/src/locale/en-US.po

@@ -1,46 +1,43 @@
-import { createContext, useContext, useMemo, useState, type PropsWithChildren } from 'react'
-import { useTimeout } from 'react-use'
-import { Typography } from '@mui/material'
+import { Trans } from '@lingui/react/macro'
 import { useActivatedPluginsSiteAdaptor, type IdentityResolved } from '@masknet/plugin-infra/content-script'
 import {
-    useCurrentPersonaConnectStatus,
-    SelectProviderModal,
     PersonaContext,
+    SelectProviderModal,
+    useCurrentPersonaConnectStatus,
     type PersonaPerSiteConnectStatus,
 } from '@masknet/shared'
-import { Boundary, getMaskColor, makeStyles } from '@masknet/theme'
 import {
     currentPersonaIdentifier,
-    EnhanceableSite,
     EMPTY_LIST,
+    EnhanceableSite,
     type DashboardRoutes,
     type NetworkPluginID,
     type PersonaInformation,
 } from '@masknet/shared-base'
 import { useValueRef } from '@masknet/shared-base-ui'
+import { Boundary, getMaskColor, makeStyles } from '@masknet/theme'
 import { useChainContext, useNetworkContext } from '@masknet/web3-hooks-base'
+import { Typography } from '@mui/material'
+import { createContext, useContext, useMemo, useState, type PropsWithChildren } from 'react'
+import { useTimeout } from 'react-use'
 import { ApplicationRecommendArea } from './ApplicationRecommendArea.js'
 import { useUnlistedEntries, type Application } from './ApplicationSettingPluginList.js'
-import { Trans } from '@lingui/react/macro'
 
-const useStyles = makeStyles<{
-    shouldScroll: boolean
-    isCarouselReady: boolean
-}>()((theme, props) => {
+const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
     return {
         applicationWrapper: {
             padding: theme.spacing(0, navigator.userAgent.includes('Firefox') ? 1.5 : 0.25, 1, 3),
-            transform: props.isCarouselReady ? 'translateX(-8px)' : 'translateX(-8px)',
+            transform: 'translateX(-8px)',
             display: 'grid',
             gridTemplateColumns: 'repeat(4, 1fr)',
             overflowY: 'auto',
             overflowX: 'hidden',
             gridTemplateRows: '100px',
             gridGap: 10,
             justifyContent: 'space-between',
-            maxHeight: 386,
-            width: props.shouldScroll && !navigator.userAgent.includes('Firefox') ? 583 : 570,
+            minHeight: 0,
+            boxSizing: 'border-box',
             scrollbarColor: `${theme.palette.maskColor.secondaryLine} ${theme.palette.maskColor.secondaryLine}`,
             scrollbarWidth: 'thin',
             '::-webkit-scrollbar': {
@@ -79,7 +76,7 @@ const useStyles = makeStyles<{
     }
 })
 
-interface ApplicationBoardContentProps extends withClasses<'applicationWrapper' | 'recommendFeatureAppListWrapper'> {
+interface ApplicationBoardContentProps {
     openDashboard?: (route: DashboardRoutes, search?: string) => void
     queryOwnedPersonaInformation?: (initializedOnly: boolean) => Promise<PersonaInformation[]>
     currentSite?: EnhanceableSite
@@ -97,7 +94,6 @@ export function ApplicationBoardContent({
     allPersonas,
     applicationCurrentStatus,
     personaPerSiteConnectStatusLoading,
-    classes,
 }: ApplicationBoardContentProps) {
     return (
         <PersonaContext initialState={{ queryOwnedPersonaInformation }}>
@@ -107,20 +103,13 @@ export function ApplicationBoardContent({
                 allPersonas={allPersonas}
                 applicationCurrentStatus={applicationCurrentStatus}
                 personaPerSiteConnectStatusLoading={personaPerSiteConnectStatusLoading}>
-                <ApplicationBoardPluginsList
-                    currentSite={currentSite}
-                    classes={{
-                        applicationWrapper: classes?.applicationWrapper,
-                        recommendFeatureAppListWrapper: classes?.recommendFeatureAppListWrapper,
-                    }}
-                />
+                <ApplicationBoardPluginsList currentSite={currentSite} />
             </ApplicationEntryStatusProvider>
         </PersonaContext>
     )
 }
 
-interface ApplicationBoardPluginsListProps
-    extends withClasses<'applicationWrapper' | 'recommendFeatureAppListWrapper'> {
+interface ApplicationBoardPluginsListProps {
     currentSite?: EnhanceableSite
 }
 
@@ -165,26 +154,19 @@ function ApplicationBoardPluginsList(props: ApplicationBoardPluginsListProps) {
     const [isCarouselReady] = useTimeout(300)
     const [isHoveringCarousel, setIsHoveringCarousel] = useState(false)
     // #endregion
-    const { classes, cx } = useStyles(
-        {
-            shouldScroll: listedAppList.length > 12,
-            isCarouselReady: !!isCarouselReady(),
-        },
-        { props },
-    )
+    const { classes, cx } = useStyles()
 
     return (
         <>
-            <ApplicationRecommendArea
-                classes={{
-                    recommendFeatureAppListWrapper: classes.recommendFeatureAppListWrapper,
-                }}
-                recommendFeatureAppList={recommendFeatureAppList}
-                isCarouselReady={isCarouselReady}
-                RenderEntryComponent={RenderEntryComponent}
-                isHoveringCarousel={isHoveringCarousel}
-                setIsHoveringCarousel={setIsHoveringCarousel}
-            />
+            {recommendFeatureAppList.length > 0 ?
+                <ApplicationRecommendArea
+                    recommendFeatureAppList={recommendFeatureAppList}
+                    isCarouselReady={isCarouselReady}
+                    RenderEntryComponent={RenderEntryComponent}
+                    isHoveringCarousel={isHoveringCarousel}
+                    setIsHoveringCarousel={setIsHoveringCarousel}
+                />
+            :   null}
 
             {listedAppList.length > 0 ?
                 <Boundary>

packages/plugins/RedPacket/src/locale/ja-JP.po

@@ -1,27 +1,29 @@
-import { useState, useCallback, useEffect } from 'react'
-import { DialogContent, IconButton, Tab } from '@mui/material'
-import { TabContext, TabPanel } from '@mui/lab'
-import { makeStyles, MaskTabList, useTabs } from '@masknet/theme'
-import { InjectedDialog, LeavePageConfirmModal, type PersonaPerSiteConnectStatus } from '@masknet/shared'
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import type { IdentityResolved } from '@masknet/plugin-infra'
+import { InjectedDialog, LeavePageConfirmModal, type PersonaPerSiteConnectStatus } from '@masknet/shared'
 import {
     CrossIsolationMessages,
-    type EnhanceableSite,
     type DashboardRoutes,
+    type EnhanceableSite,
     type PersonaInformation,
     type PluginID,
 } from '@masknet/shared-base'
+import { makeStyles, MaskTabList, useTabs } from '@masknet/theme'
+import { TabContext, TabPanel } from '@mui/lab'
+import { DialogContent, IconButton, Tab } from '@mui/material'
+import { useCallback, useEffect, useState } from 'react'
 import { ApplicationBoardContent } from './ApplicationBoard.js'
-import { ApplicationSettingPluginSwitch } from './ApplicationSettingPluginSwitch.js'
 import { ApplicationSettingPluginList } from './ApplicationSettingPluginList.js'
-import { Trans } from '@lingui/react/macro'
+import { ApplicationSettingPluginSwitch } from './ApplicationSettingPluginSwitch.js'
 
 const useStyles = makeStyles<{
     openSettings: boolean
 }>()((theme, { openSettings }) => {
     return {
         content: {
+            display: 'flex',
+            flexDirection: 'column',
             padding: theme.spacing(1.5, openSettings ? 2 : 0, '6px'),
             height: openSettings ? 'auto' : 546,
             scrollbarWidth: 'none',

packages/plugins/RedPacket/src/locale/ko-KR.po

@@ -10,6 +10,7 @@ const useStyles = makeStyles()(() => {
             display: 'flex',
             scrollbarColor: 'transparent transparent',
             overflowX: 'scroll',
+            flexShrink: 0,
             margin: '0 2px 8px',
             padding: '8px 16px',
             scrollbarWidth: 'none',