DimensionDev · Randolph314 · Jul 11, 2022 · Jul 11, 2022 · Jul 11, 2022 · Jul 11, 2022
diff --git 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)

diff --git a/packages/mask/src/plugins/Trader/trader/balancer/useTradeCallback.ts b/packages/mask/src/plugins/Trader/trader/balancer/useTradeCallback.ts
@@ -1,10 +1,5 @@
 import type { ExchangeProxy } from '@masknet/web3-contracts/types/ExchangeProxy'
-import {
-    SchemaType,
-    GasOptionConfig,
-    useTraderConstants,
-    encodeContractTransaction
-} from '@masknet/web3-shared-evm'
+import { SchemaType, GasOptionConfig, useTraderConstants, encodeContractTransaction } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
 import { SLIPPAGE_DEFAULT } from '../../constants'
 import { SwapResponse, TradeComputed, TradeStrategy } from '../../types'
@@ -55,7 +50,6 @@ export function useTradeCallback(
         const outputTokenAddress =
             trade.outputToken.schema === SchemaType.Native ? BALANCER_ETH_ADDRESS : trade.outputToken.address
 
-
         // trade with the native token
         let transactionValue = '0'
         if (trade.strategy === TradeStrategy.ExactIn && trade.inputToken.schema === SchemaType.Native)
@@ -66,32 +60,33 @@ export function useTradeCallback(
         // send transaction and wait for hash
         const config = {
             from: account,
-            gas: await connection
-                .estimateTransaction?.({
+            gas:
+                (await connection.estimateTransaction?.({
                     from: account,
                     value: transactionValue,
-                }) ?? ZERO.toString(),
+                })) ?? ZERO.toString(),
             value: transactionValue,
             ...gasConfig,
         }
 
-
-        const tx = await encodeContractTransaction(exchangeProxyContract,  trade.strategy === TradeStrategy.ExactIn
-            ? exchangeProxyContract.methods.multihopBatchSwapExactIn(
-                swap_,
-                inputTokenAddress,
-                outputTokenAddress,
-                trade.inputAmount.toFixed(),
-                tradeAmount.toFixed(),
-            )
-            : exchangeProxyContract.methods.multihopBatchSwapExactOut(
-                swap_,
-                inputTokenAddress,
-                outputTokenAddress,
-                tradeAmount.toFixed(),
-            ), config)
-
-
+        const tx = await encodeContractTransaction(
+            exchangeProxyContract,
+            trade.strategy === TradeStrategy.ExactIn
+                ? exchangeProxyContract.methods.multihopBatchSwapExactIn(
+                      swap_,
+                      inputTokenAddress,
+                      outputTokenAddress,
+                      trade.inputAmount.toFixed(),
+                      tradeAmount.toFixed(),
+                  )
+                : exchangeProxyContract.methods.multihopBatchSwapExactOut(
+                      swap_,
+                      inputTokenAddress,
+                      outputTokenAddress,
+                      tradeAmount.toFixed(),
+                  ),
+            config,
+        )
 
         // send transaction and wait for hash
         const hash = await connection.sendTransaction(tx)

diff --git 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) => <SecurityRiskIcon sx={{ fontSize: size ?? 24 }} />,
     },
     [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) => <SecurityWarningIcon sx={{ fontSize: size ?? 24, color: '#FFB915' }} />,
     },

diff --git 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
@@ -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<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                         />
                     </Stack>
                     <Stack direction="row" alignItems="center" spacing={1}>
-                        <Typography component="span" lineHeight="14px" fontSize={14}>
+                        <Typography component="span" lineHeight="14px" fontSize={14} fontWeight={400}>
                             {t.more_details()}
                         </Typography>
                         <Link
@@ -204,28 +205,18 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                         )}
                     </Stack>
                 </Stack>
-                <Collapse
-                    in={isCollapse}
-                    timeout={{
-                        enter: 1200,
-                        exit: 10,
-                    }}
-                    collapsedSize={LIST_HEIGHT.min}
-                    className={classes.detectionCollection}
-                    sx={{ maxHeight: LIST_HEIGHT.max, overflowY: 'auto' }}>
-                    <Stack spacing={1}>
-                        {makeMessageList.map((x, i) => (
-                            <RiskCard tokenSecurity={tokenSecurity} info={x} key={i} />
-                        ))}
-                        {(!makeMessageList.length || securityMessageLevel === SecurityMessageLevel.Safe) && (
-                            <RiskCardUI
-                                icon={DefineMapping[SecurityMessageLevel.Safe].icon(14)}
-                                title={t.risk_safe_description()}
-                                titleColor={DefineMapping[SecurityMessageLevel.Safe].titleColor}
-                            />
-                        )}
-                    </Stack>
-                </Collapse>
+                <Stack className={classes.detectionCollection} sx={{ maxHeight: LIST_HEIGHT.max, overflowY: 'auto' }}>
+                    {makeMessageList.map((x, i) => (
+                        <RiskCard tokenSecurity={tokenSecurity} info={x} key={i} />
+                    ))}
+                    {(!makeMessageList.length || securityMessageLevel === SecurityMessageLevel.Safe) && (
+                        <RiskCardUI
+                            icon={DefineMapping[SecurityMessageLevel.Safe].icon(14)}
+                            title={t.risk_safe_description()}
+                            titleColor={DefineMapping[SecurityMessageLevel.Safe].titleColor}
+                        />
+                    )}
+                </Stack>
             </Stack>
         </Stack>
     )

diff --git 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
@@ -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/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<HTMLAnchorElement>) => {
-            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) {
                     <Typography className={classes.personaKey}>
                         {currentPersona?.identifier ? formatPublicKey(currentPersona?.identifier?.rawPublicKey) : '--'}
                     </Typography>
-                    <Link
-                        className={classes.link}
-                        underline="none"
-                        component="button"
-                        title={t.persona_public_key_copy()}
-                        onClick={onCopy}>
-                        <Copy className={classes.linkIcon} size={14} />
-                    </Link>
+                    <ShadowRootTooltip
+                        title={t.copied()}
+                        open={open}
+                        placement="top"
+                        onMouseLeave={() => setOpen(false)}
+                        disableFocusListener
+                        disableTouchListener>
+                        <CopyIcon onClick={onCopy} className={classes.linkIcon} />
+                    </ShadowRootTooltip>
                 </Box>
             </div>
         </div>

diff --git 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,
     },
 }))