Merge pull request #36 from xmtp-labs/ar/updates

Ar/updates

src/__mocks__/react-native-localize.ts

@@ -0,0 +1,2 @@
+// __mocks__/react-native-localize.ts
+export * from 'react-native-localize/mock';

src/components/GroupListItem.tsx

@@ -39,7 +39,7 @@ export const GroupListItem: FC<GroupListItemProps> = ({
         <VStack flex={1} justifyContent={'flex-end'}>
           <Text
             numberOfLines={1}
-            ellipsizeMode="middle"
+            ellipsizeMode="tail"
             typography="text-base/bold">
             {groupDisplayName}
           </Text>

src/components/modals/GroupInfoModal.tsx

@@ -1,6 +1,7 @@
 import {Group} from '@xmtp/react-native-sdk/build/lib/Group';
 import {HStack, Pressable, VStack} from 'native-base';
 import React, {FC, useCallback} from 'react';
+import {AppConfig} from '../../consts/AppConfig';
 import {useContactInfo} from '../../hooks/useContactInfo';
 import {translate} from '../../i18n';
 import {colors} from '../../theme/colors';
@@ -24,7 +25,10 @@ const GroupParticipant: React.FC<{
 }> = ({address, onRemove}) => {
   const {displayName, avatarUrl} = useContactInfo(address);
   return (
-    <VStack alignItems={'center'} justifyContent={'center'}>
+    <VStack
+      alignItems={'center'}
+      justifyContent={'center'}
+      marginY={AppConfig.LENS_ENABLED ? 0 : 2}>
       <HStack alignItems={'center'}>
         <Text typography="text-xl/bold" textAlign={'center'}>
           {displayName}
@@ -39,23 +43,27 @@ const GroupParticipant: React.FC<{
           <Icon name={'trash'} type={'mini'} color={colors.actionPrimary} />
         </Pressable>
       </HStack>
-      <Text typography="text-sm/bold">{translate('domain_origin')}</Text>
-      <Button
-        variant={'ghost'}
-        rightIcon={
-          <Icon
-            name={'arrow-right'}
-            type={'mini'}
-            color={colors.actionPrimary}
-          />
-        }>
-        <Text
-          typography="text-base/bold"
-          color={colors.actionPrimary}
-          textAlign={'center'}>
-          {'lenster.xyz'}
-        </Text>
-      </Button>
+      {AppConfig.LENS_ENABLED && (
+        <>
+          <Text typography="text-sm/bold">{translate('domain_origin')}</Text>
+          <Button
+            variant={'ghost'}
+            rightIcon={
+              <Icon
+                name={'arrow-right'}
+                type={'mini'}
+                color={colors.actionPrimary}
+              />
+            }>
+            <Text
+              typography="text-base/bold"
+              color={colors.actionPrimary}
+              textAlign={'center'}>
+              {'lenster.xyz'}
+            </Text>
+          </Button>
+        </>
+      )}
     </VStack>
   );
 };

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,
 };

src/context/ClientContext.tsx

@@ -8,7 +8,7 @@ import React, {
   useState,
 } from 'react';
 import {AppConfig} from '../consts/AppConfig';
-import {getClientKeys} from '../services/encryptedStorage';
+import {clearClientKeys, getClientKeys} from '../services/encryptedStorage';
 
 interface ClientContextValue {
   client: Client<unknown> | null;
@@ -34,24 +34,29 @@ export const ClientProvider: FC<PropsWithChildren> = ({children}) => {
     if (status === 'unknown' || status === 'connecting') {
       return;
     }
-    if (!address) {
+    if (status === 'disconnected') {
       return setLoading(false);
     }
+    if (!address) {
+      // Address still shows as undefined even when connected
+      return;
+    }
     getClientKeys(address as `0x${string}`)
       .then(keys => {
         if (!keys) {
           return setLoading(false);
         }
         Client.createFromKeyBundle(keys, {
           codecs: [new RemoteAttachmentCodec()],
-          enableAlphaMls: AppConfig.GROUPS_ENABLED,
+          enableAlphaMls: true,
           env: AppConfig.XMTP_ENV,
         })
           .then(newClient => {
             setClient(newClient);
             setLoading(false);
           })
           .catch(() => {
+            clearClientKeys(address as `0x${string}`);
             setLoading(false);
           });
       })

src/hooks/useGroupContactInfo.ts

@@ -8,6 +8,7 @@ import {
 } from '../services/mmkvStorage';
 import {formatAddress} from '../utils/formatAddress';
 import {getEnsInfo} from '../utils/getEnsInfo';
+import {useClient} from './useClient';
 
 type GroupContactInfoState = Record<
   string,
@@ -22,6 +23,7 @@ export const useGroupContactInfo = (addresses: string[]) => {
   const [state, setState] = useState<GroupContactInfoState>({});
   const supportedChains = useSupportedChains();
   const {clientId} = useWalletContext();
+  const {client} = useClient();
 
   useEffect(() => {
     addresses.forEach(address => {
@@ -76,11 +78,16 @@ export const useGroupContactInfo = (addresses: string[]) => {
 
     let groupDisplayName = '';
 
-    Object.values(state).forEach(it => {
+    Object.values(state).forEach((it, index) => {
       arr.push(it);
-      groupDisplayName += it.displayName + ', ';
+      if (it.address === client?.address) {
+        return;
+      }
+      groupDisplayName +=
+        it.displayName +
+        (index === Object.values(state).length - 1 ? '' : ', ');
     });
     return {groupDisplayName, data: arr};
-  }, [state]);
+  }, [client?.address, state]);
   return data;
 };

src/i18n/index.ts

@@ -1,12 +1,23 @@
 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'])?.languageTag.split(
+  '-',
+)[0];
+i18n.locale = bestLanguageTag ?? 'en';
+
 export const translations: Translation = en;
 
 export const translate = (

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,10 @@
   "group_members_queries": "Group Members Queries",
   "get_conversations": "Get Conversations",
   "get_groups": "Get Groups",
-  "get_contacts": "Get Contacts"
-}
+  "get_contacts": "Get Contacts",
+
+  "discover": "Discover",
+
+  "valid_address": "Valid Ethereum Address",
+  "message_requests_from_new_addresses": "Message requests from addresses you’ve never interacted with show up here"
+}

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": "ค้นพบ"
+}

src/navigation/AppNavigation.tsx

@@ -45,7 +45,12 @@ export const AppNavigation = () => {
         </LoadingStack.Navigator>
       )}
       {!loading && !client && (
-        <OnboardingStack.Navigator screenOptions={{headerShown: false}}>
+        <OnboardingStack.Navigator
+          screenOptions={{
+            headerShown: false,
+            // https://github.com/Kureev/react-native-blur/issues/595
+            animation: Platform.OS === 'android' ? 'none' : 'default',
+          }}>
           <OnboardingStack.Screen
             name={ScreenNames.OnboardingConnectWallet}
             component={OnboardingConnectWalletScreen}

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

src/screens/ConversationListScreen.tsx

@@ -94,7 +94,7 @@ const ListHeader: FC<ListHeaderProps> = ({
     }
   }, [navigate]);
   return (
-    <VStack>
+    <VStack marginTop={'4px'}>
       <HStack
         w={'100%'}
         justifyContent={'space-between'}
@@ -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>
@@ -156,8 +158,7 @@ const ListHeader: FC<ListHeaderProps> = ({
             typography="text-caption/regular"
             textAlign={'center'}
             color={colors.actionAlertText}>
-            Message requests from addresses you’ve never interacted with show up
-            here
+            {translate('message_requests_from_new_addresses')}
           </Text>
         </Box>
       ) : messageRequestCount > 0 ? (

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={