fix: fixup some ui (#12022)

packages/mask/content-script/components/InjectedComponents/ToolboxUnstyled.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, type HTMLProps } from 'react'
 import {
     CircularProgress,
     type ListItemButtonProps,
@@ -44,7 +44,7 @@ const useStyles = makeStyles()(() => ({
     },
 }))
 
-interface ToolboxHintProps {
+interface ToolboxHintProps extends HTMLProps<HTMLDivElement> {
     Container?: React.ComponentType<React.PropsWithChildren>
     ListItemButton?: React.ComponentType<Pick<ListItemButtonProps, 'onClick' | 'children'>>
     ListItemText?: React.ComponentType<Pick<ListItemTextProps, 'primary'>>
@@ -69,14 +69,15 @@ function ToolboxHintForApplication(props: ToolboxHintProps) {
         iconSize = 24,
         mini,
         ListItemText = MuiListItemText,
+        ...rest
     } = props
     const { classes } = useStyles()
 
     const openApplicationBoardDialog = useOpenApplicationBoardDialog()
 
     return (
         <GuideStep step={1} total={4} tip={<Trans>Explore multi-chain dApps.</Trans>}>
-            <Container>
+            <Container {...rest}>
                 <ListItemButton onClick={openApplicationBoardDialog}>
                     <ListItemIcon>
                         <Icons.MaskBlue size={iconSize} />
@@ -113,6 +114,7 @@ function ToolboxHintForWallet(props: ToolboxHintProps) {
         iconSize = 24,
         badgeSize = 12,
         mini,
+        ...rest
     } = props
     const { classes } = useStyles()
     const { onClickToolbox, title, chainColor, shouldDisplayChainIndicator, account, provider } = useToolbox()
@@ -121,7 +123,7 @@ function ToolboxHintForWallet(props: ToolboxHintProps) {
 
     return (
         <GuideStep step={2} total={4} tip={<Trans>Connect and switch between your wallets.</Trans>}>
-            <Container>
+            <Container {...rest}>
                 <ListItemButton onClick={onClickToolbox}>
                     <ListItemIcon>
                         {account && provider && provider.type !== ProviderType.MaskWallet ?

packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx

@@ -1,5 +1,6 @@
+import type { CSSProperties } from 'react'
 import { ToolboxHintUnstyled } from '../../../components/InjectedComponents/ToolboxUnstyled.js'
-import { styled, ListItemButton, Typography, ListItemIcon, useMediaQuery } from '@mui/material'
+import { styled, ListItemButton, Typography, ListItemIcon, useMediaQuery, useTheme } from '@mui/material'
 
 const mindsBreakPoint = 1221 /** px */
 
@@ -12,15 +13,19 @@ const Item = styled(ListItemButton)`
     border-radius: 8px;
     height: 45px;
     padding: 4px 12px 4px 0;
-    color: #43434d !important;
+    color: var(--nav-text-color, #43434d) !important;
     &:hover {
         background: unset;
-        color: #43434d;
+        color: var(--nav-text-color, #43434d);
     }
     [data-icon] {
         color: #43434d;
         --icon-color: #43434d;
     }
+    [data-icon='Wallet'] {
+        color: var(--nav-text-color, #43434d);
+        --icon-color: var(--nav-text-color, #43434d);
+    }
     @media screen and (max-width: ${mindsBreakPoint}px) {
         padding: 12px 0;
         justify-content: center;
@@ -47,9 +52,15 @@ const Icon = styled(ListItemIcon)`
 
 export function ToolboxHintAtMinds(props: { category: 'wallet' | 'application' }) {
     const mini = useMediaQuery(`(max-width: ${mindsBreakPoint}px)`)
+    const theme = useTheme()
 
     return (
         <ToolboxHintUnstyled
+            style={
+                {
+                    '--nav-text-color': theme.palette.mode === 'dark' ? '#fff' : '#43434d',
+                } as CSSProperties
+            }
             mini={mini}
             Container={Container}
             ListItemButton={Item}

packages/mask/popups/pages/Friends/ContactCard/ConnectedAccounts/index.tsx

@@ -56,10 +56,10 @@ export const ConnectedAccounts = memo<ConnectedAccountsProps>(function ({
             height="58px"
             className={classes.connectedAccounts}
             width="100%">
-            {profiles?.slice(0, 2).map((profile, index) => {
+            {profiles?.slice(0, 2).map((profile) => {
                 return (
                     <AccountRender
-                        key={index}
+                        key={profile.identity}
                         profile={profile}
                         avatar={localProfile?.userId === (profile.name ?? profile.identity) ? avatar : ''}
                     />

packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx

@@ -44,7 +44,7 @@ export const SocialAccount = memo<SocialAccountProps>(function SocialAccount({ a
     const isOnTwitter = site === EnhanceableSite.Twitter
     const { data: twitterAvatar = avatar } = useQuery({
         enabled: isOnTwitter && !avatar,
-        queryKey: ['social-account-avatar', site, avatar],
+        queryKey: ['social-account-avatar', site, avatar, userId],
         queryFn: async () => {
             const userInfo = await FireflyTwitter.getUserInfo(userId)
             return userInfo?.legacy.profile_image_url_https

packages/plugins/Avatar/src/Application/NFTListDialog.tsx

@@ -128,7 +128,7 @@ export function NFTListDialog() {
     const handleAddCollectibles = useCallback(async () => {
         const results = await AddCollectiblesModal.openAndWaitForClose({
             pluginID,
-            chainId: assetChainId,
+            chainId: assetChainId || chainId,
             account: targetAccount,
         })
         if (!results || !assetChainId) return
@@ -162,7 +162,7 @@ export function NFTListDialog() {
         setTokens((originalTokens) => {
             return uniqBy([...originalTokens, ...tokens], (x) => `${x.contract?.address}.${x.tokenId}`)
         })
-    }, [pluginID, assetChainId, targetAccount])
+    }, [pluginID, assetChainId, chainId, targetAccount])
 
     useEffect(() => {
         const unsubscribe = emitter.on('add', handleAddCollectibles)

packages/shared/src/UI/modals/AddCollectiblesModal/AddCollectiblesDialog.tsx

@@ -17,7 +17,9 @@ const useStyles = makeStyles()((theme) => ({
         gridTemplateColumns: 'repeat(auto-fill, minmax(20%, 1fr))',
     },
     sidebar: {
-        marginLeft: theme.spacing(1),
+        paddingLeft: 12,
+        paddingTop: 12,
+        paddingRight: 4,
     },
     form: {
         flexGrow: 1,
@@ -41,14 +43,19 @@ export const AddCollectiblesDialog = memo(function AddCollectiblesDialog({
     const allNetworks = useNetworks(pluginID, true)
 
     return (
-        <InjectedDialog titleBarIconStyle={'back'} open={open} onClose={() => onAdd()} title={<Trans>Add NFTs</Trans>}>
+        <InjectedDialog
+            titleBarIconStyle={'back'}
+            open={open}
+            onClose={() => onAdd()}
+            title={<Trans>Add Collectibles</Trans>}>
             <DialogContent classes={{ root: classes.content }}>
                 <SelectNetworkSidebar
                     className={classes.sidebar}
                     chainId={chainId}
                     onChainChange={setChainId}
                     pluginID={pluginID}
                     networks={allNetworks}
+                    hideAllButton
                 />
                 <AddCollectibles
                     className={classes.form}