- {tabs.length > 0 && !showNextID && (
-
-
- tabs={tabs}
- selectedId={selectedTabId}
- onChange={setSelectedTab}
- tail={
- isOwnerIdentity &&
- }
- />
-
- )}
-
-
Utils?.filter?.(x) ?? true).sort(Utils?.sorter)}
- />
+
+ {tabs.length > 0 && !showNextID && (
+
+
+
+
+
setAnchorEl(null)}>
+ {uniqBy(socialAddressList ?? [], (x) => x.address.toLowerCase()).map((x) => {
+ return (
+
+ )
+ })}
+
+
+
+ theme.palette.maskColor.secondaryDark}>
+ {t('powered_by')}
+
+ theme.palette.maskColor.dark}>
+ {t('mask_network')}
+
+ {isOwnerIdentity ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+
+
+ )}
{component}
)
}
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
index acaf58fd4f7d..382a5e0a80c5 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
@@ -4,13 +4,14 @@ import { NFTCardStyledAssetPlayer } from '@masknet/shared'
import { ActionsBarNFT } from '../ActionsBarNFT'
import type { NonFungibleToken, SourceType, Wallet } from '@masknet/web3-shared-base'
import type { Web3Helper } from '@masknet/plugin-infra/src/entry-web3'
+import { resolveOpenSeaLink } from '@masknet/web3-shared-evm'
const useStyles = makeStyles()((theme) => ({
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
- borderRadius: 4,
+ borderRadius: '8px 8px 0 0',
position: 'absolute',
zIndex: 1,
backgroundColor: theme.palette.mode === 'light' ? '#F7F9FA' : '#2F3336',
@@ -67,7 +68,11 @@ export function CollectibleCard(props: CollectibleCardProps) {
const { classes } = useStyles()
return (
-
+
{readonly || !wallet ? null : (
@@ -83,6 +88,7 @@ export function CollectibleCard(props: CollectibleCardProps) {
loadingFailImage: classes.loadingFailImage,
wrapper: classes.wrapper,
}}
+ showNetwork
/>
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
index 93e23394b872..bdee51d876af 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
@@ -6,14 +6,12 @@ import {
NonFungibleAsset,
NonFungibleTokenCollection,
SocialAddress,
- SocialAddressType,
SourceType,
Wallet,
} from '@masknet/web3-shared-base'
import { Box, Button, Stack, styled, Typography } from '@mui/material'
import { LoadingBase, makeStyles, useStylesExtends } from '@masknet/theme'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import { ElementAnchor, RetryHint, ReversedAddress } from '@masknet/shared'
+import { ElementAnchor, RetryHint } from '@masknet/shared'
import { EMPTY_LIST } from '@masknet/shared-base'
import type { IdentityResolved } from '@masknet/plugin-infra'
import { useNonFungibleAssets, useTrustedNonFungibleTokens, Web3Helper } from '@masknet/plugin-infra/web3'
@@ -74,6 +72,7 @@ const useStyles = makeStyles()((theme) => ({
description: {
background: theme.palette.mode === 'light' ? '#F7F9FA' : '#2F3336',
alignSelf: 'stretch',
+ borderRadius: '0 0 8px 8px',
},
name: {
whiteSpace: 'nowrap',
@@ -222,12 +221,10 @@ export function CollectibleList(props: CollectibleListProps) {
export function CollectionList({
addressName,
- onSelectAddress,
persona,
visitingProfile,
}: {
addressName: SocialAddress
- onSelectAddress: (event: React.MouseEvent) => void
persona?: string
visitingProfile?: IdentityResolved
}) {
@@ -291,55 +288,15 @@ export function CollectionList({
if ((done && !allCollectibles.length) || !account)
return (
- <>
- {addressName && (
-
-
-
-
-
- )}
-
-
- {t('dashboard_no_collectible_found')}
-
-
-
+
+
+ {t('no_NFTs_found')}
+
+
)
return (
-
-
-
-
-
-
-
+
@@ -404,7 +361,12 @@ export function CollectionList({
key={i}
alignItems="center"
justifyContent="center"
- sx={{ marginTop: '8px', marginBottom: '12px', minWidth: 30, maxHeight: 24 }}>
+ sx={{
+ marginTop: '8px',
+ marginBottom: '12px',
+ minWidth: 30,
+ maxHeight: 24,
+ }}>
({
+const useStyles = makeStyles()((theme) => ({
container: {
background:
'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.2) 0%, rgba(59, 153, 252, 0.2) 100%)',
@@ -57,6 +57,7 @@ const useStyles = makeStyles()(() => ({
arrow: {
fontSize: 20,
transition: 'all 300ms',
+ color: theme.palette.maskColor.secondaryDark,
},
}))
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx
index 034c0a584a63..98ded1c11a1b 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx
@@ -61,6 +61,7 @@ const useStyles = makeStyles()((theme) => ({
arrow: {
fontSize: 20,
transition: 'all 300ms',
+ color: theme.palette.maskColor.secondaryDark,
},
colorChainICon: {
borderRadius: '999px!important',
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx
index 2cf2157dc603..193309373a82 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx
@@ -1,94 +1,22 @@
-import { useState } from 'react'
-import { first, uniqBy } from 'lodash-unified'
-import { ReversedAddress } from '@masknet/shared'
-import { getMaskColor, makeStyles, ShadowRootMenu } from '@masknet/theme'
-import { MenuItem } from '@mui/material'
-import { SocialAddress, NetworkPluginID, SocialIdentity, SocialAddressType } from '@masknet/web3-shared-base'
+import type { SocialAddress, NetworkPluginID, SocialIdentity } from '@masknet/web3-shared-base'
import { CollectionList } from '../../../extension/options-page/DashboardComponents/CollectibleList'
-import { EMPTY_LIST } from '@masknet/shared-base'
import { useCurrentVisitingProfile } from '../hooks/useContext'
-const useStyles = makeStyles()((theme) => ({
- root: {
- position: 'relative',
- },
- text: {
- paddingTop: 36,
- paddingBottom: 36,
- '& > p': {
- color: getMaskColor(theme).textPrimary,
- },
- },
- note: {
- padding: `0 ${theme.spacing(1)}`,
- textAlign: 'right',
- },
- icon: {
- color: getMaskColor(theme).textPrimary,
- },
- iconContainer: {
- display: 'inherit',
- },
- tipList: {
- listStyleType: 'decimal',
- paddingLeft: 16,
- },
- button: {
- border: `1px solid ${theme.palette.text.primary} !important`,
- color: `${theme.palette.text.primary} !important`,
- borderRadius: 9999,
- background: 'transparent',
- '&:hover': {
- background: 'rgba(15, 20, 25, 0.1)',
- },
- },
-}))
-
export interface NFTPageProps {
identity?: SocialIdentity
- socialAddressList?: Array>
+ socialAddress?: SocialAddress
}
-export function NFTPage({ socialAddressList, identity }: NFTPageProps) {
- const { classes } = useStyles()
- const [anchorEl, setAnchorEl] = useState(null)
-
- const [selectedAddress, setSelectedAddress] = useState(first(socialAddressList))
- const onOpen = (event: React.MouseEvent) => setAnchorEl(event.currentTarget)
- const onClose = () => setAnchorEl(null)
- const onSelect = (option: SocialAddress) => {
- setSelectedAddress(option)
- onClose()
- }
+export function NFTPage({ socialAddress, identity }: NFTPageProps) {
const currentVisitingProfile = useCurrentVisitingProfile()
- if (!selectedAddress) return null
+ if (!socialAddress) return null
return (
-
-
- {uniqBy(socialAddressList ?? EMPTY_LIST, (x) => x.address.toLowerCase()).map((x) => {
- return (
-
- )
- })}
-
-
-
+
)
}
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/index.tsx
index 247a64086ad7..3275dc9cc289 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/index.tsx
@@ -40,9 +40,6 @@ const sns: Plugin.SNSAdaptor.Definition = {
TabContent: NFTPage,
},
Utils: {
- shouldDisplay: (identity, socialAddressList) => {
- return !!socialAddressList?.length
- },
sorter: (a, z) => {
if (a.type === SocialAddressType.ENS) return -1
if (z.type === SocialAddressType.ENS) return 1
diff --git a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
index 76f310fe6fca..b3a75bf2bbac 100644
--- a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
+++ b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
@@ -1,4 +1,3 @@
-import { Icons } from '@masknet/icons'
import { PluginId, useIsMinimalMode } from '@masknet/plugin-infra/content-script'
import { useChainId } from '@masknet/plugin-infra/web3'
import { NextIDPlatform, PopupRoutes, EMPTY_LIST } from '@masknet/shared-base'
@@ -16,6 +15,7 @@ import { useI18N } from '../locales'
import { BindDialog } from './BindDialog'
import type { LiveSelector } from '@dimensiondev/holoflows-kit'
import { searchAllProfileTabSelector } from '../../../social-network-adaptor/twitter.com/utils/selector'
+import { Icons } from '@masknet/icons'
const useStyles = makeStyles()((theme) => ({
tip: {
@@ -60,9 +60,12 @@ const useStyles = makeStyles()((theme) => ({
},
container: {
background:
- 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgba(28, 104, 243, 0.2) 0%, rgba(249, 55, 55, 0.2) 100%), #FFFFFF;',
- borderRadius: '16px',
- padding: '14px',
+ 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgba(28, 104, 243, 0.2) 0%, rgba(45, 41, 253, 0.2) 100%), #FFFFFF;',
+ padding: '14px 14px 16px 14px ',
+ height: '166px',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
},
verifyIntro: {
fontSize: '14px',
@@ -86,34 +89,45 @@ const useStyles = makeStyles()((theme) => ({
backgroundColor: theme.palette.background.default,
height: '196px',
},
- walletIcon: {
- fontSize: 18,
- marginRight: 8,
- },
web3Icon: {
marginRight: 6,
marginTop: 2,
},
+ walletIcon: {
+ marginRight: 8,
+ color: theme.palette.maskColor.white,
+ },
item1: {
- color: '#767f8d',
- fontSize: '14',
+ color: theme.palette.maskColor.secondaryDark,
+ fontSize: '14px',
fontWeight: 400,
},
item2: {
- color: '#07101B',
- fontSize: '14',
+ color: theme.palette.maskColor.dark,
+ fontSize: '14px',
fontWeight: 500,
marginLeft: '2px',
},
button: {
borderRadius: '99px',
- backgroundColor: '#07101b',
+ backgroundColor: theme.palette.maskColor.dark,
color: '#fff',
+ marginTop: 'auto',
':hover': {
color: 'fff',
- backgroundColor: '#07101b',
+ backgroundColor: theme.palette.maskColor.dark,
},
},
+ content: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ fontSize: '14px',
+ fontWeight: 400,
+ },
+ linkOutIcon: {
+ color: theme.palette.maskColor.secondaryDark,
+ },
}))
interface NextIdPageProps {
@@ -127,6 +141,7 @@ export const TAB_SELECTOR: { [key: string]: LiveSelector } =
export function NextIdPage({ persona }: NextIdPageProps) {
const t = useI18N()
const { classes } = useStyles()
+
const currentProfileIdentifier = useLastRecognizedIdentity()
const visitingPersonaIdentifier = useCurrentVisitingIdentity()
const personaConnectStatus = usePersonaConnectStatus()
@@ -140,8 +155,15 @@ export function NextIdPage({ persona }: NextIdPageProps) {
const personaActionButton = useMemo(() => {
if (!personaConnectStatus.action) return null
const button = personaConnectStatus.hasPersona ? t.connect_persona() : t.create_persona()
+ const icon = personaConnectStatus.hasPersona ? (
+
+ ) : (
+
+ )
+
return (
)
@@ -163,6 +185,19 @@ export function NextIdPage({ persona }: NextIdPageProps) {
)
}, [publicKeyAsHex, visitingPersonaIdentifier, isVerified])
+ const description = useMemo(() => {
+ if (personaConnectStatus.action && !personaConnectStatus.hasPersona) {
+ return t.create_persona_intro()
+ }
+ if (!isOwn) {
+ return t.others_lack_wallet()
+ }
+ if (isAccountVerified) {
+ return t.add_wallet_intro()
+ }
+ return ''
+ }, [personaConnectStatus, isOwn, isAccountVerified, t])
+
const isWeb3ProfileDisable = useIsMinimalMode(PluginId.Web3Profile)
const {
@@ -187,12 +222,14 @@ export function NextIdPage({ persona }: NextIdPageProps) {
const handleAddWallets = () => {
Services.Helper.openPopupWindow(PopupRoutes.ConnectedWallets, {
- chainId,
internal: true,
})
}
- const getButton = () => {
+ const getButton = useMemo(() => {
+ if (!isOwn) {
+ return
+ }
if (isWeb3ProfileDisable) {
return (