refactor(visualizator-fe): Add all strings to localization file

paraspell · Jul 6, 2024 · dcd6445 · dcd6445
1 parent 725ed4d
commit dcd6445
Show file tree

Hide file tree

Showing 35 changed files with 358 additions and 169 deletions.
diff --git a/apps/visualizator-fe/package.json b/apps/visualizator-fe/package.json
@@ -36,8 +36,11 @@
     "graphql": "^16.9.0",
     "highcharts": "^11.4.5",
     "highcharts-react-official": "^3.2.1",
+    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.2",
     "three": "^0.166.1",
     "web3-validator": "^2.0.6"
   },

diff --git a/apps/visualizator-fe/src/components/AccountsAmountPlot/AccountsAmountPlot.container.tsx b/apps/visualizator-fe/src/components/AccountsAmountPlot/AccountsAmountPlot.container.tsx
@@ -4,6 +4,7 @@ import AccountsAmountPlot from './AccountsAmountPlot';
 import { useSelectedParachain } from '../../context/SelectedParachain/useSelectedParachain';
 import { getParachainId } from '../../utils/utils';
 import { useQuery } from '@apollo/client';
+import { useTranslation } from 'react-i18next';
 
 const now = Date.now();
 
@@ -12,6 +13,7 @@ type Props = {
 };
 
 const AccountsAmountPlotContainer: FC<Props> = ({ threshold }) => {
+  const { t } = useTranslation();
   const { parachains, dateRange } = useSelectedParachain();
 
   const [start, end] = dateRange;
@@ -26,7 +28,7 @@ const AccountsAmountPlotContainer: FC<Props> = ({ threshold }) => {
   });
 
   if (error) {
-    return <div>Error</div>;
+    return <div>{t('error')}</div>;
   }
 
   return <AccountsAmountPlot counts={data?.accountCounts ?? []} />;

diff --git a/apps/visualizator-fe/src/components/AccountsAmountPlot/AccountsAmountPlot.tsx b/apps/visualizator-fe/src/components/AccountsAmountPlot/AccountsAmountPlot.tsx
@@ -6,13 +6,15 @@ import { AccountCountsQuery } from '../../gql/graphql';
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import HC_more from 'highcharts/highcharts-more';
+import { useTranslation } from 'react-i18next';
 HC_more(Highcharts);
 
 type Props = {
   counts: AccountCountsQuery['accountCounts'];
 };
 
 const AccountsAmountPlot: FC<Props> = ({ counts }) => {
+  const { t } = useTranslation();
   const handlePointClick = (point: any) => {
     void navigator.clipboard.writeText(point.name);
   };
@@ -42,7 +44,11 @@ const AccountsAmountPlot: FC<Props> = ({ counts }) => {
     tooltip: {
       useHTML: true,
       formatter: function () {
-        return `ID (Hash): <b>${this.point.name.startsWith('0x') ? this.point.name : '0x' + this.point.name}</b><br>Count: <b>${(this.point as any).value}</b>`;
+        const idHash = this.point.name.startsWith('0x') ? this.point.name : '0x' + this.point.name;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const count = (this.point as any).value;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        return t('idHash', { idHash, count });
       }
     },
     plotOptions: {

diff --git a/apps/visualizator-fe/src/components/AmountTransferedPlot/AmountTransferedPlot.container.tsx b/apps/visualizator-fe/src/components/AmountTransferedPlot/AmountTransferedPlot.container.tsx
@@ -4,6 +4,7 @@ import { getParachainId } from '../../utils/utils';
 import { useSelectedParachain } from '../../context/SelectedParachain/useSelectedParachain';
 import { FC } from 'react';
 import { useQuery } from '@apollo/client';
+import { useTranslation } from 'react-i18next';
 
 const now = Date.now();
 
@@ -12,6 +13,7 @@ type Props = {
 };
 
 const AmountTransferedPlotContainer: FC<Props> = ({ showMedian }) => {
+  const { t } = useTranslation();
   const { parachains, dateRange } = useSelectedParachain();
   const [start, end] = dateRange;
 
@@ -24,7 +26,7 @@ const AmountTransferedPlotContainer: FC<Props> = ({ showMedian }) => {
   });
 
   if (error) {
-    return <div>Error</div>;
+    return <div>{t('error')}</div>;
   }
 
   return <AmountTransferedPlot counts={data?.messageCountsByDay ?? []} showMedian={showMedian} />;

diff --git a/apps/visualizator-fe/src/components/AmountTransferedPlot/AmountTransferedPlot.tsx b/apps/visualizator-fe/src/components/AmountTransferedPlot/AmountTransferedPlot.tsx
@@ -8,13 +8,15 @@ import { FC } from 'react';
 import { ChartTooltip, LineChart } from '@mantine/charts';
 import { MessageCountsByDayQuery } from '../../gql/graphql';
 import { getParachainById, getParachainColor } from '../../utils/utils';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   counts: MessageCountsByDayQuery['messageCountsByDay'];
   showMedian?: boolean;
 };
 
 const AmountTransferredPlot: FC<Props> = ({ counts, showMedian }) => {
+  const { t } = useTranslation();
   const processData = () => {
     const dataByDate = counts.reduce((acc: any, item) => {
       if (!acc[item.date]) {
@@ -73,7 +75,7 @@ const AmountTransferredPlot: FC<Props> = ({ counts, showMedian }) => {
       series={[
         ...series,
         {
-          name: 'Median',
+          name: t('median'),
           color: 'gray.6'
         }
       ]}
@@ -82,34 +84,34 @@ const AmountTransferredPlot: FC<Props> = ({ counts, showMedian }) => {
         content: ({ label, payload }) => {
           if (!payload || payload.length === 0) return null;
           const extendedPayload = payload.reduce((acc: any, item) => {
-            if (item.name === 'Median') {
+            if (item.name === t('median')) {
               acc.push(item);
               return acc;
             }
             const total = {
               ...item,
-              name: `${item.name} Total`,
+              name: `${item.name} ${t('total')}`,
               value: item.value,
               color: item.color
             };
             const success = {
               ...item,
-              name: `${item.name} Success`,
+              name: `${item.name} ${t('success')}`,
               dataKey: `${item.name} Success`,
               payload: {
-                category: `${item.name} Success`,
-                [`${item.name} Success`]: item.payload[`${item.name} Success`]
+                category: `${item.name} ${t('success')}`,
+                [`${item.name} ${t('success')}`]: item.payload[`${item.name} ${t('success')}`]
               },
               value: 0,
               color: 'green'
             };
             const failed = {
               ...item,
-              name: `${item.name} Failed`,
+              name: `${item.name} ${t('failed')}`,
               dataKey: `${item.name} Failed`,
               payload: {
-                category: `${item.name} Failed`,
-                [`${item.name} Failed`]: item.payload[`${item.name} Failed`]
+                category: `${item.name} ${t('failed')}`,
+                [`${item.name} ${t('failed')}`]: item.payload[`${item.name} ${t('failed')}`]
               },
               value: 0,
               color: 'red'

diff --git a/apps/visualizator-fe/src/components/AssetsTransferedPlot/AssetsTransferedPlot.container.tsx b/apps/visualizator-fe/src/components/AssetsTransferedPlot/AssetsTransferedPlot.container.tsx
@@ -3,10 +3,12 @@ import AssetsTransferedPlot from './AssetsTransferedPlot';
 import { getParachainId } from '../../utils/utils';
 import { useSelectedParachain } from '../../context/SelectedParachain/useSelectedParachain';
 import { useQuery } from '@apollo/client';
+import { useTranslation } from 'react-i18next';
 
 const now = Date.now();
 
 const AssetsTransferedPlotContainer = () => {
+  const { t } = useTranslation();
   const { parachains, dateRange } = useSelectedParachain();
 
   const [start, end] = dateRange;
@@ -20,7 +22,7 @@ const AssetsTransferedPlotContainer = () => {
   });
 
   if (error) {
-    return <div>Error</div>;
+    return <div>{t('error')}</div>;
   }
 
   return <AssetsTransferedPlot counts={data?.assetCountsBySymbol ?? []} />;

diff --git a/apps/visualizator-fe/src/components/AssetsTransferedPlot/AssetsTransferedPlot.tsx b/apps/visualizator-fe/src/components/AssetsTransferedPlot/AssetsTransferedPlot.tsx
@@ -8,6 +8,7 @@ import { FC } from 'react';
 import { AssetCountsBySymbolQuery } from '../../gql/graphql';
 import { getParachainById } from '../../utils/utils';
 import { BarChart } from '@mantine/charts';
+import { useTranslation } from 'react-i18next';
 
 const fixedPalette = [
   '#FF6384',
@@ -37,11 +38,12 @@ type Props = {
 };
 
 const AssetsTransferredPlot: FC<Props> = ({ counts }) => {
+  const { t } = useTranslation();
   const processData = () => {
     const dataByParachain = counts.reduce((acc: any, item) => {
       const parachainKey = item.paraId
         ? getParachainById(item.paraId) || `ID ${item.paraId}`
-        : 'Total';
+        : t('total');
       if (!acc[parachainKey]) {
         acc[parachainKey] = { parachain: parachainKey };
       }

diff --git a/apps/visualizator-fe/src/components/ChannelInfo/ChannelInfo.container.tsx b/apps/visualizator-fe/src/components/ChannelInfo/ChannelInfo.container.tsx
@@ -3,8 +3,10 @@ import ChannelInfo from './ChannelInfo';
 import { useSelectedParachain } from '../../context/SelectedParachain/useSelectedParachain';
 import { useEffect } from 'react';
 import { useQuery } from '@apollo/client';
+import { useTranslation } from 'react-i18next';
 
 const ChannelInfoContainer = () => {
+  const { t } = useTranslation();
   const { channelId, channelAlertOpen, setChannelAlertOpen } = useSelectedParachain();
 
   const { data, error } = useQuery(channelQueryDocument, {
@@ -22,7 +24,11 @@ const ChannelInfoContainer = () => {
   }, [channelId]);
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return (
+      <div>
+        {t('error')}: {error.message}
+      </div>
+    );
   }
 
   return channelId && channelAlertOpen ? (

diff --git a/apps/visualizator-fe/src/components/ChannelInfo/ChannelInfo.tsx b/apps/visualizator-fe/src/components/ChannelInfo/ChannelInfo.tsx
@@ -2,18 +2,20 @@ import { Alert, Box, Group, Stack, Text } from '@mantine/core';
 import { useSelectedParachain } from '../../context/SelectedParachain/useSelectedParachain';
 import { ChannelsQuery } from '../../gql/graphql';
 import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   channel?: ChannelsQuery['channels'][number];
   onClose?: () => void;
 };
 
 const ChannelInfo: FC<Props> = ({ channel, onClose }) => {
+  const { t } = useTranslation();
   const { channelId } = useSelectedParachain();
   return (
     <Box pos="absolute" top={0} left={0} p="xl">
       <Alert
-        title="Channel info"
+        title={t('channelInfo')}
         withCloseButton
         onClose={onClose}
         w="100%"
@@ -25,13 +27,13 @@ const ChannelInfo: FC<Props> = ({ channel, onClose }) => {
       >
         <Stack>
           <Group align="center" gap="xs">
-            <Text size="lg">Selected channelId:</Text>
+            <Text size="lg">{t('selectedChannelId')}:</Text>
             <Text fw="bold" size="lg">
               {channelId}
             </Text>
           </Group>
           <Group align="center" gap="xs">
-            <Text size="lg">Message count:</Text>
+            <Text size="lg">{t('messageCount')}:</Text>
             <Text fw="bold" size="lg">
               {channel?.message_count}
             </Text>

diff --git a/apps/visualizator-fe/src/components/DateRangePicker.tsx b/apps/visualizator-fe/src/components/DateRangePicker.tsx
@@ -2,20 +2,22 @@ import { FC } from 'react';
 import { DatePickerInput } from '@mantine/dates';
 import { rem } from '@mantine/core';
 import { IconCalendar } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   value: [Date | null, Date | null];
   setValue: (value: [Date | null, Date | null]) => void;
 };
 
 const DateRangePicker: FC<Props> = ({ value, setValue, ...props }) => {
+  const { t } = useTranslation();
   const icon = <IconCalendar style={{ width: rem(18), height: rem(18) }} stroke={1.5} />;
 
   return (
     <DatePickerInput
       type="range"
-      label="Select date range"
-      placeholder="Select date range"
+      label={t('selectDateRange')}
+      placeholder={t('selectDateRange')}
       leftSection={icon}
       leftSectionPointerEvents="none"
       value={value}

diff --git a/apps/visualizator-fe/src/components/ErrorAlert.tsx b/apps/visualizator-fe/src/components/ErrorAlert.tsx
@@ -1,6 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { Alert } from '@mantine/core';
 import { IconAlertCircle } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 
 const alertIcon = <IconAlertCircle size={24} />;
 
@@ -9,17 +10,20 @@ type Props = {
   onAlertCloseClick: () => void;
 };
 
-const ErrorAlert: FC<Props> = ({ children, onAlertCloseClick }) => (
-  <Alert
-    title="Error"
-    icon={alertIcon}
-    withCloseButton
-    onClose={onAlertCloseClick}
-    mt="lg"
-    style={{ overflowWrap: 'anywhere' }}
-  >
-    {children}
-  </Alert>
-);
+const ErrorAlert: FC<Props> = ({ children, onAlertCloseClick }) => {
+  const { t } = useTranslation();
+  return (
+    <Alert
+      title={t('error')}
+      icon={alertIcon}
+      withCloseButton
+      onClose={onAlertCloseClick}
+      mt="lg"
+      style={{ overflowWrap: 'anywhere' }}
+    >
+      {children}
+    </Alert>
+  );
+};
 
 export default ErrorAlert;