Updates

Fix up some styles
ephemeraHQ · Feb 12, 2024 · 1600841 · 1600841
1 parent 18ce885
commit 1600841
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 27 deletions.
diff --git a/src/components/GroupListItem.tsx b/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>

diff --git a/src/components/modals/GroupInfoModal.tsx b/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>
   );
 };

diff --git a/src/hooks/useGroupContactInfo.ts b/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;
 };
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -68,5 +68,8 @@
   "get_groups": "Get Groups",
   "get_contacts": "Get Contacts",
 
-  "discover": "Discover"
+  "discover": "Discover",
+
+  "valid_address": "Valid Ethereum Address",
+  "message_requests_from_new_addresses": "Message requests from addresses you’ve never interacted with show up here"
 }
diff --git a/src/screens/ConversationListScreen.tsx b/src/screens/ConversationListScreen.tsx
@@ -94,7 +94,7 @@ const ListHeader: FC<ListHeaderProps> = ({
     }
   }, [navigate]);
   return (
-    <VStack>
+    <VStack marginTop={'4px'}>
       <HStack
         w={'100%'}
         justifyContent={'space-between'}
@@ -158,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 ? (

diff --git a/src/screens/SearchScreen.tsx b/src/screens/SearchScreen.tsx
@@ -1,4 +1,4 @@
-import {getAddress} from 'ethers/lib/utils';
+import {getAddress, isAddress} from 'ethers/lib/utils';
 import {Box, HStack, Input, Pressable, SectionList, VStack} from 'native-base';
 import React, {FC, useCallback, useEffect, useMemo, useState} from 'react';
 import {SectionListRenderItem} from 'react-native';
@@ -141,6 +141,8 @@ export const SearchScreen = () => {
     navigate(ScreenNames.NewConversation, {addresses: participants});
   }, [participants, navigate, goBack]);
 
+  const isValidAddress = useMemo(() => isAddress(searchText), [searchText]);
+
   const items = useMemo(() => {
     const {filtered: filteredRecents, mapping: recentMapping} = recents.reduce<{
       filtered: Contact[];
@@ -267,6 +269,17 @@ export const SearchScreen = () => {
         paddingY={'12px'}
         paddingX={'8px'}
       />
+      {isValidAddress && (
+        <HStack paddingX={'16px'} paddingTop={'16px'} w="100%">
+          <Icon name="check-circle" color={colors.actionPositive} size={17} />
+          <Text
+            paddingLeft={'8px'}
+            color={colors.actionPositive}
+            typography="text-xs/semi-bold">
+            {translate('valid_address')}
+          </Text>
+        </HStack>
+      )}
       <VStack paddingX={'16px'} paddingTop={'16px'} w="100%">
         <HStack flexWrap={'wrap'}>
           {participants.map(participant => {