diff --git a/public/locales/en/core.json b/public/locales/en/core.json index bfc8b94..b9ea602 100644 --- a/public/locales/en/core.json +++ b/public/locales/en/core.json @@ -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" } diff --git a/public/locales/en/tutorial.json b/public/locales/en/tutorial.json index 2b632b3..f022388 100644 --- a/public/locales/en/tutorial.json +++ b/public/locales/en/tutorial.json @@ -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" } } diff --git a/public/locales/it/core.json b/public/locales/it/core.json index 673062f..db7e120 100644 --- a/public/locales/it/core.json +++ b/public/locales/it/core.json @@ -6,7 +6,8 @@ "description": "descrizione", "edit": "modifica", "error": "si รจ verificato un errore", - "loading": "loading...", + "loading": "caricamento...", "save": "salva", + "supply": "offerta", "title": "titolo" } diff --git a/src/components/Explore/Explore.tsx b/src/components/Explore/Explore.tsx index 61037d7..4ec6488 100644 --- a/src/components/Explore/Explore.tsx +++ b/src/components/Explore/Explore.tsx @@ -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 ( { - executeEvent("addTab", { - data: { service: "APP", name: "q-trade" }, - }); - executeEvent("open-apps-mode", {}); - }} + executeEvent('addTab', { + data: { service: 'APP', name: 'q-trade' }, + }); + executeEvent('open-apps-mode', {}); + }} > - Trade QORT + {t('tutorial:initial.trade_qort', { postProcess: 'capitalize' })} + { + setDesktopViewMode('apps'); }} - onClick={()=> { - setDesktopViewMode('apps') - - }} > - See Apps + {t('tutorial:initial.see_apps', { postProcess: 'capitalize' })} + { - executeEvent("openGroupMessage", { - from: "0" , - }); - }} + executeEvent('openGroupMessage', { + from: '0', + }); + }} > - General Chat + {t('tutorial:initial.general_chat', { postProcess: 'capitalize' })} { - executeEvent("openWalletsApp", { - - }); - }} + executeEvent('openWalletsApp', {}); + }} > - Wallets + {t('core:wallet', { count: 100, postProcess: 'capitalize' })} diff --git a/src/components/Group/HomeDesktop.tsx b/src/components/Group/HomeDesktop.tsx index d83f774..0c6ca85 100644 --- a/src/components/Group/HomeDesktop.tsx +++ b/src/components/Group/HomeDesktop.tsx @@ -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 ( + 15 ? "16px" : "20px", - padding: "10px", + fontSize: userInfo?.name?.length > 15 ? '16px' : '20px', + padding: '10px', }} > - Welcome + {t('core:welcome', { postProcess: 'capitalize' })} {userInfo?.name ? ( {`, ${userInfo?.name}`} ) : null} + + {!isLoadingGroups && ( item?.groupId !== "0").length !== 0 + groups?.filter((item) => item?.groupId !== '0').length !== 0 } /> - - {desktopViewMode === "home" && ( + + {desktopViewMode === 'home' && ( <> {/* */} - {hasDoneNameAndBalanceAndIsLoaded && ( - <> - - - - - - - - )} - + {hasDoneNameAndBalanceAndIsLoaded && ( + <> + + + + + + + + + )} )} )} - + {!isLoadingGroups && ( <> - - - {" "} - - Explore - {" "} - - - {!hasDoneNameAndBalanceAndIsLoaded && ( - - )} - - {hasDoneNameAndBalanceAndIsLoaded && ( - + + {' '} + + {t('tutorial:initial.explore', { postProcess: 'capitalize' })} + {' '} + + - )} - - - - - + {!hasDoneNameAndBalanceAndIsLoaded && } + + {hasDoneNameAndBalanceAndIsLoaded && } + + + + + - )} diff --git a/src/components/Home/QortPrice.tsx b/src/components/Home/QortPrice.tsx index f4586fb..2f118c1 100644 --- a/src/components/Home/QortPrice.tsx +++ b/src/components/Home/QortPrice.tsx @@ -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 ( + Based on the latest 20 trades } 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, }, }, }} > - Price + {t('core:price', { postProcess: 'capitalize' })} + {!ltcPerQort ? ( ) : ( {ltcPerQort} LTC/QORT @@ -168,28 +170,28 @@ export const QortPrice = () => { - Supply + {t('core:supply', { postProcess: 'capitalize' })} + {!supply ? ( ) : ( {supply} QORT @@ -197,60 +199,58 @@ export const QortPrice = () => { )} - {lastBlock?.timestamp && formatDate(lastBlock?.timestamp)} - - } - placement="bottom" - arrow - sx={{ fontSize: "24" }} - slotProps={{ - tooltip: { - sx: { - color: "#ffffff", - backgroundColor: "#444444", - }, + title={ + + {lastBlock?.timestamp && formatDate(lastBlock?.timestamp)} + + } + 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, }, - }} - > - - + - Last height + {t('core:last_height', { postProcess: 'capitalize' })} + {!lastBlock?.height ? ( ) : ( {lastBlock?.height} )} - - + );