Error Messaging for Onboarding

src/i18n/locales/en.json

@@ -71,5 +71,7 @@
   "discover": "Discover",
 
   "valid_address": "Valid Ethereum Address",
-  "message_requests_from_new_addresses": "Message requests from addresses you’ve never interacted with show up here"
+  "message_requests_from_new_addresses": "Message requests from addresses you’ve never interacted with show up here",
+
+  "wallet_error": "Wallet Error"
 }

src/screens/OnboardingConnectWalletScreen.tsx

@@ -1,5 +1,6 @@
 import {BlurView} from '@react-native-community/blur';
 import {
+  WalletConfig,
   coinbaseWallet,
   localWallet,
   metamaskWallet,
@@ -8,8 +9,8 @@ import {
   walletConnect,
 } from '@thirdweb-dev/react-native';
 import {VStack} from 'native-base';
-import React, {useEffect, useState} from 'react';
-import {Image, Linking} from 'react-native';
+import React, {useCallback, useEffect, useState} from 'react';
+import {Alert, Image, Linking} from 'react-native';
 import {WalletOptionButton} from '../components/WalletOptionButton';
 import {Button} from '../components/common/Button';
 import {Icon} from '../components/common/Icon';
@@ -43,6 +44,18 @@ export const OnboardingConnectWalletScreen = () => {
     }
   }, [address, navigate]);
 
+  const handleConnect = useCallback(
+    async (config: WalletConfig<any>) => {
+      try {
+        await connect(config);
+        setShowModal(false);
+      } catch (error: any) {
+        Alert.alert(translate('wallet_error'), error?.message);
+      }
+    },
+    [connect],
+  );
+
   return (
     <>
       <Screen testId={TestIds.ONBOARDING_CONNECT_WALLET_SCREEN}>
@@ -93,37 +106,25 @@ export const OnboardingConnectWalletScreen = () => {
             {translate('you_can_connect_or_create')}
           </Text>
           <WalletOptionButton
-            onPress={async () => {
-              await connect(walletConnectConfig);
-              setShowModal(false);
-            }}
+            onPress={() => handleConnect(walletConnectConfig)}
             title={translate('walletconnect')}
             icon={'walletconnect'}
             testId={TestIds.ONBOARDING_CONNECT_WALLET_CONNECT_OPTION_BUTTON}
           />
           <WalletOptionButton
-            onPress={async () => {
-              await connect(metamaskConfig);
-              setShowModal(false);
-            }}
+            onPress={() => handleConnect(metamaskConfig)}
             title={translate('metamask')}
             icon={'metamask'}
             testId={TestIds.ONBOARDING_CONNECT_METAMASK_OPTION_BUTTON}
           />
           <WalletOptionButton
-            onPress={async () => {
-              await connect(coinbaseWalletConfig);
-              setShowModal(false);
-            }}
+            onPress={() => handleConnect(coinbaseWalletConfig)}
             title={translate('coinbase_wallet')}
             icon={'coinbase-wallet'}
             testId={TestIds.ONBOARDING_CONNECT_COINBASE_OPTION_BUTTON}
           />
           <WalletOptionButton
-            onPress={async () => {
-              await connect(localWalletConfig);
-              setShowModal(false);
-            }}
+            onPress={() => handleConnect(localWalletConfig)}
             title={translate('guest_wallet')}
             icon={'wallet'}
             testId={TestIds.ONBOARDING_CONNECT_GUEST_OPTION_BUTTON}

src/screens/OnboardingEnableIdentityScreen.tsx

@@ -1,8 +1,8 @@
 import {useDisconnect, useSigner} from '@thirdweb-dev/react-native';
 import {Client} from '@xmtp/react-native-sdk';
 import {VStack} from 'native-base';
-import React, {useCallback, useEffect, useState} from 'react';
-import {DeviceEventEmitter, Image} from 'react-native';
+import {useCallback, useEffect, useState} from 'react';
+import {Alert, DeviceEventEmitter, Image} from 'react-native';
 import {Button} from '../components/common/Button';
 import {Icon} from '../components/common/Icon';
 import {Screen} from '../components/common/Screen';
@@ -69,8 +69,9 @@ export const OnboardingEnableIdentityScreen = () => {
         const address = await signer.getAddress();
         saveClientKeys(address as `0x${string}`, keys);
         setClient(client);
-      } catch (e) {
+      } catch (e: any) {
         console.log('Error creating client', e);
+        Alert.alert('Error creating client', e?.message);
       }
     };
     startClientCreation();