Internationalization & localization (#1822)

* install and setup lingui

* setup dynamic locale activation and async loading

* first pass of automated replacement of text messages

* add some more documentaton

* fix nits

* add `es` and `hi`locales for testing purposes

* make accessibilityLabel localized

* compile and extract new messages

* fix merge conflicts

* fix eslint warning

* change instructions from sending email to opening PR

* fix comments

src/App.web.tsx

@@ -16,6 +16,9 @@ import {Shell} from 'view/shell/index'
 import {ToastContainer} from 'view/com/util/Toast.web'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {queryClient} from 'lib/react-query'
+import {i18n} from '@lingui/core'
+import {I18nProvider} from '@lingui/react'
+import {defaultLocale, dynamicActivate} from './locale/i18n'
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as ModalStateProvider} from 'state/modals'
 import {Provider as MutedThreadsProvider} from 'state/muted-threads'
@@ -34,6 +37,7 @@ const InnerApp = observer(function AppImpl() {
       setRootStore(store)
       analytics.init(store)
     })
+    dynamicActivate(defaultLocale) // async import of locale data
   }, [])
 
   // show nothing prior to init
@@ -47,9 +51,11 @@ const InnerApp = observer(function AppImpl() {
         <RootSiblingParent>
           <analytics.Provider>
             <RootStoreProvider value={rootStore}>
-              <SafeAreaProvider>
-                <Shell />
-              </SafeAreaProvider>
+              <I18nProvider i18n={i18n}>
+                <SafeAreaProvider>
+                  <Shell />
+                </SafeAreaProvider>
+              </I18nProvider>
               <ToastContainer />
             </RootStoreProvider>
           </analytics.Provider>