fix(i18n): various fixes and improvements (#1718)

* wrap sock around function component to get re-renders

* removed sourcelocale since we are using custom ids

* load locale data dynamically

* undo dev change

* ran yarn i18n:extract

* make SOCK component lower case

* fixed unmerged conflicts

* regenerated po for wallet.socks

* added loadLocaleData

lingui.config.js

@@ -18,5 +18,4 @@ module.exports = {
   pseudoLocale: 'pseudo-en',
   rootDir: '.',
   runtimeConfigModule: ['@lingui/core', 'i18n'],
-  sourceLocale: 'en',
 }

src/components/Web3Status/index.tsx

@@ -123,11 +123,17 @@ function newTransactionsFirst(a: TransactionDetails, b: TransactionDetails) {
   return b.addedTime - a.addedTime
 }
 
-const SOCK = (
-  <span role="img" aria-label="has socks emoji" style={{ marginTop: -4, marginBottom: -4 }}>
-    🧦
-  </span>
-)
+function Sock() {
+  return (
+    <span
+      role="img"
+      aria-label={t({ id: 'wallet.hasSocks', message: 'has socks emoji' })}
+      style={{ marginTop: -4, marginBottom: -4 }}
+    >
+      🧦
+    </span>
+  )
+}
 
 // eslint-disable-next-line react/prop-types
 function StatusIcon({ connector }: { connector: AbstractConnector }) {
@@ -191,7 +197,7 @@ function Web3StatusInner() {
           </RowBetween>
         ) : (
           <>
-            {hasSocks ? SOCK : null}
+            {hasSocks ? <Sock /> : null}
             <Text>{ENSName || shortenAddress(account)}</Text>
           </>
         )}

src/i18n.tsx

@@ -7,9 +7,6 @@ import { ReactNode, useEffect } from 'react'
 export const locales = ['en', 'pseudo-en', 'de', 'es-AR', 'es-US', 'it-IT', 'iw', 'ro', 'ru', 'vi', 'zh-CN', 'zh-TW']
 export const defaultLocale = 'en'
 
-// load locale data for each supported language
-locales.forEach((locale) => i18n.loadLocaleData(locale, { plurals: () => null }))
-
 const getDetectedLocale = () => {
   const detected =
     detect(
@@ -21,6 +18,7 @@ const getDetectedLocale = () => {
 
 export async function dynamicActivate(locale: string) {
   const { messages } = await import(`@lingui/loader!./locales/${locale}.po`)
+  i18n.loadLocaleData(locale, { plurals: () => null })
   i18n.load(locale, messages)
   i18n.activate(locale)
 }

src/locales/de.po

@@ -770,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""

src/locales/en.po

@@ -770,6 +770,10 @@ msgstr "Connect to a wallet"
 msgid "wallet.ethBalance"
 msgstr "{0} ETH"
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr "has socks emoji"
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr "You must connect an account."

src/locales/es-AR.po

@@ -770,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""

src/locales/es-US.po

@@ -770,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""

src/locales/it-IT.po

@@ -770,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""

src/locales/iw.po

@@ -770,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""

src/locales/pseudo-en.po

@@ -6,6 +6,12 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "X-Generator: @lingui/cli\n"
 "Language: pseudo-en\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
 
 #: src/pages/AddLiquidity/index.tsx
 msgid "addLiquidity.labels.currentPrice"
@@ -764,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""

src/locales/ro.po

@@ -770,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""

src/locales/ru.po

@@ -770,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""

src/locales/vi.po

@@ -770,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""

src/locales/zh-CN.po

@@ -770,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""

src/locales/zh-TW.po

@@ -770,6 +770,10 @@ msgstr ""
 msgid "wallet.ethBalance"
 msgstr ""
 
+#: src/components/Web3Status/index.tsx
+msgid "wallet.hasSocks"
+msgstr ""
+
 #: src/pages/MigrateV2/MigrateV2Pair.tsx
 msgid "wallet.mustConnectAccount"
 msgstr ""