feat: translate web-components from header to inputs

.eslintrc.js

@@ -15,7 +15,7 @@ module.exports = {
     'lingui/no-unlocalized-strings': [
       1,
       {
-        ignoreFunction: ['test', 'makeStyles', 'withStyles'],
+        ignoreFunction: ['test', 'makeStyles', 'withStyles', 'cn'],
         ignoreAttribute: [
           'allow',
           'sx',

web-components/src/components/cards/ReviewCard/ReviewCard.Photo.tsx

@@ -8,8 +8,13 @@ const Photo = ({
   src,
   caption,
   credit,
+  locationText,
   sx = [],
-}: CardMediaProps & { caption?: string; credit?: string }): JSX.Element => {
+}: CardMediaProps & {
+  caption?: string;
+  credit?: string;
+  locationText: string;
+}): JSX.Element => {
   return (
     <Card sx={[{ height: [216, 293], position: 'relative' }, ...sxToArray(sx)]}>
       <CardMedia
@@ -19,6 +24,7 @@ const Photo = ({
       />
       {(caption || credit) && (
         <FileDropBottomBar
+          locationText={locationText}
           caption={caption}
           credit={credit}
           sx={{ position: 'absolute', bottom: 0 }}

web-components/src/components/cards/ReviewCard/ReviewCard.stories.tsx

@@ -22,10 +22,10 @@ export const itemDisplay = () => (
   <ItemDisplay name="Item">Some content</ItemDisplay>
 );
 
-export const photo = () => <Photo src={imgSrc} />;
+export const photo = () => <Photo src={imgSrc} locationText="Location" />;
 
 export const reviewCard = () => (
   <ReviewCard title="review card" onEditClick={onClick} editText="Edit">
-    <Photo src={imgSrc} />
+    <Photo src={imgSrc} locationText="Location" />
   </ReviewCard>
 );

web-components/src/components/cards/card.stories.tsx

@@ -140,6 +140,7 @@ export const projectCard = (): JSX.Element => (
         estimatedIssuance: '200',
         stripePaymentLink: 'https://stripe.com',
       }}
+      draftText="Draft"
     />
   </Box>
 );
@@ -359,6 +360,6 @@ export const reviewCard = (): JSX.Element => (
     <ItemDisplay name="URL">
       <a href="http://www.url.com/">www.url.com</a>
     </ItemDisplay>
-    <Photo src="/coorong.png" />
+    <Photo src="/coorong.png" locationText="Location" />
   </ReviewCard>
 );

web-components/src/components/credits/CreditsGauge.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
 import Grid from '@mui/material/Grid';
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
 
-import { pluralize } from '../../utils/pluralize';
 import Gauge from './Gauge';
 import GaugeText from './GaugeText';
 

web-components/src/components/footer/index.tsx

@@ -35,6 +35,8 @@ interface FooterProps {
   newsletterSuccessChildren: React.ReactNode;
   newsletterSubmitLabel: string;
   newsletterInputPlaceholder: string;
+  requiredMessage: string;
+  invalidEmailMessage: string;
 }
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -116,6 +118,8 @@ export default function Footer({
   termsText,
   privacyText,
   joinText,
+  requiredMessage,
+  invalidEmailMessage,
   apiUri = 'http://localhost:5000',
 }: FooterProps): JSX.Element {
   const { classes } = useStyles();
@@ -176,6 +180,8 @@ export default function Footer({
                 apiUri={apiUri}
                 gridXs={{ textField: 7, button: 5 }}
                 successChildren={newsletterSuccessChildren}
+                requiredMessage={requiredMessage}
+                invalidEmailMessage={invalidEmailMessage}
               />
             </Box>
           </Grid>

web-components/src/components/form/BasketPutForm/BasketPutForm.tsx

@@ -4,7 +4,7 @@ import { Field, Form, Formik, FormikErrors } from 'formik';
 import { Body } from '../../../components/typography';
 import AmountField from '../../inputs/AmountField';
 import SelectTextField, { Option } from '../../inputs/SelectTextField';
-import { requiredMessage, validateAmount } from '../../inputs/validation';
+import { validateAmount } from '../../inputs/validation';
 import { RegenModalProps } from '../../modal';
 import Submit from '../Submit';
 import { BasketPutFormOnChange } from './BasketPutForm.OnChange';
@@ -19,11 +19,17 @@ export interface BasketPutProps {
   amountLabel: string;
   submitLabel: string;
   submitErrorText: string;
+  requiredMessage: string;
+  invalidAmount: string;
+  insufficientCredits: string;
+  invalidDecimalCount: string;
   onSubmit: (values: FormValues) => Promise<void>;
   onBatchDenomChange?: (batchDenom: string | undefined) => void;
 }
 
 interface FormProps extends BasketPutProps {
+  maxLabel: string;
+  availableLabel: string;
   onClose: RegenModalProps['onClose'];
 }
 
@@ -34,6 +40,8 @@ export interface FormValues {
 }
 
 const BasketPutForm: React.FC<React.PropsWithChildren<FormProps>> = ({
+  maxLabel,
+  availableLabel,
   batchDenoms,
   basketOptions,
   availableTradableAmount,
@@ -43,6 +51,10 @@ const BasketPutForm: React.FC<React.PropsWithChildren<FormProps>> = ({
   basketLabel,
   submitLabel,
   submitErrorText,
+  requiredMessage,
+  invalidAmount,
+  insufficientCredits,
+  invalidDecimalCount,
   onClose,
   onSubmit,
   onBatchDenomChange,
@@ -70,7 +82,14 @@ const BasketPutForm: React.FC<React.PropsWithChildren<FormProps>> = ({
     if (!values.basketDenom) {
       errors.basketDenom = requiredMessage;
     }
-    const errAmount = validateAmount(availableTradableAmount, values.amount);
+    const errAmount = validateAmount({
+      availableTradableAmount,
+      requiredMessage,
+      invalidAmount,
+      insufficientCredits,
+      invalidDecimalCount,
+      amount: values.amount,
+    });
     if (errAmount) errors.amount = errAmount;
 
     return errors;
@@ -103,6 +122,8 @@ const BasketPutForm: React.FC<React.PropsWithChildren<FormProps>> = ({
             native={false}
           />
           <AmountField
+            maxLabel={maxLabel}
+            availableLabel={availableLabel}
             name="amount"
             label={amountLabel}
             availableAmount={availableTradableAmount}

web-components/src/components/form/BasketTakeForm.tsx

@@ -71,11 +71,18 @@ export interface BasketTakeProps extends BottomCreditRetireFieldsProps {
   retirementInfoText: string;
   submitLabel: string;
   submitErrorText: string;
+  invalidMemoLength: string;
   onSubmit: (values: MsgTakeValues) => void;
 }
 
 // Input (args)
 interface FormProps extends BasketTakeProps {
+  requiredMessage: string;
+  invalidAmount: string;
+  insufficientCredits: string;
+  invalidDecimalCount: string;
+  maxLabel: string;
+  availableLabel: string;
   onClose: RegenModalProps['onClose'];
 }
 
@@ -85,7 +92,6 @@ const BasketTakeForm: React.FC<React.PropsWithChildren<FormProps>> = ({
   basket,
   basketDisplayDenom,
   balance,
-  amountErrorText,
   amountLabel,
   retireOnTakeLabel,
   retireOnTakeTooltip,
@@ -94,6 +100,13 @@ const BasketTakeForm: React.FC<React.PropsWithChildren<FormProps>> = ({
   submitErrorText,
   retirementInfoText,
   bottomTextMapping,
+  maxLabel,
+  availableLabel,
+  requiredMessage,
+  invalidAmount,
+  insufficientCredits,
+  invalidDecimalCount,
+  invalidMemoLength,
   onClose,
   onSubmit,
 }) => {
@@ -113,7 +126,14 @@ const BasketTakeForm: React.FC<React.PropsWithChildren<FormProps>> = ({
   ): FormikErrors<CreditTakeFormValues> => {
     let errors: FormikErrors<CreditTakeFormValues> = {};
 
-    const errAmount = validateAmount(balance, values.amount, amountErrorText);
+    const errAmount = validateAmount({
+      availableTradableAmount: balance,
+      requiredMessage,
+      invalidAmount,
+      insufficientCredits,
+      invalidDecimalCount,
+      amount: values.amount,
+    });
     if (errAmount) errors.amount = errAmount;
 
     // Retire form validation (optional subform)
@@ -125,12 +145,17 @@ const BasketTakeForm: React.FC<React.PropsWithChildren<FormProps>> = ({
         stateProvince: values.stateProvince,
         postalCode: values.postalCode,
       };
-      errors = validateCreditRetire(
-        balance,
-        retirementValues,
+      errors = validateCreditRetire({
+        availableTradableAmount: balance,
+        values: retirementValues,
         errors,
-        stateProvinceErrorText,
-      );
+        stateProvinceError: stateProvinceErrorText,
+        requiredMessage,
+        invalidAmount,
+        insufficientCredits,
+        invalidDecimalCount,
+        invalidMemoLength,
+      });
     }
     return errors;
   };
@@ -158,6 +183,8 @@ const BasketTakeForm: React.FC<React.PropsWithChildren<FormProps>> = ({
         <Form>
           <>
             <AmountField
+              maxLabel={maxLabel}
+              availableLabel={availableLabel}
               name="amount"
               label={amountLabel}
               availableAmount={balance}