feat: translate components part3 (#2451)

regen-network · Sep 12, 2024 · 1990dd1 · 1990dd1
1 parent dfd6a23
commit 1990dd1
Show file tree

Hide file tree

Showing 40 changed files with 1,049 additions and 191 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -38,6 +38,7 @@ module.exports = {
           'border',
           'borderImageSource',
           'borderColor',
+          'borderRadius',
           'borderTop',
           'borderLeft',
           'borderRight',

diff --git a/web-marketplace/src/components/organisms/BasketsTable.tsx b/web-marketplace/src/components/organisms/BasketsTable.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { msg, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Box, Grid } from '@mui/material';
 import { quantityFormatNumberOptions } from 'config/decimals';
 
@@ -20,18 +22,20 @@ type BasketTableProps = {
 
 export const BasketsTable: React.FC<React.PropsWithChildren<BasketTableProps>> =
   ({ basketTokens, renderActionButtons }) => {
+    const { _ } = useLingui();
+
     if (!basketTokens?.length) {
       return (
         <NoCredits
-          title="No basket tokens to display"
+          title={_(msg`No basket tokens to display`)}
           icon={<NoBasketTokensIcon sx={{ width: 100, height: 100 }} />}
         />
       );
     }
 
     return (
       <ActionsTable
-        tableLabel="baskets table"
+        tableLabel={_(msg`baskets table`)}
         renderActionButtons={renderActionButtons}
         headerRows={[
           /* eslint-disable react/jsx-key */
@@ -44,9 +48,9 @@ export const BasketsTable: React.FC<React.PropsWithChildren<BasketTableProps>> =
               },
             }}
           >
-            Asset
+            <Trans>Asset</Trans>
           </Box>,
-          'Amount available',
+          <Trans>Amount available</Trans>,
         ]}
         rows={basketTokens.map((row, i) => {
           return [

diff --git a/web-marketplace/src/components/organisms/ConfirmationModal.tsx b/web-marketplace/src/components/organisms/ConfirmationModal.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { msg, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Avatar, Box, Link } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 
@@ -74,24 +76,25 @@ const ConfirmationModal: React.FC<React.PropsWithChildren<Props>> = ({
   onClose,
   transactionHash,
 }) => {
+  const { _ } = useLingui();
   const { classes: styles, cx } = useStyles();
 
   return (
     <Modal className={styles.root} open={open} onClose={onClose}>
       <img
         className={cx(styles.cows, styles.verticalSpacing)}
         src={CowIllustration}
-        alt="cows celebrating"
+        alt={_(msg`cows celebrating`)}
       />
       <Title align="center" variant="h3" sx={{ pb: [6, 0] }}>
-        Congrats! Your purchase was successful.
+        <Trans>Congrats! Your purchase was successful.</Trans>
       </Title>
       <Card className={cx(styles.card, styles.verticalSpacing)}>
         <Avatar className={styles.iconContainer}>
           <img
             className={styles.icon}
             src={CarbonCreditFruit}
-            alt="eco-credit"
+            alt={_(msg`eco-credit`)}
           />
         </Avatar>
         <div className={styles.creditDetails}>
@@ -106,12 +109,17 @@ const ConfirmationModal: React.FC<React.PropsWithChildren<Props>> = ({
           >
             500
           </Title>
-          <Title variant="h6">Regen - Ecocredits</Title>
+          <Title variant="h6">
+            <Trans>Regen - Ecocredits</Trans>
+          </Title>
+          {/* eslint-disable-next-line lingui/no-unlocalized-strings */}
           <Label size="xs" color="info.main">
             C01-20190101-20201010-02
           </Label>
           <Body size="sm" mobileSize="sm">
-            Wilmot, Carbon<i>Plus</i> Grasslands Credits
+            <Trans>
+              Wilmot, Carbon<i>Plus</i> Grasslands Credits
+            </Trans>
           </Body>
           <Box
             sx={{
@@ -121,7 +129,7 @@ const ConfirmationModal: React.FC<React.PropsWithChildren<Props>> = ({
             }}
           >
             <Label size="xs" mr={4}>
-              hash:{' '}
+              <Trans>blockchain record:</Trans>{' '}
             </Label>
             <Link
               color="secondary.main"

diff --git a/web-marketplace/src/components/organisms/CreditClassConnectSection.tsx b/web-marketplace/src/components/organisms/CreditClassConnectSection.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Title } from 'web-components/src/components/typography';
@@ -68,6 +70,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
 }));
 
 function CreditClassConnectSection({ connectSection }: Props): JSX.Element {
+  const { _ } = useLingui();
   const { classes: styles } = useStyles();
 
   return (
@@ -84,7 +87,7 @@ function CreditClassConnectSection({ connectSection }: Props): JSX.Element {
         mobileVariant="h3"
         sx={{ color: 'primary.main', textAlign: 'center' }}
       >
-        {connectSection?.title || 'Connect and Learn'}
+        {connectSection?.title || _(msg`Connect and Learn`)}
       </Title>
       <div className={styles.links}>
         {connectSection?.links?.map((link, i) => (

diff --git a/web-marketplace/src/components/organisms/CreditClassOverviewSection.tsx b/web-marketplace/src/components/organisms/CreditClassOverviewSection.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { msg, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -130,6 +132,7 @@ const OverviewCards: React.FC<
 const CreditClassOverviewSection: React.FC<
   React.PropsWithChildren<CreditClassOverviewSectionProps>
 > = ({ dbClass, className, nameRaw, overviewCards, sdgs }) => {
+  const { _ } = useLingui();
   const { classes: styles, cx } = useStyles();
   const theme = useTheme();
   const isMobile: boolean = useMediaQuery(theme.breakpoints.down('sm'));
@@ -141,7 +144,7 @@ const CreditClassOverviewSection: React.FC<
           root: cx(styles.sectionRoot, className),
           title: styles.title,
         }}
-        title="Overview"
+        title={_(msg`Overview`)}
         titleVariant="h2"
         titleAlign="left"
       >
@@ -155,7 +158,7 @@ const CreditClassOverviewSection: React.FC<
                 align="left"
                 sx={{ pb: 8 }}
               >
-                SDGs
+                <Trans>SDGs</Trans>
               </Title>
               <SDGs sdgs={sdgs} />
             </div>
@@ -166,7 +169,7 @@ const CreditClassOverviewSection: React.FC<
       {!isMobile && sdgs && (
         <Section
           classes={{ root: styles.sdgsSection, title: styles.title }}
-          title="SDGs"
+          title={_(msg`SDGs`)}
           titleAlign="left"
         >
           <SDGs sdgs={sdgs} />

diff --git a/web-marketplace/src/components/organisms/Documentation.tsx b/web-marketplace/src/components/organisms/Documentation.tsx
@@ -1,3 +1,5 @@
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { ServiceClientImpl } from '@regen-network/api/lib/generated/cosmos/tx/v1beta1/service';
 import { makeStyles } from 'tss-react/mui';
 
@@ -38,12 +40,13 @@ function Documentation({
   onViewOnLedger,
   documents,
 }: DocumentationProps): JSX.Element {
+  const { _ } = useLingui();
   const { classes: styles } = useStyles();
 
   return (
     <Section
       classes={{ root: styles.section, title: styles.title }}
-      title="Documentation"
+      title={_(msg`Documentation`)}
       titleVariant="h2"
       titleAlign="left"
     >

diff --git a/web-marketplace/src/components/organisms/EcocreditsTable.tsx b/web-marketplace/src/components/organisms/EcocreditsTable.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { msg, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Box } from '@mui/material';
 import { quantityFormatNumberOptions } from 'config/decimals';
 import { ELLIPSIS_COLUMN_WIDTH, tableStyles } from 'styles/table';
@@ -37,28 +39,31 @@ export const EcocreditsTable: React.FC<
   initialPaginationParams,
   isIgnoreOffset = false,
 }) => {
+  const { _ } = useLingui();
   const hasMorePages =
     (initialPaginationParams?.count ?? 0) >
     (initialPaginationParams?.rowsPerPage ?? 0);
   if (!credits || (!credits?.length && !hasMorePages)) {
     return (
       <NoCredits
-        title="No ecocredits to display"
+        title={_(msg`No ecocredits to display`)}
         icon={<NoEcocreditsIcon sx={{ width: 100, height: 100 }} />}
       />
     );
   }
 
   return (
     <ActionsTable
-      tableLabel="ecocredits table"
+      tableLabel={_(msg`ecocredits table`)}
       renderActionButtons={renderActionButtons}
       onTableChange={onTableChange}
       initialPaginationParams={initialPaginationParams}
       isIgnoreOffset={isIgnoreOffset}
       /* eslint-disable react/jsx-key */
       headerRows={[
-        <Box sx={{ width: ELLIPSIS_COLUMN_WIDTH }}>{'Project'}</Box>,
+        <Box sx={{ width: ELLIPSIS_COLUMN_WIDTH }}>
+          <Trans>Project</Trans>
+        </Box>,
         <Box
           sx={{
             minWidth: {
@@ -68,26 +73,32 @@ export const EcocreditsTable: React.FC<
             },
           }}
         >
-          {'Batch Denom'}
+          <Trans>Batch Denom</Trans>
         </Box>,
-        'Credit Class',
-        <BreakText>Amount Tradable</BreakText>,
-        <BreakText>Amount Retired</BreakText>,
+        <Trans>Credit Class</Trans>,
+        <BreakText>
+          <Trans>Amount Tradable</Trans>
+        </BreakText>,
+        <BreakText>
+          <Trans>Amount Retired</Trans>
+        </BreakText>,
         <Box display="flex">
-          <BreakText>Amount Escrowed</BreakText>
+          <BreakText>
+            <Trans>Amount Escrowed</Trans>
+          </BreakText>
           <Box alignSelf="flex-end" ml={2}>
             <InfoTooltipWithIcon
               outlined
-              title={
-                'Credits are held in escrow when a sell order is created, and taken out of escrow when the sell order is either cancelled, updated with a reduced quantity, or processed.'
-              }
+              title={_(
+                msg`Credits are held in escrow when a sell order is created, and taken out of escrow when the sell order is either cancelled, updated with a reduced quantity, or processed.`,
+              )}
             />
           </Box>
         </Box>,
-        'Issuer',
-        'Batch Start Date',
-        'Batch End Date',
-        'Project Location',
+        <Trans>Issuer</Trans>,
+        <Trans>Batch Start Date</Trans>,
+        <Trans>Batch End Date</Trans>,
+        <Trans>Project Location</Trans>,
       ]}
       rows={credits.map((row, i) => {
         return [

diff --git a/web-marketplace/src/components/organisms/IncludesGrasslandsForm.tsx b/web-marketplace/src/components/organisms/IncludesGrasslandsForm.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { msg, Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Field, Form, Formik } from 'formik';
 import { RadioGroup } from 'formik-mui';
 
@@ -22,6 +24,8 @@ interface IncludesGrasslandsFormValues {
 export const IncludesGrasslandsForm: React.FC<
   React.PropsWithChildren<IncludesGrasslandsFormProps>
 > = ({ submit }) => {
+  const { _ } = useLingui();
+
   return (
     <Formik
       initialValues={{
@@ -57,21 +61,23 @@ export const IncludesGrasslandsForm: React.FC<
           <Form>
             <OnBoardingCard>
               <ControlledFormLabel>
-                Does your project include grasslands?
+                <Trans>Does your project include grasslands?</Trans>
               </ControlledFormLabel>
               <Field component={RadioGroup} name="includesGrasslands">
                 <Field
                   component={Toggle}
                   type="radio"
-                  label="Yes, my project includes grasslands"
-                  description="Grassland is defined as land made up of large open areas of grasses and herbaceous vegetation which account for greater than 80% of the total vegetation. Grassland projects are not subjective to intensive management such as tilling, but may include pasturelands where grasses and/or legumes are planted for livestock grazing, and land managed with agroforestry practices."
+                  label={_(msg`Yes, my project includes grasslands`)}
+                  description={_(
+                    msg`Grassland is defined as land made up of large open areas of grasses and herbaceous vegetation which account for greater than 80% of the total vegetation. Grassland projects are not subjective to intensive management such as tilling, but may include pasturelands where grasses and/or legumes are planted for livestock grazing, and land managed with agroforestry practices.`,
+                  )}
                   value={true}
                   checked={values['includesGrasslands'] === 'true'}
                 />
                 <Field
                   component={Toggle}
                   type="radio"
-                  label="No, my project does not include grasslands"
+                  label={_(msg`No, my project does not include grasslands`)}
                   value={false}
                   checked={values['includesGrasslands'] === 'false'}
                 />

diff --git a/web-marketplace/src/components/organisms/LoginFlow/hooks/useEmailConfirmationData.tsx b/web-marketplace/src/components/organisms/LoginFlow/hooks/useEmailConfirmationData.tsx
@@ -155,7 +155,7 @@ export const useEmailConfirmationData = ({
           },
         });
         if (response.error) {
-          if (response.error === CONNECTED_EMAIL_ERROR_TITLE) {
+          if (response.error === _(CONNECTED_EMAIL_ERROR_TITLE)) {
             setIsConnectedEmailErrorModalOpen(true);
           }
         }

diff --git a/web-marketplace/src/components/organisms/MediaSection.tsx b/web-marketplace/src/components/organisms/MediaSection.tsx
@@ -43,7 +43,7 @@ const MediaSection: React.FC<React.PropsWithChildren<MediaSectionProps>> = ({
   return (
     <div>
       <SliderSection
-        title={header || 'Resources'}
+        title={header || _(msg`Resources`)}
         items={
           items?.map((item, i) => (
             <ArticleCard

diff --git a/web-marketplace/src/components/organisms/MethodologyDocumentationSection.tsx b/web-marketplace/src/components/organisms/MethodologyDocumentationSection.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { makeStyles } from 'tss-react/mui';
 
 import EyeIcon from 'web-components/src/components/icons/EyeIcon';
@@ -65,6 +67,7 @@ function MethodologyDocumentationSection({
   documentation,
   nameRaw,
 }: Props): JSX.Element {
+  const { _ } = useLingui();
   const { classes: styles } = useStyles();
 
   return (
@@ -73,13 +76,15 @@ function MethodologyDocumentationSection({
         <div className={styles.cards}>
           {documentation && (
             <DocumentationCard
-              mainTitle="Documentation"
+              mainTitle={_(msg`Documentation`)}
               cardTitle={documentation.title || ''}
               imageSrc={getSanityImgSrc(documentation.image)}
               imageAlt={
                 documentation.image?.imageAlt || documentation.title || ''
               }
-              buttonText={documentation.button?.buttonText || 'view document'}
+              buttonText={
+                documentation.button?.buttonText || _(msg`view document`)
+              }
               buttonUrl={getBtnHref(documentation.button)}
               buttonIcon={<EyeIcon />}
               version={methodology.version}
@@ -90,11 +95,11 @@ function MethodologyDocumentationSection({
             />
           )}
           <DocumentationCard
-            mainTitle="Related Credit Class"
+            mainTitle={_(msg`Related Credit Class`)}
             cardTitle={methodology.creditClassName}
             imageSrc={methodology.creditClassImage}
             imageAlt={methodology?.creditClassImageAltText}
-            buttonText={'learn more'}
+            buttonText={_(msg`learn more`)}
             buttonUrl={methodology.creditClassUrl}
             buttonBlankTarget={!isInternalLink(methodology.creditClassUrl)}
           />