From 77024c0d00e54ba787dbc9f9b2cabed4ae421dee Mon Sep 17 00:00:00 2001 From: SpaghettiOverload Date: Mon, 10 Oct 2022 13:58:47 +0300 Subject: [PATCH 01/52] Captcha behaviour adjustement --- .../Faucet/components/Form/index.tsx | 26 +++++++------------ 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/src/containers/Faucet/components/Form/index.tsx b/src/containers/Faucet/components/Form/index.tsx index 80ac03e..c86defc 100644 --- a/src/containers/Faucet/components/Form/index.tsx +++ b/src/containers/Faucet/components/Form/index.tsx @@ -16,18 +16,16 @@ const Form = () => { const captchaRef = useRef(null) const [address, setAddress] = useState('') const [amount, setAmount] = useState('') - const [showTransferBtn, setShowTransferBtn] = useState(false) + const [validatedCaptcha, setValidatedCaptcha] = useState(false) const { setWarning } = useNotifications() const maxAmountAllowed: number = 100 const { handleModal } = useModal() - const validInput = () => { + const validData = () => { - if ( - Number(amount) > maxAmountAllowed || Number(amount) <= 0 || - !amount || !address - ) { + if (!validatedCaptcha || Number(amount) > maxAmountAllowed || Number(amount) <= 0 || + !amount || !address) { return false } @@ -48,19 +46,13 @@ const Form = () => { const checkCaptcha = async () => { const token = captchaRef.current.getValue() - const validatedInput = validInput() - if (token && validatedInput) { - setShowTransferBtn(true) + if (token) { + setValidatedCaptcha(true) return } - if (!validatedInput) { - setWarning('Please fill the required fields first') - } - - captchaRef.current.reset() - setShowTransferBtn(false) + setValidatedCaptcha(false) } const handleReceiveTokens = async () => { @@ -176,9 +168,9 @@ const Form = () => { justifyContent: 'center', flex: 1 }} - onChange={() => checkCaptcha()} theme="dark" ref={captchaRef} + onChange={checkCaptcha} sitekey={import.meta.env.VITE_CAPTCHA_SITE_KEY} /> @@ -190,7 +182,7 @@ const Form = () => { width: '50%' })} onClick={handleReceiveTokens} - disabled={!showTransferBtn || !validInput()} + disabled={!validData()} > Receive Tokens From 201527638db9b73ef10406d2eb8a734263b6caf1 Mon Sep 17 00:00:00 2001 From: stefanpetkov90 Date: Mon, 10 Oct 2022 15:57:46 +0300 Subject: [PATCH 02/52] CUDOS-1728 & CUDOS-1324 --- src/components/Layout/Footer.tsx | 108 +++---- src/components/Layout/Header.tsx | 96 ++++-- src/components/Layout/NetworkInfo.tsx | 2 + src/components/Layout/UserInfo.tsx | 2 +- src/components/Layout/index.tsx | 2 +- src/components/Layout/styles.ts | 8 +- .../LatestActivity/LatestActivity.tsx | 16 +- .../NetworkStatistics/NetworkStatistics.tsx | 132 +++++---- .../Dashboard/WalletInformation/index.tsx | 276 ++++++++++-------- src/containers/Dashboard/index.tsx | 51 +++- src/store/userTransactions.ts | 2 +- src/utils/projectUtils.ts | 16 +- 12 files changed, 426 insertions(+), 285 deletions(-) diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index b7d2d55..ef56242 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -1,4 +1,4 @@ -import { Box, Grid, Typography } from '@mui/material' +import { Box, Container, Grid, Typography } from '@mui/material' import moment from 'moment' import TwitterIcon from 'assets/vectors/twitter.svg?component' import TelegramIcon from 'assets/vectors/telegram.svg?component' @@ -11,7 +11,10 @@ import SpotifyIcon from 'assets/vectors/spotify.svg?component' import { styles } from './styles' const linksLeft = [ - { text: 'Terms & Conditions', url: 'https://www.cudos.org/terms-and-conditions/' }, + { + text: 'Terms & Conditions', + url: 'https://www.cudos.org/terms-and-conditions/' + }, { text: 'Privacy Policy', url: 'https://www.cudos.org/privacy-policy' }, { text: 'cudos.org', url: 'https://www.cudos.org/' }, { text: `License © 2018 - ${moment().year()}`, url: 'https://www.cudos.org/' } @@ -25,59 +28,66 @@ const linksRight = [ { icon: , url: 'https://medium.com/cudos' }, { icon: , url: 'https://www.youtube.com/c/CUDOS' }, { icon: , url: 'https://www.facebook.com/cudos.org' }, - { icon: , url: 'https://open.spotify.com/show/2lZuBXJ270g7taK06tnK35' } + { + icon: , + url: 'https://open.spotify.com/show/2lZuBXJ270g7taK06tnK35' + } ] const Footer = () => { return ( - - {linksLeft.map((link) => ( - ({ - padding: `0 0.5rem`, - '&:not(:last-child)': { - borderRight: `1px solid ${palette.text.secondary}` - }, - cursor: 'pointer', - color: palette.text.secondary, - '&:hover': { - color: palette.primary.main, - textShadow: `0 0 3px ${palette.primary.main}` - } - })} - onClick={() => window.open(link.url, '_blank')?.focus()} + + + + {linksLeft.map((link) => ( + ({ + padding: `0 0.5rem`, + '&:not(:last-child)': { + borderRight: `1px solid ${palette.text.secondary}` + }, + cursor: 'pointer', + color: palette.text.secondary, + '&:hover': { + color: palette.primary.main, + textShadow: `0 0 3px ${palette.primary.main}` + } + })} + onClick={() => window.open(link.url, '_blank')?.focus()} + > + + {link.text} + + + ))} + + - - {link.text} - - - ))} - - - {linksRight.map((link) => ( - window.open(link.url, '_blank')?.focus()} - sx={({ palette }) => ({ - cursor: 'pointer', - color: palette.text.secondary, - '&:hover': { - color: palette.primary.main - } - })} - > - {link.icon} - - ))} - + {linksRight.map((link) => ( + window.open(link.url, '_blank')?.focus()} + sx={({ palette }) => ({ + cursor: 'pointer', + color: palette.text.secondary, + '&:hover': { + color: palette.primary.main + } + })} + > + {link.icon} + + ))} + + + ) } diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx index 4ddf31b..a570605 100644 --- a/src/components/Layout/Header.tsx +++ b/src/components/Layout/Header.tsx @@ -1,4 +1,11 @@ -import { Box, Typography } from '@mui/material' +import { + Box, + Container, + Grid, + Typography, + useMediaQuery, + useTheme +} from '@mui/material' import { useSelector, useDispatch } from 'react-redux' import { useLocation } from 'react-router-dom' import { RootState } from 'store' @@ -15,6 +22,12 @@ const Header = () => { const dispatch = useDispatch() const location = useLocation() + const themeBreakpoint = useTheme() + const isSmallScreen = useMediaQuery( + themeBreakpoint.breakpoints.down('md' || 'xs') + ) + const isBigScreen = useMediaQuery(themeBreakpoint.breakpoints.up('lg')) + const switchTheme = () => { dispatch( updateSettings({ @@ -25,34 +38,65 @@ const Header = () => { return ( - logo - {location.pathname === '/' ? null : ( - + + logo + {location.pathname === '/' ? null : ( - window.open(import.meta.env.VITE_BRIDGE_URL, '_blank')?.focus() - } + sx={{ + display: 'flex', + justifyContent: 'flex-end', + flex: '1' + }} > - - - Cudos Bridge - - + + + + + window + .open(import.meta.env.VITE_BRIDGE_URL, '_blank') + ?.focus() + } + > + + + Cudos Bridge + + + + + + + + + + + + - - - - )} + )} + ) } diff --git a/src/components/Layout/NetworkInfo.tsx b/src/components/Layout/NetworkInfo.tsx index 8686f58..1ebfcea 100644 --- a/src/components/Layout/NetworkInfo.tsx +++ b/src/components/Layout/NetworkInfo.tsx @@ -1,5 +1,6 @@ import { Box, Typography } from '@mui/material' import OnlineStatus from 'assets/vectors/online-status.svg' +import theme from 'theme' import { styles } from './styles' @@ -10,6 +11,7 @@ const NetworkInfo = () => { sx={{ fontSize: '14px', fontWeight: '500', + whiteSpace: 'nowrap', display: 'flex', alignItems: 'center' }} diff --git a/src/components/Layout/UserInfo.tsx b/src/components/Layout/UserInfo.tsx index 51d244f..9f81c3e 100644 --- a/src/components/Layout/UserInfo.tsx +++ b/src/components/Layout/UserInfo.tsx @@ -92,7 +92,7 @@ const UserInfo = () => { - + diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index bbbc2c4..ec83ee2 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -26,9 +26,9 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => { overflow="auto" > {children} +