feat: mf-6358 migrate finance feed source to zerion

cspell.json

@@ -311,6 +311,7 @@
         "sushiswap",
         "swappable",
         "sysvar",
+        "taiko",
         "tanstack",
         "telos",
         "testid",

packages/mask/content-script/components/InjectedComponents/ProfileCard/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState, memo } from 'react'
 import { useUpdateEffect } from 'react-use'
-import { compact, first } from 'lodash-es'
+import { first } from 'lodash-es'
 import { TabContext } from '@mui/lab'
 import { Tab, Typography } from '@mui/material'
 import { Icons } from '@masknet/icons'
@@ -174,9 +174,6 @@ export const ProfileCard = memo(({ identity, currentAddress, ...rest }: Props) =
             label: typeof x.label === 'string' ? x.label : translate(x.pluginID, x.label),
         }))
     }, [activatedPlugins, translate])
-    const tabActions = getAvailablePlugins(activatedPlugins, (plugins) => {
-        return compact(plugins.map((x) => x.ProfileTabActions))
-    })
 
     const [currentTab, onChange] = useTabs(first(tabs)?.id ?? PluginID.Collectible, ...tabs.map((tab) => tab.id))
 
@@ -232,13 +229,6 @@ export const ProfileCard = memo(({ identity, currentAddress, ...rest }: Props) =
                                                 classes={{ root: classes.tabRoot, textColorPrimary: classes.tabRoot }}
                                             />
                                         ))}
-                                        {tabActions.length ?
-                                            <span className={classes.actions}>
-                                                {tabActions.map((Action, i) => (
-                                                    <Action key={i} slot="profile-card" />
-                                                ))}
-                                            </span>
-                                        :   null}
                                     </MaskTabList>
                                 </TabContext>
                             </div>

packages/mask/content-script/components/InjectedComponents/ProfileTabContent.tsx

@@ -208,10 +208,6 @@ function Content(props: ProfileTabContentProps) {
         }))
     }, [activatedPlugins, translate])
 
-    const tabActions = getAvailablePlugins(activatedPlugins, (plugins) => {
-        return compact(plugins.map((x) => x.ProfileTabActions))
-    })
-
     const [currentTab, onChange] = useTabs(first(tabs)?.id ?? PluginID.Collectible, ...tabs.map((tab) => tab.id))
 
     const isWeb3ProfileDisabled = useIsMinimalMode(PluginID.Web3Profile)
@@ -513,13 +509,6 @@ function Content(props: ProfileTabContentProps) {
                                 {tabs.map((tab) => (
                                     <Tab key={tab.id} label={tab.label} value={tab.id} />
                                 ))}
-                                {tabActions.length ?
-                                    <span className={classes.actions}>
-                                        {tabActions.map((Action, i) => (
-                                            <Action key={i} slot="profile-page" />
-                                        ))}
-                                    </span>
-                                :   null}
                             </MaskTabList>
                         </TabContext>
                     </div>

packages/mask/content-script/components/InjectedComponents/SearchResultInspector.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useMemo } from 'react'
 import { useAsyncRetry } from 'react-use'
-import { compact, first } from 'lodash-es'
+import { first } from 'lodash-es'
 import { TabContext } from '@mui/lab'
 import { Stack, Tab } from '@mui/material'
 import {
@@ -11,7 +11,6 @@ import {
     useActivatedPluginsSiteAdaptor,
     usePluginTransField,
     useIsMinimalMode,
-    getAvailablePlugins,
 } from '@masknet/plugin-infra/content-script'
 import { EMPTY_LIST, PluginID, type SocialIdentity, type ProfileTabs } from '@masknet/shared-base'
 import { makeStyles, MaskTabList, useTabs } from '@masknet/theme'
@@ -117,9 +116,6 @@ export function SearchResultInspector(props: SearchResultInspectorProps) {
         if (!currentResult) return EMPTY_LIST
         return getSearchResultTabs(activatedPlugins, currentResult, translate)
     }, [activatedPlugins, resultList.value, translate])
-    const tabActions = getAvailablePlugins(activatedPlugins, (plugins) => {
-        return compact(plugins.map((x) => x.ProfileTabActions))
-    })
 
     const defaultTab = first(tabs)?.id ?? PluginID.Collectible
     const [currentTab, onChange, , setTab] = useTabs(defaultTab, ...tabs.map((tab) => tab.id))
@@ -149,13 +145,6 @@ export function SearchResultInspector(props: SearchResultInspectorProps) {
                                     {tabs.map((tab) => (
                                         <Tab key={tab.id} label={tab.label} value={tab.id} />
                                     ))}
-                                    {tabActions.length ?
-                                        <span className={classes.actions}>
-                                            {tabActions.map((Action, i) => (
-                                                <Action key={i} slot="search" />
-                                            ))}
-                                        </span>
-                                    :   null}
                                 </MaskTabList>
                             </TabContext>
                         </Stack>

packages/plugin-infra/src/types.ts

@@ -18,7 +18,7 @@ import type { TypedMessage } from '@masknet/typed-message'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import type { SearchResult } from '@masknet/web3-shared-base'
 import type { CompositionType } from './entry-content-script.js'
-import type { JSX, ComponentType } from 'react'
+import type { JSX } from 'react'
 
 export declare namespace Plugin {
     /**
@@ -248,11 +248,6 @@ export namespace Plugin.SiteAdaptor {
         ProfileCardTabs?: ProfileTab[]
         /** This UI will be rendered as cover on the profile page */
         ProfileCover?: ProfileCover[]
-        /**
-         * actions ui injected in profile tabs
-         * slot is used to distinguish among different slots.
-         */
-        ProfileTabActions?: ComponentType<{ slot: ProfileTabSlot }>
         /** This UI will be rendered as tab on the setting dialog */
         SettingTabs?: SettingTab[]
         /** This UI will be rendered components on the avatar realm */

packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/FeedSummary.tsx

@@ -0,0 +1,147 @@
+import { Select, Trans } from '@lingui/macro'
+import { isSameAddress, trimZero, type Transaction } from '@masknet/web3-shared-base'
+import { Typography, type TypographyProps } from '@mui/material'
+import { memo } from 'react'
+import { makeStyles } from '@masknet/theme'
+import { type ChainId, type SchemaType } from '@masknet/web3-shared-evm'
+import { AccountLabel, Label } from '../components/common.js'
+import { useFeedOwner } from '../contexts/FeedOwnerContext.js'
+import { BigNumber } from 'bignumber.js'
+
+const useStyles = makeStyles<{ size: number }>()((theme) => ({
+    summary: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: theme.spacing(0.5),
+        alignItems: 'center',
+    },
+}))
+
+function formatAmount(amount: string) {
+    const bn = new BigNumber(amount)
+    return Number.isNaN(bn.toNumber()) ? amount : trimZero(bn.toFixed(4))
+}
+
+function SummaryTypography(props: TypographyProps<'div'>) {
+    const { classes, cx } = useStyles({ size: 20 })
+    return <Typography {...props} component="div" className={cx(classes.summary, props.className)} />
+}
+
+interface Props extends TypographyProps<'div'> {
+    transaction: Transaction<ChainId, SchemaType>
+}
+export const FeedSummary = memo<Props>(function FeedSummary({ transaction, ...rest }) {
+    const { classes, cx } = useStyles({ size: 20 })
+    const owner = useFeedOwner()
+
+    const txType = transaction.type
+    if (!txType) return null
+
+    const otherAddress = isSameAddress(owner.address, transaction.from) ? transaction.to : transaction.from
+
+    const approvalSummaries = transaction.approveAssets?.map((asset, index) => {
+        return (
+            <Typography
+                key={`approval-${index}`}
+                component="div"
+                {...rest}
+                className={cx(classes.summary, rest.className)}>
+                {asset.amount === '0' ?
+                    <Trans>
+                        <AccountLabel address={asset.sender} /> unapproved <Label>{asset.symbol || asset.name}</Label>
+                    </Trans>
+                :   <Trans>
+                        <AccountLabel address={asset.sender} /> approved{' '}
+                        <Label>
+                            {formatAmount(asset.amount)} {asset.symbol || asset.name}
+                        </Label>
+                    </Trans>
+                }
+            </Typography>
+        )
+    })
+
+    // transfers can coexist with approvals
+    if (['trade', 'mint'].includes(txType) && transaction.assets.length === 2) {
+        const inAsset = transaction.assets.find((x) => x.direction === 'receive')
+        const outAsset = transaction.assets.find((x) => x.direction === 'send')
+        return (
+            <>
+                {inAsset && outAsset ?
+                    <SummaryTypography {...rest}>
+                        <Trans>
+                            <AccountLabel address={owner.address} />{' '}
+                            <Select value={txType} _trade="traded" _mint="minted" other="traded" />{' '}
+                            <Label>
+                                {formatAmount(inAsset.amount)} {inAsset.symbol || inAsset.name}
+                            </Label>{' '}
+                            for{' '}
+                            <Label>
+                                {formatAmount(outAsset.amount)} {outAsset.symbol || outAsset.name}
+                            </Label>
+                        </Trans>
+                    </SummaryTypography>
+                :   null}
+                {approvalSummaries}
+            </>
+        )
+    }
+    if (['burn', 'deposit', 'mint', 'receive', 'send', 'withdraw'].includes(txType)) {
+        return (
+            <>
+                {transaction.assets.map((asset, index) => (
+                    <SummaryTypography key={`burn-${index}`} {...rest}>
+                        <Trans>
+                            <AccountLabel address={owner.address} />{' '}
+                            <Select
+                                value={txType}
+                                _burn="burned"
+                                _deposit="deposited"
+                                _mint="minted"
+                                _receive="received"
+                                _send="sent"
+                                _withdraw="withdrawn"
+                            />{' '}
+                            <Label>
+                                {formatAmount(asset.amount)} {asset.symbol || asset.name}
+                            </Label>{' '}
+                        </Trans>
+                    </SummaryTypography>
+                ))}
+            </>
+        )
+    }
+
+    if (['deploy', 'execute'].includes(txType)) {
+        return (
+            <>
+                <SummaryTypography {...rest}>
+                    <Trans>
+                        <AccountLabel address={owner.address} />
+                        <Select value={txType} _deploy="deployed" _execute="executed" />
+                        <AccountLabel address={otherAddress} />
+                    </Trans>
+                </SummaryTypography>
+                {approvalSummaries}
+            </>
+        )
+    }
+
+    if (txType === 'approve') {
+        return approvalSummaries?.length ? approvalSummaries : (
+                <SummaryTypography {...rest}>
+                    <Trans>
+                        <AccountLabel address={owner.address} /> approved with <AccountLabel address={transaction.to} />
+                    </Trans>
+                </SummaryTypography>
+            )
+    }
+
+    return (
+        <SummaryTypography {...rest}>
+            <Trans>
+                <AccountLabel address={owner.address} /> interacted with <AccountLabel address={otherAddress} />
+            </Trans>
+        </SummaryTypography>
+    )
+})

packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/FinanceFeed.tsx

@@ -0,0 +1,66 @@
+import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { formatTimestamp } from '../components/share.js'
+import { type Transaction } from '@masknet/web3-shared-base'
+import { format as formatDateTime } from 'date-fns'
+import { memo, type HTMLProps } from 'react'
+import { NetworkIcon } from '@masknet/shared'
+import { NetworkPluginID } from '@masknet/shared-base'
+import { Typography } from '@mui/material'
+import { FeedSummary } from './FeedSummary.js'
+import { FinanceFeedDetailsModal } from '../modals/modals.js'
+import { useFeedOwner } from '../contexts/FeedOwnerContext.js'
+
+const useStyles = makeStyles()((theme) => ({
+    verbose: {},
+    inspectable: {
+        cursor: 'pointer',
+        padding: theme.spacing(1.5),
+        '&:hover': {
+            backgroundColor: theme.palette.maskColor.bg,
+        },
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing(1),
+    },
+    timestamp: {
+        fontSize: 14,
+        fontWeight: 400,
+        color: theme.palette.maskColor.third,
+    },
+}))
+
+export interface FinanceFeedProps extends HTMLProps<HTMLDivElement> {
+    transaction: Transaction<ChainId, SchemaType>
+    verbose?: boolean
+}
+export const FinanceFeed = memo<FinanceFeedProps>(function FinanceFeed({ transaction, verbose, className, ...rest }) {
+    const { classes, cx } = useStyles()
+    const feedOwner = useFeedOwner()
+    return (
+        <article
+            {...rest}
+            className={cx(className, verbose ? classes.verbose : classes.inspectable)}
+            onClick={() => {
+                if (verbose) return
+                FinanceFeedDetailsModal.open({
+                    transaction,
+                    feedOwner,
+                })
+            }}>
+            <div className={classes.header}>
+                <NetworkIcon pluginID={NetworkPluginID.PLUGIN_EVM} chainId={transaction.chainId} size={18} />
+                {transaction.timestamp ?
+                    <ShadowRootTooltip
+                        title={formatDateTime(new Date(transaction.timestamp), 'yyyy-MM-dd HH:mm:ss')}
+                        placement="right">
+                        <Typography className={classes.timestamp}>{formatTimestamp(transaction.timestamp)}</Typography>
+                    </ShadowRootTooltip>
+                :   null}
+            </div>
+            <FeedSummary transaction={transaction} mt={0.5} />
+        </article>
+    )
+})