From e280295c154e380b35de057781d3984006be24a8 Mon Sep 17 00:00:00 2001 From: PhilReact Date: Sun, 27 Apr 2025 20:28:18 +0300 Subject: [PATCH] more color fixes --- src/App.tsx | 10 +- src/assets/Icons/ComposeIcon.tsx | 33 ++ src/assets/Icons/CreateThreadIcon.tsx | 12 +- src/assets/Icons/SendNewMessage.tsx | 16 +- src/assets/Icons/SortIcon.tsx | 37 ++ src/assets/Icons/SuccessIcon.tsx | 32 ++ src/assets/svgs/ComposeIcon copy.svg | 9 - src/assets/svgs/Sort.svg | 4 - src/assets/svgs/Success.svg | 3 - src/common/CustomLoader.tsx | 22 +- src/common/LazyLoad.tsx | 45 +- src/common/customloader.css | 2 +- src/components/Auth/DownloadWallet.tsx | 10 +- src/components/Chat/MessageItem.tsx | 2 +- src/components/ContextMenu.tsx | 174 +++--- src/components/GlobalActions/JoinGroup.tsx | 4 +- src/components/Group/Forum/GroupMail.tsx | 21 +- src/components/Group/Forum/Mail-styles.ts | 384 ++++--------- src/components/Group/Forum/NewThread.tsx | 42 +- .../Group/Forum/ShowMessageWithoutModal.tsx | 2 +- src/components/Group/Forum/Thread.tsx | 23 +- src/components/Group/GroupJoinRequests.tsx | 6 +- src/components/Group/GroupMenu.tsx | 254 --------- src/components/Group/HomeDesktop.tsx | 21 - .../Group/ListOfGroupPromotions.tsx | 11 +- src/components/Group/QMailMessages.tsx | 8 +- src/components/Group/Settings.tsx | 14 +- src/components/Home/QortPrice.tsx | 14 +- src/components/MainAvatar.tsx | 4 +- src/components/RegisterName.tsx | 538 ++++++++++-------- 30 files changed, 759 insertions(+), 998 deletions(-) create mode 100644 src/assets/Icons/ComposeIcon.tsx create mode 100644 src/assets/Icons/SortIcon.tsx create mode 100644 src/assets/Icons/SuccessIcon.tsx delete mode 100644 src/assets/svgs/ComposeIcon copy.svg delete mode 100644 src/assets/svgs/Sort.svg delete mode 100644 src/assets/svgs/Success.svg delete mode 100644 src/components/Group/GroupMenu.tsx diff --git a/src/App.tsx b/src/App.tsx index f8e4146..dbdc846 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -36,7 +36,6 @@ import qortLogo from './assets/qort.png'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { Return } from './assets/Icons/Return.tsx'; import WarningIcon from '@mui/icons-material/Warning'; -import Success from './assets/svgs/Success.svg'; import './utils/seedPhrase/RandomSentenceGenerator'; import EngineeringIcon from '@mui/icons-material/Engineering'; import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'; @@ -137,6 +136,7 @@ import { useTranslation } from 'react-i18next'; import LanguageSelector from './components/Language/LanguageSelector.tsx'; import { DownloadWallet } from './components/Auth/DownloadWallet.tsx'; import { CopyIcon } from './assets/Icons/CopyIcon.tsx'; +import { SuccessIcon } from './assets/Icons/SuccessIcon.tsx'; type extStates = | 'not-authenticated' @@ -2931,7 +2931,7 @@ function App() { {walletToBeDownloaded && ( <> - + - + - + - + = ({ + color, + height = 20, + width = 20, + opacity, + ...children +}) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary; + const setOpacity = opacity ? opacity : 1; + + return ( + + + + ); +}; diff --git a/src/assets/Icons/CreateThreadIcon.tsx b/src/assets/Icons/CreateThreadIcon.tsx index d41cbc5..f85f3ac 100644 --- a/src/assets/Icons/CreateThreadIcon.tsx +++ b/src/assets/Icons/CreateThreadIcon.tsx @@ -1,15 +1,18 @@ import React from 'react'; import { styled } from '@mui/system'; import { SVGProps } from './interfaces'; +import { useTheme } from '@mui/material'; // Create a styled container with hover effects -const SvgContainer = styled('svg')({ +const SvgContainer = styled('svg')<{ color?: string }>(({ color }) => ({ '& path': { - fill: 'rgba(41, 41, 43, 1)', // Default to red if no color prop + fill: color, }, -}); +})); +export const CreateThreadIcon: React.FC = ({ color }) => { + const theme = useTheme(); -export const CreateThreadIcon: React.FC = ({ color, opacity }) => { + const setColor = color || theme.palette.text.primary; return ( = ({ color, opacity }) => { viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" + color={setColor} > (({ color }) => ({ '& path': { - fill: 'rgba(41, 41, 43, 1)', // Default to red if no color prop + fill: color, }, -}); +})); -export const SendNewMessage: React.FC = ({ color, opacity }) => { +export const SendNewMessage: React.FC = ({ color, ...props }) => { + const theme = useTheme(); + + const setColor = color || theme.palette.text.primary; return ( = ({ + color, + height = 16, + width = 15, + opacity, + ...children +}) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary; + const setOpacity = opacity ? opacity : 1; + + return ( + + + + + ); +}; diff --git a/src/assets/Icons/SuccessIcon.tsx b/src/assets/Icons/SuccessIcon.tsx new file mode 100644 index 0000000..0319446 --- /dev/null +++ b/src/assets/Icons/SuccessIcon.tsx @@ -0,0 +1,32 @@ +import { useTheme } from '@mui/material'; +import { SVGProps } from './interfaces'; + +export const SuccessIcon: React.FC = ({ + color, + height = 155, + width = 156, + opacity, + ...children +}) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary; + const setOpacity = opacity ? opacity : 1; + + return ( + + + + ); +}; diff --git a/src/assets/svgs/ComposeIcon copy.svg b/src/assets/svgs/ComposeIcon copy.svg deleted file mode 100644 index e2fc3fc..0000000 --- a/src/assets/svgs/ComposeIcon copy.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/svgs/Sort.svg b/src/assets/svgs/Sort.svg deleted file mode 100644 index c399db8..0000000 --- a/src/assets/svgs/Sort.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/svgs/Success.svg b/src/assets/svgs/Success.svg deleted file mode 100644 index c721476..0000000 --- a/src/assets/svgs/Success.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/common/CustomLoader.tsx b/src/common/CustomLoader.tsx index 5998f4b..d1ae3b2 100644 --- a/src/common/CustomLoader.tsx +++ b/src/common/CustomLoader.tsx @@ -1,7 +1,19 @@ -import React from 'react' -import './customloader.css' +import React from 'react'; +import './customloader.css'; +import { Box, useTheme } from '@mui/material'; export const CustomLoader = () => { + const theme = useTheme(); return ( -
- ) -} + +
+
+
+
+ + ); +}; diff --git a/src/common/LazyLoad.tsx b/src/common/LazyLoad.tsx index 6369d0d..9155f63 100644 --- a/src/common/LazyLoad.tsx +++ b/src/common/LazyLoad.tsx @@ -1,28 +1,29 @@ -import React, { useState, useEffect, useRef } from 'react' -import { useInView } from 'react-intersection-observer' -import CircularProgress from '@mui/material/CircularProgress' +import React, { useState, useEffect, useRef } from 'react'; +import { useInView } from 'react-intersection-observer'; +import CircularProgress from '@mui/material/CircularProgress'; +import { useTheme } from '@mui/material'; interface Props { - onLoadMore: () => Promise + onLoadMore: () => Promise; } const LazyLoad: React.FC = ({ onLoadMore }) => { - const [isFetching, setIsFetching] = useState(false) - - const firstLoad = useRef(false) + const [isFetching, setIsFetching] = useState(false); + const theme = useTheme(); + const firstLoad = useRef(false); const [ref, inView] = useInView({ - threshold: 0.7 - }) + threshold: 0.7, + }); useEffect(() => { if (inView) { - setIsFetching(true) + setIsFetching(true); onLoadMore().finally(() => { - setIsFetching(false) - firstLoad.current = true - }) + setIsFetching(false); + firstLoad.current = true; + }); } - }, [inView]) + }, [inView]); return (
= ({ onLoadMore }) => { style={{ display: 'flex', justifyContent: 'center', - minHeight: '25px' + minHeight: '25px', }} >
- +
- ) -} + ); +}; -export default LazyLoad +export default LazyLoad; diff --git a/src/common/customloader.css b/src/common/customloader.css index b77864d..dd00558 100644 --- a/src/common/customloader.css +++ b/src/common/customloader.css @@ -1,5 +1,5 @@ .lds-ellipsis { - color: white; + color: var(--text-primary); } .lds-ellipsis, .lds-ellipsis div { diff --git a/src/components/Auth/DownloadWallet.tsx b/src/components/Auth/DownloadWallet.tsx index 3136dc3..d6efadd 100644 --- a/src/components/Auth/DownloadWallet.tsx +++ b/src/components/Auth/DownloadWallet.tsx @@ -1,4 +1,10 @@ -import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material'; +import { + Box, + Checkbox, + FormControlLabel, + Typography, + useTheme, +} from '@mui/material'; import { Spacer } from '../../common/Spacer'; import { Return } from '../../assets/Icons/Return'; import { CustomButton, CustomLabel, TextP } from '../../styles/App-styles'; @@ -24,7 +30,7 @@ export const DownloadWallet = ({ useState(''); const [newPassword, setNewPassword] = useState(''); const [keepCurrentPassword, setKeepCurrentPassword] = useState(true); - + const theme = useTheme(); const [walletToBeDownloadedError, setWalletToBeDownloadedError] = useState(''); diff --git a/src/components/Chat/MessageItem.tsx b/src/components/Chat/MessageItem.tsx index b365d73..0b23e3f 100644 --- a/src/components/Chat/MessageItem.tsx +++ b/src/components/Chat/MessageItem.tsx @@ -384,7 +384,7 @@ export const MessageItem = React.memo( ({ - '& .MuiPaper-root': { - backgroundColor: '#f9f9f9', - borderRadius: '12px', - padding: theme.spacing(1), - boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)', + '& .MuiPaper-root': { + // backgroundColor: '#f9f9f9', + borderRadius: '12px', + padding: theme.spacing(1), + boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)', + }, + '& .MuiMenuItem-root': { + fontSize: '14px', // Smaller font size for the menu item text + // color: '#444', + transition: '0.3s background-color', + '&:hover': { + backgroundColor: theme.palette.action.hover, // Explicit hover state }, - '& .MuiMenuItem-root': { - fontSize: '14px', // Smaller font size for the menu item text - color: '#444', - transition: '0.3s background-color', - '&:hover': { - backgroundColor: '#f0f0f0', // Explicit hover state - }, - - }, - })); + }, +})); -export const ContextMenu = ({ children, groupId, getUserSettings, mutedGroups }) => { +export const ContextMenu = ({ + children, + groupId, + getUserSettings, + mutedGroups, +}) => { const [menuPosition, setMenuPosition] = useState(null); const longPressTimeout = useRef(null); const preventClick = useRef(false); // Flag to prevent click after long-press or right-click - - const isMuted = useMemo(()=> { - return mutedGroups.includes(groupId) - }, [mutedGroups, groupId]) + const theme = useTheme(); + const isMuted = useMemo(() => { + return mutedGroups.includes(groupId); + }, [mutedGroups, groupId]); // Handle right-click (context menu) for desktop const handleContextMenu = (event) => { @@ -67,56 +78,52 @@ export const ContextMenu = ({ children, groupId, getUserSettings, mutedGroups }) } }; - - - const handleSetGroupMute = ()=> { + const handleSetGroupMute = () => { try { - let value = [...mutedGroups] - if(isMuted){ - value = value.filter((group)=> group !== groupId) - } else { - value.push(groupId) - } - window.sendMessage("addUserSettings", { + let value = [...mutedGroups]; + if (isMuted) { + value = value.filter((group) => group !== groupId); + } else { + value.push(groupId); + } + window + .sendMessage('addUserSettings', { keyValue: { key: 'mutedGroups', value, }, }) - .then((response) => { - if (response?.error) { - console.error("Error adding user settings:", response.error); - } else { - console.log("User settings added successfully"); - } - }) - .catch((error) => { - console.error("Failed to add user settings:", error.message || "An error occurred"); - }); - - setTimeout(() => { - getUserSettings() - }, 400); + .then((response) => { + if (response?.error) { + console.error('Error adding user settings:', response.error); + } else { + console.log('User settings added successfully'); + } + }) + .catch((error) => { + console.error( + 'Failed to add user settings:', + error.message || 'An error occurred' + ); + }); - } catch (error) { - - } - } - - + setTimeout(() => { + getUserSettings(); + }, 400); + } catch (error) {} + }; const handleClose = (e) => { e.preventDefault(); - e.stopPropagation(); + e.stopPropagation(); setMenuPosition(null); }; return (
{children} @@ -131,35 +138,48 @@ export const ContextMenu = ({ children, groupId, getUserSettings, mutedGroups }) ? { top: menuPosition.mouseY, left: menuPosition.mouseX } : undefined } - onClick={(e)=> { - e.stopPropagation(); - }} + onClick={(e) => { + e.stopPropagation(); + }} > - { - handleClose(e) - executeEvent("markAsRead", { - groupId - }); - }}> + { + handleClose(e); + executeEvent('markAsRead', { + groupId, + }); + }} + > - + Mark As Read - { - - handleClose(e) - handleSetGroupMute() - - }}> + { + handleClose(e); + handleSetGroupMute(); + }} + > - + - + {isMuted ? 'Unmute ' : 'Mute '}Push Notifications @@ -167,5 +187,3 @@ export const ContextMenu = ({ children, groupId, getUserSettings, mutedGroups })
); }; - - diff --git a/src/components/GlobalActions/JoinGroup.tsx b/src/components/GlobalActions/JoinGroup.tsx index 5085bac..016959e 100644 --- a/src/components/GlobalActions/JoinGroup.tsx +++ b/src/components/GlobalActions/JoinGroup.tsx @@ -9,6 +9,7 @@ import { DialogActions, DialogContent, Typography, + useTheme, } from '@mui/material'; import { CustomButton, CustomButtonAccept } from '../../styles/App-styles'; import { getBaseApiReact, MyContext } from '../../App'; @@ -23,6 +24,7 @@ export const JoinGroup = ({ memberGroups }) => { const [groupInfo, setGroupInfo] = useState(null); const [isLoadingInfo, setIsLoadingInfo] = useState(false); const [isOpen, setIsOpen] = useState(false); + const theme = useTheme(); const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false); const handleJoinGroup = async (e) => { setGroupInfo(null); @@ -151,7 +153,7 @@ export const JoinGroup = ({ memberGroups }) => { {' '} diff --git a/src/components/Group/Forum/GroupMail.tsx b/src/components/Group/Forum/GroupMail.tsx index 7ad7814..fcc0a09 100644 --- a/src/components/Group/Forum/GroupMail.tsx +++ b/src/components/Group/Forum/GroupMail.tsx @@ -5,7 +5,7 @@ import React, { useRef, useState, } from 'react'; -import { Avatar, Box, Popover, Typography } from '@mui/material'; +import { Avatar, Box, Popover, Typography, useTheme } from '@mui/material'; // import { MAIL_SERVICE_TYPE, THREAD_SERVICE_TYPE } from "../../constants/mail"; import { Thread } from './Thread'; import { @@ -49,7 +49,6 @@ import { handleUnencryptedPublishes, } from '../../Chat/GroupAnnouncements'; import CheckSVG from '../../../assets/svgs/Check.svg'; -import SortSVG from '../../../assets/svgs/Sort.svg'; import ArrowDownSVG from '../../../assets/svgs/ArrowDown.svg'; import { LoadingSnackbar } from '../../Snackbar/LoadingSnackbar'; import { executeEvent } from '../../../utils/events'; @@ -57,6 +56,8 @@ import RefreshIcon from '@mui/icons-material/Refresh'; import { getArbitraryEndpointReact, getBaseApiReact } from '../../../App'; import { addDataPublishesFunc, getDataPublishesFunc } from '../Group'; import { useTranslation } from 'react-i18next'; +import { SortIcon } from '../../../assets/Icons/SortIcon'; +import { CustomButton } from '../../../styles/App-styles'; const filterOptions = ['Recently active', 'Newest', 'Oldest']; @@ -83,7 +84,7 @@ export const GroupMail = ({ const [tempPublishedList, setTempPublishedList] = useState([]); const dataPublishes = useRef({}); const { t } = useTranslation(['core']); - + const theme = useTheme(); const [isLoading, setIsLoading] = useState(false); const groupIdRef = useRef(null); const groupId = useMemo(() => { @@ -657,7 +658,7 @@ export const GroupMail = ({ }} ref={anchorElInstanceFilter} > - + Sort by @@ -771,7 +772,7 @@ export const GroupMail = ({ )} - { setTimeout(() => { executeEvent('threadFetchMode', { @@ -781,7 +782,6 @@ export const GroupMail = ({ }} sx={{ alignItems: 'center', - backgroundColor: '#27282c', borderRadius: '5px', bottom: '2px', cursor: 'pointer', @@ -790,14 +790,11 @@ export const GroupMail = ({ padding: '5px', position: 'absolute', right: '2px', - '&:hover': { - background: 'rgba(255, 255, 255, 0.60)', - }, + minWidth: 'unset', }} > @@ -807,11 +804,11 @@ export const GroupMail = ({ - + ); })} diff --git a/src/components/Group/Forum/Mail-styles.ts b/src/components/Group/Forum/Mail-styles.ts index 368e4cb..6fc12de 100644 --- a/src/components/Group/Forum/Mail-styles.ts +++ b/src/components/Group/Forum/Mail-styles.ts @@ -1,4 +1,4 @@ -import { Typography, Box, TextField } from '@mui/material'; +import { Typography, Box } from '@mui/material'; import { styled } from '@mui/system'; export const InstanceContainer = styled(Box)(({ theme }) => ({ @@ -88,7 +88,7 @@ export const ComposeContainer = styled(Box)(({ theme }) => ({ transition: '0.2s background-color', justifyContent: 'center', '&:hover': { - backgroundColor: 'rgba(67, 68, 72, 1)', + backgroundColor: theme.palette.action.hover, }, })); @@ -141,19 +141,6 @@ export const SelectInstanceContainer = styled(Box)(({ theme }) => ({ gap: '17px', })); -export const SelectInstanceContainerInner = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - gap: '3px', - cursor: 'pointer', - padding: '8px', - transition: 'all 0.2s', - '&:hover': { - borderRadius: '8px', - background: '#434448', - }, -})); - export const SelectInstanceContainerFilterInner = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', @@ -174,81 +161,6 @@ export const InstanceP = styled(Typography)(({ theme }) => ({ fontWeight: 500, })); -export const MailMessageRowContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - cursor: 'pointer', - justifyContent: 'space-between', - borderRadius: '56px 5px 10px 56px', - paddingRight: '15px', - transition: 'background 0.2s', - gap: '10px', - '&:hover': { - background: '#434448', - }, -})); - -export const MailMessageRowProfile = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - cursor: 'pointer', - justifyContent: 'flex-start', - gap: '10px', - width: '50%', - overflow: 'hidden', -})); - -export const MailMessageRowInfo = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - cursor: 'pointer', - justifyContent: 'flex-start', - gap: '7px', - width: '50%', -})); - -export const MailMessageRowInfoStatusNotDecrypted = styled(Typography)( - ({ theme }) => ({ - fontSize: '16px', - fontWeight: 900, - textTransform: 'uppercase', - paddingTop: '2px', - }) -); - -export const MailMessageRowInfoStatusRead = styled(Typography)(({ theme }) => ({ - fontSize: '16px', - fontWeight: 300, -})); - -export const MessageExtraInfo = styled(Box)(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - gap: '2px', - overflow: 'hidden', -})); - -export const MessageExtraName = styled(Typography)(({ theme }) => ({ - fontSize: '16px', - fontWeight: 900, - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden', -})); - -export const MessageExtraDate = styled(Typography)(({ theme }) => ({ - fontSize: '15px', - fontWeight: 500, -})); - -export const MessagesContainer = styled(Box)(({ theme }) => ({ - width: '460px', - maxWidth: '90%', - display: 'flex', - flexDirection: 'column', - gap: '12px', -})); - export const InstanceListParent = styled(Box)` display: flex; flex-direction: column; @@ -378,44 +290,6 @@ export const InstanceListContainerRowGroupIcon = styled('img')({ userSelect: 'none', objectFit: 'contain', }); -export const TypeInAliasTextfield = styled(TextField)({ - width: '340px', // Adjust the width as needed - borderRadius: '5px', - backgroundColor: 'rgba(30, 30, 32, 1)', - border: 'none', - outline: 'none', - input: { - fontSize: 16, - color: 'white', - '&::placeholder': { - fontSize: 16, - color: 'rgba(255, 255, 255, 0.2)', - }, - border: 'none', - outline: 'none', - padding: '10px', - }, - '& .MuiOutlinedInput-root': { - '& fieldset': { - border: 'none', - }, - '&:hover fieldset': { - border: 'none', - }, - '&.Mui-focused fieldset': { - border: 'none', - }, - }, - '& .MuiInput-underline:before': { - borderBottom: 'none', - }, - '& .MuiInput-underline:hover:not(.Mui-disabled):before': { - borderBottom: 'none', - }, - '& .MuiInput-underline:after': { - borderBottom: 'none', - }, -}); export const NewMessageCloseImg = styled('img')({ width: 'auto', @@ -427,6 +301,7 @@ export const NewMessageCloseImg = styled('img')({ export const NewMessageHeaderP = styled(Typography)(({ theme }) => ({ fontSize: '18px', fontWeight: 600, + color: theme.palette.text.primary, })); export const NewMessageInputRow = styled(Box)(({ theme }) => ({ @@ -480,29 +355,24 @@ export const NewMessageAttachmentImg = styled('img')({ border: '1px dashed #646464', }); -export const NewMessageSendButton = styled(Box)` - border-radius: 4px; - border: 1px solid rgba(0, 0, 0, 0.9); - display: inline-flex; - padding: 8px 16px 8px 12px; - justify-content: center; - align-items: center; - gap: 8px; - width: fit-content; - transition: all 0.2s; - color: black; - min-width: 120px; - gap: 8px; - position: relative; - cursor: pointer; - &:hover { - background-color: rgba(41, 41, 43, 1); - color: white; - svg path { - fill: white; // Fill color changes to white on hover - } - } -`; +export const NewMessageSendButton = styled(Box)(({ theme }) => ({ + borderRadius: '4px', + border: `1px solid ${theme.palette.border.main}`, // you can replace with theme.palette.divider or whatever you want later + display: 'inline-flex', + padding: '8px 16px 8px 12px', + justifyContent: 'center', + alignItems: 'center', + width: 'fit-content', + transition: 'all 0.2s', + color: theme.palette.text.primary, // replace later with theme.palette.text.primary if needed + minWidth: '120px', + position: 'relative', + gap: '8px', + cursor: 'pointer', + '&:hover': { + backgroundColor: theme.palette.action.hover, // replace with theme value if needed + }, +})); export const NewMessageSendP = styled(Typography)` font-family: Roboto; @@ -524,14 +394,7 @@ export const ShowMessageNameP = styled(Typography)` text-overflow: ellipsis; overflow: hidden; `; -export const ShowMessageTimeP = styled(Typography)` - color: rgba(255, 255, 255, 0.5); - font-family: Roboto; - font-size: 15px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; + export const ShowMessageSubjectP = styled(Typography)` font-family: Roboto; font-size: 16px; @@ -541,61 +404,44 @@ export const ShowMessageSubjectP = styled(Typography)` text-align: left; `; -export const ShowMessageButton = styled(Box)` -display: inline-flex; -padding: 8px 16px 8px 16px; -align-items: center; -justify-content: center; -gap: 8px; -width: fit-content; -transition: all 0.2s; -color: white; -background-color: rgba(41, 41, 43, 1) -min-width: 120px; -gap: 8px; -border-radius: 4px; -border: 0.5px solid rgba(255, 255, 255, 0.70); -font-family: Roboto; +export const ShowMessageButton = styled(Box)(({ theme }) => ({ + display: 'inline-flex', + padding: '8px 16px', + alignItems: 'center', + justifyContent: 'center', + width: 'fit-content', + transition: 'all 0.2s', + color: theme.palette.text.primary, // you'll replace with theme value + minWidth: '120px', + gap: '8px', + borderRadius: '4px', + border: theme.palette.border.main, // you'll replace + fontFamily: 'Roboto', + cursor: 'pointer', + '&:hover': { + background: theme.palette.action.hover, // you'll replace + borderRadius: '4px', + }, +})); -min-width: 120px; -cursor: pointer; -&:hover { - border-radius: 4px; -border: 0.5px solid rgba(255, 255, 255, 0.70); -background: #434448; -} -`; -export const ShowMessageReturnButton = styled(Box)` -display: inline-flex; -padding: 8px 16px 8px 16px; -align-items: center; -justify-content: center; -gap: 8px; -width: fit-content; -transition: all 0.2s; -color: white; -background-color: rgba(41, 41, 43, 1) -min-width: 120px; -gap: 8px; -border-radius: 4px; -font-family: Roboto; - -min-width: 120px; -cursor: pointer; -&:hover { - border-radius: 4px; -background: #434448; -} -`; - -export const ShowMessageButtonP = styled(Typography)` - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 120%; /* 19.2px */ - letter-spacing: -0.16px; - color: white; -`; +export const ShowMessageReturnButton = styled(Box)(({ theme }) => ({ + display: 'inline-flex', + padding: '8px 16px', + alignItems: 'center', + justifyContent: 'center', + width: 'fit-content', + transition: 'all 0.2s', + color: theme.palette.text.primary, // you'll replace with theme value + minWidth: '120px', + gap: '8px', + borderRadius: '4px', + fontFamily: 'Roboto', + cursor: 'pointer', + '&:hover': { + background: theme.palette.action.hover, // you'll replace + borderRadius: '4px', + }, +})); export const ShowMessageButtonImg = styled('img')({ width: 'auto', @@ -630,18 +476,16 @@ export const MoreImg = styled('img')({ }, }); -export const MoreP = styled(Typography)` - color: rgba(255, 255, 255, 0.5); - - /* Attachments */ - font-family: Roboto; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 120%; /* 19.2px */ - letter-spacing: -0.16px; - white-space: nowrap; -`; +export const MoreP = styled(Typography)(({ theme }) => ({ + color: theme.palette.text.primary, // Now dynamic + fontFamily: 'Roboto', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '120%', // 19.2px + letterSpacing: '-0.16px', + whiteSpace: 'nowrap', +})); export const ThreadContainerFullWidth = styled(Box)(({ theme }) => ({ display: 'flex', @@ -658,7 +502,6 @@ export const ThreadContainer = styled(Box)(({ theme }) => ({ })); export const GroupNameP = styled(Typography)` - color: #fff; font-size: 25px; font-style: normal; font-weight: 700; @@ -667,7 +510,6 @@ export const GroupNameP = styled(Typography)` `; export const AllThreadP = styled(Typography)` - color: #fff; font-size: 20px; font-style: normal; font-weight: 400; @@ -675,32 +517,32 @@ export const AllThreadP = styled(Typography)` letter-spacing: 0.15px; `; -export const SingleThreadParent = styled(Box)` - border-radius: 35px 4px 4px 35px; - position: relative; - background: #434448; - display: flex; - padding: 13px; - cursor: pointer; - margin-bottom: 5px; - height: 76px; - align-items: center; - transition: 0.2s all; - &:hover { - background: rgba(255, 255, 255, 0.2); - } -`; +export const SingleThreadParent = styled(Box)(({ theme }) => ({ + borderRadius: '35px 4px 4px 35px', + position: 'relative', + display: 'flex', + padding: '13px', + cursor: 'pointer', + marginBottom: '5px', + height: '76px', + alignItems: 'center', + transition: '0.2s all', + backgroundColor: theme.palette.background.paper, // or remove if you want no background by default + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, +})); -export const SingleTheadMessageParent = styled(Box)` - border-radius: 35px 4px 4px 35px; - background: #434448; - display: flex; - padding: 13px; - cursor: pointer; - margin-bottom: 5px; - height: 76px; - align-items: center; -`; +export const SingleTheadMessageParent = styled(Box)(({ theme }) => ({ + borderRadius: '35px 4px 4px 35px', + background: theme.palette.background.paper, + display: 'flex', + padding: '13px', + cursor: 'pointer', + marginBottom: '5px', + height: '76px', + alignItems: 'center', +})); export const ThreadInfoColumn = styled(Box)(({ theme }) => ({ display: 'flex', @@ -713,7 +555,6 @@ export const ThreadInfoColumn = styled(Box)(({ theme }) => ({ })); export const ThreadInfoColumnNameP = styled(Typography)` - color: #fff; font-family: Roboto; font-size: 16px; font-style: normal; @@ -724,26 +565,25 @@ export const ThreadInfoColumnNameP = styled(Typography)` overflow: hidden; `; -export const ThreadInfoColumnbyP = styled('span')` - color: rgba(255, 255, 255, 0.8); - font-family: Roboto; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; +export const ThreadInfoColumnbyP = styled('span')(({ theme }) => ({ + color: theme.palette.text.secondary, + fontFamily: 'Roboto', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 'normal', +})); -export const ThreadInfoColumnTime = styled(Typography)` - color: rgba(255, 255, 255, 0.8); - font-family: Roboto; - font-size: 15px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; +export const ThreadInfoColumnTime = styled(Typography)(({ theme }) => ({ + color: theme.palette.text.secondary, + fontFamily: 'Roboto', + fontSize: '15px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 'normal', +})); export const ThreadSingleTitle = styled(Typography)` - color: #fff; font-family: Roboto; font-size: 23px; font-style: normal; @@ -755,7 +595,6 @@ export const ThreadSingleTitle = styled(Typography)` `; export const ThreadSingleLastMessageP = styled(Typography)` - color: #fff; font-family: Roboto; font-size: 12px; font-style: normal; @@ -764,7 +603,6 @@ export const ThreadSingleLastMessageP = styled(Typography)` `; export const ThreadSingleLastMessageSpanP = styled('span')` - color: #fff; font-family: Roboto; font-size: 12px; font-style: normal; @@ -792,6 +630,6 @@ export const CloseContainer = styled(Box)(({ theme }) => ({ height: '50px', borderRadius: '0px 12px 0px 0px', '&:hover': { - backgroundColor: 'rgba(162, 31, 31, 1)', + backgroundColor: theme.palette.action.hover, }, })); diff --git a/src/components/Group/Forum/NewThread.tsx b/src/components/Group/Forum/NewThread.tsx index ddcafbb..74ce7f4 100644 --- a/src/components/Group/Forum/NewThread.tsx +++ b/src/components/Group/Forum/NewThread.tsx @@ -1,12 +1,9 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Box, CircularProgress, Input } from '@mui/material'; +import { Box, CircularProgress, Input, useTheme } from '@mui/material'; import ShortUniqueId from 'short-unique-id'; -import ModalCloseSVG from '../../../assets/svgs/ModalClose.svg'; -import ComposeIconSVG from '../../../assets/svgs/ComposeIcon.svg'; import { CloseContainer, ComposeContainer, - ComposeIcon, ComposeP, InstanceFooter, InstanceListContainer, @@ -29,6 +26,8 @@ import { MessageDisplay } from '../../Chat/MessageDisplay'; import { CustomizedSnackbars } from '../../Snackbar/Snackbar'; import { saveTempPublish } from '../../Chat/GroupAnnouncements'; import { useTranslation } from 'react-i18next'; +import { ComposeIcon } from '../../../assets/Icons/ComposeIcon'; +import CloseIcon from '@mui/icons-material/Close'; const uid = new ShortUniqueId({ length: 8 }); @@ -152,6 +151,7 @@ export const NewThread = ({ const [openSnack, setOpenSnack] = React.useState(false); const [infoSnack, setInfoSnack] = React.useState(null); const editorRef = useRef(null); + const theme = useTheme(); const setEditorRef = (editorInstance) => { editorRef.current = editorInstance; }; @@ -406,7 +406,7 @@ export const NewThread = ({ }} onClick={() => setIsOpen(true)} > - + {currentThread ? 'New Post' : 'New Thread'} @@ -417,7 +417,7 @@ export const NewThread = ({ maxWidth: '950px', height: '700px', borderRadius: '12px 12px 0px 0px', - background: '#434448', + background: theme.palette.background.paper, padding: '0px', gap: '0px', }} @@ -429,7 +429,7 @@ export const NewThread = ({ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', - backgroundColor: '#434448', + backgroundColor: theme.palette.background.paper, }} > @@ -441,12 +441,16 @@ export const NewThread = ({ }} onClick={closeModal} > - + - + )} @@ -552,9 +559,14 @@ export const NewThread = ({ {isMessage ? ( - + ) : ( - + )} diff --git a/src/components/Group/Forum/ShowMessageWithoutModal.tsx b/src/components/Group/Forum/ShowMessageWithoutModal.tsx index 914b9c5..57d920d 100644 --- a/src/components/Group/Forum/ShowMessageWithoutModal.tsx +++ b/src/components/Group/Forum/ShowMessageWithoutModal.tsx @@ -20,7 +20,7 @@ import { WrapperUserAction } from '../../WrapperUserAction'; export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => { const [expandAttachments, setExpandAttachments] = useState(false); - + console.log('message', message); let cleanHTML = ''; if (message?.htmlContent) { cleanHTML = DOMPurify.sanitize(message.htmlContent); diff --git a/src/components/Group/Forum/Thread.tsx b/src/components/Group/Forum/Thread.tsx index 4c94e12..266edb6 100644 --- a/src/components/Group/Forum/Thread.tsx +++ b/src/components/Group/Forum/Thread.tsx @@ -5,7 +5,14 @@ import React, { useRef, useState, } from 'react'; -import { Avatar, Box, Button, ButtonBase, Typography } from '@mui/material'; +import { + Avatar, + Box, + Button, + ButtonBase, + Typography, + useTheme, +} from '@mui/material'; import { ShowMessage } from './ShowMessageWithoutModal'; import { ComposeP, @@ -43,6 +50,7 @@ import { CustomLoader } from '../../../common/CustomLoader'; import { WrapperUserAction } from '../../WrapperUserAction'; import { formatTimestampForum } from '../../../utils/time'; import { useTranslation } from 'react-i18next'; +import { ReturnIcon } from '../../../assets/Icons/ReturnIcon'; const requestQueueSaveToLocal = new RequestQueueWithPromise(1); @@ -116,7 +124,7 @@ export const Thread = ({ const [postReply, setPostReply] = useState(null); const [hasLastPage, setHasLastPage] = useState(false); const { t } = useTranslation(['core']); - + const theme = useTheme(); // Update: Use a new ref for the scrollable container const threadContainerRef = useRef(null); const threadBeginningRef = useRef(null); @@ -606,7 +614,7 @@ export const Thread = ({ closeThread(); }} > - + {t('group:action.return_to_thread', { postProcess: 'capitalize', @@ -619,7 +627,7 @@ export const Thread = ({ {fullMessage?.error} @@ -925,7 +932,6 @@ export const Thread = ({ {t('core:downloading_qdn', { postProcess: 'capitalize' })} @@ -958,9 +964,6 @@ export const Thread = ({ groupInfo?.groupId ); }} - sx={{ - color: 'white', - }} > {t('group:action.refetch_page', { postProcess: 'capitalize', diff --git a/src/components/Group/GroupJoinRequests.tsx b/src/components/Group/GroupJoinRequests.tsx index c7bb32e..2bf0b26 100644 --- a/src/components/Group/GroupJoinRequests.tsx +++ b/src/components/Group/GroupJoinRequests.tsx @@ -7,7 +7,7 @@ import IconButton from '@mui/material/IconButton'; import { RequestQueueWithPromise } from '../../utils/queue/queue'; import GroupAddIcon from '@mui/icons-material/GroupAdd'; import { executeEvent } from '../../utils/events'; -import { Box, ButtonBase, Collapse, Typography } from '@mui/material'; +import { Box, ButtonBase, Collapse, Typography, useTheme } from '@mui/material'; import { CustomLoader } from '../../common/CustomLoader'; import { MyContext, getBaseApiReact } from '../../App'; import { myGroupsWhereIAmAdminAtom } from '../../atoms/global'; @@ -35,7 +35,7 @@ export const GroupJoinRequests = ({ const [loading, setLoading] = React.useState(true); const { txList, setTxList } = React.useContext(MyContext); const setMyGroupsWhereIAmAdmin = useSetRecoilState(myGroupsWhereIAmAdminAtom); - + const theme = useTheme(); const getJoinRequests = async () => { try { setLoading(true); @@ -244,7 +244,7 @@ export const GroupJoinRequests = ({ diff --git a/src/components/Group/GroupMenu.tsx b/src/components/Group/GroupMenu.tsx deleted file mode 100644 index 0d81cd2..0000000 --- a/src/components/Group/GroupMenu.tsx +++ /dev/null @@ -1,254 +0,0 @@ -import { useState } from 'react'; -import { - Button, - Menu, - MenuItem, - ListItemIcon, - ListItemText, - Box, -} from '@mui/material'; -import { ArrowDownIcon } from '../../assets/Icons/ArrowDownIcon'; -import { NotificationIcon2 } from '../../assets/Icons/NotificationIcon2'; -import { ChatIcon } from '../../assets/Icons/ChatIcon'; -import { ThreadsIcon } from '../../assets/Icons/ThreadsIcon'; -import { MembersIcon } from '../../assets/Icons/MembersIcon'; - -export const GroupMenu = ({ - setGroupSection, - groupSection, - setOpenManageMembers, - goToAnnouncements, - goToChat, - hasUnreadChat, - hasUnreadAnnouncements, -}) => { - const [anchorEl, setAnchorEl] = useState(null); - const open = Boolean(anchorEl); - - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - return ( - - - - - { - goToChat(); - handleClose(); - }} - > - - - - - - { - goToAnnouncements(); - handleClose(); - }} - > - - - - - - { - setGroupSection('forum'); - handleClose(); - }} - > - - - - - - { - setOpenManageMembers(true); - handleClose(); - }} - > - - - - - - - - ); -}; diff --git a/src/components/Group/HomeDesktop.tsx b/src/components/Group/HomeDesktop.tsx index d0f2459..83f8828 100644 --- a/src/components/Group/HomeDesktop.tsx +++ b/src/components/Group/HomeDesktop.tsx @@ -242,27 +242,6 @@ export const HomeDesktop = ({ )} - - - {/* - - */} - ); diff --git a/src/components/Group/ListOfGroupPromotions.tsx b/src/components/Group/ListOfGroupPromotions.tsx index a684e40..4d402b6 100644 --- a/src/components/Group/ListOfGroupPromotions.tsx +++ b/src/components/Group/ListOfGroupPromotions.tsx @@ -21,6 +21,7 @@ import { Select, TextField, Typography, + useTheme, } from '@mui/material'; import { LoadingButton } from '@mui/lab'; import LockIcon from '@mui/icons-material/Lock'; @@ -90,7 +91,7 @@ export const ListOfGroupPromotions = () => { const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false); const [isLoadingPublish, setIsLoadingPublish] = useState(false); const { show, setTxList } = useContext(MyContext); - + const theme = useTheme(); const listRef = useRef(); const rowVirtualizer = useVirtualizer({ count: promotions.length, @@ -673,7 +674,7 @@ export const ListOfGroupPromotions = () => { { } sx={{ fontSize: '12px', - color: 'white', + color: theme.palette.text.primary, }} > Join Group: {` ${promotion?.groupName}`} @@ -845,10 +846,10 @@ export const ListOfGroupPromotions = () => { multiline={true} sx={{ '& .MuiFormLabel-root': { - color: 'white', + color: theme.palette.text.primary, }, '& .MuiFormLabel-root.Mui-focused': { - color: 'white', + color: theme.palette.text.primary, }, }} /> diff --git a/src/components/Group/QMailMessages.tsx b/src/components/Group/QMailMessages.tsx index 8673110..238a2aa 100644 --- a/src/components/Group/QMailMessages.tsx +++ b/src/components/Group/QMailMessages.tsx @@ -153,7 +153,7 @@ export const QMailMessages = ({ userName, userAddress }) => { {isExpanded ? ( @@ -165,7 +165,7 @@ export const QMailMessages = ({ userName, userAddress }) => { ) : ( @@ -268,7 +268,7 @@ export const QMailMessages = ({ userName, userAddress }) => { ) : !lastEnteredTimestamp ? ( ) : lastEnteredTimestamp < mail?.created && @@ -281,7 +281,7 @@ export const QMailMessages = ({ userName, userAddress }) => { ) : ( )} diff --git a/src/components/Group/Settings.tsx b/src/components/Group/Settings.tsx index 4af646b..a839bfd 100644 --- a/src/components/Group/Settings.tsx +++ b/src/components/Group/Settings.tsx @@ -1,4 +1,12 @@ -import { forwardRef, Fragment, ReactElement, Ref, useEffect } from 'react'; +import { + ChangeEvent, + forwardRef, + Fragment, + ReactElement, + Ref, + useEffect, + useState, +} from 'react'; import Dialog from '@mui/material/Dialog'; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; @@ -54,12 +62,12 @@ const Transition = forwardRef(function Transition( }); export const Settings = ({ address, open, setOpen }) => { - const [checked, setChecked] = React.useState(false); + const [checked, setChecked] = useState(false); const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom); const theme = useTheme(); - const handleChange = (event: React.ChangeEvent) => { + const handleChange = (event: ChangeEvent) => { setChecked(event.target.checked); window .sendMessage('addUserSettings', { diff --git a/src/components/Home/QortPrice.tsx b/src/components/Home/QortPrice.tsx index 2f118c1..ec74b11 100644 --- a/src/components/Home/QortPrice.tsx +++ b/src/components/Home/QortPrice.tsx @@ -116,7 +116,7 @@ export const QortPrice = () => { > + Based on the latest 20 trades } @@ -127,7 +127,7 @@ export const QortPrice = () => { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -156,7 +156,7 @@ export const QortPrice = () => { {!ltcPerQort ? ( - + ) : ( { {!supply ? ( - + ) : ( { + {lastBlock?.timestamp && formatDate(lastBlock?.timestamp)} } @@ -211,7 +211,7 @@ export const QortPrice = () => { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -240,7 +240,7 @@ export const QortPrice = () => { {!lastBlock?.height ? ( - + ) : ( { + const theme = useTheme(); return ( diff --git a/src/components/RegisterName.tsx b/src/components/RegisterName.tsx index 35af458..8afa806 100644 --- a/src/components/RegisterName.tsx +++ b/src/components/RegisterName.tsx @@ -1,28 +1,29 @@ -import React, { useCallback, useContext, useEffect, useState } from 'react' +import React, { useCallback, useContext, useEffect, useState } from 'react'; import { - Avatar, - Box, - Button, - ButtonBase, - Collapse, - Dialog, - DialogActions, - DialogContent, - DialogContentText, - DialogTitle, - Input, - ListItem, - ListItemAvatar, - ListItemButton, - ListItemIcon, - ListItemText, - List, - MenuItem, - Popover, - Select, - TextField, - Typography, - } from "@mui/material"; + Avatar, + Box, + Button, + ButtonBase, + Collapse, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + Input, + ListItem, + ListItemAvatar, + ListItemButton, + ListItemIcon, + ListItemText, + List, + MenuItem, + Popover, + Select, + TextField, + Typography, + useTheme, +} from '@mui/material'; import { Label } from './Group/AddGroup'; import { Spacer } from '../common/Spacer'; import { LoadingButton } from '@mui/lab'; @@ -35,278 +36,313 @@ import CheckIcon from '@mui/icons-material/Check'; import ErrorIcon from '@mui/icons-material/Error'; enum Availability { - NULL = 'null', - LOADING = 'loading', - AVAILABLE = 'available', - NOT_AVAILABLE = 'not-available' + NULL = 'null', + LOADING = 'loading', + AVAILABLE = 'available', + NOT_AVAILABLE = 'not-available', } -export const RegisterName = ({setOpenSnack, setInfoSnack, userInfo, show, setTxList, balance}) => { - const [isOpen, setIsOpen] = useState(false) - const [registerNameValue, setRegisterNameValue] = useState('') - const [isLoadingRegisterName, setIsLoadingRegisterName] = useState(false) - const [isNameAvailable, setIsNameAvailable] = useState(Availability.NULL) - const [nameFee, setNameFee] = useState(null) +export const RegisterName = ({ + setOpenSnack, + setInfoSnack, + userInfo, + show, + setTxList, + balance, +}) => { + const [isOpen, setIsOpen] = useState(false); + const [registerNameValue, setRegisterNameValue] = useState(''); + const [isLoadingRegisterName, setIsLoadingRegisterName] = useState(false); + const [isNameAvailable, setIsNameAvailable] = useState( + Availability.NULL + ); + const [nameFee, setNameFee] = useState(null); + const theme = useTheme(); + const checkIfNameExisits = async (name) => { + if (!name?.trim()) { + setIsNameAvailable(Availability.NULL); - const checkIfNameExisits = async (name)=> { - if(!name?.trim()){ - setIsNameAvailable(Availability.NULL) - - return + return; } - setIsNameAvailable(Availability.LOADING) + setIsNameAvailable(Availability.LOADING); try { - const res = await fetch(`${getBaseApiReact()}/names/` + name); - const data = await res.json() - if(data?.message === 'name unknown'){ - setIsNameAvailable(Availability.AVAILABLE) - } else { - setIsNameAvailable(Availability.NOT_AVAILABLE) - } + const res = await fetch(`${getBaseApiReact()}/names/` + name); + const data = await res.json(); + if (data?.message === 'name unknown') { + setIsNameAvailable(Availability.AVAILABLE); + } else { + setIsNameAvailable(Availability.NOT_AVAILABLE); + } } catch (error) { - console.error(error) + console.error(error); } finally { } - } - // Debounce logic - useEffect(() => { - const handler = setTimeout(() => { - checkIfNameExisits(registerNameValue); - }, 500); - - // Cleanup timeout if searchValue changes before the timeout completes - return () => { - clearTimeout(handler); - }; - }, [registerNameValue]); + }; + // Debounce logic + useEffect(() => { + const handler = setTimeout(() => { + checkIfNameExisits(registerNameValue); + }, 500); - const openRegisterNameFunc = useCallback((e) => { - setIsOpen(true) + // Cleanup timeout if searchValue changes before the timeout completes + return () => { + clearTimeout(handler); + }; + }, [registerNameValue]); - }, [ setIsOpen]); - - useEffect(() => { - subscribeToEvent("openRegisterName", openRegisterNameFunc); - - return () => { - unsubscribeFromEvent("openRegisterName", openRegisterNameFunc); - }; - }, [openRegisterNameFunc]); + const openRegisterNameFunc = useCallback( + (e) => { + setIsOpen(true); + }, + [setIsOpen] + ); - useEffect(()=> { - const nameRegistrationFee = async ()=> { - try { - const fee = await getFee("REGISTER_NAME"); - setNameFee(fee?.fee) - } catch (error) { - console.error(error) - } - } - nameRegistrationFee() - }, []) + useEffect(() => { + subscribeToEvent('openRegisterName', openRegisterNameFunc); - const registerName = async () => { + return () => { + unsubscribeFromEvent('openRegisterName', openRegisterNameFunc); + }; + }, [openRegisterNameFunc]); + + useEffect(() => { + const nameRegistrationFee = async () => { try { - if (!userInfo?.address) throw new Error("Your address was not found"); - if(!registerNameValue) throw new Error('Enter a name') - - const fee = await getFee("REGISTER_NAME"); - await show({ - message: "Would you like to register this name?", - publishFee: fee.fee + " QORT", - }); - setIsLoadingRegisterName(true); - new Promise((res, rej) => { - window - .sendMessage("registerName", { - name: registerNameValue, - }) - .then((response) => { - if (!response?.error) { - res(response); - setIsLoadingRegisterName(false); - setInfoSnack({ - type: "success", - message: - "Successfully registered. It may take a couple of minutes for the changes to propagate", - }); - setIsOpen(false); - setRegisterNameValue(""); - setOpenSnack(true); - setTxList((prev) => [ - { - ...response, - type: "register-name", - label: `Registered name: awaiting confirmation. This may take a couple minutes.`, - labelDone: `Registered name: success!`, - done: false, - }, - ...prev.filter((item) => !item.done), - ]); - return; - } - setInfoSnack({ - type: "error", - message: response?.error, - }); - setOpenSnack(true); - rej(response.error); - }) - .catch((error) => { - setInfoSnack({ - type: "error", - message: error.message || "An error occurred", - }); - setOpenSnack(true); - rej(error); - }); - }); + const fee = await getFee('REGISTER_NAME'); + setNameFee(fee?.fee); } catch (error) { - if (error?.message) { - setOpenSnack(true) - setInfoSnack({ - type: "error", - message: error?.message, - }); - } - } finally { - setIsLoadingRegisterName(false); + console.error(error); } }; + nameRegistrationFee(); + }, []); + + const registerName = async () => { + try { + if (!userInfo?.address) throw new Error('Your address was not found'); + if (!registerNameValue) throw new Error('Enter a name'); + + const fee = await getFee('REGISTER_NAME'); + await show({ + message: 'Would you like to register this name?', + publishFee: fee.fee + ' QORT', + }); + setIsLoadingRegisterName(true); + new Promise((res, rej) => { + window + .sendMessage('registerName', { + name: registerNameValue, + }) + .then((response) => { + if (!response?.error) { + res(response); + setIsLoadingRegisterName(false); + setInfoSnack({ + type: 'success', + message: + 'Successfully registered. It may take a couple of minutes for the changes to propagate', + }); + setIsOpen(false); + setRegisterNameValue(''); + setOpenSnack(true); + setTxList((prev) => [ + { + ...response, + type: 'register-name', + label: `Registered name: awaiting confirmation. This may take a couple minutes.`, + labelDone: `Registered name: success!`, + done: false, + }, + ...prev.filter((item) => !item.done), + ]); + return; + } + setInfoSnack({ + type: 'error', + message: response?.error, + }); + setOpenSnack(true); + rej(response.error); + }) + .catch((error) => { + setInfoSnack({ + type: 'error', + message: error.message || 'An error occurred', + }); + setOpenSnack(true); + rej(error); + }); + }); + } catch (error) { + if (error?.message) { + setOpenSnack(true); + setInfoSnack({ + type: 'error', + message: error?.message, + }); + } + } finally { + setIsLoadingRegisterName(false); + } + }; return ( - - {"Register name"} - - - + {'Register name'} + + setRegisterNameValue(e.target.value)} value={registerNameValue} placeholder="Choose a name" /> - {(!balance || (nameFee && balance && balance < nameFee))&& ( + {(!balance || (nameFee && balance && balance < nameFee)) && ( <> - - - - Your balance is {balance ?? 0} QORT. A name registration requires a {nameFee} QORT fee - - - + + + + + Your balance is {balance ?? 0} QORT. A name registration + requires a {nameFee} QORT fee + + + )} {isNameAvailable === Availability.AVAILABLE && ( - - - {registerNameValue} is available + alignItems: 'center', + }} + > + + {registerNameValue} is available )} - {isNameAvailable === Availability.NOT_AVAILABLE && ( - - - {registerNameValue} is unavailable + alignItems: 'center', + }} + > + + {registerNameValue} is unavailable )} - {isNameAvailable === Availability.LOADING && ( - - - Checking if name already existis + alignItems: 'center', + }} + > + + Checking if name already existis )} - Benefits of a name - - - - - - - - - - - - - - - - - - + + Benefits of a name + + + + + + + + + + + + + + + - - - - - - - ) -} + + + + + + + ); +};