From 00f65f9edcd30c575d369b223535114a043f9fd5 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 20 Apr 2022 19:34:09 +0800 Subject: [PATCH 01/32] feat: split wallet app entries --- .../InjectedComponents/ToolboxUnstyled.tsx | 46 +++++++++++++++++++ .../components/shared/ApplicationBoard.tsx | 12 ++++- .../shared/ApplicationBoardDialog.tsx | 40 ++++++++++++++++ .../SNSAdaptor/WalletStatusDialog/index.tsx | 3 -- .../src/plugins/Wallet/SNSAdaptor/index.tsx | 2 + .../facebook.com/injection/Toolbar.tsx | 2 +- .../minds.com/injection/ToolboxHint.tsx | 2 +- .../twitter.com/injection/ToolboxHint.tsx | 7 +-- .../twitter.com/injection/ToolboxHint_UI.tsx | 3 +- packages/mask/src/social-network/types.ts | 2 +- packages/mask/src/social-network/ui.ts | 5 +- packages/plugins/Wallet/src/messages.ts | 9 ++++ 12 files changed, 121 insertions(+), 12 deletions(-) create mode 100644 packages/mask/src/components/shared/ApplicationBoardDialog.tsx diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx index 2f6303e1c2b9..c3963be82898 100644 --- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx +++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx @@ -82,8 +82,54 @@ export interface ToolboxHintProps { iconSize?: number badgeSize?: number mini?: boolean + category?: 'wallet' | 'application' } export function ToolboxHintUnstyled(props: ToolboxHintProps) { + return props.category === 'wallet' ? : +} + +function ToolboxHintForApplication(props: ToolboxHintProps) { + const { + ListItemButton = MuiListItemButton, + Container = 'div', + Typography = MuiTypography, + iconSize = 24, + mini, + ListItemText = MuiListItemText, + } = props + const { classes } = useStyles() + const { t } = useI18N() + const { openDialog } = useRemoteControlledDialog(WalletMessages.events.ApplicationDialogUpdated) + return ( + + + + {mini ? null : ( + + {t('mask_network')} + + } + /> + )} + + + ) +} + +function ToolboxHintForWallet(props: ToolboxHintProps) { const { t } = useI18N() const nextIDConnectStatus = useNextIDConnectStatus() const { diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index c11b082171c5..da65ef8a7f22 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -1,4 +1,5 @@ import { Fragment, useState, useMemo } from 'react' +import { Close as CloseIcon } from '@mui/icons-material' import { makeStyles, getMaskColor } from '@masknet/theme' import { Typography, useTheme } from '@mui/material' import { useChainId } from '@masknet/web3-shared-evm' @@ -34,6 +35,7 @@ const useStyles = makeStyles()((theme) => { }, }, subTitle: { + cursor: 'default', fontSize: 18, lineHeight: '24px', fontWeight: 600, @@ -66,10 +68,17 @@ const useStyles = makeStyles()((theme) => { placeholder: { color: getMaskColor(theme).textLight, }, + closeIcon: { + cursor: 'pointer', + }, } }) -export function ApplicationBoard() { +interface Props { + closeDialog(): void +} + +export function ApplicationBoard(props: Props) { const { classes } = useStyles() const theme = useTheme() const { t } = useI18N() @@ -116,6 +125,7 @@ export function ApplicationBoard() { return ( <>
+ {t('applications')} { + return { + content: { + padding: theme.spacing(2.5), + }, + } +}) + +export function ApplicationBoardDialog() { + const { classes } = useStyles() + + const { open, closeDialog: _closeDialog } = useRemoteControlledDialog( + WalletMessages.events.ApplicationDialogUpdated, + ) + + const closeDialog = useCallback(() => { + _closeDialog() + CrossIsolationMessages.events.requestComposition.sendToLocal({ + reason: 'timeline', + open: false, + }) + }, []) + + return ( + + + + + + ) +} diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx index 5369a8dc9170..1cc04823e2cb 100644 --- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx +++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx @@ -9,7 +9,6 @@ import { makeStyles } from '@masknet/theme' import { WalletStatusBox } from '../../../../components/shared/WalletStatusBox' import { useI18N } from '../../../../utils' import { WalletMessages } from '../../messages' -import { ApplicationBoard } from '../../../../components/shared/ApplicationBoard' const useStyles = makeStyles()((theme) => ({ content: { @@ -65,9 +64,7 @@ export function WalletStatusDialog(props: WalletStatusDialogProps) { return ( - {t('wallets')} - {!props.isDashboard && } {!chainIdValid ? ( diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/index.tsx index 25751a58a88b..61aac56e2886 100644 --- a/packages/mask/src/plugins/Wallet/SNSAdaptor/index.tsx +++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/index.tsx @@ -12,6 +12,7 @@ import { WalletRiskWarningDialog } from './RiskWarningDialog' import { GasSettingDialog } from './GasSettingDialog' import { TransactionSnackbar } from './TransactionSnackbar' import { RestoreLegacyWalletDialog } from './RestoreLegacyWalletDialog' +import { ApplicationBoardDialog } from '../../../components/shared/ApplicationBoardDialog' const sns: Plugin.SNSAdaptor.Definition = { ...base, @@ -24,6 +25,7 @@ const sns: Plugin.SNSAdaptor.Definition = { + diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx index 02d4ee6675d8..7a3b239b9b00 100644 --- a/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx +++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx @@ -3,7 +3,7 @@ import { createReactRootShadowed } from '../../../utils/shadow-root/renderInShad import { startWatch } from '../../../utils/watcher' import { toolBoxInSideBarSelector } from '../utils/selector' import { ToolboxAtFacebook } from './ToolbarUI' -export function injectToolboxHintAtFacebook(signal: AbortSignal) { +export function injectToolboxHintAtFacebook(signal: AbortSignal, category: 'wallet' | 'application') { const watcher = new MutationObserverWatcher(toolBoxInSideBarSelector()) startWatch(watcher, signal) createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint.tsx index 1b9eda499090..066f378039d9 100644 --- a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint.tsx +++ b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint.tsx @@ -4,7 +4,7 @@ import { startWatch } from '../../../utils/watcher' import { toolBoxInSideBarSelector } from '../utils/selector' import { ToolboxHintAtMinds } from './ToolboxHint_UI' -export function injectToolboxHintAtMinds(signal: AbortSignal) { +export function injectToolboxHintAtMinds(signal: AbortSignal, category: 'wallet' | 'application') { const watcher = new MutationObserverWatcher(toolBoxInSideBarSelector()) startWatch(watcher, signal) createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint.tsx index 6043bfa62af7..ce817fb80aa4 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint.tsx @@ -3,11 +3,12 @@ import { createReactRootShadowed } from '../../../utils/shadow-root/renderInShad import { sideBarProfileSelector, toolBoxInSideBarSelector } from '../utils/selector' import { startWatch } from '../../../utils/watcher' import { ProfileLinkAtTwitter, ToolboxHintAtTwitter } from './ToolboxHint_UI' -export function injectToolboxHintAtTwitter(signal: AbortSignal) { +export function injectToolboxHintAtTwitter(signal: AbortSignal, category: 'wallet' | 'application') { const watcher = new MutationObserverWatcher(toolBoxInSideBarSelector()) startWatch(watcher, signal) - createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() - + createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render( + , + ) injectProfile(signal) } diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx index bb80d716e12f..c15c32e1485d 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx @@ -35,7 +35,7 @@ const Icon = styled(ListItemIcon)` min-width: 0; ` -export function ToolboxHintAtTwitter() { +export function ToolboxHintAtTwitter(props: { category: 'wallet' | 'application' }) { const mini = useMediaQuery(`(max-width: ${twitterBreakPoint}px)`) return ( ) } diff --git a/packages/mask/src/social-network/types.ts b/packages/mask/src/social-network/types.ts index fe490c14eec0..b824adea656e 100644 --- a/packages/mask/src/social-network/types.ts +++ b/packages/mask/src/social-network/types.ts @@ -115,7 +115,7 @@ export namespace SocialNetworkUI { /** Add custom actions buttons to the post */ postActions?(signal: AbortSignal, author: PostInfo): void /** Inject a tool box that displayed in the navigation bar of the SNS */ - toolbox?(signal: AbortSignal): void + toolbox?(signal: AbortSignal, category: 'wallet' | 'application'): void /** Inject the UI that used to notify if the user has not completely setup the current network. */ setupPrompt?(signal: AbortSignal): void /** diff --git a/packages/mask/src/social-network/ui.ts b/packages/mask/src/social-network/ui.ts index 17bcb1515265..4507336972a4 100644 --- a/packages/mask/src/social-network/ui.ts +++ b/packages/mask/src/social-network/ui.ts @@ -86,7 +86,10 @@ export async function activateSocialNetworkUIInner(ui_deferred: SocialNetworkUI. startPostListener() ui.collecting.currentVisitingIdentityProvider?.start(signal) ui.injection.pageInspector?.(signal) - if (Flags.toolbox_enabled) ui.injection.toolbox?.(signal) + if (Flags.toolbox_enabled) { + ui.injection.toolbox?.(signal, 'wallet') + ui.injection.toolbox?.(signal, 'application') + } ui.injection.setupPrompt?.(signal) ui.injection.newPostComposition?.start?.(signal) ui.injection.searchResult?.(signal) diff --git a/packages/plugins/Wallet/src/messages.ts b/packages/plugins/Wallet/src/messages.ts index 74d0ee0e1780..17ee5dc87e22 100644 --- a/packages/plugins/Wallet/src/messages.ts +++ b/packages/plugins/Wallet/src/messages.ts @@ -63,6 +63,10 @@ export type WalletStatusDialogEvent = { open: boolean } +export type ApplicationDialogEvent = { + open: boolean +} + export type GasSettingDialogEvent = { open: boolean gasLimit: number @@ -150,6 +154,11 @@ export interface WalletMessage { */ walletStatusDialogUpdated: WalletStatusDialogEvent + /** + * Application dialog + */ + ApplicationDialogUpdated: ApplicationDialogEvent + /** * Wallet status dialog */ From 49576510a1f11f3cf4ceba151d8ebbc128f8dba4 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 20 Apr 2022 19:37:46 +0800 Subject: [PATCH 02/32] chore: type --- .../mask/src/components/InjectedComponents/ToolboxUnstyled.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx index c3963be82898..4c61149181d1 100644 --- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx +++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx @@ -82,7 +82,7 @@ export interface ToolboxHintProps { iconSize?: number badgeSize?: number mini?: boolean - category?: 'wallet' | 'application' + category: 'wallet' | 'application' } export function ToolboxHintUnstyled(props: ToolboxHintProps) { return props.category === 'wallet' ? : From 9653259b193e6e6c6f5937e175c71035d2d0edea Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 20 Apr 2022 19:44:18 +0800 Subject: [PATCH 03/32] chore: type --- .../social-network-adaptor/facebook.com/injection/Toolbar.tsx | 4 +++- .../facebook.com/injection/ToolbarUI.tsx | 3 ++- .../minds.com/injection/ToolboxHint.tsx | 4 +++- .../minds.com/injection/ToolboxHint_UI.tsx | 3 ++- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx index 7a3b239b9b00..0271d175348d 100644 --- a/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx +++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx @@ -6,5 +6,7 @@ import { ToolboxAtFacebook } from './ToolbarUI' export function injectToolboxHintAtFacebook(signal: AbortSignal, category: 'wallet' | 'application') { const watcher = new MutationObserverWatcher(toolBoxInSideBarSelector()) startWatch(watcher, signal) - createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() + createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render( + , + ) } diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx index 0c37fe697914..da7d3003887c 100644 --- a/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx +++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx @@ -23,7 +23,7 @@ const Icon = styled(ListItemIcon)` } ` -export function ToolboxAtFacebook() { +export function ToolboxAtFacebook(props: { category: 'wallet' | 'application' }) { const isSmall = useMediaQuery(`(max-height: ${fbBreakPoint}px)`) return ( ) } diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint.tsx index 066f378039d9..edda621ee3e8 100644 --- a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint.tsx +++ b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint.tsx @@ -7,5 +7,7 @@ import { ToolboxHintAtMinds } from './ToolboxHint_UI' export function injectToolboxHintAtMinds(signal: AbortSignal, category: 'wallet' | 'application') { const watcher = new MutationObserverWatcher(toolBoxInSideBarSelector()) startWatch(watcher, signal) - createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() + createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render( + , + ) } diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx index b40102b29cbb..de15d87e68eb 100644 --- a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx +++ b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx @@ -40,7 +40,7 @@ const Icon = styled(ListItemIcon)` } ` -export function ToolboxHintAtMinds() { +export function ToolboxHintAtMinds(props: { category: 'wallet' | 'application' }) { const mini = useMediaQuery(`(max-width: ${mindsBreakPoint}px)`) return ( @@ -50,6 +50,7 @@ export function ToolboxHintAtMinds() { ListItemButton={Item} Typography={Text} ListItemIcon={Icon} + category={props.category} /> ) } From 993a4e129cf2dd5219a28d43f6f83f909974daf8 Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Fri, 22 Apr 2022 17:49:26 +0800 Subject: [PATCH 04/32] feat: user guide --- packages/mask/shared-ui/locales/en-US.json | 7 ++- .../mask/src/components/GuideStep/index.tsx | 8 ++- .../InjectedComponents/PostDialogHint.tsx | 5 +- .../InjectedComponents/ToolboxUnstyled.tsx | 58 ++++++++++--------- .../twitter.com/injection/ToolboxHint_UI.tsx | 2 +- 5 files changed, 43 insertions(+), 37 deletions(-) diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index a237507997e6..a92cdf1127e6 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -105,9 +105,10 @@ "setup_guide_pin_tip_step_find_left": "Find Mask Network in the list of extensions and click the ", "setup_guide_pin_tip_step_find_right": " button.", "setup_guide_pin_tip_successfully": "Pinned successfully.", - "user_guide_tip_1": "Connect wallet to explore multi-chain dApps.", - "user_guide_tip_2": "Setup your exclusive NFT Avatar, explore the endless possibilities of Web 3.0.", - "user_guide_tip_3": "Click here to have a quick start.", + "user_guide_tip_1": "Explore multi-chain dApps.", + "user_guide_tip_2": "Connect and switch your wallet.", + "user_guide_tip_3": "Browse the Web 3 footprints of your Twitter friends, enjoy the freedom of Web 3.", + "user_guide_tip_4": "Click here to have a quick start.", "create_persona": "Create persona", "connect_persona": "Connect persona", "please_create_persona": "Please create persona", diff --git a/packages/mask/src/components/GuideStep/index.tsx b/packages/mask/src/components/GuideStep/index.tsx index e28f0b2c4004..fdffc02c4400 100644 --- a/packages/mask/src/components/GuideStep/index.tsx +++ b/packages/mask/src/components/GuideStep/index.tsx @@ -119,6 +119,12 @@ export default function GuideStep({ if (disabled) return const open = +lastStep === step setOpen(open) + + if (!open) return + const url = new URL(location.href) + if (url.pathname === '/home') return + url.pathname = '/home' + location.href = url.href }, [lastStep]) useEffect(() => { @@ -169,7 +175,7 @@ export default function GuideStep({ return () => { window.removeEventListener('resize', onResize) } - }, [childrenRef]) + }, [childrenRef, lastStep, open]) return ( <> diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx index d952a48fcbc9..a8b61a566d23 100644 --- a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx +++ b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx @@ -7,7 +7,6 @@ import { isMobileFacebook } from '../../social-network-adaptor/facebook.com/util import { MaskSharpIcon, MaskIconInMinds } from '../../resources/MaskIcon' import classNames from 'classnames' import GuideStep from '../GuideStep' -import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus' interface TooltipConfigProps { placement?: 'bottom' | 'top' @@ -75,7 +74,7 @@ const EntryIconButton = memo((props: PostDialogHintUIProps) => { return disableGuideTip ? ( getEntry() ) : ( - + {getEntry()} ) @@ -105,7 +104,5 @@ export interface PostDialogHintProps extends Partial { iconType?: string } export function PostDialogHint(props: PostDialogHintProps) { - const personaConnectStatus = usePersonaConnectStatus() - if (personaConnectStatus.action) return null return {}} {...props} /> } diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx index 4c61149181d1..15131e56bb37 100644 --- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx +++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx @@ -101,31 +101,33 @@ function ToolboxHintForApplication(props: ToolboxHintProps) { const { t } = useI18N() const { openDialog } = useRemoteControlledDialog(WalletMessages.events.ApplicationDialogUpdated) return ( - - - - {mini ? null : ( - - {t('mask_network')} - - } + + + + - )} - - + {mini ? null : ( + + {t('mask_network')} + + } + /> + )} + + + ) } @@ -172,8 +174,8 @@ function ToolboxHintForWallet(props: ToolboxHintProps) { return ( <> - - + + {isWalletValid ? ( @@ -211,8 +213,8 @@ function ToolboxHintForWallet(props: ToolboxHintProps) { /> )} - - + + ) } diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx index c15c32e1485d..ff333eab0d3d 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint_UI.tsx @@ -52,7 +52,7 @@ export function ToolboxHintAtTwitter(props: { category: 'wallet' | 'application' export function ProfileLinkAtTwitter() { const { t } = useI18N() return ( - + ) From a6a0438137afff259ca1381658b2f19b3eb7a296 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Tue, 26 Apr 2022 16:11:04 +0800 Subject: [PATCH 05/32] chore: solve conflict --- packages/mask/shared-ui/locales/qya-AA.json | 26 ++++- .../components/shared/ApplicationBoard.tsx | 107 ++++++++++++++++-- 2 files changed, 124 insertions(+), 9 deletions(-) diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json index 447784bb81ea..d7eb8ae5d7cf 100644 --- a/packages/mask/shared-ui/locales/qya-AA.json +++ b/packages/mask/shared-ui/locales/qya-AA.json @@ -21,6 +21,7 @@ "no_data": "crwdns10097:0crwdne10097:0", "tip": "crwdns10105:0crwdne10105:0", "tags": "crwdns10107:0crwdne10107:0", + "default": "crwdns16406:0crwdne16406:0", "contract": "crwdns10109:0crwdne10109:0", "initializing": "crwdns10111:0crwdne10111:0", "redirect_alert": "crwdns10113:0crwdne10113:0", @@ -207,9 +208,17 @@ "plugin_airdrop_nft_claim_all": "crwdns8117:0crwdne8117:0", "plugin_airdrop_nft_claim_successful": "crwdns8119:0crwdne8119:0", "plugin_airdrop_nft_claim_failed": "crwdns8121:0crwdne8121:0", + "recent_transaction_pending": "crwdns16388:0crwdne16388:0", + "recent_transaction_success": "crwdns16390:0crwdne16390:0", + "recent_transaction_failed": "crwdns16392:0crwdne16392:0", + "recent_transaction_cancelled": "crwdns16394:0crwdne16394:0", "wallet_balance": "crwdns4505:0crwdne4505:0", "wallet_balance_eth": "crwdns10189:0crwdne10189:0", "wallet_new": "crwdns4511:0crwdne4511:0", + "wallets": "crwdns4515:0crwdne4515:0", + "wallet_status_pending": "crwdns16396:0crwdne16396:0", + "wallet_status_pending_clear_all": "crwdns16398:0crwdne16398:0", + "wallet_status_pending_clear": "crwdns16400:0crwdne16400:0", "wallet_status_button_change": "crwdns4519:0crwdne4519:0", "wallet_status_button_copy_address": "crwdns4523:0crwdne4523:0", "wallet_transfer_account": "crwdns10191:0crwdne10191:0", @@ -422,7 +431,6 @@ "plugin_trader_price_updated": "crwdns10237:0crwdne10237:0", "plugin_savings": "crwdns13250:0crwdne13250:0", "plugin_savings_asset": "crwdns14804:0crwdne14804:0", - "plugin_no_protocol_available": "crwdns13254:0crwdne13254:0", "plugin_savings_apr": "crwdns13256:0crwdne13256:0", "plugin_savings_wallet": "crwdns13258:0crwdne13258:0", "plugin_savings_operation": "crwdns13260:0crwdne13260:0", @@ -910,11 +918,14 @@ "wallet_verify_persona_sign": "crwdns16310:0crwdne16310:0", "wallet_verify_has_bound": "crwdns16312:0crwdne16312:0", "wallet_verify_persona_name": "crwdns16314:0{{personaName}}crwdne16314:0", + "wallet_verify_empty_alert": "crwdns16408:0crwdne16408:0", "wallet_verify_persona_sign_intro": "crwdns16316:0crwdne16316:0", "waller_verify_wallet_sign_intro": "crwdns16318:0crwdne16318:0", "popups_add_wallet": "crwdns16320:0crwdne16320:0", "popups_profile_photo": "crwdns16322:0crwdne16322:0", "popups_public_key": "crwdns16324:0crwdne16324:0", + "popups_create_persona": "crwdns16402:0crwdne16402:0", + "popups_restore_and_login": "crwdns16404:0crwdne16404:0", "popups_name": "crwdns16326:0crwdne16326:0", "popups_social_account": "crwdns16328:0crwdne16328:0", "popups_connected_wallets": "crwdns16330:0crwdne16330:0", @@ -1075,6 +1086,19 @@ "plugin_artblocks_smt_wrong": "crwdns14520:0crwdne14520:0", "plugin_artblocks_share": "crwdns14522:0{{name}}crwdnd14522:0{{price}}crwdnd14522:0{{symbol}}crwdne14522:0", "plugin_artblocks_share_no_official_account": "crwdns14524:0{{name}}crwdnd14524:0{{price}}crwdnd14524:0{{symbol}}crwdne14524:0", + "plugin_tips_disconnect_introduction": "crwdns16410:0{{persona}}crwdnd16410:0{{address}}crwdne16410:0", + "plugin_tips_disconnect_dialog_title": "crwdns16412:0crwdne16412:0", + "plugin_tips_not_evm_alert": "crwdns16414:0crwdne16414:0", + "plugin_tips_persona_sign_success": "crwdns16416:0crwdne16416:0", + "plugin_tips_persona_sign_error": "crwdns16418:0crwdne16418:0", + "plugin_tips_wallet_sign_success": "crwdns16420:0crwdne16420:0", + "plugin_tips_wallet_sign_error": "crwdns16422:0crwdne16422:0", + "plugin_tips_wallet_add": "crwdns16424:0crwdne16424:0", + "plugin_tips_connect_wallet": "crwdns16426:0crwdne16426:0", + "plugin_tips_sns_persona_unmatched": "crwdns16428:0{{currentSNSConnectedPersonaPublicKey}}crwdnd16428:0{{currentPersonaPublicKey}}crwdnd16428:0{{currentSNSConnectedPersonaPublicKey}}crwdne16428:0", + "plugin_tips_verify_line_intro": "crwdns16430:0crwdne16430:0", + "plugin_tips_empty_list": "crwdns16432:0crwdne16432:0", + "plugin_tips_set_as_default": "crwdns16434:0crwdne16434:0", "plugin_artblocks_description": "crwdns16264:0crwdne16264:0", "plugin_artblocks_name": "crwdns16266:0crwdne16266:0", "plugin_dhedge_description": "crwdns16268:0crwdne16268:0", diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index 36b75a13c686..ad9c4dda80b3 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -1,16 +1,32 @@ -import { useState, useMemo } from 'react' +import { useState, useMemo, useCallback } from 'react' import { Close as CloseIcon } from '@mui/icons-material' import { makeStyles, getMaskColor } from '@masknet/theme' import { Typography, useTheme } from '@mui/material' import { useChainId } from '@masknet/web3-shared-evm' import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script' import { useCurrentWeb3NetworkPluginID, useAccount } from '@masknet/plugin-infra/web3' -import { EMPTY_LIST } from '@masknet/shared-base' +import { + EMPTY_LIST, + NextIDPlatform, + CrossIsolationMessages, + ProfileIdentifier, + formatPersonaPublicKey, +} from '@masknet/shared-base' import { getCurrentSNSNetwork } from '../../social-network-adaptor/utils' import { activatedSocialNetworkUI } from '../../social-network' import { useI18N } from '../../utils' import { ApplicationSettingDialog } from './ApplicationSettingDialog' import { Application, getUnlistedApp } from './ApplicationSettingPluginList' +import { useRemoteControlledDialog } from '@masknet/shared-base-ui' +import { useAsync } from 'react-use' +import Services from '../../extension/service' +import { NextIDProof } from '@masknet/web3-providers' +import type { Persona } from '../../database' +import { useLastRecognizedIdentity } from '../DataSource/useActivatedUI' +import { useSetupGuideStatusState } from '../DataSource/useNextID' +import { useMyPersonas } from '../DataSource/useMyPersonas' +import { WalletMessages } from '../../plugins/Wallet/messages' +import { PersonaContext } from '../../extension/popups/pages/Personas/hooks/usePersonaContext' const useStyles = makeStyles()((theme) => { const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)` @@ -73,12 +89,14 @@ const useStyles = makeStyles()((theme) => { }, } }) - -interface Props { - closeDialog(): void +export function ApplicationBoard() { + return ( + + + + ) } - -export function ApplicationBoard(props: Props) { +function ApplicationBoardContent() { const { classes } = useStyles() const theme = useTheme() const { t } = useI18N() @@ -163,5 +181,78 @@ interface RenderEntryComponentWrapperProps { function RenderEntryComponentWrapper({ application }: RenderEntryComponentWrapperProps) { const RenderEntryComponent = application.entry.RenderEntryComponent! - return + return application.entry.nextIdRequired ? ( + + ) : ( + + ) +} + +function RenderEntryComponentWithNextIDRequired({ application }: RenderEntryComponentWrapperProps) { + const ui = activatedSocialNetworkUI + const { t } = useI18N() + const platform = ui.configuration.nextIDConfig?.platform as NextIDPlatform + const lastState = useSetupGuideStatusState() + const { currentPersona } = PersonaContext.useContainer() + const lastRecognized = useLastRecognizedIdentity() + const username = useMemo(() => { + return lastState.username || (!lastRecognized.identifier.isUnknown ? lastRecognized.identifier.userId : '') + }, [lastState, lastRecognized]) + const personas = useMyPersonas() + + const checkSNSConnectToCurrentPersona = useCallback((persona: Persona) => { + return ( + persona?.linkedProfiles.get(new ProfileIdentifier(ui.networkIdentifier, username)) + ?.connectionConfirmState === 'confirmed' + ) + }, []) + + const { value: ApplicationCurrentStatus } = useAsync(async () => { + const currentPersonaIdentifier = await Services.Settings.getCurrentPersonaIdentifier() + const currentPersona = (await Services.Identity.queryPersona(currentPersonaIdentifier!)) as Persona + const currentSNSConnectedPersona = personas.find((persona) => + checkSNSConnectToCurrentPersona(persona as Persona), + ) + return { + isSNSConnectToCurrentPersona: checkSNSConnectToCurrentPersona(currentPersona), + isNextIDVerify: await NextIDProof.queryIsBound(currentPersona.publicHexKey ?? '', platform, username), + currentPersonaPublicKey: currentPersona?.fingerprint, + currentSNSConnectedPersonaPublicKey: currentSNSConnectedPersona?.fingerprint, + } + }, [platform, username, ui, personas, currentPersona]) + const { + isNextIDVerify, + isSNSConnectToCurrentPersona, + currentPersonaPublicKey, + currentSNSConnectedPersonaPublicKey, + } = ApplicationCurrentStatus ?? {} + const { closeDialog } = useRemoteControlledDialog(WalletMessages.events.walletStatusDialogUpdated) + + const onNextIdVerify = useCallback(() => { + closeDialog() + CrossIsolationMessages.events.verifyNextID.sendToAll(undefined) + }, []) + + if (!application.entry.RenderEntryComponent) return null + + const RenderEntryComponent = application.entry.RenderEntryComponent + const shouldVerifyNextId = Boolean(!isNextIDVerify && ApplicationCurrentStatus) + const shouldDisplayTooltipHint = ApplicationCurrentStatus?.isSNSConnectToCurrentPersona === false + return ( + + ) } From 3f84e7e33d2045291cf091c141e15fb20b4410d1 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Tue, 26 Apr 2022 16:14:02 +0800 Subject: [PATCH 06/32] Revert "chore: solve conflict" This reverts commit a6a0438137afff259ca1381658b2f19b3eb7a296. --- packages/mask/shared-ui/locales/qya-AA.json | 26 +---- .../components/shared/ApplicationBoard.tsx | 107 ++---------------- 2 files changed, 9 insertions(+), 124 deletions(-) diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json index d7eb8ae5d7cf..447784bb81ea 100644 --- a/packages/mask/shared-ui/locales/qya-AA.json +++ b/packages/mask/shared-ui/locales/qya-AA.json @@ -21,7 +21,6 @@ "no_data": "crwdns10097:0crwdne10097:0", "tip": "crwdns10105:0crwdne10105:0", "tags": "crwdns10107:0crwdne10107:0", - "default": "crwdns16406:0crwdne16406:0", "contract": "crwdns10109:0crwdne10109:0", "initializing": "crwdns10111:0crwdne10111:0", "redirect_alert": "crwdns10113:0crwdne10113:0", @@ -208,17 +207,9 @@ "plugin_airdrop_nft_claim_all": "crwdns8117:0crwdne8117:0", "plugin_airdrop_nft_claim_successful": "crwdns8119:0crwdne8119:0", "plugin_airdrop_nft_claim_failed": "crwdns8121:0crwdne8121:0", - "recent_transaction_pending": "crwdns16388:0crwdne16388:0", - "recent_transaction_success": "crwdns16390:0crwdne16390:0", - "recent_transaction_failed": "crwdns16392:0crwdne16392:0", - "recent_transaction_cancelled": "crwdns16394:0crwdne16394:0", "wallet_balance": "crwdns4505:0crwdne4505:0", "wallet_balance_eth": "crwdns10189:0crwdne10189:0", "wallet_new": "crwdns4511:0crwdne4511:0", - "wallets": "crwdns4515:0crwdne4515:0", - "wallet_status_pending": "crwdns16396:0crwdne16396:0", - "wallet_status_pending_clear_all": "crwdns16398:0crwdne16398:0", - "wallet_status_pending_clear": "crwdns16400:0crwdne16400:0", "wallet_status_button_change": "crwdns4519:0crwdne4519:0", "wallet_status_button_copy_address": "crwdns4523:0crwdne4523:0", "wallet_transfer_account": "crwdns10191:0crwdne10191:0", @@ -431,6 +422,7 @@ "plugin_trader_price_updated": "crwdns10237:0crwdne10237:0", "plugin_savings": "crwdns13250:0crwdne13250:0", "plugin_savings_asset": "crwdns14804:0crwdne14804:0", + "plugin_no_protocol_available": "crwdns13254:0crwdne13254:0", "plugin_savings_apr": "crwdns13256:0crwdne13256:0", "plugin_savings_wallet": "crwdns13258:0crwdne13258:0", "plugin_savings_operation": "crwdns13260:0crwdne13260:0", @@ -918,14 +910,11 @@ "wallet_verify_persona_sign": "crwdns16310:0crwdne16310:0", "wallet_verify_has_bound": "crwdns16312:0crwdne16312:0", "wallet_verify_persona_name": "crwdns16314:0{{personaName}}crwdne16314:0", - "wallet_verify_empty_alert": "crwdns16408:0crwdne16408:0", "wallet_verify_persona_sign_intro": "crwdns16316:0crwdne16316:0", "waller_verify_wallet_sign_intro": "crwdns16318:0crwdne16318:0", "popups_add_wallet": "crwdns16320:0crwdne16320:0", "popups_profile_photo": "crwdns16322:0crwdne16322:0", "popups_public_key": "crwdns16324:0crwdne16324:0", - "popups_create_persona": "crwdns16402:0crwdne16402:0", - "popups_restore_and_login": "crwdns16404:0crwdne16404:0", "popups_name": "crwdns16326:0crwdne16326:0", "popups_social_account": "crwdns16328:0crwdne16328:0", "popups_connected_wallets": "crwdns16330:0crwdne16330:0", @@ -1086,19 +1075,6 @@ "plugin_artblocks_smt_wrong": "crwdns14520:0crwdne14520:0", "plugin_artblocks_share": "crwdns14522:0{{name}}crwdnd14522:0{{price}}crwdnd14522:0{{symbol}}crwdne14522:0", "plugin_artblocks_share_no_official_account": "crwdns14524:0{{name}}crwdnd14524:0{{price}}crwdnd14524:0{{symbol}}crwdne14524:0", - "plugin_tips_disconnect_introduction": "crwdns16410:0{{persona}}crwdnd16410:0{{address}}crwdne16410:0", - "plugin_tips_disconnect_dialog_title": "crwdns16412:0crwdne16412:0", - "plugin_tips_not_evm_alert": "crwdns16414:0crwdne16414:0", - "plugin_tips_persona_sign_success": "crwdns16416:0crwdne16416:0", - "plugin_tips_persona_sign_error": "crwdns16418:0crwdne16418:0", - "plugin_tips_wallet_sign_success": "crwdns16420:0crwdne16420:0", - "plugin_tips_wallet_sign_error": "crwdns16422:0crwdne16422:0", - "plugin_tips_wallet_add": "crwdns16424:0crwdne16424:0", - "plugin_tips_connect_wallet": "crwdns16426:0crwdne16426:0", - "plugin_tips_sns_persona_unmatched": "crwdns16428:0{{currentSNSConnectedPersonaPublicKey}}crwdnd16428:0{{currentPersonaPublicKey}}crwdnd16428:0{{currentSNSConnectedPersonaPublicKey}}crwdne16428:0", - "plugin_tips_verify_line_intro": "crwdns16430:0crwdne16430:0", - "plugin_tips_empty_list": "crwdns16432:0crwdne16432:0", - "plugin_tips_set_as_default": "crwdns16434:0crwdne16434:0", "plugin_artblocks_description": "crwdns16264:0crwdne16264:0", "plugin_artblocks_name": "crwdns16266:0crwdne16266:0", "plugin_dhedge_description": "crwdns16268:0crwdne16268:0", diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index ad9c4dda80b3..36b75a13c686 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -1,32 +1,16 @@ -import { useState, useMemo, useCallback } from 'react' +import { useState, useMemo } from 'react' import { Close as CloseIcon } from '@mui/icons-material' import { makeStyles, getMaskColor } from '@masknet/theme' import { Typography, useTheme } from '@mui/material' import { useChainId } from '@masknet/web3-shared-evm' import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script' import { useCurrentWeb3NetworkPluginID, useAccount } from '@masknet/plugin-infra/web3' -import { - EMPTY_LIST, - NextIDPlatform, - CrossIsolationMessages, - ProfileIdentifier, - formatPersonaPublicKey, -} from '@masknet/shared-base' +import { EMPTY_LIST } from '@masknet/shared-base' import { getCurrentSNSNetwork } from '../../social-network-adaptor/utils' import { activatedSocialNetworkUI } from '../../social-network' import { useI18N } from '../../utils' import { ApplicationSettingDialog } from './ApplicationSettingDialog' import { Application, getUnlistedApp } from './ApplicationSettingPluginList' -import { useRemoteControlledDialog } from '@masknet/shared-base-ui' -import { useAsync } from 'react-use' -import Services from '../../extension/service' -import { NextIDProof } from '@masknet/web3-providers' -import type { Persona } from '../../database' -import { useLastRecognizedIdentity } from '../DataSource/useActivatedUI' -import { useSetupGuideStatusState } from '../DataSource/useNextID' -import { useMyPersonas } from '../DataSource/useMyPersonas' -import { WalletMessages } from '../../plugins/Wallet/messages' -import { PersonaContext } from '../../extension/popups/pages/Personas/hooks/usePersonaContext' const useStyles = makeStyles()((theme) => { const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)` @@ -89,14 +73,12 @@ const useStyles = makeStyles()((theme) => { }, } }) -export function ApplicationBoard() { - return ( - - - - ) + +interface Props { + closeDialog(): void } -function ApplicationBoardContent() { + +export function ApplicationBoard(props: Props) { const { classes } = useStyles() const theme = useTheme() const { t } = useI18N() @@ -181,78 +163,5 @@ interface RenderEntryComponentWrapperProps { function RenderEntryComponentWrapper({ application }: RenderEntryComponentWrapperProps) { const RenderEntryComponent = application.entry.RenderEntryComponent! - return application.entry.nextIdRequired ? ( - - ) : ( - - ) -} - -function RenderEntryComponentWithNextIDRequired({ application }: RenderEntryComponentWrapperProps) { - const ui = activatedSocialNetworkUI - const { t } = useI18N() - const platform = ui.configuration.nextIDConfig?.platform as NextIDPlatform - const lastState = useSetupGuideStatusState() - const { currentPersona } = PersonaContext.useContainer() - const lastRecognized = useLastRecognizedIdentity() - const username = useMemo(() => { - return lastState.username || (!lastRecognized.identifier.isUnknown ? lastRecognized.identifier.userId : '') - }, [lastState, lastRecognized]) - const personas = useMyPersonas() - - const checkSNSConnectToCurrentPersona = useCallback((persona: Persona) => { - return ( - persona?.linkedProfiles.get(new ProfileIdentifier(ui.networkIdentifier, username)) - ?.connectionConfirmState === 'confirmed' - ) - }, []) - - const { value: ApplicationCurrentStatus } = useAsync(async () => { - const currentPersonaIdentifier = await Services.Settings.getCurrentPersonaIdentifier() - const currentPersona = (await Services.Identity.queryPersona(currentPersonaIdentifier!)) as Persona - const currentSNSConnectedPersona = personas.find((persona) => - checkSNSConnectToCurrentPersona(persona as Persona), - ) - return { - isSNSConnectToCurrentPersona: checkSNSConnectToCurrentPersona(currentPersona), - isNextIDVerify: await NextIDProof.queryIsBound(currentPersona.publicHexKey ?? '', platform, username), - currentPersonaPublicKey: currentPersona?.fingerprint, - currentSNSConnectedPersonaPublicKey: currentSNSConnectedPersona?.fingerprint, - } - }, [platform, username, ui, personas, currentPersona]) - const { - isNextIDVerify, - isSNSConnectToCurrentPersona, - currentPersonaPublicKey, - currentSNSConnectedPersonaPublicKey, - } = ApplicationCurrentStatus ?? {} - const { closeDialog } = useRemoteControlledDialog(WalletMessages.events.walletStatusDialogUpdated) - - const onNextIdVerify = useCallback(() => { - closeDialog() - CrossIsolationMessages.events.verifyNextID.sendToAll(undefined) - }, []) - - if (!application.entry.RenderEntryComponent) return null - - const RenderEntryComponent = application.entry.RenderEntryComponent - const shouldVerifyNextId = Boolean(!isNextIDVerify && ApplicationCurrentStatus) - const shouldDisplayTooltipHint = ApplicationCurrentStatus?.isSNSConnectToCurrentPersona === false - return ( - - ) + return } From d6f5ed4ec76c8c0cfe97d250a70b789571a67d96 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 27 Apr 2022 11:20:17 +0800 Subject: [PATCH 07/32] chore: solve conflict --- packages/mask/src/components/shared/ApplicationBoard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index c7a7871e424a..c27f12eaa470 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -97,7 +97,7 @@ interface Props { export function ApplicationBoard(props: Props) { return ( - + ) } From 5bf451eeeda59df8974696b7fbc435cc17b91b0d Mon Sep 17 00:00:00 2001 From: Lantt Date: Tue, 12 Apr 2022 17:09:06 +0800 Subject: [PATCH 08/32] feat: should open twitter when user click agree button on welcome page --- .../Welcome/hooks/useSetupSocialNetwork.ts | 6 ++++++ .../dashboard/src/pages/Welcome/index.tsx | 7 +++---- .../background-script/SocialNetworkService.ts | 21 +++++++++++++++++++ packages/mask/src/social-network/ui.ts | 13 ++++++++++++ .../src/social-network/utils/permissions.ts | 0 5 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 packages/dashboard/src/pages/Welcome/hooks/useSetupSocialNetwork.ts create mode 100644 packages/mask/src/social-network/utils/permissions.ts diff --git a/packages/dashboard/src/pages/Welcome/hooks/useSetupSocialNetwork.ts b/packages/dashboard/src/pages/Welcome/hooks/useSetupSocialNetwork.ts new file mode 100644 index 000000000000..b8d5c9e60568 --- /dev/null +++ b/packages/dashboard/src/pages/Welcome/hooks/useSetupSocialNetwork.ts @@ -0,0 +1,6 @@ +import { useAsyncFn } from 'react-use' +import { Services } from '../../../API' + +export function useSetupSocialNetwork() { + return useAsyncFn(Services.SocialNetwork.setupSocialNetwork) +} diff --git a/packages/dashboard/src/pages/Welcome/index.tsx b/packages/dashboard/src/pages/Welcome/index.tsx index 9e4893222ee7..1108330beb88 100644 --- a/packages/dashboard/src/pages/Welcome/index.tsx +++ b/packages/dashboard/src/pages/Welcome/index.tsx @@ -1,12 +1,11 @@ import { Button, useTheme } from '@mui/material' -import { useNavigate } from 'react-router-dom' -import { DashboardRoutes } from '@masknet/shared-base' import { ColumnLayout } from '../../components/RegisterFrame/ColumnLayout' import { styled } from '@mui/material/styles' import { memo, MutableRefObject, useEffect, useMemo, useRef } from 'react' import { useDashboardI18N } from '../../locales' import links from '../../components/FooterLine/links.json' import { openWindow } from '@masknet/shared-base-ui' +import { useSetupSocialNetwork } from './hooks/useSetupSocialNetwork' const Content = styled('div')(({ theme }) => ({ padding: `${theme.spacing(1)} ${theme.spacing(4)}`, @@ -33,7 +32,7 @@ const IFrame = styled('iframe')(({ theme }) => ({ export default function Welcome() { const iframeRef = useRef(null) const mode = useTheme().palette.mode - const navigate = useNavigate() + const [, setupSocialNetwork] = useSetupSocialNetwork() const agreementContentPageURL = new URL('./en.html', import.meta.url).toString() const privacyPolicyDocument = useMemo(() => () => iframeRef?.current?.contentWindow?.document, [iframeRef]) @@ -79,7 +78,7 @@ export default function Welcome() { iframeRef={iframeRef} privacyPolicyURL={agreementContentPageURL} iframeLoadHandler={handleIFrameLoad} - agreeHandler={() => navigate(DashboardRoutes.Setup)} + agreeHandler={setupSocialNetwork} cancelHandler={() => window.close()} /> ) diff --git a/packages/mask/src/extension/background-script/SocialNetworkService.ts b/packages/mask/src/extension/background-script/SocialNetworkService.ts index b6ca32eca50c..44d625d25114 100644 --- a/packages/mask/src/extension/background-script/SocialNetworkService.ts +++ b/packages/mask/src/extension/background-script/SocialNetworkService.ts @@ -1,5 +1,12 @@ import { definedSocialNetworkUIs, getNetworkWorker, loadSocialNetworkUI, SocialNetworkUI } from '../../social-network' +import { + definedSocialNetworkUIs, + getNetworkWorker, + loadSocialNetworkUI, + loadSocialNetworkUIs, +} from '../../social-network' import { Flags } from '../../../shared' +import { requestSNSAdaptorPermission, requestSNSAdaptorsPermission } from '../../social-network/utils/permissions' import { currentSetupGuideStatus } from '../../settings/settings' import stringify from 'json-stable-stringify' @@ -22,6 +29,20 @@ function requestSNSAdaptorPermission(ui: SocialNetworkUI.Definition) { return requestExtensionPermission({ origins: [...ui.declarativePermissions.origins] }) } + +export async function setupSocialNetwork() { + const ui = await loadSocialNetworkUI('twitter.com') + const home = ui.utils.getHomePage?.() + + const uis = await loadSocialNetworkUIs() + if (!Flags.no_web_extension_dynamic_permission_request) { + if (!(await requestSNSAdaptorsPermission(uis))) return + } + + await delay(100) + home && browser.tabs.create({ active: true, url: home }) +} + export async function connectSocialNetwork( identifier: PersonaIdentifier, network: string, diff --git a/packages/mask/src/social-network/ui.ts b/packages/mask/src/social-network/ui.ts index 6ab1ef8b483a..f2011019ddac 100644 --- a/packages/mask/src/social-network/ui.ts +++ b/packages/mask/src/social-network/ui.ts @@ -227,6 +227,19 @@ export async function activateSocialNetworkUIInner(ui_deferred: SocialNetworkUI. } } +export async function loadSocialNetworkUIs(): Promise { + const defines = [...definedSocialNetworkUIs.values()].map(async (x) => x.load()) + const uis = (await Promise.all(defines)).map((x) => x.default) + + if (!defines) throw new Error('SNS adaptor load failed') + + for (const ui of uis) { + definedSocialNetworkUIsResolved.set(ui.networkIdentifier, ui) + } + + return uis +} + export async function loadSocialNetworkUI(identifier: string): Promise { if (definedSocialNetworkUIsResolved.has(identifier)) return definedSocialNetworkUIsResolved.get(identifier)! const define = definedSocialNetworkUIs.get(identifier) diff --git a/packages/mask/src/social-network/utils/permissions.ts b/packages/mask/src/social-network/utils/permissions.ts new file mode 100644 index 000000000000..e69de29bb2d1 From 912ea48ecc60fc81959fc6774fdfdccf5903a37d Mon Sep 17 00:00:00 2001 From: Lantt Date: Tue, 12 Apr 2022 17:14:27 +0800 Subject: [PATCH 09/32] feat: be opened social network should determined by the caller --- packages/dashboard/src/pages/Welcome/index.tsx | 2 +- .../src/extension/background-script/SocialNetworkService.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/dashboard/src/pages/Welcome/index.tsx b/packages/dashboard/src/pages/Welcome/index.tsx index 1108330beb88..f0c36b576601 100644 --- a/packages/dashboard/src/pages/Welcome/index.tsx +++ b/packages/dashboard/src/pages/Welcome/index.tsx @@ -78,7 +78,7 @@ export default function Welcome() { iframeRef={iframeRef} privacyPolicyURL={agreementContentPageURL} iframeLoadHandler={handleIFrameLoad} - agreeHandler={setupSocialNetwork} + agreeHandler={() => setupSocialNetwork('twitter.com')} cancelHandler={() => window.close()} /> ) diff --git a/packages/mask/src/extension/background-script/SocialNetworkService.ts b/packages/mask/src/extension/background-script/SocialNetworkService.ts index 44d625d25114..ac6503dbcfed 100644 --- a/packages/mask/src/extension/background-script/SocialNetworkService.ts +++ b/packages/mask/src/extension/background-script/SocialNetworkService.ts @@ -30,8 +30,8 @@ function requestSNSAdaptorPermission(ui: SocialNetworkUI.Definition) { } -export async function setupSocialNetwork() { - const ui = await loadSocialNetworkUI('twitter.com') +export async function setupSocialNetwork(defaultNetwork: string) { + const ui = await loadSocialNetworkUI(defaultNetwork) const home = ui.utils.getHomePage?.() const uis = await loadSocialNetworkUIs() From 0366282bd81b9eb87bb9b12bc196bca7cb17dd7d Mon Sep 17 00:00:00 2001 From: Lantt Date: Wed, 27 Apr 2022 14:28:27 +0800 Subject: [PATCH 10/32] feat: merge develop --- .../dashboard/src/pages/Welcome/index.tsx | 3 ++- .../background-script/SocialNetworkService.ts | 24 ++++++++++++------- .../src/social-network/utils/permissions.ts | 0 3 files changed, 17 insertions(+), 10 deletions(-) delete mode 100644 packages/mask/src/social-network/utils/permissions.ts diff --git a/packages/dashboard/src/pages/Welcome/index.tsx b/packages/dashboard/src/pages/Welcome/index.tsx index f0c36b576601..cb2d930841cc 100644 --- a/packages/dashboard/src/pages/Welcome/index.tsx +++ b/packages/dashboard/src/pages/Welcome/index.tsx @@ -6,6 +6,7 @@ import { useDashboardI18N } from '../../locales' import links from '../../components/FooterLine/links.json' import { openWindow } from '@masknet/shared-base-ui' import { useSetupSocialNetwork } from './hooks/useSetupSocialNetwork' +import { Services } from '../../API' const Content = styled('div')(({ theme }) => ({ padding: `${theme.spacing(1)} ${theme.spacing(4)}`, @@ -78,7 +79,7 @@ export default function Welcome() { iframeRef={iframeRef} privacyPolicyURL={agreementContentPageURL} iframeLoadHandler={handleIFrameLoad} - agreeHandler={() => setupSocialNetwork('twitter.com')} + agreeHandler={() => Services.SocialNetwork.setupSocialNetwork('twitter.com')} cancelHandler={() => window.close()} /> ) diff --git a/packages/mask/src/extension/background-script/SocialNetworkService.ts b/packages/mask/src/extension/background-script/SocialNetworkService.ts index ac6503dbcfed..8446a6c95cc1 100644 --- a/packages/mask/src/extension/background-script/SocialNetworkService.ts +++ b/packages/mask/src/extension/background-script/SocialNetworkService.ts @@ -1,19 +1,17 @@ -import { definedSocialNetworkUIs, getNetworkWorker, loadSocialNetworkUI, SocialNetworkUI } from '../../social-network' +import { currentSetupGuideStatus, userGuideStatus } from '../../settings/settings' +import stringify from 'json-stable-stringify' +import { SetupGuideStep } from '../../components/InjectedComponents/SetupGuide/types' +import type { PersonaIdentifier, ProfileIdentifier } from '@masknet/shared-base' +import { delay } from '@dimensiondev/kit' +import { requestExtensionPermission } from '../../../background/services/helper' import { definedSocialNetworkUIs, getNetworkWorker, loadSocialNetworkUI, loadSocialNetworkUIs, + SocialNetworkUI, } from '../../social-network' import { Flags } from '../../../shared' -import { requestSNSAdaptorPermission, requestSNSAdaptorsPermission } from '../../social-network/utils/permissions' - -import { currentSetupGuideStatus } from '../../settings/settings' -import stringify from 'json-stable-stringify' -import { SetupGuideStep } from '../../components/InjectedComponents/SetupGuide/types' -import type { PersonaIdentifier, ProfileIdentifier } from '@masknet/shared-base' -import { delay } from '@dimensiondev/kit' -import { requestExtensionPermission } from '../../../background/services/helper' export async function getDefinedSocialNetworkUIs() { return [...definedSocialNetworkUIs.values()].map(({ networkIdentifier }) => { @@ -29,6 +27,13 @@ function requestSNSAdaptorPermission(ui: SocialNetworkUI.Definition) { return requestExtensionPermission({ origins: [...ui.declarativePermissions.origins] }) } +function requestSNSAdaptorsPermission(uis: SocialNetworkUI.Definition[]) { + const req = uis.filter((x) => !x.permission?.request()) + if (!req.length) return req + return requestExtensionPermission({ + origins: [...req.map((x) => x.declarativePermissions.origins).flat()], + }) +} export async function setupSocialNetwork(defaultNetwork: string) { const ui = await loadSocialNetworkUI(defaultNetwork) @@ -39,6 +44,7 @@ export async function setupSocialNetwork(defaultNetwork: string) { if (!(await requestSNSAdaptorsPermission(uis))) return } + userGuideStatus[defaultNetwork].value = '1' await delay(100) home && browser.tabs.create({ active: true, url: home }) } diff --git a/packages/mask/src/social-network/utils/permissions.ts b/packages/mask/src/social-network/utils/permissions.ts deleted file mode 100644 index e69de29bb2d1..000000000000 From c66d357071421f1b1b4518e860dd8e42f4046386 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 27 Apr 2022 16:27:45 +0800 Subject: [PATCH 11/32] feat: recommend feature app --- packages/mask/shared-ui/locales/en-US.json | 1 + .../components/shared/ApplicationBoard.tsx | 15 +++++- .../shared/ApplicationBoardDialog.tsx | 1 + .../shared/ApplicationSettingPluginList.tsx | 4 +- .../plugins/RedPacket/SNSAdaptor/index.tsx | 6 +++ packages/plugin-infra/src/types.ts | 5 ++ .../UI/components/ApplicationEntry/index.tsx | 51 ++++++++++++++++++- 7 files changed, 78 insertions(+), 5 deletions(-) diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index a10fd77ec41b..fb6d7700547f 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -330,6 +330,7 @@ "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_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", diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index c27f12eaa470..0cdfe17c61e2 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -1,7 +1,7 @@ import { useState, useMemo, useCallback } from 'react' import { Close as CloseIcon } from '@mui/icons-material' import { makeStyles, getMaskColor } from '@masknet/theme' -import { Typography, useTheme } from '@mui/material' +import { Typography, useTheme, Box } from '@mui/material' import { useChainId } from '@masknet/web3-shared-evm' import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script' import { useCurrentWeb3NetworkPluginID, useAccount } from '@masknet/plugin-infra/web3' @@ -87,6 +87,10 @@ const useStyles = makeStyles()((theme) => { closeIcon: { cursor: 'pointer', }, + recommendFeatureAppListWrapper: { + width: '100%', + margin: '16px 2px 12px 2px', + }, } }) @@ -144,7 +148,8 @@ function ApplicationBoardContent(props: Props) { .filter((x) => Boolean(x.entry.RenderEntryComponent)), [snsAdaptorPlugins, currentWeb3Network, chainId, account], ) - const listedAppList = applicationList.filter((x) => !getUnlistedApp(x)) + const recommendFeatureAppList = applicationList.filter((x) => x.entry.recommendFeature) + const listedAppList = applicationList.filter((x) => !x.entry.recommendFeature).filter((x) => !getUnlistedApp(x)) return ( <>
@@ -157,6 +162,12 @@ function ApplicationBoardContent(props: Props) { />
+ + {recommendFeatureAppList.map((application) => ( + + ))} + + {listedAppList.length > 0 ? (
{listedAppList.map((application) => ( diff --git a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx index 1fb23343a32c..900832d59a0a 100644 --- a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx +++ b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx @@ -11,6 +11,7 @@ const useStyles = makeStyles()((theme) => { return { content: { padding: theme.spacing(2.5), + height: 540, }, } }) diff --git a/packages/mask/src/components/shared/ApplicationSettingPluginList.tsx b/packages/mask/src/components/shared/ApplicationSettingPluginList.tsx index 96570a3fdfc3..1fa1baf7ac0e 100644 --- a/packages/mask/src/components/shared/ApplicationSettingPluginList.tsx +++ b/packages/mask/src/components/shared/ApplicationSettingPluginList.tsx @@ -85,7 +85,9 @@ export function ApplicationSettingPluginList() { .reduce((acc, cur) => { if (!cur.ApplicationEntries) return acc return acc.concat( - cur.ApplicationEntries.filter((x) => x.appBoardSortingDefaultPriority).map((x) => { + cur.ApplicationEntries.filter( + (x) => x.appBoardSortingDefaultPriority && !x.recommendFeature, + ).map((x) => { return { entry: x, pluginId: cur.ID, diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx index c811a8b0ef41..f15cbffbdaa1 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx @@ -95,12 +95,17 @@ const sns: Plugin.SNSAdaptor.Definition = { (() => { const icon = const name = + const recommendFeature = { + description: , + backgroundGradient: 'linear-gradient(180.54deg, #FF9A9E 0.71%, #FECFEF 98.79%, #FECFEF 99.78%)', + } return { ApplicationEntryID: base.ID, RenderEntryComponent({ disabled }) { return ( @@ -123,6 +128,7 @@ const sns: Plugin.SNSAdaptor.Definition = { tutorialLink: 'https://realmasknetwork.notion.site/Gift-token-NFTs-to-your-friends-Support-ETH-BSC-and-Polygon-0a71fd421aae4563bd07caa3e2129e5b', category: 'dapp', + recommendFeature, } })(), ], diff --git a/packages/plugin-infra/src/types.ts b/packages/plugin-infra/src/types.ts index ee36255c0809..aee268ed88ac 100644 --- a/packages/plugin-infra/src/types.ts +++ b/packages/plugin-infra/src/types.ts @@ -340,6 +340,11 @@ export namespace Plugin.SNSAdaptor { category?: 'dapp' | 'other' nextIdRequired?: boolean + + recommendFeature?: { + description: React.ReactNode + backgroundGradient: string + } } export interface ProfileIdentity { diff --git a/packages/shared/src/UI/components/ApplicationEntry/index.tsx b/packages/shared/src/UI/components/ApplicationEntry/index.tsx index 02788bf9f241..047a6a5c1f00 100644 --- a/packages/shared/src/UI/components/ApplicationEntry/index.tsx +++ b/packages/shared/src/UI/components/ApplicationEntry/index.tsx @@ -1,4 +1,5 @@ import classNames from 'classnames' +import type { Plugin } from '@masknet/plugin-infra' import { makeStyles, ShadowRootTooltip } from '@masknet/theme' import { Typography } from '@mui/material' @@ -38,20 +39,66 @@ const useStyles = makeStyles()((theme) => ({ height: 36, }, }, + recommendFeatureApplicationBox: { + width: 220, + height: 97, + cursor: 'pointer', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: 10, + borderRadius: 8, + }, + recommendFeatureAppIconWrapper: { + marginRight: 12, + '> *': { + width: 48, + height: 48, + }, + }, + recommendFeatureAppListItemName: { + fontSize: 14, + fontWeight: 500, + cursor: 'pointer', + color: theme.palette.common.white, + }, + recommendFeatureAppListItemDescription: { + fontSize: 12, + fontWeight: 500, + cursor: 'pointer', + color: theme.palette.common.white, + }, })) interface ApplicationEntryProps { icon: React.ReactNode title: React.ReactNode disabled?: boolean + recommendFeature?: Plugin.SNSAdaptor.ApplicationEntry['recommendFeature'] tooltipHint?: string onClick: () => void } export function ApplicationEntry(props: ApplicationEntryProps) { - const { title, onClick, disabled = false, icon, tooltipHint } = props + const { title, onClick, disabled = false, icon, tooltipHint, recommendFeature } = props const { classes } = useStyles() - const jsx = ( + const jsx = recommendFeature ? ( +
{} : onClick}> +
{icon}
+
+ {title} + + {recommendFeature.description} + +
+
+ ) : (
{} : onClick}> From dd64f523b6a875a27c9ec2bc3cc86989396435cd Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 27 Apr 2022 17:02:14 +0800 Subject: [PATCH 12/32] chore: update event --- packages/mask/src/components/shared/ApplicationBoard.tsx | 2 +- .../mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx | 6 +++--- .../RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx | 8 ++++---- .../src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx | 6 +++--- .../RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx | 6 +++--- .../plugins/FileService/src/SNSAdaptor/MainDialog.tsx | 6 +++--- 6 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index 0cdfe17c61e2..4640fc56c3ba 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -242,7 +242,7 @@ function RenderEntryComponentWithNextIDRequired({ application }: RenderEntryComp currentPersonaPublicKey, currentSNSConnectedPersonaPublicKey, } = ApplicationCurrentStatus ?? {} - const { closeDialog } = useRemoteControlledDialog(WalletMessages.events.walletStatusDialogUpdated) + const { closeDialog } = useRemoteControlledDialog(WalletMessages.events.ApplicationDialogUpdated) const onNextIdVerify = useCallback(() => { closeDialog() diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx index 828e95446a95..518da764ab4a 100644 --- a/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx +++ b/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx @@ -79,8 +79,8 @@ export function CompositionDialog(props: CompositionDialogProps) { const [fillSettings, fillState, fillCallback, resetFillCallback] = useFillCallback(poolSettings) // #endregion - const { closeDialog: closeWalletStatusDialog } = useRemoteControlledDialog( - WalletMessages.events.walletStatusDialogUpdated, + const { closeDialog: closeApplicationBoardDialog } = useRemoteControlledDialog( + WalletMessages.events.ApplicationDialogUpdated, ) const { setDialog: setTransactionDialog } = useRemoteControlledDialog( @@ -179,7 +179,7 @@ export function CompositionDialog(props: CompositionDialogProps) { if (payload) attachMetadata(ITO_MetaKey_2, payloadDetail) else dropMetadata(ITO_MetaKey_2) - closeWalletStatusDialog() + closeApplicationBoardDialog() props.onConfirm(payload) // storing the created pool in DB, it helps retrieve the pool password later PluginITO_RPC.discoverPool('', payload) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx index 601a68d5dcf4..286a4d520610 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx @@ -156,14 +156,14 @@ export const NftRedPacketHistoryItem: FC = memo( computed: { canSend, isPasswordValid }, } = useNftAvailabilityComputed(account, history.payload) const { value: contractDetailed } = useERC721ContractDetailed(history.token_contract.address) - const { closeDialog: closeWalletStatusDialog } = useRemoteControlledDialog( - WalletMessages.events.walletStatusDialogUpdated, + const { closeDialog: closeApplicationBoardDialog } = useRemoteControlledDialog( + WalletMessages.events.ApplicationDialogUpdated, ) const handleSend = useCallback(() => { if (!(canSend && contractDetailed && isPasswordValid)) return onSend(history, contractDetailed) - closeWalletStatusDialog() - }, [onSend, closeWalletStatusDialog, canSend, history, contractDetailed, isPasswordValid]) + closeApplicationBoardDialog() + }, [onSend, closeApplicationBoardDialog, canSend, history, contractDetailed, isPasswordValid]) const { value: redpacketStatus } = useAvailabilityNftRedPacket(history.rpid, account) const bitStatusList = redpacketStatus diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx index 8457677e9851..c4845962538e 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx @@ -94,8 +94,8 @@ export default function RedPacketDialog(props: RedPacketDialogProps) { const currentIdentity = useCurrentIdentity() const senderName = currentIdentity?.identifier.userId ?? currentIdentity?.linkedPersona?.nickname - const { closeDialog: closeWalletStatusDialog } = useRemoteControlledDialog( - WalletMessages.events.walletStatusDialogUpdated, + const { closeDialog: closeApplicationBoardDialog } = useRemoteControlledDialog( + WalletMessages.events.ApplicationDialogUpdated, ) const onCreateOrSelect = useCallback( async (payload: RedPacketJSONPayload) => { @@ -118,7 +118,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) { attachMetadata(RedPacketMetaKey, payload) } else dropMetadata(RedPacketMetaKey) onClose() - closeWalletStatusDialog() + closeApplicationBoardDialog() }, [onClose, chainId, senderName], ) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx index 164b3b9a87de..a2a13866c536 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx @@ -178,8 +178,8 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps) contract.address, tokenIdList, ) - const { closeDialog: closeWalletStatusDialog } = useRemoteControlledDialog( - WalletMessages.events.walletStatusDialogUpdated, + const { closeDialog: closeApplicationBoardDialog } = useRemoteControlledDialog( + WalletMessages.events.ApplicationDialogUpdated, ) const isSending = [TransactionStateType.WAIT_FOR_CONFIRMING, TransactionStateType.HASH].includes(createState.type) @@ -200,7 +200,7 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps) privateKey, chainId: contract.chainId, }) - closeWalletStatusDialog() + closeApplicationBoardDialog() }, [duration, message, senderName, contract, privateKey, txid], ) diff --git a/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx b/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx index ade8addbd839..125fa03724cf 100644 --- a/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx +++ b/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx @@ -47,8 +47,8 @@ const FileServiceDialog: React.FC = (props) => { const [uploading, setUploading] = useState(false) const [selectedFileInfo, setSelectedFileInfo] = useState(null) const { attachMetadata, dropMetadata } = useCompositionContext() - const { closeDialog: closeWalletStatusDialog } = useRemoteControlledDialog( - WalletMessages.events.walletStatusDialogUpdated, + const { closeDialog: closeApplicationBoardDialog } = useRemoteControlledDialog( + WalletMessages.events.ApplicationDialogUpdated, ) const onInsert = () => { if (isNil(selectedFileInfo)) { @@ -59,7 +59,7 @@ const FileServiceDialog: React.FC = (props) => { } else { dropMetadata(META_KEY_2) } - closeWalletStatusDialog() + closeApplicationBoardDialog() props.onClose() } From dc84ea14160b88e08c94c2ffc49473c1e02170aa Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Wed, 27 Apr 2022 20:01:20 +0800 Subject: [PATCH 13/32] chore: persona connect --- .../components/shared/ApplicationBoard.tsx | 21 +++++++++++++------ .../shared/ApplicationBoardDialog.tsx | 1 + .../UI/components/ApplicationEntry/index.tsx | 10 ++++----- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index c31f6fbd67eb..c6e0fa8c00ca 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -25,6 +25,7 @@ import type { Persona } from '../../database' import { useLastRecognizedIdentity } from '../DataSource/useActivatedUI' import { useSetupGuideStatusState } from '../DataSource/useNextID' import { useMyPersonas } from '../DataSource/useMyPersonas' +import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus' import { WalletMessages } from '../../plugins/Wallet/messages' import { PersonaContext } from '../../extension/popups/pages/Personas/hooks/usePersonaContext' @@ -232,6 +233,7 @@ function RenderEntryComponentWithNextIDRequired({ application }: RenderEntryComp ?.connectionConfirmState === 'confirmed' : undefined }, []) + const personaConnectStatus = usePersonaConnectStatus() const { value: ApplicationCurrentStatus } = useAsync(async () => { const currentPersonaIdentifier = await Services.Settings.getCurrentPersonaIdentifier() @@ -256,19 +258,26 @@ function RenderEntryComponentWithNextIDRequired({ application }: RenderEntryComp } = ApplicationCurrentStatus ?? {} const { closeDialog } = useRemoteControlledDialog(WalletMessages.events.ApplicationDialogUpdated) - const onNextIdVerify = useCallback(() => { + const jumpSetupGuide = useCallback(() => { closeDialog() - CrossIsolationMessages.events.verifyNextID.sendToAll(undefined) - }, []) + personaConnectStatus.connected === false + ? personaConnectStatus.action?.() + : CrossIsolationMessages.events.verifyNextID.sendToAll(undefined) + }, [personaConnectStatus]) if (!application.entry.RenderEntryComponent) return null const RenderEntryComponent = application.entry.RenderEntryComponent const shouldVerifyNextId = Boolean(!isNextIDVerify && ApplicationCurrentStatus) - const shouldDisplayTooltipHint = ApplicationCurrentStatus?.isSNSConnectToCurrentPersona === false + const shouldDisplayTooltipHint = + ApplicationCurrentStatus?.isSNSConnectToCurrentPersona === false && personaConnectStatus.connected return ( ) } diff --git a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx index 900832d59a0a..431101a1bc56 100644 --- a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx +++ b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx @@ -12,6 +12,7 @@ const useStyles = makeStyles()((theme) => { content: { padding: theme.spacing(2.5), height: 540, + overflowX: 'hidden', }, } }) diff --git a/packages/shared/src/UI/components/ApplicationEntry/index.tsx b/packages/shared/src/UI/components/ApplicationEntry/index.tsx index 047a6a5c1f00..ad386237c7db 100644 --- a/packages/shared/src/UI/components/ApplicationEntry/index.tsx +++ b/packages/shared/src/UI/components/ApplicationEntry/index.tsx @@ -3,7 +3,7 @@ import type { Plugin } from '@masknet/plugin-infra' import { makeStyles, ShadowRootTooltip } from '@masknet/theme' import { Typography } from '@mui/material' -const useStyles = makeStyles()((theme) => ({ +const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => ({ applicationBox: { display: 'flex', flexDirection: 'column', @@ -30,7 +30,7 @@ const useStyles = makeStyles()((theme) => ({ }, disabled: { opacity: 0.4, - cursor: 'default', + cursor: 'default !important', pointerEvent: 'none', }, iconWrapper: { @@ -60,13 +60,13 @@ const useStyles = makeStyles()((theme) => ({ recommendFeatureAppListItemName: { fontSize: 14, fontWeight: 500, - cursor: 'pointer', + cursor: disabled ? 'default' : 'pointer', color: theme.palette.common.white, }, recommendFeatureAppListItemDescription: { fontSize: 12, fontWeight: 500, - cursor: 'pointer', + cursor: disabled ? 'default' : 'pointer', color: theme.palette.common.white, }, })) @@ -82,7 +82,7 @@ interface ApplicationEntryProps { export function ApplicationEntry(props: ApplicationEntryProps) { const { title, onClick, disabled = false, icon, tooltipHint, recommendFeature } = props - const { classes } = useStyles() + const { classes } = useStyles({ disabled }) const jsx = recommendFeature ? (
Date: Wed, 27 Apr 2022 20:09:17 +0800 Subject: [PATCH 14/32] fix: little fix --- packages/mask/src/components/shared/ApplicationBoardDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx index 431101a1bc56..57cb980de936 100644 --- a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx +++ b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx @@ -33,7 +33,7 @@ export function ApplicationBoardDialog() { }, []) return ( - + From df51ff46df30c33c40c7bae9d553fe9cd29bfb3b Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Thu, 28 Apr 2022 15:53:08 +0800 Subject: [PATCH 15/32] fix: dialog title text center --- .../components/shared/ApplicationBoard.tsx | 32 +----------------- .../shared/ApplicationBoardDialog.tsx | 33 +++++++++++++++++-- .../contexts/components/InjectedDialog.tsx | 12 ++++++- 3 files changed, 42 insertions(+), 35 deletions(-) diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index c6e0fa8c00ca..c72350ed010c 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -1,5 +1,4 @@ -import { useState, useMemo, useCallback } from 'react' -import { Close as CloseIcon } from '@mui/icons-material' +import { useMemo, useCallback } from 'react' import { makeStyles, getMaskColor } from '@masknet/theme' import { Typography, useTheme, Box } from '@mui/material' import { useChainId } from '@masknet/web3-shared-evm' @@ -15,7 +14,6 @@ import { import { getCurrentSNSNetwork } from '../../social-network-adaptor/utils' import { activatedSocialNetworkUI } from '../../social-network' import { useI18N } from '../../utils' -import { ApplicationSettingDialog } from './ApplicationSettingDialog' import { Application, getUnlistedApp } from './ApplicationSettingPluginList' import { useRemoteControlledDialog } from '@masknet/shared-base-ui' import { useAsync } from 'react-use' @@ -74,17 +72,6 @@ const useStyles = makeStyles<{ shouldScroll: boolean }>()((theme, props) => { justifyContent: 'center', alignItems: 'center', }, - header: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 11.5, - }, - settingIcon: { - height: 24, - width: 24, - cursor: 'pointer', - }, placeholderWrapper: { display: 'flex', justifyContent: 'center', @@ -95,9 +82,6 @@ const useStyles = makeStyles<{ shouldScroll: boolean }>()((theme, props) => { placeholder: { color: getMaskColor(theme).textLight, }, - closeIcon: { - cursor: 'pointer', - }, recommendFeatureAppListWrapper: { width: '100%', margin: '16px 2px 12px 2px', @@ -119,7 +103,6 @@ export function ApplicationBoard(props: Props) { function ApplicationBoardContent(props: Props) { const theme = useTheme() const { t } = useI18N() - const [openSettings, setOpenSettings] = useState(false) const snsAdaptorPlugins = useActivatedPluginsSNSAdaptor('any') const currentWeb3Network = useCurrentWeb3NetworkPluginID() const chainId = useChainId() @@ -163,16 +146,6 @@ function ApplicationBoardContent(props: Props) { const { classes } = useStyles({ shouldScroll: listedAppList.length > 12 }) return ( <> -
- - {t('applications')} - setOpenSettings(true)} - /> -
- {recommendFeatureAppList.map((application) => ( @@ -195,9 +168,6 @@ function ApplicationBoardContent(props: Props) {
)} - {openSettings ? ( - setOpenSettings(false)} /> - ) : null} ) } diff --git a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx index 57cb980de936..c0eef1d9c2db 100644 --- a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx +++ b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx @@ -1,11 +1,13 @@ -import { DialogContent } from '@mui/material' -import { useCallback } from 'react' +import { DialogContent, useTheme } from '@mui/material' +import { useState, useCallback } from 'react' +import { ApplicationSettingDialog } from './ApplicationSettingDialog' import { makeStyles } from '@masknet/theme' import { InjectedDialog } from '@masknet/shared' import { CrossIsolationMessages } from '@masknet/shared-base' import { useRemoteControlledDialog } from '@masknet/shared-base-ui' import { ApplicationBoard } from './ApplicationBoard' import { WalletMessages } from '../../plugins/Wallet/messages' +import { useI18N } from '../../utils' const useStyles = makeStyles()((theme) => { return { @@ -14,11 +16,19 @@ const useStyles = makeStyles()((theme) => { height: 540, overflowX: 'hidden', }, + settingIcon: { + height: 24, + width: 24, + cursor: 'pointer', + }, } }) export function ApplicationBoardDialog() { + const theme = useTheme() const { classes } = useStyles() + const { t } = useI18N() + const [openSettings, setOpenSettings] = useState(false) const { open, closeDialog: _closeDialog } = useRemoteControlledDialog( WalletMessages.events.ApplicationDialogUpdated, @@ -32,10 +42,27 @@ export function ApplicationBoardDialog() { }) }, []) + const SettingIconDarkModeUrl = new URL('./assets/settings_dark_mode.png', import.meta.url).toString() + const SettingIconLightModeUrl = new URL('./assets/settings_light_mode.png', import.meta.url).toString() + return ( - + setOpenSettings(true)} + /> + }> + {openSettings ? ( + setOpenSettings(false)} /> + ) : null} ) diff --git a/packages/shared/src/contexts/components/InjectedDialog.tsx b/packages/shared/src/contexts/components/InjectedDialog.tsx index 415dc11c7ae5..953742c00339 100644 --- a/packages/shared/src/contexts/components/InjectedDialog.tsx +++ b/packages/shared/src/contexts/components/InjectedDialog.tsx @@ -27,6 +27,14 @@ const useStyles = makeStyles()((theme, { clean }) => ({ dialogTitle: { padding: theme.spacing(1, 2), whiteSpace: 'nowrap', + gridTemplateColumns: '50px auto 50px', + }, + dialogTitleTail: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + minWidth: 46, + minHeight: 46, }, dialogContent: { overscrollBehavior: 'contain', @@ -45,6 +53,7 @@ const useStyles = makeStyles()((theme, { clean }) => ({ export type InjectedDialogClassKey = | DialogClassKey | 'dialogTitle' + | 'dialogTitleTail' | 'dialogContent' | 'dialogActions' | 'dialogTitleTypography' @@ -71,6 +80,7 @@ export function InjectedDialog(props: InjectedDialogProps) { dialogCloseButton, dialogContent, dialogTitle, + dialogTitleTail, dialogTitleTypography, dialogBackdropRoot, container, @@ -139,7 +149,7 @@ export function InjectedDialog(props: InjectedDialogProps) { {title} - {titleTail} +
{titleTail}
) : null} From 6dd82cabc59999c986b3627622d2a252e4c445a8 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Thu, 28 Apr 2022 15:59:14 +0800 Subject: [PATCH 16/32] fix: style --- packages/mask/src/components/shared/ApplicationBoard.tsx | 7 ++----- .../mask/src/components/shared/ApplicationBoardDialog.tsx | 4 ++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index c72350ed010c..6241af406074 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -1,6 +1,6 @@ import { useMemo, useCallback } from 'react' import { makeStyles, getMaskColor } from '@masknet/theme' -import { Typography, useTheme, Box } from '@mui/material' +import { Typography, Box } from '@mui/material' import { useChainId } from '@masknet/web3-shared-evm' import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script' import { useCurrentWeb3NetworkPluginID, useAccount } from '@masknet/plugin-infra/web3' @@ -84,7 +84,7 @@ const useStyles = makeStyles<{ shouldScroll: boolean }>()((theme, props) => { }, recommendFeatureAppListWrapper: { width: '100%', - margin: '16px 2px 12px 2px', + margin: '0px 2px 12px 2px', }, } }) @@ -101,15 +101,12 @@ export function ApplicationBoard(props: Props) { ) } function ApplicationBoardContent(props: Props) { - const theme = useTheme() const { t } = useI18N() const snsAdaptorPlugins = useActivatedPluginsSNSAdaptor('any') const currentWeb3Network = useCurrentWeb3NetworkPluginID() const chainId = useChainId() const account = useAccount() const currentSNSNetwork = getCurrentSNSNetwork(activatedSocialNetworkUI.networkIdentifier) - const SettingIconDarkModeUrl = new URL('./assets/settings_dark_mode.png', import.meta.url).toString() - const SettingIconLightModeUrl = new URL('./assets/settings_light_mode.png', import.meta.url).toString() const applicationList = useMemo( () => snsAdaptorPlugins diff --git a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx index c0eef1d9c2db..c853de278ac0 100644 --- a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx +++ b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx @@ -12,8 +12,8 @@ import { useI18N } from '../../utils' const useStyles = makeStyles()((theme) => { return { content: { - padding: theme.spacing(2.5), - height: 540, + padding: theme.spacing(2, 2.5), + height: 490, overflowX: 'hidden', }, settingIcon: { From 7fd0bdd233b7031c2628eea9a45644d1b87e18b7 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Thu, 28 Apr 2022 16:11:09 +0800 Subject: [PATCH 17/32] chore: add comment --- packages/plugin-infra/src/types.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/plugin-infra/src/types.ts b/packages/plugin-infra/src/types.ts index 5a920947b53f..99697cefb7ed 100644 --- a/packages/plugin-infra/src/types.ts +++ b/packages/plugin-infra/src/types.ts @@ -341,6 +341,9 @@ export namespace Plugin.SNSAdaptor { nextIdRequired?: boolean + /** + * Display using an eye-catching card and unable to be unlisted. + */ recommendFeature?: { description: React.ReactNode backgroundGradient: string From caea3bec658a4bf1606ba521ee7662bec224c5cd Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Thu, 28 Apr 2022 19:17:45 +0800 Subject: [PATCH 18/32] fix: ui style --- .../mask/src/components/shared/ApplicationBoard.tsx | 6 ++++-- .../components/shared/ApplicationBoardDialog.tsx | 6 +++--- .../src/UI/components/ApplicationEntry/index.tsx | 13 +++++++++---- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index 6241af406074..db406a45202f 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -83,8 +83,10 @@ const useStyles = makeStyles<{ shouldScroll: boolean }>()((theme, props) => { color: getMaskColor(theme).textLight, }, recommendFeatureAppListWrapper: { - width: '100%', - margin: '0px 2px 12px 2px', + display: 'flex', + overflowX: 'scroll', + margin: '0px 2px 4px 2px', + padding: '8px 2px 0 2px', }, } }) diff --git a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx index c853de278ac0..c7edb8161cdb 100644 --- a/packages/mask/src/components/shared/ApplicationBoardDialog.tsx +++ b/packages/mask/src/components/shared/ApplicationBoardDialog.tsx @@ -12,9 +12,9 @@ import { useI18N } from '../../utils' const useStyles = makeStyles()((theme) => { return { content: { - padding: theme.spacing(2, 2.5), - height: 490, - overflowX: 'hidden', + padding: theme.spacing(1, 2, 2), + height: 470, + overflow: 'hidden', }, settingIcon: { height: 24, diff --git a/packages/shared/src/UI/components/ApplicationEntry/index.tsx b/packages/shared/src/UI/components/ApplicationEntry/index.tsx index ad386237c7db..35c8cf0bb4c0 100644 --- a/packages/shared/src/UI/components/ApplicationEntry/index.tsx +++ b/packages/shared/src/UI/components/ApplicationEntry/index.tsx @@ -16,8 +16,8 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => ( applicationBoxHover: { cursor: 'pointer', '&:hover': { - transform: 'scale(1.05) translateY(-4px)', - boxShadow: theme.palette.mode === 'light' ? '0px 10px 16px rgba(0, 0, 0, 0.1)' : 'none', + transform: 'scale(1.02) translateY(-2px)', + boxShadow: theme.palette.mode === 'light' ? '0px 5px 8px rgba(0, 0, 0, 0.05)' : 'none', }, }, applicationImg: { @@ -41,9 +41,11 @@ const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => ( }, recommendFeatureApplicationBox: { width: 220, + minWidth: 220, height: 97, + marginRight: 12, cursor: 'pointer', - display: 'flex', + display: 'inline-flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', @@ -88,7 +90,10 @@ export function ApplicationEntry(props: ApplicationEntryProps) { style={{ background: recommendFeature.backgroundGradient, }} - className={classNames(classes.recommendFeatureApplicationBox, disabled ? classes.disabled : '')} + className={classNames( + classes.recommendFeatureApplicationBox, + disabled ? classes.disabled : classes.applicationBoxHover, + )} onClick={disabled ? () => {} : onClick}>
{icon}
From 321f85286df6b75f92d8ed2cb611556ffcbf7047 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Thu, 28 Apr 2022 19:19:45 +0800 Subject: [PATCH 19/32] chore: ui style --- packages/mask/src/components/shared/ApplicationBoard.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index db406a45202f..d85e8a4f1b41 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -87,6 +87,9 @@ const useStyles = makeStyles<{ shouldScroll: boolean }>()((theme, props) => { overflowX: 'scroll', margin: '0px 2px 4px 2px', padding: '8px 2px 0 2px', + '&::-webkit-scrollbar': { + display: 'none', + }, }, } }) From e79aeb7e044e852d139be2a5db70912c7edb2a94 Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Sat, 30 Apr 2022 00:11:04 +0800 Subject: [PATCH 20/32] fix: can't open composition dialog when there is no persona --- .../src/components/CompositionDialog/Composition.tsx | 9 ++------- .../mask/src/components/CompositionDialog/useSubmit.ts | 2 +- packages/mask/src/social-network/ui.ts | 1 - 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/mask/src/components/CompositionDialog/Composition.tsx b/packages/mask/src/components/CompositionDialog/Composition.tsx index 875ddcc1158d..897edc574cbd 100644 --- a/packages/mask/src/components/CompositionDialog/Composition.tsx +++ b/packages/mask/src/components/CompositionDialog/Composition.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useState, useRef } from 'react' import { DialogContent } from '@mui/material' import { DialogStackingProvider } from '@masknet/theme' -import { activatedSocialNetworkUI, globalUIState } from '../../social-network' +import { activatedSocialNetworkUI } from '../../social-network' import { MaskMessages, useI18N } from '../../utils' import { CrossIsolationMessages } from '@masknet/shared-base' import { useRecipientsList } from './useRecipientsList' @@ -56,12 +56,7 @@ export function Composition({ type = 'timeline', requireClipboardPermission }: P useEffect(() => { return CrossIsolationMessages.events.requestComposition.on(({ reason, open, content, options }) => { - if ( - (reason !== 'reply' && reason !== type) || - (reason === 'reply' && type === 'popup') || - globalUIState.profiles.value.length <= 0 - ) - return + if ((reason !== 'reply' && reason !== type) || (reason === 'reply' && type === 'popup')) return setOpen(open) setReason(reason) if (content) UI.current?.setMessage(content) diff --git a/packages/mask/src/components/CompositionDialog/useSubmit.ts b/packages/mask/src/components/CompositionDialog/useSubmit.ts index a64d6af351a3..2843aa4b1363 100644 --- a/packages/mask/src/components/CompositionDialog/useSubmit.ts +++ b/packages/mask/src/components/CompositionDialog/useSubmit.ts @@ -18,7 +18,7 @@ export function useSubmit(onClose: () => void, reason: 'timeline' | 'popup' | 'r async (info: SubmitComposition) => { const { content, encode, target } = info - const currentProfile = globalUIState.profiles.value?.[0].identifier + const currentProfile = globalUIState.profiles.value?.[0]?.identifier const _encrypted = await Services.Crypto.encryptTo(content, target, whoAmI?.identifier ?? currentProfile) const encrypted = socialNetworkEncoder(activatedSocialNetworkUI.encryptionNetwork, _encrypted) diff --git a/packages/mask/src/social-network/ui.ts b/packages/mask/src/social-network/ui.ts index add60310e0af..9743c49ee192 100644 --- a/packages/mask/src/social-network/ui.ts +++ b/packages/mask/src/social-network/ui.ts @@ -90,7 +90,6 @@ export async function activateSocialNetworkUIInner(ui_deferred: SocialNetworkUI. ui.injection.toolbox?.(signal, 'wallet') ui.injection.toolbox?.(signal, 'application') } - ui.injection.setupPrompt?.(signal) ui.injection.newPostComposition?.start?.(signal) ui.injection.searchResult?.(signal) ui.injection.userBadge?.(signal) From f463f6188572b9207364acaf7fa8bba115b7fb37 Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Fri, 6 May 2022 17:19:20 +0800 Subject: [PATCH 21/32] fix: user guide step 3 not showing --- packages/mask/shared-ui/locales/zh-CN.json | 7 ++++--- .../twitter.com/injection/ToolboxHint.tsx | 2 +- .../social-network-adaptor/twitter.com/utils/selector.ts | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json index 28c01f7ecb47..510c665d6037 100644 --- a/packages/mask/shared-ui/locales/zh-CN.json +++ b/packages/mask/shared-ui/locales/zh-CN.json @@ -106,9 +106,10 @@ "setup_guide_pin_tip_step_find_left": "在扩展列表中查找Mask Network并点击 ", "setup_guide_pin_tip_step_find_right": " 按钮。", "setup_guide_pin_tip_successfully": "固定成功。", - "user_guide_tip_1": "点击这里快速访问主要功能。", - "user_guide_tip_2": "点击这里连接您的钱包。您可以在此选择网络或更改您的钱包。", - "user_guide_tip_3": "点击这里快速开始。", + "user_guide_tip_1": "", + "user_guide_tip_2": "", + "user_guide_tip_3": "", + "user_guide_tip_4": "点击这里快速开始。", "create_persona": "创建身份", "connect_persona": "连接身份", "please_create_persona": "请创建身份", diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint.tsx index ce817fb80aa4..a993225f7f51 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint.tsx +++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/ToolboxHint.tsx @@ -15,5 +15,5 @@ export function injectToolboxHintAtTwitter(signal: AbortSignal, category: 'walle function injectProfile(signal: AbortSignal) { const watcher = new MutationObserverWatcher(sideBarProfileSelector()) startWatch(watcher, signal) - createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render() + createReactRootShadowed(watcher.firstDOMProxy.beforeShadow, { signal }).render() } 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 a55cdeeff773..cfcc5795bbc5 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 @@ -113,7 +113,7 @@ export const postEditorInPopupSelector: () => LiveSelector = () => export const toolBoxInSideBarSelector: () => LiveSelector = () => querySelector('[role="banner"] [role="navigation"] > div') export const sideBarProfileSelector: () => LiveSelector = () => - querySelector('[role="banner"] [role="navigation"] [aria-label="Lists"] > div') + querySelector('[role="banner"] [role="navigation"] [aria-label="Profile"] > div') export const postEditorInTimelineSelector: () => LiveSelector = () => querySelector('[role="main"] :not(aside) > [role="progressbar"] ~ div [role="button"][aria-label]:nth-child(6)') From bc7196e9bb912ba31aeea2e308037ebc613a4585 Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Fri, 6 May 2022 18:19:54 +0800 Subject: [PATCH 22/32] fix: zh translation --- packages/mask/shared-ui/locales/zh-CN.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json index 510c665d6037..ab788beefd6e 100644 --- a/packages/mask/shared-ui/locales/zh-CN.json +++ b/packages/mask/shared-ui/locales/zh-CN.json @@ -106,10 +106,10 @@ "setup_guide_pin_tip_step_find_left": "在扩展列表中查找Mask Network并点击 ", "setup_guide_pin_tip_step_find_right": " 按钮。", "setup_guide_pin_tip_successfully": "固定成功。", - "user_guide_tip_1": "", - "user_guide_tip_2": "", - "user_guide_tip_3": "", - "user_guide_tip_4": "点击这里快速开始。", + "user_guide_tip_1": "点击这里快速访问主要功能。", + "user_guide_tip_2": "点击这里连接或更改您的钱包。", + "user_guide_tip_3": "浏览 Twitter 好友的 Web 3 足迹，畅享 Web 3 的自由。", + "user_guide_tip_4": "尝试快速开始探索 Web 3 世界。", "create_persona": "创建身份", "connect_persona": "连接身份", "please_create_persona": "请创建身份", From 3f065efc5f521eb7b478da6f34b127775b5e68fb Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Mon, 9 May 2022 11:50:07 +0800 Subject: [PATCH 23/32] fix: identity collecting --- .../twitter.com/collecting/identity.ts | 36 ++++++++++++++++--- .../twitter.com/utils/selector.ts | 20 +++++++++++ 2 files changed, 52 insertions(+), 4 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts b/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts index e1eca67fb2c3..f4d2f7cc84d7 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts @@ -8,6 +8,7 @@ import { searchSelfHandleSelector, searchSelfNicknameSelector, searchSelfAvatarSelector, + selfInfoSelectors, } from '../utils/selector' import { creator, SocialNetworkUI as Next } from '../../../social-network' import Services from '../../../extension/service' @@ -15,14 +16,41 @@ import { twitterBase } from '../base' import { getAvatar, getBio, getNickname, getTwitterId, getPersonalHomepage } from '../utils/user' import { isMobileTwitter } from '../utils/isMobile' +function reconginzeDesktop() { + const collect = () => { + const handle = selfInfoSelectors().handle.evaluate() + const nickname = selfInfoSelectors().name.evaluate() + const avatar = selfInfoSelectors().userAvatar.evaluate() + + return { handle, nickname, avatar } + } + + const watcher = new MutationObserverWatcher(selfInfoSelectors().handle) + + return { watcher, collect } +} + +function reconginzeMobile() { + const collect = () => { + const avatar = searchSelfAvatarSelector().evaluate()?.getAttribute('src') ?? '' + const handle = searchSelfHandleSelector().evaluate()?.textContent?.trim()?.replace(/^@/, '') + const nickname = searchSelfNicknameSelector().evaluate()?.textContent?.trim() ?? '' + + return { handle, nickname, avatar } + } + + const watcher = new MutationObserverWatcher(searchSelfHandleSelector()) + + return { watcher, collect } +} + function resolveLastRecognizedIdentityInner( ref: Next.CollectingCapabilities.IdentityResolveProvider['recognized'], cancel: AbortSignal, ) { + const task = isMobileTwitter ? reconginzeMobile() : reconginzeDesktop() const assign = () => { - const avatar = searchSelfAvatarSelector().evaluate()?.getAttribute('src') ?? '' - const handle = searchSelfHandleSelector().evaluate()?.textContent?.trim()?.replace(/^@/, '') - const nickname = searchSelfNicknameSelector().evaluate()?.textContent?.trim() ?? '' + const { handle, nickname, avatar } = task.collect() if (handle) { ref.value = { @@ -32,7 +60,7 @@ function resolveLastRecognizedIdentityInner( } } } - const watcher = new MutationObserverWatcher(searchSelfHandleSelector()) + const watcher = task.watcher .addListener('onAdd', () => assign()) .addListener('onChange', () => assign()) .startWatch({ 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 cfcc5795bbc5..9ef0a8486c87 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 @@ -1,4 +1,5 @@ import { LiveSelector } from '@dimensiondev/holoflows-kit' +import { regexMatch } from '../../../utils/utils' import { isMobileTwitter } from './isMobile' import { isCompose } from './postBox' @@ -216,6 +217,25 @@ export const postsContentSelector = () => export const postAvatarsContentSelector = () => querySelectorAll('[data-testid="tweet"] > div > div > div > :nth-child(2)') +const base = querySelector('#react-root + script') +const handle = /"screen_name":"(.*?)"/ +const name = /"name":"(.*?)"/ +const bio = /"description":"(.*?)"/ +const avatar = /"profile_image_url_https":"(.*?)"/ +/** + * first matched element can be extracted by index zero, followings are all capture groups, if no 'g' specified. + * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match + */ +const p = (regex: RegExp, index: number) => { + return base.clone().map((x) => regexMatch(x.innerText, regex, index)) +} +export const selfInfoSelectors = () => ({ + handle: p(handle, 1), + name: p(name, 1), + bio: p(bio, 1), + userAvatar: p(avatar, 1), +}) + // #region self info export const searchSelfHandleSelector = () => { return querySelector( From 019c65827f6468efa71f40089c7b6426e912b12d Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Mon, 9 May 2022 11:53:56 +0800 Subject: [PATCH 24/32] fix: typo --- .../twitter.com/collecting/identity.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts b/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts index f4d2f7cc84d7..52eb21793cf8 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/collecting/identity.ts @@ -16,7 +16,7 @@ import { twitterBase } from '../base' import { getAvatar, getBio, getNickname, getTwitterId, getPersonalHomepage } from '../utils/user' import { isMobileTwitter } from '../utils/isMobile' -function reconginzeDesktop() { +function recognizeDesktop() { const collect = () => { const handle = selfInfoSelectors().handle.evaluate() const nickname = selfInfoSelectors().name.evaluate() @@ -30,7 +30,7 @@ function reconginzeDesktop() { return { watcher, collect } } -function reconginzeMobile() { +function recognizeMobile() { const collect = () => { const avatar = searchSelfAvatarSelector().evaluate()?.getAttribute('src') ?? '' const handle = searchSelfHandleSelector().evaluate()?.textContent?.trim()?.replace(/^@/, '') @@ -48,7 +48,7 @@ function resolveLastRecognizedIdentityInner( ref: Next.CollectingCapabilities.IdentityResolveProvider['recognized'], cancel: AbortSignal, ) { - const task = isMobileTwitter ? reconginzeMobile() : reconginzeDesktop() + const task = isMobileTwitter ? recognizeMobile() : recognizeDesktop() const assign = () => { const { handle, nickname, avatar } = task.collect() From b9e02ad672ba4442326a8157168dc8967d11e00b Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Fri, 13 May 2022 14:07:15 +0800 Subject: [PATCH 25/32] feat: setup social network in current window --- packages/dashboard/src/pages/Welcome/index.tsx | 5 ++++- .../extension/background-script/SocialNetworkService.ts | 8 ++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/dashboard/src/pages/Welcome/index.tsx b/packages/dashboard/src/pages/Welcome/index.tsx index cb2d930841cc..ae56da656a9a 100644 --- a/packages/dashboard/src/pages/Welcome/index.tsx +++ b/packages/dashboard/src/pages/Welcome/index.tsx @@ -79,7 +79,10 @@ export default function Welcome() { iframeRef={iframeRef} privacyPolicyURL={agreementContentPageURL} iframeLoadHandler={handleIFrameLoad} - agreeHandler={() => Services.SocialNetwork.setupSocialNetwork('twitter.com')} + agreeHandler={async () => { + const url = await Services.SocialNetwork.setupSocialNetwork('twitter.com', false) + url && location.assign(url) + }} cancelHandler={() => window.close()} /> ) diff --git a/packages/mask/src/extension/background-script/SocialNetworkService.ts b/packages/mask/src/extension/background-script/SocialNetworkService.ts index 8446a6c95cc1..dae4f8ed0052 100644 --- a/packages/mask/src/extension/background-script/SocialNetworkService.ts +++ b/packages/mask/src/extension/background-script/SocialNetworkService.ts @@ -35,7 +35,7 @@ function requestSNSAdaptorsPermission(uis: SocialNetworkUI.Definition[]) { }) } -export async function setupSocialNetwork(defaultNetwork: string) { +export async function setupSocialNetwork(defaultNetwork: string, newTab = true) { const ui = await loadSocialNetworkUI(defaultNetwork) const home = ui.utils.getHomePage?.() @@ -46,7 +46,11 @@ export async function setupSocialNetwork(defaultNetwork: string) { userGuideStatus[defaultNetwork].value = '1' await delay(100) - home && browser.tabs.create({ active: true, url: home }) + if (!home) return + if (!newTab) return home + + browser.tabs.create({ active: true, url: home }) + return } export async function connectSocialNetwork( From 1da164bbf856e24d462495512bf2d8bb33c80fc7 Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Fri, 13 May 2022 14:13:34 +0800 Subject: [PATCH 26/32] chore: remove useSetupSocialNetwork hook --- .../src/pages/Welcome/hooks/useSetupSocialNetwork.ts | 6 ------ packages/dashboard/src/pages/Welcome/index.tsx | 2 -- 2 files changed, 8 deletions(-) delete mode 100644 packages/dashboard/src/pages/Welcome/hooks/useSetupSocialNetwork.ts diff --git a/packages/dashboard/src/pages/Welcome/hooks/useSetupSocialNetwork.ts b/packages/dashboard/src/pages/Welcome/hooks/useSetupSocialNetwork.ts deleted file mode 100644 index b8d5c9e60568..000000000000 --- a/packages/dashboard/src/pages/Welcome/hooks/useSetupSocialNetwork.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { useAsyncFn } from 'react-use' -import { Services } from '../../../API' - -export function useSetupSocialNetwork() { - return useAsyncFn(Services.SocialNetwork.setupSocialNetwork) -} diff --git a/packages/dashboard/src/pages/Welcome/index.tsx b/packages/dashboard/src/pages/Welcome/index.tsx index ae56da656a9a..9c5af3cd33b4 100644 --- a/packages/dashboard/src/pages/Welcome/index.tsx +++ b/packages/dashboard/src/pages/Welcome/index.tsx @@ -5,7 +5,6 @@ import { memo, MutableRefObject, useEffect, useMemo, useRef } from 'react' import { useDashboardI18N } from '../../locales' import links from '../../components/FooterLine/links.json' import { openWindow } from '@masknet/shared-base-ui' -import { useSetupSocialNetwork } from './hooks/useSetupSocialNetwork' import { Services } from '../../API' const Content = styled('div')(({ theme }) => ({ @@ -33,7 +32,6 @@ const IFrame = styled('iframe')(({ theme }) => ({ export default function Welcome() { const iframeRef = useRef(null) const mode = useTheme().palette.mode - const [, setupSocialNetwork] = useSetupSocialNetwork() const agreementContentPageURL = new URL('./en.html', import.meta.url).toString() const privacyPolicyDocument = useMemo(() => () => iframeRef?.current?.contentWindow?.document, [iframeRef]) From 4e70de3f37ba9eef5f2b81ca26f28df0253a8ca8 Mon Sep 17 00:00:00 2001 From: Hom Date: Fri, 13 May 2022 14:15:20 +0800 Subject: [PATCH 27/32] chore: reply review Co-authored-by: septs --- packages/dashboard/src/pages/Welcome/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dashboard/src/pages/Welcome/index.tsx b/packages/dashboard/src/pages/Welcome/index.tsx index 9c5af3cd33b4..bd570f27bdc3 100644 --- a/packages/dashboard/src/pages/Welcome/index.tsx +++ b/packages/dashboard/src/pages/Welcome/index.tsx @@ -79,7 +79,7 @@ export default function Welcome() { iframeLoadHandler={handleIFrameLoad} agreeHandler={async () => { const url = await Services.SocialNetwork.setupSocialNetwork('twitter.com', false) - url && location.assign(url) + if (url) location.assign(url) }} cancelHandler={() => window.close()} /> From 8f4c1aa779ae48e56483ec7d7fbe3b8b341247c3 Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Fri, 13 May 2022 16:17:41 +0800 Subject: [PATCH 28/32] feat: disable open composition dialog after user guide --- packages/mask/src/components/GuideStep/index.tsx | 2 +- .../mask/src/components/InjectedComponents/PostDialogHint.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/components/GuideStep/index.tsx b/packages/mask/src/components/GuideStep/index.tsx index fdffc02c4400..0edc6afe0752 100644 --- a/packages/mask/src/components/GuideStep/index.tsx +++ b/packages/mask/src/components/GuideStep/index.tsx @@ -219,7 +219,7 @@ export default function GuideStep({
{step === total ? ( - {t('try')} + {t('ok')} ) : ( <> diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx index 960e9a4522d3..20335cac78e3 100644 --- a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx +++ b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx @@ -73,7 +73,7 @@ const EntryIconButton = memo((props: PostDialogHintUIProps) => { return disableGuideTip ? ( getEntry() ) : ( - + {getEntry()} ) From 26bb1540d9ae8fb698ad4de2738ae9a8196a338c Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Sat, 14 May 2022 12:05:47 +0800 Subject: [PATCH 29/32] Revert "feat: disable open composition dialog after user guide" This reverts commit 8f4c1aa779ae48e56483ec7d7fbe3b8b341247c3. --- packages/mask/src/components/GuideStep/index.tsx | 2 +- .../mask/src/components/InjectedComponents/PostDialogHint.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/components/GuideStep/index.tsx b/packages/mask/src/components/GuideStep/index.tsx index 0edc6afe0752..fdffc02c4400 100644 --- a/packages/mask/src/components/GuideStep/index.tsx +++ b/packages/mask/src/components/GuideStep/index.tsx @@ -219,7 +219,7 @@ export default function GuideStep({
{step === total ? ( - {t('ok')} + {t('try')} ) : ( <> diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx index 20335cac78e3..960e9a4522d3 100644 --- a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx +++ b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx @@ -73,7 +73,7 @@ const EntryIconButton = memo((props: PostDialogHintUIProps) => { return disableGuideTip ? ( getEntry() ) : ( - + {getEntry()} ) From bd1a0a54107fff58841729f69a838b2c1e300cd8 Mon Sep 17 00:00:00 2001 From: Lantt Date: Sat, 14 May 2022 15:01:40 +0800 Subject: [PATCH 30/32] feat: code review feedback --- .../components/InjectedComponents/ToolboxUnstyled.tsx | 9 ++------- .../extension/background-script/SocialNetworkService.ts | 4 +--- .../shared/src/contexts/components/InjectedDialog.tsx | 9 +++++---- 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx index 8684e59a54bd..cef8c97882b1 100644 --- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx +++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx @@ -34,6 +34,7 @@ import { AccountBalanceWalletIcon } from '@masknet/icons' import { makeStyles } from '@masknet/theme' import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord' import { NextIDVerificationStatus, useNextIDConnectStatus } from '../DataSource/useNextID' +import { MaskIcon } from '../../resources/MaskIcon' const useStyles = makeStyles()((theme) => ({ title: { @@ -103,13 +104,7 @@ function ToolboxHintForApplication(props: ToolboxHintProps) { - + {mini ? null : ( !x.permission?.request()) - if (!req.length) return req return requestExtensionPermission({ - origins: [...req.map((x) => x.declarativePermissions.origins).flat()], + origins: [...uis.map((x) => x.declarativePermissions.origins).flat()], }) } diff --git a/packages/shared/src/contexts/components/InjectedDialog.tsx b/packages/shared/src/contexts/components/InjectedDialog.tsx index 8b675908b9af..649929c9e2ef 100644 --- a/packages/shared/src/contexts/components/InjectedDialog.tsx +++ b/packages/shared/src/contexts/components/InjectedDialog.tsx @@ -10,6 +10,7 @@ import { DialogProps, DialogTitle, IconButton, + Stack, Typography, useMediaQuery, useTheme, @@ -29,7 +30,7 @@ const useStyles = makeStyles()((theme, { clean }) => ({ whiteSpace: 'nowrap', gridTemplateColumns: '50px auto 50px', }, - dialogTitleTail: { + dialogTitleEndingContent: { display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -60,7 +61,7 @@ const useStyles = makeStyles()((theme, { clean }) => ({ export type InjectedDialogClassKey = | DialogClassKey | 'dialogTitle' - | 'dialogTitleTail' + | 'dialogTitleEndingContent' | 'dialogContent' | 'dialogActions' | 'dialogTitleTypography' @@ -87,7 +88,7 @@ export function InjectedDialog(props: InjectedDialogProps) { dialogCloseButton, dialogContent, dialogTitle, - dialogTitleTail, + dialogTitleEndingContent, dialogTitleTypography, dialogBackdropRoot, container, @@ -157,7 +158,7 @@ export function InjectedDialog(props: InjectedDialogProps) { {title} -
{titleTail}
+ {titleTail} ) : null} From 6b322880bb6464fe8113c1b8c0c9acea6003ade8 Mon Sep 17 00:00:00 2001 From: Lantt Date: Sat, 14 May 2022 15:55:19 +0800 Subject: [PATCH 31/32] refactor: remove unnecessary array deconstruction --- .../src/extension/background-script/SocialNetworkService.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/extension/background-script/SocialNetworkService.ts b/packages/mask/src/extension/background-script/SocialNetworkService.ts index 571398212ca2..59931d5b45ed 100644 --- a/packages/mask/src/extension/background-script/SocialNetworkService.ts +++ b/packages/mask/src/extension/background-script/SocialNetworkService.ts @@ -29,7 +29,7 @@ function requestSNSAdaptorPermission(ui: SocialNetworkUI.Definition) { function requestSNSAdaptorsPermission(uis: SocialNetworkUI.Definition[]) { return requestExtensionPermission({ - origins: [...uis.map((x) => x.declarativePermissions.origins).flat()], + origins: uis.map((x) => x.declarativePermissions.origins).flat(), }) } From e4a2fdd1c2944e4d18a459602093b01fed9e661f Mon Sep 17 00:00:00 2001 From: Lantt Date: Sat, 14 May 2022 16:11:37 +0800 Subject: [PATCH 32/32] refactor: use location assign to replace direction assignment --- packages/mask/src/components/GuideStep/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/mask/src/components/GuideStep/index.tsx b/packages/mask/src/components/GuideStep/index.tsx index fdffc02c4400..2b326fc1b9c9 100644 --- a/packages/mask/src/components/GuideStep/index.tsx +++ b/packages/mask/src/components/GuideStep/index.tsx @@ -121,10 +121,8 @@ export default function GuideStep({ setOpen(open) if (!open) return - const url = new URL(location.href) - if (url.pathname === '/home') return - url.pathname = '/home' - location.href = url.href + if (location.pathname === '/home') return + location.assign('/home') }, [lastStep]) useEffect(() => {