Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-07-22 20:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

more color fixes

Browse Source
This commit is contained in:
PhilReact
2025-04-27 20:28:18 +03:00
parent eb457f91af
commit e280295c15
30 changed files with 759 additions and 998 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Auth/DownloadWallet.tsx
View File

@@ -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<string>('');
const [newPassword, setNewPassword] = useState<string>('');
const [keepCurrentPassword, setKeepCurrentPassword] = useState<boolean>(true);
const theme = useTheme();
const [walletToBeDownloadedError, setWalletToBeDownloadedError] =
useState<string>('');

2
src/components/Chat/MessageItem.tsx
View File

@@ -384,7 +384,7 @@ export const MessageItem = React.memo(
<ButtonBase
key={reaction}
sx={{
background: theme.palette.background.paper,
background: theme.palette.background.surface,
borderRadius: '7px',
height: '30px',
minWidth: '45px',

174
src/components/ContextMenu.tsx
View File

@@ -1,35 +1,46 @@
import React, { useState, useRef, useMemo, useEffect } from 'react';
import { ListItemIcon, Menu, MenuItem, Typography, styled } from '@mui/material';
import {
ListItemIcon,
Menu,
MenuItem,
Typography,
styled,
useTheme,
} from '@mui/material';
import MailOutlineIcon from '@mui/icons-material/MailOutline';
import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
import { executeEvent } from '../utils/events';
const CustomStyledMenu = styled(Menu)(({ theme }) => ({
'& .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 (
<div
onContextMenu={handleContextMenu} // For desktop right-click
onTouchStart={handleTouchStart} // For mobile long-press start
onTouchEnd={handleTouchEnd} // For mobile long-press end
onContextMenu={handleContextMenu} // For desktop right-click
onTouchStart={handleTouchStart} // For mobile long-press start
onTouchEnd={handleTouchEnd} // For mobile long-press end
style={{ width: '100%', height: '100%' }}
>
{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();
}}
>
<MenuItem onClick={(e) => {
handleClose(e)
executeEvent("markAsRead", {
groupId
});
}}>
<MenuItem
onClick={(e) => {
handleClose(e);
executeEvent('markAsRead', {
groupId,
});
}}
>
<ListItemIcon sx={{ minWidth: '32px' }}>
<MailOutlineIcon fontSize="small" />
<MailOutlineIcon
sx={{
color: theme.palette.text.primary,
}}
fontSize="small"
/>
</ListItemIcon>
<Typography variant="inherit" sx={{ fontSize: '14px' }}>
Mark As Read
</Typography>
</MenuItem>
<MenuItem onClick={(e) => {
handleClose(e)
handleSetGroupMute()
}}>
<MenuItem
onClick={(e) => {
handleClose(e);
handleSetGroupMute();
}}
>
<ListItemIcon sx={{ minWidth: '32px' }}>
<NotificationsOffIcon fontSize="small" sx={{
color: isMuted && 'red'
}} />
<NotificationsOffIcon
fontSize="small"
sx={{
color: isMuted ? 'red' : theme.palette.text.primary,
}}
/>
</ListItemIcon>
<Typography variant="inherit" sx={{ fontSize: '14px', color: isMuted && 'red' }}>
<Typography
variant="inherit"
sx={{ fontSize: '14px', color: isMuted && 'red' }}
>
{isMuted ? 'Unmute ' : 'Mute '}Push Notifications
</Typography>
</MenuItem>
@@ -167,5 +187,3 @@ export const ContextMenu = ({ children, groupId, getUserSettings, mutedGroups })
</div>
);
};

4
src/components/GlobalActions/JoinGroup.tsx
View File

@@ -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 }) => {
<CircularProgress
size={25}
sx={{
color: 'white',
color: theme.palette.text.primary,
}}
/>{' '}
</Box>

21
src/components/Group/Forum/GroupMail.tsx
View File

@@ -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<any>(null);
const groupId = useMemo(() => {
@@ -657,7 +658,7 @@ export const GroupMail = ({
}}
ref={anchorElInstanceFilter}
>
<ComposeIcon src={SortSVG} />
<SortIcon />
<SelectInstanceContainerFilterInner>
<ComposeP>Sort by</ComposeP>
@@ -771,7 +772,7 @@ export const GroupMail = ({
</div>
)}
</div>
<Box
<CustomButton
onClick={() => {
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',
}}
>
<Typography
sx={{
color: 'white',
fontSize: '12px',
}}
>
@@ -807,11 +804,11 @@ export const GroupMail = ({
</Typography>
<ArrowForwardIosIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
fontSize: '12px',
}}
/>
</Box>
</CustomButton>
</SingleThreadParent>
);
})}

384
src/components/Group/Forum/Mail-styles.ts
View File

@@ -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,
},
}));

42
src/components/Group/Forum/NewThread.tsx
View File

@@ -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)}
>
<ComposeIcon src={ComposeIconSVG} />
<ComposeIcon />
<ComposeP>{currentThread ? 'New Post' : 'New Thread'}</ComposeP>
</ComposeContainer>
@@ -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,
}}
>
<NewMessageHeaderP>
@@ -441,12 +441,16 @@ export const NewThread = ({
}}
onClick={closeModal}
>
<NewMessageCloseImg src={ModalCloseSVG} />
<CloseIcon
sx={{
color: theme.palette.text.primary,
}}
/>
</CloseContainer>
</InstanceListHeader>
<InstanceListContainer
sx={{
backgroundColor: '#434448',
backgroundColor: theme.palette.background.paper,
padding: '20px 42px',
height: 'calc(100% - 165px)',
flexShrink: 0,
@@ -468,9 +472,7 @@ export const NewThread = ({
autoCorrect="off"
sx={{
width: '100%',
color: 'white',
'& .MuiInput-input::placeholder': {
color: 'rgba(255,255,255, 0.70) !important',
fontSize: '20px',
fontStyle: 'normal',
fontWeight: 400,
@@ -525,7 +527,7 @@ export const NewThread = ({
<InstanceFooter
sx={{
backgroundColor: '#434448',
backgroundColor: theme.palette.background.paper,
padding: '20px 42px',
alignItems: 'center',
height: '90px',
@@ -543,7 +545,12 @@ export const NewThread = ({
alignItems: 'center',
}}
>
<CircularProgress sx={{}} size={'12px'} />
<CircularProgress
sx={{
color: theme.palette.text.primary,
}}
size={'12px'}
/>
</Box>
)}
@@ -552,9 +559,14 @@ export const NewThread = ({
</NewMessageSendP>
{isMessage ? (
<SendNewMessage opacity={1} height="25px" width="25px" />
<SendNewMessage />
) : (
<CreateThreadIcon opacity={1} height="25px" width="25px" />
<CreateThreadIcon
color={theme.palette.text.primary}
opacity={1}
height="25px"
width="25px"
/>
)}
</NewMessageSendButton>
</InstanceFooter>

2
src/components/Group/Forum/ShowMessageWithoutModal.tsx
View File

@@ -20,7 +20,7 @@ import { WrapperUserAction } from '../../WrapperUserAction';
export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
const [expandAttachments, setExpandAttachments] = useState<boolean>(false);
console.log('message', message);
let cleanHTML = '';
if (message?.htmlContent) {
cleanHTML = DOMPurify.sanitize(message.htmlContent);

23
src/components/Group/Forum/Thread.tsx
View File

@@ -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();
}}
>
<MailIconImg src={ReturnSVG} />
<ReturnIcon />
<ComposeP>
{t('group:action.return_to_thread', {
postProcess: 'capitalize',
@@ -619,7 +627,7 @@ export const Thread = ({
<ButtonBase onClick={scrollToPosition}>
<ArrowUpwardIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
cursor: 'pointer',
fontSize: '36px',
}}
@@ -629,7 +637,7 @@ export const Thread = ({
<ButtonBase onClick={scrollToPosition}>
<ArrowDownwardIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
cursor: 'pointer',
fontSize: '36px',
}}
@@ -825,7 +833,6 @@ export const Thread = ({
<Typography
sx={{
fontSize: '18px',
color: 'white',
}}
>
{fullMessage?.error}
@@ -925,7 +932,6 @@ export const Thread = ({
<Typography
sx={{
fontSize: '18px',
color: 'white',
}}
>
{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',

6
src/components/Group/GroupJoinRequests.tsx
View File

@@ -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 = ({
<IconButton edge="end" aria-label="comments">
<GroupAddIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
fontSize: '18px',
}}
/>

254
src/components/Group/GroupMenu.tsx
View File

@@ -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 (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
marginTop: '14px',
marginBottom: '14px',
}}
>
<Button
aria-controls={open ? 'home-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
variant="contained"
sx={{
backgroundColor: 'var(--bg-primary)',
width: '148px',
borderRadius: '5px',
fontSize: '12px',
fontWeight: 600,
color: '#fff',
textTransform: 'none',
padding: '5px',
height: '25px',
}}
>
<Box
sx={{
display: 'flex',
gap: '6px',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
}}
>
<Box
sx={{
display: 'flex',
gap: '6px',
alignItems: 'center',
}}
>
{groupSection === 'announcement' && (
<>
{' '}
<NotificationIcon2
color={
hasUnreadAnnouncements || hasUnreadChat
? 'var(--danger)'
: 'white'
}
/>{' '}
{' Announcements'}
</>
)}
{groupSection === 'chat' && (
<>
{' '}
<ChatIcon
color={
hasUnreadAnnouncements || hasUnreadChat
? 'var(--danger)'
: 'white'
}
/>{' '}
{' Group Chats'}
</>
)}
{groupSection === 'forum' && (
<>
{' '}
<ThreadsIcon
color={
hasUnreadAnnouncements || hasUnreadChat
? 'var(--danger)'
: 'white'
}
/>{' '}
{' Threads'}
</>
)}
</Box>
<ArrowDownIcon color="white" />
</Box>
</Button>
<Menu
id="home-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
slotProps={{
paper: {
sx: {
backgroundColor: 'var(--bg-primary)',
color: '#fff',
width: '148px',
borderRadius: '5px',
},
},
}}
sx={{
marginTop: '10px',
}}
>
<MenuItem
onClick={() => {
goToChat();
handleClose();
}}
>
<ListItemIcon
sx={{
minWidth: '24px !important',
}}
>
<ChatIcon color={hasUnreadChat ? 'var(--danger)' : '#fff'} />
</ListItemIcon>
<ListItemText
sx={{
'& .MuiTypography-root': {
fontSize: '12px',
fontWeight: 600,
color: hasUnreadChat ? 'var(--danger)' : '#fff',
},
}}
primary="Chat"
/>
</MenuItem>
<MenuItem
onClick={() => {
goToAnnouncements();
handleClose();
}}
>
<ListItemIcon
sx={{
minWidth: '24px !important',
}}
>
<NotificationIcon2
color={hasUnreadAnnouncements ? 'var(--danger)' : '#fff'}
/>
</ListItemIcon>
<ListItemText
sx={{
'& .MuiTypography-root': {
fontSize: '12px',
fontWeight: 600,
color: hasUnreadAnnouncements ? 'var(--danger)' : '#fff',
},
}}
primary="Announcements"
/>
</MenuItem>
<MenuItem
onClick={() => {
setGroupSection('forum');
handleClose();
}}
>
<ListItemIcon
sx={{
minWidth: '24px !important',
}}
>
<ThreadsIcon color={'#fff'} />
</ListItemIcon>
<ListItemText
sx={{
'& .MuiTypography-root': {
fontSize: '12px',
fontWeight: 600,
},
}}
primary="Threads"
/>
</MenuItem>
<MenuItem
onClick={() => {
setOpenManageMembers(true);
handleClose();
}}
>
<ListItemIcon
sx={{
minWidth: '24px !important',
}}
>
<MembersIcon sx={{ color: '#fff' }} />
</ListItemIcon>
<ListItemText
sx={{
'& .MuiTypography-root': {
fontSize: '12px',
fontWeight: 600,
},
}}
primary="Members"
/>
</MenuItem>
</Menu>
</Box>
);
};

21
src/components/Group/HomeDesktop.tsx
View File

@@ -242,27 +242,6 @@ export const HomeDesktop = ({
)}
</Box>
<Spacer height="26px" />
{/* <Box
sx={{
display: "flex",
width: "100%",
justifyContent: "flex-start",
}}
>
<Button
variant="outlined"
startIcon={<RefreshIcon />}
onClick={refreshHomeDataFunc}
sx={{
color: "white",
}}
>
Refresh home data
</Button>
</Box> */}
<Spacer height="180px" />
</Box>
);

11
src/components/Group/ListOfGroupPromotions.tsx
View File

@@ -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 = () => {
<Avatar
sx={{
backgroundColor: '#27282c',
color: 'white',
color: theme.palette.text.primary,
}}
alt={promotion?.name}
src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
@@ -765,7 +766,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,
},
}}
/>

8
src/components/Group/QMailMessages.tsx
View File

@@ -153,7 +153,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
</Typography>
<MarkEmailUnreadIcon
sx={{
color: anyUnread ? 'var(--unread)' : 'white',
color: anyUnread ? 'var(--unread)' : theme.palette.text.primary,
}}
/>
{isExpanded ? (
@@ -165,7 +165,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
) : (
<ExpandMoreIcon
sx={{
color: anyUnread ? 'var(--unread)' : 'white',
color: anyUnread ? 'var(--unread)' : theme.palette.text.primary,
marginLeft: 'auto',
}}
/>
@@ -268,7 +268,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
) : !lastEnteredTimestamp ? (
<MailOutlineIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
}}
/>
) : lastEnteredTimestamp < mail?.created &&
@@ -281,7 +281,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
) : (
<MailOutlineIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
}}
/>
)}

14
src/components/Group/Settings.tsx
View File

@@ -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<HTMLInputElement>) => {
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked);
window
.sendMessage('addUserSettings', {

14
src/components/Home/QortPrice.tsx
View File

@@ -116,7 +116,7 @@ export const QortPrice = () => {
>
<Tooltip
title={
<span style={{ color: 'white', fontSize: '14px', fontWeight: 700 }}>
<span style={{ fontSize: '14px', fontWeight: 700 }}>
Based on the latest 20 trades
</span>
}
@@ -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 = () => {
</Typography>
{!ltcPerQort ? (
<BarSpinner width="16px" color="white" />
<BarSpinner width="16px" color={theme.palette.text.primary} />
) : (
<Typography
sx={{
@@ -187,7 +187,7 @@ export const QortPrice = () => {
</Typography>
{!supply ? (
<BarSpinner width="16px" color="white" />
<BarSpinner width="16px" color={theme.palette.text.primary} />
) : (
<Typography
sx={{
@@ -200,7 +200,7 @@ export const QortPrice = () => {
</Box>
<Tooltip
title={
<span style={{ color: 'white', fontSize: '14px', fontWeight: 700 }}>
<span style={{ fontSize: '14px', fontWeight: 700 }}>
{lastBlock?.timestamp && formatDate(lastBlock?.timestamp)}
</span>
}
@@ -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 = () => {
</Typography>
{!lastBlock?.height ? (
<BarSpinner width="16px" color="white" />
<BarSpinner width="16px" color={theme.palette.text.primary} />
) : (
<Typography
sx={{

4
src/components/MainAvatar.tsx
View File

@@ -8,6 +8,7 @@ import {
ButtonBase,
Popover,
Typography,
useTheme,
} from '@mui/material';
import { Spacer } from '../common/Spacer';
import ImageUploader from '../common/ImageUploader';
@@ -222,6 +223,7 @@ const PopoverComp = ({
isLoading,
myName,
}) => {
const theme = useTheme();
return (
<Popover
id={id}
@@ -260,7 +262,7 @@ const PopoverComp = ({
>
<ErrorIcon
sx={{
color: 'white',
color: theme.palette.text.primary,
}}
/>
<Typography>

538
src/components/RegisterName.tsx
View File

@@ -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>(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>(
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 (
<Dialog
open={isOpen}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Register name"}
</DialogTitle>
<DialogContent>
<Box
open={isOpen}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{'Register name'}</DialogTitle>
<DialogContent>
<Box
sx={{
width: "400px",
width: '400px',
maxWidth: '90vw',
height: "500px",
height: '500px',
maxHeight: '90vh',
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "10px",
padding: "10px",
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '10px',
padding: '10px',
}}
>
<Label>Choose a name</Label>
<TextField
autoComplete='off'
autoFocus
autoComplete="off"
autoFocus
onChange={(e) => setRegisterNameValue(e.target.value)}
value={registerNameValue}
placeholder="Choose a name"
/>
{(!balance || (nameFee && balance && balance < nameFee))&& (
{(!balance || (nameFee && balance && balance < nameFee)) && (
<>
<Spacer height="10px" />
<Box sx={{
display: 'flex',
gap: '5px',
alignItems: 'center'
}}>
<ErrorIcon sx={{
color: 'white'
}} />
<Typography>Your balance is {balance ?? 0} QORT. A name registration requires a {nameFee} QORT fee</Typography>
</Box>
<Spacer height="10px" />
<Spacer height="10px" />
<Box
sx={{
display: 'flex',
gap: '5px',
alignItems: 'center',
}}
>
<ErrorIcon
sx={{
color: 'white',
}}
/>
<Typography>
Your balance is {balance ?? 0} QORT. A name registration
requires a {nameFee} QORT fee
</Typography>
</Box>
<Spacer height="10px" />
</>
)}
<Spacer height="5px" />
{isNameAvailable === Availability.AVAILABLE && (
<Box sx={{
<Box
sx={{
display: 'flex',
gap: '5px',
alignItems: 'center'
}}>
<CheckIcon sx={{
color: 'white'
}} />
<Typography>{registerNameValue} is available</Typography>
alignItems: 'center',
}}
>
<CheckIcon
sx={{
color: 'white',
}}
/>
<Typography>{registerNameValue} is available</Typography>
</Box>
)}
{isNameAvailable === Availability.NOT_AVAILABLE && (
<Box sx={{
{isNameAvailable === Availability.NOT_AVAILABLE && (
<Box
sx={{
display: 'flex',
gap: '5px',
alignItems: 'center'
}}>
<ErrorIcon sx={{
color: 'white'
}} />
<Typography>{registerNameValue} is unavailable</Typography>
alignItems: 'center',
}}
>
<ErrorIcon
sx={{
color: 'white',
}}
/>
<Typography>{registerNameValue} is unavailable</Typography>
</Box>
)}
{isNameAvailable === Availability.LOADING && (
<Box sx={{
{isNameAvailable === Availability.LOADING && (
<Box
sx={{
display: 'flex',
gap: '5px',
alignItems: 'center'
}}>
<BarSpinner width="16px" color="white" />
<Typography>Checking if name already existis</Typography>
alignItems: 'center',
}}
>
<BarSpinner width="16px" color={theme.palette.text.primary} />
<Typography>Checking if name already existis</Typography>
</Box>
)}
<Spacer height="25px" />
<Typography sx={{
textDecoration: 'underline'
}}>Benefits of a name</Typography>
<List
sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
aria-label="contacts"
>
<ListItem disablePadding>
<ListItemIcon>
<RadioButtonCheckedIcon sx={{
color: 'white'
}} />
</ListItemIcon>
<ListItemText primary="Publish data to Qortal: anything from apps to videos. Fully decentralized!" />
</ListItem>
<ListItem disablePadding>
<ListItemIcon>
<RadioButtonCheckedIcon sx={{
color: 'white'
}} />
</ListItemIcon>
<ListItemText primary="Secure ownership of data published by your name. You can even sell your name, along with your data to a third party." />
</ListItem>
</List>
<Typography
sx={{
textDecoration: 'underline',
}}
>
Benefits of a name
</Typography>
<List
sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
aria-label="contacts"
>
<ListItem disablePadding>
<ListItemIcon>
<RadioButtonCheckedIcon
sx={{
color: 'white',
}}
/>
</ListItemIcon>
<ListItemText primary="Publish data to Qortal: anything from apps to videos. Fully decentralized!" />
</ListItem>
<ListItem disablePadding>
<ListItemIcon>
<RadioButtonCheckedIcon
sx={{
color: 'white',
}}
/>
</ListItemIcon>
<ListItemText primary="Secure ownership of data published by your name. You can even sell your name, along with your data to a third party." />
</ListItem>
</List>
</Box>
</DialogContent>
<DialogActions>
<Button
disabled={isLoadingRegisterName}
variant="contained"
onClick={() => {
setIsOpen(false)
setRegisterNameValue('')
}}
>
Close
</Button>
<Button
disabled={!registerNameValue.trim() ||isLoadingRegisterName || isNameAvailable !== Availability.AVAILABLE || !balance || ((balance && nameFee) && +balance < +nameFee)}
variant="contained"
onClick={registerName}
autoFocus
>
Register Name
</Button>
</DialogActions>
</Dialog>
)
}
</DialogContent>
<DialogActions>
<Button
disabled={isLoadingRegisterName}
variant="contained"
onClick={() => {
setIsOpen(false);
setRegisterNameValue('');
}}
>
Close
</Button>
<Button
disabled={
!registerNameValue.trim() ||
isLoadingRegisterName ||
isNameAvailable !== Availability.AVAILABLE ||
!balance ||
(balance && nameFee && +balance < +nameFee)
}
variant="contained"
onClick={registerName}
autoFocus
>
Register Name
</Button>
</DialogActions>
</Dialog>
);
};