Add support for staking module tx MsgCreateValidator (#14)

Part of [laconicd testnet validator enrollment](https://www.notion.so/laconicd-testnet-validator-enrollment-6fc1d3cafcc64fef8c5ed3affa27c675)

Co-authored-by: Prathamesh Musale <prathamesh.musale0@gmail.com>
Co-authored-by: Adw8 <adwaitgharpure@gmail.com>
Reviewed-on: cerc-io/laconic-wallet#14

package.json

@@ -21,6 +21,7 @@
     "@hookform/resolvers": "^3.3.4",
     "@json-rpc-tools/utils": "^1.7.6",
     "@react-native-async-storage/async-storage": "^1.22.3",
+    "@react-native-clipboard/clipboard": "^1.14.1",
     "@react-native-community/netinfo": "^11.3.1",
     "@react-navigation/elements": "^1.3.30",
     "@react-navigation/native": "^6.1.10",

scripts/build-apk.sh

@@ -0,0 +1,31 @@
+#!/bin/bash
+
+# Default value for IS_RELEASE
+IS_RELEASE=${IS_RELEASE:-false}
+
+# Install dependencies
+echo "Installing dependencies..."
+yarn
+
+# Create the necessary directory for assets
+mkdir -p android/app/src/main/assets/
+
+# Bundle the React Native application
+yarn react-native bundle \
+  --platform android \
+  --dev false \
+  --entry-file index.js \
+  --bundle-output android/app/src/main/assets/index.android.bundle \
+  --assets-dest android/app/src/main/res
+
+# Navigate to the android directory
+cd android
+
+# Run the Gradle build based on the IS_RELEASE flag
+if [ "$IS_RELEASE" = "true" ]; then
+  echo "Building release version..."
+  ./gradlew assembleRelease
+else
+  echo "Building debug version..."
+  ./gradlew assembleDebug
+fi

src/components/Accounts.tsx

@@ -60,7 +60,6 @@ const Accounts = () => {
           networksData,
           selectedNetwork!,
           accounts,
-          currentIndex,
         );
 
         if (!updatedNamespaces) {

src/components/Dialog.tsx

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View } from 'react-native';
-import { Button, Dialog, Portal, Text } from 'react-native-paper';
+import { Button, Dialog, Portal, Snackbar, Text } from 'react-native-paper';
+
+import Clipboard from '@react-native-clipboard/clipboard';
 
 import styles from '../styles/stylesheet';
 import GridView from './Grid';
@@ -11,29 +13,45 @@ const DialogComponent = ({
   hideDialog,
   contentText,
 }: CustomDialogProps) => {
+  const [toastVisible, setToastVisible] = useState(false);
+
   const words = contentText.split(' ');
 
+  const handleCopy = () => {
+    Clipboard.setString(contentText);
+    setToastVisible(true);
+  };
+
   return (
-    <Portal>
+    <>
-      <Dialog visible={visible} onDismiss={hideDialog}>
+      <Portal>
-        <Dialog.Content>
+        <Dialog visible={visible} onDismiss={hideDialog}>
-          <Text variant="titleLarge">Mnemonic</Text>
+          <Dialog.Content>
-          <View style={styles.dialogTitle}>
+            <Text variant="titleLarge">Mnemonic</Text>
-            <Text variant="titleMedium">
+            <View style={styles.dialogTitle}>
-              Your mnemonic provides full access to your wallet and funds. Make
+              <Text variant="titleMedium">
-              sure to note it down.{' '}
+                Your mnemonic provides full access to your wallet and funds.
-            </Text>
+                Make sure to note it down.{' '}
-            <Text variant="titleMedium" style={styles.dialogWarning}>
+              </Text>
-              Do not share your mnemonic with anyone
+              <Text variant="titleMedium" style={styles.dialogWarning}>
-            </Text>
+                Do not share your mnemonic with anyone
-            <GridView words={words} />
+              </Text>
-          </View>
+              <GridView words={words} />
-        </Dialog.Content>
+            </View>
-        <Dialog.Actions>
+          </Dialog.Content>
-          <Button onPress={hideDialog}>Done</Button>
+          <Dialog.Actions>
-        </Dialog.Actions>
+            <Button onPress={handleCopy}>Copy</Button>
-      </Dialog>
+            <Button onPress={hideDialog}>Done</Button>
-    </Portal>
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
+      <Snackbar
+        visible={toastVisible}
+        onDismiss={() => setToastVisible(false)}
+        duration={1000}>
+        Mnemonic copied to clipboard
+      </Snackbar>
+    </>
   );
 };
 

src/components/PairingModal.tsx

@@ -20,7 +20,7 @@ const PairingModal = ({
   setModalVisible,
   setToastVisible,
 }: PairingModalProps) => {
-  const { accounts, currentIndex } = useAccounts();
+  const { accounts } = useAccounts();
   const { selectedNetwork, networksData } = useNetworks();
   const [isLoading, setIsLoading] = useState(false);
   const [chainError, setChainError] = useState('');
@@ -103,7 +103,6 @@ const PairingModal = ({
           networksData,
           selectedNetwork!,
           accounts,
-          currentIndex,
         );
         setSupportedNamespaces(nameSpaces);
       } catch (err) {
@@ -129,7 +128,6 @@ const PairingModal = ({
     networksData,
     selectedNetwork,
     accounts,
-    currentIndex,
     web3wallet,
     setCurrentProposal,
     setModalVisible,

src/screens/ApproveTransaction.tsx

@@ -1,15 +1,16 @@
-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 { SvgUri } from 'react-native-svg';
 import Config from 'react-native-config';
+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';
@@ -42,7 +43,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;
@@ -69,6 +69,20 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
   );
   const namespace = requestedNetwork!.namespace;
 
+  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;
@@ -144,7 +158,7 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
           return;
         }
         const gasEstimation = await cosmosStargateClient!.simulate(
-          transactionMessage.value.participant!,
+          signer,
           [transactionMessage],
           MEMO,
         );
@@ -168,6 +182,7 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
     requestEventId,
     topic,
     web3wallet,
+    signer,
   ]);
 
   useEffect(() => {
@@ -243,6 +258,13 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
     navigation.navigate('Laconic');
   };
 
+  const replacer = (key: string, value: any): any => {
+    if (value instanceof Uint8Array) {
+      return Buffer.from(value).toString('hex');
+    }
+    return value;
+  };
+
   return (
     <>
       <ScrollView contentContainerStyle={styles.approveTransaction}>
@@ -267,7 +289,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/screens/SignRequest.tsx

@@ -88,21 +88,13 @@ const SignRequest = ({ route }: SignRequestProps) => {
         return;
       }
 
-      if (requestAccount !== account) {
+      setAccount(requestAccount);
-        setAccount(requestAccount);
+      setMessage(decodeURIComponent(requestMessage));
-      }
+      setNamespace(requestNamespace);
-      if (requestMessage !== message) {
+      setChainId(requestChainId);
-        setMessage(decodeURIComponent(requestMessage));
-      }
-      if (requestNamespace !== namespace) {
-        setNamespace(requestNamespace);
-      }
-      if (requestChainId !== chainId) {
-        setChainId(requestChainId);
-      }
       setIsLoading(false);
     },
-    [account, message, navigation, namespace, chainId],
+    [navigation],
   );
 
   const sanitizePath = useCallback(

src/utils/wallet-connect/helpers.ts

@@ -40,7 +40,6 @@ export const getNamespaces = async (
   networksData: NetworksDataState[],
   selectedNetwork: NetworksDataState,
   accounts: Account[],
-  currentIndex: number,
 ) => {
   const namespaceChainId = `${selectedNetwork.namespace}:${selectedNetwork.chainId}`;
 
@@ -101,23 +100,6 @@ export const getNamespaces = async (
     const requiredAddressesArray = await Promise.all(requiredAddressesPromise);
     const requiredAddresses = requiredAddressesArray.flat();
 
-    let sortedAccounts = requiredAddresses;
-
-    // If selected network is included in chains requested from dApp,
-    // Put selected account as first account
-    if (walletConnectChains.includes(namespaceChainId)) {
-      const currentAddresses = requiredAddresses.filter(address =>
-        address.includes(namespaceChainId),
-      );
-      sortedAccounts = [
-        currentAddresses[currentIndex],
-        ...currentAddresses.filter((address, index) => index !== currentIndex),
-        ...requiredAddresses.filter(
-          address => !currentAddresses.includes(address),
-        ),
-      ];
-    }
-
     // construct namespace object
     const newNamespaces = {
       eip155: {
@@ -133,7 +115,7 @@ export const getNamespaces = async (
           ...(optionalNamespaces.eip155?.events ?? []),
           ...(requiredNamespaces.eip155?.events ?? []),
         ],
-        accounts: sortedAccounts.filter(account => account.includes(EIP155)),
+        accounts: requiredAddresses.filter(account => account.includes(EIP155)),
       },
       cosmos: {
         chains: walletConnectChains.filter(chain => chain.includes(COSMOS)),
@@ -147,18 +129,12 @@ export const getNamespaces = async (
           ...(optionalNamespaces.cosmos?.events ?? []),
           ...(requiredNamespaces.cosmos?.events ?? []),
         ],
-        accounts: sortedAccounts.filter(account => account.includes(COSMOS)),
+        accounts: requiredAddresses.filter(account => account.includes(COSMOS)),
       },
     };
 
     return newNamespaces;
   } else {
-    // Set selected account as the first account in supported namespaces
-    const sortedAccounts = [
-      accounts[currentIndex],
-      ...accounts.filter((account, index) => index !== currentIndex),
-    ];
-
     switch (selectedNetwork.namespace) {
       case EIP155:
         return {
@@ -175,7 +151,7 @@ export const getNamespaces = async (
               ...(optionalNamespaces.eip155?.events ?? []),
               ...(requiredNamespaces.eip155?.events ?? []),
             ],
-            accounts: sortedAccounts.map(ethAccount => {
+            accounts: accounts.map(ethAccount => {
               return `${namespaceChainId}:${ethAccount.address}`;
             }),
           },
@@ -200,7 +176,7 @@ export const getNamespaces = async (
               ...(optionalNamespaces.cosmos?.events ?? []),
               ...(requiredNamespaces.cosmos?.events ?? []),
             ],
-            accounts: sortedAccounts.map(cosmosAccount => {
+            accounts: accounts.map(cosmosAccount => {
               return `${namespaceChainId}:${cosmosAccount.address}`;
             }),
           },

yarn.lock

@@ -2071,6 +2071,11 @@
   dependencies:
     merge-options "^3.0.4"
 
+"@react-native-clipboard/clipboard@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.14.1.tgz#835f82fc86881a0808a8405f2576617bb5383554"
+  integrity sha512-SM3el0A28SwoeJljVNhF217o0nI4E7RfalLmuRQcT1/7tGcxUjgFa3jyrEndYUct8/uxxK5EUNGUu1YEDqzxqw==
+
 "@react-native-community/cli-clean@12.3.2":
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-12.3.2.tgz#d4f1730c3d22d816b4d513d330d5f3896a3f5921"