fix: bugfix for lens (#11132)

DimensionDev · Nov 15, 2023 · 456ad6f · 456ad6f
1 parent a90ed9a
commit 456ad6f
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 10 deletions.
diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/FollowLensDialog.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/FollowLensDialog.tsx
@@ -238,6 +238,7 @@ export function FollowLensDialog({ handle, onClose }: Props) {
     const disabled = useMemo(() => {
         if (
             !account ||
+            !currentProfile ||
             !!wallet?.owner ||
             pluginID !== NetworkPluginID.PLUGIN_EVM ||
             providerType === ProviderType.Fortmatic ||
@@ -258,6 +259,7 @@ export function FollowLensDialog({ handle, onClose }: Props) {
 
         return false
     }, [
+        currentProfile,
         account,
         wallet?.owner,
         chainId,
@@ -300,11 +302,11 @@ export function FollowLensDialog({ handle, onClose }: Props) {
         )
             return t.follow_with_charge_tips()
         else if (profile?.followModule?.type === FollowModuleType.RevertFollowModule) return t.follow_with_revert_tips()
-        else if (!defaultProfile) {
-            return t.follow_gas_tips()
+        else if (!currentProfile) {
+            return t.follow_with_out_handle_tips()
         }
         return
-    }, [wallet?.owner, chainId, profile, feeTokenBalance, pluginID, providerType, isSelf])
+    }, [wallet?.owner, chainId, profile, feeTokenBalance, pluginID, providerType, isSelf, currentProfile])
 
     const avatar = useMemo(() => {
         if (!profile?.metadata?.picture?.optimized.uri) return
@@ -328,7 +330,9 @@ export function FollowLensDialog({ handle, onClose }: Props) {
                             src={avatar ?? new URL('../assets/Lens.png', import.meta.url).toString()}
                             sx={{ width: 64, height: 64 }}
                         />
-                        <Typography className={classes.name}>{profile?.metadata?.displayName}</Typography>
+                        <Typography className={classes.name}>
+                            {profile?.metadata?.displayName ?? profile?.handle.localName}
+                        </Typography>
                         <Typography className={classes.handle}>@{profile?.handle.localName}</Typography>
                         <Typography className={classes.followers}>
                             <Translate.followers
@@ -415,7 +419,6 @@ export function FollowLensDialog({ handle, onClose }: Props) {
                                 expectedChainId={ChainId.Matic}
                                 ActionButtonProps={{ variant: 'roundedContained' }}>
                                 {tips ? <Typography className={classes.tips}>{tips}</Typography> : null}
-                                {tips ? <Typography className={classes.tips}>{tips}</Typography> : null}
 
                                 <HandlerDescription
                                     currentProfile={currentProfile}

diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/HandlerDescription.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/HandlerDescription.tsx
@@ -15,6 +15,7 @@ import type { LensBaseAPI } from '@masknet/web3-providers/types'
 import { Icons } from '@masknet/icons'
 import { ProfilePopup } from './ProfilePopup.js'
 import { useI18N } from '../../locales/i18n_generated.js'
+import { NetworkPluginID } from '@masknet/shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -82,7 +83,9 @@ export const HandlerDescription = memo<HandlerDescriptionProps>(({ profiles, cur
                         <Typography className={classes.address}>{Others.formatAddress(account, 4)}</Typography>
                     </Box>
                 </Box>
-                <Button variant="text" onClick={() => SelectProviderModal.open()}>
+                <Button
+                    variant="text"
+                    onClick={() => SelectProviderModal.open({ requiredSupportPluginID: NetworkPluginID.PLUGIN_EVM })}>
                     {t.wallet_status_button_change()}
                 </Button>
             </Box>
@@ -101,12 +104,15 @@ export const HandlerDescription = memo<HandlerDescriptionProps>(({ profiles, cur
                     }
                 />
                 <Box>
-                    <Typography className={classes.name}>{currentProfile.metadata?.displayName}</Typography>
+                    <Typography className={classes.name}>
+                        {currentProfile.metadata?.displayName ?? currentProfile.handle.localName}
+                    </Typography>
                     <Typography className={classes.address}>{Others.formatAddress(account, 4)}</Typography>
                 </Box>
             </Box>
             <Icons.ArrowDrop size={18} onClick={(e) => setAnchorEl(e.currentTarget)} />
             <ProfilePopup
+                walletName={walletName}
                 profiles={profiles}
                 anchorEl={anchorEl}
                 open={!!anchorEl}

diff --git a/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx b/packages/plugins/Web3Profile/src/SiteAdaptor/components/ProfilePopup.tsx
@@ -2,17 +2,24 @@ import { Icons } from '@masknet/icons'
 import { makeStyles, usePortalShadowRoot } from '@masknet/theme'
 import type { LensBaseAPI } from '@masknet/web3-providers/types'
 import {
+    Box,
+    Button,
     List,
     ListItemButton,
     ListItemIcon,
     ListItemSecondaryAction,
     ListItemText,
     Popover,
     Radio,
+    Typography,
 } from '@mui/material'
 import { memo } from 'react'
-import { Image } from '@masknet/shared'
+import { Image, SelectProviderModal, WalletIcon } from '@masknet/shared'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/shared-base'
+import { Others } from '@masknet/web3-providers'
+import { useChainContext, useProviderDescriptor } from '@masknet/web3-hooks-base'
+import { useI18N } from '../../locales/i18n_generated.js'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
@@ -39,6 +46,45 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.maskColor.second,
         fontWeight: 700,
     },
+    container: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        background: theme.palette.maskColor.bg,
+        borderRadius: 8,
+        padding: theme.spacing(1.5),
+    },
+    description: {
+        display: 'flex',
+        columnGap: 4,
+    },
+    name: {
+        fontWeight: 700,
+        fontSize: 14,
+        lineHeight: '18px',
+        color: theme.palette.maskColor.main,
+    },
+    address: {
+        fontWeight: 700,
+        fontSize: 14,
+        lineHeight: '18px',
+        color: theme.palette.maskColor.second,
+    },
+    list: {
+        maxHeight: 200,
+        overflow: 'auto',
+        '::-webkit-scrollbar': {
+            backgroundColor: 'transparent',
+            width: 18,
+        },
+        '::-webkit-scrollbar-thumb': {
+            borderRadius: '20px',
+            width: 5,
+            border: '7px solid rgba(0, 0, 0, 0)',
+            backgroundColor: theme.palette.maskColor.secondaryLine,
+            backgroundClip: 'padding-box',
+        },
+    },
 }))
 
 interface ProfilePopupProps {
@@ -48,6 +94,7 @@ interface ProfilePopupProps {
     onClose: () => void
     onChange: (profile: LensBaseAPI.Profile) => void
     currentProfile: LensBaseAPI.Profile
+    walletName?: string
 }
 
 export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
@@ -57,9 +104,16 @@ export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
     onClose,
     currentProfile,
     onChange,
+    walletName,
 }) {
+    const t = useI18N()
+
     const { classes } = useStyles()
 
+    const { account } = useChainContext()
+
+    const providerDescriptor = useProviderDescriptor()
+
     return usePortalShadowRoot((container) => (
         <Popover
             disableScrollLock
@@ -77,7 +131,7 @@ export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
                 vertical: 'top',
                 horizontal: 'right',
             }}>
-            <List disablePadding>
+            <List disablePadding className={classes.list}>
                 {profiles?.map((profile) => {
                     return (
                         <ListItemButton
@@ -110,6 +164,20 @@ export const ProfilePopup = memo<ProfilePopupProps>(function ProfilePopup({
                     )
                 })}
             </List>
+            <Box className={classes.container}>
+                <Box className={classes.description}>
+                    <WalletIcon size={36} mainIcon={providerDescriptor?.icon} />
+                    <Box>
+                        <Typography className={classes.name}>{walletName}</Typography>
+                        <Typography className={classes.address}>{Others.formatAddress(account, 4)}</Typography>
+                    </Box>
+                </Box>
+                <Button
+                    variant="text"
+                    onClick={() => SelectProviderModal.open({ requiredSupportPluginID: NetworkPluginID.PLUGIN_EVM })}>
+                    {t.wallet_status_button_change()}
+                </Button>
+            </Box>
         </Popover>
     ))
 })
diff --git a/packages/plugins/Web3Profile/src/locales/en-US.json b/packages/plugins/Web3Profile/src/locales/en-US.json
@@ -10,7 +10,7 @@
     "web3_profile": "Web3 Profile",
     "EVM_wallet": "EVM Wallet",
     "edit_profile_in_lenster": "Edit your profile in lenster",
-    "edit_profile_tips": "{{- profile}} is owned by the current connected wallet. Please go to lenster.xyz to edit profile.",
+    "edit_profile_tips": "{{- profile}} is owned by the current connected wallet. Please go to hey.xyz to edit profile.",
     "Solana_wallet": "Solana Wallet",
     "Flow_wallet": "Flow Wallet",
     "network_error": "Network error, try again",
@@ -28,6 +28,7 @@
     "follow_with_charge_tips": "No enough balance to complete follow process.",
     "follow_with_revert_tips": "This user has banned follow function.",
     "follow_wallet_tips": "Current wallet does not support to interact with Lens protocol.",
+    "follow_with_out_handle_tips": "The current wallet does not hold a lens and cannot follow/unfollow",
     "follow_gas_tips": "Need to pay gas fee to follow this account.",
     "lens_follow": "Lens Follow",
     "lens_unfollow": "Lens Unfollow",