From 18ec6126b7f805f9731c61cdeeb4dd6e38902429 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Sat, 19 Apr 2025 07:56:09 +0200 Subject: [PATCH] Add theme --- src/components/Group/BlockedUsersModal.tsx | 235 ++--- src/components/UserLookup.tsx/UserLookup.tsx | 877 ++++++++++--------- src/components/WrapperUserAction.tsx | 309 ++++--- 3 files changed, 748 insertions(+), 673 deletions(-) diff --git a/src/components/Group/BlockedUsersModal.tsx b/src/components/Group/BlockedUsersModal.tsx index 24b3f01..b2d58e7 100644 --- a/src/components/Group/BlockedUsersModal.tsx +++ b/src/components/Group/BlockedUsersModal.tsx @@ -8,64 +8,78 @@ import { DialogTitle, TextField, Typography, -} from "@mui/material"; -import React, { useContext, useEffect, useState } from "react"; -import { getBaseApiReact, MyContext } from "../../App"; -import { Spacer } from "../../common/Spacer"; -import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from "../../utils/events"; -import { validateAddress } from "../../utils/validateAddress"; -import { getNameInfo, requestQueueMemberNames } from "./Group"; -import { useModal } from "../../common/useModal"; -import { useRecoilState } from "recoil"; -import { isOpenBlockedModalAtom } from "../../atoms/global"; + useTheme, +} from '@mui/material'; +import { useContext, useEffect, useState } from 'react'; +import { getBaseApiReact, MyContext } from '../../App'; +import { Spacer } from '../../common/Spacer'; +import { + executeEvent, + subscribeToEvent, + unsubscribeFromEvent, +} from '../../utils/events'; +import { validateAddress } from '../../utils/validateAddress'; +import { getNameInfo, requestQueueMemberNames } from './Group'; +import { useModal } from '../../common/useModal'; +import { useRecoilState } from 'recoil'; +import { isOpenBlockedModalAtom } from '../../atoms/global'; import InfoIcon from '@mui/icons-material/Info'; + export const BlockedUsersModal = () => { - const [isOpenBlockedModal, setIsOpenBlockedModal] = useRecoilState(isOpenBlockedModalAtom) + const theme = useTheme(); + const [isOpenBlockedModal, setIsOpenBlockedModal] = useRecoilState( + isOpenBlockedModalAtom + ); const [hasChanged, setHasChanged] = useState(false); - const [value, setValue] = useState(""); - const [addressesWithNames, setAddressesWithNames] = useState({}) + const [value, setValue] = useState(''); + const [addressesWithNames, setAddressesWithNames] = useState({}); const { isShow, onCancel, onOk, show, message } = useModal(); - const { getAllBlockedUsers, removeBlockFromList, addToBlockList, setOpenSnackGlobal, setInfoSnackCustom } = - useContext(MyContext); + const { + getAllBlockedUsers, + removeBlockFromList, + addToBlockList, + setOpenSnackGlobal, + setInfoSnackCustom, + } = useContext(MyContext); + const [blockedUsers, setBlockedUsers] = useState({ addresses: {}, names: {}, }); + const fetchBlockedUsers = () => { setBlockedUsers(getAllBlockedUsers()); }; useEffect(() => { - if(!isOpenBlockedModal) return + if (!isOpenBlockedModal) return; fetchBlockedUsers(); }, [isOpenBlockedModal]); - const getNames = async () => { + const getNames = async () => { // const validApi = await findUsableApi(); - const addresses = Object.keys(blockedUsers?.addresses) - const addressNames = {} + const addresses = Object.keys(blockedUsers?.addresses); + const addressNames = {}; - const getMemNames = addresses.map(async (address) => { - const name = await requestQueueMemberNames.enqueue(() => { - return getNameInfo(address); - }); - if (name) { - addressNames[address] = name - } - - + const name = await requestQueueMemberNames.enqueue(() => { + return getNameInfo(address); + }); + if (name) { + addressNames[address] = name; + } + return true; }); - + await Promise.all(getMemNames); - - setAddressesWithNames(addressNames) + + setAddressesWithNames(addressNames); }; const blockUser = async (e, user?: string) => { try { - const valUser = user || value + const valUser = user || value; if (!valUser) return; const isAddress = validateAddress(valUser); let userName = null; @@ -80,62 +94,66 @@ export const BlockedUsersModal = () => { if (!isAddress) { const response = await fetch(`${getBaseApiReact()}/names/${valUser}`); const data = await response.json(); - if (!data?.owner) throw new Error("Name does not exist"); + if (!data?.owner) throw new Error('Name does not exist'); if (data?.owner) { userAddress = data.owner; userName = valUser; } } - if(!userName){ + if (!userName) { await addToBlockList(userAddress, null); fetchBlockedUsers(); setHasChanged(true); - executeEvent('updateChatMessagesWithBlocks', true) - setValue('') - return + executeEvent('updateChatMessagesWithBlocks', true); + setValue(''); + return; } const responseModal = await show({ userName, userAddress, }); - if (responseModal === "both") { + if (responseModal === 'both') { await addToBlockList(userAddress, userName); - } else if (responseModal === "address") { + } else if (responseModal === 'address') { await addToBlockList(userAddress, null); - } else if (responseModal === "name") { + } else if (responseModal === 'name') { await addToBlockList(null, userName); } fetchBlockedUsers(); setHasChanged(true); - setValue('') - if(user){ - setIsOpenBlockedModal(false) + setValue(''); + if (user) { + setIsOpenBlockedModal(false); } - if(responseModal === 'both' || responseModal === 'address'){ - executeEvent('updateChatMessagesWithBlocks', true) + if (responseModal === 'both' || responseModal === 'address') { + executeEvent('updateChatMessagesWithBlocks', true); } } catch (error) { setOpenSnackGlobal(true); - - setInfoSnackCustom({ - type: "error", - message: error?.message || "Unable to block user", - }); + setInfoSnackCustom({ + type: 'error', + message: error?.message || 'Unable to block user', + }); } }; + const blockUserFromOutsideModalFunc = (e) => { - const user = e.detail?.user; - setIsOpenBlockedModal(true) - blockUser(null, user) + const user = e.detail?.user; + setIsOpenBlockedModal(true); + blockUser(null, user); + }; + + useEffect(() => { + subscribeToEvent('blockUserFromOutside', blockUserFromOutsideModalFunc); + + return () => { + unsubscribeFromEvent( + 'blockUserFromOutside', + blockUserFromOutsideModalFunc + ); }; - - useEffect(() => { - subscribeToEvent("blockUserFromOutside", blockUserFromOutsideModalFunc); - - return () => { - unsubscribeFromEvent("blockUserFromOutside", blockUserFromOutsideModalFunc); - }; - }, []); + }, []); + return ( { Blocked Users { Blocked addresses- blocks processing of txs - + )} {Object.entries(blockedUsers?.addresses || {})?.map( @@ -197,11 +217,11 @@ export const BlockedUsersModal = () => { return ( {addressesWithNames[key] || key} @@ -215,7 +235,7 @@ export const BlockedUsersModal = () => { try { await removeBlockFromList(key, undefined); setHasChanged(true); - setValue(""); + setValue(''); fetchBlockedUsers(); } catch (error) { console.error(error); @@ -241,20 +261,20 @@ export const BlockedUsersModal = () => { {Object.entries(blockedUsers?.names || {})?.map(([key, value]) => { return ( {key} @@ -284,20 +304,20 @@ export const BlockedUsersModal = () => { + + + + )} + + + + {isLoadingPayments && ( + + + + )} + {!isLoadingPayments && addressInfo && ( + + 20 most recent payments + + + + {!isLoadingPayments && payments?.length === 0 && ( - Address + No payments - - copy address - - } - placement="bottom" - arrow - sx={{ fontSize: "24" }} - slotProps={{ - tooltip: { - sx: { - color: "#ffffff", - backgroundColor: "#444444", - }, - }, - arrow: { - sx: { - color: "#444444", - }, - }, - }} - > - { - navigator.clipboard.writeText(addressInfo?.address); - }} - > - - {addressInfo?.address} - - - - - - Balance - {addressInfo?.balance} - - - - - - + )} - - )} - - {isLoadingPayments && ( - - - - )} - {!isLoadingPayments && addressInfo && ( - - 20 most recent payments - - {!isLoadingPayments && payments?.length === 0 && ( - - No payments - - )} - - - - Sender - Reciver - Amount - Time - - - - {payments.map((payment, index) => ( - - - - copy address - - } - placement="bottom" - arrow - sx={{ fontSize: "24" }} - slotProps={{ - tooltip: { - sx: { - color: "#ffffff", - backgroundColor: "#444444", - }, - }, - arrow: { - sx: { - color: "#444444", - }, - }, - }} - > - { - navigator.clipboard.writeText( - payment?.creatorAddress - ); - }} - > - {formatAddress(payment?.creatorAddress)} - - - - - - copy address - - } - placement="bottom" - arrow - sx={{ fontSize: "24" }} - slotProps={{ - tooltip: { - sx: { - color: "#ffffff", - backgroundColor: "#444444", - }, - }, - arrow: { - sx: { - color: "#444444", - }, - }, - }} - > - { - navigator.clipboard.writeText(payment?.recipient); - }} - > - {formatAddress(payment?.recipient)} - - - - - - {payment?.amount} - - {formatTimestamp(payment?.timestamp)} - - ))} - -
- + + + + Sender + Reciver + Amount + Time + + + + + {payments.map((payment, index) => ( + + + + copy address + + } + 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)} + + + + + + copy address + + } + 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)} + + + ))} + +
+ )} - diff --git a/src/components/WrapperUserAction.tsx b/src/components/WrapperUserAction.tsx index c074c16..44d7c12 100644 --- a/src/components/WrapperUserAction.tsx +++ b/src/components/WrapperUserAction.tsx @@ -1,10 +1,17 @@ -import React, { useCallback, useContext, useEffect, useState } from 'react'; -import { Popover, Button, Box, CircularProgress } from '@mui/material'; +import { useCallback, useContext, useEffect, useState } from 'react'; +import { + Popover, + Button, + Box, + CircularProgress, + useTheme, +} from '@mui/material'; import { executeEvent } from '../utils/events'; import { MyContext } from '../App'; export const WrapperUserAction = ({ children, address, name, disabled }) => { - const {isRunningPublicNode} = useContext(MyContext) + const theme = useTheme(); + const { isRunningPublicNode } = useContext(MyContext); const [anchorEl, setAnchorEl] = useState(null); // Handle child element click to open Popover @@ -22,8 +29,8 @@ export const WrapperUserAction = ({ children, address, name, disabled }) => { const open = Boolean(anchorEl); const id = open ? address || name : undefined; - if(disabled){ - return children + if (disabled) { + return children; } return ( @@ -31,16 +38,16 @@ export const WrapperUserAction = ({ children, address, name, disabled }) => { {/* Render the child without altering dimensions */} @@ -49,159 +56,151 @@ export const WrapperUserAction = ({ children, address, name, disabled }) => { {/* Popover */} {open && ( - event.stopPropagation(), // Stop propagation inside popover - }, - }} - > - - {/* Option 1: Message */} - - - {/* Option 2: Send QORT */} - - - + + {/* Option 2: Send QORT */} + + + + - {!isRunningPublicNode && ( - - - )} - - + {!isRunningPublicNode && ( + + )} + + )} ); }; +const BlockUser = ({ address, name, handleClose }) => { + const [isAlreadyBlocked, setIsAlreadyBlocked] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const { isUserBlocked, addToBlockList, removeBlockFromList } = + useContext(MyContext); + const theme = useTheme(); -const BlockUser = ({address, name, handleClose})=> { - const [isAlreadyBlocked, setIsAlreadyBlocked] = useState(null) - const [isLoading, setIsLoading] = useState(false) - const {isUserBlocked, - addToBlockList, - removeBlockFromList} = useContext(MyContext) - -useEffect(()=> { - if(!address) return - setIsAlreadyBlocked(isUserBlocked(address, name)) -}, [address, setIsAlreadyBlocked, isUserBlocked, name]) + useEffect(() => { + if (!address) return; + setIsAlreadyBlocked(isUserBlocked(address, name)); + }, [address, setIsAlreadyBlocked, isUserBlocked, name]); return ( - ) -} \ No newline at end of file + }} + > + {(isAlreadyBlocked === null || isLoading) && ( + + )} + {isAlreadyBlocked && 'Unblock name'} + {isAlreadyBlocked === false && 'Block name'} + + ); +};