From 94ad99d7e4c552583b6e6ae0b483c392404bd675 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Thu, 12 Jun 2025 20:24:23 +0200 Subject: [PATCH] Use of ClickAwayListener instead of IconButton for closing --- src/components/UserLookup.tsx/UserLookup.tsx | 820 +++++++++---------- 1 file changed, 407 insertions(+), 413 deletions(-) diff --git a/src/components/UserLookup.tsx/UserLookup.tsx b/src/components/UserLookup.tsx/UserLookup.tsx index b58d616..bab5370 100644 --- a/src/components/UserLookup.tsx/UserLookup.tsx +++ b/src/components/UserLookup.tsx/UserLookup.tsx @@ -18,6 +18,8 @@ import { CircularProgress, useTheme, Autocomplete, + IconButton, + ClickAwayListener, } from '@mui/material'; import { getAddressInfo, @@ -28,7 +30,7 @@ import { getNameInfo } from '../Group/Group'; import AccountCircleIcon from '@mui/icons-material/AccountCircle'; import { Spacer } from '../../common/Spacer'; import { formatTimestamp } from '../../utils/time'; -import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen'; +import CloseIcon from '@mui/icons-material/Close'; import { executeEvent, subscribeToEvent, @@ -160,489 +162,481 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => { return ( - - - { - if (!newValue) { - setNameOrAddress(''); - return; - } - setNameOrAddress(newValue); - lookupFunc(newValue); - }} - inputValue={inputValue} - onInputChange={(event, newInputValue) => { - setInputValue(newInputValue); - }} - id="controllable-states-demo" - loading={isLoading} - noOptionsText={t('core:option_no', { - postProcess: 'capitalizeFirstChar', - })} - options={options} - sx={{ width: 300 }} - renderInput={(params) => ( - { - if (e.key === 'Enter' && nameOrAddress) { - lookupFunc(inputValue); - } - }} - /> - )} - /> - - { - onClose(); - }} - > - - - - + - {!isLoadingUser && errorMessage && ( - + { + if (!newValue) { + setNameOrAddress(''); + return; + } + setNameOrAddress(newValue); + lookupFunc(newValue); }} - > - {errorMessage} - - )} - - {isLoadingUser && ( - { + setInputValue(newInputValue); }} - > - - - )} + id="controllable-states-demo" + loading={isLoading} + noOptionsText={t('core:option_no', { + postProcess: 'capitalizeFirstChar', + })} + options={options} + sx={{ flexGrow: 1 }} + renderInput={(params) => ( + { + if (e.key === 'Enter' && nameOrAddress) { + lookupFunc(inputValue); + } + }} + /> + )} + /> + - {!isLoadingUser && addressInfo && ( - <> - + + {!isLoadingUser && errorMessage && ( - {errorMessage} + + )} + + {isLoadingUser && ( + + + + )} + + {!isLoadingUser && addressInfo && ( + <> + + - - {addressInfo?.name ?? - t('auth:message.error.name_not_registered', { - postProcess: 'capitalizeFirstChar', - })} - + + {addressInfo?.name ?? + t('auth:message.error.name_not_registered', { + postProcess: 'capitalizeFirstChar', + })} + - + - - {addressInfo?.name ? ( - + + {addressInfo?.name ? ( + + + + ) : ( - - ) : ( - - )} - + )} + - + - - {t('core:level', { postProcess: 'capitalizeFirstChar' })}{' '} - {addressInfo?.level} - - - - - + {t('core:level', { postProcess: 'capitalizeFirstChar' })}{' '} + {addressInfo?.level} + + + + + + + {t('auth:address', { + postProcess: 'capitalizeFirstChar', + })} + + + + + {t('auth:action.copy_address', { + postProcess: 'capitalizeFirstChar', + })} + + } + placement="bottom" + arrow + sx={{ fontSize: '24' }} + slotProps={{ + tooltip: { + sx: { + color: theme.palette.text.primary, + backgroundColor: theme.palette.background.default, + }, + }, + arrow: { + sx: { + color: theme.palette.text.primary, + }, + }, + }} + > + { + navigator.clipboard.writeText(addressInfo?.address); + }} + > + + {addressInfo?.address} + + + + + + - {t('auth:address', { + {t('core:balance', { postProcess: 'capitalizeFirstChar', })} + + {addressInfo?.balance} - - {t('auth:action.copy_address', { - postProcess: 'capitalizeFirstChar', - })} - - } - placement="bottom" - arrow - sx={{ fontSize: '24' }} - slotProps={{ - tooltip: { - sx: { - color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, - }, - }, - arrow: { - sx: { - color: theme.palette.text.primary, - }, - }, + + + + + + + )} + + + {isLoadingPayments && ( + + + + )} + + {!isLoadingPayments && addressInfo && ( + + + {t('core:message.generic.most_recent_payment', { + count: 20, + postProcess: 'capitalizeFirstChar', + })} + + + + + {!isLoadingPayments && payments?.length === 0 && ( - {t('core:balance', { + {t('core:message.generic.no_payments', { postProcess: 'capitalizeFirstChar', })} - - {addressInfo?.balance} + )} - - - - - - - )} - - - - {isLoadingPayments && ( - - - - )} - - {!isLoadingPayments && addressInfo && ( - - - {t('core:message.generic.most_recent_payment', { - count: 20, - postProcess: 'capitalizeFirstChar', - })} - - - - - {!isLoadingPayments && payments?.length === 0 && ( - - - {t('core:message.generic.no_payments', { - postProcess: 'capitalizeFirstChar', - })} - - - )} - - - - - - {t('core:sender', { postProcess: 'capitalizeFirstChar' })} - - - {t('core:receiver', { - postProcess: 'capitalizeFirstChar', - })} - - - {t('core:amount', { postProcess: 'capitalizeFirstChar' })} - - - {t('core:time.time', { - postProcess: 'capitalizeFirstChar', - })} - - - - - - {payments.map((payment, index) => ( - +
+ + - - {t('auth:action.copy_address', { - postProcess: 'capitalizeFirstChar', - })} - - } - placement="bottom" - arrow - sx={{ fontSize: '24' }} - slotProps={{ - tooltip: { - sx: { - color: theme.palette.text.primary, - backgroundColor: - theme.palette.background.default, - }, - }, - arrow: { - sx: { - color: theme.palette.text.primary, - }, - }, - }} - > - { - navigator.clipboard.writeText( - payment?.creatorAddress - ); - }} - > - {formatAddress(payment?.creatorAddress)} - - + {t('core:sender', { + postProcess: 'capitalizeFirstChar', + })} - - - {t('auth:action.copy_address', { - postProcess: 'capitalizeFirstChar', - })} - - } - placement="bottom" - arrow - sx={{ fontSize: '24' }} - slotProps={{ - tooltip: { - sx: { - color: theme.palette.text.primary, - backgroundColor: - theme.palette.background.default, - }, - }, - arrow: { - sx: { - color: theme.palette.text.primary, - }, - }, - }} - > - { - navigator.clipboard.writeText(payment?.recipient); - }} - > - {formatAddress(payment?.recipient)} - - + {t('core:receiver', { + postProcess: 'capitalizeFirstChar', + })} - - {payment?.amount} - - {formatTimestamp(payment?.timestamp)} + {t('core:amount', { + postProcess: 'capitalizeFirstChar', + })} + + + {t('core:time.time', { + postProcess: 'capitalizeFirstChar', + })} - ))} - -
- - )} + + + + {payments.map((payment, index) => ( + + + + {t('auth:action.copy_address', { + postProcess: 'capitalizeFirstChar', + })} + + } + placement="bottom" + arrow + sx={{ fontSize: '24' }} + slotProps={{ + tooltip: { + sx: { + color: theme.palette.text.primary, + backgroundColor: + theme.palette.background.default, + }, + }, + arrow: { + sx: { + color: theme.palette.text.primary, + }, + }, + }} + > + { + navigator.clipboard.writeText( + payment?.creatorAddress + ); + }} + > + {formatAddress(payment?.creatorAddress)} + + + + + + + {t('auth:action.copy_address', { + postProcess: 'capitalizeFirstChar', + })} + + } + placement="bottom" + arrow + sx={{ fontSize: '24' }} + slotProps={{ + tooltip: { + sx: { + color: theme.palette.text.primary, + backgroundColor: + theme.palette.background.default, + }, + }, + arrow: { + sx: { + color: theme.palette.text.primary, + }, + }, + }} + > + { + navigator.clipboard.writeText( + payment?.recipient + ); + }} + > + {formatAddress(payment?.recipient)} + + + + + {payment?.amount} + + + {formatTimestamp(payment?.timestamp)} + + + ))} + + + + )} + - + ); };