Add toast on session approval (#46)

* Add toast on session_approval

* Handle case where request icon is null

* Change camera permission message

* Fix comments

* Fix import order

---------

Co-authored-by: Adw8 <adwait@deepstacksoft.com>

App.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Snackbar } from 'react-native-paper';
 
 import { SignClientTypes } from '@walletconnect/types';
 import { NavigationContainer } from '@react-navigation/native';
@@ -30,7 +31,7 @@ const App = (): React.JSX.Element => {
   const { requestSession, setRequestSession } = useRequests();
 
   const [modalVisible, setModalVisible] = useState(false);
-  //TODO: Remove any
+  const [toastVisible, setToastVisible] = useState(false);
   const [currentProposal, setCurrentProposal] = useState<
     SignClientTypes.EventArguments['session_proposal'] | undefined
   >();
@@ -85,7 +86,7 @@ const App = (): React.JSX.Element => {
       web3wallet?.off('session_proposal', onSessionProposal);
       web3wallet?.off('session_request', onSessionRequest);
     };
-    //TODO: Investigate dependancies
+    //TODO: Investigate dependencies
   });
 
   const linking = {
@@ -147,7 +148,19 @@ const App = (): React.JSX.Element => {
         currentProposal={currentProposal}
         setCurrentProposal={setCurrentProposal}
         currentEthAddresses={currentEthAddresses}
+        setToastVisible={setToastVisible}
       />
+      <Snackbar
+        visible={toastVisible}
+        onDismiss={() => setToastVisible(false)}
+        action={{
+          label: 'Ok',
+          onPress: () => {
+            setToastVisible(false);
+          },
+        }}>
+        Session approved
+      </Snackbar>
     </NavigationContainer>
   );
 };

components/PairingModal.tsx

@@ -15,6 +15,7 @@ const PairingModal = ({
   currentEthAddresses,
   setCurrentProposal,
   setModalVisible,
+  setToastVisible,
 }: PairingModalProps) => {
   const url = currentProposal?.params?.proposer?.metadata.url;
   const methods = currentProposal?.params?.requiredNamespaces.eip155.methods;
@@ -47,6 +48,7 @@ const PairingModal = ({
       });
 
       setModalVisible(false);
+      setToastVisible(true);
       setCurrentProposal(undefined);
     }
   };

components/SignRequest.tsx

@@ -160,12 +160,12 @@ const SignRequest = ({ route }: SignRequestProps) => {
       ) : (
         <View style={styles.appContainer}>
           <View style={styles.dappDetails}>
+            {requestIcon && (
               <Image
                 style={styles.dappLogo}
-              source={{
-                uri: requestIcon,
-              }}
+                source={requestIcon ? { uri: requestIcon } : undefined}
               />
+            )}
             <Text>{requestName}</Text>
             <Text variant="bodyMedium">{requestURL}</Text>
           </View>

components/WalletConnect.tsx

@@ -62,7 +62,9 @@ const WalletConnect = () => {
     <View style={styles.appContainer}>
       {!hasPermission || !device ? (
         <Text>
-          {!hasPermission ? 'No Camera Permission!' : 'No Camera Selected!'}
+          {!hasPermission
+            ? 'No Camera Permission granted'
+            : 'No Camera Selected'}
         </Text>
       ) : (
         <>

types.ts

@@ -98,6 +98,7 @@ export interface PairingModalProps {
   setCurrentProposal: (
     arg1: SignClientTypes.EventArguments['session_proposal'] | undefined,
   ) => void;
+  setToastVisible: (arg1: boolean) => void;
 }
 
 export interface SignModalProps {