feat: internationalization

apps/cowswap-frontend/.env

@@ -133,9 +133,14 @@ INTEGRATION_TESTS_INFURA_KEY=
 # Path regex (to detect environment)
 # REACT_APP_PATH_REGEX_ENS="/ipfs"
 
-
 # CMS base URL
 # REACT_APP_CMS_BASE_URL=http://localhost:1337/api
 
 # Notifications Telegram bot ID
 # REACT_APP_TG_BOT_ID=3713371337
+
+#######################################
+# Internationalization
+#######################################
+
+#REACT_APP_LINGUI_INTERNATIONALIZATION=true

apps/cowswap-frontend/.gitignore

@@ -1,13 +1,12 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
-# generated contract types
+# generated language types
 /src/lib/locales/**/*.js
 /src/lib/locales/**/en-US.po
 /src/lib/locales/**/pseudo.po
 /src/locales/**/*.js
 /src/locales/**/*.ts
 /src/locales/**/*.json
-/src/locales/**/en-US.po
 /src/locales/**/pseudo.po
 
 # dependencies

apps/cowswap-frontend/LinguiJestProvider.tsx

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react'
+
+import { DEFAULT_LOCALE } from '@cowprotocol/common-const'
+
+import { i18n } from '@lingui/core'
+import { I18nProvider } from '@lingui/react'
+
+interface ProviderProps {
+  children: ReactNode
+}
+
+i18n.load(DEFAULT_LOCALE, {})
+i18n.activate(DEFAULT_LOCALE)
+
+export const LinguiWrapper: FC<ProviderProps> = ({ children }) => {
+  return <I18nProvider i18n={i18n}>{children}</I18nProvider>
+}

apps/cowswap-frontend/src/api/cowProtocol/errors/OperatorError.ts

@@ -1,3 +1,5 @@
+import { t } from '@lingui/core/macro'
+
 type ApiActionType = 'get' | 'create' | 'delete'
 
 export interface ApiErrorObject {
@@ -108,7 +110,7 @@ function _mapActionToErrorDetail(action?: ApiActionType) {
       console.error(
         '[OperatorError::_mapActionToErrorDetails] Uncaught error mapping error action type to server error. Please try again later.',
       )
-      return 'Something failed. Please try again later.'
+      return `Something failed. Please try again later.`
   }
 }
 
@@ -144,23 +146,33 @@ export default class OperatorError extends Error {
       case 404:
         return this.getErrorMessage(errorObject, action)
 
-      case 403:
-        return `The order cannot be ${action === 'create' ? 'accepted' : 'cancelled'}. Your account is deny-listed.`
+      case 403: {
+        const acceptedText = t`accepted`
+        const cancelledText = t`cancelled`
+        const statusText = action === 'create' ? acceptedText : cancelledText
+        return t`The order cannot be ${statusText}. Your account is deny-listed.`
+      }
 
-      case 429:
-        return `The order cannot be ${
-          action === 'create' ? 'accepted. Too many order placements' : 'cancelled. Too many order cancellations'
-        }. Please, retry in a minute`
+      case 429: {
+        const placementsText = t`accepted. Too many order placements`
+        const cancellationsText = t`cancelled. Too many order cancellations`
+        const msg = action === 'create' ? placementsText : cancellationsText
+        return t`The order cannot be ${msg}. Please, retry in a minute`
+      }
 
       case 500:
-      default:
+      default: {
         console.error(
           `[OperatorError::getErrorFromStatusCode] Error ${
             action === 'create' ? 'creating' : 'cancelling'
           } the order, status code:`,
           statusCode || 'unknown',
         )
-        return `Error ${action === 'create' ? 'creating' : 'cancelling'} the order`
+        const creatingText = t`creating`
+        const cancellingText = t`cancelling`
+        const verb = action === 'create' ? creatingText : cancellingText
+        return t`Error ${verb} the order`
+      }
     }
   }
   constructor(apiError: ApiErrorObject) {

apps/cowswap-frontend/src/common/constants/routes.ts

@@ -2,6 +2,9 @@ import EXPERIMENT_ICON from '@cowprotocol/assets/cow-swap/experiment.svg'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { BadgeTypes } from '@cowprotocol/ui'
 
+import { MessageDescriptor } from '@lingui/core'
+import { msg } from '@lingui/core/macro'
+
 export const TRADE_WIDGET_PREFIX = isInjectedWidget() ? '/widget' : ''
 
 export const Routes = {
@@ -54,25 +57,45 @@ export interface IMenuItem {
   badgeType?: (typeof BadgeTypes)[keyof typeof BadgeTypes]
 }
 
-export const MENU_ITEMS: IMenuItem[] = [
-  { route: Routes.SWAP, label: 'Swap', description: 'Trade tokens' },
-  { route: Routes.LIMIT_ORDER, label: 'Limit', fullLabel: 'Limit order', description: 'Set your own price' },
-  { route: Routes.ADVANCED_ORDERS, label: 'TWAP', description: 'Place orders with a time-weighted average price' },
+export interface I18nIMenuItem extends Omit<IMenuItem, 'label' | 'fullLabel' | 'description' | 'badge'> {
+  label: MessageDescriptor
+  fullLabel?: MessageDescriptor
+  description: MessageDescriptor
+  badge?: MessageDescriptor
+}
+
+export const MENU_ITEMS: I18nIMenuItem[] = [
+  {
+    route: Routes.SWAP,
+    label: msg`Swap`,
+    description: msg`Trade tokens`,
+  },
+  {
+    route: Routes.LIMIT_ORDER,
+    label: msg`Limit`,
+    fullLabel: msg`Limit order`,
+    description: msg`Set your own price`,
+  },
+  {
+    route: Routes.ADVANCED_ORDERS,
+    label: msg`TWAP`,
+    description: msg`Place orders with a time-weighted average price`,
+  },
 ]
 
-export const HOOKS_STORE_MENU_ITEM: IMenuItem = {
+export const HOOKS_STORE_MENU_ITEM: I18nIMenuItem = {
   route: Routes.HOOKS,
-  label: 'Hooks',
-  description: 'Powerful tool to generate pre/post interaction for CoW Protocol',
+  label: msg`Hooks`,
+  description: msg`Powerful tool to generate pre/post interaction for CoW Protocol`,
   badgeImage: EXPERIMENT_ICON,
   badgeType: BadgeTypes.INFORMATION,
 }
 
-export const YIELD_MENU_ITEM: IMenuItem = {
+export const YIELD_MENU_ITEM: I18nIMenuItem = {
   route: Routes.YIELD,
-  label: 'Yield',
-  fullLabel: 'Yield',
-  description: 'Provide liquidity',
-  badge: 'New',
+  label: msg`Yield`,
+  fullLabel: msg`Yield`,
+  description: msg`Provide liquidity`,
+  badge: msg`New`,
   badgeType: BadgeTypes.ALERT,
 }

apps/cowswap-frontend/src/common/containers/CoWAmmBanner/index.tsx

@@ -8,6 +8,8 @@ import { ClosableBanner } from '@cowprotocol/ui'
 import { useIsSmartContractWallet, useWalletInfo } from '@cowprotocol/wallet'
 import { CurrencyAmount } from '@uniswap/sdk-core'
 
+import { t } from '@lingui/core/macro'
+
 import { useIsDarkMode } from 'legacy/state/user/hooks'
 
 import { useTradeNavigate } from 'modules/trade'
@@ -80,8 +82,8 @@ export function CoWAmmBanner({ isTokenSelectorView }: BannerProps) {
     <CoWAmmBannerContent
       id={bannerId}
       isDarkMode={isDarkMode}
-      title="CoW AMM"
-      ctaText={isSmartContractWallet ? 'Booooost APR!' : 'Booooost APR gas-free!'}
+      title={t`CoW AMM`}
+      ctaText={isSmartContractWallet ? t`Booooost APR!` : t`Booooost APR gas-free!`}
       isTokenSelectorView={!!isTokenSelectorView}
       vampireAttackContext={vampireAttackContext}
       tokensByAddress={tokensByAddress}

apps/cowswap-frontend/src/common/containers/ConfirmationModal/index.tsx

@@ -1,6 +1,8 @@
 import { useAtomValue } from 'jotai'
 
-import { confirmationModalContextAtom } from 'common/hooks/useConfirmationRequest'
+import { t } from '@lingui/core/macro'
+
+import { confirmationModalContextAtom, DEFAULT_CONFIRMATION_MODAL_CONTEXT } from 'common/hooks/useConfirmationRequest'
 import { ConfirmationModal as Pure, ConfirmationModalProps } from 'common/pure/ConfirmationModal'
 
 // TODO: Add proper return type annotation
@@ -13,12 +15,12 @@ export function ConfirmationModal({ isOpen, onDismiss }: Pick<ConfirmationModalP
     <Pure
       isOpen={isOpen}
       onDismiss={onDismiss}
-      title={title}
-      callToAction={callToAction}
+      title={title === DEFAULT_CONFIRMATION_MODAL_CONTEXT.title ? t`Confirm Action` : title}
+      callToAction={callToAction === DEFAULT_CONFIRMATION_MODAL_CONTEXT.callToAction ? t`Confirm` : callToAction}
       description={description}
       onEnable={onEnable}
       warning={warning}
-      confirmWord={confirmWord}
+      confirmWord={confirmWord === DEFAULT_CONFIRMATION_MODAL_CONTEXT.confirmWord ? t`confirm` : confirmWord}
       action={action}
       skipInput={skipInput}
     />

apps/cowswap-frontend/src/common/containers/InvalidLocalTimeWarning/index.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react'
 
+import { Trans } from '@lingui/react/macro'
+
 import { useLocalTimeOffset } from './localTimeOffsetState'
 
 import { GlobalWarning } from '../../pure/GlobalWarning'
@@ -18,7 +20,10 @@ export function InvalidLocalTimeWarning(): ReactNode | null {
 
   return (
     <GlobalWarning>
-      Local device time is not accurate, CoW Swap most likely will not work correctly. Please adjust your device's time.
+      <Trans>
+        Local device time is not accurate, CoW Swap most likely will not work correctly. Please adjust your device's
+        time.
+      </Trans>
     </GlobalWarning>
   )
 }

apps/cowswap-frontend/src/common/containers/MultipleOrdersCancellationModal/index.tsx

@@ -6,6 +6,9 @@ import { Command } from '@cowprotocol/types'
 import { ButtonPrimary } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
+
 import { LegacyConfirmationModalContent } from 'legacy/components/TransactionConfirmationModal/LegacyConfirmationModalContent'
 import { useRequestOrderCancellation } from 'legacy/state/orders/hooks'
 
@@ -68,7 +71,7 @@ export function MultipleOrdersCancellationModal(props: Props): ReactNode {
 
   if (cancellationError) {
     const errorMessage = isRejectRequestProviderError(cancellationError)
-      ? 'User rejected signing the cancellation'
+      ? t`User rejected signing the cancellation`
       : getIsOrderBookTypedError(cancellationError)
         ? cancellationError.body.description || cancellationError.body.errorType
         : (getProviderErrorMessage(cancellationError) ?? String(cancellationError))
@@ -86,9 +89,9 @@ export function MultipleOrdersCancellationModal(props: Props): ReactNode {
         <ConfirmationPendingContent
           modalMode
           onDismiss={onDismiss}
-          title={<>Cancelling {ordersCount} orders</>}
-          description="Canceling your order"
-          operationLabel="cancellation"
+          title={t`Cancelling ${ordersCount} orders`}
+          description={t`Canceling your order`}
+          operationLabel={t`cancellation`}
         />
       </Modal>
     )
@@ -97,20 +100,24 @@ export function MultipleOrdersCancellationModal(props: Props): ReactNode {
   return (
     <Modal isOpen={isOpen} onDismiss={onDismiss}>
       <LegacyConfirmationModalContent
-        title={`Cancel multiple orders: ${ordersCount}`}
+        title={t`Cancel multiple orders: ${ordersCount}`}
         onDismiss={onDismiss}
         // TODO: Extract nested component outside render function
         // eslint-disable-next-line react/no-unstable-nested-components
         topContent={() => (
           <div>
-            <p>Are you sure you want to cancel {ordersCount} orders?</p>
+            <p>
+              <Trans>Are you sure you want to cancel {ordersCount} orders?</Trans>
+            </p>
           </div>
         )}
         // TODO: Extract nested component outside render function
         // eslint-disable-next-line react/no-unstable-nested-components
         bottomContent={() => (
           <div>
-            <ButtonPrimary onClick={signAndSendCancellation}>Request cancellations</ButtonPrimary>
+            <ButtonPrimary onClick={signAndSendCancellation}>
+              <Trans>Request cancellations</Trans>
+            </ButtonPrimary>
           </div>
         )}
       />

apps/cowswap-frontend/src/common/containers/OrderHooksDetails/HookItem/index.tsx

@@ -2,6 +2,8 @@ import { useState } from 'react'
 
 import { CowHookDetails, HookToDappMatch } from '@cowprotocol/hook-dapp-lib'
 
+import { t } from '@lingui/core/macro'
+import { Trans, useLingui } from '@lingui/react/macro'
 import { ChevronDown, ChevronUp } from 'react-feather'
 
 import { useSimulationData } from 'modules/tenderly/hooks/useSimulationData'
@@ -13,12 +15,13 @@ import * as styledEl from './styled'
 // TODO: Break down this large function into smaller functions
 // TODO: Add proper return type annotation
 // TODO: Reduce function complexity by extracting logic
-// eslint-disable-next-line max-lines-per-function, @typescript-eslint/explicit-function-return-type, complexity
+// eslint-disable-next-line max-lines-per-function, @typescript-eslint/explicit-function-return-type
 export function HookItem({ details, item, index }: { details?: CowHookDetails; item: HookToDappMatch; index: number }) {
   const [isOpen, setIsOpen] = useState(false)
   const simulationData = useSimulationData(details?.uuid)
+  const { i18n } = useLingui()
 
-  const dappName = item.dapp?.name || 'Unknown Hook'
+  const dappName = item.dapp?.name || t`Unknown Hook`
 
   return (
     <styledEl.HookItemWrapper as="li">
@@ -34,11 +37,13 @@ export function HookItem({ details, item, index }: { details?: CowHookDetails; i
           <styledEl.HookNumber>{index + 1}</styledEl.HookNumber>
           {item.dapp ? (
             <>
-              <img src={item.dapp.image} alt={item.dapp.name} />
-              <span>{item.dapp.name}</span>
+              <img src={item.dapp.image} alt={i18n._(item.dapp.name)} />
+              <span>{i18n._(item.dapp.name)}</span>
             </>
           ) : (
-            <span>Unknown hook dapp</span>
+            <span>
+              <Trans>Unknown hook dapp</Trans>
+            </span>
           )}
         </styledEl.HookItemInfo>
         <styledEl.ToggleIcon isOpen={isOpen}>
@@ -51,7 +56,9 @@ export function HookItem({ details, item, index }: { details?: CowHookDetails; i
             <>
               {simulationData && (
                 <p>
-                  <b>Simulation:</b>
+                  <b>
+                    <Trans>Simulation:</Trans>
+                  </b>
                   <styledEl.SimulationLink status={simulationData.status}>
                     <a
                       href={simulationData.link}
@@ -63,19 +70,27 @@ export function HookItem({ details, item, index }: { details?: CowHookDetails; i
                         label: `${dappName} - ${simulationData.status ? 'Success' : 'Failed'}`,
                       })}
                     >
-                      {simulationData.status ? 'Simulation successful' : 'Simulation failed'}
+                      {simulationData.status ? <Trans>Simulation successful</Trans> : <Trans>Simulation failed</Trans>}
                     </a>
                   </styledEl.SimulationLink>
                 </p>
               )}
               <p>
-                <b>Description:</b> {item.dapp.descriptionShort}
+                <b>
+                  <Trans>Description</Trans>:
+                </b>{' '}
+                {item.dapp?.descriptionShort ? i18n._(item.dapp.descriptionShort) : ''}
               </p>
               <p>
-                <b>Version:</b> {item.dapp.version}
+                <b>
+                  <Trans>Version</Trans>:
+                </b>{' '}
+                {item.dapp.version}
               </p>
               <p>
-                <b>Website:</b>{' '}
+                <b>
+                  <Trans>Website</Trans>:
+                </b>{' '}
                 <a
                   href={item.dapp.website}
                   target="_blank"