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

Merge remote-tracking branch 'upstream/develop' into fix/changing-languages

Browse Source
This commit is contained in:
Nicola Benaglia 2025-05-10 15:22:32 +02:00
commit f1907142db
52 changed files with 806 additions and 531 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/Icons/CopyIcon.tsx
View File

@ -1,10 +1,9 @@
import { useTheme } from '@mui/material';
import React from 'react';
export const CopyIcon = ({ color, height = 11, width = 10 }) => {
const theme = useTheme();
const setColor = color ? color : theme.palette.text.primary;
return (
<svg
width={width}
@ -14,11 +13,11 @@ export const CopyIcon = ({ color, height = 11, width = 10 }) => {
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M3.92857 0.5H8.57143C9.36071 0.5 10 1.13929 10 1.92857V6.57143C10 7.36071 9.36071 8 8.57143 8H8.21429V4.42857C8.21429 3.24643 7.25357 2.28571 6.07143 2.28571H2.5V1.92857C2.5 1.13929 3.13929 0.5 3.92857 0.5ZM1.42857 3H6.07143C6.86041 3 7.5 3.63959 7.5 4.42857V9.07143C7.5 9.86041 6.86041 10.5 6.07143 10.5H1.42857C0.639593 10.5 0 9.86041 0 9.07143V4.42857C0 3.63959 0.639593 3 1.42857 3Z"
fill={setColor}
fill-opacity="0.5"
fillOpacity="0.5"
/>
</svg>
);

2
src/common/CustomLoader.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import './customloader.css';
import { Box, useTheme } from '@mui/material';
export const CustomLoader = () => {
const theme = useTheme();
return (

29
src/common/CustomSvg.tsx
View File

@ -1,17 +1,14 @@
import React from 'react';
export const CustomSvg = ({ src, color = 'black', size = 24 }) => {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{ fill: color }}
>
{src}
</svg>
);
};
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{ fill: color }}
>
{src}
</svg>
);
};

1
src/common/customloader.css
View File

@ -36,6 +36,7 @@
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);

2
src/common/useFetchResources.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback, useRef } from 'react';
import { useCallback } from 'react';
import { resourceDownloadControllerAtom } from '../atoms/global';
import { getBaseApiReact } from '../App';
import { useSetAtom } from 'jotai';

2
src/components/Apps/AppsCategoryDesktop.tsx
View File

@ -56,7 +56,7 @@ export const AppsCategoryDesktop = ({
isShow,
}) => {
const [searchValue, setSearchValue] = useState('');
const virtuosoRef = useRef();
const virtuosoRef = useRef(null);
const theme = useTheme();
const categoryList = useMemo(() => {

2
src/components/Apps/AppsLibraryDesktop.tsx
View File

@ -102,7 +102,7 @@ export const AppsLibraryDesktop = ({
getQapps,
}) => {
const [searchValue, setSearchValue] = useState('');
const virtuosoRef = useRef();
const virtuosoRef = useRef(null);
const theme = useTheme();
const officialApps = useMemo(() => {

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

@ -63,6 +63,7 @@ export const DownloadWallet = ({
wallet,
qortAddress: rawWallet.address0,
});
return {
wallet,
qortAddress: rawWallet.address0,

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

@ -18,7 +18,7 @@ export const AnnouncementList = ({
loadMore,
myName,
}) => {
const listRef = useRef();
const listRef = useRef(null);
const [messages, setMessages] = useState(initialMessages);
useEffect(() => {

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

@ -23,7 +23,7 @@ export const ChatList = ({
hasSecretKey,
isPrivate,
}) => {
const parentRef = useRef();
const parentRef = useRef(null);
const [messages, setMessages] = useState(initialMessages);
const [showScrollButton, setShowScrollButton] = useState(false);
const [showScrollDownButton, setShowScrollDownButton] = useState(false);

4
src/components/Chat/ChatOptions.tsx
View File

@ -60,8 +60,8 @@ export const ChatOptions = ({
const [searchValue, setSearchValue] = useState('');
const [selectedMember, setSelectedMember] = useState(0);
const theme = useTheme();
const parentRef = useRef();
const parentRefMentions = useRef();
const parentRef = useRef(null);
const parentRefMentions = useRef(null);
const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null);
const [debouncedValue, setDebouncedValue] = useState(''); // Debounced value
const messages = useMemo(() => {

11
src/components/Chat/GroupAnnouncements.tsx
View File

@ -31,6 +31,7 @@ import {
import { RequestQueueWithPromise } from '../../utils/queue/queue';
import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import { addDataPublishesFunc, getDataPublishesFunc } from '../Group/Group';
import { useTranslation } from 'react-i18next';
const uid = new ShortUniqueId({ length: 8 });
@ -101,6 +102,7 @@ export const decryptPublishes = async (encryptedMessages: any[], secretKey) => {
console.log(error);
}
};
export const handleUnencryptedPublishes = (publishes) => {
let publishesData = [];
publishes.forEach((pub) => {
@ -149,6 +151,7 @@ export const GroupAnnouncements = ({
editorRef.current = editorInstance;
};
const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
const { t } = useTranslation(['core', 'group']);
const triggerRerender = () => {
forceUpdate(); // Trigger re-render by updating the state
@ -209,7 +212,6 @@ export const GroupAnnouncements = ({
)
return;
setIsLoading(true);
// initWebsocketMessageGroup()
hasInitializedWebsocket.current = true;
}, [secretKey, isPrivate]);
@ -287,7 +289,10 @@ export const GroupAnnouncements = ({
const fee = await getFee('ARBITRARY');
await show({
message: 'Would you like to perform a ARBITRARY transaction?',
message: t('group:question.perform_transaction', {
action: 'ARBITRARY',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
@ -329,7 +334,7 @@ export const GroupAnnouncements = ({
setTempData(selectedGroup);
clearEditorContent();
}
// send chat message
// TODO send chat message
} catch (error) {
if (!error) return;
setInfoSnack({

10
src/components/CoreSyncStatus.tsx
View File

@ -114,7 +114,7 @@ export const CoreSyncStatus = () => {
</span>
<div
className="bottom"
className="core-panel"
style={{
right: 'unset',
left: '55px',
@ -122,29 +122,35 @@ export const CoreSyncStatus = () => {
}}
>
<h3>{t('core:core.information', { postProcess: 'capitalize' })}</h3>
<h4 className="lineHeight">
{t('core:core.version', { postProcess: 'capitalize' })}:{' '}
<span style={{ color: '#03a9f4' }}>{buildVersion}</span>
</h4>
<h4 className="lineHeight">{message}</h4>
<h4 className="lineHeight">
{t('core:core.block_height', { postProcess: 'capitalize' })}:{' '}
<span style={{ color: '#03a9f4' }}>{height || ''}</span>
</h4>
<h4 className="lineHeight">
{t('core:core.peers', { postProcess: 'capitalize' })}:{' '}
<span style={{ color: '#03a9f4' }}>
{numberOfConnections || ''}
</span>
</h4>
<h4 className="lineHeight">
{t('auth:node.using_public', { postProcess: 'capitalize' })}:{' '}
<span style={{ color: '#03a9f4' }}>
{isUsingGateway?.toString()}
</span>
</h4>
<h4 className="lineHeight">
{t('core:ui.version')}:{' '}
{t('core:ui.version', { postProcess: 'capitalize' })}:{' '}
<span style={{ color: '#03a9f4' }}>{manifestData.version}</span>
</h4>
</div>

2
src/components/Desktop/DesktopFooter.tsx
View File

@ -3,10 +3,8 @@ import Box from '@mui/material/Box';
import { HubsIcon } from '../../assets/Icons/HubsIcon';
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
import AppIcon from '../../assets/svgs/AppIcon.svg';
import { HomeIcon } from '../../assets/Icons/HomeIcon';
import { Save } from '../Save/Save';
import { enabledDevModeAtom } from '../../atoms/global';
import { useAtom } from 'jotai';

19
src/components/Desktop/DesktopHeader.tsx
View File

@ -1,4 +1,4 @@
import * as React from 'react';
import { useState } from 'react';
import { ButtonBase, Typography, useTheme } from '@mui/material';
import Box from '@mui/material/Box';
import { NotificationIcon2 } from '../../assets/Icons/NotificationIcon2';
@ -81,18 +81,18 @@ export const DesktopHeader = ({
setGroupSection,
isPrivate,
}) => {
const [value, setValue] = React.useState(0);
const [value, setValue] = useState(0);
const theme = useTheme();
return (
<Box
sx={{
width: '100%',
display: 'flex',
alignItems: 'center',
display: 'flex',
height: '70px', // Footer height
zIndex: 1,
justifyContent: 'space-between',
padding: '10px',
width: '100%',
zIndex: 1,
}}
>
<Box
@ -126,11 +126,12 @@ export const DesktopHeader = ({
: selectedGroup?.groupName}
</Typography>
</Box>
<Box
sx={{
alignItems: 'center',
display: 'flex',
gap: '20px',
alignItems: 'center',
visibility: selectedGroup?.groupId === '0' ? 'hidden' : 'visibile',
}}
>
@ -219,6 +220,7 @@ export const DesktopHeader = ({
/>
</IconWrapper>
</ButtonBase>
<ButtonBase
onClick={() => {
setOpenManageMembers(true);
@ -226,17 +228,18 @@ export const DesktopHeader = ({
>
<IconWrapper
color={theme.palette.text.secondary}
customHeight="55px"
label="Members"
selected={false}
customHeight="55px"
>
<MembersIcon
color={theme.palette.text.secondary}
height={25}
width={20}
color={theme.palette.text.secondary}
/>
</IconWrapper>
</ButtonBase>
<ButtonBase
onClick={() => {
setGroupSection('adminSpace');

1
src/components/Drawer/Drawer.tsx
View File

@ -1,5 +1,6 @@
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
export const DrawerComponent = ({ open, setOpen, children }) => {
const toggleDrawer = (newOpen: boolean) => () => {
setOpen(newOpen);

5
src/components/Explore/Explore.tsx
View File

@ -40,6 +40,7 @@ export const Explore = ({ setDesktopViewMode }) => {
}}
src={qTradeLogo}
/>
<Typography
sx={{
fontSize: '1rem',
@ -66,6 +67,7 @@ export const Explore = ({ setDesktopViewMode }) => {
color: theme.palette.text.primary,
}}
/>
<Typography
sx={{
fontSize: '1rem',
@ -94,6 +96,7 @@ export const Explore = ({ setDesktopViewMode }) => {
color: theme.palette.text.primary,
}}
/>
<Typography
sx={{
fontSize: '1rem',
@ -102,6 +105,7 @@ export const Explore = ({ setDesktopViewMode }) => {
{t('tutorial:initial.general_chat', { postProcess: 'capitalize' })}
</Typography>
</ButtonBase>
<ButtonBase
sx={{
'&:hover': { backgroundColor: theme.palette.background.paper },
@ -119,6 +123,7 @@ export const Explore = ({ setDesktopViewMode }) => {
color: theme.palette.text.primary,
}}
/>
<Typography
sx={{
fontSize: '1rem',

1
src/components/GlobalActions/GlobalActions.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { JoinGroup } from './JoinGroup';
export const GlobalActions = () => {

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

@ -1,8 +1,7 @@
import React, { useContext, useEffect, useMemo, useState } from 'react';
import { useContext, useEffect, useMemo, useState } from 'react';
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
import {
Box,
Button,
ButtonBase,
CircularProgress,
Dialog,
@ -11,13 +10,14 @@ import {
Typography,
useTheme,
} from '@mui/material';
import { CustomButton, CustomButtonAccept } from '../../styles/App-styles';
import { CustomButtonAccept } from '../../styles/App-styles';
import { getBaseApiReact, MyContext } from '../../App';
import { getFee } from '../../background';
import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import { FidgetSpinner } from 'react-loader-spinner';
import { useAtom, useSetAtom } from 'jotai';
import { memberGroupsAtom, txListAtom } from '../../atoms/global';
import { useTranslation } from 'react-i18next';
export const JoinGroup = () => {
const { show } = useContext(MyContext);
@ -29,7 +29,9 @@ export const JoinGroup = () => {
const [isLoadingInfo, setIsLoadingInfo] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const theme = useTheme();
const { t } = useTranslation(['core', 'group']);
const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false);
const handleJoinGroup = async (e) => {
setGroupInfo(null);
const groupId = e?.detail?.groupId;
@ -41,6 +43,7 @@ export const JoinGroup = () => {
const groupData = await response.json();
setGroupInfo(groupData);
} catch (error) {
console.log(error);
} finally {
setIsLoadingInfo(false);
}
@ -60,15 +63,22 @@ export const JoinGroup = () => {
(item) => +item?.groupId === +groupInfo?.groupId
);
}, [memberGroups, groupInfo]);
const joinGroup = async (group, isOpen) => {
try {
const groupId = group.groupId;
const fee = await getFee('JOIN_GROUP');
await show({
message: 'Would you like to perform an JOIN_GROUP transaction?',
message: t('group:question.perform_transaction', {
action: 'JOIN_GROUP',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
setIsLoadingJoinGroup(true);
await new Promise((res, rej) => {
window
.sendMessage('joinGroup', {
@ -78,8 +88,9 @@ export const JoinGroup = () => {
if (!response?.error) {
setInfoSnack({
type: 'success',
message:
'Successfully requested to join group. It may take a couple of minutes for the changes to propagate',
message: t('group:message.success.group_join', {
postProcess: 'capitalize',
}),
});
if (isOpen) {
@ -87,8 +98,14 @@ export const JoinGroup = () => {
{
...response,
type: 'joined-group',
label: `Joined Group ${group?.groupName}: awaiting confirmation`,
labelDone: `Joined Group ${group?.groupName}: success!`,
label: t('group:message.success.group_join_label', {
group_name: group?.groupName,
postProcess: 'capitalize',
}),
labelDone: t('group:message.success.group_join_label', {
group_name: group?.groupName,
postProcess: 'capitalize',
}),
done: false,
groupId,
},
@ -99,15 +116,20 @@ export const JoinGroup = () => {
{
...response,
type: 'joined-group-request',
label: `Requested to join Group ${group?.groupName}: awaiting confirmation`,
labelDone: `Requested to join Group ${group?.groupName}: success!`,
label: t('group:message.success.group_join_request', {
group_name: group?.groupName,
postProcess: 'capitalize',
}),
labelDone: t('group:message.success.group_join_outcome', {
group_name: group?.groupName,
postProcess: 'capitalize',
}),
done: false,
groupId,
},
...prev,
]);
}
setOpenSnack(true);
res(response);
return;
@ -123,7 +145,9 @@ export const JoinGroup = () => {
.catch((error) => {
setInfoSnack({
type: 'error',
message: error.message || 'An error occurred',
message:
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' }),
});
setOpenSnack(true);
rej(error);
@ -131,10 +155,12 @@ export const JoinGroup = () => {
});
setIsLoadingJoinGroup(false);
} catch (error) {
console.log(error);
} finally {
setIsLoadingJoinGroup(false);
}
};
return (
<>
<Dialog
@ -146,32 +172,31 @@ export const JoinGroup = () => {
{!groupInfo && (
<Box
sx={{
width: '325px',
height: '150px',
display: 'flex',
alignItems: 'center',
display: 'flex',
height: '150px',
justifyContent: 'center',
width: '325px',
}}
>
{' '}
<CircularProgress
size={25}
sx={{
color: theme.palette.text.primary,
}}
/>{' '}
/>
</Box>
)}
<Box
sx={{
width: '325px',
height: 'auto',
maxHeight: '400px',
alignItems: 'center',
display: !groupInfo ? 'none' : 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '10px',
height: 'auto',
maxHeight: '400px',
padding: '10px',
width: '325px',
}}
>
<Typography
@ -180,16 +205,20 @@ export const JoinGroup = () => {
fontWeight: 600,
}}
>
Group name: {` ${groupInfo?.groupName}`}
{t('group:group.name', { postProcess: 'capitalize' })}:{' '}
{` ${groupInfo?.groupName}`}
</Typography>
<Typography
sx={{
fontSize: '15px',
fontWeight: 600,
}}
>
Number of members: {` ${groupInfo?.memberCount}`}
{t('group:group.member_number', { postProcess: 'capitalize' })}:{' '}
{` ${groupInfo?.memberCount}`}
</Typography>
{groupInfo?.description && (
<Typography
sx={{
@ -207,7 +236,9 @@ export const JoinGroup = () => {
fontWeight: 600,
}}
>
*You are already in this group!
{t('group:message.generic.already_in_group', {
postProcess: 'capitalize',
})}
</Typography>
)}
{!isInGroup && groupInfo?.isOpen === false && (
@ -217,12 +248,14 @@ export const JoinGroup = () => {
fontWeight: 600,
}}
>
*This is a closed/private group, so you will need to wait until
an admin accepts your request
{t('group:message.generic.closed_group', {
postProcess: 'capitalize',
})}
</Typography>
)}
</Box>
</DialogContent>
<DialogActions>
<ButtonBase
onClick={() => {
@ -242,7 +275,9 @@ export const JoinGroup = () => {
opacity: isInGroup ? 0.1 : 1,
}}
>
Join
{t('core:action.join', {
postProcess: 'capitalize',
})}
</CustomButtonAccept>
</ButtonBase>
@ -255,7 +290,9 @@ export const JoinGroup = () => {
}}
onClick={() => setIsOpen(false)}
>
Close
{t('core:action.close', {
postProcess: 'capitalize',
})}
</CustomButtonAccept>
</DialogActions>
</Dialog>
@ -269,14 +306,14 @@ export const JoinGroup = () => {
{isLoadingJoinGroup && (
<Box
sx={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
alignItems: 'center',
bottom: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
left: 0,
position: 'absolute',
right: 0,
top: 0,
}}
>
<FidgetSpinner

10
src/components/Group/AddGroup.tsx
View File

@ -118,7 +118,8 @@ export const AddGroup = ({ address, open, setOpen }) => {
const fee = await getFee('CREATE_GROUP');
await show({
message: t('group:question.create_group', {
message: t('group:question.perform_transaction', {
action: 'CREATE_GROUP',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
@ -330,6 +331,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
postProcess: 'capitalize',
})}
</Label>
<Input
placeholder={t('group:group.name', {
postProcess: 'capitalize',
@ -338,6 +340,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
onChange={(e) => setName(e.target.value)}
/>
</Box>
<Box
sx={{
display: 'flex',
@ -449,6 +452,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
<MenuItem value={100}>100%</MenuItem>
</Select>
</Box>
<Box
sx={{
display: 'flex',
@ -461,6 +465,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
postProcess: 'capitalize',
})}
</Label>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
@ -506,6 +511,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
</MenuItem>
</Select>
</Box>
<Box
sx={{
display: 'flex',
@ -518,6 +524,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
postProcess: 'capitalize',
})}
</Label>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
@ -561,6 +568,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
</Select>
</Box>
</Collapse>
<Box
sx={{
display: 'flex',

15
src/components/Group/AddGroupList.tsx
View File

@ -48,7 +48,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
const [groups, setGroups] = useState([]);
const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
const listRef = useRef();
const listRef = useRef(null);
const [inputValue, setInputValue] = useState('');
const [filteredItems, setFilteredItems] = useState(groups);
const [isLoading, setIsLoading] = useState(false);
@ -113,7 +113,8 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
const fee = await getFee('JOIN_GROUP');
await show({
message: t('group:question.join_group', {
message: t('group:question.perform_transaction', {
action: 'JOIN_GROUP',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
@ -157,8 +158,14 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
{
...response,
type: 'joined-group-request',
label: `Requested to join Group ${group?.groupName}: awaiting confirmation`,
labelDone: `Requested to join Group ${group?.groupName}: success!`,
label: t('group:message.success.group_join_request', {
group_name: group?.groupName,
postProcess: 'capitalize',
}),
labelDone: t('group:message.success.group_join_outcome', {
group_name: group?.groupName,
postProcess: 'capitalize',
}),
done: false,
groupId,
},

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

@ -1,26 +1,17 @@
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Avatar, Box, Popover, Typography, useTheme } from '@mui/material';
// import { MAIL_SERVICE_TYPE, THREAD_SERVICE_TYPE } from "../../constants/mail";
import { Thread } from './Thread';
import {
AllThreadP,
ArrowDownIcon,
ComposeContainer,
ComposeContainerBlank,
ComposeIcon,
ComposeP,
GroupContainer,
InstanceFooter,
InstanceListContainer,
InstanceListContainerRow,
InstanceListContainerRowCheck,
InstanceListContainerRowCheckIcon,
InstanceListContainerRowMain,
InstanceListContainerRowMainP,
InstanceListHeader,
@ -48,7 +39,6 @@ import {
getTempPublish,
handleUnencryptedPublishes,
} from '../../Chat/GroupAnnouncements';
import CheckSVG from '../../../assets/svgs/Check.svg';
import ArrowDownSVG from '../../../assets/svgs/ArrowDown.svg';
import { LoadingSnackbar } from '../../Snackbar/LoadingSnackbar';
import { executeEvent } from '../../../utils/events';
@ -73,9 +63,9 @@ export const GroupMail = ({
hide,
isPrivate,
}) => {
const [viewedThreads, setViewedThreads] = React.useState<any>({});
const [viewedThreads, setViewedThreads] = useState<any>({});
const [filterMode, setFilterMode] = useState<string>('Recently active');
const [currentThread, setCurrentThread] = React.useState(null);
const [currentThread, setCurrentThread] = useState(null);
const [recentThreads, setRecentThreads] = useState<any[]>([]);
const [allThreads, setAllThreads] = useState<any[]>([]);
const [members, setMembers] = useState<any>(null);
@ -178,7 +168,10 @@ export const GroupMail = ({
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred');
rej(
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' })
);
});
});
} catch (error) {
@ -186,7 +179,7 @@ export const GroupMail = ({
}
};
const getAllThreads = React.useCallback(
const getAllThreads = useCallback(
async (groupId: string, mode: string, isInitial?: boolean) => {
try {
setIsLoading(true);
@ -206,7 +199,7 @@ export const GroupMail = ({
});
const responseData = await response.json();
let fullArrayMsg = isInitial ? [] : [...allThreads];
const fullArrayMsg = isInitial ? [] : [...allThreads];
const getMessageForThreads = responseData.map(async (message: any) => {
let fullObject: any = null;
if (message?.metadata?.description) {
@ -271,13 +264,12 @@ export const GroupMail = ({
} finally {
if (isInitial) {
setIsLoading(false);
// dispatch(setIsLoadingCustom(null));
}
}
},
[allThreads, isPrivate]
);
const getMailMessages = React.useCallback(
const getMailMessages = useCallback(
async (groupId: string, members: any) => {
try {
setIsLoading(true);
@ -315,7 +307,7 @@ export const GroupMail = ({
.sort((a, b) => b.created - a.created)
.slice(0, 10);
let fullThreadArray: any = [];
const fullThreadArray: any = [];
const getMessageForThreads = newArray.map(async (message: any) => {
try {
const identifierQuery = message.threadId;
@ -327,6 +319,7 @@ export const GroupMail = ({
},
});
const responseData = await response.json();
if (responseData.length > 0) {
const thread = responseData[0];
if (thread?.metadata?.description) {
@ -342,7 +335,7 @@ export const GroupMail = ({
};
fullThreadArray.push(fullObject);
} else {
let threadRes = await Promise.race([
const threadRes = await Promise.race([
getEncryptedResource(
{
name: thread.name,
@ -377,13 +370,12 @@ export const GroupMail = ({
console.log(error);
} finally {
setIsLoading(false);
// dispatch(setIsLoadingCustom(null));
}
},
[secretKey, isPrivate]
);
const getMessages = React.useCallback(async () => {
const getMessages = useCallback(async () => {
// if ( !groupId || members?.length === 0) return;
if (!groupId || isPrivate === null) return;
@ -400,7 +392,6 @@ export const GroupMail = ({
if (filterModeRef.current !== filterMode) {
firstMount.current = false;
}
// if (groupId && !firstMount.current && members.length > 0) {
if (groupId && !firstMount.current && isPrivate !== null) {
if (filterMode === 'Recently active') {
getMessages();
@ -427,11 +418,6 @@ export const GroupMail = ({
if (groupData && Array.isArray(groupData?.members)) {
for (const member of groupData.members) {
if (member.member) {
// const res = await getNameInfo(member.member);
// const resAddress = await qortalRequest({
// action: "GET_ACCOUNT_DATA",
// address: member.member,
// });
const name = res;
const publicKey = resAddress.publicKey;
if (name) {
@ -465,16 +451,6 @@ export const GroupMail = ({
[filterMode]
);
// useEffect(()=> {
// if(user?.name){
// const threads = JSON.parse(
// localStorage.getItem(`qmail_threads_viewedtimestamp_${user.name}`) || "{}"
// );
// setViewedThreads(threads)
// }
// }, [user?.name, currentThread])
const handleCloseThreadFilterList = () => {
setIsOpenFilterList(false);
};
@ -596,7 +572,7 @@ export const GroupMail = ({
padding: '0px',
}}
>
<InstanceListHeader></InstanceListHeader>
<InstanceListHeader />
<InstanceListContainer>
{filterOptions?.map((filter) => {
return (
@ -621,6 +597,7 @@ export const GroupMail = ({
/>
)}
</InstanceListContainerRowCheck>
<InstanceListContainerRowMain>
<InstanceListContainerRowMainP>
{filter}
@ -630,9 +607,10 @@ export const GroupMail = ({
);
})}
</InstanceListContainer>
<InstanceFooter></InstanceFooter>
<InstanceFooter />
</InstanceListParent>
</Popover>
<ThreadContainerFullWidth>
<ThreadContainer>
<Box
@ -674,7 +652,9 @@ export const GroupMail = ({
)}
</ComposeContainerBlank>
</Box>
<Spacer height="30px" />
<Box
sx={{
alignItems: 'center',
@ -700,10 +680,12 @@ export const GroupMail = ({
viewedThreads[
`qmail_threads_${thread?.threadData?.groupId}_${thread?.threadId}`
];
const shouldAppearLighter =
hasViewedRecent &&
filterMode === 'Recently active' &&
thread?.threadData?.createdAt < hasViewedRecent?.timestamp;
return (
<SingleThreadParent
sx={{
@ -771,13 +753,17 @@ export const GroupMail = ({
>
<ThreadSingleLastMessageP>
<ThreadSingleLastMessageSpanP>
last message:{' '}
{t('group:last_message', {
postProcess: 'capitalize',
})}
:{' '}
</ThreadSingleLastMessageSpanP>
{formatDate(thread?.created)}
</ThreadSingleLastMessageP>
</div>
)}
</div>
<CustomButton
onClick={() => {
setTimeout(() => {
@ -834,6 +820,7 @@ export const GroupMail = ({
</Box>
</ThreadContainer>
</ThreadContainerFullWidth>
<LoadingSnackbar
open={isLoading}
info={{

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

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react';
import { useContext, useEffect, useRef, useState } from 'react';
import { Box, CircularProgress, Input, useTheme } from '@mui/material';
import ShortUniqueId from 'short-unique-id';
import {
@ -8,7 +8,6 @@ import {
InstanceFooter,
InstanceListContainer,
InstanceListHeader,
NewMessageCloseImg,
NewMessageHeaderP,
NewMessageInputRow,
NewMessageSendButton,
@ -143,13 +142,13 @@ export const NewThread = ({
isPrivate,
}: NewMessageProps) => {
const { t } = useTranslation(['core', 'group']);
const { show } = React.useContext(MyContext);
const { show } = useContext(MyContext);
const [isOpen, setIsOpen] = useState<boolean>(false);
const [value, setValue] = useState('');
const [isSending, setIsSending] = useState(false);
const [threadTitle, setThreadTitle] = useState<string>('');
const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null);
const [openSnack, setOpenSnack] = useState(false);
const [infoSnack, setInfoSnack] = useState(null);
const editorRef = useRef(null);
const theme = useTheme();
const setEditorRef = (editorInstance) => {
@ -203,31 +202,37 @@ export const NewThread = ({
// if (!description) missingFields.push('subject')
if (missingFields.length > 0) {
const missingFieldsString = missingFields.join(', ');
const errMsg = `Missing: ${missingFieldsString}`;
errorMsg = errMsg; // TODO translate
const errMsg = t('group:message.error.missing_field', {
field: missingFieldsString,
postProcess: 'capitalize',
});
errorMsg = errMsg;
}
if (errorMsg) {
// dispatch(
// setNotification({
// msg: errorMsg,
// alertType: "error",
// })
// );
throw new Error(errorMsg);
}
const htmlContent = editorRef.current.getHTML();
if (!htmlContent?.trim() || htmlContent?.trim() === '<p></p>')
throw new Error('Please provide a first message to the thread');
if (!htmlContent?.trim() || htmlContent?.trim() === '<p></p>') {
const errMsg = t('group:message.generic.provide_message', {
postProcess: 'capitalize',
});
throw new Error(errMsg);
}
const fee = await getFee('ARBITRARY');
let feeToShow = fee.fee;
if (!isMessage) {
feeToShow = +feeToShow * 2;
}
await show({
message: 'Would you like to perform a ARBITRARY transaction?',
message: t('group:question.perform_transaction', {
action: 'ARBITRARY',
postProcess: 'capitalize',
}),
publishFee: feeToShow + ' QORT',
});
@ -238,6 +243,7 @@ export const NewThread = ({
delete reply.reply;
}
}
const mailObject: any = {
createdAt: Date.now(),
version: 1,
@ -250,7 +256,10 @@ export const NewThread = ({
const secretKey =
isPrivate === false ? null : await getSecretKey(false, true);
if (!secretKey && isPrivate) {
throw new Error('Cannot get group secret key');
const errMsg = t('group:message.error.group_secret_key', {
postProcess: 'capitalize',
});
throw new Error(errMsg);
}
if (!isMessage) {
@ -273,17 +282,18 @@ export const NewThread = ({
isPrivate === false
? threadToBase64
: await encryptSingleFunc(threadToBase64, secretKey);
let identifierThread = `grp-${groupInfo.groupId}-thread-${idThread}`;
const identifierThread = `grp-${groupInfo.groupId}-thread-${idThread}`;
await publishGroupEncryptedResource({
identifier: identifierThread,
encryptedData: encryptSingleThread,
});
let identifierPost = `thmsg-${identifierThread}-${idMsg}`;
const identifierPost = `thmsg-${identifierThread}-${idMsg}`;
await publishGroupEncryptedResource({
identifier: identifierPost,
encryptedData: encryptSingleFirstPost,
});
const dataToSaveToStorage = {
name: myName,
identifier: identifierThread,
@ -292,6 +302,7 @@ export const NewThread = ({
created: Date.now(),
groupId: groupInfo.groupId,
};
const dataToSaveToStoragePost = {
name: myName,
identifier: identifierPost,
@ -300,6 +311,7 @@ export const NewThread = ({
created: Date.now(),
threadId: identifierThread,
};
await saveTempPublish({ data: dataToSaveToStorage, key: 'thread' });
await saveTempPublish({
data: dataToSaveToStoragePost,
@ -307,36 +319,32 @@ export const NewThread = ({
});
setInfoSnack({
type: 'success',
message:
'Successfully created thread. It may take some time for the publish to propagate',
message: t('group:message.success.thread_creation', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
// dispatch(
// setNotification({
// msg: "Message sent",
// alertType: "success",
// })
// );
if (publishCallback) {
publishCallback();
}
closeModal();
} else {
if (!currentThread) throw new Error('unable to locate thread Id');
if (!currentThread) {
const errMsg = t('group:message.error.thread_id', {
postProcess: 'capitalize',
});
throw new Error(errMsg);
}
const idThread = currentThread.threadId;
const messageToBase64 = await objectToBase64(mailObject);
const encryptSinglePost =
isPrivate === false
? messageToBase64
: await encryptSingleFunc(messageToBase64, secretKey);
const idMsg = uid.rnd();
let identifier = `thmsg-${idThread}-${idMsg}`;
const res = await publishGroupEncryptedResource({
identifier: identifier,
encryptedData: encryptSinglePost,
});
const idMsg = uid.rnd();
const identifier = `thmsg-${idThread}-${idMsg}`;
const dataToSaveToStoragePost = {
threadId: idThread,
name: myName,
@ -349,32 +357,17 @@ export const NewThread = ({
data: dataToSaveToStoragePost,
key: 'thread-post',
});
// await qortalRequest(multiplePublishMsg);
// dispatch(
// setNotification({
// msg: "Message sent",
// alertType: "success",
// })
// );
setInfoSnack({
type: 'success',
message:
'Successfully created post. It may take some time for the publish to propagate',
message: t('group:message.success.post_creation', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
if (publishCallback) {
publishCallback();
}
// messageCallback({
// identifier,
// id: identifier,
// name,
// service: MAIL_SERVICE_TYPE,
// created: Date.now(),
// ...mailObject,
// });
}
closeModal();
} catch (error: any) {
if (error?.message) {
@ -393,6 +386,7 @@ export const NewThread = ({
const sendMail = () => {
publishQDNResource();
};
return (
<Box
sx={{
@ -407,7 +401,15 @@ export const NewThread = ({
onClick={() => setIsOpen(true)}
>
<ComposeIcon />
<ComposeP>{currentThread ? 'New Post' : 'New Thread'}</ComposeP>
<ComposeP>
{currentThread
? t('core:action.new.post', {
postProcess: 'capitalize',
})
: t('core:action.new.thread', {
postProcess: 'capitalize',
})}
</ComposeP>
</ComposeContainer>
<ReusableModal
@ -433,8 +435,15 @@ export const NewThread = ({
}}
>
<NewMessageHeaderP>
{isMessage ? 'Post Message' : 'New Thread'}
{isMessage
? t('core:action.post_message', {
postProcess: 'capitalize',
})
: t('core:action.new.thread', {
postProcess: 'capitalize',
})}
</NewMessageHeaderP>
<CloseContainer
sx={{
height: '40px',
@ -448,6 +457,7 @@ export const NewThread = ({
/>
</CloseContainer>
</InstanceListHeader>
<InstanceListContainer
sx={{
backgroundColor: theme.palette.background.paper,
@ -459,6 +469,7 @@ export const NewThread = ({
{!isMessage && (
<>
<Spacer height="10px" />
<NewMessageInputRow>
<Input
id="standard-adornment-name"
@ -516,28 +527,27 @@ export const NewThread = ({
overrideMobile
customEditorHeight="240px"
/>
</Box>
</InstanceListContainer>
<InstanceFooter
sx={{
backgroundColor: theme.palette.background.paper,
padding: '20px 42px',
alignItems: 'center',
backgroundColor: theme.palette.background.paper,
height: '90px',
padding: '20px 42px',
}}
>
<NewMessageSendButton onClick={sendMail}>
{isSending && (
<Box
sx={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
position: 'absolute',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<CircularProgress
@ -550,7 +560,13 @@ export const NewThread = ({
)}
<NewMessageSendP>
{isMessage ? 'Post' : 'Create Thread'}
{isMessage
? t('core:action.post', {
postProcess: 'capitalize',
})
: t('core:action.create_thread', {
postProcess: 'capitalize',
})}
</NewMessageSendP>
{isMessage ? (

4
src/components/Group/Forum/ReadOnlySlate.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { createEditor } from 'slate';
import {
withReact,
@ -96,7 +96,7 @@ interface ReadOnlySlateProps {
content: any;
mode?: string;
}
const ReadOnlySlate: React.FC<ReadOnlySlateProps> = ({ content, mode }) => {
const ReadOnlySlate: FC<ReadOnlySlateProps> = ({ content, mode }) => {
const [load, setLoad] = useState(false);
const editor = useMemo(() => withReact(createEditor()), []);
const value = useMemo(() => content, [content]);

4
src/components/Group/Forum/ReusableModal.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import { FC } from 'react';
import { Box, Modal, useTheme } from '@mui/material';
interface MyModalProps {
@ -9,7 +9,7 @@ interface MyModalProps {
customStyles?: any;
}
export const ReusableModal: React.FC<MyModalProps> = ({
export const ReusableModal: FC<MyModalProps> = ({
open,
onClose,
onSubmit,

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

@ -118,27 +118,6 @@ export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
width: 'auto',
}}
>
{/* <FileElement
fileInfo={{ ...file, mimeTypeSaved: file?.type }}
title={file?.filename}
mode="mail"
otherUser={message?.user}
>
<MailAttachmentImg src={AttachmentMailSVG} />
<Typography
sx={{
fontSize: "16px",
transition: '0.2s all',
"&:hover": {
color: 'rgba(255, 255, 255, 0.90)',
textDecoration: 'underline'
}
}}
>
{file?.originalFilename || file?.filename}
</Typography>
</FileElement> */}
{message?.attachments?.length > 1 && isFirst && (
<Box
sx={{

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

@ -1,10 +1,4 @@
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
Avatar,
Box,
@ -18,7 +12,6 @@ import {
ComposeP,
GroupContainer,
GroupNameP,
MailIconImg,
ShowMessageReturnButton,
SingleThreadParent,
ThreadContainer,
@ -222,7 +215,7 @@ export const Thread = ({
}
};
const getMailMessages = React.useCallback(
const getMailMessages = useCallback(
async (groupInfo: any, before, after, isReverse, groupId) => {
try {
setTempPublishedList([]);
@ -328,7 +321,7 @@ export const Thread = ({
},
[messages, secretKey]
);
const getMessages = React.useCallback(async () => {
const getMessages = useCallback(async () => {
if (
!currentThread ||
(!secretKey && isPrivate) ||
@ -410,7 +403,7 @@ export const Thread = ({
const interval = useRef<any>(null);
const checkNewMessages = React.useCallback(
const checkNewMessages = useCallback(
async (groupInfo: any) => {
try {
let threadId = groupInfo.threadId;
@ -494,7 +487,7 @@ export const Thread = ({
firstMount.current = true;
};
React.useEffect(() => {
useEffect(() => {
subscribeToEvent('threadFetchMode', threadFetchModeFunc);
return () => {
@ -656,6 +649,7 @@ export const Thread = ({
<div ref={threadBeginningRef} />
<ThreadContainer>
<Spacer height={'30px'} />
<Box
sx={{
alignItems: 'center',
@ -715,6 +709,7 @@ export const Thread = ({
>
{t('core:page.previous', { postProcess: 'capitalize' })}
</Button>
<Button
sx={{
textTransformation: 'capitalize',
@ -733,6 +728,7 @@ export const Thread = ({
>
{t('core:page.next', { postProcess: 'capitalize' })}
</Button>
<Button
sx={{
textTransformation: 'capitalize',
@ -1006,6 +1002,7 @@ export const Thread = ({
>
{t('core:page.first', { postProcess: 'capitalize' })}
</Button>
<Button
sx={{
textTransformation: 'capitalize',
@ -1024,6 +1021,7 @@ export const Thread = ({
>
{t('core:page.previous', { postProcess: 'capitalize' })}
</Button>
<Button
sx={{
textTransformation: 'capitalize',
@ -1042,6 +1040,7 @@ export const Thread = ({
>
{t('core:page.next', { postProcess: 'capitalize' })}
</Button>
<Button
sx={{
textTransformation: 'capitalize',
@ -1061,12 +1060,14 @@ export const Thread = ({
{t('core:page.last', { postProcess: 'capitalize' })}
</Button>
</Box>
<Spacer height="30px" />
</Box>
<div ref={containerRef} />
</ThreadContainer>
</ThreadContainerFullWidth>
<LoadingSnackbar
open={isLoading}
info={{

77
src/components/Group/Group.tsx
View File

@ -9,20 +9,12 @@ import {
Typography,
useTheme,
} from '@mui/material';
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { ChatGroup } from '../Chat/ChatGroup';
import { CreateCommonSecret } from '../Chat/CreateCommonSecret';
import { base64ToUint8Array } from '../../qdn/encryption/group-encryption';
import { uint8ArrayToObject } from '../../backgroundFunctions/encryption';
import CampaignIcon from '@mui/icons-material/Campaign';
import { AddGroup } from './AddGroup';
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import CreateIcon from '@mui/icons-material/Create';
import {
AuthenticatedContainerInnerRight,
@ -52,7 +44,6 @@ import {
import { RequestQueueWithPromise } from '../../utils/queue/queue';
import { WebSocketActive } from './WebsocketActive';
import { useMessageQueue } from '../../MessageQueueContext';
import { ContextMenu } from '../ContextMenu';
import { HomeDesktop } from './HomeDesktop';
import { IconWrapper } from '../Desktop/DesktopFooter';
import { DesktopHeader } from '../Desktop/DesktopHeader';
@ -63,7 +54,6 @@ import { HubsIcon } from '../../assets/Icons/HubsIcon';
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
import { formatEmailDate } from './QMailMessages';
import { AdminSpace } from '../Chat/AdminSpace';
import {
addressInfoControllerAtom,
groupAnnouncementsAtom,
@ -77,9 +67,6 @@ import {
timestampEnterDataAtom,
} from '../../atoms/global';
import { sortArrayByTimestampAndGroupName } from '../../utils/time';
import PersonOffIcon from '@mui/icons-material/PersonOff';
import LockIcon from '@mui/icons-material/Lock';
import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
import { BlockedUsersModal } from './BlockedUsersModal';
import { WalletsAppWrapper } from './WalletsAppWrapper';
import { useTranslation } from 'react-i18next';
@ -92,6 +79,7 @@ export const getPublishesFromAdmins = async (admins: string[], groupId) => {
groupId
}&exactmatchnames=true&limit=0&reverse=true&${queryString}&prefix=true`;
const response = await fetch(url);
if (!response.ok) {
throw new Error('network error');
}
@ -100,9 +88,11 @@ export const getPublishesFromAdmins = async (admins: string[], groupId) => {
const filterId = adminData.filter(
(data: any) => data.identifier === `symmetric-qchat-group-${groupId}`
);
if (filterId?.length === 0) {
return false;
}
const sortedData = filterId.sort((a: any, b: any) => {
// Get the most recent date for both a and b
const dateA = a.updated ? new Date(a.updated) : new Date(a.created);
@ -114,24 +104,18 @@ export const getPublishesFromAdmins = async (admins: string[], groupId) => {
return sortedData[0];
};
interface GroupProps {
myAddress: string;
isFocused: boolean;
userInfo: any;
balance: number;
isFocused: boolean;
myAddress: string;
userInfo: any;
}
export const timeDifferenceForNotificationChats = 900000;
export const requestQueueMemberNames = new RequestQueueWithPromise(5);
export const requestQueueAdminMemberNames = new RequestQueueWithPromise(5);
// const audio = new Audio(chrome.runtime?.getURL("msg-not1.wav"));
export const getGroupAdminsAddress = async (groupNumber: number) => {
// const validApi = await findUsableApi();
const response = await fetch(
`${getBaseApiReact()}/groups/members/${groupNumber}?limit=0&onlyAdmins=true`
);
@ -422,27 +406,24 @@ export const Group = ({
const [chatMode, setChatMode] = useState('groups');
const [newChat, setNewChat] = useState(false);
const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null);
const [isLoadingNotifyAdmin, setIsLoadingNotifyAdmin] = React.useState(false);
const [isLoadingGroups, setIsLoadingGroups] = React.useState(true);
const [isLoadingGroup, setIsLoadingGroup] = React.useState(false);
const [openSnack, setOpenSnack] = useState(false);
const [infoSnack, setInfoSnack] = useState(null);
const [isLoadingNotifyAdmin, setIsLoadingNotifyAdmin] = useState(false);
const [isLoadingGroups, setIsLoadingGroups] = useState(true);
const [isLoadingGroup, setIsLoadingGroup] = useState(false);
const [firstSecretKeyInCreation, setFirstSecretKeyInCreation] =
React.useState(false);
const [groupSection, setGroupSection] = React.useState('home');
useState(false);
const [groupSection, setGroupSection] = useState('home');
const [groupAnnouncements, setGroupAnnouncements] = useAtom(
groupAnnouncementsAtom
);
const [defaultThread, setDefaultThread] = React.useState(null);
const [isOpenDrawer, setIsOpenDrawer] = React.useState(false);
const [defaultThread, setDefaultThread] = useState(null);
const [isOpenDrawer, setIsOpenDrawer] = useState(false);
const setIsOpenBlockedUserModal = useSetAtom(isOpenBlockedModalAtom);
const [hideCommonKeyPopup, setHideCommonKeyPopup] = React.useState(false);
const [isLoadingGroupMessage, setIsLoadingGroupMessage] = React.useState('');
const [drawerMode, setDrawerMode] = React.useState('groups');
const [hideCommonKeyPopup, setHideCommonKeyPopup] = useState(false);
const [isLoadingGroupMessage, setIsLoadingGroupMessage] = useState('');
const [drawerMode, setDrawerMode] = useState('groups');
const setMutedGroups = useSetAtom(mutedGroupsAtom);
const [mobileViewMode, setMobileViewMode] = useState('home');
const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState('');
const isFocusedRef = useRef(true);
@ -531,7 +512,10 @@ export const Group = ({
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred');
rej(
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' })
);
});
});
} catch (error) {
@ -557,7 +541,10 @@ export const Group = ({
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred');
rej(
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' })
);
});
});
} catch (error) {
@ -586,7 +573,10 @@ export const Group = ({
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred');
rej(
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' })
);
});
});
} catch (error) {
@ -1106,7 +1096,10 @@ export const Group = ({
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred');
rej(
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' })
);
});
});
setInfoSnack({

3
src/components/Group/InviteMember.tsx
View File

@ -16,7 +16,8 @@ export const InviteMember = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
try {
const fee = await getFee('GROUP_INVITE');
await show({
message: t('group:question.group_invite', {
message: t('group:question.perform_transaction', {
action: 'GROUP_INVITE',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',

19
src/components/Group/ListOfBans.tsx
View File

@ -54,7 +54,7 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
const [bans, setBans] = useState([]);
const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
const listRef = useRef();
const listRef = useRef(null);
const [isLoadingUnban, setIsLoadingUnban] = useState(false);
const { t } = useTranslation(['core', 'group']);
@ -88,7 +88,10 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
try {
const fee = await getFee('CANCEL_GROUP_BAN');
await show({
message: t('group:question.cancel_ban', { postProcess: 'capitalize' }),
message: t('group:question.perform_transaction', {
action: 'CANCEL_GROUP_BAN',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
setIsLoadingUnban(true);
@ -165,13 +168,13 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
>
<Box
sx={{
width: '325px',
height: '250px',
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '10px',
height: '250px',
padding: '10px',
width: '325px',
}}
>
<LoadingButton
@ -214,12 +217,12 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
<p>{t('group:ban_list', { postProcess: 'capitalize' })}</p>
<div
style={{
position: 'relative',
height: '500px',
width: '100%',
display: 'flex',
flexDirection: 'column',
flexShrink: 1,
height: '500px',
position: 'relative',
width: '100%',
}}
>
<AutoSizer>

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

@ -51,6 +51,11 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import { getFee } from '../../background';
import { useAtom, useSetAtom } from 'jotai';
import { useTranslation } from 'react-i18next';
const THIRTY_MINUTES = 30 * 60 * 1000; // 30 minutes in milliseconds
const uid = new ShortUniqueId({ length: 8 });
export const requestQueuePromos = new RequestQueueWithPromise(3);
export function utf8ToBase64(inputString: string): string {
@ -65,13 +70,11 @@ export function utf8ToBase64(inputString: string): string {
return base64String;
}
const uid = new ShortUniqueId({ length: 8 });
export function getGroupId(str) {
const match = str.match(/group-(\d+)-/);
return match ? match[1] : null;
}
const THIRTY_MINUTES = 30 * 60 * 1000; // 30 minutes in milliseconds
export const ListOfGroupPromotions = () => {
const [popoverAnchor, setPopoverAnchor] = useState(null);
const [openPopoverIndex, setOpenPopoverIndex] = useState(null);
@ -98,7 +101,8 @@ export const ListOfGroupPromotions = () => {
const setTxList = useSetAtom(txListAtom);
const theme = useTheme();
const listRef = useRef();
const { t } = useTranslation(['core', 'group']);
const listRef = useRef(null);
const rowVirtualizer = useVirtualizer({
count: promotions.length,
getItemKey: React.useCallback(
@ -120,6 +124,7 @@ export const ListOfGroupPromotions = () => {
console.log(error);
}
}, []);
const getPromotions = useCallback(async () => {
try {
setPromotionTimeInterval(Date.now());
@ -135,6 +140,7 @@ export const ListOfGroupPromotions = () => {
let data: any[] = [];
const uniqueGroupIds = new Set();
const oneWeekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
const getPromos = responseData?.map(async (promo: any) => {
if (promo?.size < 200 && promo.created > oneWeekAgo) {
const name = await requestQueuePromos.enqueue(async () => {
@ -213,6 +219,7 @@ export const ListOfGroupPromotions = () => {
setPopoverAnchor(null);
setOpenPopoverIndex(null);
};
const publishPromo = async () => {
try {
setIsLoadingPublish(true);
@ -235,9 +242,12 @@ export const ListOfGroupPromotions = () => {
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred');
rej(
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' })
);
});
}); // TODO translate
});
setInfoSnack({
type: 'success',
message:
@ -264,7 +274,10 @@ export const ListOfGroupPromotions = () => {
const groupId = group.groupId;
const fee = await getFee('JOIN_GROUP');
await show({
message: 'Would you like to perform an JOIN_GROUP transaction?',
message: t('group:question.perform_transaction', {
action: 'JOIN_GROUP',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
setIsLoadingJoinGroup(true);
@ -331,6 +344,7 @@ export const ListOfGroupPromotions = () => {
});
setIsLoadingJoinGroup(false);
} catch (error) {
console.log(error);
} finally {
setIsLoadingJoinGroup(false);
}
@ -339,30 +353,30 @@ export const ListOfGroupPromotions = () => {
return (
<Box
sx={{
width: '100%',
display: 'flex',
marginTop: '20px',
flexDirection: 'column',
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
marginTop: '20px',
width: '100%',
}}
>
<Box
sx={{
display: 'flex',
gap: '20px',
width: '100%',
justifyContent: 'space-between',
width: '100%',
}}
>
<ButtonBase
sx={{
alignSelf: isExpanded && 'flex-start',
display: 'flex',
flexDirection: 'row',
padding: `0px ${isExpanded ? '24px' : '20px'}`,
gap: '10px',
justifyContent: 'flex-start',
alignSelf: isExpanded && 'flex-start',
padding: `0px ${isExpanded ? '24px' : '20px'}`,
}}
onClick={() => setIsExpanded((prev) => !prev)}
>
@ -374,6 +388,7 @@ export const ListOfGroupPromotions = () => {
Group promotions{' '}
{promotions.length > 0 && ` (${promotions.length})`}
</Typography>
{isExpanded ? (
<ExpandLessIcon
sx={{
@ -400,19 +415,19 @@ export const ListOfGroupPromotions = () => {
<>
<Box
sx={{
width: '750px',
maxWidth: '90%',
display: 'flex',
flexDirection: 'column',
maxWidth: '90%',
padding: '0px 20px',
width: '750px',
}}
>
<Box
sx={{
width: '100%',
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
}}
>
<Typography

50
src/components/Group/ListOfInvites.tsx
View File

@ -18,6 +18,7 @@ import { getNameInfo } from './Group';
import { getFee } from '../../background';
import { LoadingButton } from '@mui/lab';
import { getBaseApiReact } from '../../App';
import { useTranslation } from 'react-i18next';
export const getMemberInvites = async (groupNumber) => {
const response = await fetch(
@ -59,8 +60,8 @@ export const ListOfInvites = ({
const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
const [isLoadingCancelInvite, setIsLoadingCancelInvite] = useState(false);
const listRef = useRef();
const { t } = useTranslation(['core', 'group']);
const listRef = useRef(null);
const getInvites = async (groupId) => {
try {
@ -90,13 +91,18 @@ export const ListOfInvites = ({
const handleCancelInvitation = async (address) => {
try {
// TODO translate
const fee = await getFee('CANCEL_GROUP_INVITE');
await show({
message: 'Would you like to perform a CANCEL_GROUP_INVITE transaction?',
message: t('group:question.perform_transaction', {
action: 'CANCEL_GROUP_INVITE',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
setIsLoadingCancelInvite(true);
await new Promise((res, rej) => {
window
.sendMessage('cancelInvitationToGroup', {
@ -107,8 +113,9 @@ export const ListOfInvites = ({
if (!response?.error) {
setInfoSnack({
type: 'success',
message:
'Successfully canceled invitation. It may take a couple of minutes for the changes to propagate',
message: t('group:message.success.invitation_cancellation', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
handlePopoverClose();
@ -126,13 +133,18 @@ export const ListOfInvites = ({
.catch((error) => {
setInfoSnack({
type: 'error',
message: error.message || 'An error occurred',
message:
error.message ||
t('core:message.error.generic', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
rej(error);
});
});
} catch (error) {
console.log(error);
} finally {
setIsLoadingCancelInvite(false);
}
@ -168,13 +180,13 @@ export const ListOfInvites = ({
>
<Box
sx={{
width: '325px',
height: '250px',
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '10px',
height: '250px',
padding: '10px',
width: '325px',
}}
>
<LoadingButton
@ -183,10 +195,13 @@ export const ListOfInvites = ({
variant="contained"
onClick={() => handleCancelInvitation(member?.invitee)}
>
Cancel Invitation
{t('core:action.cancel_invitation', {
postProcess: 'capitalize',
})}
</LoadingButton>
</Box>
</Popover>
<ListItemButton
onClick={(event) => handlePopoverOpen(event, index)}
>
@ -200,6 +215,7 @@ export const ListOfInvites = ({
}
/>
</ListItemAvatar>
<ListItemText primary={member?.name || member?.invitee} />
</ListItemButton>
</ListItem>
@ -211,15 +227,19 @@ export const ListOfInvites = ({
return (
<div>
<p>Invitees list</p>
<p>
{t('group:invitees_list', {
postProcess: 'capitalize',
})}
</p>
<div
style={{
position: 'relative',
height: '500px',
width: '100%',
display: 'flex',
flexDirection: 'column',
flexShrink: 1,
height: '500px',
position: 'relative',
width: '100%',
}}
>
<AutoSizer>

47
src/components/Group/ListOfJoinRequests.tsx
View File

@ -15,11 +15,12 @@ import {
List,
} from 'react-virtualized';
import { getNameInfo } from './Group';
import { getBaseApi, getFee } from '../../background';
import { getFee } from '../../background';
import { LoadingButton } from '@mui/lab';
import { getBaseApiReact } from '../../App';
import { txListAtom } from '../../atoms/global';
import { useAtom } from 'jotai';
import { useTranslation } from 'react-i18next';
export const getMemberInvites = async (groupNumber) => {
const response = await fetch(
@ -59,11 +60,11 @@ export const ListOfJoinRequests = ({
}) => {
const [invites, setInvites] = useState([]);
const [txList, setTxList] = useAtom(txListAtom);
const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
const listRef = useRef();
const listRef = useRef(null);
const [isLoadingAccept, setIsLoadingAccept] = useState(false);
const { t } = useTranslation(['core', 'group']);
const getInvites = async (groupId) => {
try {
@ -93,12 +94,18 @@ export const ListOfJoinRequests = ({
const handleAcceptJoinRequest = async (address) => {
try {
const fee = await getFee('GROUP_INVITE'); // TODO translate
const fee = await getFee('GROUP_INVITE');
await show({
message: 'Would you like to perform a GROUP_INVITE transaction?',
message: t('group:question.perform_transaction', {
action: 'GROUP_INVITE',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
setIsLoadingAccept(true);
await new Promise((res, rej) => {
window
.sendMessage('inviteToGroup', {
@ -111,19 +118,23 @@ export const ListOfJoinRequests = ({
setIsLoadingAccept(false);
setInfoSnack({
type: 'success',
message:
'Successfully accepted join request. It may take a couple of minutes for the changes to propagate',
message: t('group:message.success,group_join', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
handlePopoverClose();
res(response);
setTxList((prev) => [
{
...response,
type: 'join-request-accept',
label: `Accepted join request: awaiting confirmation`,
labelDone: `User successfully joined!`,
label: t('group:message.success,invitation_request', {
postProcess: 'capitalize',
}),
labelDone: t('group:message.success,user_joined', {
postProcess: 'capitalize',
}),
done: false,
groupId,
qortalAddress: address,
@ -144,13 +155,16 @@ export const ListOfJoinRequests = ({
.catch((error) => {
setInfoSnack({
type: 'error',
message: error?.message || 'An error occurred',
message:
error?.message ||
t('core:message.error.generic', { postProcess: 'capitalize' }),
});
setOpenSnack(true);
rej(error);
});
});
} catch (error) {
console.log(error);
} finally {
setIsLoadingAccept(false);
}
@ -158,13 +172,15 @@ export const ListOfJoinRequests = ({
const rowRenderer = ({ index, key, parent, style }) => {
const member = invites[index];
const findJoinRequsetInTxList = txList?.find(
const findJoinRequestInTxList = txList?.find(
(tx) =>
tx?.groupId === groupId &&
tx?.qortalAddress === member?.joiner &&
tx?.type === 'join-request-accept'
);
if (findJoinRequsetInTxList) return null;
if (findJoinRequestInTxList) return null;
return (
<CellMeasurer
key={key}
@ -207,10 +223,11 @@ export const ListOfJoinRequests = ({
variant="contained"
onClick={() => handleAcceptJoinRequest(member?.joiner)}
>
Accept
{t('core:action.accept', { postProcess: 'capitalize' })}
</LoadingButton>
</Box>
</Popover>
<ListItemButton
onClick={(event) => handlePopoverOpen(event, index)}
>
@ -235,7 +252,7 @@ export const ListOfJoinRequests = ({
return (
<div>
<p>Join request list</p>
<p>{t('core:list.join_request', { postProcess: 'capitalize' })}</p>
<div
style={{
position: 'relative',

131
src/components/Group/ListOfMembers.tsx
View File

@ -19,6 +19,7 @@ import {
import { LoadingButton } from '@mui/lab';
import { getFee } from '../../background';
import { getBaseApiReact } from '../../App';
import { useTranslation } from 'react-i18next';
const cache = new CellMeasurerCache({
fixedWidth: true,
@ -41,7 +42,8 @@ const ListOfMembers = ({
const [isLoadingMakeAdmin, setIsLoadingMakeAdmin] = useState(false);
const [isLoadingRemoveAdmin, setIsLoadingRemoveAdmin] = useState(false);
const theme = useTheme();
const listRef = useRef();
const { t } = useTranslation(['core', 'group']);
const listRef = useRef(null);
const handlePopoverOpen = (event, index) => {
setPopoverAnchor(event.currentTarget);
@ -57,7 +59,10 @@ const ListOfMembers = ({
try {
const fee = await getFee('GROUP_KICK');
await show({
message: 'Would you like to perform a GROUP_KICK transaction?',
message: t('group:question.perform_transaction', {
action: 'GROUP_KICK',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
@ -72,8 +77,9 @@ const ListOfMembers = ({
if (!response?.error) {
setInfoSnack({
type: 'success',
message:
'Successfully kicked member from group. It may take a couple of minutes for the changes to propagate',
message: t('group:message.success.group_kick', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
handlePopoverClose();
@ -90,7 +96,9 @@ const ListOfMembers = ({
.catch((error) => {
setInfoSnack({
type: 'error',
message: error.message || 'An error occurred',
message:
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' }),
});
setOpenSnack(true);
rej(error);
@ -104,12 +112,18 @@ const ListOfMembers = ({
};
const handleBan = async (address) => {
try {
const fee = await getFee('GROUP_BAN'); // TODO translate
const fee = await getFee('GROUP_BAN');
await show({
message: 'Would you like to perform a GROUP_BAN transaction?',
message: t('group:question.perform_transaction', {
action: 'GROUP_BAN',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
setIsLoadingBan(true);
await new Promise((res, rej) => {
window
.sendMessage('banFromGroup', {
@ -121,8 +135,9 @@ const ListOfMembers = ({
if (!response?.error) {
setInfoSnack({
type: 'success',
message:
'Successfully banned member from group. It may take a couple of minutes for the changes to propagate',
message: t('group:message.success.group_ban', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
handlePopoverClose();
@ -139,13 +154,16 @@ const ListOfMembers = ({
.catch((error) => {
setInfoSnack({
type: 'error',
message: error.message || 'An error occurred',
message:
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' }),
});
setOpenSnack(true);
rej(error);
});
});
} catch (error) {
console.log(error);
} finally {
setIsLoadingBan(false);
}
@ -155,7 +173,10 @@ const ListOfMembers = ({
try {
const fee = await getFee('ADD_GROUP_ADMIN');
await show({
message: 'Would you like to perform a ADD_GROUP_ADMIN transaction?',
message: t('group:question.perform_transaction', {
action: 'ADD_GROUP_ADMIN',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
setIsLoadingMakeAdmin(true);
@ -169,8 +190,9 @@ const ListOfMembers = ({
if (!response?.error) {
setInfoSnack({
type: 'success',
message:
'Successfully made member an admin. It may take a couple of minutes for the changes to propagate',
message: t('group:message.success.group_member_admin', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
handlePopoverClose();
@ -187,13 +209,16 @@ const ListOfMembers = ({
.catch((error) => {
setInfoSnack({
type: 'error',
message: error.message || 'An error occurred',
message:
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' }),
});
setOpenSnack(true);
rej(error);
});
});
} catch (error) {
console.log(error);
} finally {
setIsLoadingMakeAdmin(false);
}
@ -203,7 +228,10 @@ const ListOfMembers = ({
try {
const fee = await getFee('REMOVE_GROUP_ADMIN');
await show({
message: 'Would you like to perform a REMOVE_GROUP_ADMIN transaction?',
message: t('group:question.perform_transaction', {
action: 'REMOVE_GROUP_ADMIN',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
setIsLoadingRemoveAdmin(true);
@ -217,8 +245,9 @@ const ListOfMembers = ({
if (!response?.error) {
setInfoSnack({
type: 'success',
message:
'Successfully removed member as an admin. It may take a couple of minutes for the changes to propagate',
message: t('group:message.success.group_remove_member', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
handlePopoverClose();
@ -235,13 +264,16 @@ const ListOfMembers = ({
.catch((error) => {
setInfoSnack({
type: 'error',
message: error.message || 'An error occurred',
message:
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' }),
});
setOpenSnack(true);
rej(error);
});
});
} catch (error) {
console.log(error);
} finally {
setIsLoadingRemoveAdmin(false);
}
@ -276,13 +308,13 @@ const ListOfMembers = ({
>
<Box
sx={{
width: '325px',
height: '250px',
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '10px',
height: '250px',
padding: '10px',
width: '325px',
}}
>
{isOwner && (
@ -293,48 +325,49 @@ const ListOfMembers = ({
variant="contained"
onClick={() => handleKick(member?.member)}
>
Kick member from group
{t('group:action.kick_member', {
postProcess: 'capitalize',
})}
</LoadingButton>
<LoadingButton
loading={isLoadingBan}
loadingPosition="start"
variant="contained"
onClick={() => handleBan(member?.member)}
>
Ban member from group
{t('group:action.ban', {
postProcess: 'capitalize',
})}
</LoadingButton>
<LoadingButton
loading={isLoadingMakeAdmin}
loadingPosition="start"
variant="contained"
onClick={() => makeAdmin(member?.member)}
>
Make an admin
{t('group:action.make_admin', {
postProcess: 'capitalize',
})}
</LoadingButton>
<LoadingButton
loading={isLoadingRemoveAdmin}
loadingPosition="start"
variant="contained"
onClick={() => removeAdmin(member?.member)}
>
Remove as admin
{t('group:action.remove_admin', {
postProcess: 'capitalize',
})}
</LoadingButton>
</>
)}
</Box>
</Popover>
<ListItem
key={member?.member}
// secondaryAction={
// <Checkbox
// edge="end"
// onChange={handleToggle(value)}
// checked={checked.indexOf(value) !== -1}
// inputProps={{ 'aria-labelledby': labelId }}
// />
// }
disablePadding
>
<ListItem key={member?.member} disablePadding>
<ListItemButton
onClick={(event) => handlePopoverOpen(event, index)}
>
@ -348,6 +381,7 @@ const ListOfMembers = ({
}
/>
</ListItemAvatar>
<ListItemText
id={''}
primary={member?.name || member?.member}
@ -359,7 +393,9 @@ const ListOfMembers = ({
marginLeft: 'auto',
}}
>
Admin
{t('core:admin', {
postProcess: 'capitalize',
})}
</Typography>
)}
</ListItemButton>
@ -372,28 +408,31 @@ const ListOfMembers = ({
return (
<div>
<p>Member list</p>
<p>
{t('core:list.member', {
postProcess: 'capitalize',
})}
</p>
<div
style={{
position: 'relative',
height: '500px',
width: '100%',
display: 'flex',
flexDirection: 'column',
flexShrink: 1,
height: '500px',
position: 'relative',
width: '100%',
}}
>
<AutoSizer>
{({ height, width }) => (
<List
ref={listRef}
width={width}
deferredMeasurementCache={cache}
height={height}
ref={listRef}
rowCount={members.length}
rowHeight={cache.rowHeight}
rowRenderer={rowRenderer}
// onScroll={handleScroll}
deferredMeasurementCache={cache}
width={width}
/>
)}
</AutoSizer>

44
src/components/Group/ListOfThreadPostsWatched.tsx
View File

@ -1,4 +1,4 @@
import * as React from 'react';
import { useEffect, useState } from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
@ -9,10 +9,12 @@ import { Box, Typography } from '@mui/material';
import { Spacer } from '../../common/Spacer';
import { CustomLoader } from '../../common/CustomLoader';
import VisibilityIcon from '@mui/icons-material/Visibility';
import { useTranslation } from 'react-i18next';
export const ListOfThreadPostsWatched = () => {
const [posts, setPosts] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const { t } = useTranslation(['core', 'group']);
const getPosts = async () => {
try {
@ -42,34 +44,38 @@ export const ListOfThreadPostsWatched = () => {
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred'); // TODO translate
rej(
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' })
);
});
});
} catch (error) {
console.log(error);
} finally {
setLoading(false);
}
};
React.useEffect(() => {
useEffect(() => {
getPosts();
}, []);
return (
<Box
sx={{
width: '100%',
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
}}
>
<Box
sx={{
width: '322px',
display: 'flex',
flexDirection: 'column',
padding: '0px 20px',
width: '322px',
}}
>
<Typography
@ -78,8 +84,12 @@ export const ListOfThreadPostsWatched = () => {
fontWeight: 600,
}}
>
New Thread Posts:
{t('group:thread_posts', {
postProcess: 'capitalize',
})}
:
</Typography>
<Spacer height="10px" />
</Box>
@ -97,9 +107,9 @@ export const ListOfThreadPostsWatched = () => {
{loading && posts.length === 0 && (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
width: '100%',
}}
>
<CustomLoader />
@ -108,11 +118,11 @@ export const ListOfThreadPostsWatched = () => {
{!loading && posts.length === 0 && (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
width: '100%',
}}
>
<Typography
@ -122,7 +132,9 @@ export const ListOfThreadPostsWatched = () => {
color: 'rgba(255, 255, 255, 0.2)',
}}
>
Nothing to display
{t('group:message.generic.no_display', {
postProcess: 'capitalize',
})}
</Typography>
</Box>
)}
@ -130,11 +142,11 @@ export const ListOfThreadPostsWatched = () => {
<List
className="scrollable-container"
sx={{
width: '100%',
maxWidth: 360,
bgcolor: 'background.paper',
maxHeight: '300px',
maxWidth: 360,
overflow: 'auto',
width: '100%',
}}
>
{posts?.map((post) => {

118
src/components/Group/ManageMembers.tsx
View File

@ -1,4 +1,14 @@
import * as React from 'react';
import {
forwardRef,
Fragment,
ReactElement,
Ref,
SyntheticEvent,
useCallback,
useContext,
useEffect,
useState,
} from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import AppBar from '@mui/material/AppBar';
@ -25,6 +35,7 @@ import { Spacer } from '../../common/Spacer';
import InsertLinkIcon from '@mui/icons-material/InsertLink';
import { useSetAtom } from 'jotai';
import { txListAtom } from '../../atoms/global';
import { useTranslation } from 'react-i18next';
function a11yProps(index: number) {
return {
@ -33,37 +44,35 @@ function a11yProps(index: number) {
};
}
const Transition = React.forwardRef(function Transition(
const Transition = forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
children: ReactElement;
},
ref: React.Ref<unknown>
ref: Ref<unknown>
) {
return <Slide direction="up" ref={ref} {...props} />;
});
export const ManageMembers = ({
address,
open,
setOpen,
selectedGroup,
isAdmin,
isOwner,
}) => {
const [membersWithNames, setMembersWithNames] = React.useState([]);
const [tab, setTab] = React.useState('create');
const [value, setValue] = React.useState(0);
const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null);
const [isLoadingMembers, setIsLoadingMembers] = React.useState(false);
const [isLoadingLeave, setIsLoadingLeave] = React.useState(false);
const [groupInfo, setGroupInfo] = React.useState(null);
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
const [membersWithNames, setMembersWithNames] = useState([]);
const [value, setValue] = useState(0);
const [openSnack, setOpenSnack] = useState(false);
const [infoSnack, setInfoSnack] = useState(null);
const [isLoadingMembers, setIsLoadingMembers] = useState(false);
const [isLoadingLeave, setIsLoadingLeave] = useState(false);
const [groupInfo, setGroupInfo] = useState(null);
const handleChange = (event: SyntheticEvent, newValue: number) => {
setValue(newValue);
};
const theme = useTheme();
const { show } = React.useContext(MyContext);
const { t } = useTranslation(['core', 'group']);
const { show } = useContext(MyContext);
const setTxList = useSetAtom(txListAtom);
const handleClose = () => {
@ -75,7 +84,10 @@ export const ManageMembers = ({
setIsLoadingLeave(true);
const fee = await getFee('LEAVE_GROUP');
await show({
message: 'Would you like to perform an LEAVE_GROUP transaction?',
message: t('group:question.perform_transaction', {
action: 'LEAVE_GROUP',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
@ -90,8 +102,14 @@ export const ManageMembers = ({
{
...response,
type: 'leave-group',
label: `Left Group ${selectedGroup?.groupName}: awaiting confirmation`,
labelDone: `Left Group ${selectedGroup?.groupName}: success!`,
label: t('group:message.success.group_leave_name', {
group_name: selectedGroup?.groupName,
postProcess: 'capitalize',
}),
labelDone: t('group:message.success.group_leave_label', {
group_name: selectedGroup?.groupName,
postProcess: 'capitalize',
}),
done: false,
groupId: selectedGroup?.groupId,
},
@ -100,8 +118,9 @@ export const ManageMembers = ({
res(response);
setInfoSnack({
type: 'success',
message:
'Successfully requested to leave group. It may take a couple of minutes for the changes to propagate',
message: t('group:message.success.group_leave', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
return;
@ -109,7 +128,10 @@ export const ManageMembers = ({
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred'); // TODO translate
rej(
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' })
);
});
});
} catch (error) {
@ -119,7 +141,7 @@ export const ManageMembers = ({
}
};
const getMembersWithNames = React.useCallback(async (groupId) => {
const getMembersWithNames = useCallback(async (groupId) => {
try {
setIsLoadingMembers(true);
const res = await getGroupMembers(groupId);
@ -139,6 +161,7 @@ export const ManageMembers = ({
console.log(error);
}
};
const getGroupInfo = async (groupId) => {
try {
const response = await fetch(`${getBaseApiReact()}/groups/${groupId}`);
@ -149,7 +172,7 @@ export const ManageMembers = ({
}
};
React.useEffect(() => {
useEffect(() => {
if (selectedGroup?.groupId) {
getMembers(selectedGroup?.groupId);
getGroupInfo(selectedGroup?.groupId);
@ -160,7 +183,7 @@ export const ManageMembers = ({
setValue(4);
};
React.useEffect(() => {
useEffect(() => {
subscribeToEvent('openGroupJoinRequest', openGroupJoinRequestFunc);
return () => {
@ -169,7 +192,7 @@ export const ManageMembers = ({
}, []);
return (
<React.Fragment>
<Fragment>
<Dialog
fullScreen
open={open}
@ -184,18 +207,20 @@ export const ManageMembers = ({
>
<Toolbar>
<Typography sx={{ ml: 2, flex: 1 }} variant="h4" component="div">
Manage Members
{t('group:action.manage_members', { postProcess: 'capitalize' })}
</Typography>
<IconButton
edge="start"
color="inherit"
onClick={handleClose}
aria-label="close"
color="inherit"
edge="start"
onClick={handleClose}
>
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
<Box
sx={{
bgcolor: theme.palette.background.default,
@ -284,12 +309,19 @@ export const ManageMembers = ({
}}
>
<Box>
<Typography>GroupId: {groupInfo?.groupId}</Typography>
<Typography>GroupName: {groupInfo?.groupName}</Typography>
<Typography>
{t('group:group.id', { postProcess: 'capitalize' })}:{' '}
{groupInfo?.groupId}
</Typography>
<Typography>
Number of members: {groupInfo?.memberCount}
{t('group:group.name', { postProcess: 'capitalize' })}:{' '}
{groupInfo?.groupName}
</Typography>
<Typography>
{t('group:group.member_number', { postProcess: 'capitalize' })}:{' '}
{groupInfo?.memberCount}
</Typography>
<ButtonBase
@ -301,7 +333,11 @@ export const ManageMembers = ({
await navigator.clipboard.writeText(link);
}}
>
<InsertLinkIcon /> <Typography>Join Group Link</Typography>
<InsertLinkIcon />
<Typography>
{t('group:join_link', { postProcess: 'capitalize' })}
</Typography>
</ButtonBase>
</Box>
@ -315,10 +351,11 @@ export const ManageMembers = ({
variant="contained"
onClick={handleLeaveGroup}
>
Leave Group
{t('group:action.leave_group', { postProcess: 'capitalize' })}
</LoadingButton>
)}
</Card>
{value === 0 && (
<Box
sx={{
@ -331,7 +368,7 @@ export const ManageMembers = ({
variant="contained"
onClick={() => getMembersWithNames(selectedGroup?.groupId)}
>
Load members with names
{t('group:action.load_members', { postProcess: 'capitalize' })}
</Button>
<Spacer height="10px" />
@ -347,6 +384,7 @@ export const ManageMembers = ({
/>
</Box>
)}
{value === 1 && (
<Box
sx={{
@ -426,10 +464,12 @@ export const ManageMembers = ({
<LoadingSnackbar
open={isLoadingMembers}
info={{
message: 'Loading member list with names... please wait.',
message: t('group:message.generic.loading_members', {
postProcess: 'capitalize',
}),
}}
/>
</Dialog>
</React.Fragment>
</Fragment>
);
};

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

@ -11,12 +11,12 @@ import MailIcon from '@mui/icons-material/Mail';
import MailOutlineIcon from '@mui/icons-material/MailOutline';
import { executeEvent } from '../../utils/events';
import { CustomLoader } from '../../common/CustomLoader';
import { mailsAtom, qMailLastEnteredTimestampAtom } from '../../atoms/global';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import MarkEmailUnreadIcon from '@mui/icons-material/MarkEmailUnread';
import { useAtom } from 'jotai';
import { useTranslation } from 'react-i18next';
export const isLessThanOneWeekOld = (timestamp) => {
// Current time in milliseconds
@ -54,6 +54,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
const [loading, setLoading] = useState(true);
const theme = useTheme();
const { t } = useTranslation(['core', 'group']);
const getMails = useCallback(async () => {
try {
@ -89,7 +90,10 @@ export const QMailMessages = ({ userName, userAddress }) => {
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred'); // TODO translate
rej(
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' })
);
});
});
} catch (error) {
@ -129,20 +133,20 @@ export const QMailMessages = ({ userName, userAddress }) => {
return (
<Box
sx={{
width: '100%',
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
}}
>
<ButtonBase
sx={{
width: '322px',
display: 'flex',
flexDirection: 'row',
gap: '10px',
padding: '0px 20px',
justifyContent: 'flex-start',
padding: '0px 20px',
width: '322px',
}}
onClick={() => setIsExpanded((prev) => !prev)}
>
@ -151,8 +155,9 @@ export const QMailMessages = ({ userName, userAddress }) => {
fontSize: '1rem',
}}
>
Latest Q-Mails
{t('group:latest_mails', { postProcess: 'capitalize' })}
</Typography>
<MarkEmailUnreadIcon
sx={{
color: anyUnread
@ -195,9 +200,9 @@ export const QMailMessages = ({ userName, userAddress }) => {
{loading && mails.length === 0 && (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
width: '100%',
}}
>
<CustomLoader />
@ -206,11 +211,11 @@ export const QMailMessages = ({ userName, userAddress }) => {
{!loading && mails.length === 0 && (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
width: '100%',
}}
>
<Typography
@ -220,7 +225,9 @@ export const QMailMessages = ({ userName, userAddress }) => {
color: theme.palette.primary,
}}
>
Nothing to display
{t('group:message.generic.no_display', {
postProcess: 'capitalize',
})}
</Typography>
</Box>
)}

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

@ -20,7 +20,6 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import {
Box,
Button,
ButtonBase,
DialogActions,
DialogContent,
DialogContentText,
@ -32,7 +31,6 @@ import {
useTheme,
} from '@mui/material';
import { enabledDevModeAtom } from '../../atoms/global';
import ThemeManager from '../Theme/ThemeManager';
import { useAtom } from 'jotai';
import { decryptStoredWallet } from '../../utils/decryptWallet';
@ -41,6 +39,7 @@ import PhraseWallet from '../../utils/generateWallet/phrase-wallet';
import { walletVersion } from '../../background';
import Base58 from '../../deps/Base58';
import { MyContext } from '../../App';
import { useTranslation } from 'react-i18next';
const LocalNodeSwitch = styled(Switch)(({ theme }) => ({
padding: 8,
@ -87,8 +86,8 @@ const Transition = forwardRef(function Transition(
export const Settings = ({ open, setOpen, rawWallet }) => {
const [checked, setChecked] = useState(false);
const [isEnabledDevMode, setIsEnabledDevMode] = useAtom(enabledDevModeAtom);
const theme = useTheme();
const { t } = useTranslation(['core', 'group']);
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked);
@ -103,7 +102,7 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
if (response?.error) {
console.error('Error adding user settings:', response.error);
} else {
console.log('User settings added successfully'); // TODO translate
console.log('User settings added successfully');
}
})
.catch((error) => {
@ -134,7 +133,10 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
rej(response.error);
})
.catch((error) => {
rej(error.message || 'An error occurred');
rej(
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' })
);
});
});
} catch (error) {
@ -157,7 +159,9 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
<AppBar sx={{ position: 'relative' }}>
<Toolbar>
<Typography sx={{ ml: 2, flex: 1 }} variant="h4" component="div">
General Settings
{t('core:general_settings', {
postProcess: 'capitalize',
})}
</Typography>
<IconButton
@ -173,13 +177,13 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
<Box
sx={{
flexGrow: 1,
overflowY: 'auto',
color: theme.palette.text.primary,
padding: '20px',
flexDirection: 'column',
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
gap: '20px',
overflowY: 'auto',
padding: '20px',
}}
>
<FormControlLabel
@ -189,7 +193,9 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
control={
<LocalNodeSwitch checked={checked} onChange={handleChange} />
}
label="Disable all push notifications"
label={t('group:action.disable_push_notifications', {
postProcess: 'capitalize',
})}
/>
{window?.electronAPI && (
<FormControlLabel
@ -205,7 +211,9 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
}}
/>
}
label="Enable dev mode"
label={t('group:action.enable_dev_mode', {
postProcess: 'capitalize',
})}
/>
)}
{isEnabledDevMode && <ExportPrivateKey rawWallet={rawWallet} />}
@ -220,13 +228,16 @@ const ExportPrivateKey = ({ rawWallet }) => {
const [password, setPassword] = useState('');
const [privateKey, setPrivateKey] = useState('');
const [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const { setOpenSnackGlobal, setInfoSnackCustom } = useContext(MyContext);
const { t } = useTranslation(['core', 'group']);
const exportPrivateKeyFunc = async () => {
try {
setInfoSnackCustom({
type: 'info',
message: 'Decrypting wallet...',
message: t('group:message.generic.descrypt_wallet', {
postProcess: 'capitalize',
}),
});
setOpenSnackGlobal(true);
@ -247,13 +258,19 @@ const ExportPrivateKey = ({ rawWallet }) => {
setInfoSnackCustom({
type: 'error',
message: error?.message
? `Error decrypting wallet: ${error?.message}`
: 'Error decrypting wallet',
? t('group:message.error.decrypt_wallet', {
errorMessage: error?.message,
postProcess: 'capitalize',
})
: t('group:message.error.descrypt_wallet', {
postProcess: 'capitalize',
}),
});
setOpenSnackGlobal(true);
}
};
return (
<>
<Button
@ -263,14 +280,22 @@ const ExportPrivateKey = ({ rawWallet }) => {
}}
onClick={() => setIsOpen(true)}
>
Export private key
{t('group:action.export_private_key', {
postProcess: 'capitalize',
})}
</Button>
<Dialog
open={isOpen}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">Export password</DialogTitle>
<DialogTitle id="alert-dialog-title">
{t('group:action.export_password', {
postProcess: 'capitalize',
})}
</DialogTitle>
<DialogContent
sx={{
flexDirection: 'column',
@ -279,9 +304,13 @@ const ExportPrivateKey = ({ rawWallet }) => {
}}
>
<DialogContentText id="alert-dialog-description">
Keep your private key in a secure place. Do not share!
{t('group:message.generic.secure_place', {
postProcess: 'capitalize',
})}
</DialogContentText>
<Spacer height="20px" />
<TextField
autoFocus
type="password"
@ -296,17 +325,22 @@ const ExportPrivateKey = ({ rawWallet }) => {
navigator.clipboard.writeText(privateKey);
setInfoSnackCustom({
type: 'success',
message: 'Copied privated key',
message: t('group:message.generic.private_key_copied', {
postProcess: 'capitalize',
}),
});
setOpenSnackGlobal(true);
}}
>
{`Copy private key `}
{t('group:action.copy_private_key', {
postProcess: 'capitalize',
})}{' '}
<ContentCopyIcon color="primary" />
</Button>
)}
</DialogContent>
<DialogActions>
<Button
variant="contained"
@ -316,10 +350,15 @@ const ExportPrivateKey = ({ rawWallet }) => {
setPrivateKey('');
}}
>
Cancel
{t('group:action.cancel', {
postProcess: 'capitalize',
})}
</Button>
<Button variant="contained" onClick={exportPrivateKeyFunc}>
Decrypt
{t('group:action.decrypt', {
postProcess: 'capitalize',
})}
</Button>
</DialogActions>
</Dialog>

22
src/components/Group/ThingsToDoInitial.tsx
View File

@ -1,4 +1,4 @@
import * as React from 'react';
import { useEffect, useMemo, useState } from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
@ -17,27 +17,27 @@ export const ThingsToDoInitial = ({
balance,
userInfo,
}) => {
const [checked1, setChecked1] = React.useState(false);
const [checked2, setChecked2] = React.useState(false);
const [checked1, setChecked1] = useState(false);
const [checked2, setChecked2] = useState(false);
const { t } = useTranslation(['core', 'tutorial']);
const theme = useTheme();
React.useEffect(() => {
useEffect(() => {
if (balance && +balance >= 6) {
setChecked1(true);
}
}, [balance]);
React.useEffect(() => {
useEffect(() => {
if (name) setChecked2(true);
}, [name]);
const isLoaded = React.useMemo(() => {
const isLoaded = useMemo(() => {
if (userInfo !== null) return true;
return false;
}, [userInfo]);
const hasDoneNameAndBalanceAndIsLoaded = React.useMemo(() => {
const hasDoneNameAndBalanceAndIsLoaded = useMemo(() => {
if (isLoaded && checked1 && checked2) return true;
return false;
}, [checked1, isLoaded, checked2]);
@ -55,18 +55,18 @@ export const ThingsToDoInitial = ({
return (
<Box
sx={{
width: '100%',
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
}}
>
<Box
sx={{
width: '322px',
display: 'flex',
flexDirection: 'column',
padding: '0px 20px',
width: '322px',
}}
>
<Typography
@ -125,6 +125,7 @@ export const ThingsToDoInitial = ({
postProcess: 'capitalize',
})}
/>
<ListItemIcon
sx={{
justifyContent: 'flex-end',
@ -144,6 +145,7 @@ export const ThingsToDoInitial = ({
</ListItemIcon>
</ListItemButton>
</ListItem>
<ListItem
sx={{
marginBottom: '20px',

54
src/components/Group/UserListOfInvites.tsx
View File

@ -22,6 +22,7 @@ import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmail
import { Spacer } from '../../common/Spacer';
import { useSetAtom } from 'jotai';
import { txListAtom } from '../../atoms/global';
import { useTranslation } from 'react-i18next';
const cache = new CellMeasurerCache({
fixedWidth: true,
@ -60,9 +61,10 @@ export const UserListOfInvites = ({
const [invites, setInvites] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(false);
const theme = useTheme();
const { t } = useTranslation(['core', 'group']);
const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
const listRef = useRef();
const listRef = useRef(null);
const getRequests = async () => {
try {
@ -94,9 +96,13 @@ export const UserListOfInvites = ({
const handleJoinGroup = async (groupId, groupName) => {
try {
const fee = await getFee('JOIN_GROUP'); // TODO translate
const fee = await getFee('JOIN_GROUP');
await show({
message: 'Would you like to perform an JOIN_GROUP transaction?',
message: t('group:question.perform_transaction', {
action: 'JOIN_GROUP',
postProcess: 'capitalize',
}),
publishFee: fee.fee + ' QORT',
});
@ -123,8 +129,9 @@ export const UserListOfInvites = ({
res(response);
setInfoSnack({
type: 'success',
message:
'Successfully requested to join group. It may take a couple of minutes for the changes to propagate',
message: t('group:message.success.group_join', {
postProcess: 'capitalize',
}),
});
setOpenSnack(true);
handlePopoverClose();
@ -140,13 +147,16 @@ export const UserListOfInvites = ({
.catch((error) => {
setInfoSnack({
type: 'error',
message: error.message || 'An error occurred',
message:
error.message ||
t('core:message.error.generic', { postProcess: 'capitalize' }),
});
setOpenSnack(true);
rej(error);
});
});
} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}
@ -182,16 +192,22 @@ export const UserListOfInvites = ({
>
<Box
sx={{
width: '325px',
height: '250px',
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '10px',
height: '250px',
padding: '10px',
width: '325px',
}}
>
<Typography>Join {invite?.groupName}</Typography>
<Typography>
{t('core:action.join', {
postProcess: 'capitalize',
})}{' '}
{invite?.groupName}
</Typography>
<LoadingButton
loading={isLoading}
loadingPosition="start"
@ -200,10 +216,13 @@ export const UserListOfInvites = ({
handleJoinGroup(invite?.groupId, invite?.groupName)
}
>
Join group
{t('group:action.join_group', {
postProcess: 'capitalize',
})}
</LoadingButton>
</Box>
</Popover>
<ListItemButton
onClick={(event) => handlePopoverOpen(event, index)}
>
@ -221,7 +240,9 @@ export const UserListOfInvites = ({
}}
/>
)}
<Spacer width="15px" />
<ListItemText
primary={invite?.groupName}
secondary={invite?.description}
@ -242,14 +263,19 @@ export const UserListOfInvites = ({
flexGrow: 1,
}}
>
<p>Invite list</p>
<p>
{t('core:list.invite', {
postProcess: 'capitalize',
})}
</p>
<div
style={{
position: 'relative',
width: '100%',
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
position: 'relative',
width: '100%',
}}
>
<AutoSizer>

23
src/components/Group/WalletsAppWrapper.tsx
View File

@ -1,5 +1,5 @@
import { Box, ButtonBase, Divider, Typography, useTheme } from '@mui/material';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Box, ButtonBase, Divider, Typography, useTheme } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import AppViewerContainer from '../Apps/AppViewerContainer';
import {
@ -19,7 +19,6 @@ export const WalletsAppWrapper = () => {
const [navigationController, setNavigationController] = useAtom(
navigationControllerAtom
);
const [selectedTab, setSelectedTab] = useState({
tabId: '5558589',
name: 'Q-Wallets',
@ -60,17 +59,17 @@ export const WalletsAppWrapper = () => {
{isOpen && (
<Box
sx={{
position: 'fixed',
height: '100vh',
width: '100vw',
backgroundColor: theme.palette.background.paper, // TODO: set color theme
zIndex: 100,
bottom: 0,
right: 0,
overflow: 'hidden',
backgroundColor: theme.palette.background.paper,
borderTopLeftRadius: '10px',
borderTopRightRadius: '10px',
bottom: 0,
boxShadow: 4,
height: '100vh',
overflow: 'hidden',
position: 'fixed',
right: 0,
width: '100vw',
zIndex: 100,
}}
>
<Box
@ -85,11 +84,11 @@ export const WalletsAppWrapper = () => {
display: 'flex',
alignItems: 'center',
padding: '5px',
justifyContent: 'space-between',
}}
>
<Typography>Q-Wallets</Typography>
<ButtonBase onClick={handleClose}>
<CloseIcon
sx={{
@ -108,6 +107,7 @@ export const WalletsAppWrapper = () => {
ref={iframeRef}
skipAuth={true}
/>
<AppsNavBarParent>
<AppsNavBarLeft
sx={{
@ -126,6 +126,7 @@ export const WalletsAppWrapper = () => {
>
<NavBack />
</ButtonBase>
<ButtonBase
onClick={() => {
if (selectedTab?.refreshFunc) {

1
src/components/Group/useBlockUsers.tsx
View File

@ -164,6 +164,7 @@ export const useBlockedAddresses = () => {
});
});
}
if (address) {
await new Promise((res, rej) => {
window

2
src/components/GroupAvatar.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useCallback, useContext, useEffect, useState } from 'react';
import Logo2 from '../assets/svgs/Logo2.svg';
import { MyContext, getArbitraryEndpointReact, getBaseApiReact } from '../App';
import {

2
src/components/Home/NewUsersCTA.tsx
View File

@ -36,7 +36,7 @@ export const NewUsersCTA = ({ balance }) => {
textAlign: 'center',
}}
>
{t('core:new_user', { postProcess: 'capitalize' })}
{t('core:question.new_user', { postProcess: 'capitalize' })}
</Typography>
<Spacer height="20px" />

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

@ -168,6 +168,7 @@ export const QortPrice = () => {
)}
</Box>
</Tooltip>
<Box
sx={{
display: 'flex',
@ -198,6 +199,7 @@ export const QortPrice = () => {
</Typography>
)}
</Box>
<Tooltip
title={
<span style={{ fontSize: '14px', fontWeight: 700 }}>

19
src/components/Loader.tsx
View File

@ -1,9 +1,9 @@
import React from 'react'
import { Box, CircularProgress } from "@mui/material";
import { Box, CircularProgress } from '@mui/material';
export const Loader = () => {
return (
<Box sx={{
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
@ -11,13 +11,14 @@ export const Loader = () => {
height: '100%',
position: 'fixed',
top: '0px',
left:'0px',
left: '0px',
right: '0px',
bottom: '0px',
zIndex: 10,
background: 'rgba(0, 0, 0, 0.4)'
}}>
<CircularProgress color="success" size={25} />
background: 'rgba(0, 0, 0, 0.4)',
}}
>
<CircularProgress color="success" size={25} />
</Box>
)
}
);
};

2
src/components/MainAvatar.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import Logo2 from '../assets/svgs/Logo2.svg';
import { MyContext, getArbitraryEndpointReact, getBaseApiReact } from '../App';
import {

34
src/components/RegisterName.tsx
View File

@ -1,33 +1,22 @@
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { useCallback, 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,
useTheme,
} from '@mui/material';
import { Label } from './Group/AddGroup';
import { Spacer } from '../common/Spacer';
import { LoadingButton } from '@mui/lab';
import { getBaseApiReact, MyContext } from '../App';
import { getBaseApiReact } from '../App';
import { getFee } from '../background';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
import { subscribeToEvent, unsubscribeFromEvent } from '../utils/events';
@ -43,6 +32,7 @@ enum Availability {
AVAILABLE = 'available',
NOT_AVAILABLE = 'not-available',
}
export const RegisterName = ({
setOpenSnack,
setInfoSnack,
@ -77,7 +67,6 @@ export const RegisterName = ({
}
} catch (error) {
console.error(error);
} finally {
}
};
// Debounce logic
@ -195,21 +184,22 @@ export const RegisterName = ({
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{'Register name'}</DialogTitle>
<DialogContent>
<Box
sx={{
width: '400px',
maxWidth: '90vw',
height: '500px',
maxHeight: '90vh',
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '10px',
height: '500px',
maxHeight: '90vh',
maxWidth: '90vw',
padding: '10px',
width: '400px',
}}
>
<Label>Choose a name</Label>
<Label>Choose a name</Label> // TODO: translate
<TextField
autoComplete="off"
autoFocus
@ -237,6 +227,7 @@ export const RegisterName = ({
requires a {nameFee} QORT fee
</Typography>
</Box>
<Spacer height="10px" />
</>
)}
@ -307,6 +298,7 @@ export const RegisterName = ({
</ListItemIcon>
<ListItemText primary="Publish data to Qortal: anything from apps to videos. Fully decentralized!" />
</ListItem>
<ListItem disablePadding>
<ListItemIcon>
<RadioButtonCheckedIcon
@ -320,6 +312,7 @@ export const RegisterName = ({
</List>
</Box>
</DialogContent>
<DialogActions>
<Button
disabled={isLoadingRegisterName}
@ -331,6 +324,7 @@ export const RegisterName = ({
>
Close
</Button>
<Button
disabled={
!registerNameValue.trim() ||

13
src/styles/CoreSyncStatus.css
View File

@ -8,15 +8,14 @@
text-align: left;
}
.tooltip .bottom {
.tooltip .core-panel {
border-radius: 8px;
border: 1px solid var(--black);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
font-size: 13px;
font-weight: normal;
max-width: 250px;
min-width: 225px;
width: max-content;
opacity: 0;
padding: 10px 10px;
position: absolute;
@ -27,23 +26,23 @@
z-index: 99999999;
}
.tooltip[data-theme='light'] .bottom {
.tooltip[data-theme='light'] .core-panel {
background-color: #f1f1f1;
color: #000000;
}
.tooltip[data-theme='dark'] .bottom {
.tooltip[data-theme='dark'] .core-panel {
background-color: var(--bg-2);
color: var(--black);
}
.tooltip:hover .bottom {
.tooltip:hover .core-panel {
visibility: visible;
opacity: 1;
z-index: 100;
}
.tooltip .bottom i {
.tooltip .core-panel i {
bottom: 100%;
height: 12px;
left: 50%;

2
src/styles/theme-common.ts
View File

@ -56,6 +56,7 @@ const commonThemeOptions = {
xl: 1536,
},
},
components: {
MuiButton: {
styleOverrides: {
@ -72,6 +73,7 @@ const commonThemeOptions = {
disableRipple: true,
},
},
MuiModal: {
styleOverrides: {
root: {

7
src/styles/theme-dark.ts
View File

@ -48,6 +48,7 @@ export const darkThemeOptions: ThemeOptions = {
},
},
},
MuiCssBaseline: {
styleOverrides: (theme) => ({
':root': {
@ -61,13 +62,16 @@ export const darkThemeOptions: ThemeOptions = {
'--background-paper': theme.palette.background.paper,
'--background-surface': theme.palette.background.surface,
},
'*, *::before, *::after': {
boxSizing: 'border-box',
},
html: {
padding: 0,
margin: 0,
},
body: {
padding: 0,
margin: 0,
@ -100,6 +104,7 @@ export const darkThemeOptions: ThemeOptions = {
},
}),
},
MuiIcon: {
defaultProps: {
style: {
@ -108,6 +113,7 @@ export const darkThemeOptions: ThemeOptions = {
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
@ -115,6 +121,7 @@ export const darkThemeOptions: ThemeOptions = {
},
},
},
MuiPopover: {
styleOverrides: {
paper: {

4
src/styles/theme-light.ts
View File

@ -32,6 +32,7 @@ export const lightThemeOptions: ThemeOptions = {
unread: 'rgb(66, 151, 226)',
},
},
components: {
MuiCard: {
styleOverrides: {
@ -48,6 +49,7 @@ export const lightThemeOptions: ThemeOptions = {
},
},
},
MuiCssBaseline: {
styleOverrides: (theme) => ({
':root': {
@ -113,6 +115,7 @@ export const lightThemeOptions: ThemeOptions = {
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
@ -120,6 +123,7 @@ export const lightThemeOptions: ThemeOptions = {
},
},
},
MuiPopover: {
styleOverrides: {
paper: {