refactor: migrate to zerion api

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

@@ -1,11 +1,12 @@
 import { Select, Trans } from '@lingui/macro'
-import { isSameAddress, type Transaction } from '@masknet/web3-shared-base'
+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 { formatAmount, type ChainId, type SchemaType } from '@masknet/web3-shared-evm'
+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: {
@@ -16,44 +17,130 @@ const useStyles = makeStyles<{ size: number }>()((theme) => ({
     },
 }))
 
-interface Props extends TypographyProps {
+function formatAmount(amount: string) {
+    return trimZero(new BigNumber(amount).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
+    }
+
     return (
-        <>
-            {transaction.assets.map((asset, index) => {
-                return (
-                    <Typography key={index} component="div" {...rest} className={cx(classes.summary, rest.className)}>
-                        <Select
-                            value={asset.direction}
-                            _send={
-                                <Trans>
-                                    <AccountLabel address={owner.address} />
-                                    {transaction.cateName}
-                                    <AccountLabel address={otherAddress} />
-                                </Trans>
-                            }
-                            other={
-                                <Trans>
-                                    <AccountLabel address={owner.address} />
-                                    {transaction.cateName}{' '}
-                                    <Label>
-                                        {formatAmount(asset.amount)} {asset.name}
-                                    </Label>{' '}
-                                    from
-                                    <AccountLabel address={otherAddress} />
-                                </Trans>
-                            }
-                        />
-                    </Typography>
-                )
-            })}
-        </>
+        <SummaryTypography {...rest}>
+            <Trans>
+                <AccountLabel address={owner.address} />
+                interacted with
+                <AccountLabel address={otherAddress} />
+            </Trans>
+        </SummaryTypography>
     )
 })

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

@@ -8,6 +8,8 @@ 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: {},
@@ -36,12 +38,17 @@ export interface FinanceFeedProps extends HTMLProps<HTMLDivElement> {
 }
 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} />

packages/plugins/RSS3/src/SiteAdaptor/FinanceFeeds/useFinanceFeeds.ts

@@ -1,4 +1,4 @@
-import { DeBankHistory } from '@masknet/web3-providers'
+import { Zerion } from '@masknet/web3-providers'
 import { skipToken, useInfiniteQuery } from '@tanstack/react-query'
 
 interface Options {
@@ -12,7 +12,7 @@ export function useFinanceFeeds({ address }: Options) {
         queryFn:
             address ?
                 async ({ pageParam }) => {
-                    return DeBankHistory.getAllTransactions(address, { indicator: pageParam })
+                    return Zerion.getTransactions(address, { indicator: pageParam })
                 }
             :   skipToken,
         getNextPageParam: (lp) => lp.nextIndicator,

packages/plugins/RSS3/src/SiteAdaptor/modals/DetailsModal/TxDetails.tsx

@@ -84,7 +84,7 @@ export function TxDetails({ feed }: TxDetailsProps) {
         const formatted = formatDateTime(feed.timestamp * 1000, 'MMM dd, yyyy HH:mm:ss')
         if (distance > ONE_WEEK) return formatted
         const timeAgo = formatTimestamp(feed.timestamp)
-        return `${formatTimestamp} ${timeAgo}`
+        return timeAgo
     }, [feed.timestamp])
 
     return (

packages/plugins/RSS3/src/SiteAdaptor/modals/FinanceFeedDetailsModal/DetailDialog.tsx

@@ -0,0 +1,47 @@
+import { InjectedDialog, type InjectedDialogProps } from '@masknet/shared'
+import { makeStyles } from '@masknet/theme'
+import { DialogContent } from '@mui/material'
+import { type PropsWithChildren } from 'react'
+import { useRSS3Trans } from '../../../locales/index.js'
+import { FinanceFeed, type FinanceFeedProps } from '../../FinanceFeeds/FinanceFeed.js'
+import { TxDetails } from './TxDetails.js'
+
+const useStyles = makeStyles()((theme) => ({
+    detailsDialog: {
+        width: 600,
+        minHeight: 400,
+        maxHeight: 620,
+        backgroundImage: 'none',
+    },
+    content: {
+        display: 'flex',
+        flexDirection: 'column',
+        paddingBottom: theme.spacing(3),
+    },
+}))
+
+interface FeedDetailsDialogProps
+    extends PropsWithChildren<InjectedDialogProps>,
+        Pick<FinanceFeedProps, 'transaction'> {}
+
+export function FinanceFeedDetailsDialog({ transaction, onClose, ...rest }: FeedDetailsDialogProps) {
+    const t = useRSS3Trans()
+    const { classes } = useStyles()
+
+    return (
+        <InjectedDialog
+            classes={{
+                paper: classes.detailsDialog,
+            }}
+            {...rest}
+            title={t.details()}
+            onClose={() => {
+                onClose?.()
+            }}>
+            <DialogContent className={classes.content}>
+                <FinanceFeed transaction={transaction} verbose />
+                <TxDetails transaction={transaction} />
+            </DialogContent>
+        </InjectedDialog>
+    )
+}