Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-27 21:37:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

i18n for welcome page

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-21 21:02:10 +02:00
parent 7f97f2972a
commit 59573a43ab
6 changed files with 299 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/locales/en/core.json
View File

@ -6,6 +6,12 @@
"description": "description",
"edit": "edit",
"error": "an error occurred",
"last_height": "last height",
"price": "price",
"save": "save",
"title": "title"
"supply": "supply",
"title": "title",
"wallet": "wallet",
"wallet_many": "wallets",
"welcome": "welcome"
}

6
public/locales/en/tutorial.json
View File

@ -11,7 +11,11 @@
},
"initial": {
"6_qort": "Have at least 6 QORT in your wallet",
"explore": "explore",
"general_chat": "general chat",
"getting_started": "getting started",
"register_name": "register a name"
"register_name": "register a name",
"see_apps": "see apps",
"trade_qort": "trade QORT"
}
}

3
public/locales/it/core.json
View File

@ -6,7 +6,8 @@
"description": "descrizione",
"edit": "modifica",
"error": "si è verificato un errore",
"loading": "loading...",
"loading": "caricamento...",
"save": "salva",
"supply": "offerta",
"title": "titolo"
}

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

@ -1,129 +1,130 @@
import { Box, ButtonBase, Typography } from "@mui/material";
import React from "react";
import ChatIcon from "@mui/icons-material/Chat";
import qTradeLogo from "../../assets/Icons/q-trade-logo.webp";
import AppsIcon from "@mui/icons-material/Apps";
import { executeEvent } from "../../utils/events";
import { Box, ButtonBase, Typography, useTheme } from '@mui/material';
import ChatIcon from '@mui/icons-material/Chat';
import qTradeLogo from '../../assets/Icons/q-trade-logo.webp';
import AppsIcon from '@mui/icons-material/Apps';
import { executeEvent } from '../../utils/events';
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
import { useTranslation } from 'react-i18next';
export const Explore = ({ setDesktopViewMode }) => {
const theme = useTheme();
const { t } = useTranslation(['core', 'tutorial']);
export const Explore = ({setDesktopViewMode}) => {
return (
<Box
sx={{
display: "flex",
gap: "20px",
flexWrap: "wrap",
display: 'flex',
gap: '20px',
flexWrap: 'wrap',
}}
>
<ButtonBase
sx={{
"&:hover": { backgroundColor: "secondary.main" },
transition: "all 0.1s ease-in-out",
padding: "5px",
borderRadius: "5px",
gap: "5px",
'&:hover': { backgroundColor: theme.palette.background.paper },
borderRadius: '5px',
gap: '5px',
padding: '5px',
transition: 'all 0.1s ease-in-out',
}}
onClick={async () => {
executeEvent("addTab", {
data: { service: "APP", name: "q-trade" },
});
executeEvent("open-apps-mode", {});
}}
executeEvent('addTab', {
data: { service: 'APP', name: 'q-trade' },
});
executeEvent('open-apps-mode', {});
}}
>
<img
style={{
borderRadius: "50%",
height: '30px'
borderRadius: '50%',
height: '30px',
}}
src={qTradeLogo}
/>
<Typography
sx={{
fontSize: "1rem",
fontSize: '1rem',
}}
>
Trade QORT
{t('tutorial:initial.trade_qort', { postProcess: 'capitalize' })}
</Typography>
</ButtonBase>
<ButtonBase
sx={{
"&:hover": { backgroundColor: "secondary.main" },
transition: "all 0.1s ease-in-out",
padding: "5px",
borderRadius: "5px",
gap: "5px",
'&:hover': { backgroundColor: theme.palette.background.paper },
borderRadius: '5px',
gap: '5px',
padding: '5px',
transition: 'all 0.1s ease-in-out',
}}
onClick={() => {
setDesktopViewMode('apps');
}}
onClick={()=> {
setDesktopViewMode('apps')
}}
>
<AppsIcon
sx={{
color: "white",
color: theme.palette.text.primary,
}}
/>
<Typography
sx={{
fontSize: "1rem",
fontSize: '1rem',
}}
>
See Apps
{t('tutorial:initial.see_apps', { postProcess: 'capitalize' })}
</Typography>
</ButtonBase>
<ButtonBase
sx={{
"&:hover": { backgroundColor: "secondary.main" },
transition: "all 0.1s ease-in-out",
padding: "5px",
borderRadius: "5px",
gap: "5px",
'&:hover': { backgroundColor: theme.palette.background.paper },
borderRadius: '5px',
gap: '5px',
padding: '5px',
transition: 'all 0.1s ease-in-out',
}}
onClick={async () => {
executeEvent("openGroupMessage", {
from: "0" ,
});
}}
executeEvent('openGroupMessage', {
from: '0',
});
}}
>
<ChatIcon
sx={{
color: "white",
color: theme.palette.text.primary,
}}
/>
<Typography
sx={{
fontSize: "1rem",
fontSize: '1rem',
}}
>
General Chat
{t('tutorial:initial.general_chat', { postProcess: 'capitalize' })}
</Typography>
</ButtonBase>
<ButtonBase
sx={{
"&:hover": { backgroundColor: "secondary.main" },
transition: "all 0.1s ease-in-out",
padding: "5px",
borderRadius: "5px",
gap: "5px",
'&:hover': { backgroundColor: theme.palette.background.paper },
transition: 'all 0.1s ease-in-out',
padding: '5px',
borderRadius: '5px',
gap: '5px',
}}
onClick={async () => {
executeEvent("openWalletsApp", {
});
}}
executeEvent('openWalletsApp', {});
}}
>
<AccountBalanceWalletIcon
sx={{
color: "white",
color: theme.palette.text.primary,
}}
/>
<Typography
sx={{
fontSize: "1rem",
fontSize: '1rem',
}}
>
Wallets
{t('core:wallet', { count: 100, postProcess: 'capitalize' })}
</Typography>
</ButtonBase>
</Box>

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

@ -1,16 +1,16 @@
import { Box, Button, Divider, Typography } from "@mui/material";
import React from "react";
import { Spacer } from "../../common/Spacer";
import { ListOfThreadPostsWatched } from "./ListOfThreadPostsWatched";
import { ThingsToDoInitial } from "./ThingsToDoInitial";
import { GroupJoinRequests } from "./GroupJoinRequests";
import { GroupInvites } from "./GroupInvites";
import RefreshIcon from "@mui/icons-material/Refresh";
import { ListOfGroupPromotions } from "./ListOfGroupPromotions";
import { QortPrice } from "../Home/QortPrice";
import ExploreIcon from "@mui/icons-material/Explore";
import { Explore } from "../Explore/Explore";
import { NewUsersCTA } from "../Home/NewUsersCTA";
import { Box, Divider, Typography, useTheme } from '@mui/material';
import React from 'react';
import { Spacer } from '../../common/Spacer';
import { ThingsToDoInitial } from './ThingsToDoInitial';
import { GroupJoinRequests } from './GroupJoinRequests';
import { GroupInvites } from './GroupInvites';
import { ListOfGroupPromotions } from './ListOfGroupPromotions';
import { QortPrice } from '../Home/QortPrice';
import ExploreIcon from '@mui/icons-material/Explore';
import { Explore } from '../Explore/Explore';
import { NewUsersCTA } from '../Home/NewUsersCTA';
import { useTranslation } from 'react-i18next';
export const HomeDesktop = ({
refreshHomeDataFunc,
myAddress,
@ -30,93 +30,97 @@ export const HomeDesktop = ({
}) => {
const [checked1, setChecked1] = React.useState(false);
const [checked2, setChecked2] = React.useState(false);
React.useEffect(() => {
if (balance && +balance >= 6) {
setChecked1(true);
}
}, [balance]);
React.useEffect(() => {
if (name) setChecked2(true);
}, [name]);
const isLoaded = React.useMemo(()=> {
if(userInfo !== null) return true
return false
}, [ userInfo])
const hasDoneNameAndBalanceAndIsLoaded = React.useMemo(()=> {
if(isLoaded && checked1 && checked2) return true
return false
}, [checked1, isLoaded, checked2])
const { t } = useTranslation(['core']);
const theme = useTheme();
React.useEffect(() => {
if (balance && +balance >= 6) {
setChecked1(true);
}
}, [balance]);
React.useEffect(() => {
if (name) setChecked2(true);
}, [name]);
const isLoaded = React.useMemo(() => {
if (userInfo !== null) return true;
return false;
}, [userInfo]);
const hasDoneNameAndBalanceAndIsLoaded = React.useMemo(() => {
if (isLoaded && checked1 && checked2) return true;
return false;
}, [checked1, isLoaded, checked2]);
return (
<Box
sx={{
display: desktopViewMode === "home" ? "flex" : "none",
width: "100%",
flexDirection: "column",
height: "100%",
overflow: "auto",
alignItems: "center",
alignItems: 'center',
display: desktopViewMode === 'home' ? 'flex' : 'none',
flexDirection: 'column',
height: '100%',
overflow: 'auto',
width: '100%',
}}
>
<Spacer height="20px" />
<Box
sx={{
display: "flex",
width: "100%",
flexDirection: "column",
height: "100%",
alignItems: "flex-start",
maxWidth: "1036px",
alignItems: 'flex-start',
display: 'flex',
flexDirection: 'column',
height: '100%',
maxWidth: '1036px',
width: '100%',
}}
>
<Typography
sx={{
color: "rgba(255, 255, 255, 1)",
color: theme.palette.text.primary,
fontWeight: 400,
fontSize: userInfo?.name?.length > 15 ? "16px" : "20px",
padding: "10px",
fontSize: userInfo?.name?.length > 15 ? '16px' : '20px',
padding: '10px',
}}
>
Welcome
{t('core:welcome', { postProcess: 'capitalize' })}
{userInfo?.name ? (
<span
style={{
fontStyle: "italic",
fontStyle: 'italic',
}}
>{`, ${userInfo?.name}`}</span>
) : null}
</Typography>
<Spacer height="30px" />
{!isLoadingGroups && (
<Box
sx={{
display: "flex",
gap: "20px",
flexWrap: "wrap",
width: "100%",
justifyContent: "center",
display: 'flex',
flexWrap: 'wrap',
gap: '20px',
justifyContent: 'center',
width: '100%',
}}
>
<Box
sx={{
display: "flex",
gap: "20px",
flexWrap: "wrap",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
flexWrap: 'wrap',
gap: '20px',
}}
>
<Box
sx={{
width: "330px",
display: "flex",
alignItems: "center",
justifyContent: "center",
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
width: '330px',
}}
>
<ThingsToDoInitial
@ -125,12 +129,12 @@ export const HomeDesktop = ({
name={userInfo?.name}
userInfo={userInfo}
hasGroups={
groups?.filter((item) => item?.groupId !== "0").length !== 0
groups?.filter((item) => item?.groupId !== '0').length !== 0
}
/>
</Box>
{desktopViewMode === "home" && (
{desktopViewMode === 'home' && (
<>
{/* <Box sx={{
width: '330px',
@ -140,105 +144,101 @@ export const HomeDesktop = ({
}}>
<ListOfThreadPostsWatched />
</Box> */}
{hasDoneNameAndBalanceAndIsLoaded && (
<>
<Box
sx={{
width: "330px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<GroupJoinRequests
setGroupSection={setGroupSection}
setSelectedGroup={setSelectedGroup}
getTimestampEnterChat={getTimestampEnterChat}
setOpenManageMembers={setOpenManageMembers}
myAddress={myAddress}
groups={groups}
setMobileViewMode={setMobileViewMode}
setDesktopViewMode={setDesktopViewMode}
/>
</Box>
<Box
sx={{
width: "330px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<GroupInvites
setOpenAddGroup={setOpenAddGroup}
myAddress={myAddress}
groups={groups}
setMobileViewMode={setMobileViewMode}
/>
</Box>
</>
)}
{hasDoneNameAndBalanceAndIsLoaded && (
<>
<Box
sx={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
width: '330px',
}}
>
<GroupJoinRequests
setGroupSection={setGroupSection}
setSelectedGroup={setSelectedGroup}
getTimestampEnterChat={getTimestampEnterChat}
setOpenManageMembers={setOpenManageMembers}
myAddress={myAddress}
groups={groups}
setMobileViewMode={setMobileViewMode}
setDesktopViewMode={setDesktopViewMode}
/>
</Box>
<Box
sx={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
width: '330px',
}}
>
<GroupInvites
setOpenAddGroup={setOpenAddGroup}
myAddress={myAddress}
groups={groups}
setMobileViewMode={setMobileViewMode}
/>
</Box>
</>
)}
</>
)}
</Box>
<QortPrice />
</Box>
)}
{!isLoadingGroups && (
<>
<Spacer height="60px" />
<Divider
color="secondary"
sx={{
width: "100%",
}}
>
<Box
sx={{
display: "flex",
gap: "10px",
alignItems: "center",
}}
>
<ExploreIcon
<Divider
color="secondary"
sx={{
color: "white",
}}
/>{" "}
<Typography
sx={{
fontSize: "1rem",
width: '100%',
}}
>
Explore
</Typography>{" "}
</Box>
</Divider>
{!hasDoneNameAndBalanceAndIsLoaded && (
<Spacer height="40px" />
)}
<Box
sx={{
display: "flex",
gap: "20px",
flexWrap: "wrap",
width: "100%",
justifyContent: "center",
}}
>
{hasDoneNameAndBalanceAndIsLoaded && (
<ListOfGroupPromotions />
<Box
sx={{
alignItems: 'center',
display: 'flex',
gap: '10px',
}}
>
<ExploreIcon
sx={{
ccolor: theme.palette.text.primary,
}}
/>{' '}
<Typography
sx={{
fontSize: '1rem',
}}
>
{t('tutorial:initial.explore', { postProcess: 'capitalize' })}
</Typography>{' '}
</Box>
</Divider>
)}
<Explore setDesktopViewMode={setDesktopViewMode} />
</Box>
<NewUsersCTA balance={balance} />
{!hasDoneNameAndBalanceAndIsLoaded && <Spacer height="40px" />}
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
gap: '20px',
justifyContent: 'center',
width: '100%',
}}
>
{hasDoneNameAndBalanceAndIsLoaded && <ListOfGroupPromotions />}
<Explore setDesktopViewMode={setDesktopViewMode} />
</Box>
<NewUsersCTA balance={balance} />
</>
)}
</Box>
<Spacer height="26px" />

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

@ -1,8 +1,9 @@
import React, { useCallback, useEffect, useState } from "react";
import { getBaseApiReact } from "../../App";
import { Box, Tooltip, Typography } from "@mui/material";
import { BarSpinner } from "../../common/Spinners/BarSpinner/BarSpinner";
import { formatDate } from "../../utils/time";
import { useCallback, useEffect, useState } from 'react';
import { getBaseApiReact } from '../../App';
import { Box, Tooltip, Typography, useTheme } from '@mui/material';
import { BarSpinner } from '../../common/Spinners/BarSpinner/BarSpinner';
import { formatDate } from '../../utils/time';
import { useTranslation } from 'react-i18next';
function getAverageLtcPerQort(trades) {
let totalQort = 0;
@ -38,6 +39,8 @@ export const QortPrice = () => {
const [supply, setSupply] = useState(null);
const [lastBlock, setLastBlock] = useState(null);
const [loading, setLoading] = useState(true);
const { t } = useTranslation(['core', 'tutorial']);
const theme = useTheme();
const getPrice = useCallback(async () => {
try {
@ -101,64 +104,63 @@ export const QortPrice = () => {
return () => clearInterval(interval);
}, [getPrice]);
return (
<Box
sx={{
display: "flex",
gap: "20px",
flexWrap: "wrap",
flexDirection: "column",
width: "322px",
display: 'flex',
gap: '20px',
flexWrap: 'wrap',
flexDirection: 'column',
width: '322px',
}}
>
<Tooltip
title={
<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>
<span style={{ color: 'white', fontSize: '14px', fontWeight: 700 }}>
Based on the latest 20 trades
</span>
}
placement="bottom"
arrow
sx={{ fontSize: "24" }}
sx={{ fontSize: '24' }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
},
},
arrow: {
sx: {
color: "#444444",
color: theme.palette.text.primary,
},
},
}}
>
<Box
sx={{
width: "322px",
display: "flex",
flexDirection: "row",
gap: "10px",
justifyContent: "space-between",
display: 'flex',
flexDirection: 'row',
gap: '10px',
justifyContent: 'space-between',
width: '322px',
}}
>
<Typography
sx={{
fontSize: "1rem",
fontWeight: "bold",
fontSize: '1rem',
fontWeight: 'bold',
}}
>
Price
{t('core:price', { postProcess: 'capitalize' })}
</Typography>
{!ltcPerQort ? (
<BarSpinner width="16px" color="white" />
) : (
<Typography
sx={{
fontSize: "1rem",
fontSize: '1rem',
}}
>
{ltcPerQort} LTC/QORT
@ -168,28 +170,28 @@ export const QortPrice = () => {
</Tooltip>
<Box
sx={{
width: "322px",
display: "flex",
flexDirection: "row",
gap: "10px",
justifyContent: "space-between",
display: 'flex',
flexDirection: 'row',
gap: '10px',
justifyContent: 'space-between',
width: '322px',
}}
>
<Typography
sx={{
fontSize: "1rem",
fontWeight: "bold",
fontSize: '1rem',
fontWeight: 'bold',
}}
>
Supply
{t('core:supply', { postProcess: 'capitalize' })}
</Typography>
{!supply ? (
<BarSpinner width="16px" color="white" />
) : (
<Typography
sx={{
fontSize: "1rem",
fontSize: '1rem',
}}
>
{supply} QORT
@ -197,60 +199,58 @@ export const QortPrice = () => {
)}
</Box>
<Tooltip
title={
<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>
{lastBlock?.timestamp && formatDate(lastBlock?.timestamp)}
</span>
}
placement="bottom"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
title={
<span style={{ color: 'white', fontSize: '14px', fontWeight: 700 }}>
{lastBlock?.timestamp && formatDate(lastBlock?.timestamp)}
</span>
}
placement="bottom"
arrow
sx={{ fontSize: '24' }}
slotProps={{
tooltip: {
sx: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
},
arrow: {
sx: {
color: "#444444",
},
},
arrow: {
sx: {
color: theme.palette.text.primary,
},
}}
>
<Box
sx={{
width: "322px",
display: "flex",
flexDirection: "row",
gap: "10px",
justifyContent: "space-between",
},
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
gap: '10px',
justifyContent: 'space-between',
width: '322px',
}}
>
<Typography
sx={{
fontSize: "1rem",
fontWeight: "bold",
fontSize: '1rem',
fontWeight: 'bold',
}}
>
Last height
{t('core:last_height', { postProcess: 'capitalize' })}
</Typography>
{!lastBlock?.height ? (
<BarSpinner width="16px" color="white" />
) : (
<Typography
sx={{
fontSize: "1rem",
fontSize: '1rem',
}}
>
{lastBlock?.height}
</Typography>
)}
</Box>
</Box>
</Tooltip>
</Box>
);