From 2ddbd6347d9f0b11eac3ae5ed1b04966cf65877d Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Thu, 17 Feb 2022 11:15:35 +0800
Subject: [PATCH 1/5] fix(rss3): support cheers.io domain as well

---
 packages/mask/src/plugins/Wallet/services/domain.ts          | 3 ++-
 .../plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx  | 4 ++--
 packages/plugins/RSS3/src/SNSAdaptor/styles/tailwind.css     | 5 -----
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/mask/src/plugins/Wallet/services/domain.ts b/packages/mask/src/plugins/Wallet/services/domain.ts
index 5074e6e8bf5d..a9579ea96133 100644
--- a/packages/mask/src/plugins/Wallet/services/domain.ts
+++ b/packages/mask/src/plugins/Wallet/services/domain.ts
@@ -8,7 +8,8 @@ import { PluginNFTAvatarRPC } from '../../Avatar/messages'
 
 const ENS_RE = /\S{1,256}\.(eth|kred|xyz|luxe)\b/
 const ADDRESS_FULL = /0x\w+/
-const RSS3_URL_RE = /https?:\/\/(?<name>[\w.]+)\.rss3\.bio/
+// xxx.cheers.bio xxx.rss3.bio
+const RSS3_URL_RE = /https?:\/\/(?<name>[\w.]+)\.(rss3|cheers)\.bio/
 const RSS3_RNS_RE = /(?<name>[\w.]+)\.rss3/
 
 function isValidAddress(address: string) {
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx b/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
index 259d5d0871bb..7cc989e793e7 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
@@ -23,12 +23,12 @@ export const DonationCard = ({ imageUrl, name, contribCount, contribDetails }: D
                     {name}
                 </Typography>
                 <div className="flex flex-row w-full overflow-y-auto gap-x-6">
-                    <div className="text-donation">
+                    <div>
                         <Typography variant="subtitle1">{contribCount}</Typography>
                         <Typography variant="subtitle1">Contrib</Typography>
                     </div>
                     {contribDetails.map((contrib, i) => (
-                        <div key={i} className="text-donation">
+                        <div key={i}>
                             <Typography variant="subtitle1">{contrib.amount}</Typography>
                             <Typography variant="subtitle1">{contrib.token}</Typography>
                         </div>
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/styles/tailwind.css b/packages/plugins/RSS3/src/SNSAdaptor/styles/tailwind.css
index d5df864098ea..574f9f8135b2 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/styles/tailwind.css
+++ b/packages/plugins/RSS3/src/SNSAdaptor/styles/tailwind.css
@@ -1804,11 +1804,6 @@ video {
     color: rgba(64, 210, 47, var(--tw-text-opacity));
 }
 
-.text-donation {
-    --tw-text-opacity: 1;
-    color: rgba(17, 188, 146, var(--tw-text-opacity));
-}
-
 .text-footprint {
     --tw-text-opacity: 1;
     color: rgba(255, 180, 38, var(--tw-text-opacity));

From 19ba80e3fc7289ae9668ef8bc0d21babc4631b9e Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Thu, 17 Feb 2022 13:18:18 +0800
Subject: [PATCH 2/5] fix(rss3): new design for donations page

---
 packages/plugins/RSS3/package.json            |   1 +
 .../SNSAdaptor/components/DonationCard.tsx    | 105 ++++++++++++++----
 .../RSS3/src/SNSAdaptor/hooks/useDonations.ts |   3 +-
 .../src/SNSAdaptor/pages/DonationsPage.tsx    |  62 +++++++----
 pnpm-lock.yaml                                |   2 +
 5 files changed, 129 insertions(+), 44 deletions(-)

diff --git a/packages/plugins/RSS3/package.json b/packages/plugins/RSS3/package.json
index d2651e5a3d85..147188bb2cb2 100644
--- a/packages/plugins/RSS3/package.json
+++ b/packages/plugins/RSS3/package.json
@@ -13,6 +13,7 @@
     "@masknet/web3-shared-base": "workspace:*",
     "@masknet/web3-shared-evm": "workspace:*",
     "bignumber.js": "^9.0.2",
+    "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
     "react-use": "^17.3.2",
     "urlcat": "^2.0.4"
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx b/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
index 7cc989e793e7..a9705e2e8c65 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
@@ -1,6 +1,9 @@
+import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { Typography } from '@mui/material'
+import classnames from 'classnames'
+import { HTMLProps, Fragment } from 'react'
 
-export interface DonationCardProps {
+export interface DonationCardProps extends HTMLProps<HTMLDivElement> {
     imageUrl: string
     name: string
     contribCount: number
@@ -10,31 +13,87 @@ export interface DonationCardProps {
     }[]
 }
 
-export const DonationCard = ({ imageUrl, name, contribCount, contribDetails }: DonationCardProps) => {
+const useStyles = makeStyles()((theme) => ({
+    card: {
+        borderRadius: 8,
+        display: 'flex',
+        flexDirection: 'row',
+        backgroundColor: MaskColorVar.twitterBg,
+        padding: theme.spacing(1),
+        flexGrow: 1,
+        alignItems: 'stretch',
+    },
+    cover: {
+        flexShrink: 1,
+        height: 90,
+        width: 90,
+        borderRadius: 8,
+    },
+    title: {
+        color: theme.palette.text.primary,
+        fontSize: 16,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    info: {
+        flexGrow: 1,
+        marginLeft: theme.spacing(1),
+        fontSize: 16,
+        display: 'flex',
+        overflow: 'hidden',
+        flexDirection: 'column',
+        justifyContent: 'space-around',
+    },
+    infoRow: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    infoLabel: {
+        color: theme.palette.text.primary,
+    },
+    infoValue: {
+        color: theme.palette.text.secondary,
+    },
+}))
+
+export const DonationCard = ({
+    imageUrl,
+    name,
+    contribCount,
+    contribDetails,
+    className,
+    ...rest
+}: DonationCardProps) => {
+    const { classes } = useStyles()
     return (
-        <div className="flex flex-row items-center justify-start w-full border-2 rounded cursor-pointer text-body-text bg-body-bg border-donation-bg">
-            <img
-                className="flex-shrink m-0.5 w-32 md:w-64 h-32 bg-cover bg-center bg-no-repeat rounded object-cover"
-                src={imageUrl}
-                alt={name}
-            />
-            <div className="flex-1 w-0 px-8 flex flex-col justify-around">
-                <Typography variant="h6" color="textPrimary" fontWeight={600} className="w-full truncate">
-                    {name}
-                </Typography>
-                <div className="flex flex-row w-full overflow-y-auto gap-x-6">
-                    <div>
-                        <Typography variant="subtitle1">{contribCount}</Typography>
-                        <Typography variant="subtitle1">Contrib</Typography>
-                    </div>
+        <div className={classnames(classes.card, className)} {...rest}>
+            <img className={classes.cover} src={imageUrl} alt={name} />
+            <dl className={classes.info}>
+                <dt className={classes.infoRow}>
+                    <Typography
+                        variant="h6"
+                        color="textPrimary"
+                        fontWeight={600}
+                        className={classes.title}
+                        title={name}>
+                        {name}
+                    </Typography>
+                </dt>
+                <dd className={classes.infoRow}>
+                    <span className={classes.infoLabel}>{contribCount}</span>
+                    <span className={classes.infoValue}> Contrib</span>
+                </dd>
+                <dd className={classes.infoRow}>
                     {contribDetails.map((contrib, i) => (
-                        <div key={i}>
-                            <Typography variant="subtitle1">{contrib.amount}</Typography>
-                            <Typography variant="subtitle1">{contrib.token}</Typography>
-                        </div>
+                        <Fragment key={i}>
+                            <span className={classes.infoLabel}>{contrib.amount}</span>
+                            <span className={classes.infoValue}> {contrib.token} </span>
+                        </Fragment>
                     ))}
-                </div>
-            </div>
+                </dd>
+            </dl>
         </div>
     )
 }
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/hooks/useDonations.ts b/packages/plugins/RSS3/src/SNSAdaptor/hooks/useDonations.ts
index 29f7f2f3ef7b..39c286bd6628 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/hooks/useDonations.ts
+++ b/packages/plugins/RSS3/src/SNSAdaptor/hooks/useDonations.ts
@@ -1,9 +1,10 @@
+import { EMPTY_LIST } from '@masknet/web3-shared-evm'
 import { useAsync } from 'react-use'
 import { PluginProfileRPC } from '../../messages'
 
 export function useDonations(address: string) {
     return useAsync(async () => {
         const response = await PluginProfileRPC.getDonations(address)
-        return response.status ? response.assets : []
+        return response.status ? response.assets : EMPTY_LIST
     }, [address])
 }
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/pages/DonationsPage.tsx b/packages/plugins/RSS3/src/SNSAdaptor/pages/DonationsPage.tsx
index 10c471c6e880..7dfe31f91686 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/pages/DonationsPage.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/pages/DonationsPage.tsx
@@ -1,7 +1,7 @@
 import urlcat from 'urlcat'
 import { makeStyles } from '@masknet/theme'
-import { Box, CircularProgress, Link, Typography } from '@mui/material'
-import type { AddressName } from '@masknet/web3-shared-evm'
+import { Box, CircularProgress, Link, List, ListItem, Typography } from '@mui/material'
+import { AddressName, EMPTY_LIST } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../locales'
 import type { GeneralAssetWithTags } from '../../types'
 import { RSS3_DEFAULT_IMAGE } from '../../constants'
@@ -19,10 +19,30 @@ const getDonationLink = (label: string, donation: GeneralAssetWithTags) => {
 }
 
 const useStyles = makeStyles()((theme) => ({
+    statusBox: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: theme.spacing(6),
+    },
+    list: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        gridGap: theme.spacing(2),
+    },
+    listItem: {
+        overflow: 'auto',
+        padding: 0,
+    },
+    donationCard: {
+        width: '100%',
+        overflow: 'auto',
+    },
     address: {
         color: theme.palette.primary.main,
     },
     link: {
+        width: '100%',
         '&:hover': {
             textDecoration: 'none',
         },
@@ -36,42 +56,44 @@ export interface DonationPageProps {
 export function DonationPage(props: DonationPageProps) {
     const { addressName } = props
     const { classes } = useStyles()
-    const { value: donations = [], loading } = useDonations(addressName?.resolvedAddress ?? '')
+    const { value: donations = EMPTY_LIST, loading } = useDonations(addressName?.resolvedAddress ?? '')
     const t = useI18N()
 
     if (!addressName) return null
 
     if (loading) {
         return (
-            <Box display="flex" alignItems="center" justifyContent="center">
+            <Box className={classes.statusBox}>
                 <CircularProgress />
             </Box>
         )
     }
     if (!donations.length) {
         return (
-            <Box display="flex" alignItems="center" justifyContent="center">
+            <Box className={classes.statusBox}>
                 <Typography color="textPrimary">No data.</Typography>
             </Box>
         )
     }
     return (
-        <section className="grid grid-cols-1 gap-4 py-4">
+        <List className={classes.list}>
             {donations.map((donation) => (
-                <Link
-                    className={classes.link}
-                    href={getDonationLink(addressName.label, donation)}
-                    key={donation.id}
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    <DonationCard
-                        imageUrl={donation.info.image_preview_url || RSS3_DEFAULT_IMAGE}
-                        name={donation.info.title || t.inactive_project()}
-                        contribCount={donation.info.total_contribs || 0}
-                        contribDetails={donation.info.token_contribs || []}
-                    />
-                </Link>
+                <ListItem key={donation.id} className={classes.listItem}>
+                    <Link
+                        className={classes.link}
+                        href={getDonationLink(addressName.label, donation)}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        <DonationCard
+                            className={classes.donationCard}
+                            imageUrl={donation.info.image_preview_url || RSS3_DEFAULT_IMAGE}
+                            name={donation.info.title || t.inactive_project()}
+                            contribCount={donation.info.total_contribs || 0}
+                            contribDetails={donation.info.token_contribs || []}
+                        />
+                    </Link>
+                </ListItem>
             ))}
-        </section>
+        </List>
     )
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee57a96cc1c8..06fae059fff0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -745,6 +745,7 @@ importers:
       '@masknet/web3-shared-base': workspace:*
       '@masknet/web3-shared-evm': workspace:*
       bignumber.js: ^9.0.2
+      classnames: ^2.3.1
       date-fns: ^2.28.0
       react-use: ^17.3.2
       urlcat: ^2.0.4
@@ -758,6 +759,7 @@ importers:
       '@masknet/web3-shared-base': link:../../web3-shared/base
       '@masknet/web3-shared-evm': link:../../web3-shared/evm
       bignumber.js: 9.0.2
+      classnames: 2.3.1
       date-fns: 2.28.0
       react-use: 17.3.2_757a802188413a36d4f24237d13b8e90
       urlcat: 2.0.4

From 0006bbc9f4b5a0b220414b5249c49157a3299084 Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Thu, 17 Feb 2022 17:55:36 +0800
Subject: [PATCH 3/5] fix: ajust ui

---
 .../plugins/RSS3/src/SNSAdaptor/TabCard.tsx   | 53 +++++++++++++++++++
 .../SNSAdaptor/components/DonationCard.tsx    |  2 +
 .../SNSAdaptor/components/FootprintCard.tsx   |  2 +-
 .../src/SNSAdaptor/components/StatusBox.tsx   | 37 +++++++++++++
 .../src/SNSAdaptor/components/TabCard.tsx     | 33 ------------
 .../RSS3/src/SNSAdaptor/components/index.ts   |  1 +
 .../plugins/RSS3/src/SNSAdaptor/index.tsx     |  2 +-
 .../src/SNSAdaptor/pages/DonationsPage.tsx    | 39 +++++---------
 .../src/SNSAdaptor/pages/FootprintPage.tsx    | 42 +++++----------
 9 files changed, 121 insertions(+), 90 deletions(-)
 create mode 100644 packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
 create mode 100644 packages/plugins/RSS3/src/SNSAdaptor/components/StatusBox.tsx
 delete mode 100644 packages/plugins/RSS3/src/SNSAdaptor/components/TabCard.tsx

diff --git a/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx b/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
new file mode 100644
index 000000000000..b0467afae233
--- /dev/null
+++ b/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
@@ -0,0 +1,53 @@
+import { AddressViewer } from '@masknet/shared'
+import { AddressName, AddressNameType, EMPTY_LIST } from '@masknet/web3-shared-evm'
+import { Box, Typography } from '@mui/material'
+import { useDonations, useFootprints } from './hooks'
+import { DonationPage, FootprintPage } from './pages'
+
+export enum TabCardType {
+    Donation = 1,
+    Footprint = 2,
+}
+
+export interface TabCardProps {
+    type: TabCardType
+    addressNames: AddressName[]
+}
+
+export function TabCard({ type, addressNames }: TabCardProps) {
+    const addressName = addressNames.find((x) => x.type === AddressNameType.RSS3)
+    const userAddress = addressName?.resolvedAddress || ''
+    const { value: donations = EMPTY_LIST, loading: loadingDonations } = useDonations(userAddress)
+    const { value: footprints = EMPTY_LIST, loading: loadingFootprints } = useFootprints(userAddress)
+
+    if (!addressName) return null
+
+    const isDonation = type === TabCardType.Donation
+
+    const summary =
+        isDonation && !loadingDonations ? (
+            <Typography color="textPrimary" component="span">
+                Total {donations.length} Grants
+            </Typography>
+        ) : null
+
+    return (
+        <>
+            <link rel="stylesheet" href={new URL('./styles/tailwind.css', import.meta.url).toString()} />
+            <Box display="flex" alignItems="center" justifyContent="space-between">
+                <div>{summary}</div>
+                <AddressViewer addressName={addressName} />
+            </Box>
+            {isDonation ? (
+                <DonationPage donations={donations} loading={loadingDonations} addressLabel={addressName.label} />
+            ) : (
+                <FootprintPage
+                    address={userAddress}
+                    loading={loadingFootprints}
+                    footprints={footprints}
+                    addressLabel={addressName.label}
+                />
+            )}
+        </>
+    )
+}
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx b/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
index a9705e2e8c65..19125c848569 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
@@ -28,6 +28,7 @@ const useStyles = makeStyles()((theme) => ({
         height: 90,
         width: 90,
         borderRadius: 8,
+        objectFit: 'cover',
     },
     title: {
         color: theme.palette.text.primary,
@@ -44,6 +45,7 @@ const useStyles = makeStyles()((theme) => ({
         overflow: 'hidden',
         flexDirection: 'column',
         justifyContent: 'space-around',
+        fontFamily: '-apple-system,system-ui,sans-serif',
     },
     infoRow: {
         whiteSpace: 'nowrap',
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/components/FootprintCard.tsx b/packages/plugins/RSS3/src/SNSAdaptor/components/FootprintCard.tsx
index 2e92ef5e37ef..d4532664c006 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/components/FootprintCard.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/components/FootprintCard.tsx
@@ -53,7 +53,7 @@ export const FootprintCard = ({ imageUrl, startDate, endDate, city, country, act
                     </Typography>
                 </div>
                 <div className="flex flex-row gap-2 font-medium">
-                    <Typography variant="body1" className="capitalize" style={{ color: 'rgba(255, 180, 38, 1)' }}>
+                    <Typography variant="body1" className="capitalize" style={{ color: 'rgb(255, 180, 38)' }}>
                         {t.attended()}
                     </Typography>
                     <Typography variant="body1" color="textPrimary">
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/components/StatusBox.tsx b/packages/plugins/RSS3/src/SNSAdaptor/components/StatusBox.tsx
new file mode 100644
index 000000000000..e185c4a49e7d
--- /dev/null
+++ b/packages/plugins/RSS3/src/SNSAdaptor/components/StatusBox.tsx
@@ -0,0 +1,37 @@
+import { makeStyles } from '@masknet/theme'
+import { Box, CircularProgress, Typography } from '@mui/material'
+import type { FC } from 'react'
+
+interface Props {
+    loading?: boolean
+    empty?: boolean
+}
+
+const useStyles = makeStyles()((theme) => ({
+    statusBox: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: theme.spacing(6),
+    },
+}))
+
+export const StatusBox: FC<Props> = ({ loading, empty }) => {
+    const { classes } = useStyles()
+    if (loading) {
+        return (
+            <Box className={classes.statusBox}>
+                <CircularProgress />
+            </Box>
+        )
+    }
+
+    if (empty) {
+        return (
+            <Box className={classes.statusBox}>
+                <Typography color="textPrimary">No data.</Typography>
+            </Box>
+        )
+    }
+    return null
+}
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/components/TabCard.tsx b/packages/plugins/RSS3/src/SNSAdaptor/components/TabCard.tsx
deleted file mode 100644
index 4cbe6beff762..000000000000
--- a/packages/plugins/RSS3/src/SNSAdaptor/components/TabCard.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { AddressViewer } from '@masknet/shared'
-import { AddressName, AddressNameType } from '@masknet/web3-shared-evm'
-import { Box } from '@mui/material'
-import { DonationPage, FootprintPage } from '../pages'
-
-export enum TabCardType {
-    Donation = 1,
-    Footprint = 2,
-}
-
-export interface TabCardProps {
-    type: TabCardType
-    addressNames: AddressName[]
-}
-
-export function TabCard({ type, addressNames }: TabCardProps) {
-    const addressNameRSS3 = addressNames.find((x) => x.type === AddressNameType.RSS3)
-    if (!addressNameRSS3) return null
-    return (
-        <>
-            <link rel="stylesheet" href={new URL('../styles/tailwind.css', import.meta.url).toString()} />
-            <Box display="flex" alignItems="center" justifyContent="space-between">
-                <div />
-                <AddressViewer addressName={addressNameRSS3} />
-            </Box>
-            {type === TabCardType.Donation ? (
-                <DonationPage addressName={addressNameRSS3} />
-            ) : (
-                <FootprintPage addressName={addressNameRSS3} />
-            )}
-        </>
-    )
-}
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/components/index.ts b/packages/plugins/RSS3/src/SNSAdaptor/components/index.ts
index 98b2b93bf9b3..f21e4eff130f 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/components/index.ts
+++ b/packages/plugins/RSS3/src/SNSAdaptor/components/index.ts
@@ -1,3 +1,4 @@
 export * from './DonationCard'
 export * from './FootprintCard'
 export * from './ImageHolder'
+export * from './StatusBox'
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/index.tsx b/packages/plugins/RSS3/src/SNSAdaptor/index.tsx
index 64fd03412bfc..4df98813f5bf 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/index.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/index.tsx
@@ -2,7 +2,7 @@ import type { Plugin } from '@masknet/plugin-infra'
 import { AddressName, AddressNameType } from '@masknet/web3-shared-evm'
 import { base } from '../base'
 import { PLUGIN_ID } from '../constants'
-import { TabCard, TabCardType } from './components/TabCard'
+import { TabCard, TabCardType } from './TabCard'
 
 function addressNameSorter(a: Plugin.SNSAdaptor.ProfileAddress, z: Plugin.SNSAdaptor.ProfileAddress) {
     if (a.type === AddressNameType.RSS3) return -1
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/pages/DonationsPage.tsx b/packages/plugins/RSS3/src/SNSAdaptor/pages/DonationsPage.tsx
index 7dfe31f91686..5efae3ee8e26 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/pages/DonationsPage.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/pages/DonationsPage.tsx
@@ -1,12 +1,10 @@
-import urlcat from 'urlcat'
 import { makeStyles } from '@masknet/theme'
-import { Box, CircularProgress, Link, List, ListItem, Typography } from '@mui/material'
-import { AddressName, EMPTY_LIST } from '@masknet/web3-shared-evm'
-import { useI18N } from '../../locales'
-import type { GeneralAssetWithTags } from '../../types'
+import { Link, List, ListItem } from '@mui/material'
+import urlcat from 'urlcat'
 import { RSS3_DEFAULT_IMAGE } from '../../constants'
-import { DonationCard } from '../components'
-import { useDonations } from '../hooks'
+import { useI18N } from '../../locales'
+import type { GeneralAsset, GeneralAssetWithTags } from '../../types'
+import { DonationCard, StatusBox } from '../components'
 
 const getDonationLink = (label: string, donation: GeneralAssetWithTags) => {
     const { platform, identity, id, type } = donation
@@ -50,30 +48,17 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface DonationPageProps {
-    addressName?: AddressName
+    donations: GeneralAsset[]
+    loading?: boolean
+    addressLabel: string
 }
 
-export function DonationPage(props: DonationPageProps) {
-    const { addressName } = props
+export function DonationPage({ donations, loading, addressLabel }: DonationPageProps) {
     const { classes } = useStyles()
-    const { value: donations = EMPTY_LIST, loading } = useDonations(addressName?.resolvedAddress ?? '')
     const t = useI18N()
 
-    if (!addressName) return null
-
-    if (loading) {
-        return (
-            <Box className={classes.statusBox}>
-                <CircularProgress />
-            </Box>
-        )
-    }
-    if (!donations.length) {
-        return (
-            <Box className={classes.statusBox}>
-                <Typography color="textPrimary">No data.</Typography>
-            </Box>
-        )
+    if (loading || !donations.length) {
+        return <StatusBox loading={loading} empty={!donations.length} />
     }
     return (
         <List className={classes.list}>
@@ -81,7 +66,7 @@ export function DonationPage(props: DonationPageProps) {
                 <ListItem key={donation.id} className={classes.listItem}>
                     <Link
                         className={classes.link}
-                        href={getDonationLink(addressName.label, donation)}
+                        href={getDonationLink(addressLabel, donation)}
                         target="_blank"
                         rel="noopener noreferrer">
                         <DonationCard
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/pages/FootprintPage.tsx b/packages/plugins/RSS3/src/SNSAdaptor/pages/FootprintPage.tsx
index 57230e55b68e..fca84a1d89e1 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/pages/FootprintPage.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/pages/FootprintPage.tsx
@@ -1,11 +1,10 @@
-import urlcat from 'urlcat'
 import { makeStyles } from '@masknet/theme'
-import type { AddressName } from '@masknet/web3-shared-evm'
-import { Box, CircularProgress, Link, Typography } from '@mui/material'
+import { Link } from '@mui/material'
+import urlcat from 'urlcat'
 import { RSS3_DEFAULT_IMAGE } from '../../constants'
-import type { GeneralAssetWithTags } from '../../types'
-import { FootprintCard } from '../components'
-import { useFootprints, useRss3Profile } from '../hooks'
+import type { GeneralAsset, GeneralAssetWithTags } from '../../types'
+import { FootprintCard, StatusBox } from '../components'
+import { useRss3Profile } from '../hooks'
 
 const useStyles = makeStyles()((theme) => ({
     address: {
@@ -29,32 +28,19 @@ const getFootprintLink = (label: string, footprint: GeneralAssetWithTags) => {
 }
 
 export interface FootprintPageProps {
-    addressName?: AddressName
+    footprints: GeneralAsset[]
+    loading?: boolean
+    addressLabel: string
+    address?: string
 }
 
-export function FootprintPage(props: FootprintPageProps) {
-    const { addressName } = props
+export function FootprintPage({ footprints, address, loading, addressLabel }: FootprintPageProps) {
     const { classes } = useStyles()
-    const { value: profile } = useRss3Profile(addressName?.resolvedAddress ?? '')
+    const { value: profile } = useRss3Profile(address || '')
     const username = profile?.name
 
-    const { value: footprints = [], loading } = useFootprints(addressName?.resolvedAddress ?? '')
-
-    if (!addressName) return null
-
-    if (loading) {
-        return (
-            <Box display="flex" alignItems="center" justifyContent="center">
-                <CircularProgress />
-            </Box>
-        )
-    }
-    if (!footprints.length) {
-        return (
-            <Box display="flex" alignItems="center" justifyContent="center">
-                <Typography color="textPrimary">No data.</Typography>
-            </Box>
-        )
+    if (loading || !footprints.length) {
+        return <StatusBox loading={loading} empty={!footprints.length} />
     }
 
     return (
@@ -62,7 +48,7 @@ export function FootprintPage(props: FootprintPageProps) {
             {footprints.map((footprint) => (
                 <Link
                     className={classes.link}
-                    href={getFootprintLink(addressName.label, footprint)}
+                    href={getFootprintLink(addressLabel, footprint)}
                     key={footprint.id}
                     target="_blank"
                     rel="noopener noreferrer">

From 2f26e8a7342f0460cd1f64676f282cf60ac7bb84 Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Fri, 18 Feb 2022 15:48:59 +0800
Subject: [PATCH 4/5] fixup! fix(rss3): new design for donations page

---
 packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx            | 6 +++++-
 .../plugins/RSS3/src/SNSAdaptor/components/StatusBox.tsx    | 4 +++-
 packages/plugins/RSS3/src/locales/en-US.json                | 4 +++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx b/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
index b0467afae233..85410a4a3bc9 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
@@ -1,6 +1,7 @@
 import { AddressViewer } from '@masknet/shared'
 import { AddressName, AddressNameType, EMPTY_LIST } from '@masknet/web3-shared-evm'
 import { Box, Typography } from '@mui/material'
+import { useI18N } from '../locales'
 import { useDonations, useFootprints } from './hooks'
 import { DonationPage, FootprintPage } from './pages'
 
@@ -15,6 +16,7 @@ export interface TabCardProps {
 }
 
 export function TabCard({ type, addressNames }: TabCardProps) {
+    const t = useI18N()
     const addressName = addressNames.find((x) => x.type === AddressNameType.RSS3)
     const userAddress = addressName?.resolvedAddress || ''
     const { value: donations = EMPTY_LIST, loading: loadingDonations } = useDonations(userAddress)
@@ -27,7 +29,9 @@ export function TabCard({ type, addressNames }: TabCardProps) {
     const summary =
         isDonation && !loadingDonations ? (
             <Typography color="textPrimary" component="span">
-                Total {donations.length} Grants
+                {t.total_grants({
+                    count: donations.length,
+                })}
             </Typography>
         ) : null
 
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/components/StatusBox.tsx b/packages/plugins/RSS3/src/SNSAdaptor/components/StatusBox.tsx
index e185c4a49e7d..ddf44b0daf33 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/components/StatusBox.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/components/StatusBox.tsx
@@ -1,6 +1,7 @@
 import { makeStyles } from '@masknet/theme'
 import { Box, CircularProgress, Typography } from '@mui/material'
 import type { FC } from 'react'
+import { useI18N } from '../../locales'
 
 interface Props {
     loading?: boolean
@@ -18,6 +19,7 @@ const useStyles = makeStyles()((theme) => ({
 
 export const StatusBox: FC<Props> = ({ loading, empty }) => {
     const { classes } = useStyles()
+    const t = useI18N()
     if (loading) {
         return (
             <Box className={classes.statusBox}>
@@ -29,7 +31,7 @@ export const StatusBox: FC<Props> = ({ loading, empty }) => {
     if (empty) {
         return (
             <Box className={classes.statusBox}>
-                <Typography color="textPrimary">No data.</Typography>
+                <Typography color="textPrimary">{t.no_data()}</Typography>
             </Box>
         )
     }
diff --git a/packages/plugins/RSS3/src/locales/en-US.json b/packages/plugins/RSS3/src/locales/en-US.json
index c23acd282eb1..6ac93b454708 100644
--- a/packages/plugins/RSS3/src/locales/en-US.json
+++ b/packages/plugins/RSS3/src/locales/en-US.json
@@ -1,5 +1,7 @@
 {
     "inactive_project": "Inactive Project",
     "no_activity_time": "No activity time",
-    "attended": "attended"
+    "attended": "attended",
+    "no_data": "No data",
+    "total_grants": "Total {{count}} Grants"
 }

From 2894dab6cc307fd67973a7b48ad6be686e87c2a0 Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Fri, 18 Feb 2022 17:28:46 +0800
Subject: [PATCH 5/5] fixup! fix: ajust ui

---
 packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx b/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
index 85410a4a3bc9..ff077de38a14 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
@@ -30,7 +30,7 @@ export function TabCard({ type, addressNames }: TabCardProps) {
         isDonation && !loadingDonations ? (
             <Typography color="textPrimary" component="span">
                 {t.total_grants({
-                    count: donations.length,
+                    count: donations.length.toString(),
                 })}
             </Typography>
         ) : null