From f2bf4641b8770ff55c934c73875b2cd23825b86f Mon Sep 17 00:00:00 2001 From: Randolph <840094513@qq.com> Date: Mon, 11 Jul 2022 14:24:59 +0800 Subject: [PATCH 1/3] fix: profile content component computed dependency --- .../components/InjectedComponents/ProfileTabContent.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx index 204d5dcfb855..15f556b7f6ce 100644 --- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx +++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx @@ -102,7 +102,7 @@ export function ProfileTabContent(props: ProfileTabContentProps) { } }) return [...socialAddressList, ...addresses] - }, [socialAddressList, wallets, isOwn]) + }, [socialAddressList, wallets?.map((x) => x.identity).join(), isOwn]) const activatedPlugins = useActivatedPluginsSNSAdaptor('any') const availablePlugins = useAvailablePlugins(activatedPlugins) @@ -163,9 +163,10 @@ export function ProfileTabContent(props: ProfileTabContentProps) { ) }, [ componentTabId, + personaPublicKey, displayPlugins.map((x) => x.ID).join(), personaList.join(), - socialAddressList.map((x) => x.address).join(), + addressList.map((x) => x.address).join(), ]) useLocationChange(() => { @@ -188,6 +189,8 @@ export function ProfileTabContent(props: ProfileTabContentProps) { }) }, [identity.identifier?.userId]) + // console.log({ identity, socialAddressList, addressList, wallets }) + if (hidden) return null if (!identity.identifier?.userId || loadingSocialAddressList || loadingPersonaList) From cecb2a17238f77f31432a5832898cdb644ed2ae6 Mon Sep 17 00:00:00 2001 From: Randolph <840094513@qq.com> Date: Mon, 11 Jul 2022 15:13:19 +0800 Subject: [PATCH 2/3] fix: token security ui --- .../src/SNSAdaptor/components/Common.tsx | 6 +-- .../src/SNSAdaptor/components/RiskCard.tsx | 7 ++- .../SNSAdaptor/components/SecurityPanel.tsx | 45 ++++++++----------- .../GoPlusSecurity/src/SNSAdaptor/index.tsx | 1 - packages/plugins/GoPlusSecurity/src/base.ts | 1 - .../TokenSecurity/components/RiskCard.tsx | 7 ++- .../components/SecurityPanel.tsx | 32 +++++++------ .../TokenSecurity/components/TokenPanel.tsx | 14 ++++-- 8 files changed, 60 insertions(+), 53 deletions(-) diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Common.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Common.tsx index f20033875d53..403cd516e158 100644 --- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Common.tsx +++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Common.tsx @@ -34,13 +34,13 @@ export const DefineMapping: DefineMapping = { [SecurityMessageLevel.High]: { i18nKey: 'high_risk', titleColor: '#FF5F5F', - bgColor: 'rgba(255, 95, 95, 0.1)', + bgColor: 'rgba(255, 53, 69, 0.1)', icon: (size: number) => , }, [SecurityMessageLevel.Medium]: { i18nKey: 'medium_risk', - titleColor: '#FFB915', - bgColor: 'rgba(255, 177, 0, 0.2)', + titleColor: '#FFB100', + bgColor: 'rgba(255, 177, 0, 0.1)', // TODO: Merge duplicate icon in a another PR. icon: (size: number) => , }, diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/RiskCard.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/RiskCard.tsx index 971b3342e68b..a9efe262cbb2 100644 --- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/RiskCard.tsx +++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/RiskCard.tsx @@ -22,11 +22,14 @@ const useStyles = makeStyles()((theme) => ({ alignItems: 'center', }, header: { - fontSize: 14, + fontSize: 16, + fontWeight: 700, lineHeight: '22px', }, description: { - fontSize: 12, + fontSize: 16, + fontWeight: 400, + color: theme.palette.maskColor.second, }, })) diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SecurityPanel.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SecurityPanel.tsx index 060233f8aa36..9b8f59753155 100644 --- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SecurityPanel.tsx +++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SecurityPanel.tsx @@ -23,7 +23,7 @@ interface TokenCardProps { const useStyles = makeStyles()((theme) => ({ header: { - fontWeight: 500, + fontWeight: 700, fontSize: 18, }, root: { @@ -43,13 +43,14 @@ const useStyles = makeStyles()((theme) => ({ height: '48px', }, tokenName: { - fontSize: '16px', + fontSize: '18px', fontWeight: 700, + color: theme.palette.maskColor.main, }, tokenPrice: { - fontSize: '16px', + fontSize: '18px', fontWeight: 700, - color: theme.palette.text.secondary, + color: theme.palette.maskColor.main, }, itemTitle: { color: theme.palette.maskColor.second, @@ -160,7 +161,7 @@ export const SecurityPanel = memo(({ tokenSecurity, tokenInfo, t /> - + {t.more_details()} (({ tokenSecurity, tokenInfo, t )} - - - {makeMessageList.map((x, i) => ( - - ))} - {(!makeMessageList.length || securityMessageLevel === SecurityMessageLevel.Safe) && ( - - )} - - + + {makeMessageList.map((x, i) => ( + + ))} + {(!makeMessageList.length || securityMessageLevel === SecurityMessageLevel.Safe) && ( + + )} + ) diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/index.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/index.tsx index 0194a6b1b098..eb29fee2a06a 100644 --- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/index.tsx +++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/index.tsx @@ -33,7 +33,6 @@ const sns: Plugin.SNSAdaptor.Definition = { }, name, icon, - iconFilterColor, appBoardSortingDefaultPriority: 14, category: 'dapp', marketListSortingPriority: 16, diff --git a/packages/plugins/GoPlusSecurity/src/base.ts b/packages/plugins/GoPlusSecurity/src/base.ts index c19fe3023fe1..2c83e4ed8e50 100644 --- a/packages/plugins/GoPlusSecurity/src/base.ts +++ b/packages/plugins/GoPlusSecurity/src/base.ts @@ -4,7 +4,6 @@ import { languages } from './locales/languages' export const base: Plugin.Shared.Definition = { ID: PLUGIN_ID, - icon: '', name: { fallback: PLUGIN_NAME }, description: { fallback: PLUGIN_DESCRIPTION }, publisher: { name: { fallback: 'Mask Network' }, link: 'https://mask.io/' }, diff --git a/packages/shared/src/UI/components/TokenSecurity/components/RiskCard.tsx b/packages/shared/src/UI/components/TokenSecurity/components/RiskCard.tsx index 7c3e61369a15..62071b3981d1 100644 --- a/packages/shared/src/UI/components/TokenSecurity/components/RiskCard.tsx +++ b/packages/shared/src/UI/components/TokenSecurity/components/RiskCard.tsx @@ -22,11 +22,14 @@ const useStyles = makeStyles()((theme) => ({ alignItems: 'center', }, header: { - fontSize: 14, + fontSize: 16, + fontWeight: 700, lineHeight: '22px', }, description: { - fontSize: 12, + fontSize: 16, + fontWeight: 400, + color: theme.palette.maskColor.second, }, })) diff --git a/packages/shared/src/UI/components/TokenSecurity/components/SecurityPanel.tsx b/packages/shared/src/UI/components/TokenSecurity/components/SecurityPanel.tsx index 250ea2402b6e..7935137dde87 100644 --- a/packages/shared/src/UI/components/TokenSecurity/components/SecurityPanel.tsx +++ b/packages/shared/src/UI/components/TokenSecurity/components/SecurityPanel.tsx @@ -1,6 +1,5 @@ import { Collapse, Link, Stack, Typography } from '@mui/material' import { useSharedI18N } from '../../../../locales' -import { ExternalLink } from 'react-feather' import { makeStyles } from '@masknet/theme' import { memo, useMemo, useState } from 'react' import { DefineMapping, SecurityMessageLevel, TokenSecurity } from './Common' @@ -14,6 +13,7 @@ import type { ChainId, SchemaType } from '@masknet/web3-shared-evm' import urlcat from 'urlcat' import type { TokenAPI } from '@masknet/web3-providers' import { formatCurrency, FungibleToken } from '@masknet/web3-shared-base' +import { LinkOutIcon } from '@masknet/icons' interface TokenCardProps { tokenSecurity: TokenSecurity @@ -24,7 +24,7 @@ interface TokenCardProps { const useStyles = makeStyles()((theme) => ({ header: { - fontWeight: 500, + fontWeight: 700, fontSize: 18, }, root: { @@ -44,13 +44,24 @@ const useStyles = makeStyles()((theme) => ({ height: '48px', }, tokenName: { - fontSize: '16px', + fontSize: '18px', fontWeight: 700, + color: theme.palette.maskColor.main, }, tokenPrice: { - fontSize: '16px', + fontSize: '18px', fontWeight: 700, - color: theme.palette.text.secondary, + color: theme.palette.maskColor.main, + }, + arrowIcon: { + fontSize: 15, + cursor: 'pointer', + fill: theme.palette.maskColor.second, + }, + linkIcon: { + fill: theme.palette.maskColor.main, + width: 18, + height: 18, }, })) @@ -150,13 +161,8 @@ export const SecurityPanel = memo(({ tokenSecurity, tokenInfo, t - - {t.token_info()} - - setCollapse(!isCollapse)} - sx={{ fontSize: 15, cursor: 'pointer' }} - /> + {t.token_info()} + setCollapse(!isCollapse)} className={classes.arrowIcon} /> @@ -167,7 +173,7 @@ export const SecurityPanel = memo(({ tokenSecurity, tokenInfo, t href={resolveGoLabLink(tokenSecurity.chainId, tokenSecurity.contract)} target="_blank" rel="noopener noreferrer"> - + diff --git a/packages/shared/src/UI/components/TokenSecurity/components/TokenPanel.tsx b/packages/shared/src/UI/components/TokenSecurity/components/TokenPanel.tsx index 86485c104399..caa77dc0af44 100644 --- a/packages/shared/src/UI/components/TokenSecurity/components/TokenPanel.tsx +++ b/packages/shared/src/UI/components/TokenSecurity/components/TokenPanel.tsx @@ -7,6 +7,7 @@ import { ExternalLink } from 'react-feather' import { makeStyles, usePortalShadowRoot } from '@masknet/theme' import { explorerResolver, formatEthereumAddress } from '@masknet/web3-shared-evm' import { formatCurrency, formatSupply } from '@masknet/web3-shared-base' +import { LinkOutIcon } from '@masknet/icons' const useStyles = makeStyles()((theme) => ({ card: { @@ -18,18 +19,23 @@ const useStyles = makeStyles()((theme) => ({ : '0px 0px 20px rgba(255, 255, 255, 0.12)', }, subtitle: { - color: theme.palette.text.secondary, + color: theme.palette.maskColor.second, fontWeight: 400, fontSize: 16, }, cardValue: { - color: theme.palette.text.primary, + color: theme.palette.maskColor.main, fontSize: 16, fontWeight: 700, }, tooltip: { fontSize: 12, }, + linkIcon: { + fill: theme.palette.maskColor.main, + width: 16, + height: 16, + }, })) const DEFAULT_PLACEHOLDER = '--' @@ -87,7 +93,7 @@ export const TokenPanel = React.forwardRef(({ tokenSecurity, tokenMarketCap }: T href={explorerResolver.fungibleTokenLink(tokenSecurity.chainId, tokenSecurity.contract)} target="_blank" rel="noopener noreferrer"> - + @@ -108,7 +114,7 @@ export const TokenPanel = React.forwardRef(({ tokenSecurity, tokenMarketCap }: T )} target="_blank" rel="noopener noreferrer"> - + )} From 32cf0b79aa626047ac741e9598087c4496bb799a Mon Sep 17 00:00:00 2001 From: Randolph <840094513@qq.com> Date: Mon, 11 Jul 2022 15:50:48 +0800 Subject: [PATCH 3/3] fix: copy ui --- .../SNSAdaptor/components/PersonaAction.tsx | 47 +++++++++++-------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/packages/plugins/Web3Profile/src/SNSAdaptor/components/PersonaAction.tsx b/packages/plugins/Web3Profile/src/SNSAdaptor/components/PersonaAction.tsx index 556bb8f52be3..972e3ef5751b 100644 --- a/packages/plugins/Web3Profile/src/SNSAdaptor/components/PersonaAction.tsx +++ b/packages/plugins/Web3Profile/src/SNSAdaptor/components/PersonaAction.tsx @@ -1,14 +1,14 @@ -import { useStylesExtends, makeStyles } from '@masknet/theme' -import { Box, Link, Typography } from '@mui/material' -import { Copy } from 'react-feather' +import { useStylesExtends, makeStyles, ShadowRootTooltip } from '@masknet/theme' +import { Box, Typography } from '@mui/material' import { useAsyncRetry, useCopyToClipboard } from 'react-use' import { useI18N } from '../../locales' import { PlatformAvatar } from './PlatformAvatar' -import { useSnackbarCallback } from '@masknet/shared' import { formatPublicKey } from '../utils' import type { PersonaInformation } from '@masknet/shared-base' import type { IdentityResolved } from '@masknet/plugin-infra' import { context } from '../context' +import { CopyIcon } from '@masknet/icons' +import { useCallback, useState } from 'react' const useStyles = makeStyles()((theme) => ({ bottomFixed: { @@ -27,6 +27,7 @@ const useStyles = makeStyles()((theme) => ({ linkIcon: { marginRight: theme.spacing(1), color: theme.palette.maskColor.second, + cursor: 'pointer', }, personaKey: { fontSize: '12px', @@ -45,22 +46,27 @@ export function PersonaAction(props: PersonaActionProps) { const { currentPersona, currentVisitingProfile } = props const t = useI18N() + const [open, setOpen] = useState(false) + const { value: avatar } = useAsyncRetry(async () => { const avatar = await context.getPersonaAvatar(currentPersona?.identifier) if (!avatar) return undefined return avatar }) const [, copyToClipboard] = useCopyToClipboard() - const onCopy = useSnackbarCallback( - async (ev: React.MouseEvent) => { - ev.stopPropagation() + + const onCopy = useCallback( + (e: React.MouseEvent) => { + e.preventDefault() + e.stopPropagation() copyToClipboard(currentPersona?.identifier?.rawPublicKey ?? '') + setOpen(true) + // Close tooltip after five seconds of copying + setTimeout(() => { + setOpen(false) + }, 5000) }, - [], - undefined, - undefined, - undefined, - t.copied(), + [currentPersona?.identifier?.rawPublicKey, copyToClipboard], ) return ( @@ -74,14 +80,15 @@ export function PersonaAction(props: PersonaActionProps) { {currentPersona?.identifier ? formatPublicKey(currentPersona?.identifier?.rawPublicKey) : '--'} - - - + setOpen(false)} + disableFocusListener + disableTouchListener> + +