chore: pare down the locales directory to let the crowdin sync do the work

.github/workflows/crowdin.yaml

@@ -21,11 +21,11 @@ jobs:
         uses: crowdin/github-action@1.1.0
         with:
           upload_sources: true
-          upload_translations: true
           download_translations: true
           project_id: 458284
           token: ${{ secrets.CROWDIN_PERSONAL_TOKEN_SECRET }}
           source: 'src/locales/en.po'
           translation: 'src/locales/%locale%.po'
+          pull_request_title: "chore(i18n): synchronize translations from Crowdin"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

CONTRIBUTING.md

+# Development
+
+## Install Dependencies
+
+```bash
+yarn install
+```
+
+## Run the interface
+
+```bash
+yarn start
+```
+
+# Contributing
+
 Thank you for your interest in contributing to the Uniswap interface! 🦄
 
-# Coding
+## Finding a first issue
 
-**Please open all pull requests against the `main` branch.**
-CI checks will run against all PRs.
+Start with issues with the label
+[`good first issue`](https://github.com/Uniswap/uniswap-interface/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22).
 
-See [README.md](https://github.com/Uniswap/uniswap-interface/blob/main/README.md) for instructions on running the app locally.
+## Pull requests
 
-Start with issues with label [good first issue](https://github.com/Uniswap/uniswap-interface/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22).
+**Please open all pull requests against the `main` branch.**
+CI checks will run against all PRs.
 
 # Translations
 
 Help Uniswap cover more languages!
 
-Uniswap interface uses PO file to manage translations. See [Working with PO Files](https://www.gnu.org/software/trans-coord/manual/gnun/html_node/PO-Files.html#PO-Files)
+## Translation file format
+
+We use the PO file to manage translations. 
+See [Working with PO Files](https://www.gnu.org/software/trans-coord/manual/gnun/html_node/PO-Files.html#PO-Files)
 
-## Starting a New Translation
+## Translating the Interface to a new language
 
-Uniswap interface uses [LinguiJS](https://lingui.js.org/) to manage locales and translations.
+**WIP INSTRUCTIONS**
 
-- Follow instructions in [README.md](https://github.com/Uniswap/uniswap-interface/blob/main/README.md) for instructions on running the app locally
-- Add `locale` to locales array in [lingui.config.js](https://github.com/Uniswap/uniswap-interface/blob/main/lingui.config.js#L14)
-- Add `locale` to locales array in [i18n.tsx](https://github.com/Uniswap/uniswap-interface/blob/main/src/i18n.tsx#L7)
-- Run `yarn i18n:extract` to generate [src/locales/{locale}.po](https://github.com/Uniswap/uniswap-interface/tree/main/src/locales)
-- Continue to [Existing Translation](#existing-translation) below
+Uniswap Interface uses [LinguiJS](https://lingui.js.org/) and [Crowdin](https://crowdin.com/project/uniswap-interface) 
+to manage locales and translations.
 
 ## Existing Translation
 
-- Edit [src/locales](https://github.com/Uniswap/uniswap-interface/tree/main/src/locales)/{locale}.po either manually or with a PO editor (see [Editing PO Files](https://www.gnu.org/software/trans-coord/manual/web-trans/html_node/PO-Editors.html)).
-- Run `yarn i18n:compile` to generate src/locales/{locale}.js
-- Run `yarn start` to start a server locally to verify changes (append `?lng={locale}` query param)
-- Submit PR against main
+**WIP INSTRUCTIONS**

README.md

@@ -25,23 +25,9 @@ To access the Uniswap Interface, use an IPFS gateway link from the
 [latest release](https://github.com/Uniswap/uniswap-interface/releases/latest),
 or visit [app.uniswap.org](https://app.uniswap.org).
 
-## Development
-
-### Install Dependencies
-
-```bash
-yarn install
-```
-
-### Run
-
-```bash
-yarn start
-```
-
 ## Contributions
 
-See [CONTRIBUTING](CONTRIBUTING.md).
+See [CONTRIBUTING](./CONTRIBUTING.md).
 
 ## Accessing Uniswap V2
 

lingui.config.js → lingui.config.ts

-module.exports = {
+export default {
   catalogs: [
     {
       path: '<rootDir>/src/locales/{locale}',
@@ -13,9 +13,8 @@ module.exports = {
   formatOptions: {
     lineNumbers: false,
   },
-  locales: ['en', 'pseudo-en', 'de', 'es-AR', 'es-US', 'it-IT', 'iw', 'ro', 'ru', 'vi', 'zh-CN', 'zh-TW'],
+  locales: ['en'],
   orderBy: 'messageId',
-  pseudoLocale: 'pseudo-en',
   rootDir: '.',
   runtimeConfigModule: ['@lingui/core', 'i18n'],
   sourceLocale: 'en',

src/constants/locales.ts

-export const SUPPORTED_LOCALES = [
-  'en',
-  'pseudo-en',
-  'de',
-  'es-AR',
-  'es-US',
-  'it-IT',
-  'iw',
-  'ro',
-  'ru',
-  'vi',
-  'zh-CN',
-  'zh-TW',
-] as const
+export const SUPPORTED_LOCALES = ['en'] as const
 export type SupportedLocale = typeof SUPPORTED_LOCALES[number]
 
 export const DEFAULT_LOCALE: SupportedLocale = 'en'
 
 export const LOCALE_LABEL: { [locale in SupportedLocale]: string } = {
   en: 'English',
-  de: 'Deutsch',
-  'es-AR': 'español (Argentina)',
-  'es-US': 'español (Estados Unidos)',
-  'it-IT': 'italiano',
-  iw: 'Hebrew',
-  ro: 'română',
-  ru: 'русский',
-  vi: 'Tiếng Việt',
-  'zh-CN': '中文 ( 中国 )',
-  'zh-TW': '中文 ( 台灣 )',
-  'pseudo-en': '',
 }

src/hooks/useActiveLocale.ts

@@ -3,10 +3,25 @@ import { useMemo } from 'react'
 import { useUserLocale } from 'state/user/hooks'
 import useParsedQueryString from './useParsedQueryString'
 
+/**
+ * Mapping from locales without region (e.g. es) to the default region specific locale (e.g. es-US)
+ */
+const MAPPED_DEFAULT_LOCALES: { [localeWithoutRegion: string]: SupportedLocale } = {}
+
+/**
+ * Given a locale string (e.g. from user agent), return the best match for corresponding SupportedLocale
+ * @param maybeSupportedLocale the fuzzy locale identifier
+ */
 function parseLocale(maybeSupportedLocale: string): SupportedLocale | undefined {
-  return SUPPORTED_LOCALES.find((locale) => locale === maybeSupportedLocale)
+  return (
+    MAPPED_DEFAULT_LOCALES[maybeSupportedLocale.toLowerCase()] ??
+    SUPPORTED_LOCALES.find((locale) => locale === maybeSupportedLocale)
+  )
 }
 
+/**
+ * Returns the supported locale read from the user agent (navigator)
+ */
 function navigatorLocale(): SupportedLocale | undefined {
   if (!navigator.language) return undefined
 
@@ -19,6 +34,9 @@ function navigatorLocale(): SupportedLocale | undefined {
   return parseLocale(language)
 }
 
+/**
+ * Returns the currently active locale, from a combination of user agent, query string, and user settings stored in redux
+ */
 export function useActiveLocale(): SupportedLocale {
   const parsed = useParsedQueryString()
   const userLocale = useUserLocale()

src/i18n.tsx

@@ -6,21 +6,19 @@ import { useActiveLocale } from 'hooks/useActiveLocale'
 import { SupportedLocale } from 'constants/locales'
 
 export async function dynamicActivate(locale: SupportedLocale) {
-  try {
-    const { messages } = await import(`@lingui/loader!./locales/${locale}.po`)
-    i18n.loadLocaleData(locale, { plurals: () => null })
-    i18n.load(locale, messages)
-    i18n.activate(locale)
-  } catch (error) {
-    console.error(`Failed to load locale data for ${locale}`, error)
-  }
+  const { messages } = await import(`@lingui/loader!./locales/${locale}.po`)
+  i18n.loadLocaleData(locale, { plurals: () => null })
+  i18n.load(locale, messages)
+  i18n.activate(locale)
 }
 
 export function LanguageProvider({ children }: { children: ReactNode }) {
   const locale = useActiveLocale()
 
   useEffect(() => {
-    dynamicActivate(locale)
+    dynamicActivate(locale).catch((error) => {
+      console.error('Failed to activate locale', locale, error)
+    })
   }, [locale])
 
   return <I18nProvider i18n={i18n}>{children}</I18nProvider>