feat: nft avatar

.i18n-codegen.json

@@ -229,6 +229,18 @@
                 "trans": "Translate",
                 "sourceMap": "inline"
             }
+        },
+        {
+            "input": "./packages/mask/src/plugins/Avatar/locales/en-US.json",
+            "output": "./packages/mask/src/plugins/Avatar/locales/i18n_generated",
+            "parser": "i18next",
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "com.maskbook.avatar",
+                "trans": "Translate",
+                "sourceMap": "inline"
+            }
         }
     ]
 }

cspell.json

@@ -120,6 +120,7 @@
         "multicall",
         "multihop",
         "newsfeed",
+        "nftavatar",
         "nftrss",
         "nftscan",
         "nums",
@@ -215,7 +216,7 @@
         "aicanft",
         "algr",
         "anft",
-        "avator",
+        "armv",
         "blocto",
         "bsct",
         "btcb",

packages/icons/plugins/NFTAvatar.tsx

@@ -0,0 +1,29 @@
+import { createIcon } from '../utils'
+import type { SvgIcon } from '@mui/material'
+
+export const NFTAvatarIcon: typeof SvgIcon = createIcon(
+    'nft_avatar',
+    <g>
+        <path
+            d="M4.83325 3.5C4.83325 2.39543 5.72868 1.5 6.83325 1.5H29.8333C30.9378 1.5 31.8333 2.39543 31.8333 3.5V32.5C31.8333 33.6046 30.9378 34.5 29.8333 34.5H6.83325C5.72868 34.5 4.83325 33.6046 4.83325 32.5V3.5Z"
+            fill="url(#paint0_linear_35_22290)"
+        />
+        <path
+            d="M13.6273 6.90742C15.4435 5.44402 17.9166 5.03182 20.1702 5.46022C22.2222 5.94982 24.0582 7.33042 25.0536 9.19702C25.743 10.4246 25.9572 11.8466 25.9662 13.2362C25.9644 16.838 25.9662 20.438 25.9644 24.0398C25.905 24.5096 26.2758 24.8444 26.5116 25.2044C27.6312 26.81 28.155 28.7576 28.2468 30.698C27.5736 30.7016 26.9004 30.6998 26.2272 30.698C26.1246 29.4452 25.9032 28.1924 25.3164 27.0674C23.4786 27.0584 21.6426 27.098 19.8048 27.08C19.794 25.7156 19.7994 24.3512 19.7976 22.9868C18.2298 22.6196 16.5739 22.8932 15.1015 23.5016C12.2881 24.6878 10.3837 27.6578 10.3945 30.6998H8.42525C8.33165 28.295 9.32885 25.9262 10.9021 24.1352C11.1235 23.9264 11.0443 23.5988 11.0677 23.3288C11.0479 20.5676 11.0803 17.8046 11.0515 15.0434C10.9831 13.6682 11.0263 12.2912 11.0893 10.916C11.2531 9.27082 12.2629 7.80562 13.6273 6.90742ZM20.073 7.46362C20.2998 8.10262 20.919 8.50582 21.1638 9.14302C21.9324 10.5722 21.7146 12.2264 21.7398 13.7816C21.7524 17.5634 21.7488 21.3434 21.7506 25.1252C22.5048 25.127 23.2608 25.1306 24.015 25.1162C24.0096 21.1562 24.0114 17.1944 24.015 13.2344C24.006 12.2786 23.9106 11.294 23.484 10.4228C22.8522 9.00082 21.5562 7.91362 20.073 7.46362ZM14.4175 8.75602C13.4221 9.40582 12.9289 10.6262 12.9667 11.789C15.2491 11.8106 17.5296 11.7962 19.812 11.798C19.893 10.2806 18.912 8.73982 17.4108 8.35102C16.4101 7.99642 15.3247 8.28082 14.4175 8.75602ZM13.0261 13.7366C13.0153 14.5484 13.0441 15.4016 13.4725 16.1198C14.1097 17.3276 15.4309 18.0692 16.7826 18.1106C16.7845 18.755 16.7845 19.3994 16.7826 20.0456C15.3841 20.015 14.0413 19.4696 12.9829 18.5624C13.0027 19.8206 12.9829 21.0788 12.9973 22.3388C14.9899 21.0644 17.4649 20.5298 19.803 20.9042C19.7904 18.5156 19.8012 16.1252 19.7958 13.7366C17.5404 13.7348 15.2833 13.7348 13.0261 13.7366Z"
+            fill="white"
+        />
+        <defs>
+            <linearGradient
+                id="paint0_linear_35_22290"
+                x1="21.0748"
+                y1="1.5"
+                x2="21.0748"
+                y2="34.4996"
+                gradientUnits="userSpaceOnUse">
+                <stop stopColor="#FF8D5C" />
+                <stop offset="0.99" stopColor="#FFC49A" />
+            </linearGradient>
+        </defs>
+    </g>,
+    '0 0 37 36',
+)

packages/icons/plugins/index.ts

@@ -24,5 +24,6 @@ export * from './DHEDGEIcon'
 export * from './PoolTogetherIcon'
 export * from './SecurityChecker'
 export * from './ArtBlocks'
+export * from './NFTAvatar'
 export * from './connect'
 export * from './shared'

packages/mask/package.json

@@ -56,6 +56,7 @@
     "@types/json-stable-stringify": "^1.0.34",
     "@types/json2csv": "^5.0.3",
     "@types/node": "^17.0.31",
+    "@types/react-avatar-editor": "^10.3.6",
     "@types/react-highlight-words": "^0.16.4",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
@@ -100,6 +101,7 @@
     "pure-react-carousel": "^1.28.1",
     "promievent": "^0.1.4",
     "protobufjs": "^6.11.2",
+    "react-avatar-editor": "^12.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-draggable": "^4.4.4",

packages/mask/shared-ui/locales/en-US.json

@@ -336,12 +336,14 @@
     "plugin_wallet_name_placeholder": "Enter 1-12 characters",
     "plugin_wallet_fail_to_sign": "Failed to sign password.",
     "plugin_wallet_cancel_sign": "Signature canceled.",
+    "plugin_nft_avatar_recommend_feature_description": "Set your NFT as profile picture with exclusive aura",
     "plugin_red_packet_display_name": "Plugin: Lucky Drop",
+    "application_hint": "Socialize and show off your NFTs. People can bid,buy, view your valuable NFTs without leaving Twitter.",
     "plugin_red_packet_claimed": "Claimed",
     "plugin_red_packet_erc20_tab_title": "Token",
     "plugin_red_packet_erc721_tab_title": "Collectibles",
     "plugin_red_packet_name": "Lucky Drop",
-    "plugin_red_packet_recommend_feature_description": "Surpirse your social friends with Lucky Drop",
+    "plugin_red_packet_recommend_feature_description": "Astonish your friends with a surprise gift",
     "plugin_red_packet_description": "Gift crypto or NFTs to any users, first come, first served.",
     "plugin_red_packet_erc721_insufficient_balance": "Insufficient Balance",
     "plugin_red_packet_details": "Lucky Drop Details",
@@ -950,8 +952,6 @@
     "popups_social_account": "Social Accounts",
     "popups_connected_wallets": "Connected Wallets",
     "popups_loading": "Loading",
-    "popups_wallet_disconnect_success": "Wallet disconnect successfully",
-    "popups_wallet_disconnect_failed": "Wallet disconnect failed",
     "popups_connect_your_web2_social_accounts": "Connect your web2 social accounts",
     "popups_connect_social_account": "Connect Social Account",
     "popups_disconnect_success": " Disconnect successfully. ",
@@ -1018,6 +1018,7 @@
     "popups_wallet_token_buy": "Buy",
     "popups_wallet_token_send": "Send",
     "popups_wallet_token_swap": "Swap",
+    "popups_wallet_disconnect_failed": "Wallet disconnect failed",
     "popups_wallet_view_on_explorer": "View on Explorer",
     "popups_wallet_gas_fee_settings": "Gas fee settings",
     "popups_wallet_gas_fee_settings_description": "Gas fees are the fees for paying ethereum miners. The miners prefer to pack transactions with higher gas fees. Transactions with low gas fees might fail, and the paid gas fees won’t be returned.",
@@ -1029,7 +1030,6 @@
     "popups_wallet_gas_fee_settings_max_priority_fee": "Max priority fee",
     "popups_wallet_gas_fee_settings_max_fee": "Max fee",
     "popups_wallet_gas_fee_settings_min_gas_limit_tips": "Gas limit must be at least {{limit}}",
-    "popups_wallet_unsupported_network": "Unsupported network type",
     "popups_wallet_signature_request_title": "Signature Request",
     "popups_wallet_signature_request": "Signature request",
     "popups_wallet_signature_request_message": "Message",
@@ -1075,13 +1075,13 @@
     "plugin_vcent_last_offer_at": "LATEST OFFER at",
     "nft_input_address_label": "Please input contract address",
     "nft_input_tokenid_label": "Please input token ID",
-    "nft_owner_hint": "This NFT does not exist or does not belong to you.",
+    "nft_owner_hint": "The contract address is incorrect or the collection does not belong to you",
     "nft_add_dialog_title": "Add Collectible",
     "nft_add_button_label": "Add",
     "nft_list_title": "NFT Avatar Setting",
     "nft_wallet_change": "Change",
     "nft_button_add_collectible": "Add Collectible",
-    "nft_avatar": "NFT Avatar",
+    "nft_avatar": "NFT PFP",
     "web3_tab_hint": "No address found.",
     "plugin_artblocks_not_active": "This project is no more active",
     "plugin_artblocks_completed": "Completed",
@@ -1104,6 +1104,7 @@
     "plugin_artblocks_blockchain_row": "Blockchain:",
     "plugin_artblocks_contract_row": "Contract:",
     "plugin_artblocks_smt_wrong": "Something went wrong!",
+    "popups_wallet_disconnect_success": "Wallet disconnect successfully",
     "plugin_artblocks_share": "I just purchased a beautiful piece of art from '{{name}}' collection for {{price}} {{symbol}}. Install @realMaskNetwork to get yours.",
     "plugin_artblocks_share_no_official_account": "I just purchased a beautiful piece of art from '{{name}}' collection for {{price}} {{symbol}}. Welcome to join.",
     "plugin_tips_disconnect_introduction": "Are you going to disconnect {{persona}} from wallet <strong>{{address}}<strong/>?",
@@ -1121,6 +1122,7 @@
     "plugin_transak_description": "Fiat On-Ramp Aggregator on Twitter. Buy crypto in 60+ countries with Transak support.",
     "plugin_valuables_name": "Valuables",
     "plugin_valuables_description": "Buy & sell tweets autographed by their original creators.",
+    "popups_wallet_unsupported_network": "Unsupported network type",
     "plugin_default_title": "Default",
     "plugin_provider_by": "Provided by",
     "plugin_enables": "Enable plugins"

packages/mask/shared-ui/locales/ko-KR.json

@@ -721,7 +721,6 @@
     "popups_wallet_gas_fee_settings_max_priority_fee": "최대 우선 가스비",
     "popups_wallet_gas_fee_settings_max_fee": "최대 가스비",
     "popups_wallet_gas_fee_settings_min_gas_limit_tips": "최소한 가스비는 {{limit}} 입니다",
-    "popups_wallet_unsupported_network": "지원되지 않는 네트워크",
     "popups_wallet_signature_request": "서명",
     "popups_wallet_signature_request_message": "메시지",
     "popups_wallet_contract_interaction": "컨트렉트 인터액션",

packages/mask/shared-ui/locales/qya-AA.json

@@ -948,8 +948,6 @@
     "popups_social_account": "crwdns16328:0crwdne16328:0",
     "popups_connected_wallets": "crwdns16330:0crwdne16330:0",
     "popups_loading": "crwdns16332:0crwdne16332:0",
-    "popups_wallet_disconnect_success": "crwdns16334:0crwdne16334:0",
-    "popups_wallet_disconnect_failed": "crwdns16336:0crwdne16336:0",
     "popups_connect_your_web2_social_accounts": "crwdns16338:0crwdne16338:0",
     "popups_connect_social_account": "crwdns16340:0crwdne16340:0",
     "popups_disconnect_success": "crwdns16342:0crwdne16342:0",
@@ -1027,7 +1025,6 @@
     "popups_wallet_gas_fee_settings_max_priority_fee": "crwdns7857:0crwdne7857:0",
     "popups_wallet_gas_fee_settings_max_fee": "crwdns7859:0crwdne7859:0",
     "popups_wallet_gas_fee_settings_min_gas_limit_tips": "crwdns8993:0{{limit}}crwdne8993:0",
-    "popups_wallet_unsupported_network": "crwdns8995:0crwdne8995:0",
     "popups_wallet_signature_request_title": "crwdns16386:0crwdne16386:0",
     "popups_wallet_signature_request": "crwdns7861:0crwdne7861:0",
     "popups_wallet_signature_request_message": "crwdns8059:0crwdne8059:0",

packages/mask/shared-ui/locales/zh-CN.json

@@ -837,7 +837,6 @@
     "popups_wallet_gas_fee_settings_max_priority_fee": "Max priority fee",
     "popups_wallet_gas_fee_settings_max_fee": "Max fee",
     "popups_wallet_gas_fee_settings_min_gas_limit_tips": "Gas limit 必须至少 {{limit}}",
-    "popups_wallet_unsupported_network": "不支持的网络类型",
     "popups_wallet_signature_request": "签名请求",
     "popups_wallet_signature_request_message": "信息",
     "popups_wallet_contract_interaction": "合约交互",

packages/mask/src/components/shared/ApplicationBoard.tsx

@@ -4,7 +4,7 @@ import { Typography } from '@mui/material'
 import { useChainId } from '@masknet/web3-shared-evm'
 import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script'
 import { useCurrentWeb3NetworkPluginID, useAccount, NetworkPluginID } from '@masknet/plugin-infra/web3'
-import { CrossIsolationMessages, formatPersonaPublicKey } from '@masknet/shared-base'
+import { formatPersonaPublicKey } from '@masknet/shared-base'
 import { getCurrentSNSNetwork } from '../../social-network-adaptor/utils'
 import { activatedSocialNetworkUI } from '../../social-network'
 import { useI18N } from '../../utils'
@@ -31,7 +31,7 @@ const useStyles = makeStyles<{ shouldScroll: boolean }>()((theme, props) => {
             gridGap: 10,
             justifyContent: 'space-between',
             height: 320,
-            width: props.shouldScroll ? 575 : 562,
+            width: props.shouldScroll ? 589 : 576,
             '::-webkit-scrollbar': {
                 backgroundColor: 'transparent',
                 width: 20,
@@ -145,7 +145,9 @@ function ApplicationBoardContent(props: Props) {
         [snsAdaptorPlugins, currentWeb3Network, chainId, account],
     )
 
-    const recommendFeatureAppList = applicationList.filter((x) => x.entry.recommendFeature)
+    const recommendFeatureAppList = applicationList
+        .filter((x) => x.entry.recommendFeature)
+        .sort((a, b) => (a.entry.appBoardSortingDefaultPriority ?? 0) - (b.entry.appBoardSortingDefaultPriority ?? 0))
 
     const listedAppList = applicationList.filter((x) => !x.entry.recommendFeature).filter((x) => !getUnlistedApp(x))
     const { classes } = useStyles({ shouldScroll: listedAppList.length > 12 })
@@ -208,7 +210,7 @@ function RenderEntryComponent({ application }: { application: Application }) {
 
     const verifyPersona = useCallback(() => {
         closeApplicationBoard()
-        CrossIsolationMessages.events.verifyNextID.sendToAll(undefined)
+        ApplicationEntryStatus.personaNextIDReset?.()
     }, [])
 
     const clickHandler = (() => {
@@ -225,6 +227,7 @@ function RenderEntryComponent({ application }: { application: Application }) {
 
     // #region tooltip hint
     const tooltipHint = (() => {
+        if (ApplicationEntryStatus.isLoading) return
         if (application.isWalletConnectedRequired) return t('application_tooltip_hint_connect_wallet')
         if (application.isWalletConnectedEVMRequired) return t('application_tooltip_hint_switch_to_evm_wallet')
         if (!application.entry.nextIdRequired) return
@@ -261,6 +264,7 @@ interface ApplicationEntryStatusContextProps {
     currentPersonaPublicKey: string | undefined
     currentSNSConnectedPersonaPublicKey: string | undefined
     personaConnectAction: (() => void) | undefined
+    personaNextIDReset: (() => void) | undefined
     isLoading: boolean
 }
 
@@ -274,14 +278,19 @@ const ApplicationEntryStatusContext = createContext<ApplicationEntryStatusContex
     currentPersonaPublicKey: undefined,
     currentSNSConnectedPersonaPublicKey: undefined,
     personaConnectAction: undefined,
+    personaNextIDReset: undefined,
     isLoading: false,
 })
 
 function ApplicationEntryStatusProvider(props: PropsWithChildren<{}>) {
     const personaConnectStatus = usePersonaConnectStatus()
     const nextIDConnectStatus = useNextIDConnectStatus()
 
-    const { value: ApplicationCurrentStatus, retry } = usePersonaAgainstSNSConnectStatus()
+    const {
+        value: ApplicationCurrentStatus,
+        retry,
+        loading: personaAgainstSNSConnectStatusLoading,
+    } = usePersonaAgainstSNSConnectStatus()
 
     useEffect(() => {
         return MaskMessages.events.currentPersonaIdentifier.on(retry)
@@ -294,6 +303,7 @@ function ApplicationEntryStatusProvider(props: PropsWithChildren<{}>) {
         <ApplicationEntryStatusContext.Provider
             value={{
                 personaConnectAction: personaConnectStatus.action ?? undefined,
+                personaNextIDReset: nextIDConnectStatus.reset ?? undefined,
                 isPersonaCreated: personaConnectStatus.hasPersona,
                 isPersonaConnected: personaConnectStatus.connected,
                 isNextIDVerify: nextIDConnectStatus.isVerified,
@@ -303,7 +313,7 @@ function ApplicationEntryStatusProvider(props: PropsWithChildren<{}>) {
                 shouldVerifyNextId: Boolean(!nextIDConnectStatus.isVerified && ApplicationCurrentStatus),
                 currentPersonaPublicKey,
                 currentSNSConnectedPersonaPublicKey,
-                isLoading: nextIDConnectStatus.loading,
+                isLoading: nextIDConnectStatus.loading || personaAgainstSNSConnectStatusLoading,
             }}>
             {props.children}
         </ApplicationEntryStatusContext.Provider>

packages/mask/src/components/shared/ApplicationSettingPluginList.tsx

@@ -24,7 +24,7 @@ export function getUnlistedApp(app: Application): boolean {
 }
 // #endregion
 
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles<{ iconFilterColor?: string }>()((theme, { iconFilterColor }) => ({
     list: {
         display: 'grid',
         gap: theme.spacing(2, 1),
@@ -54,6 +54,9 @@ const useStyles = makeStyles()((theme) => ({
             width: 36,
             height: 36,
         },
+        ...(iconFilterColor
+            ? { filter: `drop-shadow(0px 6px 12px ${iconFilterColor})`, backdropFilter: 'blur(16px)' }
+            : {}),
     },
     loadingWrapper: {
         display: 'flex',
@@ -77,7 +80,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export function ApplicationSettingPluginList() {
-    const { classes } = useStyles()
+    const { classes } = useStyles({ iconFilterColor: undefined })
     const { t } = useI18N()
     const snsAdaptorPlugins = useActivatedPluginsSNSAdaptor('any')
     const applicationList = useMemo(() => {
@@ -123,7 +126,7 @@ interface AppListProps {
 
 function AppList(props: AppListProps) {
     const { appList, setUnlistedApp, isListed } = props
-    const { classes } = useStyles()
+    const { classes } = useStyles({ iconFilterColor: undefined })
     const { t } = useI18N()
 
     return appList.length > 0 ? (
@@ -156,7 +159,7 @@ interface AppListItemProps {
 
 function AppListItem(props: AppListItemProps) {
     const { application, setUnlistedApp, isListed } = props
-    const { classes } = useStyles()
+    const { classes } = useStyles({ iconFilterColor: application.entry.iconFilterColor })
     return (
         <ListItem className={classes.listItem} onClick={() => setUnlistedApp(application, isListed)}>
             <div className={classes.iconWrapper}>{application.entry.icon}</div>

packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx

@@ -12,12 +12,15 @@ import type { ConnectedWalletInfo } from '../type'
 import { NextIDProof } from '@masknet/web3-providers'
 import Service from '../../../../service'
 import { usePopupCustomSnackbar } from '@masknet/theme'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 const ConnectedWallets = memo(() => {
     const { t } = useI18N()
     const chainId = useChainId()
     const { NameService } = useWeb3State()
     const wallets = useWallets()
+    const navigate = useNavigate()
+    const location = useLocation()
     const { proofs, currentPersona, refreshProofs, fetchProofsLoading } = PersonaContext.useContainer()
 
     const { showSnackbar } = usePopupCustomSnackbar()
@@ -107,6 +110,13 @@ const ConnectedWallets = memo(() => {
     )
 
     const navigateToConnectWallet = async () => {
+        const params = new URLSearchParams(location.search)
+        const internal = params.get('internal')
+
+        if (internal) {
+            navigate(PopupRoutes.ConnectWallet)
+            return
+        }
         await Service.Helper.openPopupWindow(PopupRoutes.ConnectWallet)
         window.close()
     }