feat: add language dropdown

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

@@ -49,16 +49,27 @@ export type RoutesValues = (typeof Routes)[RoutesKeys]
 
 export interface IMenuItem {
   route: RoutesValues
-  label: string | MessageDescriptor
-  fullLabel?: MessageDescriptor
-  description: MessageDescriptor
-  badge?: string | MessageDescriptor
+  label: string
+  fullLabel?: string
+  description: string
+  badge?: string
   badgeImage?: string
   badgeType?: (typeof BadgeTypes)[keyof typeof BadgeTypes]
 }
 
-export const MENU_ITEMS: IMenuItem[] = [
-  { route: Routes.SWAP, label: msg`Swap`, description: msg`Trade tokens` },
+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`Limits`,
@@ -72,15 +83,15 @@ export const MENU_ITEMS: IMenuItem[] = [
   },
 ]
 
-export const HOOKS_STORE_MENU_ITEM: IMenuItem = {
+export const HOOKS_STORE_MENU_ITEM: i18nIMenuItem = {
   route: Routes.HOOKS,
   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 = {
+export const YIELD_MENU_ITEM: i18nIMenuItem = {
   route: Routes.YIELD,
   label: msg`Yield`,
   fullLabel: msg`Yield`,

apps/cowswap-frontend/src/common/hooks/useMenuItems.ts

@@ -1,27 +1,43 @@
-import { useMemo } from 'react'
+import { useCallback } from 'react'
 
 import { useFeatureFlags } from '@cowprotocol/common-hooks'
 import { isLocal } from '@cowprotocol/common-utils'
 
+import { useLingui } from '@lingui/react/macro'
+
 import { useHooksEnabled } from 'legacy/state/user/hooks'
 
-import { HOOKS_STORE_MENU_ITEM, MENU_ITEMS, IMenuItem, YIELD_MENU_ITEM } from '../constants/routes'
+import { HOOKS_STORE_MENU_ITEM, MENU_ITEMS, IMenuItem, i18nIMenuItem, YIELD_MENU_ITEM } from '../constants/routes'
 
 export function useMenuItems(): IMenuItem[] {
   const isHooksEnabled = useHooksEnabled()
   const { isYieldEnabled } = useFeatureFlags()
-
-  return useMemo(() => {
-    const items = [...MENU_ITEMS]
-
-    if (isHooksEnabled) {
-      items.push(HOOKS_STORE_MENU_ITEM)
-    }
-
-    if (isYieldEnabled || isLocal) {
-      items.push(YIELD_MENU_ITEM)
-    }
-
-    return items
-  }, [isHooksEnabled, isYieldEnabled])
+  const { i18n } = useLingui()
+
+  const extractMenuItem = useCallback(
+    (item: i18nIMenuItem): IMenuItem => {
+      const { label, fullLabel, description, badge, ...restProps } = item
+
+      return {
+        label: i18n._(label),
+        fullLabel: fullLabel ? i18n._(fullLabel) : undefined,
+        description: i18n._(description),
+        badge: badge ? i18n._(badge) : undefined,
+        ...restProps,
+      }
+    },
+    [i18n],
+  )
+
+  const items: IMenuItem[] = MENU_ITEMS.map((item) => extractMenuItem(item))
+
+  if (isHooksEnabled) {
+    items.push(extractMenuItem(HOOKS_STORE_MENU_ITEM))
+  }
+
+  if (isYieldEnabled || isLocal) {
+    items.push(extractMenuItem(YIELD_MENU_ITEM))
+  }
+
+  return items
 }

apps/cowswap-frontend/src/common/pure/AddressInputPanel/index.tsx

@@ -10,8 +10,7 @@ import { useENS } from '@cowprotocol/ens'
 import { ExternalLink, RowBetween, UI } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
-import { t } from '@lingui/core/macro'
-import { Trans } from '@lingui/react/macro'
+import { Trans, useLingui } from '@lingui/react/macro'
 import styled from 'styled-components/macro'
 
 import { AutoColumn } from 'legacy/components/Column'
@@ -104,6 +103,7 @@ export function AddressInputPanel({
   value: string
   onChange: (value: string) => void
 }) {
+  const { t } = useLingui()
   const { chainId } = useWalletInfo()
   const chainInfo = getChainInfo(chainId)
   const addressPrefix = chainInfo?.addressPrefix

apps/cowswap-frontend/src/common/pure/ReceiveAmount/index.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
 import { TokenAmount } from '@cowprotocol/ui'
 import { Currency } from '@uniswap/sdk-core'
 
-import { t } from '@lingui/core/macro'
+import { useLingui } from '@lingui/react/macro'
 
 import { BalanceAndSubsidy } from 'legacy/hooks/useCowBalanceAndSubsidy'
 
@@ -22,9 +22,8 @@ export interface ReceiveAmountProps {
 
 export function ReceiveAmount(props: ReceiveAmountProps): ReactNode {
   const { isSell } = props.receiveAmountInfo
-
+  const { t } = useLingui()
   const { amountAfterFees } = getOrderTypeReceiveAmounts(props.receiveAmountInfo)
-
   const title = amountAfterFees.toExact() + ' ' + props.currency.symbol
 
   return (

apps/cowswap-frontend/src/common/utils/getSwapErrorMessage.ts

@@ -1,16 +1,12 @@
 import { capitalizeFirstLetter, getProviderErrorMessage, isRejectRequestProviderError } from '@cowprotocol/common-utils'
 
-import { MessageDescriptor } from '@lingui/core'
-import { i18n } from '@lingui/core'
-import { msg } from '@lingui/core/macro'
-
 import { isValidOperatorError } from 'api/cowProtocol/errors/OperatorError'
 
-export const USER_SWAP_REJECTED_ERROR: MessageDescriptor = msg`User rejected signing the order`
+export const USER_SWAP_REJECTED_ERROR: string = `User rejected signing the order`
 
 export function getSwapErrorMessage(error: Error): string {
   if (isRejectRequestProviderError(error)) {
-    return i18n._(USER_SWAP_REJECTED_ERROR)
+    return USER_SWAP_REJECTED_ERROR
   } else {
     const defaultErrorMessage = getProviderErrorMessage(error) || String(error)
 

apps/cowswap-frontend/src/i18n.tsx

@@ -13,14 +13,14 @@ dynamicActivate(initialLocale)
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function LanguageProvider({ children }: { children: ReactNode }) {
   const locale = useActiveLocale()
-  const [, setUserLocale] = useUserLocaleManager()
+  const { setLocale } = useUserLocaleManager()
 
   const onActivate = useCallback(
     (locale: SupportedLocale) => {
       document.documentElement.setAttribute('lang', locale)
-      setUserLocale(locale) // stores the selected locale to persist across sessions
+      setLocale(locale) // stores the selected locale to persist across sessions
     },
-    [setUserLocale]
+    [setLocale],
   )
 
   return (

apps/cowswap-frontend/src/legacy/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx

@@ -6,8 +6,8 @@ import { AutoRow, ButtonEmpty, ExternalLink, Media, RowBetween } from '@cowproto
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { Currency } from '@uniswap/sdk-core'
 
-import { i18n } from '@lingui/core'
 import { MessageDescriptor } from '@lingui/core'
+import { useLingui } from '@lingui/react/macro'
 import styled from 'styled-components/macro'
 import { ThemedText, Z_INDEX, CloseIcon } from 'theme'
 
@@ -66,16 +66,15 @@ export default function UnsupportedCurrencyFooter({
   detailsText,
   showDetailsText,
 }: UnsupportedCurrencyFooterParams) {
+  const { i18n } = useLingui()
   const { chainId } = useWalletInfo()
   const [showDetails, setShowDetails] = useState(false)
-
   const tokens =
     chainId && currencies
       ? currencies.map((currency) => {
           return currency && getWrappedToken(currency)
         })
       : []
-
   const isUnsupportedToken = useIsUnsupportedToken()
 
   return (

apps/cowswap-frontend/src/legacy/state/user/hooks.tsx

@@ -40,7 +40,10 @@ export function useUserLocale(): SupportedLocale | null {
   return useAppSelector((state) => state.user.userLocale)
 }
 
-export function useUserLocaleManager(): [SupportedLocale | null, (newLocale: SupportedLocale) => void] {
+export function useUserLocaleManager(): {
+  locale: SupportedLocale | null
+  setLocale: (newLocale: SupportedLocale) => void
+} {
   const dispatch = useAppDispatch()
   const locale = useUserLocale()
 
@@ -51,7 +54,7 @@ export function useUserLocaleManager(): [SupportedLocale | null, (newLocale: Sup
     [dispatch],
   )
 
-  return [locale, setLocale]
+  return { locale, setLocale }
 }
 
 export function useHooksEnabled(): boolean {

apps/cowswap-frontend/src/lib/i18n.tsx

@@ -4,84 +4,10 @@ import { DEFAULT_LOCALE, SupportedLocale } from '@cowprotocol/common-const'
 
 import { i18n } from '@lingui/core'
 import { I18nProvider } from '@lingui/react'
-import {
-  af,
-  ar,
-  ca,
-  cs,
-  da,
-  de,
-  el,
-  en,
-  es,
-  fi,
-  fr,
-  he,
-  hu,
-  id,
-  it,
-  ja,
-  ko,
-  nl,
-  no,
-  pl,
-  pt,
-  ro,
-  ru,
-  sr,
-  sv,
-  sw,
-  tr,
-  uk,
-  vi,
-  zh,
-} from 'make-plural/plurals'
-import { PluralCategory } from 'make-plural/plurals'
-
-type LocalePlural = {
-  [key in SupportedLocale]: (n: number | string, ord?: boolean) => PluralCategory
-}
-
-const plurals: LocalePlural = {
-  'af-ZA': af,
-  'ar-SA': ar,
-  'ca-ES': ca,
-  'cs-CZ': cs,
-  'da-DK': da,
-  'de-DE': de,
-  'el-GR': el,
-  'en-US': en,
-  'es-ES': es,
-  'fi-FI': fi,
-  'fr-FR': fr,
-  'he-IL': he,
-  'hu-HU': hu,
-  'id-ID': id,
-  'it-IT': it,
-  'ja-JP': ja,
-  'ko-KR': ko,
-  'nl-NL': nl,
-  'no-NO': no,
-  'pl-PL': pl,
-  'pt-BR': pt,
-  'pt-PT': pt,
-  'ro-RO': ro,
-  'ru-RU': ru,
-  'sr-SP': sr,
-  'sv-SE': sv,
-  'sw-TZ': sw,
-  'tr-TR': tr,
-  'uk-UA': uk,
-  'vi-VN': vi,
-  'zh-CN': zh,
-  'zh-TW': zh,
-  pseudo: en,
-}
 
 // TODO: Add proper return type annotation
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export async function dynamicActivate(locale: SupportedLocale) {
-  i18n.loadLocaleData(locale, { plurals: plurals[locale] })
   try {
     const catalog = await import(`../locales/${locale}.po`)
     // Bundlers will either export it as default or as a named export named default.
@@ -115,7 +41,6 @@ export function Provider({ locale, onActivate, children }: ProviderProps) {
   // as [there are no "default" messages](https://github.com/lingui/js-lingui/issues/388#issuecomment-497779030).
   // See https://github.com/lingui/js-lingui/issues/1194#issuecomment-1068488619.
   if (i18n.locale === undefined && locale === DEFAULT_LOCALE) {
-    i18n.loadLocaleData(DEFAULT_LOCALE, { plurals: plurals[DEFAULT_LOCALE] })
     i18n.load(DEFAULT_LOCALE, {})
     i18n.activate(DEFAULT_LOCALE)
   }

apps/cowswap-frontend/src/locales/en-US.po

@@ -619,6 +619,10 @@ msgstr "Order recipient address differs from order owner!"
 msgid "Import intermediate token"
 msgstr "Import intermediate token"
 
+#: libs/ui/src/pure/MenuBar/index.tsx
+msgid "Language {locale} not found"
+msgstr "Language {locale} not found"
+
 #: apps/cowswap-frontend/src/common/pure/ExternalSourceAlert/index.tsx
 msgid "I understand"
 msgstr "I understand"
@@ -1197,6 +1201,10 @@ msgstr "Connect Wallet"
 msgid "View all orders"
 msgstr "View all orders"
 
+#: apps/cowswap-frontend/src/modules/accountProxy/consts.ts
+msgid "Need help"
+msgstr "Need help"
+
 #: apps/cowswap-frontend/src/modules/orderProgressBar/pure/TransactionSubmittedContent/SurplusModal.tsx
 msgid "CoW Swap is the only token exchange that gets you extra tokens."
 msgstr "CoW Swap is the only token exchange that gets you extra tokens."
@@ -1481,6 +1489,10 @@ msgstr "<0>Note:</0> {symbol} specifically requires 2 approval transactions. The
 msgid "Earn higher returns with reduced impermanent loss"
 msgstr "Earn higher returns with reduced impermanent loss"
 
+#: apps/cowswap-frontend/src/modules/swap/containers/BottomBanners/index.tsx
+msgid "Funds stuck? <0>Recover your funds</0>"
+msgstr "Funds stuck? <0>Recover your funds</0>"
+
 #: apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/warnings/SwapPriceDifferenceWarning.tsx
 msgid "Maximizing Your Gains!"
 msgstr "Maximizing Your Gains!"
@@ -1991,8 +2003,8 @@ msgid "If allowance remains insufficient at creation time, this portion will not
 msgstr "If allowance remains insufficient at creation time, this portion will not be created. Approve the"
 
 #: apps/cowswap-frontend/src/common/utils/getSwapErrorMessage.ts
-msgid "User rejected signing the order"
-msgstr "User rejected signing the order"
+#~ msgid "User rejected signing the order"
+#~ msgstr "User rejected signing the order"
 
 #: apps/cowswap-frontend/src/modules/orderProgressBar/constants.ts
 msgid "Executing', description: 'The winner of the competition is now executing your order on-chain."