From 6a5e24ee3dcd29b17629cc9c55a7bc42717ad540 Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Wed, 18 May 2022 21:07:17 +0800 Subject: [PATCH 1/8] fix: bugfix for test --- .../mask/src/plugins/MaskPluginWrapper.tsx | 9 -------- .../src/utils/theme/useClassicMaskSNSTheme.ts | 9 +++++++- .../mask/src/utils/theme/useSwapPageTheme.ts | 1 + .../src/web3/UI/EthereumChainBoundary.tsx | 21 +------------------ .../UI/EthereumWalletConnectedBoundary.tsx | 12 ----------- 5 files changed, 10 insertions(+), 42 deletions(-) diff --git a/packages/mask/src/plugins/MaskPluginWrapper.tsx b/packages/mask/src/plugins/MaskPluginWrapper.tsx index 82f6f215d111..ea2ba720a107 100644 --- a/packages/mask/src/plugins/MaskPluginWrapper.tsx +++ b/packages/mask/src/plugins/MaskPluginWrapper.tsx @@ -74,15 +74,6 @@ const useStyles = makeStyles<{ backgroundGradient?: string }>()((theme, props) = body: { padding: theme.spacing(0), }, - button: { - backgroundColor: theme.palette.maskColor.dark, - color: 'white', - width: 254, - '&,&:hover': { - background: theme.palette.maskColor.dark, - }, - borderRadius: 9999, - }, } }) diff --git a/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts b/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts index 1c083fb4ec90..5413c6bd916d 100644 --- a/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts +++ b/packages/mask/src/utils/theme/useClassicMaskSNSTheme.ts @@ -10,6 +10,8 @@ import { ValueRef } from '@dimensiondev/holoflows-kit' import { useValueRef } from '@masknet/shared-base-ui' import { languageSettings } from '../../settings/settings' import { cloneDeep, merge } from 'lodash-unified' +import twitterColorSchema from '../../social-network-adaptor/twitter.com/customization/twitter-color-schema.json' +import produce, { setAutoFreeze } from 'immer' const staticRef = createSubscriptionFromValueRef(new ValueRef('light')) const defaultUseTheme = (t: Theme) => t @@ -22,9 +24,14 @@ export function useClassicMaskSNSTheme() { const palette = useSubscription(provider) const baseTheme = palette === 'dark' ? MaskDarkTheme : MaskLightTheme + setAutoFreeze(false) + const maskTheme = produce(baseTheme, (theme) => { + const colorSchema = twitterColorSchema[theme.palette.mode] + theme.palette.maskColor = colorSchema.maskColor + }) // TODO: support RTL? const [localization, isRTL] = useThemeLanguage(useValueRef(languageSettings)) - const theme = unstable_createMuiStrictModeTheme(baseTheme, localization) + const theme = unstable_createMuiStrictModeTheme(maskTheme, localization) return usePostTheme(theme) } diff --git a/packages/mask/src/utils/theme/useSwapPageTheme.ts b/packages/mask/src/utils/theme/useSwapPageTheme.ts index 0b333937e75d..1377a6039aa1 100644 --- a/packages/mask/src/utils/theme/useSwapPageTheme.ts +++ b/packages/mask/src/utils/theme/useSwapPageTheme.ts @@ -26,6 +26,7 @@ export function useSwapPageTheme() { Object.assign(theme.palette[color], colorSchema[color]) } }) + theme.palette.maskColor = colorSchema.maskColor theme.palette.divider = colorSchema.divider theme.palette.secondaryDivider = colorSchema.secondaryDivider theme.components = theme.components || {} diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx index 5eaaa17c574c..7b276464f063 100644 --- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx +++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx @@ -35,14 +35,6 @@ import { WalletIcon } from '@masknet/shared' import { PluginWalletConnectIcon } from '@masknet/icons' const useStyles = makeStyles()((theme) => ({ - button: { - backgroundColor: theme.palette.maskColor.dark, - color: 'white', - width: 254, - '&,&:hover': { - background: theme.palette.maskColor.dark, - }, - }, action: { textAlign: 'center', margin: theme.spacing(1), @@ -246,18 +238,7 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) { isBorderColorNotDefault /> } - sx={ - props.switchButtonStyle ?? { - backgroundColor: theme.palette.maskColor.dark, - width: '100%', - color: 'white', - '&:hover': { - backgroundColor: theme.palette.maskColor.dark, - }, - padding: 1, - margin: 0, - } - } + sx={props.switchButtonStyle} style={{ borderRadius: 10 }} init={ diff --git a/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx b/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx index 1f5a08c3e18d..63efefd2ba4f 100644 --- a/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx +++ b/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx @@ -10,20 +10,8 @@ import { useWalletRiskWarningDialog } from '../../plugins/Wallet/hooks/useWallet const useStyles = makeStyles()((theme) => ({ button: { - backgroundColor: theme.palette.maskColor.dark, - color: 'white', - fontSize: 14, - fontWeight: 700, - width: '100%', - '&:hover': { - backgroundColor: theme.palette.maskColor.dark, - }, margin: 0, }, - grid: { - justifyContent: 'center', - padding: 8, - }, })) export interface EthereumWalletConnectedBoundaryProps From fe9fe192512e95add94d72024aa49265ec86c217 Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Wed, 18 May 2022 22:55:44 +0800 Subject: [PATCH 2/8] fix: bugfix for change network --- .../PluginProviderRender.tsx | 1 + .../SNSAdaptor/SelectProviderDialog/index.tsx | 8 +++++- .../src/web3/UI/EthereumChainBoundary.tsx | 26 ++----------------- 3 files changed, 10 insertions(+), 25 deletions(-) diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx index f7937415e4ed..33661f69ee51 100644 --- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx +++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx @@ -128,6 +128,7 @@ export function PluginProviderRender({ key={network.ID} onClick={() => { setUndeterminedPluginID(network.networkSupporterPluginID as NetworkPluginID) + console.log(network.ID) setUndeterminedNetworkID(network.ID) }}> diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx index c55166e43d31..1b2614b87110 100644 --- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx +++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx @@ -19,6 +19,7 @@ import { WalletMessages, WalletRPC } from '../../messages' import { hasNativeAPI, nativeAPI } from '../../../../../shared/native-rpc' import { PluginProviderRender } from './PluginProviderRender' import { pluginIDSettings } from '../../../../settings/settings' +import { useUpdateEffect } from 'react-use' const useStyles = makeStyles()((theme) => ({ content: { @@ -70,7 +71,6 @@ export function SelectProviderDialog(props: SelectProviderDialogProps) { async (result?: Web3Plugin.ConnectionResult) => { if (result) await WalletRPC.updateAccount(result as Web3Plugin.ConnectionResult) - if (undeterminedNetwork?.type === networkType) { pluginIDSettings.value = undeterminedPluginID } @@ -80,6 +80,12 @@ export function SelectProviderDialog(props: SelectProviderDialogProps) { [networkType, undeterminedNetwork?.type, undeterminedPluginID, closeDialog, isDashboard], ) + useUpdateEffect(() => { + if (undeterminedNetwork?.type === networkType) { + pluginIDSettings.value = undeterminedPluginID + } + }, [undeterminedNetwork?.type, networkType]) + // not available for the native app if (hasNativeAPI) return null diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx index 7b276464f063..03596762dc52 100644 --- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx +++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx @@ -185,18 +185,7 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) { startIcon={} variant="contained" size={props.ActionButtonPromiseProps?.size} - sx={{ - backgroundColor: theme.palette.maskColor.dark, - width: '100%', - color: 'white', - '&:hover': { - backgroundColor: theme.palette.maskColor.dark, - }, - margin: 0, - lineHeight: 0, - paddingTop: 1.25, - paddingBottom: 1.25, - }} + sx={{ marginTop: 1.5 }} onClick={openSelectProviderDialog}> {t('plugin_wallet_connect_wallet')} @@ -284,18 +273,7 @@ export function EthereumChainBoundary(props: EthereumChainBoundaryProps) { size={18} /> } - sx={ - props.switchButtonStyle ?? { - backgroundColor: theme.palette.maskColor.dark, - width: '100%', - color: 'white', - '&:hover': { - backgroundColor: theme.palette.maskColor.dark, - }, - padding: 1, - margin: 0, - } - } + sx={props.switchButtonStyle} style={{ borderRadius: 10, paddingTop: 11, paddingBottom: 11 }} init={ From fd953b7df203f8eff39997c9fd2c4cda74793a49 Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Wed, 18 May 2022 23:42:57 +0800 Subject: [PATCH 3/8] fix: ui style --- .../mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx | 2 +- .../src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx index ae666d666175..af9afe3ca609 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx @@ -241,7 +241,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) { const tokenState = useState(RpTypeTabs.ERC20) - const dialogContentHeight = state[0] === DialogTabs.past ? 600 : tokenState[0] === RpTypeTabs.ERC20 ? 350 : 670 + const dialogContentHeight = state[0] === DialogTabs.past ? 600 : tokenState[0] === RpTypeTabs.ERC20 ? 350 : 690 const tabProps: AbstractTabProps = { tabs: [ diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx index 04adabcfc0d4..d8d25f6bb9e9 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx @@ -71,7 +71,6 @@ const useStyles = makeStyles()((theme) => { gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, width: '100%', - height: 200, overflowY: 'auto', background: theme.palette.background.default, borderRadius: 12, From 68392b8068d40ef5bd42e38089824e3189a874ae Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Thu, 19 May 2022 00:05:59 +0800 Subject: [PATCH 4/8] chore: revert remove height --- .../src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx index d8d25f6bb9e9..63c55e2e534b 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx @@ -72,6 +72,7 @@ const useStyles = makeStyles()((theme) => { gap: 16, width: '100%', overflowY: 'auto', + height: 200, background: theme.palette.background.default, borderRadius: 12, padding: theme.spacing(1.5, 1.5, 1, 1), From 2fb33cd447d098cb53ae4de579ec7301bb46fe5a Mon Sep 17 00:00:00 2001 From: guanbinrui <52657989+guanbinrui@users.noreply.github.com> Date: Thu, 19 May 2022 00:14:16 +0800 Subject: [PATCH 5/8] refactor: remove console.log --- .../SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx index 33661f69ee51..f7937415e4ed 100644 --- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx +++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx @@ -128,7 +128,6 @@ export function PluginProviderRender({ key={network.ID} onClick={() => { setUndeterminedPluginID(network.networkSupporterPluginID as NetworkPluginID) - console.log(network.ID) setUndeterminedNetworkID(network.ID) }}> From a304bb8d152c5151770c282038cc2b45036a6dbf Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Thu, 19 May 2022 00:30:05 +0800 Subject: [PATCH 6/8] fix: ui style --- .../mask/src/social-network-adaptor/twitter.com/ui-provider.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts index a51c4e3bcb8a..225abaa1dab8 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts @@ -61,7 +61,7 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => { }, dialogTitle: { display: 'grid', - gridTemplateColumns: 'repeat(3, 1fr)', + gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', padding: 16, position: 'relative', From 722684a527c4f54907e3d94a9e752241e89f1ee0 Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Thu, 19 May 2022 10:47:53 +0800 Subject: [PATCH 7/8] fix: padding of dialog content --- .../mask/src/social-network-adaptor/twitter.com/ui-provider.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts index 225abaa1dab8..c292ee3d1f1d 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts @@ -84,7 +84,6 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => { }, }, dialogContent: { - padding: 16, [smallQuery]: { display: 'flex', flexDirection: 'column', From 3ddab882ad5a4e902df7ab011574b9ea834ba17a Mon Sep 17 00:00:00 2001 From: nuanyang233 Date: Thu, 19 May 2022 11:14:11 +0800 Subject: [PATCH 8/8] fix: dialog title color --- .../social-network-adaptor/twitter.com/ui-provider.ts | 2 +- .../src/SNSAdaptor/CheckSecurityDialog.tsx | 11 ++++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts index c292ee3d1f1d..a3e1c4fb8a7b 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/ui-provider.ts @@ -65,7 +65,7 @@ const useInjectedDialogClassesOverwriteTwitter = makeStyles()((theme) => { alignItems: 'center', padding: 16, position: 'relative', - background: theme.palette.background.modalTitle, + background: theme.palette.maskColor.modelTitleBg, borderBottom: 'none', '& > p': { fontSize: 18, diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/CheckSecurityDialog.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/CheckSecurityDialog.tsx index 799f7107b49a..b1de8cdd21ff 100644 --- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/CheckSecurityDialog.tsx +++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/CheckSecurityDialog.tsx @@ -1,5 +1,5 @@ import { Box, DialogContent, Stack } from '@mui/material' -import { makeStyles, MaskDialog, useStylesExtends } from '@masknet/theme' +import { makeStyles, useStylesExtends } from '@masknet/theme' import { useI18N } from '../locales' import { SearchBox } from './components/SearchBox' import { useAsyncFn } from 'react-use' @@ -11,6 +11,7 @@ import { Center, TokenSecurity } from './components/Common' import { DefaultPlaceholder } from './components/DefaultPlaceholder' import { NotFound } from './components/NotFound' import type { ChainId } from '@masknet/web3-shared-evm' +import { InjectedDialog } from '@masknet/shared' const useStyles = makeStyles()((theme) => ({ root: { @@ -52,11 +53,7 @@ export function CheckSecurityDialog(props: BuyTokenDialogProps) { }, []) return ( - + @@ -81,6 +78,6 @@ export function CheckSecurityDialog(props: BuyTokenDialogProps) { - + ) }