1- import { memo , type FC } from 'react'
2- import { Button , List , ListItem , Typography , type ListProps } from '@mui/material'
3- import { makeStyles } from '@masknet/theme'
4- import type { LensAccount } from '@masknet/web3-providers'
5- import { useI18N } from '../../locales/i18n_generated.js'
61import { Icons } from '@masknet/icons'
2+ import { Image } from '@masknet/shared'
73import { CrossIsolationMessages } from '@masknet/shared-base'
4+ import { makeStyles } from '@masknet/theme'
5+ import type { FireflyBaseAPI } from '@masknet/web3-providers/types'
6+ import { Button , List , ListItem , Typography , type ListProps } from '@mui/material'
7+ import { memo , type FC } from 'react'
8+ import { useI18N } from '../../locales/i18n_generated.js'
89
910const useStyles = makeStyles ( ) ( ( theme ) => {
1011 const isDark = theme . palette . mode === 'dark'
@@ -38,6 +39,9 @@ const useStyles = makeStyles()((theme) => {
3839 marginBottom : 0 ,
3940 } ,
4041 } ,
42+ avatar : {
43+ borderRadius : '50%' ,
44+ } ,
4145 name : {
4246 color : theme . palette . maskColor . main ,
4347 fontWeight : 400 ,
@@ -64,32 +68,40 @@ const useStyles = makeStyles()((theme) => {
6468 }
6569} )
6670interface Props extends ListProps {
67- accounts : LensAccount [ ]
71+ accounts : FireflyBaseAPI . LensAccount [ ]
6872}
6973
7074export const LensList : FC < Props > = memo ( ( { className, accounts, ...rest } ) => {
7175 const { classes, cx } = useStyles ( )
7276 const t = useI18N ( )
7377 return (
7478 < List className = { cx ( classes . list , className ) } { ...rest } >
75- { accounts . map ( ( account ) => (
76- < ListItem className = { classes . listItem } key = { account . displayName } >
77- < Icons . Lens size = { 20 } />
78- < Typography className = { classes . name } > { account . displayName || account . handle } </ Typography >
79- < Button
80- variant = "text"
81- className = { classes . followButton }
82- disableElevation
83- onClick = { ( ) => {
84- CrossIsolationMessages . events . followLensDialogEvent . sendToLocal ( {
85- open : true ,
86- handle : account . handle ,
87- } )
88- } } >
89- { t . follow ( ) }
90- </ Button >
91- </ ListItem >
92- ) ) }
79+ { accounts . map ( ( account ) => {
80+ const profileUri = account . profileUri . filter ( Boolean )
81+ const lensIcon = < Icons . Lens size = { 20 } />
82+ return (
83+ < ListItem className = { classes . listItem } key = { account . handle } >
84+ { profileUri . length ? (
85+ < Image size = { 20 } src = { profileUri [ 0 ] } className = { classes . avatar } fallback = { lensIcon } />
86+ ) : (
87+ lensIcon
88+ ) }
89+ < Typography className = { classes . name } > { account . name || account . handle } </ Typography >
90+ < Button
91+ variant = "text"
92+ className = { classes . followButton }
93+ disableElevation
94+ onClick = { ( ) => {
95+ CrossIsolationMessages . events . followLensDialogEvent . sendToLocal ( {
96+ open : true ,
97+ handle : account . handle ,
98+ } )
99+ } } >
100+ { t . follow ( ) }
101+ </ Button >
102+ </ ListItem >
103+ )
104+ } ) }
93105 </ List >
94106 )
95107} )
0 commit comments