feat: translate web-components from map to views (#2476)

regen-network · Sep 18, 2024 · 5f4f26d · 5f4f26d
1 parent 1813741
commit 5f4f26d
Show file tree

Hide file tree

Showing 129 changed files with 1,492 additions and 679 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,7 +15,7 @@ module.exports = {
     'lingui/no-unlocalized-strings': [
       1,
       {
-        ignoreFunction: ['test', 'makeStyles', 'withStyles', 'cn'],
+        ignoreFunction: ['test', 'makeStyles', 'withStyles', 'cn', 'styled'],
         ignoreAttribute: [
           'allow',
           'sx',
@@ -24,6 +24,7 @@ module.exports = {
           'labelClassName',
           'classes',
           'classNames',
+          'previewClassName',
         ],
         ignoreProperty: [
           'border',

diff --git a/web-components/src/components/map/StaticMap.tsx b/web-components/src/components/map/StaticMap.tsx
@@ -4,7 +4,6 @@ import bbox from '@turf/bbox';
 import { FeatureCollection } from 'geojson';
 
 import { GreenPinIcon } from '../icons/GreenPinIcon';
-import PinIcon from '../icons/PinIcon';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
 

diff --git a/web-components/src/components/methodologies/index.tsx b/web-components/src/components/methodologies/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable lingui/no-unlocalized-strings */
 import React from 'react';
 
 function Methodologies(): JSX.Element {

diff --git a/...omponents/src/components/modal/EmailConfirmationModal/EmailConfirmationModal.constants.ts b/...omponents/src/components/modal/EmailConfirmationModal/EmailConfirmationModal.constants.ts
diff --git a/...components/src/components/modal/EmailConfirmationModal/EmailConfirmationModal.stories.tsx b/...components/src/components/modal/EmailConfirmationModal/EmailConfirmationModal.stories.tsx
@@ -55,6 +55,9 @@ export const Basic: Story = {
     return (
       <EmailConfirmationModal
         {...args}
+        title="Please check your email"
+        description="We’ve just sent a confirmation email to:"
+        helperText="Please enter the code from that email:"
         onClose={onClose}
         open={open}
         error={error ?? args.error}

diff --git a/web-components/src/components/modal/EmailConfirmationModal/EmailConfirmationModal.tsx b/web-components/src/components/modal/EmailConfirmationModal/EmailConfirmationModal.tsx
@@ -9,11 +9,6 @@ import { ButtonType } from '../../../types/shared/buttonType';
 import { LinkType } from '../../../types/shared/linkType';
 import { Body, Title } from '../../typography';
 import Modal, { RegenModalProps } from '..';
-import {
-  EMAIL_CONFIRMATION_CODE_HELPER,
-  EMAIL_CONFIRMATION_DESCRIPTION,
-  EMAIL_CONFIRMATION_TITLE,
-} from './EmailConfirmationModal.constants';
 
 export interface EmailConfirmationModalProps extends RegenModalProps {
   ariaLabel: string;
@@ -23,6 +18,9 @@ export interface EmailConfirmationModalProps extends RegenModalProps {
   resendButtonLink?: ButtonType;
   cancelButton: ButtonType;
   signInButton: ButtonType;
+  title: string;
+  description: string;
+  helperText: string;
   onCodeChange: (code: string) => void;
 }
 
@@ -35,6 +33,9 @@ export const EmailConfirmationModal = ({
   error,
   cancelButton,
   signInButton,
+  title,
+  description,
+  helperText,
   onClose,
   onCodeChange,
 }: EmailConfirmationModalProps) => {
@@ -51,15 +52,14 @@ export const EmailConfirmationModal = ({
         }}
       >
         <Title align="center" variant="h4" mb={5}>
-          {EMAIL_CONFIRMATION_TITLE}
+          {title}
         </Title>
         <Body size="lg" align="center" mb={5}>
-          {EMAIL_CONFIRMATION_DESCRIPTION}{' '}
-          <Link href={mailLink.href}>{mailLink.text}</Link>
+          {description} <Link href={mailLink.href}>{mailLink.text}</Link>
           {'.'}
         </Body>
         <Body size="lg" align="center" mb={5} sx={{ fontWeight: 700 }}>
-          {EMAIL_CONFIRMATION_CODE_HELPER}
+          {helperText}
         </Body>
         <ConfirmationCode
           ariaLabel={ariaLabel}

diff --git a/web-components/src/components/modal/ProcessingModal.tsx b/web-components/src/components/modal/ProcessingModal.tsx
@@ -27,20 +27,23 @@ const useStyles = makeStyles()(theme => ({
   },
 }));
 
-export interface ProcessingModalProps extends RegenModalProps {}
+export interface ProcessingModalProps extends RegenModalProps {
+  title: string;
+  bodyText: string;
+}
 
 const ProcessingModal: React.FC<React.PropsWithChildren<ProcessingModalProps>> =
-  ({ open, onClose }) => {
+  ({ open, onClose, title, bodyText }) => {
     const { classes: styles, cx } = useStyles();
 
     return (
       <Modal className={styles.root} open={open} onClose={onClose}>
         <Spinner className={cx(styles.verticalSpacing, styles.spinner)} />
         <Title align="center" variant="h3" mb={6}>
-          Please wait while transaction processes
+          {title}
         </Title>
         <Body size="lg" sx={{ mx: 4, mb: [8, 0] }}>
-          This may take up to 15 seconds.
+          {bodyText}
         </Body>
       </Modal>
     );

diff --git a/web-components/src/components/modal/SaveChangesWarningModal/SaveChangesWarningModal.tsx b/web-components/src/components/modal/SaveChangesWarningModal/SaveChangesWarningModal.tsx
@@ -4,21 +4,30 @@ import { CancelButtonFooter } from 'web-components/src/components/organisms/Canc
 import { Body, Title } from 'web-components/src/components/typography';
 
 interface Props extends RegenModalProps {
+  title: string;
+  bodyText: string;
+  buttonText: string;
   navigate: () => void;
 }
 
-export const SaveChangesWarningModal = ({ open, onClose, navigate }: Props) => {
+export const SaveChangesWarningModal = ({
+  open,
+  title,
+  bodyText,
+  buttonText,
+  onClose,
+  navigate,
+}: Props) => {
   return (
     <SadBeeModal open={open} onClose={onClose}>
       <Title variant="h4" align="center" sx={{ my: 5 }}>
-        Are you sure you want to discard your changes?
+        {title}
       </Title>
       <Body size="lg" align="center" sx={{ mb: 12.5 }}>
-        If you proceed, you will lose all unsaved changes you made. This cannot
-        be undone.
+        {bodyText}
       </Body>
       <CancelButtonFooter
-        label="yes, discard"
+        label={buttonText}
         onCancel={onClose}
         onClick={() => {
           navigate();

diff --git a/...nents/src/components/modal/SwitchWalletWarningModal/SwitchWalletWarningModal.constants.ts b/...nents/src/components/modal/SwitchWalletWarningModal/SwitchWalletWarningModal.constants.ts
diff --git a/...onents/src/components/modal/SwitchWalletWarningModal/SwitchWalletWarningModal.stories.tsx b/...onents/src/components/modal/SwitchWalletWarningModal/SwitchWalletWarningModal.stories.tsx
@@ -24,6 +24,14 @@ export const Basic: Story = {
       setOpen(false);
     };
 
-    return <SwitchWalletWarningModal {...args} onClose={onClose} open={open} />;
+    return (
+      <SwitchWalletWarningModal
+        {...args}
+        onClose={onClose}
+        open={open}
+        title="Please select the following wallet address in Keplr in order to proceed"
+        bodyText="The email address you are using to log in is associated with the above wallet address, so it must be the currently selected account in Keplr in order to continue."
+      />
+    );
   },
 };
diff --git a/web-components/src/components/modal/SwitchWalletWarningModal/SwitchWalletWarningModal.tsx b/web-components/src/components/modal/SwitchWalletWarningModal/SwitchWalletWarningModal.tsx
@@ -1,32 +1,32 @@
 import { SadBeeIcon } from '../../../components/icons/SadBeeIcon';
 import { Body, Subtitle, Title } from '../../typography';
 import Modal, { RegenModalProps } from '..';
-import {
-  SWITCH_WALLET_WARNING_MODAL_MESSAGE,
-  SWITCH_WALLET_WARNING_MODAL_TITLE,
-} from './SwitchWalletWarningModal.constants';
 
 export interface KeplrWalletConnectModalProps extends RegenModalProps {
   address: string;
+  title: string;
+  bodyText: string;
 }
 
 const SwitchWalletWarningModal = ({
   open,
   address,
+  title,
+  bodyText,
   onClose,
 }: KeplrWalletConnectModalProps) => {
   return (
     <Modal open={open} onClose={onClose} isFullscreenMobile={false}>
       <div className="max-w-[460px] flex flex-col items-center">
         <SadBeeIcon className="mb-20" />
         <Title align="center" variant="h4" mb={5}>
-          {SWITCH_WALLET_WARNING_MODAL_TITLE}
+          {title}
         </Title>
         <Subtitle size="lg" className="mb-20">
           {address}
         </Subtitle>
         <Body size="lg" align="center">
-          {SWITCH_WALLET_WARNING_MODAL_MESSAGE}
+          {bodyText}
         </Body>
       </div>
     </Modal>

diff --git a/web-components/src/components/modal/TxErrorModal.tsx b/web-components/src/components/modal/TxErrorModal.tsx
@@ -32,7 +32,7 @@ const TxErrorModal: React.FC<React.PropsWithChildren<TxErrorModalProps>> = ({
     <TxModal
       icon={icon ?? <BrokenLinkIcon sx={{ pb: 4.5 }} />}
       cardItems={cardItems ? cardItems : defaultCardItems}
-      title={title ?? 'Sorry, your transaction was not successful.'}
+      title={title}
       {...props}
     />
   );

diff --git a/web-components/src/components/modal/TxModal.CardItemValue.tsx b/web-components/src/components/modal/TxModal.CardItemValue.tsx
@@ -58,6 +58,8 @@ export const CardItemValue = ({
 interface CardItemValueListProps {
   value: ItemValue[];
   color?: string;
+  seeMoreText: string;
+  seeLessText: string;
   linkComponent: LinkComponentProp;
 }
 
@@ -68,6 +70,8 @@ export const CardItemValueList = (
     <CollapseList
       buttonTextSize="xxs"
       max={2}
+      seeMoreText={props.seeMoreText}
+      seeLessText={props.seeLessText}
       items={props.value.map(row => (
         <CardItemValue {...props} value={row} key={row.name} />
       ))}

diff --git a/web-components/src/components/modal/TxModal.tsx b/web-components/src/components/modal/TxModal.tsx
@@ -57,7 +57,7 @@ export type LinkComponentProp = React.FC<React.PropsWithChildren<LinkProps>>;
 export interface TxModalProps extends RegenModalProps {
   onButtonClick: () => void;
   cardTitle: string;
-  buttonTitle?: string;
+  buttonTitle: string;
   cardItems?: Item[];
   linkComponent: LinkComponentProp;
   txHash: string;
@@ -67,17 +67,25 @@ export interface TxModalProps extends RegenModalProps {
   description?: string;
   buttonLink?: string;
   socialItems?: SocialItems;
+  blockchainRecordText: string;
+  seeMoreText: string;
+  seeLessText: string;
+  shareTitle?: string;
 }
 
 interface CardItemProps extends Item {
   linkComponent: LinkComponentProp;
+  seeMoreText: string;
+  seeLessText: string;
 }
 
 export const CardItem: React.FC<React.PropsWithChildren<CardItemProps>> = ({
   color,
   label,
   value,
   linkComponent,
+  seeMoreText,
+  seeLessText,
 }) => {
   return (
     <Box sx={{ pt: 5 }}>
@@ -90,6 +98,8 @@ export const CardItem: React.FC<React.PropsWithChildren<CardItemProps>> = ({
           value={value}
           color={color}
           linkComponent={linkComponent}
+          seeMoreText={seeMoreText}
+          seeLessText={seeLessText}
         />
       ) : (
         <CardItemValue
@@ -106,7 +116,7 @@ const TxModal: React.FC<React.PropsWithChildren<TxModalProps>> = ({
   icon,
   title,
   description,
-  buttonTitle = 'view your portfolio',
+  buttonTitle,
   open,
   onClose,
   onButtonClick,
@@ -117,6 +127,10 @@ const TxModal: React.FC<React.PropsWithChildren<TxModalProps>> = ({
   linkComponent,
   buttonLink,
   socialItems,
+  blockchainRecordText,
+  seeMoreText,
+  seeLessText,
+  shareTitle,
 }) => {
   const { classes: styles } = useStyles();
   const hasCardItems = !!cardItems && cardItems.length > 0;
@@ -166,13 +180,21 @@ const TxModal: React.FC<React.PropsWithChildren<TxModalProps>> = ({
         >
           <Title variant="h5">{cardTitle}</Title>
           {cardItems?.map((item, i) => (
-            <CardItem {...item} linkComponent={linkComponent} key={i} />
+            <CardItem
+              {...item}
+              linkComponent={linkComponent}
+              key={i}
+              seeMoreText={seeMoreText}
+              seeLessText={seeLessText}
+            />
           ))}
           {txHash && (
             <CardItem
-              label="blockchain record"
+              label={blockchainRecordText}
               value={{ name: truncate(txHash), url: txHashUrl }}
               linkComponent={linkComponent}
+              seeMoreText={seeMoreText}
+              seeLessText={seeLessText}
             />
           )}
         </Card>
@@ -185,8 +207,12 @@ const TxModal: React.FC<React.PropsWithChildren<TxModalProps>> = ({
       >
         {buttonTitle}
       </OutlinedButton>
-      {socialItems && (
-        <ShareSection items={socialItems} sx={{ mt: 10, maxWidth: 370 }} />
+      {socialItems && shareTitle && (
+        <ShareSection
+          items={socialItems}
+          sx={{ mt: 10, maxWidth: 370 }}
+          title={shareTitle}
+        />
       )}
     </Modal>
   );

diff --git a/web-components/src/components/modal/TxSuccessfulModal.tsx b/web-components/src/components/modal/TxSuccessfulModal.tsx
@@ -4,15 +4,15 @@ import CelebrateRegenIcon from '../icons/CelebrateRegenIcon';
 import { TxModal, TxModalProps } from './TxModal';
 
 export interface TxSuccessfulModalProps extends TxModalProps {
-  title?: string;
+  title: string;
 }
 
 const TxSuccessfulModal: React.FC<TxSuccessfulModalProps> = props => {
   return (
     <TxModal
       {...props}
       icon={<CelebrateRegenIcon sx={{ fontSize: 150, height: 100, mb: 5 }} />}
-      title={props?.title ?? 'Congrats! Your transaction was successful.'}
+      title={props?.title}
     />
   );
 };

diff --git a/web-components/src/components/modal/add-wallet-modal/AddWalletModalConnect.constants.tsx b/web-components/src/components/modal/add-wallet-modal/AddWalletModalConnect.constants.tsx