From feb8b28fa3297aa08b545b0082e118fa26a49b12 Mon Sep 17 00:00:00 2001 From: Randolph Chen Date: Fri, 4 Mar 2022 17:31:11 +0800 Subject: [PATCH 01/11] feat: add NextID to wallet tab of profile --- .../src/components/DataSource/useNextID.ts | 24 ++++-- .../DataSource/usePersonaConnectStatus.ts | 10 +-- .../InjectedComponents/ProfileTabContent.tsx | 25 +++++- .../InjectedComponents/SetupGuide.tsx | 2 +- .../InjectedComponents/ToolboxUnstyled.tsx | 2 +- .../src/plugins/NextID/SNSAdaptor/index.tsx | 2 +- .../plugins/NextID/components/BindingItem.tsx | 6 +- .../plugins/NextID/components/NextIdPage.tsx | 77 ++++++++++++++----- .../src/plugins/NextID/locales/en-US.json | 4 + .../twitter.com/utils/selector.ts | 2 + packages/plugin-infra/src/types.ts | 8 +- packages/shared-base/src/NextID/type.ts | 2 +- 12 files changed, 122 insertions(+), 42 deletions(-) diff --git a/packages/mask/src/components/DataSource/useNextID.ts b/packages/mask/src/components/DataSource/useNextID.ts index cc57b68e16ac..dd57fa7e2e58 100644 --- a/packages/mask/src/components/DataSource/useNextID.ts +++ b/packages/mask/src/components/DataSource/useNextID.ts @@ -1,4 +1,4 @@ -import { useAsync, useAsyncRetry } from 'react-use' +import { useAsyncRetry } from 'react-use' import type { NextIDPlatform } from '@masknet/shared-base' import Services from '../../extension/service' import { useMemo, useState } from 'react' @@ -13,15 +13,16 @@ import { useValueRef } from '@masknet/shared' import { queryExistedBindingByPersona, queryExistedBindingByPlatform, queryIsBound } from '@masknet/web3-providers' export const usePersonaBoundPlatform = (personaPublicKey: string) => { - useAsyncRetry(() => { + return useAsyncRetry(() => { return queryExistedBindingByPersona(personaPublicKey) }, [personaPublicKey]) } let isOpenedVerifyDialog = false +let isOpenedFromButton = false export const useNextIDBoundByPlatform = (platform: NextIDPlatform, identity: string) => { - useAsyncRetry(() => { + return useAsyncRetry(() => { return queryExistedBindingByPlatform(platform, identity) }, [platform, identity]) } @@ -45,14 +46,18 @@ export function useNextIDConnectStatus() { lastState.username || (lastRecognized.identifier.isUnknown ? '' : lastRecognized.identifier.userId), ) - const { value: isVerified = false } = useAsync(async () => { + const { value: isVerified = false, retry } = useAsyncRetry(async () => { + if (lastState.status === SetupGuideStep.FindUsername) return true if (isOpenedVerifyDialog) return true if (!enableNextID || !username || !personaConnectStatus.connected) return true const currentPersona = await Services.Settings.getCurrentPersona() if (!currentPersona?.publicHexKey) return true - if (dismissVerifyNextID[ui.networkIdentifier].value[`${username}_${currentPersona.identifier.toText()}`]) + if ( + dismissVerifyNextID[ui.networkIdentifier].value[`${username}_${currentPersona.identifier.toText()}`] && + !isOpenedFromButton + ) return true const platform = ui.configuration.nextIDConfig?.platform as NextIDPlatform | undefined @@ -66,8 +71,15 @@ export function useNextIDConnectStatus() { persona: currentPersona?.identifier.toText(), }) isOpenedVerifyDialog = true + isOpenedFromButton = false return false }, [username, enableNextID, lastStateRef.value]) - return isVerified + return { + isVerified, + reset: () => { + isOpenedVerifyDialog = false + isOpenedFromButton = true + }, + } } diff --git a/packages/mask/src/components/DataSource/usePersonaConnectStatus.ts b/packages/mask/src/components/DataSource/usePersonaConnectStatus.ts index 1d19ebb5e04f..fc4c1833eeea 100644 --- a/packages/mask/src/components/DataSource/usePersonaConnectStatus.ts +++ b/packages/mask/src/components/DataSource/usePersonaConnectStatus.ts @@ -27,13 +27,13 @@ export function usePersonaConnectStatus() { return useMemo(() => { const id = new ProfileIdentifier(activatedSocialNetworkUI.networkIdentifier, lastRecognized.identifier.userId) let connected = false + let currentConnectedPersona personas.forEach((p) => { - p.identifier - if (p.linkedProfiles.get(id)) { - connected = true - } + if (!p.linkedProfiles.get(id)) return + connected = true + currentConnectedPersona = p.publicHexKey }) const action = !personas.length ? createPersona : !connected ? connectPersona : null - return { connected, action, hasPersona: !!personas.length } + return { connected, action, hasPersona: !!personas.length, currentConnectedPersona } }, [personas, lastRecognized, activatedSocialNetworkUI]) } diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx index f608c681722a..83bbe5435764 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx @@ -1,6 +1,7 @@ import { useEffect, useMemo, useState } from 'react' import { useUpdateEffect } from 'react-use' import { first } from 'lodash-unified' +import type { NextIDPlatform } from '@masknet/shared-base' import { Box, CircularProgress } from '@mui/material' import { makeStyles, useStylesExtends } from '@masknet/theme' import { useAddressNames } from '@masknet/web3-shared-evm' @@ -8,7 +9,10 @@ import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor, Plugin, Plugi import { PageTab } from '../InjectedComponents/PageTab' import { useLocationChange } from '../../utils/hooks/useLocationChange' import { MaskMessages, useI18N } from '../../utils' -import { useCurrentVisitingIdentity } from '../DataSource/useActivatedUI' +import { useCurrentVisitingIdentity, useLastRecognizedIdentity } from '../DataSource/useActivatedUI' +import { useNextIDBoundByPlatform } from '../DataSource/useNextID' +import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus' +import { activatedSocialNetworkUI } from '../../social-network' function getTabContent(tabId: string) { return createInjectHooksRenderer(useActivatedPluginsSNSAdaptor.visibility.useAnyMode, (x) => { @@ -39,8 +43,18 @@ export function ProfileTabContent(props: ProfileTabContentProps) { const [hidden, setHidden] = useState(true) const [selectedTab, setSelectedTab] = useState() + const currentIdentity = useLastRecognizedIdentity() const identity = useCurrentVisitingIdentity() + const { currentConnectedPersona } = usePersonaConnectStatus() + const platform = activatedSocialNetworkUI.configuration.nextIDConfig?.platform as NextIDPlatform | 'twitter' const { value: addressNames = [], loading: loadingAddressNames } = useAddressNames(identity) + const { value: personaList = [], loading: loadingPersonaList } = useNextIDBoundByPlatform( + platform as NextIDPlatform, + identity.identifier.userId, + ) + const currentAccountNotConnectPersona = + currentIdentity.identifier.userId === identity.identifier.userId && + personaList.findIndex((persona) => persona?.persona === currentConnectedPersona) === -1 const tabs = useActivatedPluginsSNSAdaptor('any') .flatMap((x) => x.ProfileTabs?.map((y) => ({ ...y, pluginID: x.ID })) ?? []) @@ -81,12 +95,15 @@ export function ProfileTabContent(props: ProfileTabContentProps) { }, [identity]) const ContentComponent = useMemo(() => { - return getTabContent(selectedTabComputed?.ID ?? '') + const tab = currentAccountNotConnectPersona + ? tabs?.find((tab) => tab?.pluginID === PluginId.NextID)?.ID + : selectedTabComputed?.ID + return getTabContent(tab ?? '') }, [selectedTabComputed, identity.identifier]) if (hidden) return null - if (loadingAddressNames) + if (loadingAddressNames || loadingPersonaList) return (
- +
) diff --git a/packages/mask/src/components/InjectedComponents/SetupGuide.tsx b/packages/mask/src/components/InjectedComponents/SetupGuide.tsx index 8af270978eff..25d9bd03e074 100644 --- a/packages/mask/src/components/InjectedComponents/SetupGuide.tsx +++ b/packages/mask/src/components/InjectedComponents/SetupGuide.tsx @@ -128,7 +128,7 @@ function SetupGuideUI(props: SetupGuideUIProps) { const signResult = await Services.Identity.signWithPersona({ method: 'eth', message: payload.signPayload, - identifier: persona_.publicHexKey, + identifier: persona_.identifier.toText(), }) if (!signResult) throw new Error('Failed to sign by persona.') const signature = signResult.signature.signature diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx index 79728142ea19..915d3dd38c8d 100644 --- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx +++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx @@ -84,7 +84,7 @@ export interface ToolboxHintProps { } export function ToolboxHintUnstyled(props: ToolboxHintProps) { const { t } = useI18N() - const isNextIDVerified = useNextIDConnectStatus() + const { isVerified: isNextIDVerified } = useNextIDConnectStatus() const { ListItemButton = MuiListItemButton, ListItemText = MuiListItemText, diff --git a/packages/mask/src/plugins/NextID/SNSAdaptor/index.tsx b/packages/mask/src/plugins/NextID/SNSAdaptor/index.tsx index aee858243f8e..0545a5f10612 100644 --- a/packages/mask/src/plugins/NextID/SNSAdaptor/index.tsx +++ b/packages/mask/src/plugins/NextID/SNSAdaptor/index.tsx @@ -15,7 +15,7 @@ const sns: Plugin.SNSAdaptor.Definition = { label: 'Wallet', priority: 10, UI: { - TabContent: NextIdPage, + TabContent: ({ personaList = [] }) => , }, }, ], diff --git a/packages/mask/src/plugins/NextID/components/BindingItem.tsx b/packages/mask/src/plugins/NextID/components/BindingItem.tsx index 225546f430d7..0d07c9323d96 100644 --- a/packages/mask/src/plugins/NextID/components/BindingItem.tsx +++ b/packages/mask/src/plugins/NextID/components/BindingItem.tsx @@ -1,7 +1,7 @@ import { ChainId, formatEthereumAddress } from '@masknet/web3-shared-evm' import { Box, Link, Stack, Typography } from '@mui/material' import { memo } from 'react' -import { Platform } from '../types' +import { NextIDPlatform } from '@masknet/shared-base' import { DeleteIcon } from '@masknet/icons' import { makeStyles } from '@masknet/theme' import { CopyIconButton } from './CopyIconButton' @@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({ }, })) interface Item { - platform: Platform + platform: NextIDPlatform identity: string enableAction: boolean onUnBind(address: string): void @@ -54,7 +54,7 @@ export const BindingItem = memo(({ platform, identity, enableAction, onUnB const { classes } = useStyles() const networkDescriptor = useNetworkDescriptor(ChainId.Mainnet, NetworkPluginID.PLUGIN_EVM) - if (platform === Platform.ethereum) { + if (platform === NextIDPlatform.Ethereum) { return ( ({ tip: { @@ -29,14 +34,17 @@ const useStyles = makeStyles()((theme) => ({ }, })) -interface NextIDPageProps {} +interface NextIDPageProps { + personaList: NextIDPersonaBindings[] +} -export function NextIdPage({}: NextIDPageProps) { +export function NextIdPage({ personaList }: NextIDPageProps) { const t = useI18N() const { classes } = useStyles() const currentProfileIdentifier = useLastRecognizedIdentity() const visitingPersonaIdentifier = useCurrentVisitingIdentity() const personaConnectStatus = usePersonaConnectStatus() + const { reset, isVerified } = useNextIDConnectStatus() const [openBindDialog, toggleBindDialog] = useState(false) const [unbindAddress, setUnBindAddress] = useState() @@ -56,22 +64,31 @@ export function NextIdPage({}: NextIDPageProps) { }, [personaConnectStatus, t]) const { value: currentPersona, loading: loadingPersona } = useAsyncRetry(() => { - if (!currentProfileIdentifier) return Promise.resolve(undefined) - return Services.Identity.queryPersonaByProfile(currentProfileIdentifier.identifier) - }, [currentProfileIdentifier, personaConnectStatus.hasPersona]) + if (!visitingPersonaIdentifier) return Promise.resolve(undefined) + return Services.Identity.queryPersonaByProfile(visitingPersonaIdentifier.identifier) + }, [visitingPersonaIdentifier, personaConnectStatus.hasPersona]) + + const { value: isAccountVerified, loading: loadingVerifyInfo } = useAsync(() => { + if (!currentPersona) return Promise.resolve(undefined) + const platform = activatedSocialNetworkUI.configuration.nextIDConfig?.platform as NextIDPlatform + return queryIsBound( + currentPersona.publicHexKey as string, + platform, + visitingPersonaIdentifier.identifier.userId, + ) + }, [isOwn, currentPersona, visitingPersonaIdentifier, isVerified]) const { value: bindings, loading } = useAsync(async () => { if (!currentPersona) return - if (isOwn) { - return Services.Helper.queryExistedBinding(currentPersona.identifier) - } + return queryExistedBindingByPersona(currentPersona.publicHexKey!) + }, [currentPersona, isOwn, count]) - if (!visitingPersonaIdentifier) return null - const visitingPersona = await Services.Identity.queryPersonaByProfile(visitingPersonaIdentifier.identifier) - - if (!visitingPersona) return null - return Services.Helper.queryExistedBinding(visitingPersona.identifier) - }, [currentPersona, count, visitingPersonaIdentifier, isOwn]) + const onVerify = async () => { + const firstTab = searchAllProfileTabSelector().evaluate()?.querySelector('div')?.parentNode + ?.firstChild as HTMLElement + firstTab.click() + reset() + } if (personaActionButton) { return ( @@ -81,7 +98,7 @@ export function NextIdPage({}: NextIDPageProps) { ) } - if (loading || loadingPersona) { + if (loading || loadingPersona || loadingVerifyInfo) { return ( <> {Array.from({ length: 2 }) @@ -95,7 +112,31 @@ export function NextIdPage({}: NextIDPageProps) { ) } - if (bindings?.proofs.length) { + if (!isAccountVerified) { + return ( + + {isOwn ? ( + + {t.verify_Twitter_ID_intro()} + {t.verify_Twitter_ID()} + + ) : ( + + {t.verify_other_Twitter_ID_intro()} + + )} + {isOwn && ( + + + + )} + + ) + } + + if (bindings?.proofs.filter((proof) => proof.platform === NextIDPlatform.Ethereum).length) { return ( <> @@ -104,7 +145,7 @@ export function NextIdPage({}: NextIDPageProps) { diff --git a/packages/mask/src/plugins/NextID/locales/en-US.json b/packages/mask/src/plugins/NextID/locales/en-US.json index 76d04704bc3a..e73d5a0cd6bd 100644 --- a/packages/mask/src/plugins/NextID/locales/en-US.json +++ b/packages/mask/src/plugins/NextID/locales/en-US.json @@ -5,6 +5,10 @@ "connect_wallet__other_user_tip_intro": "Currently no wallet is bound by this account.", "connect_wallet_tip_intro": "Connect your wallet here.", "connect_wallet_tip": "In this Web 3 section, you can show your address for receiving tips, your NFT collection, donation records, and other on-chain information to friends who have installed Mask Network.", + "verify_Twitter_ID_intro": "Verify your Twitter ID here.", + "verify_Twitter_ID": "In this Next.ID section, you need to verify your Twitter ID to use Next.ID-based products.", + "verify_other_Twitter_ID_intro": "This user has not connected wallets here.", + "verify_Twitter_ID_button": "Verify your Twitter ID", "verify_wallet_button": "Verify your wallet", "add_wallet_button": "Add wallet", "verify_wallet_dialog_title": "Verify your wallet", diff --git a/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts index 3cfa83227e68..c4edb56eb9ec 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/utils/selector.ts @@ -33,6 +33,8 @@ export const searchProfileActiveTabSelector: () => LiveSelector = () => querySelector('[aria-label][role="navigation"] [role="tablist"] [role="tab"][aria-selected="true"]') export const searchProfileTabSelector: () => LiveSelector = () => querySelector('[aria-label][role="navigation"] [role="tablist"] [role="tab"][aria-selected="false"]') +export const searchAllProfileTabSelector: () => LiveSelector = () => + querySelector('[aria-label][role="navigation"] [role="tablist"] [role="tab"]') export const searchAppBarBackSelector: () => LiveSelector = () => querySelector('[data-testid="app-bar-back"] > div') export const searchProfileActiveTabStatusLineSelector: () => LiveSelector = () => diff --git a/packages/plugin-infra/src/types.ts b/packages/plugin-infra/src/types.ts index 479f0e1a69bb..b49e94586d2c 100644 --- a/packages/plugin-infra/src/types.ts +++ b/packages/plugin-infra/src/types.ts @@ -2,7 +2,7 @@ import type React from 'react' import type { Option, Result } from 'ts-results' import type { TypedMessage, TypedMessageTuple } from '@masknet/typed-message' -import type { ScopedStorage, ProfileIdentifier, PersonaIdentifier } from '@masknet/shared-base' +import type { ScopedStorage, ProfileIdentifier, PersonaIdentifier, NextIDPersonaBindings } from '@masknet/shared-base' import type { Emitter } from '@servie/events' import type { Web3Plugin } from './web3-types' import type { Subscription } from 'use-subscription' @@ -405,7 +405,11 @@ export namespace Plugin.SNSAdaptor { /** * The injected tab content */ - TabContent: InjectUI<{ identity?: ProfileIdentity; addressNames?: ProfileAddress[] }> + TabContent: InjectUI<{ + identity?: ProfileIdentity + addressNames?: ProfileAddress[] + personaList?: NextIDPersonaBindings[] + }> } Utils?: { /** diff --git a/packages/shared-base/src/NextID/type.ts b/packages/shared-base/src/NextID/type.ts index c80d44f9528d..b24bd525cd2a 100644 --- a/packages/shared-base/src/NextID/type.ts +++ b/packages/shared-base/src/NextID/type.ts @@ -19,7 +19,7 @@ export interface NextIDPayload { export interface NextIDPersonaBindings { persona: string proofs: { - platform: string + platform: NextIDPlatform identity: string }[] } From d98671e675e506206e1bb45acf64800c9d0f6f90 Mon Sep 17 00:00:00 2001 From: Randolph Chen Date: Mon, 7 Mar 2022 14:55:40 +0800 Subject: [PATCH 02/11] feat: add confirm dialog when unbinding wallet --- .../plugins/NextID/components/NextIdPage.tsx | 6 +- .../NextID/components/UnbindConfirm.tsx | 74 +++++++++++++++++++ .../NextID/components/UnbindDialog.tsx | 43 ++++++----- .../src/plugins/NextID/locales/en-US.json | 9 ++- .../src/plugins/NextID/locales/qya-AA.json | 1 - .../src/plugins/NextID/locales/zh-CN.json | 1 - 6 files changed, 109 insertions(+), 25 deletions(-) create mode 100644 packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx diff --git a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx index 0492b7c46025..b942304f0a65 100644 --- a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx +++ b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx @@ -122,7 +122,7 @@ export function NextIdPage({ personaList }: NextIDPageProps) { ) : ( - {t.verify_other_Twitter_ID_intro()} + {t.connect_wallet__other_user_tip_intro()} )} {isOwn && ( @@ -186,8 +186,8 @@ export function NextIdPage({ personaList }: NextIDPageProps) { {isOwn ? ( - {t.connect_wallet_tip_intro()} - {t.connect_wallet_tip()} + {t.verify_wallet_intro()} + {t.verify_wallet()} ) : ( diff --git a/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx b/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx new file mode 100644 index 000000000000..9118d6ecac0e --- /dev/null +++ b/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx @@ -0,0 +1,74 @@ +import { memo, useState } from 'react' +import { Box, DialogContent, Button } from '@mui/material' +import { useI18N } from '../locales' +import { makeStyles, MaskDialog } from '@masknet/theme' + +const useStyles = makeStyles()((theme) => ({ + wrapper: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'column', + padding: '24px !important', + }, + wrapper1: { + width: '320px !important', + }, + title: { + fontSize: '16px', + fontWeight: 500, + marginBottom: '24px', + }, + content: { + marginBottom: '36px', + }, + confirmButton: { + width: '100%', + marginBottom: '16px', + backgroundColor: 'red', + color: 'white', + }, + cancelButton: { + width: '100%', + marginBottom: '16px', + }, +})) + +interface UnbindConfirmProps { + unbindAddress: string + onClose(): void + onConfirm(): void +} + +export enum DialogTabs { + persona = 0, + wallet = 1, +} + +export const UnbindConfirm = memo(({ onClose, unbindAddress, onConfirm }) => { + const t = useI18N() + const { classes } = useStyles() + + const [isShow, setIsShow] = useState(true) + + const handleConfirm = () => { + onConfirm() + setIsShow(false) + } + return ( + + + + Delete {unbindAddress.slice(0, 8)}...{unbindAddress.slice(-4)} ？ + + {t.disconnect_warning()} + + + + + ) +}) diff --git a/packages/mask/src/plugins/NextID/components/UnbindDialog.tsx b/packages/mask/src/plugins/NextID/components/UnbindDialog.tsx index 01da663f65a5..0c81b7d761ac 100644 --- a/packages/mask/src/plugins/NextID/components/UnbindDialog.tsx +++ b/packages/mask/src/plugins/NextID/components/UnbindDialog.tsx @@ -1,4 +1,4 @@ -import { memo } from 'react' +import { memo, useState } from 'react' import { useI18N } from '../locales' import { useAsyncRetry } from 'react-use' import Services from '../../../extension/service' @@ -11,6 +11,7 @@ import { useWalletSign } from '../hooks/useWalletSign' import { useBindPayload } from '../hooks/useBindPayload' import { delay } from '@dimensiondev/kit' import { UnbindPanelUI } from './UnbindPanelUI' +import { UnbindConfirm } from './UnbindConfirm' interface VerifyWalletDialogProps { unbindAddress: string @@ -23,6 +24,9 @@ interface VerifyWalletDialogProps { export const UnbindDialog = memo(({ unbindAddress, onClose, persona, onUnBind, bounds }) => { const account = useAccount() const t = useI18N() + + const [openSecondDialog, toggleSecondDialog] = useState(false) + const { showSnackbar } = useCustomSnackbar() const currentIdentifier = persona.identifier const isBound = !!bounds.find((x) => isSameAddress(x.identity, unbindAddress)) @@ -58,22 +62,25 @@ export const UnbindDialog = memo(({ unbindAddress, onCl }, [walletSignState.value, personaSignState.value, unbindAddress]) return ( - + <> + toggleSecondDialog(true)} onClose={onClose} /> + + ) }) diff --git a/packages/mask/src/plugins/NextID/locales/en-US.json b/packages/mask/src/plugins/NextID/locales/en-US.json index e73d5a0cd6bd..3252f9cb2711 100644 --- a/packages/mask/src/plugins/NextID/locales/en-US.json +++ b/packages/mask/src/plugins/NextID/locales/en-US.json @@ -2,9 +2,11 @@ "wallet": "Wallet", "persona": "Persona", "unsupported_network": "Unsupported Network", - "connect_wallet__other_user_tip_intro": "Currently no wallet is bound by this account.", + "connect_wallet__other_user_tip_intro": "Wallets not found. You can try as following:Broswer user's tweets;Get persona information by requiring this user to post encrypted tweets.If doesn't work, this user might not connect wallets yet.", "connect_wallet_tip_intro": "Connect your wallet here.", "connect_wallet_tip": "In this Web 3 section, you can show your address for receiving tips, your NFT collection, donation records, and other on-chain information to friends who have installed Mask Network.", + "verify_wallet_intro": "Verify your wallet here.", + "verify_wallet": "In this Web 3 section, you can show your address for receiving tips, your NFT collection, donation records, and other on-chain information to friends who have installed Mask Network.", "verify_Twitter_ID_intro": "Verify your Twitter ID here.", "verify_Twitter_ID": "In this Next.ID section, you need to verify your Twitter ID to use Next.ID-based products.", "verify_other_Twitter_ID_intro": "This user has not connected wallets here.", @@ -35,5 +37,8 @@ "unbind_persona_tip": "Choose either your Persona or the currently bound wallet to sign to unbind.", "unbind_wallet_tip": "Choose either your Persona or the currently bound wallet to sign to unbind.", "done": "Done", - "copy_success_of_wallet_address": "Copy wallet address successfully!" + "confirm": "Confirm", + "cancel": "Cancel", + "copy_success_of_wallet_address": "Copy wallet address successfully!", + "disconnect_warning": "This wallet will no longer show up in your web 3 profile page. Your Mask friends can no longer give tips to this wallet, or browse NFTs, donations and other on-chain information of this address." } diff --git a/packages/mask/src/plugins/NextID/locales/qya-AA.json b/packages/mask/src/plugins/NextID/locales/qya-AA.json index 5aabd852643b..cd5ef7eba5c3 100644 --- a/packages/mask/src/plugins/NextID/locales/qya-AA.json +++ b/packages/mask/src/plugins/NextID/locales/qya-AA.json @@ -2,7 +2,6 @@ "wallet": "crwdns13073:0crwdne13073:0", "persona": "crwdns13075:0crwdne13075:0", "unsupported_network": "crwdns13077:0crwdne13077:0", - "connect_wallet__other_user_tip_intro": "crwdns13225:0crwdne13225:0", "connect_wallet_tip_intro": "crwdns13079:0crwdne13079:0", "connect_wallet_tip": "crwdns13081:0crwdne13081:0", "verify_wallet_button": "crwdns13083:0crwdne13083:0", diff --git a/packages/mask/src/plugins/NextID/locales/zh-CN.json b/packages/mask/src/plugins/NextID/locales/zh-CN.json index b2dde6c40a0e..5cdba45da057 100644 --- a/packages/mask/src/plugins/NextID/locales/zh-CN.json +++ b/packages/mask/src/plugins/NextID/locales/zh-CN.json @@ -2,7 +2,6 @@ "wallet": "钱包", "persona": "身份", "unsupported_network": "此网络尚不支持", - "connect_wallet__other_user_tip_intro": "目前此账号未绑定任何钱包。", "connect_wallet_tip_intro": "在此绑定您的钱包。", "connect_wallet_tip": "在 Web3 中，您可以展示接收打赏的地址，NFT 收藏品，捐赠记录和其他链上信息给已安装Mask Network的好友。", "verify_wallet_button": "验证您的钱包", From d331f44c3f3906b606e93cb30b0dca59f08e69cf Mon Sep 17 00:00:00 2001 From: Randolph Chen Date: Mon, 7 Mar 2022 16:29:57 +0800 Subject: [PATCH 03/11] feat: refresh component when switching tabs --- .../src/components/DataSource/useNextID.ts | 2 +- .../plugins/NextID/components/NextIdPage.tsx | 45 +++++++++++++++---- .../src/plugins/NextID/locales/en-US.json | 6 ++- pnpm-lock.yaml | 2 +- 4 files changed, 43 insertions(+), 12 deletions(-) diff --git a/packages/mask/src/components/DataSource/useNextID.ts b/packages/mask/src/components/DataSource/useNextID.ts index dd57fa7e2e58..9cab6f3857b8 100644 --- a/packages/mask/src/components/DataSource/useNextID.ts +++ b/packages/mask/src/components/DataSource/useNextID.ts @@ -73,7 +73,7 @@ export function useNextIDConnectStatus() { isOpenedVerifyDialog = true isOpenedFromButton = false return false - }, [username, enableNextID, lastStateRef.value]) + }, [username, enableNextID, lastStateRef.value, isOpenedVerifyDialog, isOpenedFromButton]) return { isVerified, diff --git a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx index b942304f0a65..d7c0676aeb60 100644 --- a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx +++ b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx @@ -11,10 +11,10 @@ import { BindingItem } from './BindingItem' import { UnbindDialog } from './UnbindDialog' import { useCurrentVisitingIdentity, useLastRecognizedIdentity } from '../../../components/DataSource/useActivatedUI' import { usePersonaConnectStatus } from '../../../components/DataSource/usePersonaConnectStatus' -import { searchAllProfileTabSelector } from '../../../social-network-adaptor/twitter.com/utils/selector' import { queryIsBound, queryExistedBindingByPersona } from '@masknet/web3-providers' import { activatedSocialNetworkUI } from '../../../social-network' import { useNextIDConnectStatus } from '../../../components/DataSource/useNextID' +import { searchAllProfileTabSelector } from '../../../social-network-adaptor/twitter.com/utils/selector' const useStyles = makeStyles()((theme) => ({ tip: { @@ -25,6 +25,19 @@ const useStyles = makeStyles()((theme) => ({ alignItems: 'center', color: theme.palette.text.primary, }, + verifyIntro: { + fontWeight: 600, + marginBottom: '12px', + }, + verifyDetail: { + fontWeight: 600, + color: '#536471', + }, + verifyWarning: { + fontWeight: 600, + color: '#536471', + marginTop: '12px', + }, skeleton: { borderRadius: 8, margin: theme.spacing(1), @@ -45,6 +58,7 @@ export function NextIdPage({ personaList }: NextIDPageProps) { const visitingPersonaIdentifier = useCurrentVisitingIdentity() const personaConnectStatus = usePersonaConnectStatus() const { reset, isVerified } = useNextIDConnectStatus() + const [refresh, toggleRefresh] = useState(true) const [openBindDialog, toggleBindDialog] = useState(false) const [unbindAddress, setUnBindAddress] = useState() @@ -84,10 +98,11 @@ export function NextIdPage({ personaList }: NextIDPageProps) { }, [currentPersona, isOwn, count]) const onVerify = async () => { + reset() const firstTab = searchAllProfileTabSelector().evaluate()?.querySelector('div')?.parentNode ?.firstChild as HTMLElement firstTab.click() - reset() + toggleRefresh((pre) => !pre) } if (personaActionButton) { @@ -117,12 +132,19 @@ export function NextIdPage({ personaList }: NextIDPageProps) { {isOwn ? ( - {t.verify_Twitter_ID_intro()} - {t.verify_Twitter_ID()} + {t.verify_Twitter_ID_intro()} + {t.verify_Twitter_ID()} ) : ( - {t.connect_wallet__other_user_tip_intro()} + + {t.connect_wallet__other_user_tip_intro()} + + {t.connect_wallet_other_user_tip1()} + {t.connect_wallet_other_user_tip2()} + + {t.connect_wallet_other_user_warning()} + )} {isOwn && ( @@ -186,12 +208,19 @@ export function NextIdPage({ personaList }: NextIDPageProps) { {isOwn ? ( - {t.verify_wallet_intro()} - {t.verify_wallet()} + {t.verify_wallet_intro()} + {t.verify_wallet()} ) : ( - {t.connect_wallet__other_user_tip_intro()} + + {t.connect_wallet__other_user_tip_intro()} + + {t.connect_wallet_other_user_tip1()} + {t.connect_wallet_other_user_tip2()} + + {t.connect_wallet_other_user_warning()} + )} {isOwn && ( diff --git a/packages/mask/src/plugins/NextID/locales/en-US.json b/packages/mask/src/plugins/NextID/locales/en-US.json index 169e0965e6ee..e7f0ceb8addb 100644 --- a/packages/mask/src/plugins/NextID/locales/en-US.json +++ b/packages/mask/src/plugins/NextID/locales/en-US.json @@ -2,8 +2,10 @@ "wallet": "Wallet", "persona": "Persona", "unsupported_network": "Unsupported Network", - "connect_wallet__other_user_tip_intro": "Wallets not found. You can try as following:Broswer user's tweets;Get persona information by requiring this user to post encrypted tweets.If doesn't work, this user might not connect wallets yet.", - "connect_wallet_tip_intro": "Connect your wallet here.", + "connect_wallet__other_user_tip_intro": "Wallets not found. You can try as following", + "connect_wallet_other_user_tip1": "1. Broswer user’s tweets;", + "connect_wallet_other_user_tip2": "2. Get persona information by requiring this user to post encrypted tweets.", + "connect_wallet_other_user_warning": "If doesn’t work, this user might not connect wallets yet.", "connect_wallet_tip": "In this Web 3 section, you can show your address for receiving tips, your NFT collection, donation records, and other on-chain information to friends who have installed Mask Network.", "verify_wallet_intro": "Verify your wallet here.", "verify_wallet": "In this Web 3 section, you can show your address for receiving tips, your NFT collection, donation records, and other on-chain information to friends who have installed Mask Network.", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cdb96108fd71..e4dd4c34be10 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18477,7 +18477,7 @@ packages: /jsonfile/4.0.0: resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=} optionalDependencies: - graceful-fs: 4.2.8 + graceful-fs: 4.2.9 /jsonfile/6.1.0: resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} From ef52eb9070436c226ec1751eb70093176c9d60e9 Mon Sep 17 00:00:00 2001 From: Randolph Chen Date: Tue, 8 Mar 2022 14:53:39 +0800 Subject: [PATCH 04/11] feat: update copywriting and color --- .../plugins/NextID/components/NextIdPage.tsx | 24 +++++++++---------- .../NextID/components/UnbindConfirm.tsx | 4 ++-- .../src/plugins/NextID/locales/en-US.json | 13 +++++----- 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx index d7c0676aeb60..1027e5aab586 100644 --- a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx +++ b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx @@ -2,7 +2,6 @@ import { useI18N } from '../locales' import { makeStyles } from '@masknet/theme' import { Box, Button, Skeleton, Stack, Typography } from '@mui/material' import { NextIDPlatform } from '@masknet/shared-base' -import type { NextIDPersonaBindings } from '@masknet/shared-base' import { useMemo, useState } from 'react' import { BindDialog } from './BindDialog' import { useAsync, useAsyncRetry, useCounter } from 'react-use' @@ -31,12 +30,11 @@ const useStyles = makeStyles()((theme) => ({ }, verifyDetail: { fontWeight: 600, - color: '#536471', + color: theme.palette.grey[700], }, - verifyWarning: { + verifyInstruction: { fontWeight: 600, - color: '#536471', - marginTop: '12px', + color: theme.palette.grey[700], }, skeleton: { borderRadius: 8, @@ -48,7 +46,7 @@ const useStyles = makeStyles()((theme) => ({ })) interface NextIDPageProps { - personaList: NextIDPersonaBindings[] + personaList: string[] } export function NextIdPage({ personaList }: NextIDPageProps) { @@ -140,11 +138,11 @@ export function NextIdPage({ personaList }: NextIDPageProps) { {t.connect_wallet__other_user_tip_intro()} + + {t.connect_wallet_other_user_instruction()} + {t.connect_wallet_other_user_tip1()} {t.connect_wallet_other_user_tip2()} - - {t.connect_wallet_other_user_warning()} - )} {isOwn && ( @@ -167,7 +165,7 @@ export function NextIdPage({ personaList }: NextIDPageProps) { @@ -216,11 +214,11 @@ export function NextIdPage({ personaList }: NextIDPageProps) { {t.connect_wallet__other_user_tip_intro()} + + {t.connect_wallet_other_user_instruction()} + {t.connect_wallet_other_user_tip1()} {t.connect_wallet_other_user_tip2()} - - {t.connect_wallet_other_user_warning()} - )} {isOwn && ( diff --git a/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx b/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx index 9118d6ecac0e..a50ab17964a3 100644 --- a/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx +++ b/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx @@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme) => ({ width: '100%', marginBottom: '16px', backgroundColor: 'red', - color: 'white', + color: theme.palette.common.white, }, cancelButton: { width: '100%', @@ -59,7 +59,7 @@ export const UnbindConfirm = memo(({ onClose, unbindAddress, - Delete {unbindAddress.slice(0, 8)}...{unbindAddress.slice(-4)} ？ + {t.delete()} {unbindAddress.slice(0, 8)}...{unbindAddress.slice(-4)} ？ {t.disconnect_warning()}