chore: check available before displaying TrendingView

src/components/InjectedComponents/PostDummy.tsx

@@ -29,12 +29,6 @@ export function PostDummy(props: PostDummyProps) {
         // render dummy for posts which encrypted by maskbook
         (wholePostVisibilitySettings === WholePostVisibility.encryptedOnly && postPayload.ok)
 
-    console.log(`DEBUG: postDummyVisible`)
-    console.log({
-        postDummyVisible,
-        wholePostVisibilitySettings,
-    })
-
     // zip original post
     useEffect(() => {
         if (postDummyVisible) props.zip?.()

src/plugins/Trader/README.md

@@ -0,0 +1,31 @@
+# Plugin: Trader
+
+## Feature Set
+
+- [x] View trending info of a cryptocurrency with cash tag
+- [ ] \[TODO\] View trending info of a stock with cash tag
+- [ ] \[TODO\] Do trading between different cryptocurrencies
+
+## Files
+
+- `./apis/` - data vendor APIs
+- `./hooks/` - customized hooks
+- `./messages/` - customized typed messags
+- `./UI/` - UI related stuff
+- `./services.ts` - A plugin specific messages center
+- `./settings.ts` - Some plugin specific settings
+- `./types.ts` - Some plugin specific TypeScript typings
+- `./constants.ts` - Some plugin specific constants
+- `./define.ts` - The definition of the plugin
+
+## Related discussion
+
+- <https://github.com/DimensionDev/Maskbook/issues/1399>
+
+## Pull requests
+
+- <https://github.com/DimensionDev/Maskbook/pull/1458>
+
+## Prototype
+
+- <https://www.figma.com/file/BN1c826vrISClNB34bgZRV/Plugin%3A-Trader-%5BPrototype%5D>

src/plugins/Trader/UI/TrendingPopper.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'
 import type PopperJs from 'popper.js'
 import { Popper, ClickAwayListener, PopperProps } from '@material-ui/core'
 import { MessageCenter, ObserveCashTagEvent } from '../messages'
-import { useInterval } from 'react-use'
 
 export interface TrendingPopperProps {
     children?: (name: string, reposition?: () => void) => React.ReactNode

src/plugins/Trader/apis/index.ts

@@ -1,7 +1,8 @@
-import { Platform, Currency, Coin, Trending, Market, Stat } from '../types'
+import { Platform, Currency, Coin, Trending, Stat } from '../types'
 import * as coinGeckoAPI from './coingecko'
 import * as coinMarketCapAPI from './coinmarketcap'
 import { Days } from '../UI/PriceChartDaysControl'
+import { getEnumAsArray } from '../../../utils/enum'
 
 export async function getCurrenies(platform: Platform): Promise<Currency[]> {
     if (platform === Platform.COIN_GECKO) {
@@ -46,6 +47,39 @@ export async function getCoins(platform: Platform): Promise<Coin[]> {
     }))
 }
 
+//#region check a specific coin is available on specific platform
+const availabilityCache = new Map<
+    Platform,
+    {
+        supported: Set<string>
+        lastUpdated: Date
+    }
+>()
+
+export async function checkAvailabilityAtPlatform(platform: Platform, keyword: string) {
+    if (
+        // cache never built before
+        !availabilityCache.has(platform) ||
+        // cache expired in 24h
+        new Date().getTime() - (availabilityCache.get(platform)?.lastUpdated.getTime() ?? 0) >
+            24 /* hours */ * 60 /* minutes */ * 60 /* seconds */ * 1000 /* milliseconds */
+    ) {
+        const coins = await getCoins(platform)
+        availabilityCache.set(platform, {
+            supported: new Set<string>(coins.map((x) => x.symbol.toLowerCase())),
+            lastUpdated: new Date(),
+        })
+    }
+    return availabilityCache.get(platform)?.supported.has(keyword.toLowerCase()) ?? false
+}
+
+export async function checkAvailability(keyword: string) {
+    return (await Promise.all(getEnumAsArray(Platform).map((x) => checkAvailabilityAtPlatform(x.value, keyword)))).some(
+        Boolean,
+    )
+}
+//#endregion
+
 export async function getCoinInfo(id: string, platform: Platform, currency: Currency): Promise<Trending> {
     if (platform === Platform.COIN_GECKO) {
         const info = await coinGeckoAPI.getCoinInfo(id)

src/plugins/Trader/constants.ts

@@ -0,0 +1,2 @@
+export const PLUGIN_IDENTIFIER = 'co.maskbook.trader'
+export const PLUGIN_METADATA_KEY = 'com.maskbook.trader:1'

src/plugins/Trader/define.tsx

@@ -9,20 +9,28 @@ import {
 import { makeTypedMessageCashTrending } from './messages/TypedMessageCashTrending'
 import { TrendingPopper } from './UI/TrendingPopper'
 import { TrendingView } from './UI/TrendingView'
+import Services from '../../extension/service'
+import { Platform } from './types'
+import { getEnumAsArray } from '../../utils/enum'
+import { PLUGIN_IDENTIFIER, PLUGIN_METADATA_KEY } from './constants'
 
 const isCashTagMessage = (m: TypedMessage): m is TypedMessageAnchor => isTypedMessgaeAnchor(m) && m.category === 'cash'
 
 export const TraderPluginDefine: PluginConfig = {
     pluginName: 'Trader',
-    identifier: 'co.maskbook.trader',
-    postDialogMetadataBadge: new Map([['com.maskbook.trader:1', (meta) => 'no metadata']]),
+    identifier: PLUGIN_IDENTIFIER,
+    postDialogMetadataBadge: new Map([[PLUGIN_METADATA_KEY, (meta) => 'no metadata']]),
     postMessageProcessor(message: TypedMessageCompound) {
         return {
             ...message,
             items: message.items.map((m: TypedMessage) => (isCashTagMessage(m) ? makeTypedMessageCashTrending(m) : m)),
         }
     },
     pageInspector() {
+        // build availability cache in the background page
+        getEnumAsArray(Platform).forEach((p) =>
+            Services.Plugin.invokePlugin('maskbook.trader', 'checkAvailability', 'BTC'),
+        )
         return (
             <TrendingPopper>
                 {(name: string, reposition?: () => void) => <TrendingView name={name} onUpdate={reposition} />}

src/plugins/Trader/messages/TypedMessageCashTrending.tsx

@@ -3,6 +3,7 @@ import { TypedMessageAnchor, registerTypedMessageRenderer } from '../../../proto
 import { Link, Typography } from '@material-ui/core'
 import type { TypedMessageRendererProps } from '../../../components/InjectedComponents/TypedMessageRenderer'
 import { MessageCenter } from '../messages'
+import Services from '../../../extension/service'
 
 export interface TypedMessageCashTrending extends Omit<TypedMessageAnchor, 'type'> {
     readonly type: 'anchor/cash_trending'
@@ -24,13 +25,16 @@ registerTypedMessageRenderer('anchor/cash_trending', {
 })
 
 function DefaultTypedMessageCashTrendingRenderer(props: TypedMessageRendererProps<TypedMessageCashTrending>) {
-    const onHoverCashTag = (ev: React.MouseEvent<HTMLAnchorElement>) => {
-        MessageCenter.emit('cashTagObserved', {
-            name: props.message.name,
-            element: ev.currentTarget,
-        })
+    const onHoverCashTag = async (ev: React.MouseEvent<HTMLAnchorElement>) => {
+        // should cache before async operations
+        const element = ev.currentTarget
+        if (await Services.Plugin.invokePlugin('maskbook.trader', 'checkAvailability', props.message.name)) {
+            MessageCenter.emit('cashTagObserved', {
+                name: props.message.name,
+                element,
+            })
+        }
     }
-
     return (
         <Typography component="span" color="textPrimary" variant="body1">
             <Link href={props.message.href} onMouseOver={onHoverCashTag}>