Display decoded message received while using signDirect method (#52)

* Display decoded message received while using signDirect method

* Fix permission dialog not exiting after clicking outside

* Handle review changes

* Remove optional chaining in while checking for signDirect method

App.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Snackbar, Text } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { TxBody, AuthInfo } from 'cosmjs-types/cosmos/tx/v1beta1/tx';
 
 import { SignClientTypes } from '@walletconnect/types';
-import { getSdkError } from '@walletconnect/utils';
 import { useNavigation } from '@react-navigation/native';
 import {
   NativeStackNavigationProp,
@@ -68,10 +68,26 @@ const App = (): React.JSX.Element => {
 
           break;
         case 'cosmos_signDirect':
+          const message = {
+            txbody: TxBody.toJSON(
+              TxBody.decode(
+                Uint8Array.from(
+                  Buffer.from(request.params.signDoc.bodyBytes, 'hex'),
+                ),
+              ),
+            ),
+            authInfo: AuthInfo.toJSON(
+              AuthInfo.decode(
+                Uint8Array.from(
+                  Buffer.from(request.params.signDoc.authInfoBytes, 'hex'),
+                ),
+              ),
+            ),
+          };
           navigation.navigate('SignRequest', {
             network: 'cosmos',
             address: request.params.signerAddress,
-            message: request.params.signDoc.bodyBytes,
+            message: JSON.stringify(message, undefined, 2),
             requestEvent,
             requestSession,
           });

components/AddSession.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { AppState, View } from 'react-native';
+import { AppState, TouchableOpacity, View } from 'react-native';
 import { Button, Text, TextInput } from 'react-native-paper';
 import {
   Camera,
@@ -7,6 +7,7 @@ import {
   useCameraPermission,
   useCodeScanner,
 } from 'react-native-vision-camera';
+import { Linking } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -40,6 +41,10 @@ const AddSession = () => {
     },
   });
 
+  const linkToSettings = async () => {
+    await Linking.openSettings();
+  };
+
   const pair = async () => {
     const pairing = await web3WalletPair({ uri: currentWCURI });
     navigation.navigate('WalletConnect');
@@ -56,16 +61,23 @@ const AddSession = () => {
     if (!hasPermission) {
       requestPermission();
     }
-  }, [hasPermission, isActive, requestPermission]);
+  }, [hasPermission, requestPermission]);
 
   return (
     <View style={styles.appContainer}>
       {!hasPermission || !device ? (
-        <Text>
+        <>
-          {!hasPermission
+          <Text>
-            ? 'No Camera Permission granted'
+            {!hasPermission
-            : 'No Camera Selected'}
+              ? 'No Camera Permission granted'
-        </Text>
+              : 'No Camera Selected'}
+          </Text>
+          <TouchableOpacity onPress={linkToSettings}>
+            <Text variant="titleSmall" style={[styles.hyperlink]}>
+              Go to settings
+            </Text>
+          </TouchableOpacity>
+        </>
       ) : (
         <>
           <View style={styles.cameraContainer}>

components/SignRequest.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
-import { Alert, Image, View } from 'react-native';
+import { Alert, Image, ScrollView, View } from 'react-native';
 import { ActivityIndicator, Button, Text } from 'react-native-paper';
 
 import { useNavigation } from '@react-navigation/native';
@@ -37,6 +37,12 @@ const SignRequest = ({ route }: SignRequestProps) => {
   const navigation =
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
 
+  const isCosmosSignDirect = useMemo(() => {
+    const requestParams = route.params!.requestEvent.params.request;
+
+    return requestParams.method === 'cosmos_signDirect';
+  }, [route.params]);
+
   const retrieveData = async (
     requestNetwork: string,
     requestAddress: string,
@@ -173,9 +179,19 @@ const SignRequest = ({ route }: SignRequestProps) => {
             <Text variant="bodyMedium">{requestURL}</Text>
           </View>
           <AccountDetails account={account} />
-          <View style={styles.requestMessage}>
+
-            <Text variant="bodyLarge">{message}</Text>
+          {isCosmosSignDirect ? (
-          </View>
+            <View style={styles.requestDirectMessage}>
+              <ScrollView nestedScrollEnabled>
+                <Text variant="bodyLarge">{message}</Text>
+              </ScrollView>
+            </View>
+          ) : (
+            <View style={styles.requestMessage}>
+              <Text variant="bodyLarge">{message}</Text>
+            </View>
+          )}
+
           <View style={styles.buttonContainer}>
             <Button mode="contained" onPress={signMessageHandler}>
               Yes

styles/stylesheet.js

@@ -120,6 +120,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  requestDirectMessage: {
+    borderWidth: 1,
+    borderRadius: 5,
+    marginTop: 50,
+    height: '40%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+  },
   buttonContainer: {
     marginTop: 50,
     flexDirection: 'row',