Add multi language support

Cleanup group input Added more translations Cleaned up client creation
ephemeraHQ · Feb 12, 2024 · 18ce885 · 18ce885
1 parent f2ea3b8
commit 18ce885
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 68 deletions.
diff --git a/src/consts/AppConfig.ts b/src/consts/AppConfig.ts
@@ -1,9 +1,7 @@
-import {Platform} from 'react-native';
-
 // Just a way to gate some features that are not ready yet
 export const AppConfig = {
   IMAGE_UPLOAD_ENABLED: false,
   LENS_ENABLED: false,
-  GROUPS_ENABLED: Platform.OS === 'android' ? true : false,
   XMTP_ENV: 'dev' as 'local' | 'dev' | 'production',
+  MULTI_WALLET: false,
 };
diff --git a/src/context/ClientContext.tsx b/src/context/ClientContext.tsx
@@ -48,7 +48,7 @@ export const ClientProvider: FC<PropsWithChildren> = ({children}) => {
         }
         Client.createFromKeyBundle(keys, {
           codecs: [new RemoteAttachmentCodec()],
-          enableAlphaMls: AppConfig.GROUPS_ENABLED,
+          enableAlphaMls: true,
           env: AppConfig.XMTP_ENV,
         })
           .then(newClient => {

diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -1,12 +1,21 @@
 import {I18n} from 'i18n-js';
+import {findBestLanguageTag} from 'react-native-localize';
 import en from './locales/en.json';
+import th from './locales/th.json';
 
 type Translation = typeof en;
 
 const i18n = new I18n({
   en,
+  th,
 });
 
+// If user's locale is Thai, the app will use Thai translation
+// If user's locale is English, the app will use English translation
+// If user's locale is not Thai or English, the app will use English translation
+const bestLanguageTag = findBestLanguageTag(['en', 'th']);
+i18n.locale = bestLanguageTag?.languageTag ?? 'en';
+
 export const translations: Translation = en;
 
 export const translate = (

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -1,5 +1,4 @@
 {
-
   "show_collectibles_publicly": "Show collectibles publicly",
   "notifications": "Notifications",
   "privacy": "Privacy",
@@ -9,15 +8,15 @@
   "connect_existing_wallet": "Connect existing wallet",
   "create_new_wallet": "Create new wallet",
   "you": "You",
+  "search": "Search",
 
   "youve_got_no_messages": "You’ve got no messages",
   "start_a_conversation_to_get_going": "Start a conversation to get going!",
   "filter_conversations": "Filter conversations",
   "all_messages": "All Messages",
   "message_requests": "Message requests",
   "message_requests_count": "%{count} Message requests",
-  "this_address_has_never_sent_you":
-    "This address has never sent you a message before. Do you want to allow them to message you?",
+  "this_address_has_never_sent_you": "This address has never sent you a message before. Do you want to allow them to message you?",
   "no": "No",
   "yes": "Yes",
   "start": "Start",
@@ -28,8 +27,7 @@
   "contacts": "Contacts",
 
   "your_interoperable_web3_inbox": "Your interoperable web3 inbox",
-  "youre_just_a_few_steps_away_from_secure_wallet_to_wallet_messaging":
-    "You're just a few steps away from secure, wallet-to-wallet messaging",
+  "youre_just_a_few_steps_away_from_secure_wallet_to_wallet_messaging": "You're just a few steps away from secure, wallet-to-wallet messaging",
   "connect_your_wallet": "Connect your wallet",
   "you_can_connect_or_create": "You can connect or create a wallet via Wallet Connect.",
   "whats_a_wallet": "What's a wallet?",
@@ -68,5 +66,7 @@
   "group_members_queries": "Group Members Queries",
   "get_conversations": "Get Conversations",
   "get_groups": "Get Groups",
-  "get_contacts": "Get Contacts"
-}
+  "get_contacts": "Get Contacts",
+
+  "discover": "Discover"
+}
diff --git a/src/i18n/locales/th.json b/src/i18n/locales/th.json
@@ -0,0 +1,72 @@
+{
+  "show_collectibles_publicly": "แสดงของสะสมแบบสาธารณะ",
+  "notifications": "การแจ้งเตือน",
+  "privacy": "ความเป็นส่วนตัว",
+  "support": "สนับสนุน",
+  "clear_local_data": "ล้างข้อมูลในเครื่อง",
+  "disconnect_wallet": "ยกเลิกการเชื่อมต่อกระเป๋าเงิน",
+  "connect_existing_wallet": "เชื่อมต่อกระเป๋าเงินที่มีอยู่",
+  "create_new_wallet": "สร้างกระเป๋าเงินใหม่",
+  "you": "คุณ",
+  "search": "ค้นหา",
+
+  "youve_got_no_messages": "คุณไม่มีข้อความ",
+  "start_a_conversation_to_get_going": "เริ่มการสนทนาเพื่อเริ่มต้น!",
+  "filter_conversations": "กรองการสนทนา",
+  "all_messages": "ข้อความทั้งหมด",
+  "message_requests": "คำขอข้อความ",
+  "message_requests_count": "%{count} คำขอข้อความ",
+  "this_address_has_never_sent_you": "ที่อยู่นี้ไม่เคยส่งข้อความให้คุณมาก่อน คุณต้องการอนุญาตให้พวกเขาส่งข้อความให้คุณหรือไม่?",
+  "no": "ไม่",
+  "yes": "ใช่",
+  "start": "เริ่ม",
+
+  "xmtp_app_directory": "ไดเร็กทอรีแอป XMTP",
+
+  "recents": "ล่าสุด",
+  "contacts": "รายชื่อติดต่อ",
+
+  "your_interoperable_web3_inbox": "กล่องข้อความ web3 ที่ใช้งานร่วมกันได้ของคุณ",
+  "youre_just_a_few_steps_away_from_secure_wallet_to_wallet_messaging": "คุณอยู่ห่างจากการส่งข้อความจากกระเป๋าเงินไปยังกระเป๋าเงินอย่างปลอดภัยเพียงไม่กี่ขั้นตอน",
+  "connect_your_wallet": "เชื่อมต่อกระเป๋าเงินของคุณ",
+  "you_can_connect_or_create": "คุณสามารถเชื่อมต่อหรือสร้างกระเป๋าเงินผ่าน Wallet Connect",
+  "whats_a_wallet": "กระเป๋าเงินคืออะไร?",
+
+  "step_1_of_2": "ขั้นตอนที่ 1 จาก 2",
+  "create_your_xmtp_identity": "สร้างตัวตน XMTP ของคุณ",
+  "now_that_your_wallet_is_connected": "ตอนนี้ที่กระเป๋าเงินของคุณได้เชื่อมต่อแล้ว เรากำลังจะสร้างตัวตน XMTP ของคุณบนเครือข่ายของเราด้วยลายเซ็นกระเป๋าเงิน",
+  "create_xmtp_identity": "สร้างตัวตน XMTP",
+  "step_2_of_2": "ขั้นตอนที่ 2 จาก 2",
+
+  "domain_origin": "ที่มาของโดเมน",
+
+  "copy_your_code": "คัดลอกโค้ดของคุณ",
+
+  "allow": "อนุญาต",
+  "block": "บล็อก",
+
+  "yesterday": "เมื่อวาน",
+
+  "conversation_image_alt": "รูปภาพที่แนบ",
+
+  "walletconnect": "WalletConnect",
+  "metamask": "Metamask",
+  "coinbase_wallet": "Coinbase Wallet",
+  "guest_wallet": "กระเป๋าเงินแขก",
+  "group_changed": "กลุ่มเปลี่ยนแปลง",
+  "add_to_group": "เพิ่ม",
+  "group": "กลุ่ม",
+
+  "dev_screen": "หน้าจอพัฒนา",
+  "client": "ไคลเอนต์",
+  "address": "ที่อยู่",
+  "list_queries": "รายการคิวรี",
+  "conversation_messages_queries": "ข้อความสนทนา",
+  "group_messages_queries": "คิวรีข้อความกลุ่ม",
+  "group_members_queries": "คิวรีสมาชิกกลุ่ม",
+  "get_conversations": "รับการสนทนา",
+  "get_groups": "รับกลุ่ม",
+  "get_contacts": "รับรายชื่อติดต่อ",
+
+  "discover": "ค้นพบ"
+}
diff --git a/src/screens/AccountSettingsScreen.tsx b/src/screens/AccountSettingsScreen.tsx
@@ -312,7 +312,11 @@ export const AccountSettingsScreen = () => {
           onLongPress={() =>
             __DEV__ ? Clipboard.setString(client?.address ?? '') : {}
           }
-          onPress={() => setWalletsShown(true)}
+          onPress={() => {
+            if (AppConfig.MULTI_WALLET) {
+              setWalletsShown(true);
+            }
+          }}
           variant={'ghost'}
           rightIcon={
             <Icon

diff --git a/src/screens/ConversationListScreen.tsx b/src/screens/ConversationListScreen.tsx
@@ -138,7 +138,9 @@ const ListHeader: FC<ListHeaderProps> = ({
               }
               onPress={showPickerModal}>
               <Text typography="text-sm/heavy">
-                {list === 'ALL_MESSAGES' ? 'All Messages' : 'Message Requests'}
+                {list === 'ALL_MESSAGES'
+                  ? translate('all_messages')
+                  : translate('message_requests')}
               </Text>
             </Button>
           </Box>

diff --git a/src/screens/DiscoverScreen.tsx b/src/screens/DiscoverScreen.tsx
@@ -273,7 +273,7 @@ export const DiscoverScreen = () => {
     <Screen
       title={
         <Text typography="text-lg/heavy" textAlign={'center'}>
-          Discover
+          {translate('discover')}
         </Text>
       }
       left={

diff --git a/src/screens/GroupScreen.tsx b/src/screens/GroupScreen.tsx
@@ -1,15 +1,8 @@
 import {useRoute} from '@react-navigation/native';
 import {DecodedMessage, RemoteAttachmentContent} from '@xmtp/react-native-sdk';
-import {
-  Box,
-  FlatList,
-  HStack,
-  KeyboardAvoidingView,
-  Pressable,
-  VStack,
-} from 'native-base';
+import {Box, FlatList, HStack, Pressable, VStack} from 'native-base';
 import React, {useCallback, useEffect, useState} from 'react';
-import {ListRenderItem, Platform} from 'react-native';
+import {KeyboardAvoidingView, ListRenderItem, Platform} from 'react-native';
 import {Asset} from 'react-native-image-picker';
 import {ConversationInput} from '../components/ConversationInput';
 import {ConversationMessageContent} from '../components/ConversationMessageContent';
@@ -184,10 +177,8 @@ export const GroupScreen = () => {
           />
           <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-            keyboardVerticalOffset={50}
-            height={'100%'}
-            paddingBottom={'10px'}
-            w="100%">
+            style={{height: '100%'}}
+            keyboardVerticalOffset={10}>
             <Box flex={1}>
               <FlatList
                 keyExtractor={item => item.id}

diff --git a/src/screens/OnboardingEnableIdentityScreen.tsx b/src/screens/OnboardingEnableIdentityScreen.tsx
@@ -54,7 +54,7 @@ export const OnboardingEnableIdentityScreen = () => {
       }
       try {
         const client = await Client.create(signer, {
-          enableAlphaMls: AppConfig.GROUPS_ENABLED,
+          enableAlphaMls: true,
           env: AppConfig.XMTP_ENV,
           preEnableIdentityCallback: async () => {
             await enableIdentityPromise();

diff --git a/src/screens/SearchScreen.tsx b/src/screens/SearchScreen.tsx
@@ -8,7 +8,6 @@ import {Icon} from '../components/common/Icon';
 import {Pill} from '../components/common/Pill';
 import {Screen} from '../components/common/Screen';
 import {Text} from '../components/common/Text';
-import {AppConfig} from '../consts/AppConfig';
 import {TestIds} from '../consts/TestIds';
 import {useClient} from '../hooks/useClient';
 import {useContactInfo} from '../hooks/useContactInfo';
@@ -132,18 +131,9 @@ export const SearchScreen = () => {
   const {recents, contacts} = useData();
   const onItemPress = useCallback(
     (item: Contact) => {
-      if (AppConfig.GROUPS_ENABLED) {
-        setParticipants([...participants, item.address]);
-      } else {
-        goBack();
-        if (item.isConnected && item.topic) {
-          navigate(ScreenNames.Conversation, {topic: item.topic});
-        } else {
-          navigate(ScreenNames.NewConversation, {addresses: [item.address]});
-        }
-      }
+      setParticipants(prev => [...prev, item.address]);
     },
-    [goBack, navigate, participants],
+    [setParticipants],
   );
 
   const onGroupStart = useCallback(() => {
@@ -234,7 +224,7 @@ export const SearchScreen = () => {
       testId={TestIds.SEARCH_SCREEN}
       title={
         <Text typography="text-lg/heavy" textAlign={'center'}>
-          {translate('you')}
+          {translate('search')}
         </Text>
       }
       left={
@@ -277,33 +267,31 @@ export const SearchScreen = () => {
         paddingY={'12px'}
         paddingX={'8px'}
       />
-      {AppConfig.GROUPS_ENABLED && (
-        <VStack paddingX={'16px'} paddingTop={'16px'} w="100%">
-          <HStack flexWrap={'wrap'}>
-            {participants.map(participant => {
-              return (
-                <Pill
-                  key={participant}
-                  testId={`${TestIds.SEARCH_PARTICIPANTS_LIST_PILL}_${participant}`}
-                  size={'sm'}
-                  onPress={() => removeParticipant(participant)}
-                  text={formatAddress(participant)}
-                />
-              );
-            })}
-          </HStack>
-          {participants.length > 0 && (
-            <Button
-              testID={TestIds.SEARCH_START_BUTTON}
-              w={20}
-              alignSelf={'center'}
-              size={'xs'}
-              onPress={onGroupStart}>
-              {translate('start')}
-            </Button>
-          )}
-        </VStack>
-      )}
+      <VStack paddingX={'16px'} paddingTop={'16px'} w="100%">
+        <HStack flexWrap={'wrap'}>
+          {participants.map(participant => {
+            return (
+              <Pill
+                key={participant}
+                testId={`${TestIds.SEARCH_PARTICIPANTS_LIST_PILL}_${participant}`}
+                size={'sm'}
+                onPress={() => removeParticipant(participant)}
+                text={formatAddress(participant)}
+              />
+            );
+          })}
+        </HStack>
+        {participants.length > 0 && (
+          <Button
+            testID={TestIds.SEARCH_START_BUTTON}
+            w={20}
+            alignSelf={'center'}
+            size={'xs'}
+            onPress={onGroupStart}>
+            {translate('start')}
+          </Button>
+        )}
+      </VStack>
       <SectionList
         w={'100%'}
         sections={items}
-Original file line number
+Diff line change
@@ Expand Up / @@ -273,7 +273,7 @@ export const DiscoverScreen = () => { @@
         <Screen
           title={
             <Text typography="text-lg/heavy" textAlign={'center'}>
-              Discover
+              {translate('discover')}
             </Text>
           }
           left={
@@ Expand Down @@