feat: add lingui eslint and localize strings

apps/mobile/.eslintrc.yml

@@ -1,11 +1,24 @@
 extends:
   - '@leather.io/eslint-config'
   - universe/native
+plugins:
+  - 'lingui'
 parserOptions:
   project: ./tsconfig.json
 ignorePatterns:
   - .eslintrc.js
   - '*.js'
+  - '*.spec.ts'
+  - '*.test.ts'
 rules:
   import/order: 0
   no-void: 0
+  lingui/no-unlocalized-strings:
+    - error
+    - ignoreFunction:
+        - Error
+  lingui/t-call-in-function: 2
+  lingui/no-single-variables-to-translate: 2
+  lingui/no-expression-in-message: 2
+  lingui/no-single-tag-to-translate: 2
+  lingui/no-trans-inside-trans: 2

apps/mobile/package.json

@@ -134,6 +134,7 @@
     "detox": "20.22.2",
     "eslint": "8.53.0",
     "eslint-config-universe": "12.0.0",
+    "eslint-plugin-lingui": "0.3.0",
     "jest": "29.7.0",
     "react-test-renderer": "18.2.0",
     "redux-devtools-expo-dev-plugin": "0.2.1",

apps/mobile/src/app/waiting-list/waiting-list.tsx

@@ -7,7 +7,6 @@ import CheckmarkCircle from '@/assets/checkmark-circle.svg';
 import XLogo from '@/assets/logo-x.svg';
 import { AnimatedButton, Button, ButtonState } from '@/components/button';
 import { InputState, TextInput } from '@/components/text-input';
-import { TransText } from '@/components/trans-text';
 import { BROWSER_EXTENSION_LINK, TWITTER_LINK } from '@/constants';
 import { useSubmitWaitingListEmailForm } from '@/queries/use-submit-waiting-list-form-email';
 import { emailRegexp } from '@/utils/regexp';
@@ -227,16 +226,16 @@ export function WaitingList(props: WelcomeScreenLayoutProps) {
 
   const submittedComponent = (
     <Box backgroundColor="ink.background-primary" padding="6">
-      <TransText variant="body01" color="ink.text-subdued" paddingBottom="5">
-        Thanks for subscribing! We'll notify you when Leather's mobile app launches. In the
-        meantime, please{' '}
+      <Text variant="body01" color="ink.text-subdued" paddingBottom="5">
+        {t`Thanks for subscribing! We'll notify you when Leather's mobile app launches. In the
+        meantime, please `}
         <Text
           onPress={() => Linking.openURL(BROWSER_EXTENSION_LINK)}
           textDecorationLine="underline"
         >
-          check out our browser extension.
+          {t`check out our browser extension.`}
         </Text>
-      </TransText>
+      </Text>
       <Button
         testID={WelcomeScreenTestIds.OpenXButton}
         onPress={() => Linking.openURL(TWITTER_LINK)}
@@ -260,9 +259,9 @@ export function WaitingList(props: WelcomeScreenLayoutProps) {
 
   const submissionComponent = (
     <Box backgroundColor="ink.background-primary" padding="6">
-      <TransText variant="body01" color="ink.text-subdued" paddingBottom="5">
-        Stay in the loop and be the first one to hear about new developments
-      </TransText>
+      <Text variant="body01" color="ink.text-subdued" paddingBottom="5">
+        {t`Stay in the loop and be the first one to hear about new developments`}
+      </Text>
 
       <TextInput
         value={email}
@@ -323,20 +322,20 @@ export function WaitingList(props: WelcomeScreenLayoutProps) {
             </Box>
             <Trans>
               <Animated.View style={title1Style}>
-                <TransText variant="heading02" color="ink.text-primary">
+                <Text variant="heading02" color="ink.text-primary">
                   Bitcoin for
-                </TransText>
+                </Text>
               </Animated.View>
               <Animated.View style={title2Style}>
-                <TransText variant="heading02" color="ink.text-primary">
+                <Text variant="heading02" color="ink.text-primary">
                   the rest of us
-                </TransText>
+                </Text>
               </Animated.View>
             </Trans>
             <Animated.View style={subtitleStyle}>
-              <TransText variant="heading05" color="ink.text-primary" paddingTop="5">
-                Leather is the only wallet you need to tap into the multilayered Bitcoin economy
-              </TransText>
+              <Text variant="heading05" color="ink.text-primary" paddingTop="5">
+                {t`Leather is the only wallet you need to tap into the multilayered Bitcoin economy`}
+              </Text>
             </Animated.View>
             <Animated.View
               style={[{ position: 'absolute', transform: [{ rotateZ: '100deg' }] }, btcStyle]}

apps/mobile/src/app/wallet/(tabs)/_layout.tsx

@@ -8,12 +8,12 @@ import { ActionBarContainer, ActionBarContext } from '@/components/action-bar/co
 import { Modal } from '@/components/bottom-sheet-modal';
 import { BlurredHeader } from '@/components/headers/containers/blurred-header';
 import { TabBar } from '@/components/tab-bar';
-import { TransText } from '@/components/trans-text';
 import { APP_ROUTES } from '@/constants';
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import { t } from '@lingui/macro';
 import { Tabs, usePathname, useRouter } from 'expo-router';
 
-import { Box, TouchableOpacity } from '@leather.io/ui/native';
+import { Box, Text, TouchableOpacity } from '@leather.io/ui/native';
 
 function HeaderCenter({ onPress }: { onPress?(): void }) {
   return (
@@ -28,7 +28,7 @@ function HeaderCenter({ onPress }: { onPress?(): void }) {
       <Box borderRadius="round" p="1" bg="blue.background-secondary">
         <EmojiSmile width={24} height={24} />
       </Box>
-      <TransText variant="heading05">Account 1</TransText>
+      <Text variant="heading05">{t`Account 1`}</Text>
     </TouchableOpacity>
   );
 }
@@ -57,21 +57,21 @@ function HeaderBottom() {
           onPress() {
             router.navigate(APP_ROUTES.WalletAllAssets);
           },
-          title: 'All assets',
+          title: t`All assets`,
           isActive: pathname === APP_ROUTES.WalletAllAssets,
         },
         {
           onPress() {
             router.navigate(APP_ROUTES.WalletTokens);
           },
-          title: 'Tokens',
+          title: t`Tokens`,
           isActive: pathname === APP_ROUTES.WalletTokens,
         },
         {
           onPress() {
             router.navigate(APP_ROUTES.WalletCollectibles);
           },
-          title: 'Collectibles',
+          title: t`Collectibles`,
           isActive: pathname === APP_ROUTES.WalletCollectibles,
         },
       ]}
@@ -104,28 +104,28 @@ export default function TabLayout() {
         <Tabs.Screen
           name="all-assets"
           options={{
-            title: 'All Assets',
+            title: t`All Assets`,
             header: () => NavigationHeader,
           }}
         />
         <Tabs.Screen
           name="collectibles"
           options={{
-            title: 'Collectibles',
+            title: t`Collectibles`,
             header: () => NavigationHeader,
           }}
         />
         <Tabs.Screen
           name="tokens"
           options={{
-            title: 'Tokens',
+            title: t`Tokens`,
             header: () => NavigationHeader,
           }}
         />
       </Tabs>
       <ActionBarContainer ref={ref} />
       <Modal ref={bottomSheetModalRef}>
-        <TransText>Dummy modal text 🎉 Add blocks to see responsive modal</TransText>
+        <Text>{t`Dummy modal text 🎉 Add blocks to see responsive modal`}</Text>
       </Modal>
     </ActionBarContext.Provider>
   );

apps/mobile/src/app/wallet/(tabs)/all-assets.tsx

@@ -6,55 +6,57 @@ import { ACTION_BAR_TOTAL_HEIGHT } from '@/components/action-bar';
 import { createOnScrollHandler, useActionBarContext } from '@/components/action-bar/container';
 import { HEADER_HEIGHT } from '@/components/headers/constants';
 import { TAB_BAR_HEIGHT } from '@/components/tab-bar';
+import { t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
 
 import { Text, Theme } from '@leather.io/ui/native';
 
-const DATA = [
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-  {
-    title: 'Amazing asset',
-  },
-];
-
+function getDummyData() {
+  return [
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+    {
+      title: t`Amazing asset`,
+    },
+  ];
+}
 export default function SendScreen() {
   const { top, bottom } = useSafeAreaInsets();
   const [refreshing, setRefreshing] = useState(false);
@@ -81,7 +83,7 @@ export default function SendScreen() {
         snapToAlignment="center"
         contentInset={{ top: contentOffsetTop, bottom: contentOffsetBottom }}
         contentOffset={{ x: 0, y: -contentOffsetTop }}
-        data={DATA}
+        data={getDummyData()}
         renderItem={({ item }) => (
           <Text style={{ height: 100, backgroundColor: 'green' }}>{item.title}</Text>
         )}

apps/mobile/src/app/wallet/(tabs)/collectibles.tsx

@@ -1,23 +1,23 @@
 import { StyleSheet, View } from 'react-native';
 
-import { TransText } from '@/components/trans-text';
 import { APP_ROUTES } from '@/constants';
+import { t } from '@lingui/macro';
 import { useRouter } from 'expo-router';
 
-import { TouchableOpacity } from '@leather.io/ui/native';
+import { Text, TouchableOpacity } from '@leather.io/ui/native';
 
 export default function SwapScreen() {
   const router = useRouter();
   return (
     <View style={styles.container}>
-      <TransText>Collectibles 🖼️</TransText>
+      <Text>{t`Collectibles 🖼️`}</Text>
       <TouchableOpacity
         onPress={() => router.navigate(APP_ROUTES.WalletBrowser)}
         p="4"
         bg="ink.background-primary"
         borderRadius="sm"
       >
-        <TransText>navigate to browser</TransText>
+        <Text>{t`navigate to browser`}</Text>
       </TouchableOpacity>
     </View>
   );

apps/mobile/src/app/wallet/(tabs)/tokens.tsx

@@ -1,11 +1,13 @@
 import { StyleSheet, View } from 'react-native';
 
-import { TransText } from '@/components/trans-text';
+import { t } from '@lingui/macro';
+
+import { Text } from '@leather.io/ui/native';
 
 export default function TokenScreen() {
   return (
     <View style={styles.container}>
-      <TransText>Tokens 🪙</TransText>
+      <Text>{t`Tokens 🪙`}</Text>
     </View>
   );
 }

apps/mobile/src/app/wallet/_layout.tsx

@@ -10,13 +10,17 @@ import { LeatherLogoHeader } from '@/components/headers/leather-logo';
 import { MenuHeader } from '@/components/headers/menu';
 import { OptionsHeader } from '@/components/headers/options';
 import { TitleHeader } from '@/components/headers/title';
+import { t } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { Stack, useRouter } from 'expo-router';
 
 export const ActionBarContext = createContext<{ ref: RefObject<ActionBarMethods> | null }>({
   ref: null,
 });
 
 export default function StackLayout() {
+  // connect this component to changes in i18n locale
+  useLingui();
   const insets = useSafeAreaInsets();
   const router = useRouter();
 
@@ -41,15 +45,15 @@ export default function StackLayout() {
     <SimpleHeader
       insets={insets}
       left={<BackButtonHeader onPress={() => router.back()} />}
-      center={<TitleHeader title="Settings" />}
+      center={<TitleHeader title={t`Settings`} />}
     />
   );
 
   const NavigationDeveloperConsole = (
     <SimpleHeader
       insets={insets}
       left={<BackButtonHeader onPress={() => router.back()} />}
-      center={<TitleHeader title="Developer tools" />}
+      center={<TitleHeader title={t`Developer tools`} />}
     />
   );