fix(ins): web3 tab ui (#10456)

packages/icons/icon-generated-as-jsx.js

@@ -3291,17 +3291,6 @@ export const ArtBlocks = /*#__PURE__*/ __createIcon('ArtBlocks', [
 export const Avatar = /*#__PURE__*/ __createIcon('Avatar', [
     {
         u: () => new URL('./plugins/Avatar.svg', import.meta.url),
-        j: () =>
-            /*#__PURE__*/ _jsx('svg', {
-                xmlns: 'http://www.w3.org/2000/svg',
-                fill: 'none',
-                viewBox: '0 0 20 20',
-                children: /*#__PURE__*/ _jsx('path', {
-                    fill: 'currentColor',
-                    d: 'M7.413 2.721c1.191-.96 2.814-1.23 4.293-.95 1.346.322 2.551 1.228 3.204 2.453.453.805.593 1.738.599 2.65l-.001 7.089c-.04.308.204.528.359.764.735 1.054 1.078 2.332 1.139 3.605-.442.002-.884.001-1.326 0-.067-.822-.212-1.644-.597-2.382-1.206-.006-2.41.02-3.617.008-.007-.895-.003-1.79-.005-2.686-1.028-.24-2.115-.061-3.081.338-1.846.778-3.096 2.727-3.089 4.723H4c-.061-1.578.593-3.132 1.626-4.307.145-.137.093-.352.108-.53-.013-1.811.008-3.624-.01-5.436-.045-.902-.017-1.806.024-2.708.108-1.08.77-2.041 1.666-2.63Zm4.23.365c.148.42.554.684.715 1.102.504.938.361 2.023.378 3.044.008 2.481.006 4.962.007 7.443.495.001.99.004 1.486-.006-.004-2.598-.003-5.198 0-7.796-.006-.627-.069-1.273-.349-1.845-.414-.933-1.265-1.646-2.238-1.942Zm-3.712.848c-.653.427-.977 1.227-.952 1.99 1.498.015 2.994.005 4.492.006.053-.995-.59-2.006-1.576-2.261-.656-.233-1.369-.046-1.964.265Zm-.913 3.268c-.007.533.012 1.093.293 1.564.418.793 1.285 1.28 2.172 1.306v1.27a3.986 3.986 0 0 1-2.493-.973c.013.825 0 1.651.01 2.478a6.488 6.488 0 0 1 4.465-.941c-.008-1.568-.001-3.136-.005-4.704H7.018Z',
-                }),
-            }),
-        s: true,
     },
 ])
 export const Bit = /*#__PURE__*/ __createIcon('Bit', [

packages/mask/src/site-adaptors/instagram.com/injection/NFT/NFTAvatarSettingDialog.tsx

@@ -10,8 +10,8 @@ import {
     useSaveStringStorage,
 } from '@masknet/plugin-avatar'
 import { getAvatarId } from '../../utils/user.js'
-import { InjectedDialog } from '@masknet/shared'
-import { DialogContent } from '@mui/material'
+import { InjectedDialog, SelectProviderModal } from '@masknet/shared'
+import { Button, DialogContent } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Instagram } from '@masknet/web3-providers'
 import { useChainContext, useNetworkContext } from '@masknet/web3-hooks-base'
@@ -21,6 +21,12 @@ import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()(() => ({
     root: {},
+    wallet: {
+        height: 120,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
 }))
 
 export function NFTAvatarSettingDialog() {
@@ -79,15 +85,24 @@ export function NFTAvatarSettingDialog() {
         return MaskMessages.events.nftAvatarSettingDialogUpdated.on((data) => setOpen(data.open))
     })
 
+    const onClick = useCallback(() => {
+        SelectProviderModal.open()
+    }, [])
     return (
         <InjectedDialog keepMounted open={open} onClose={onClose} title={t('set_nft_profile_photo')}>
             <DialogContent style={{ padding: 16 }}>
-                <NFTAvatar
-                    onChange={onChange}
-                    classes={{
-                        root: classes.root,
-                    }}
-                />
+                {account ? (
+                    <NFTAvatar
+                        onChange={onChange}
+                        classes={{
+                            root: classes.root,
+                        }}
+                    />
+                ) : (
+                    <div className={classes.wallet}>
+                        <Button onClick={onClick}>{t('connect_your_wallet')}</Button>
+                    </div>
+                )}
             </DialogContent>
         </InjectedDialog>
     )

packages/mask/src/site-adaptors/instagram.com/injection/ProfileTab.tsx

@@ -38,7 +38,6 @@ function getStyleProps(activeColor: { activeColor: string; color: string }) {
     const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE
     return {
         color: activeColor.color,
-        font: style.font,
         fontSize: style.fontSize,
         padding: style.paddingBottom,
         height: style.height,
@@ -59,14 +58,14 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => {
             marginRight: 60,
         },
         button: {
-            color: props.color,
-            font: props.font,
             fontSize: props.fontSize,
             height: props.height,
             justifyContent: 'center',
             alignItems: 'center',
             display: 'flex',
             borderTop: '1px solid transparent',
+            fontWeight: 'var(--font-weight-system-semibold)',
+            color: 'rgb(var(--ig-secondary-text))',
         },
         selected: {
             borderTop: `1px solid ${props.hover}`,
@@ -87,7 +86,6 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => {
 
 interface StyleProps {
     color: string
-    font: string
     hover: string
     fontSize: string
     height: string
@@ -127,7 +125,6 @@ export function ProfileTabAtInstagram() {
     const location = useLocation()
     const [styles, setStyles] = useState<StyleProps>({
         color: '',
-        font: '',
         hover: '',
         fontSize: '',
         height: '',

packages/mask/src/site-adaptors/instagram.com/utils/selector.ts

@@ -13,7 +13,7 @@ const querySelectorAll = <T extends E>(selector: string) => {
 export const searchProfileTabListLastChildSelector = () =>
     querySelector<E>('section main  div[role="tablist"] > :last-child')
 
-export const searchProfileTabPageSelector = () => querySelector('section main[role="main"] > div > :nth-child(2)')
+export const searchProfileTabPageSelector = () => querySelector('section main[role="main"] > div > :last-child')
 
 export const searchProfileTabSelector = () =>
     querySelector<E>('section main div[role="tablist"]  a[aria-selected="false"]')