From e60d26626e6fad5a9d161d35a1459d6415a0e1d6 Mon Sep 17 00:00:00 2001
From: Alex Risch <alexrisch@Alexs-MacBook-Pro-2.local>
Date: Thu, 15 Feb 2024 18:58:32 -0700
Subject: [PATCH] Error Messaging for Onboarding

Added Error Alerts
---
 src/i18n/locales/en.json                      |  4 +-
 src/screens/OnboardingConnectWalletScreen.tsx | 37 ++++++++++---------
 .../OnboardingEnableIdentityScreen.tsx        |  7 ++--
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 17863bd..357a6af 100644
--- a/src/i18n/locales/en.json
+++ b/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"
 }
diff --git a/src/screens/OnboardingConnectWalletScreen.tsx b/src/screens/OnboardingConnectWalletScreen.tsx
index 485960a..5160972 100644
--- a/src/screens/OnboardingConnectWalletScreen.tsx
+++ b/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}
diff --git a/src/screens/OnboardingEnableIdentityScreen.tsx b/src/screens/OnboardingEnableIdentityScreen.tsx
index 621dcf7..1a07f40 100644
--- a/src/screens/OnboardingEnableIdentityScreen.tsx
+++ b/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();