diff --git a/packages/mask/content-script/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/content-script/components/InjectedComponents/ToolboxUnstyled.tsx index 3fa32fa75a6b..31098d7b846d 100644 --- a/packages/mask/content-script/components/InjectedComponents/ToolboxUnstyled.tsx +++ b/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 { Container?: React.ComponentType ListItemButton?: React.ComponentType> ListItemText?: React.ComponentType> @@ -69,6 +69,7 @@ function ToolboxHintForApplication(props: ToolboxHintProps) { iconSize = 24, mini, ListItemText = MuiListItemText, + ...rest } = props const { classes } = useStyles() @@ -76,7 +77,7 @@ function ToolboxHintForApplication(props: ToolboxHintProps) { return ( Explore multi-chain dApps.}> - + @@ -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 ( Connect and switch between your wallets.}> - + {account && provider && provider.type !== ProviderType.MaskWallet ? diff --git a/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx b/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx index 38c12f95e03e..ccadea0a9a9f 100644 --- a/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx +++ b/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 ( (function ({ height="58px" className={classes.connectedAccounts} width="100%"> - {profiles?.slice(0, 2).map((profile, index) => { + {profiles?.slice(0, 2).map((profile) => { return ( diff --git a/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx b/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx index dc8fe6bbaef1..43ba13b18884 100644 --- a/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx +++ b/packages/mask/popups/pages/Friends/ContactCard/SocialAccount/index.tsx @@ -44,7 +44,7 @@ export const SocialAccount = memo(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 diff --git a/packages/plugins/Avatar/src/Application/NFTListDialog.tsx b/packages/plugins/Avatar/src/Application/NFTListDialog.tsx index 483fb45c851c..b5c3e87ebec8 100644 --- a/packages/plugins/Avatar/src/Application/NFTListDialog.tsx +++ b/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) diff --git a/packages/shared/src/UI/modals/AddCollectiblesModal/AddCollectiblesDialog.tsx b/packages/shared/src/UI/modals/AddCollectiblesModal/AddCollectiblesDialog.tsx index 6627960da8c2..63454e574ea6 100644 --- a/packages/shared/src/UI/modals/AddCollectiblesModal/AddCollectiblesDialog.tsx +++ b/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,7 +43,11 @@ export const AddCollectiblesDialog = memo(function AddCollectiblesDialog({ const allNetworks = useNetworks(pluginID, true) return ( - onAdd()} title={Add NFTs}> + onAdd()} + title={Add Collectibles}>