src/screens/ApproveTransaction.tsx

@@ -1,13 +1,14 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Image, ScrollView, View } from 'react-native';
 import { Button, Text, TextInput } from 'react-native-paper';
+import { MsgCreateValidator } from 'cosmjs-types/cosmos/staking/v1beta1/tx';
 
 import {
   NativeStackNavigationProp,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/native';
-import { DirectSecp256k1Wallet } from '@cosmjs/proto-signing';
+import { DirectSecp256k1Wallet, EncodeObject } from '@cosmjs/proto-signing';
 import { LaconicClient } from '@cerc-io/registry-sdk';
 import { GasPrice, calculateFee } from '@cosmjs/stargate';
 import { formatJsonRpcError } from '@json-rpc-tools/utils';
@@ -40,7 +41,6 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
   const requestName = requestSession.peer.metadata.name;
   const requestIcon = requestSession.peer.metadata.icons[0];
   const requestURL = requestSession.peer.metadata.url;
-  const transactionMessage = route.params.transactionMessage;
   const signer = route.params.signer;
   const requestEvent = route.params.requestEvent;
   const chainId = requestEvent.params.chainId;
@@ -67,6 +67,20 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
 
   const { web3wallet } = useWalletConnect();
 
+  const transactionMessage = useMemo((): EncodeObject => {
+    const inputTxMsg = route.params.transactionMessage;
+
+    // If it's a MsgCreateValidator, decode the tx msg value using MsgCreateValidator type
+    if (inputTxMsg.typeUrl.includes('MsgCreateValidator')) {
+      return {
+        typeUrl: inputTxMsg.typeUrl,
+        value: MsgCreateValidator.fromJSON(inputTxMsg.value)
+      }
+    }
+
+    return inputTxMsg;
+  }, [route.params.transactionMessage]);
+
   useEffect(() => {
     if (namespace !== COSMOS) {
       return;
@@ -138,7 +152,7 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
           return;
         }
         const gasEstimation = await cosmosStargateClient!.simulate(
-          transactionMessage.value.participant!,
+          signer,
           [transactionMessage],
           MEMO,
         );
@@ -160,7 +174,7 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
       }
     };
     getCosmosGas();
-  }, [cosmosStargateClient, transactionMessage, requestEventId, topic, web3wallet]);
+  }, [cosmosStargateClient, transactionMessage, requestEventId, topic, web3wallet, signer]);
 
   useEffect(() => {
     const gasPrice = GasPrice.fromString(
@@ -239,6 +253,13 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
     navigation.navigate('Home');
   };
 
+  const replacer = (key: string, value: any): any => {
+    if (value instanceof Uint8Array) {
+      return Buffer.from(value).toString('hex');
+    }
+    return value;
+  };
+
   return (
     <>
       <ScrollView contentContainerStyle={styles.approveTransaction}>
@@ -264,7 +285,7 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
         </Text>
         <View style={styles.messageBody}>
           <Text variant="bodyLarge">
-            {JSON.stringify(transactionMessage, null, 2)}
+            {JSON.stringify(transactionMessage, replacer, 2)}
           </Text>
         </View>
         <>

src/utils/wallet-connect/wallet-connect-requests.ts

@@ -7,7 +7,7 @@ import { getSdkError } from '@walletconnect/utils';
 import {
   SigningStargateClient,
   StdFee,
-  MsgSendEncodeObject,
+  MsgSendEncodeObject
 } from '@cosmjs/stargate';
 import { EncodeObject } from '@cosmjs/proto-signing';
 import { LaconicClient } from '@cerc-io/registry-sdk';