feat(twitter): add an NFT tab in profile page

packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx

@@ -51,7 +51,7 @@ export const CollectibleList = memo(() => {
         value = { collectibles: [], hasNextPage: false },
         loading: collectiblesLoading,
         error: collectiblesError,
-    } = useCollectibles(account, provider, page, 20)
+    } = useCollectibles(account, chainId, provider, page, 20)
 
     const { collectibles = [], hasNextPage } = value
 

packages/maskbook/package.json

@@ -65,6 +65,7 @@
     "buffer": "^6.0.3",
     "classnames": "^2.3.1",
     "clipboard-polyfill": "^3.0.3",
+    "color": "^4.0.0",
     "crypto-browserify": "^3.12.0",
     "d3": "^5.16.0",
     "date-fns": "^2.23.0",

packages/maskbook/src/components/InjectedComponents/EnhancedProfile.tsx

@@ -0,0 +1,50 @@
+import { useStylesExtends } from '@masknet/shared'
+import { getMaskColor, makeStyles } from '@masknet/theme'
+import { useState, useEffect } from 'react'
+import { CollectibleListAddress } from '../../extension/options-page/DashboardComponents/CollectibleList'
+import { useEthereumAddress } from '../../social-network-adaptor/twitter.com/injection/useEthereumName'
+import { MaskMessage } from '../../utils'
+import { useLocationChange } from '../../utils/hooks/useLocationChange'
+
+const useStyles = makeStyles()((theme) => ({
+    text: {
+        paddingTop: 36,
+        paddingBottom: 36,
+        '& > p': {
+            color: getMaskColor(theme).textPrimary,
+        },
+    },
+    button: {},
+}))
+
+interface EnhancedProfileaPageProps extends withClasses<'text' | 'button'> {
+    bioDescription: string
+    nickname: string
+    twitterId: string
+    onUpdated: () => void
+}
+
+export function EnhancedProfileaPage(props: EnhancedProfileaPageProps) {
+    const [show, setShow] = useState(false)
+    const classes = useStylesExtends(useStyles(), props)
+    const { bioDescription, nickname, twitterId, onUpdated } = props
+
+    useLocationChange(() => {
+        MaskMessage.events.profileNFTsTabUpdated.sendToLocal('reset')
+    })
+
+    useEffect(() => {
+        return MaskMessage.events.profileNFTsTabUpdated.on((data) => {
+            onUpdated()
+        })
+    }, [])
+
+    useEffect(() => {
+        return MaskMessage.events.profileNFTsPageUpdated.on((data) => {
+            setShow(data.show)
+        })
+    }, [])
+
+    const resolvedAddress = useEthereumAddress(nickname, twitterId, bioDescription)
+    return <>{show ? <CollectibleListAddress classes={classes} address={resolvedAddress ?? ''} /> : null}</>
+}

packages/maskbook/src/components/InjectedComponents/EnhancedProfileTab.tsx

@@ -0,0 +1,45 @@
+import classnames from 'classnames'
+import { ReactElement, useCallback, useEffect, useState } from 'react'
+
+import { MaskMessage } from '../../utils'
+
+export interface EnhancedProfileTabProps extends withClasses<'tab' | 'button' | 'selected'> {
+    clear(): void
+    reset(): void
+    children?: ReactElement
+    // Required! This component don't have it own style.
+    classes: Record<'tab' | 'button' | 'selected', string>
+}
+
+export function EnhancedProfileTab(props: EnhancedProfileTabProps) {
+    const { reset, clear, children, classes } = props
+    const [active, setActive] = useState(false)
+
+    const onClose = () => {
+        setActive(false)
+        MaskMessage.events.profileNFTsPageUpdated.sendToLocal({ show: false })
+        reset()
+    }
+    const onOpen = () => {
+        MaskMessage.events.profileNFTsPageUpdated.sendToLocal({ show: true })
+        setActive(true)
+    }
+
+    useEffect(() => {
+        return MaskMessage.events.profileNFTsTabUpdated.on(onClose)
+    }, [])
+
+    const onClick = useCallback(() => {
+        onOpen()
+        clear()
+    }, [clear, onOpen])
+
+    return (
+        <div key="nfts" className={classes.tab}>
+            <div className={classnames(classes.button, active ? classes.selected : '')} onClick={onClick}>
+                NFTs
+                {active && children ? children : null}
+            </div>
+        </div>
+    )
+}

packages/maskbook/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx

@@ -36,19 +36,22 @@ const useStyles = makeStyles((theme) => ({
 
 export interface CollectibleCardProps {
     provider: CollectibleProvider
-    wallet: Wallet
+    wallet?: Wallet
     token: ERC721TokenAssetDetailed | ERC1155TokenAssetDetailed
+    readonly?: boolean
 }
 
 export function CollectibleCard(props: CollectibleCardProps) {
-    const { wallet, token, provider } = props
+    const { wallet, token, provider, readonly } = props
     const classes = useStyles(props)
     const chainId = useChainId()
 
     return (
         <Link target="_blank" rel="noopener noreferrer" href={resolveCollectibleLink(chainId, provider, token)}>
             <Card className={classes.root} style={{ width: 160, height: 220 }}>
-                <ActionsBarNFT classes={{ more: classes.icon }} wallet={wallet} token={token} />
+                {readonly || !wallet ? null : (
+                    <ActionsBarNFT classes={{ more: classes.icon }} wallet={wallet} token={token} />
+                )}
                 {token.asset?.image ? (
                     <Image
                         component="img"