Merge pull request #201 from pastelnetwork/feature/improvement-langua…

…ge-and-ui-of-tickets-page improvement language and UI of tickets page
pastelnetwork · Aug 16, 2023 · 5ed1f35 · 5ed1f35
2 parents 30cb213 + e6f8185
commit 5ed1f35
Show file tree

Hide file tree

Showing 184 changed files with 3,904 additions and 2,181 deletions.
diff --git a/.env.example b/.env.example
@@ -6,3 +6,4 @@ REACT_APP_EXPLORER_DEFAULT_CURRENCY_NAME=PSL
 REACT_APP_EXPLORER_TEST_CURRENCY_NAME=LSP
 REACT_APP_EXPLORER_PASTEL_BURN_ADDRESS=tPpasteLBurnAddressXXXXXXXXXXX3wy7u
 REACT_APP_EXPLORER_OPENNODE_API_URL=https://opennode-fastapi-testnet.pastel.network
+REACT_APP_EXPLORER_HIGHLIGHT_PROJECT_ID=xdnox0e0
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@babel/preset-env": "7.14.1",
     "@date-io/core": "1.3.13",
     "@date-io/date-fns": "1.3.13",
+    "@highlight-run/react": "1.1.11",
     "@loadable/component": "5.15.2",
     "@material-ui/core": "4.11.4",
     "@material-ui/icons": "4.11.2",
@@ -45,6 +46,8 @@
     "echarts-for-react": "3.0.1",
     "file-saver": "2.0.5",
     "fzstd": "0.1.0",
+    "gsap": "3.12.2",
+    "highlight.run": "4.3.4",
     "html-react-parser": "3.0.4",
     "html-to-image": "1.6.2",
     "i18next": "22.4.10",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import DateFnsUtils from '@date-io/date-fns';
+import { H } from 'highlight.run';
 
 import { ThemeProvider } from 'styled-components/macro';
 import { create } from 'jss';
@@ -33,11 +34,26 @@ import { themeLight, themeDark } from './theme';
 import Routes from './routes/Routes';
 import * as Styles from './App.styles';
 
+import './global.styles.css';
+
 const jss = create({
   ...jssPreset(),
   insertionPoint: document.getElementById('jss-insertion-point') as HTMLElement,
 });
 
+H.init(process.env.REACT_APP_EXPLORER_HIGHLIGHT_PROJECT_ID, {
+  tracingOrigins: true,
+  networkRecording: {
+    enabled: true,
+    recordHeadersAndBody: true,
+    urlBlocklist: [
+      // insert full or partial urls that you don't want to record here
+      // Out of the box, Highlight will not record these URLs (they can be safely removed):
+      'https://fonts.googleapis.com',
+    ],
+  },
+});
+
 const App: React.FC = () => {
   const dispatch = useDispatch();
   const [succeed, setSucceed] = useState<boolean>(false);

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -8,8 +8,8 @@ interface AlertComponentProps {
   isOpen: boolean;
   severity?: AlertProps['severity'];
   autoHideDuration?: number;
-  message?: string;
-  title?: string;
+  message?: React.ReactNode;
+  title?: React.ReactNode;
   outsideClickClose?: boolean;
   onClose?: () => void;
 }

diff --git a/src/components/Charts/DoughnutChart/DoughnutChart.tsx b/src/components/Charts/DoughnutChart/DoughnutChart.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactECharts from 'echarts-for-react';
 import { Typography, Grid } from '@material-ui/core';
+import parse from 'html-react-parser';
 
 import { translate } from '@utils/helpers/i18n';
 import { TChartParams } from '@utils/types/IStatistics';
@@ -24,8 +25,8 @@ type TChartDataProps = {
 
 interface DoughnutChartProps {
   data: TChartDataProps | null;
-  title?: string;
-  innerTitle?: string;
+  title?: string | React.ReactNode;
+  innerTitle?: React.ReactNode;
   innerSubtitle?: string | number;
   totalSuperNodes?: number;
   link?: string;
@@ -103,7 +104,7 @@ const DoughnutChart: React.FC<DoughnutChartProps> = ({
           <Styles.StakingWrapper>
             {totalSuperNodes ? `${((51.84 / totalSuperNodes) * 100).toFixed(2)}%` : '--'}
             <Styles.StakingTitle>
-              {translate('components.charts.doughnutChart.stakingAPR')}
+              {parse(translate('components.charts.doughnutChart.stakingAPR'))}
             </Styles.StakingTitle>
           </Styles.StakingWrapper>
         </Styles.ChartWrapper>

diff --git a/src/components/ChooseCluster/ChooseCluster.tsx b/src/components/ChooseCluster/ChooseCluster.tsx
@@ -1,5 +1,6 @@
 import { memo, FC, useCallback, MouseEvent, useMemo } from 'react';
 import { Drawer, Button, Tooltip } from '@material-ui/core';
+import parse from 'html-react-parser';
 
 import { useLocation, useHistory } from 'react-router-dom';
 import { makeStyles } from '@material-ui/styles';
@@ -143,7 +144,9 @@ const ChooseCluster: FC<IProps> = ({ setApiHosting, url: apiURL }) => {
           <Button type="button" className={classes.close} onClick={handleClusterClose}>
             ×
           </Button>
-          <h1 className={classes.title}>{translate('components.chooseCluster.chooseACluster')}</h1>
+          <h1 className={classes.title}>
+            {parse(translate('components.chooseCluster.chooseACluster'))}
+          </h1>
           {data.map(({ id, name, value, api }) => {
             if (!api) {
               return null;
@@ -159,7 +162,7 @@ const ChooseCluster: FC<IProps> = ({ setApiHosting, url: apiURL }) => {
                 variant="outlined"
                 className={currentCluster.value === value ? 'active' : ''}
               >
-                <span className={classes.itemTitle}>{name}:</span>
+                <span className={classes.itemTitle}>{parse(name)}:</span>
                 <span className={classes.itemTitle}>{api}</span>
               </Styles.ButtonStyle>
             );

diff --git a/src/components/DateTimePicker/DateTimePicker.tsx b/src/components/DateTimePicker/DateTimePicker.tsx
@@ -3,6 +3,7 @@ import DatePicker from 'react-datepicker';
 import DateRangeIcon from '@material-ui/icons/DateRange';
 import differenceInDays from 'date-fns/differenceInDays';
 import subDays from 'date-fns/subDays';
+import parse from 'html-react-parser';
 
 import { translate } from '@utils/helpers/i18n';
 import UseOnClickOutside from '@hooks/useOnClickOutside';
@@ -116,15 +117,15 @@ const DateTimePicker: React.FC<IDateTimePickerProps> = ({ onApply, defaultDateRa
               <DatePicker {...options} />
             </Styles.DatePicker>
             <Styles.PredefinedWrapper>
-              <p>{translate('components.dateTimePicker.predefinedDates')}</p>
+              <p>{parse(translate('components.dateTimePicker.predefinedDates'))}</p>
               <ul>
                 {predefinedList.map(item => (
                   <li
                     key={item.value}
                     className={`${selectedPredefined === item.value ? 'active' : ''}`}
                   >
                     <button type="button" onClick={() => handlePredefinedClick(item.value)}>
-                      {item.name}
+                      {parse(item.name)}
                     </button>
                   </li>
                 ))}
@@ -133,18 +134,20 @@ const DateTimePicker: React.FC<IDateTimePickerProps> = ({ onApply, defaultDateRa
           </Styles.DatePickerContent>
           <Styles.Footer>
             <Styles.CancelButton onClick={handleCloseDatePicker}>
-              {translate('components.dateTimePicker.cancel')}
+              {parse(translate('components.dateTimePicker.cancel'))}
             </Styles.CancelButton>
             <Styles.SelectedDay>
-              <span>{translate('components.dateTimePicker.selected')}</span>:{' '}
+              <span>{parse(translate('components.dateTimePicker.selected'))}</span>:{' '}
               {endDate && startDate
-                ? `${getDifferenceInDays(startDate.valueOf(), endDate.valueOf())} ${translate(
-                    'components.dateTimePicker.days',
-                  )}`
-                : `1 ${translate('components.dateTimePicker.day')}`}
+                ? parse(
+                    `${getDifferenceInDays(startDate.valueOf(), endDate.valueOf())} ${translate(
+                      'components.dateTimePicker.days',
+                    )}`,
+                  )
+                : parse(`1 ${translate('components.dateTimePicker.day')}`)}
             </Styles.SelectedDay>
             <Styles.ContinueButton onClick={handleContinueClick}>
-              {translate('components.dateTimePicker.continue')}
+              {parse(translate('components.dateTimePicker.continue'))}
             </Styles.ContinueButton>
           </Styles.Footer>
         </Styles.DatePickerPopper>

diff --git a/src/components/Dropdown/Dropdown.styles.ts b/src/components/Dropdown/Dropdown.styles.ts
@@ -47,4 +47,5 @@ export const Label = styled.div`
   margin-right: 10px;
   color: ${props => props.theme.dropdown.color};
   font-weight: 500;
+  white-space: nowrap;
 `;
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -6,7 +6,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import ListItemText from '@material-ui/core/ListItemText';
 import Input from '@material-ui/core/Input';
 
-import { translate } from '@utils/helpers/i18n';
+import { translateDropdown } from '@utils/helpers/i18n';
 
 import * as Styles from './Dropdown.styles';
 
@@ -112,15 +112,15 @@ export const TagDropdown: React.FC<ITagDropdown> = ({
           }
           const items = options
             .filter(o => o.value && (selected as string[]).indexOf(o.value.toString()) !== -1)
-            .map(o => translate(o.name));
+            .map(o => translateDropdown(o.name));
           return items.join(', ');
         }}
         MenuProps={MenuProps}
       >
         {options.map(option => (
           <MenuItem key={option.value} value={option.value}>
             <Checkbox checked={values.indexOf(option.value.toString()) > -1} />
-            <ListItemText primary={translate(option.name)} />
+            <ListItemText primary={translateDropdown(option.name)} />
           </MenuItem>
         ))}
       </Select>

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -3,6 +3,7 @@ import getYear from 'date-fns/getYear';
 import { NavLink } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import parse from 'html-react-parser';
 
 import Social from '@components/Social/Social';
 import { currentDate } from '@utils/helpers/date/date';
@@ -33,21 +34,35 @@ const Footer: React.FC = () => {
             <Box>
               <SidebarStyles.BrandLogo
                 src={isDarkMode ? PastelLogoWhite : PastelLogo}
-                alt={t('components.footer.pastelLogo.message') || ''}
+                alt={
+                  t('components.footer.pastelLogo.message', {
+                    defaultValue: '',
+                  }) || ''
+                }
               />
             </Box>
           </SidebarStyles.Brand>
         </Hidden>
         <Styles.FooterMenuWrapper>
           {footerMenu.map(menu => (
             <Styles.FooterMenuBlock key={menu.id}>
-              <Styles.FooterMenuTitle>{t(`${menu.title}.message`)}</Styles.FooterMenuTitle>
+              <Styles.FooterMenuTitle>
+                {parse(
+                  t(`${menu.title}.message`, {
+                    defaultValue: '<span class="skeleton-text"></span>',
+                  }),
+                )}
+              </Styles.FooterMenuTitle>
               {menu.children.length ? (
                 <Styles.FooterMenuList>
                   {menu.children.map(item => (
                     <Styles.FooterMenuItem key={item.path}>
                       <Styles.FooterMenuLink href={item.path} target={item.target}>
-                        {t(`${item.name}.message`)}
+                        {parse(
+                          t(`${item.name}.message`, {
+                            defaultValue: '<span class="skeleton-text"></span>',
+                          }),
+                        )}
                       </Styles.FooterMenuLink>
                     </Styles.FooterMenuItem>
                   ))}
@@ -59,7 +74,12 @@ const Footer: React.FC = () => {
         <Hidden xsDown implementation="css">
           <Styles.GridStyle item>
             <Styles.Typography>
-              {t('components.footer.copyright.message', { year: getYear(currentDate) })}
+              {parse(
+                t('components.footer.copyright.message', {
+                  year: getYear(currentDate),
+                  defaultValue: '<span class="skeleton-text"></span>',
+                }),
+              )}
             </Styles.Typography>
           </Styles.GridStyle>
         </Hidden>
@@ -70,7 +90,11 @@ const Footer: React.FC = () => {
             <Box>
               <SidebarStyles.BrandLogo
                 src={isDarkMode ? PastelLogoWhite : PastelLogo}
-                alt={t('components.footer.pastelLogo.message') || ''}
+                alt={
+                  t('components.footer.pastelLogo.message', {
+                    defaultValue: '',
+                  }) || ''
+                }
               />
             </Box>
           </SidebarStyles.Brand>
@@ -80,7 +104,12 @@ const Footer: React.FC = () => {
       <Hidden smUp implementation="js">
         <Styles.GridStyle item>
           <Styles.Typography>
-            {t('components.footer.copyright.message', { year: getYear(currentDate) })}
+            {parse(
+              t('components.footer.copyright.message', {
+                year: getYear(currentDate),
+                defaultValue: '<span class="skeleton-text"></span>',
+              }),
+            )}
           </Styles.Typography>
         </Styles.GridStyle>
       </Hidden>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -4,7 +4,7 @@ import { Grid } from '@material-ui/core';
 import * as Styles from './Header.styles';
 
 interface HeaderProps {
-  title: string;
+  title: string | React.ReactNode;
   className?: string;
 }
 

diff --git a/src/components/HistoricalStatisticsLayout/HistoricalStatisticsLayout.tsx b/src/components/HistoricalStatisticsLayout/HistoricalStatisticsLayout.tsx
@@ -4,18 +4,19 @@ import { makeStyles } from '@material-ui/styles';
 import { useHistory } from 'react-router-dom';
 import { Skeleton } from '@material-ui/lab';
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
+import parse from 'html-react-parser';
 // application
 import { Dropdown, OptionsProps } from '@components/Dropdown/Dropdown';
 import { statistics } from '@utils/constants/statistics';
-import { translate } from '@utils/helpers/i18n';
+import { translate, translateDropdown } from '@utils/helpers/i18n';
 import { getCurrencyName } from '@utils/appInfo';
 
 import * as Styles from './HistoricalStatisticsLayout.styles';
 
 interface IProps {
   children: ReactNode;
   currentBgColor: string;
-  title?: string;
+  title?: string | ReactNode;
 }
 
 const useStyles = makeStyles(() => ({
@@ -49,14 +50,14 @@ const HistoricalStatisticsLayout = ({ children, currentBgColor, title }: IProps)
   const generateChartOption = () => {
     const results: OptionsProps[] = [
       {
-        name: title?.toString() || '',
+        name: title && title !== '[object Object]' ? title?.toString() : '',
         value: '0',
       },
     ];
     for (let i = 0; i < statistics.length; i += 1) {
       if (statistics[i].title !== title) {
         results.push({
-          name: translate(statistics[i].title, { currency: getCurrencyName() }),
+          name: translateDropdown(statistics[i].title, { currency: getCurrencyName() }),
           value: statistics[i].url,
         });
       }
@@ -69,14 +70,16 @@ const HistoricalStatisticsLayout = ({ children, currentBgColor, title }: IProps)
       <div style={{ flex: 1 }}>
         <Styles.BackButtonWrapper>
           <Styles.BackButton type="button" onClick={() => history.goBack()}>
-            <NavigateBeforeIcon /> {translate('components.historicalStatisticsLayout.back')}
+            <NavigateBeforeIcon /> {parse(translate('components.historicalStatisticsLayout.back'))}
           </Styles.BackButton>
           <Styles.DropdownWrapper>
             <Dropdown
               value={selectedChart}
               onChange={handleDropdownChange}
               options={generateChartOption()}
-              label={`${translate('components.historicalStatisticsLayout.historicalStatistic')}:`}
+              label={`${translateDropdown(
+                'components.historicalStatisticsLayout.historicalStatistic',
+              )}:`}
               classNameWrapper="historical-statistics"
             />
           </Styles.DropdownWrapper>