Merge pull request #22 from xmtp-labs/ar/onboarding-cleanup

Onboarding Updates: Update Onboard wallet

src/components/ConversationHeader.tsx

@@ -1,6 +1,6 @@
 import {BlurView} from '@react-native-community/blur';
-import {HStack, VStack} from 'native-base';
-import React, {FC} from 'react';
+import {Box, HStack, VStack} from 'native-base';
+import React, {FC, PropsWithChildren} from 'react';
 import {Platform, Pressable, StyleSheet} from 'react-native';
 import {useContactInfo} from '../hooks/useContactInfo';
 import {useTypedNavigation} from '../hooks/useTypedNavigation';
@@ -15,6 +15,17 @@ interface ConversationHeaderProps {
   onAvatarPress: () => void;
 }
 
+const HeaderContainer: FC<PropsWithChildren> = ({children}) => {
+  if (Platform.OS === 'ios') {
+    return (
+      <BlurView style={styles.blur} blurType="light" blurAmount={5}>
+        {children}
+      </BlurView>
+    );
+  }
+  return <Box style={styles.blur}>{children}</Box>;
+};
+
 export const ConversationHeader: FC<ConversationHeaderProps> = ({
   peerAddress,
   onAvatarPress,
@@ -23,7 +34,7 @@ export const ConversationHeader: FC<ConversationHeaderProps> = ({
   const {displayName, avatarUrl} = useContactInfo(peerAddress);
 
   return (
-    <BlurView style={styles.blur} blurType="light" blurAmount={5}>
+    <HeaderContainer>
       <HStack
         w={'100%'}
         alignItems={'center'}
@@ -53,7 +64,7 @@ export const ConversationHeader: FC<ConversationHeaderProps> = ({
           />
         </Pressable>
       </HStack>
-    </BlurView>
+    </HeaderContainer>
   );
 };
 
@@ -63,7 +74,7 @@ const styles = StyleSheet.create({
     width: '100%',
     zIndex: 10,
     elevation: 10,
-    paddingTop: Platform.OS === 'ios' ? 60 : 0,
+    paddingTop: Platform.OS === 'ios' ? 60 : 20,
     paddingBottom: 8,
   },
 });

src/components/ConversationInput.tsx

@@ -1,6 +1,6 @@
 import {Box, HStack, Image, Pressable, VStack} from 'native-base';
 import React, {FC, useCallback, useEffect, useState} from 'react';
-import {StyleSheet, TextInput} from 'react-native';
+import {Platform, StyleSheet, TextInput} from 'react-native';
 import {
   Asset,
   launchCamera,
@@ -62,9 +62,9 @@ export const ConversationInput: FC<ConversationInputProps> = ({
         mediaType: 'photo',
       },
       response => {
-        response.assets?.forEach(asset => {
-          if (asset.uri) {
-            setAssetUri(asset);
+        response.assets?.forEach(resAsset => {
+          if (resAsset.uri) {
+            setAssetUri(resAsset);
           }
         });
       },
@@ -77,9 +77,9 @@ export const ConversationInput: FC<ConversationInputProps> = ({
         mediaType: 'photo',
       },
       response => {
-        response.assets?.forEach(asset => {
-          if (asset.uri) {
-            setAssetUri(asset);
+        response.assets?.forEach(resAsset => {
+          if (resAsset.uri) {
+            setAssetUri(resAsset);
           }
         });
       },
@@ -129,9 +129,13 @@ export const ConversationInput: FC<ConversationInputProps> = ({
         borderWidth={2}
         paddingLeft={4}
         marginX={2}
-        paddingY={2}
+        paddingY={Platform.select({
+          ios: 2,
+          android: 0,
+        })}
         bottom={0}
         borderRadius={24}
+        alignItems={'center'}
         borderBottomRightRadius={0}>
         <TextInput
           value={text}

src/components/WalletOptionButton.tsx

@@ -0,0 +1,44 @@
+import {HStack} from 'native-base';
+import React, {FC} from 'react';
+import {Pressable} from 'react-native';
+import {Icon, IconName} from './common/Icon';
+import {Text} from './common/Text';
+
+interface WalletOptionButtonProps {
+  onPress: () => void;
+  title: string;
+  icon: IconName;
+}
+
+export const WalletOptionButton: FC<WalletOptionButtonProps> = ({
+  onPress,
+  title,
+  icon,
+}) => {
+  return (
+    <Pressable onPress={onPress}>
+      <HStack
+        w="100%"
+        justifyContent={'space-between'}
+        borderRadius={'16px'}
+        borderColor={'#E5E5E5'}
+        borderWidth={1}
+        alignItems={'center'}
+        marginY={'4px'}
+        padding={'16px'}>
+        <HStack alignItems={'center'}>
+          <Icon name={icon} size={33} />
+          <Text typography="text-title/bold" paddingLeft={'9px'}>
+            {title}
+          </Text>
+        </HStack>
+        <Icon
+          style={{justifyContent: 'flex-end', alignSelf: 'center'}}
+          name="arrow-right-circle-thick"
+          type="mini"
+          size={24}
+        />
+      </HStack>
+    </Pressable>
+  );
+};

src/components/common/Button.tsx

@@ -1,6 +1,18 @@
 import {IButtonProps, Button as NativeButton} from 'native-base';
 import React from 'react';
+import {Platform} from 'react-native';
 
 export const Button = (props: IButtonProps) => {
-  return <NativeButton borderRadius={'120px'} {...props} />;
+  // Bug related to Android and icons rendered by native-base
+  const rightIcon = Platform.OS === 'ios' ? props.rightIcon : undefined;
+  const leftIcon = Platform.OS === 'ios' ? props.leftIcon : undefined;
+
+  return (
+    <NativeButton
+      borderRadius={'120px'}
+      {...props}
+      rightIcon={rightIcon}
+      leftIcon={leftIcon}
+    />
+  );
 };

src/components/common/Icon.tsx

@@ -309,7 +309,10 @@ export type IconName =
   | 'wrench-screwdriver'
   | 'x-circle'
   | 'x-mark'
-  | 'xmtp-logo';
+  | 'xmtp-logo'
+  | 'walletconnect'
+  | 'metamask'
+  | 'coinbase-wallet';
 
 type IconType = 'mini' | 'outline' | 'solid';
 
@@ -623,6 +626,9 @@ const iconSet = new Set<IconName>([
   'x-circle',
   'x-mark',
   'xmtp-logo',
+  'walletconnect',
+  'metamask',
+  'coinbase-wallet',
 ]);
 
 const getIcon = (name: IconName, type: IconType) => {
@@ -3508,7 +3514,14 @@ const getIcon = (name: IconName, type: IconType) => {
 
     // case 'xmtp-logo':
     //   return require('../../../assets/icons/xmtp-logo.svg').default;
+    case 'walletconnect':
+      return require('../../../assets/icons/walletconnect.svg').default;
 
+    case 'metamask':
+      return require('../../../assets/icons/metamask.svg').default;
+
+    case 'coinbase-wallet':
+      return require('../../../assets/icons/coinbase_wallet.svg').default;
     default:
       return null;
   }

src/components/common/Modal.tsx

@@ -19,14 +19,16 @@ export const Modal: FC<PropsWithChildren<ModalProps>> = ({
   }
   return (
     <>
-      <BlurView style={styles.absolute} blurType="dark" blurAmount={10}>
+      <BlurView style={styles.absolute} blurType="light" blurAmount={10}>
         <TouchableOpacity
           onPress={onBackgroundPress}
           style={{width: '100%', height: '100%'}}
         />
       </BlurView>
       <BaseModal isOpen={isOpen} onClose={onBackgroundPress}>
-        <BaseModal.Content backgroundColor={colors.backgroundPrimary}>
+        <BaseModal.Content
+          backgroundColor={colors.backgroundPrimary}
+          borderRadius={'24px'}>
           <BaseModal.Body>{children}</BaseModal.Body>
         </BaseModal.Content>
       </BaseModal>

src/consts/AppConfig.ts

@@ -2,4 +2,5 @@
 export const AppConfig = {
   IMAGE_UPLOAD_ENABLED: false,
   LENS_ENABLED: false,
+  GROUPS_ENABLED: true,
 };

src/i18n/locales/en.json

@@ -20,6 +20,7 @@
     "This address has never sent you a message before. Do you want to allow them to message you?",
   "no": "No",
   "yes": "Yes",
+  "start": "Start",
 
   "xmtp_app_directory": "XMTP App Directory",
 
@@ -30,6 +31,8 @@
   "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?",
 
   "step_1_of_2": "Step 1 of 2",
   "create_your_xmtp_identity": "Create your XMTP identity",
@@ -46,5 +49,10 @@
 
   "yesterday": "Yesterday",
 
-  "conversation_image_alt": "Attached Image"
+  "conversation_image_alt": "Attached Image",
+
+  "walletconnect": "WalletConnect",
+  "metamask": "Metamask",
+  "coinbase_wallet": "Coinbase Wallet",
+  "guest_wallet": "Guest Wallet"
 }