refactor: resolve reviews

package.json

@@ -59,6 +59,7 @@
     "@servie/events": "^1.0.0",
     "@types/bip39": "^3.0.0",
     "@types/classnames": "^2.2.10",
+    "@types/d3": "^5.7.2",
     "@types/elliptic": "^6.4.12",
     "@types/gun": "^0.9.2",
     "@types/json-stable-stringify": "^1.0.32",
@@ -140,7 +141,6 @@
     "@storybook/addons": "^5.3.17",
     "@storybook/react": "^5.3.19",
     "@testing-library/react-hooks": "^3.4.1",
-    "@types/d3": "^5.7.2",
     "@types/elliptic": "^6.4.12",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",

src/_locales/en/messages.json

@@ -123,6 +123,9 @@
     "import_your_persona": "Import Your Persona",
     "internal_id": "Internal ID",
     "keywords": "Keywords",
+    "language_en": "English",
+    "language_zh": "中文",
+    "language_ja": "日本語",
     "mnemonic_words": "Mnemonic Words",
     "my_personas": "My Personas",
     "my_wallets": "My Wallets",
@@ -241,6 +244,11 @@
     "settings_appearance_light": "Light",
     "settings_language": "Language",
     "settings_choose_eth_network": "Choose Ethereum Network",
+    "settings_post_replace_all_posts": "All Posts",
+    "settings_post_replace_enhanced_posts": "Enhanced Posts",
+    "settings_post_replace_encrypted_posts": "Encrypted Posts",
+    "settings_post_replacement_scope": "Post Replacement Scope",
+    "settings_post_replacement_scope_desc": "Maskbook will render a new post to replace the original one to provide some enhancement.",
     "skip": "Skip",
     "share": "Share",
     "share_to": "Share to…",
@@ -284,5 +292,13 @@
     "plugin_file_service_drop_here": "Drop a file here to upload",
     "plugin_file_service_error_101": "The input is not a single file.",
     "plugin_file_service_error_102": "The file is too large; limit is {{limit}}.",
-    "plugin_file_service_on_change_file": "Change File"
+    "plugin_file_service_on_change_file": "Change File",
+    "plugin_trader_no_data": "No Data",
+    "plugin_trader_tab_price": "Price",
+    "plugin_trader_tab_exchange": "Exchange",
+    "plugin_trader_tab_switch_data_source": "Switch Data Source: ",
+    "plugin_trader_table_exchange": "Exchange",
+    "plugin_trader_table_pair": "Pair",
+    "plugin_trader_table_price": "Price",
+    "plugin_trader_table_volume": "Volume (24h)"
 }

src/_locales/ja/messages.json

@@ -123,6 +123,9 @@
     "import_your_persona": "人格をインポート",
     "internal_id": "内部 ID",
     "keywords": "キーワード",
+    "language_en": "English",
+    "language_zh": "中文",
+    "language_ja": "日本語",
     "mnemonic_words": "パスフレーズ",
     "my_personas": "私の人格アカウント",
     "my_wallets": "私のウォレット",
@@ -241,6 +244,11 @@
     "settings_appearance_light": "ライトモード",
     "settings_language": "言語を設定",
     "settings_choose_eth_network": "Ethereum ネットワークを選択してください",
+    "settings_post_replace_all_posts": "すべての投稿",
+    "settings_post_replace_enhanced_posts": "強化された投稿",
+    "settings_post_replace_encrypted_posts": "暗号化された投稿",
+    "settings_post_replacement_scope": "ポスト交換範囲",
+    "settings_post_replacement_scope_desc": "Maskbook は、新しい投稿をレンダリングして元の投稿を置き換え、いくつかの拡張機能を提供します。",
     "skip": "スキップ",
     "share": "共有",
     "share_to": "共有先",
@@ -284,5 +292,13 @@
     "plugin_file_service_drop_here": "ファイルをここにドラッグ＆ドロップ",
     "plugin_file_service_error_101": "一つのファイルだけにしてください！",
     "plugin_file_service_error_102": "ファイルが大きすぎます！最大容量は{{limit}}です。",
-    "plugin_file_service_on_change_file": "ファイルの変更"
+    "plugin_file_service_on_change_file": "ファイルの変更",
+    "plugin_trader_no_data": "データなし",
+    "plugin_trader_tab_price": "価格",
+    "plugin_trader_tab_exchange": "取引所",
+    "plugin_trader_tab_switch_data_source": "データソースの切り替え： ",
+    "plugin_trader_table_exchange": "取引所",
+    "plugin_trader_table_pair": "通貨ペア",
+    "plugin_trader_table_price": "価格",
+    "plugin_trader_table_volume": "取引高"
 }

src/_locales/zh/messages.json

@@ -123,6 +123,9 @@
     "import_your_persona": "導入角色",
     "internal_id": "內部ID",
     "keywords": "關鍵字",
+    "language_en": "English",
+    "language_zh": "中文",
+    "language_ja": "日本語",
     "mnemonic_words": "助記詞",
     "my_personas": "我的角色",
     "my_wallets": "我的錢包",
@@ -241,6 +244,11 @@
     "settings_appearance_light": "淺色",
     "settings_language": "語言",
     "settings_choose_eth_network": "選擇以太坊網絡",
+    "settings_post_replace_all_posts": "所有帖子",
+    "settings_post_replace_enhanced_posts": "僅增強的帖子",
+    "settings_post_replace_encrypted_posts": "僅加密的帖子",
+    "settings_post_replacement_scope": "帖子替換範圍",
+    "settings_post_replacement_scope_desc": "Maskbook 將呈現一個新帖子以替換原始帖子，以提供一些增強功能。",
     "skip": "跳過",
     "share": "分享",
     "share_to": "分享给…",
@@ -284,5 +292,13 @@
     "plugin_file_service_drop_here": "拖入文件來上傳",
     "plugin_file_service_error_101": "只能選擇單個文檔",
     "plugin_file_service_error_102": "文檔尺寸過大。請不要超過 {{limit}}。",
-    "plugin_file_service_on_change_file": "選擇其他文檔"
+    "plugin_file_service_on_change_file": "選擇其他文檔",
+    "plugin_trader_no_data": "暫無數據",
+    "plugin_trader_tab_price": "價格",
+    "plugin_trader_tab_exchange": "交易標的",
+    "plugin_trader_tab_switch_data_source": "切換數據來源： ",
+    "plugin_trader_table_exchange": "交易標的",
+    "plugin_trader_table_pair": "對",
+    "plugin_trader_table_price": "價格",
+    "plugin_trader_table_volume": "交易量 （24小時）"
 }

src/components/InjectedComponents/AdditionalPostContent.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     root: { boxSizing: 'border-box', width: '100%', backgroundColor: 'transparent', borderColor: 'transparent' },
     title: { display: 'flex', alignItems: 'center' },
     icon: { paddingRight: theme.spacing(0.75), display: 'flex', width: 20, height: 20 },
-    content: { margin: theme.spacing(1, 0), padding: 0 },
+    content: { margin: theme.spacing(1, 0), padding: 0, overflowWrap: 'break-word' },
     rightIcon: { paddingLeft: theme.spacing(0.75) },
 }))
 

src/components/InjectedComponents/PostReplacer.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useMemo } from 'react'
+import { usePostInfoDetails } from '../DataSource/usePostInfo'
+import { DefaultTypedMessageRenderer } from './TypedMessageRenderer'
+import { PluginUI } from '../../plugins/plugin'
+import { makeTypedMessageCompound, isTypedMessageSuspended, isTypedMessageKnown } from '../../protocols/typed-message'
+import { useValueRef } from '../../utils/hooks/useValueRef'
+import { currentPostReplacementScopeSettings, PostReplacementScope } from '../../settings/settings'
+import { makeStyles, Theme } from '@material-ui/core'
+
+const useStlyes = makeStyles((theme: Theme) => ({
+    root: {
+        overflowWrap: 'break-word',
+    },
+}))
+
+export interface PostReplacerProps {
+    zip?: () => void
+    unzip?: () => void
+}
+
+export function PostReplacer(props: PostReplacerProps) {
+    const classes = useStlyes()
+    const postContent = usePostInfoDetails('postContent')
+    const postMessage = usePostInfoDetails('postMessage')
+    const postPayload = usePostInfoDetails('postPayload')
+    const postRepalcementScope = useValueRef(currentPostReplacementScopeSettings)
+
+    const plugins = [...PluginUI.values()]
+    const processedPostMessage = useMemo(
+        () => plugins.reduce((x, plugin) => plugin.messageProcessor?.(x) ?? x, postMessage),
+        [plugins.map((x) => x.identifier).join(), postContent],
+    )
+    const shouldReplacePost =
+        // replace all posts
+        postRepalcementScope === PostReplacementScope.all ||
+        // replace posts which enhanced by plugins
+        (postRepalcementScope === PostReplacementScope.enhancedOnly &&
+            processedPostMessage.items.some((x) => !isTypedMessageKnown(x))) ||
+        // replace posts which encrypted by maskbook
+        (postRepalcementScope === PostReplacementScope.encryptedOnly && postPayload.ok)
+
+    // zip/unzip original post
+    useEffect(() => {
+        if (shouldReplacePost) props.zip?.()
+        else props.unzip?.()
+    }, [shouldReplacePost])
+
+    return shouldReplacePost ? (
+        <span className={classes.root}>
+            <DefaultTypedMessageRenderer
+                message={makeTypedMessageCompound(
+                    processedPostMessage.items.filter((x) => !isTypedMessageSuspended(x)),
+                )}
+            />
+        </span>
+    ) : null
+}

src/components/InjectedComponents/TypedMessageRenderer.tsx

@@ -82,7 +82,7 @@ export const DefaultTypedMessageImageRenderer = React.memo(function DefaultTyped
     const { image, width, height } = props.message
     return renderWithMetadata(
         props,
-        <Typography variant="body1" style={{ lineBreak: 'anywhere' }} data-testid="image_payload">
+        <Typography variant="body1" data-testid="image_payload">
             <Image src={image} width={width} height={height} />
         </Typography>,
     )

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

@@ -9,11 +9,11 @@ import {
     languageSettings,
     Language,
     renderInShadowRootSettings,
-    currentWholePostVisibilitySettings,
+    currentPostReplacementScopeSettings,
     currentLocalWalletEthereumNetworkSettings,
     appearanceSettings,
     Appearance,
-    WholePostVisibility,
+    PostReplacementScope,
 } from '../../../settings/settings'
 import { useValueRef } from '../../../utils/hooks/useValueRef'
 
@@ -22,7 +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 FlipToFrontIcon from '@material-ui/icons/FlipToFront'
 import TabIcon from '@material-ui/icons/Tab'
 import PaletteIcon from '@material-ui/icons/Palette'
 import LanguageIcon from '@material-ui/icons/Language'
@@ -118,22 +118,22 @@ export default function DashboardSettingsRouter() {
     const { t } = useI18N()
     const currentLang = useValueRef(languageSettings)
     const currentApperance = useValueRef(appearanceSettings)
-    const currentWholePostVisibility = useValueRef(currentWholePostVisibilitySettings)
+    const currentPostReplacementScope = useValueRef(currentPostReplacementScopeSettings)
     const langMapper = React.useRef((x: Language) => {
-        if (x === Language.en) return 'English'
-        if (x === Language.zh) return '中文'
-        if (x === Language.ja) return '日本語'
+        if (x === Language.en) return t('language_en')
+        if (x === Language.zh) return t('language_zh')
+        if (x === Language.ja) return t('language_ja')
         return x
     }).current
     const apperanceMapper = React.useRef((x: Appearance) => {
         if (x === Appearance.dark) return t('settings_appearance_dark')
         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'
+    const postReplacerMapper = React.useRef((x: PostReplacementScope) => {
+        if (x === PostReplacementScope.all) return t('settings_post_replace_all_posts')
+        if (x === PostReplacementScope.encryptedOnly) return t('settings_post_replace_encrypted_posts')
+        return t('settings_post_replace_enhanced_posts')
     }).current
     const classes = useStyles()
     const shadowRoot = useValueRef(renderInShadowRootSettings)
@@ -184,11 +184,10 @@ export default function DashboardSettingsRouter() {
                                 ) : null}
                                 <SettingsUIEnum
                                     classes={listStyle}
-                                    secondary={wholePostVisibilityMapper(currentWholePostVisibility)}
-                                    enumObject={WholePostVisibility}
-                                    getText={wholePostVisibilityMapper}
-                                    icon={<VisibilityIcon />}
-                                    value={currentWholePostVisibilitySettings}
+                                    enumObject={PostReplacementScope}
+                                    getText={postReplacerMapper}
+                                    icon={<FlipToFrontIcon />}
+                                    value={currentPostReplacementScopeSettings}
                                 />
                             </List>
                         </Card>

src/plugins/Trader/UI/PriceChanged.tsx

@@ -2,12 +2,24 @@ import React from 'react'
 import classNames from 'classnames'
 import { useColorStyles } from '../../../utils/theme'
 import { makeStyles, Theme, createStyles } from '@material-ui/core'
+import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp'
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'
 
 const useStyles = makeStyles((theme: Theme) => {
     return createStyles({
         root: {
             fontSize: 'inherit',
-            marginLeft: theme.spacing(1),
+            position: 'relative',
+        },
+        icon: {
+            top: 0,
+            bottom: 0,
+            margin: 'auto',
+            position: 'absolute',
+            verticalAlign: 'middle',
+        },
+        value: {
+            marginLeft: theme.spacing(3),
         },
     })
 })
@@ -21,8 +33,9 @@ export function PriceChanged(props: PriceChangedProps) {
     const classes = useStyles()
     return (
         <span className={classNames(classes.root, props.amount > 0 ? color.success : color.error)}>
-            {props.amount > 0 ? '\u25B2 ' : '\u25BC '}
-            {props.amount.toFixed(2)}%
+            {props.amount > 0 ? <ArrowDropUpIcon className={classes.icon} /> : null}
+            {props.amount < 0 ? <ArrowDropDownIcon className={classes.icon} /> : null}
+            <span className={classes.value}>{props.amount.toFixed(2)}%</span>
         </span>
     )
 }

src/plugins/Trader/UI/PriceChangedTable.tsx

@@ -15,11 +15,15 @@ import { PriceChanged } from './PriceChanged'
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
-        container: {},
+        container: {
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
+        },
         table: {},
         cell: {
-            paddingLeft: theme.spacing(1.5),
-            paddingRight: theme.spacing(1),
+            paddingLeft: theme.spacing(1),
+            paddingRight: theme.spacing(1.5),
             whiteSpace: 'nowrap',
         },
     }),