chore: support WholePostVisibility

src/_locales/en/messages.json

@@ -329,7 +329,7 @@
     "settings_appearance_dark": "Dark",
     "settings_appearance_light": "Light",
     "settings_language": "Language",
-    "settings_choose_eth_network": "Choose Ethereum network",
+    "settings_choose_eth_network": "Choose Ethereum Network",
     "setup_failure": "Setup Failure",
     "setup_successful": "Setup Successful",
     "skip": "Skip",

src/components/InjectedComponents/PostDummy.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { usePostInfoDetails } from '../DataSource/usePostInfo'
 import { DefaultTypedMessageRenderer } from './TypedMessageRenderer'
 import { PluginUI } from '../../plugins/plugin'
+import { remove } from 'lodash-es'
+import { makeTypedMessageCompound, isTypedMessageSuspended } from '../../protocols/typed-message'
 
 export interface PostDummyProps {}
 
@@ -11,5 +13,9 @@ export function PostDummy(props: PostDummyProps) {
         (x, plugin) => (plugin.postMessageProcessor ? plugin.postMessageProcessor(x) : x),
         postMessage,
     )
-    return <DefaultTypedMessageRenderer message={processedPostMessage}></DefaultTypedMessageRenderer>
+    return (
+        <DefaultTypedMessageRenderer
+            message={makeTypedMessageCompound(processedPostMessage.items.filter((x) => !isTypedMessageSuspended(x)))}
+        />
+    )
 }

src/components/InjectedComponents/TypedMessageRenderer.tsx

@@ -68,7 +68,7 @@ export const DefaultTypedMessageAnchorRenderer = React.memo(function DefaultType
     return renderWithMetadata(
         props,
         <Typography variant="body1" style={{ lineBreak: 'anywhere', display: 'inline' }} data-testid="anchor_payload">
-            <Link color="textPrimary" target="_blank" rel="noopener noreferrer" href={href}>
+            <Link color="primary" target="_blank" rel="noopener noreferrer" href={href}>
                 {content}
             </Link>
         </Typography>,

src/extension/options-page/DashboardRouters/Settings.tsx

@@ -10,8 +10,10 @@ import {
     Language,
     renderInShadowRootSettings,
     currentEthereumNetworkSettings,
+    currentWholePostVisibilitySettings,
     appearanceSettings,
     Appearance,
+    WholePostVisibility,
 } from '../../../settings/settings'
 import { useValueRef } from '../../../utils/hooks/useValueRef'
 
@@ -20,6 +22,7 @@ import NoEncryptionIcon from '@material-ui/icons/NoEncryption'
 import MemoryOutlinedIcon from '@material-ui/icons/MemoryOutlined'
 import ArchiveOutlinedIcon from '@material-ui/icons/ArchiveOutlined'
 import UnarchiveOutlinedIcon from '@material-ui/icons/UnarchiveOutlined'
+import VisibilityIcon from '@material-ui/icons/Visibility'
 import TabIcon from '@material-ui/icons/Tab'
 import PaletteIcon from '@material-ui/icons/Palette'
 import LanguageIcon from '@material-ui/icons/Language'
@@ -115,6 +118,7 @@ export default function DashboardSettingsRouter() {
     const currentLang = useValueRef(languageSettings)
     const currentApperance = useValueRef(appearanceSettings)
     const currentEthereumNetwork = useValueRef(currentEthereumNetworkSettings)
+    const currentWholePostVisibility = useValueRef(currentWholePostVisibilitySettings)
     const langMapper = React.useRef((x: Language) => {
         if (x === Language.en) return 'English'
         if (x === Language.zh) return '中文'
@@ -126,6 +130,11 @@ export default function DashboardSettingsRouter() {
         if (x === Appearance.light) return t('settings_appearance_light')
         return t('settings_appearance_default')
     }).current
+    const wholePostVisibilityMapper = React.useRef((x: WholePostVisibility) => {
+        if (x === WholePostVisibility.all) return 'All Posts'
+        if (x === WholePostVisibility.encryptedOnly) return 'Encrypted Posts'
+        return 'Enhanced Posts'
+    }).current
     const classes = useStyles()
     const shadowRoot = useValueRef(renderInShadowRootSettings)
     const theme = useTheme()
@@ -175,6 +184,14 @@ export default function DashboardSettingsRouter() {
                                         value={currentEthereumNetworkSettings}
                                     />
                                 ) : null}
+                                <SettingsUIEnum
+                                    classes={listStyle}
+                                    secondary={wholePostVisibilityMapper(currentWholePostVisibility)}
+                                    enumObject={WholePostVisibility}
+                                    getText={wholePostVisibilityMapper}
+                                    icon={<VisibilityIcon />}
+                                    value={currentWholePostVisibilitySettings}
+                                />
                             </List>
                         </Card>
                     </Paper>

src/plugins/Trader/UI/SettingsDialog.tsx

@@ -75,6 +75,10 @@ function SettingsDialogUI(props: SettingsDialogUIProps) {
     const { t } = useI18N()
     const { currency, platform, currencies } = props
     const classes = useStylesExtends(useStyles(), props)
+
+    console.log('DEBUG: SettingsDialogUI')
+    console.log(props)
+
     return (
         <div className={classes.root}>
             <ShadowRootDialog

src/plugins/Trader/UI/TrendingView.tsx

@@ -9,16 +9,14 @@ import {
     CardActions,
     Theme,
     createStyles,
+    CircularProgress,
+    CardContent,
 } from '@material-ui/core'
 import { useAsync } from 'react-use'
 import SettingsIcon from '@material-ui/icons/Settings'
 import classNames from 'classnames'
-import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp'
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'
-import { SettingsDialog } from './SettingsDialog'
+import { SettingsDialog, SettingsDialogProps } from './SettingsDialog'
 import { Platform, Currency, resolvePlatformName, Settings } from '../type'
-import { PortalShadowRoot, portalShadowRoot } from '../../../utils/jss/ShadowRootPortal'
-import { setStorage, getStorage } from '../../../utils/browser.storage'
 import { getActivatedUI } from '../../../social-network/ui'
 import stringify from 'json-stable-stringify'
 import { currentTrendingViewSettings, currentTrendingViewPlatformSettings } from '../settings'
@@ -29,22 +27,34 @@ import { useColorStyles } from '../../../utils/theme'
 
 const network = getActivatedUI().networkIdentifier
 
-const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        root: {},
+const useStyles = makeStyles((theme: Theme) => {
+    const internalName = getActivatedUI()?.internalName
+    return createStyles({
+        root: {
+            ...(internalName === 'twitter'
+                ? { border: `1px solid ${theme.palette.type === 'dark' ? '#2f3336' : '#ccd6dd'}` }
+                : null),
+        },
         header: {
             display: 'flex',
         },
         body: {},
+        footer: {
+            justifyContent: 'flex-end',
+        },
+        footnote: {
+            fontSize: 10,
+        },
         avatar: {},
         percentage: {
             marginLeft: theme.spacing(1),
         },
-    }),
-)
+    })
+})
 
 export interface TrendingViewProps extends withClasses<KeysInferFromUseStyles<typeof useStyles>> {
     keyword: string
+    SettingsDialogProps?: Partial<SettingsDialogProps>
 }
 
 export function TrendingView(props: TrendingViewProps) {
@@ -98,17 +108,31 @@ export function TrendingView(props: TrendingViewProps) {
         )
     }, [platform, currency, props.keyword])
     //#endregion
-    if (loadingCurrencies || !currency) return null
-    if (loadingCoinInfo || !coinInfo) return null
+
+    if (loadingCurrencies || loadingCoinInfo)
+        return (
+            <Card className={classes.root} elevation={0} component="article">
+                <CardActions className={classes.footer}>
+                    <CircularProgress size={20} />
+                </CardActions>
+            </Card>
+        )
+    if (!currency) return null
+    if (!coinInfo) return null
 
     return (
         <>
-            <Card className={classes.root} elevation={0} component="article">
+            <Card className={classes.root} elevation={0} component="article" style={{ minWidth: 250 }}>
                 <CardHeader
                     className={classes.header}
                     avatar={<Avatar src={coinInfo.coin.image_url} alt={coinInfo.coin.symbol} />}
                     action={
-                        <IconButton size="small" onClick={() => setSettingsDialogOpen(true)}>
+                        <IconButton
+                            size="small"
+                            onClick={() => {
+                                console.log('DEUBG: click')
+                                setSettingsDialogOpen(true)
+                            }}>
                             <SettingsIcon />
                         </IconButton>
                     }
@@ -119,7 +143,7 @@ export function TrendingView(props: TrendingViewProps) {
                     }
                     subheader={
                         <Typography variant="body1">
-                            <span>{`${currency.symbol ?? currency.name} ${formatCurrency(
+                            <span>{`${currency.symbol ?? `${currency.name} `}${formatCurrency(
                                 coinInfo.market.current_price,
                             )}`}</span>
                             {coinInfo.market.price_change_24h ? (
@@ -135,8 +159,8 @@ export function TrendingView(props: TrendingViewProps) {
                         </Typography>
                     }
                 />
-                <CardActions>
-                    <Typography color="textSecondary" variant="body2">
+                <CardActions className={classes.footer}>
+                    <Typography className={classes.footnote} color="textSecondary" variant="subtitle2">
                         Powered by {resolvePlatformName(platform)}
                     </Typography>
                 </CardActions>
@@ -155,6 +179,7 @@ export function TrendingView(props: TrendingViewProps) {
                     currentTrendingViewPlatformSettings[network].value = String(platform)
                 }}
                 onClose={() => setSettingsDialogOpen(false)}
+                {...props.SettingsDialogProps}
             />
         </>
     )

src/plugins/Trader/apis/index.ts

@@ -35,7 +35,7 @@ export async function getCoinInfo(id: string, platform: Platform, currency: Curr
                 id,
                 name: info.name,
                 symbol: info.symbol,
-                image_url: info.image.thumb,
+                image_url: info.image.small,
             },
             currency,
             platform,

src/plugins/Trader/define.tsx

@@ -7,8 +7,6 @@ import {
     TypedMessageCompound,
 } from '../../protocols/typed-message'
 import { makeTypedMessageCashTrending } from './messages/TypedMessageCashTrending'
-import { TrendingView } from './UI/TrendingView'
-import MaskbookPluginWrapper from '../MaskbookPluginWrapper'
 
 const isCashTagMessage = (m: TypedMessage): m is TypedMessageAnchor => isTypedMessgaeAnchor(m) && m.category === 'cash'
 
@@ -22,13 +20,4 @@ export const TraderPluginDefine: PluginConfig = {
             items: message.items.map((m: TypedMessage) => (isCashTagMessage(m) ? makeTypedMessageCashTrending(m) : m)),
         }
     },
-    postInspector() {
-        return (
-            <MaskbookPluginWrapper pluginName="Trader">
-                <Suspense fallback={null}>
-                    <TrendingView keyword="BTC"></TrendingView>
-                </Suspense>
-            </MaskbookPluginWrapper>
-        )
-    },
 }

src/plugins/Trader/messages/TypedMessageCashTrending.tsx

@@ -1,7 +1,10 @@
-import React from 'react'
-import { TypedMessage, TypedMessageAnchor, registerTypedMessageRenderer } from '../../../protocols/typed-message'
+import React, { useState, useRef } from 'react'
+import { TypedMessageAnchor, registerTypedMessageRenderer } from '../../../protocols/typed-message'
+import { Link, Typography, Popper } from '@material-ui/core'
+import type { TypedMessageRendererProps } from '../../../components/InjectedComponents/TypedMessageRenderer'
+import { TrendingView } from '../UI/TrendingView'
 
-export interface TypedMessageCashTrending extends TypedMessage {
+export interface TypedMessageCashTrending extends Omit<TypedMessageAnchor, 'type'> {
     readonly type: 'anchor/cash_trending'
     readonly name: string
 }
@@ -20,6 +23,28 @@ registerTypedMessageRenderer('anchor/cash_trending', {
     priority: 0,
 })
 
-function DefaultTypedMessageCashTrendingRenderer() {
-    return <a href="https://maskbook.com">MASKBOOK!</a>
+function DefaultTypedMessageCashTrendingRenderer(props: TypedMessageRendererProps<TypedMessageCashTrending>) {
+    const rootEl = useRef<HTMLDivElement>(null)
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+
+    return (
+        <div ref={rootEl} style={{ display: 'inline' }}>
+            <Typography color="textPrimary" variant="body1" style={{ lineBreak: 'anywhere', display: 'inline' }}>
+                <Link
+                    href={props.message.href}
+                    onMouseOver={(e: React.MouseEvent<HTMLAnchorElement>) => setAnchorEl(e.currentTarget)}>
+                    {props.message.content}
+                </Link>
+            </Typography>
+            <Popper
+                open={Boolean(anchorEl)}
+                anchorEl={anchorEl}
+                disablePortal
+                container={() => rootEl.current}
+                transition
+                style={{ zIndex: 1 }}>
+                <TrendingView keyword={props.message.name} />
+            </Popper>
+        </div>
+    )
 }

src/settings/settings.ts

@@ -46,6 +46,21 @@ export const appearanceSettings = createGlobalSettings<Appearance>('apperance',
     primary: () => i18n.t('settings_appearance'),
 })
 
+export enum WholePostVisibility {
+    all = 'all',
+    enhancedOnly = 'enhancedOnly',
+    encryptedOnly = 'encryptedOnly',
+}
+
+export const currentWholePostVisibilitySettings = createGlobalSettings<WholePostVisibility>(
+    'whole post visibility',
+    WholePostVisibility.all,
+    {
+        primary: () => 'Whole Post Visibility',
+        secondary: () => '',
+    },
+)
+
 export const currentEthereumNetworkSettings = createGlobalSettings<EthereumNetwork>(
     'eth network',
     EthereumNetwork.Mainnet,