[Release] New release 2.7.0 (minor)

package.json

@@ -8,7 +8,7 @@
     "yarn": ">=999.0.0",
     "npm": ">=999.0.0"
   },
-  "version": "2.6.0",
+  "version": "2.7.0",
   "private": true,
   "license": "AGPL-3.0-or-later",
   "scripts": {

packages/dashboard/src/pages/CreateMaskWallet/components/Welcome/index.tsx

@@ -83,7 +83,6 @@ const Welcome = memo(() => {
               }
               body::-webkit-scrollbar-thumb {
                 border-radius: 4px;
-
               }
             `
         iframeDocument.head?.appendChild(style)

packages/icons/general/Swap.tsx

@@ -4,11 +4,18 @@ import type { SvgIcon } from '@mui/material'
 export const SwapIcon: typeof SvgIcon = createIcon(
     'SwapIcon',
     <g>
-        <circle cx="18.5" cy="18" r="18" fill="#FFB915" />
         <path
-            d="M27.2495 13.001L22.2495 18.001H25.9995C25.9995 22.1385 22.637 25.501 18.4995 25.501C17.237 25.501 16.037 25.1885 14.9995 24.626L13.1745 26.451C14.712 27.426 16.537 28.001 18.4995 28.001C24.0245 28.001 28.4995 23.526 28.4995 18.001H32.2495L27.2495 13.001ZM10.9995 18.001C10.9995 13.8635 14.362 10.501 18.4995 10.501C19.762 10.501 20.962 10.8135 21.9995 11.376L23.8245 9.55098C22.287 8.57598 20.462 8.00098 18.4995 8.00098C12.9745 8.00098 8.49951 12.476 8.49951 18.001H4.74951L9.74951 23.001L14.7495 18.001H10.9995Z"
-            fill="white"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.5 3.2c.221 0 .4.18.4.4v2.8h2.8a.4.4 0 110 .8H2.5a.4.4 0 01-.4-.4V3.6c0-.22.18-.4.4-.4zM10.9 9.2c0-.221.179-.4.4-.4h3.2c.22 0 .4.179.4.4v3.2a.4.4 0 01-.8 0V9.6h-2.8a.4.4 0 01-.4-.4z"
+            fill="#fff"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.028 2.621a5.045 5.045 0 012.647-.083 5.218 5.218 0 012.356 1.277 5.626 5.626 0 011.478 2.318.437.437 0 01-.248.55.403.403 0 01-.522-.262 4.762 4.762 0 00-1.25-1.962 4.416 4.416 0 00-1.994-1.08 4.269 4.269 0 00-2.24.07 4.451 4.451 0 00-1.94 1.212L2.789 7.165a.394.394 0 01-.577-.019.448.448 0 01.018-.609l2.523-2.5a5.26 5.26 0 012.276-1.416zm7.761 6.233a.448.448 0 01-.018.61l-2.522 2.5a5.26 5.26 0 01-2.276 1.416 5.045 5.045 0 01-2.648.082 5.218 5.218 0 01-2.356-1.276 5.627 5.627 0 01-1.478-2.318.437.437 0 01.248-.55.403.403 0 01.522.262c.253.755.683 1.43 1.25 1.962a4.416 4.416 0 001.994 1.08c.74.177 1.511.152 2.24-.07a4.45 4.45 0 001.93-1.202l.01-.01 2.527-2.505a.394.394 0 01.577.02z"
+            fill="#fff"
         />
     </g>,
-    '0 0 37 36',
+    '0 0 16 16',
 )

packages/icons/general/SwapColorfulIcon.tsx

@@ -0,0 +1,14 @@
+import { createIcon } from '../utils'
+import type { SvgIcon } from '@mui/material'
+
+export const SwapColorfulIcon: typeof SvgIcon = createIcon(
+    'SwapColorfulIcon',
+    <g>
+        <circle cx="18.5" cy="18" r="18" fill="#FFB915" />
+        <path
+            d="M27.2495 13.001L22.2495 18.001H25.9995C25.9995 22.1385 22.637 25.501 18.4995 25.501C17.237 25.501 16.037 25.1885 14.9995 24.626L13.1745 26.451C14.712 27.426 16.537 28.001 18.4995 28.001C24.0245 28.001 28.4995 23.526 28.4995 18.001H32.2495L27.2495 13.001ZM10.9995 18.001C10.9995 13.8635 14.362 10.501 18.4995 10.501C19.762 10.501 20.962 10.8135 21.9995 11.376L23.8245 9.55098C22.287 8.57598 20.462 8.00098 18.4995 8.00098C12.9745 8.00098 8.49951 12.476 8.49951 18.001H4.74951L9.74951 23.001L14.7495 18.001H10.9995Z"
+            fill="white"
+        />
+    </g>,
+    '0 0 37 36',
+)

packages/icons/general/index.ts

@@ -7,6 +7,7 @@ export * from './Airdrop'
 export * from './Send'
 export * from './Card'
 export * from './Swap'
+export * from './SwapColorfulIcon'
 export * from './Download'
 export * from './Link'
 export * from './Author'

packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx

@@ -103,27 +103,27 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
 
     useUpdateEffect(() => {
         setSelectedTab(undefined)
-    }, [identity.identifier])
+    }, [identity.identifier?.userId])
 
     useEffect(() => {
         return MaskMessages.events.profileTabHidden.on((data) => {
             if (data.hidden) setHidden(data.hidden)
         })
-    }, [identity.identifier])
+    }, [identity.identifier?.userId])
 
     useEffect(() => {
         return MaskMessages.events.profileTabUpdated.on((data) => {
             setHidden(!data.show)
         })
-    }, [identity.identifier])
+    }, [identity.identifier?.userId])
 
     const ContentComponent = useMemo(() => {
         const tabId =
             isTwitter(activatedSocialNetworkUI) && currentAccountNotConnectPersona
                 ? displayPlugins?.find((tab) => tab?.pluginID === PluginId.NextID)?.ID
                 : selectedTabId
         return getTabContent(tabId ?? '')
-    }, [selectedTabId, identity.identifier])
+    }, [selectedTabId, identity.identifier?.userId])
 
     if (hidden) return null
 

packages/mask/src/components/shared/ApplicationBoard.tsx

@@ -27,20 +27,30 @@ 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 useStyles = makeStyles<{ shouldScroll: boolean }>()((theme, props) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
     return {
         applicationWrapper: {
             padding: theme.spacing(1, 0.25),
-            overflowY: 'scroll',
             display: 'grid',
             gridTemplateColumns: 'repeat(4, 1fr)',
+            overflowY: 'auto',
+            overflowX: 'hidden',
             gridTemplateRows: '100px',
             gridGap: theme.spacing(2),
             justifyContent: 'space-between',
             height: 340,
-            '&::-webkit-scrollbar': {
-                display: 'none',
+            width: props.shouldScroll ? 575 : 560,
+            '::-webkit-scrollbar': {
+                backgroundColor: 'transparent',
+                width: 20,
+            },
+            '::-webkit-scrollbar-thumb': {
+                borderRadius: '20px',
+                width: 5,
+                border: '7px solid rgba(0, 0, 0, 0)',
+                backgroundColor: theme.palette.mode === 'dark' ? 'rgba(250, 250, 250, 0.2)' : 'rgba(0, 0, 0, 0.2)',
+                backgroundClip: 'padding-box',
             },
             [smallQuery]: {
                 overflow: 'auto',
@@ -92,7 +102,6 @@ export function ApplicationBoard() {
     )
 }
 function ApplicationBoardContent() {
-    const { classes } = useStyles()
     const theme = useTheme()
     const { t } = useI18N()
     const [openSettings, setOpenSettings] = useState(false)
@@ -135,6 +144,7 @@ function ApplicationBoardContent() {
         [snsAdaptorPlugins, currentWeb3Network, chainId, account],
     )
     const listedAppList = applicationList.filter((x) => !getUnlistedApp(x))
+    const { classes } = useStyles({ shouldScroll: listedAppList.length > 12 })
     return (
         <>
             <div className={classes.header}>

packages/mask/src/components/shared/WalletStatusBox/TransactionList.tsx

@@ -46,6 +46,9 @@ const useStyles = makeStyles()((theme) => ({
         overflow: 'hidden',
         whiteSpace: 'nowrap',
     },
+    timestamp: {
+        fontSize: 12,
+    },
     cell: {
         fontSize: 14,
         display: 'flex',
@@ -63,6 +66,9 @@ const useStyles = makeStyles()((theme) => ({
         height: 12,
         marginLeft: theme.spacing(0.5),
     },
+    clear: {
+        fontSize: 14,
+    },
 }))
 
 const statusTextColorMap: Record<TransactionStatusType, string> = {
@@ -141,7 +147,7 @@ const Transaction: FC<TransactionProps> = ({ chainId, transaction: tx, onClear =
                         component="strong">
                         {functionName}
                     </Typography>
-                    <Typography variant="body1" color={theme.palette.text.secondary}>
+                    <Typography className={classes.timestamp} variant="body1" color={theme.palette.text.secondary}>
                         {format(tx.at, 'yyyy.MM.dd hh:mm')}
                     </Typography>
                 </Stack>
@@ -167,7 +173,7 @@ const Transaction: FC<TransactionProps> = ({ chainId, transaction: tx, onClear =
             </Grid>
             <Grid item className={classes.cell} md={2} justifyContent="center">
                 {txStatus === TransactionStatusType.NOT_DEPEND ? (
-                    <Button variant="text" size="small" onClick={handleClear}>
+                    <Button className={classes.clear} variant="text" size="small" onClick={handleClear}>
                         {t('wallet_status_pending_clear')}
                     </Button>
                 ) : null}

packages/mask/src/components/shared/WalletStatusBox/usePendingTransactions.tsx

@@ -55,7 +55,7 @@ export function usePendingTransactions() {
     const frozenTxes = useRef<RecentTransaction[]>([])
     const [meltedTxHashes, setMeltedTxHashes] = useState<string[]>([])
     useEffect(() => {
-        frozenTxes.current = pendingTransactions.slice(0, 2)
+        frozenTxes.current = pendingTransactions.slice(0, 5)
         setMeltedTxHashes([])
     }, [showRecentTransactions])
     const clearRecentTxes = useClearRecentTransactions()

packages/mask/src/extension/popups/pages/Personas/Accounts/index.tsx

@@ -42,13 +42,11 @@ const Accounts = memo(() => {
 
     const definedSocialNetworks = compact(
         getEnumAsArray(EnhanceableSite).map((x) => {
-            if (x.value === EnhanceableSite.Localhost) return null
+            if (x.value === EnhanceableSite.Localhost || x.value === EnhanceableSite.OpenSea) return null
             return x.value
         }),
     )
 
-    console.log(definedSocialNetworks)
-
     const [, onConnect] = useAsyncFn(
         async (networkIdentifier: EnhanceableSite) => {
             if (currentPersona) {

packages/mask/src/extension/popups/pages/Personas/SelectPersona/index.tsx

@@ -14,6 +14,7 @@ const useStyles = makeStyles()({
         backgroundColor: '#F7F9FA',
         display: 'flex',
         flexDirection: 'column',
+        paddingBottom: 72,
     },
     controller: {
         padding: 16,

packages/mask/src/extension/popups/pages/Personas/components/PersonaList/index.tsx

@@ -19,7 +19,6 @@ import { Trash2 } from 'react-feather'
 const useStyles = makeStyles()({
     list: {
         padding: 0,
-        height: 'calc(100vh - 185px)',
         overflow: 'auto',
     },
     item: {

packages/mask/src/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "Mask Network",
-    "version": "2.6.0",
+    "version": "2.7.0",
     "manifest_version": 2,
     "permissions": ["storage", "downloads", "webNavigation", "activeTab"],
     "optional_permissions": ["<all_urls>", "notifications", "clipboardRead"],

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { Box, ListItem, Typography, Popper, useMediaQuery, Theme } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Trans } from 'react-i18next'
-import { omit } from 'lodash-unified'
+import { omit, pick } from 'lodash-unified'
 import { RedPacketJSONPayload, RedPacketStatus, RedPacketJSONPayloadFromChain } from '../types'
 import { TokenIcon } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
@@ -210,10 +210,10 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
         tokenAddress ?? '',
     )
 
-    const historyToken =
-        (history as RedPacketJSONPayload).token ??
-        tokenDetailed ??
-        ({ address: history.token_address } as ERC20TokenDetailed | NativeTokenDetailed)
+    const historyToken = {
+        ...pick(tokenDetailed ?? (history as RedPacketJSONPayload).token, ['decimals', 'symbol']),
+        address: tokenAddress,
+    } as ERC20TokenDetailed | NativeTokenDetailed
 
     // #region remote controlled transaction dialog
     const { setDialog: setTransactionDialog } = useRemoteControlledDialog(

packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx

@@ -137,7 +137,8 @@ function ERC20RedpacketBadge(props: ERC20RedpacketBadgeProps) {
     const chainId = getChainIdFromName(payload.network ?? '') ?? ChainId.Mainnet
     const chainDetailed = getChainDetailed(chainId)
     const tokenDetailed =
-        payload.token?.type === EthereumTokenType.Native ? chainDetailed?.nativeCurrency : payload.token ?? fetchedToken
+        payload.token?.type === EthereumTokenType.Native ? chainDetailed?.nativeCurrency : fetchedToken ?? payload.token
+
     return (
         <div style={containerStyle}>
             <RedPacketIcon style={badgeSvgIconSize} /> A Lucky Drop with{' '}

packages/mask/src/plugins/Trader/SNSAdaptor/index.tsx

@@ -7,7 +7,7 @@ import { Trans } from 'react-i18next'
 import { TagInspector } from './trending/TagInspector'
 import { enhanceTag } from './cashTag'
 import { ApplicationEntry } from '@masknet/shared'
-import { SwapIcon } from '@masknet/icons'
+import { SwapColorfulIcon } from '@masknet/icons'
 import { PluginTraderMessages } from '../messages'
 
 const sns: Plugin.SNSAdaptor.Definition = {
@@ -25,7 +25,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
     enhanceTag,
     ApplicationEntries: [
         (() => {
-            const icon = <SwapIcon />
+            const icon = <SwapColorfulIcon />
             const name = <Trans i18nKey="plugin_trader_swap" />
             return {
                 ApplicationEntryID: base.ID,

packages/mask/src/plugins/Wallet/services/transaction/helpers.ts

@@ -2,7 +2,6 @@ import { sha3, toHex } from 'web3-utils'
 import type { JsonRpcPayload } from 'web3-core-helpers'
 import type { Transaction, TransactionConfig, TransactionReceipt } from 'web3-core'
 import {
-    isSameAddress,
     TransactionState,
     TransactionStateType,
     TransactionStatusType,
@@ -59,7 +58,6 @@ export function getReceiptStatus(receipt: TransactionReceipt | null) {
     const status = receipt.status as unknown as string
     if (receipt.status === false || ['0', '0x', '0x0'].includes(status)) return TransactionStatusType.FAILED
     if (receipt.status === true || ['1', '0x1'].includes(status)) {
-        if (isSameAddress(receipt.from, receipt.to)) return TransactionStatusType.CANCELLED
         return TransactionStatusType.SUCCEED
     }
     return TransactionStatusType.NOT_DEPEND
@@ -87,12 +85,6 @@ export function getTransactionState(receipt: TransactionReceipt): TransactionSta
                     receipt,
                     error: new Error('Invalid transaction status.'),
                 }
-            case TransactionStatusType.CANCELLED:
-                return {
-                    type: TransactionStateType.FAILED,
-                    receipt,
-                    error: new Error('CANCELLED'),
-                }
             default:
                 unreachable(status)
         }