fix: mf-5310 adjust nft pfp dialog (#12018)

* fix: mf-5310 adjust nft pfp dialog

* fix: mf-6506 discard similar domain result

* fix: prettier

---------

Co-authored-by: swkatmask <[email protected]>

packages/mask/popups/pages/Wallet/AddToken/index.tsx

@@ -193,7 +193,8 @@ export const Component = memo(function AddToken() {
                             chainId={chainId}
                             onAdd={addCustomNFTs}
                             disabled={loadingAddCustomNFTs}
-                            classes={{ grid: classes.grid, form: classes.form, main: classes.nftContent }}
+                            className={classes.form}
+                            classes={{ grid: classes.grid, main: classes.nftContent }}
                         />
                     </TabPanel>
                 </div>

packages/plugins/Avatar/src/Application/NFTListDialog.tsx

@@ -54,6 +54,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     content: {
         padding: 0,
+        width: '100%',
         backgroundColor: theme.palette.maskColor.bottom,
         scrollbarWidth: 'none',
         '::-webkit-scrollbar': {
@@ -203,7 +204,7 @@ export function NFTListDialog() {
                             onChainChange={setAssetChainId as (chainId?: Web3Helper.ChainIdAll) => void}
                         />
                     </UserAssetsProvider>
-                :   <EmptyStatus height={479}>
+                :   <EmptyStatus width="100%" height={479}>
                         <Trans>No valid wallet detected. Please connect wallet or verify wallet firstly.</Trans>
                     </EmptyStatus>
                 }

packages/plugins/Avatar/src/Application/UploadAvatarDialog.tsx

@@ -1,12 +1,12 @@
-import { Trans } from '@lingui/macro'
+import { t, Trans } from '@lingui/macro'
 import { delay } from '@masknet/kit'
 import { useLastRecognizedIdentity } from '@masknet/plugin-infra/content-script'
-import { currentVisitingProfile } from '@masknet/plugin-infra/content-script/context'
-import { usePersonaConnectStatus } from '@masknet/shared'
+import { currentVisitingProfile, share } from '@masknet/plugin-infra/content-script/context'
+import { TransactionConfirmModal, usePersonaConnectStatus } from '@masknet/shared'
 import { makeStyles, useCustomSnackbar } from '@masknet/theme'
 import { useNetworkContext } from '@masknet/web3-hooks-base'
 import { Twitter } from '@masknet/web3-providers'
-import { isSameAddress } from '@masknet/web3-shared-base'
+import { isSameAddress, TokenType } from '@masknet/web3-shared-base'
 import { Button, DialogActions, DialogContent, Slider } from '@mui/material'
 import { useCallback, useState } from 'react'
 import AvatarEditor from 'react-avatar-editor'
@@ -98,7 +98,13 @@ export function UploadAvatarDialog() {
             navigate(RoutePaths.Exit)
             setDisabled(false)
             await delay(500)
-            location.reload()
+            TransactionConfirmModal.open({
+                title: t`NFTs Profile`,
+                message: t`You have set NFT PFP successfully.`,
+                shareText: t`I just set my NFT PFP using Mask Extension for free! To browse other's unique NFT collections and web3 activities on Twitter. Download the most powerful tool Mask.io.`,
+                tokenType: TokenType.Fungible,
+                share,
+            })
         }, 'image/png')
     }, [account, editor, identifier, navigate, currentPersona, proof, isBindAccount, saveAvatar, identity])
 

packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx

@@ -185,7 +185,6 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
         if (isZero(data.claimed_amount)) return
         TransactionConfirmModal.open({
             shareText: claimedShareText,
-            amount: formatBalance(data.claimed_amount, token?.decimals, { significant: 2 }),
             token,
             tokenType: TokenType.Fungible,
             messageTextForNFT: _(msg`1 NFT claimed.`),

packages/plugins/RedPacket/src/SiteAdaptor/RedPacketNft.tsx

@@ -294,7 +294,6 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
 
         TransactionConfirmModal.open({
             shareText,
-            amount: '1',
             nonFungibleTokenId: availability.claimed_id,
             nonFungibleTokenAddress: payload.contractAddress,
             tokenType: TokenType.NonFungible,

packages/plugins/ScamSniffer/src/Worker/rpc.ts

@@ -37,7 +37,7 @@ export async function detectScam(post: PostDetail) {
     const detector = getDetector()
     await detector.update()
     const result = await detector.detectScam(post)
-    const mainType = result?.matchType.split('')[0]
+    const mainType = result?.matchType.split(':')[0]
     if (mainType === 'match_by_domain_sim_days') return null
     return result
 }

packages/plugins/Tips/src/components/TipDialog.tsx

@@ -144,7 +144,6 @@ export function TipDialog({ open = false, onClose }: TipDialogProps) {
 
         await TransactionConfirmModal.openAndWaitForClose({
             shareText,
-            amount,
             tokenType: tipType,
             token,
             nonFungibleTokenId,

packages/shared/src/UI/components/AddCollectibles/index.tsx

@@ -1,6 +1,8 @@
+import { msg, Trans } from '@lingui/macro'
+import { useLingui } from '@lingui/react'
 import { Icons } from '@masknet/icons'
 import { EMPTY_LIST, type NetworkPluginID } from '@masknet/shared-base'
-import { ActionButton, MaskTextField, makeStyles } from '@masknet/theme'
+import { ActionButton, makeStyles, MaskTextField } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import {
     useAccount,
@@ -16,14 +18,12 @@ import { Stack, Typography, useTheme } from '@mui/material'
 import { Box } from '@mui/system'
 import { useQueries, useQuery } from '@tanstack/react-query'
 import { compact, uniq } from 'lodash-es'
-import { memo, useCallback, useMemo, useState, type FormEvent } from 'react'
+import { memo, useCallback, useMemo, useState, type FormEvent, type HTMLProps } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { CollectibleItem, CollectibleItemSkeleton } from '../AssetsManagement/CollectibleItem.js'
 import { EmptyStatus } from '../EmptyStatus/index.js'
 import { LoadingStatus } from '../LoadingStatus/index.js'
 import { ReloadStatus } from '../ReloadStatus/index.js'
-import { msg, Trans } from '@lingui/macro'
-import { useLingui } from '@lingui/react'
 
 const useStyles = makeStyles()((theme) => ({
     form: {
@@ -100,8 +100,9 @@ type AddingNFTs<T extends NetworkPluginID = NetworkPluginID> = [
 ]
 
 export interface AddCollectiblesProps<T extends NetworkPluginID = NetworkPluginID>
-    extends withClasses<'grid' | 'form' | 'main'> {
-    pluginID?: T
+    extends withClasses<'grid' | 'form' | 'main'>,
+        HTMLProps<HTMLFormElement> {
+    pluginID: T
     chainId?: Web3Helper.Definition[T]['ChainId']
     /**
      * Specified account.
@@ -125,13 +126,13 @@ function isValidTokenIds(rawIds: string) {
 }
 
 export const AddCollectibles = memo(function AddCollectibles(props: AddCollectiblesProps) {
+    const { pluginID, chainId: defaultChainId, account: defaultAccount, onAdd, className, ...rest } = props
     const { _ } = useLingui()
-    const { pluginID, chainId: defaultChainId, account: defaultAccount, onAdd } = props
     const { chainId } = useChainContext({ chainId: defaultChainId })
     const theme = useTheme()
     const walletAccount = useAccount()
     const account = defaultAccount || walletAccount
-    const { classes } = useStyles(undefined, { props })
+    const { classes, cx } = useStyles(undefined, { props })
     const Utils = useWeb3Utils(pluginID)
 
     const {
@@ -233,7 +234,7 @@ export const AddCollectibles = memo(function AddCollectibles(props: AddCollectib
     const disabled = !selectedTokenIds.length || isLoadingContract || isValidating || props.disabled
 
     return (
-        <form className={classes.form} onSubmit={handleFormSubmit}>
+        <form className={cx(classes.form, className)} {...rest} onSubmit={handleFormSubmit}>
             <Controller
                 control={control}
                 name="address"

packages/shared/src/UI/components/SelectNetworkSidebar/index.tsx

@@ -23,7 +23,6 @@ const useStyles = makeStyles()({
     sidebar: {
         flexShrink: 0,
         boxSizing: 'border-box',
-        height: '100%',
         overflow: 'auto',
         scrollbarWidth: 'none',
         '&::-webkit-scrollbar': {

packages/shared/src/UI/components/TokenTransactionConfirmModal/index.tsx

@@ -66,10 +66,13 @@ const useStyles = makeStyles()((theme) => ({
         margin: 'auto',
         border: `1px ${theme.palette.maskColor.secondaryLine} solid`,
     },
+    icon: {
+        filter: 'drop-shadow(0px 6px 12px rgba(61, 194, 51, 0.20))',
+        backdropFilter: 'blur(8px)',
+    },
 }))
 
 export interface TokenTransactionConfirmModalProps extends PropsWithChildren<InjectedDialogProps> {
-    amount: string | null
     token?: Web3Helper.FungibleTokenAll | null
     nonFungibleTokenId?: string | null
     nonFungibleTokenAddress?: string
@@ -87,7 +90,6 @@ export function TokenTransactionConfirmModal({
     children,
     messageTextForNFT,
     messageTextForFT,
-    amount,
     tokenType,
     token,
     nonFungibleTokenAddress,
@@ -114,15 +116,17 @@ export function TokenTransactionConfirmModal({
             <DialogContent className={classes.content}>
                 {isToken ?
                     <Box>
-                        <TokenIcon
-                            className={classes.tokenIcon}
-                            address={token?.address || ''}
-                            logoURL={token?.logoURL}
-                            name={token?.symbol ?? token?.name}
-                            chainId={token?.chainId}
-                            sx={{ fontSize: '2.75em' }}
-                            size={90}
-                        />
+                        {token ?
+                            <TokenIcon
+                                className={classes.tokenIcon}
+                                address={token?.address || ''}
+                                logoURL={token?.logoURL}
+                                name={token?.symbol ?? token?.name}
+                                chainId={token?.chainId}
+                                sx={{ fontSize: '2.75em' }}
+                                size={90}
+                            />
+                        :   <Icons.FillSuccess className={classes.icon} size={90} />}
                         <Typography className={classes.congratulation} mt="19.5px">
                             <Trans>Congratulations!</Trans>
                         </Typography>

packages/shared/src/UI/modals/AddCollectiblesModal/AddCollectiblesDialog.tsx

@@ -1,18 +1,27 @@
+import { Trans } from '@lingui/macro'
 import { type NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
+import { useNetworks } from '@masknet/web3-hooks-base'
 import { DialogContent } from '@mui/material'
-import { memo } from 'react'
+import { memo, useState } from 'react'
+import { AddCollectibles, SelectNetworkSidebar, type AddCollectiblesProps } from '../../components/index.js'
 import { InjectedDialog } from '../../contexts/components/index.js'
-import { AddCollectibles, type AddCollectiblesProps } from '../../components/index.js'
-import { Trans } from '@lingui/macro'
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
     content: {
         padding: 0,
+        display: 'flex',
+        gap: theme.spacing(1),
     },
     grid: {
         gridTemplateColumns: 'repeat(auto-fill, minmax(20%, 1fr))',
     },
+    sidebar: {
+        marginLeft: theme.spacing(1),
+    },
+    form: {
+        flexGrow: 1,
+    },
 }))
 
 interface AddCollectiblesDialogProps<T extends NetworkPluginID = NetworkPluginID> extends AddCollectiblesProps<T> {
@@ -22,16 +31,27 @@ interface AddCollectiblesDialogProps<T extends NetworkPluginID = NetworkPluginID
 export const AddCollectiblesDialog = memo(function AddCollectiblesDialog({
     open,
     pluginID,
-    chainId,
+    chainId: defaultChainId,
     account,
     onAdd,
 }: AddCollectiblesDialogProps) {
     const { classes } = useStyles()
 
+    const [chainId, setChainId] = useState(defaultChainId)
+    const allNetworks = useNetworks(pluginID, true)
+
     return (
         <InjectedDialog titleBarIconStyle={'back'} open={open} onClose={() => onAdd()} title={<Trans>Add NFTs</Trans>}>
             <DialogContent classes={{ root: classes.content }}>
+                <SelectNetworkSidebar
+                    className={classes.sidebar}
+                    chainId={chainId}
+                    onChainChange={setChainId}
+                    pluginID={pluginID}
+                    networks={allNetworks}
+                />
                 <AddCollectibles
+                    className={classes.form}
                     pluginID={pluginID}
                     chainId={chainId}
                     account={account}

packages/shared/src/UI/modals/TokenTransactionConfirmModal/TokenTransactionConfirm.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
-import { TokenTransactionConfirmModal, type TokenTransactionConfirmModalProps } from '../../../index.js'
 import { Trans } from '@lingui/macro'
+import { TokenTransactionConfirmModal, type TokenTransactionConfirmModalProps } from '../../components/index.js'
 
 export interface TransactionConfirmProps extends TokenTransactionConfirmModalProps {
     shareText: string
@@ -9,19 +9,20 @@ export interface TransactionConfirmProps extends TokenTransactionConfirmModalPro
     title?: string
     messageTextForNFT?: string
     messageTextForFT?: string
+    message?: string
     open: boolean
     onClose: () => void
 }
-export function TransactionConfirm({ onSubmit, shareText, share, ...rest }: TransactionConfirmProps) {
+export function TransactionConfirm({ onSubmit, shareText, share, message, ...rest }: TransactionConfirmProps) {
     const handleConfirm = useCallback(() => {
         share?.(shareText)
         onSubmit?.()
     }, [shareText, onSubmit, share])
     return (
         <TokenTransactionConfirmModal
             {...rest}
-            messageTextForNFT={rest.messageTextForNFT}
-            messageTextForFT={rest.messageTextForFT}
+            messageTextForNFT={rest.messageTextForNFT ?? message}
+            messageTextForFT={rest.messageTextForFT ?? message}
             title={rest.title}
             confirmText={share ? <Trans>Share</Trans> : <Trans>OK</Trans>}
             onConfirm={handleConfirm}

packages/shared/src/UI/modals/TokenTransactionConfirmModal/index.tsx

@@ -10,11 +10,11 @@ export interface TransactionConfirmModalOpenProps extends Omit<TransactionConfir
 export function TransactionConfirmModal({ ref }: SingletonModalProps<TransactionConfirmModalOpenProps>) {
     const [shareText, setShareText] = useState('')
     const [share, setShare] = useState<(text: string) => void>()
-    const [amount, setAmount] = useState<string | null>(null)
     const [token, setToken] = useState<Web3Helper.FungibleTokenAll | null>()
     const [tokenType, setTokenType] = useState<TokenType>(TokenType.Fungible)
     const [messageTextForNFT, setMessageTextForNFT] = useState<string>()
     const [messageTextForFT, setMessageTextForFT] = useState<string>()
+    const [message, setMessage] = useState<string>()
     const [title, setTitle] = useState<string>()
     const [nonFungibleTokenId, setNonFungibleTokenId] = useState<string>()
     const [nonFungibleTokenAddress, setNonFungibleTokenAddress] = useState<string>()
@@ -23,12 +23,12 @@ export function TransactionConfirmModal({ ref }: SingletonModalProps<Transaction
         onOpen(props) {
             setShareText(props.shareText)
             setShare(() => props.share)
-            setAmount(props.amount)
             setToken(props.token)
             setTokenType(props.tokenType)
             setTitle(props.title)
             setMessageTextForFT(props.messageTextForFT)
             setMessageTextForNFT(props.messageTextForNFT)
+            setMessage(props.message)
             setNonFungibleTokenId(props.nonFungibleTokenId ?? undefined)
             setNonFungibleTokenAddress(props.nonFungibleTokenAddress ?? undefined)
         },
@@ -40,7 +40,6 @@ export function TransactionConfirmModal({ ref }: SingletonModalProps<Transaction
             shareText={shareText}
             open
             onClose={() => dispatch?.close()}
-            amount={amount}
             tokenType={tokenType}
             nonFungibleTokenId={nonFungibleTokenId}
             nonFungibleTokenAddress={nonFungibleTokenAddress}
@@ -50,6 +49,7 @@ export function TransactionConfirmModal({ ref }: SingletonModalProps<Transaction
             title={title}
             messageTextForFT={messageTextForFT}
             messageTextForNFT={messageTextForNFT}
+            message={message}
         />
     )
 }