Disable import wallet functionality with const flag (#14)

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

Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Reviewed-on: cerc-io/laconic-wallet-web#14

src/components/CreateWallet.tsx

@@ -1,5 +1,5 @@
-import { View } from 'react-native';
 import React from 'react';
+import { View } from 'react-native';
 import { Button } from 'react-native-paper';
 
 import { CreateWalletProps } from '../types';

src/components/ImportWalletDialog.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+
+import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Grid, Button, Typography } from "@mui/material";
+
+const ImportWalletDialog = ({
+  visible,
+  hideDialog,
+  importWalletHandler
+}: {
+  visible: boolean;
+  hideDialog: () => void;
+  importWalletHandler: (recoveryPhrase: string) => Promise<void>;
+}) => {
+  const [words, setWords] = useState(Array(12).fill(''));
+
+  const handleWordChange = (index: number, value: string) => {
+    const newWords = [...words];
+    newWords[index] = value;
+    setWords(newWords);
+  };
+
+  const handlePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
+    const pastedText = event.clipboardData.getData('Text');
+    const splitWords = pastedText.trim().split(/\s+/);
+
+    if (splitWords.length === 12) {
+      setWords(splitWords);
+      event.preventDefault();
+    }
+  };
+
+  useEffect(() => {
+    setWords(Array(12).fill(''));
+  },[visible]);
+
+  return (
+    <Dialog open={visible} onClose={hideDialog}>
+      <DialogTitle>Import your wallet from your mnemonic</DialogTitle>
+      <DialogContent>
+        <Typography>
+        (You can paste your entire mnemonic into the first textbox)
+        </Typography>
+        <Grid container spacing={2}>
+          {words.map((word, index) => (
+            <Grid item xs={6} sm={4} key={index}>
+              <TextField
+                value={word}
+                onChange={(e) => handleWordChange(index, e.target.value)}
+                onPaste={index === 0 ? handlePaste : undefined}
+                placeholder={`Word ${index + 1}`}
+                fullWidth
+                margin="normal"
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => importWalletHandler(words.join(' '))}>Import Wallet</Button>
+        <Button onClick={hideDialog}>Cancel</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ImportWalletDialog;

src/components/MnemonicDialog.tsx

@@ -5,7 +5,7 @@ import styles from '../styles/stylesheet';
 import GridView from './Grid';
 import { CustomDialogProps } from '../types';
 
-const DialogComponent = ({ visible, hideDialog, contentText }: CustomDialogProps) => {
+const MnemonicDialog = ({ visible, hideDialog, contentText }: CustomDialogProps) => {
   const words = contentText.split(' ');
 
   const copyMnemonic = () => {
@@ -26,10 +26,10 @@ const DialogComponent = ({ visible, hideDialog, contentText }: CustomDialogProps
       </DialogContent>
       <DialogActions>
         <Button onClick={copyMnemonic}>Copy</Button>
-        <Button onClick={hideDialog}>Done</Button>
+        <Button onClick={hideDialog}>Cancel</Button>
       </DialogActions>
     </Dialog>
   );
 };
 
-export { DialogComponent };
+export { MnemonicDialog };

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/screens/HomeScreen.tsx

@@ -5,9 +5,11 @@ import { Button, Text } from 'react-native-paper';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/native';
 import { getSdkError } from '@walletconnect/utils';
+import { Portal, Snackbar } from '@mui/material';
 
 import { createWallet, resetWallet, retrieveAccounts } from '../utils/accounts';
-import { DialogComponent } from '../components/Dialog';
+import { MnemonicDialog } from '../components/MnemonicDialog';
+import ImportWalletDialog from '../components/ImportWalletDialog';
 import { NetworkDropdown } from '../components/NetworkDropdown';
 import Accounts from '../components/Accounts';
 import CreateWallet from '../components/CreateWallet';
@@ -17,6 +19,7 @@ import { useAccounts } from '../context/AccountsContext';
 import { useWalletConnect } from '../context/WalletConnectContext';
 import { NetworksDataState, StackParamsList } from '../types';
 import { useNetworks } from '../context/NetworksContext';
+import { IS_IMPORT_WALLET_ENABLED } from '../utils/constants';
 
 const WCLogo = () => {
   return (
@@ -55,12 +58,15 @@ const HomeScreen = () => {
 
   const [isWalletCreated, setIsWalletCreated] = useState<boolean>(false);
   const [isWalletCreating, setIsWalletCreating] = useState<boolean>(false);
-  const [walletDialog, setWalletDialog] = useState<boolean>(false);
+  const [importWalletDialog, setImportWalletDialog] = useState<boolean>(false);
+  const [mnemonicDialog, setMnemonicDialog] = useState<boolean>(false);
   const [resetWalletDialog, setResetWalletDialog] = useState<boolean>(false);
+  const [toastVisible, setToastVisible] = useState(false);
+  const [invalidMnemonicError, setInvalidMnemonicError] = useState('');
   const [isAccountsFetched, setIsAccountsFetched] = useState<boolean>(true);
   const [phrase, setPhrase] = useState('');
 
-  const hideWalletDialog = () => setWalletDialog(false);
+  const hideMnemonicDialog = () => setMnemonicDialog(false);
   const hideResetDialog = () => setResetWalletDialog(false);
 
   const fetchAccounts = useCallback(async () => {
@@ -83,12 +89,27 @@ const HomeScreen = () => {
     const mnemonic = await createWallet(networksData);
     if (mnemonic) {
       fetchAccounts();
-      setWalletDialog(true);
+      setMnemonicDialog(true);
       setPhrase(mnemonic);
       setSelectedNetwork(networksData[0]);
     }
   };
 
+  const importWalletHandler = async (recoveryPhrase: string) => {
+    try{
+      const mnemonic = await createWallet(networksData, recoveryPhrase);
+      if (mnemonic) {
+        fetchAccounts();
+        setPhrase(mnemonic);
+        setSelectedNetwork(networksData[0]);
+        setImportWalletDialog(false);
+      }
+    } catch (error: any) {
+      setInvalidMnemonicError((error.message as string).toUpperCase());
+      setToastVisible(true);
+    }
+  };
+
   const confirmResetWallet = useCallback(async () => {
     setIsWalletCreated(false);
     setIsWalletCreating(false);
@@ -152,14 +173,28 @@ const HomeScreen = () => {
           </View>
         </>
       ) : (
-        <CreateWallet
-          isWalletCreating={isWalletCreating}
-          createWalletHandler={createWalletHandler}
-        />
+        <>
+          <CreateWallet
+            isWalletCreating={isWalletCreating}
+            createWalletHandler={createWalletHandler}
+          />
+          { IS_IMPORT_WALLET_ENABLED && <View style={styles.createWalletContainer}>
+            <Button
+              mode="contained"
+              onPress={() => setImportWalletDialog(true)}>
+            Import Wallet
+            </Button>
+          </View> }
+        </>
       )}
-      <DialogComponent
-        visible={walletDialog}
-        hideDialog={hideWalletDialog}
+      <ImportWalletDialog
+        visible={importWalletDialog}
+        hideDialog={() => setImportWalletDialog(false)}
+        importWalletHandler={importWalletHandler}
+      />
+      <MnemonicDialog
+        visible={mnemonicDialog}
+        hideDialog={hideMnemonicDialog}
         contentText={phrase}
       />
       <ConfirmDialog
@@ -168,6 +203,16 @@ const HomeScreen = () => {
         hideDialog={hideResetDialog}
         onConfirm={confirmResetWallet}
       />
+      <Portal>
+        <Snackbar
+          open={toastVisible}
+          autoHideDuration={3000}
+          message={invalidMnemonicError}
+          onClose={() => setToastVisible(false)}
+          anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
+          ContentProps={{ style: { backgroundColor: 'red', color: 'white'} }}
+        />
+      </Portal>
     </View>
   );
 };

src/styles/stylesheet.js

@@ -5,7 +5,7 @@ const styles = StyleSheet.create({
     marginTop: 20,
     width: 150,
     alignSelf: 'center',
-    marginBottom: 40
+    marginBottom: 30,
   },
   signLink: {
     alignItems: 'flex-end',

src/utils/accounts.ts

@@ -27,12 +27,23 @@ import { COSMOS, EIP155 } from './constants';
 
 const createWallet = async (
   networksData: NetworksDataState[],
+  recoveryPhrase?: string,
 ): Promise<string> => {
-  const mnemonic = utils.entropyToMnemonic(utils.randomBytes(16));
-  await setInternetCredentials('mnemonicServer', 'mnemonic', mnemonic);
+  const mnemonic = recoveryPhrase ? recoveryPhrase : utils.entropyToMnemonic(utils.randomBytes(16));
 
   const hdNode = HDNode.fromMnemonic(mnemonic);
+  await setInternetCredentials('mnemonicServer', 'mnemonic', mnemonic);
 
+  await createWalletFromMnemonic(networksData, hdNode, mnemonic);
+
+  return mnemonic;
+};
+
+const createWalletFromMnemonic = async (
+  networksData: NetworksDataState[],
+  hdNode: HDNode,
+  mnemonic: string
+): Promise<void> => {
   for (const network of networksData) {
     const hdPath = `m/44'/${network.coinType}'/0'/0/0`;
     const node = hdNode.derivePath(hdPath);
@@ -73,8 +84,6 @@ const createWallet = async (
       ),
     ]);
   }
-
-  return mnemonic;
 };
 
 const addAccount = async (

src/utils/constants.ts

@@ -46,3 +46,5 @@ export const EMPTY_FIELD_ERROR = 'Field cannot be empty';
 export const INVALID_URL_ERROR = 'Invalid URL';
 
 export const IS_NUMBER_REGEX = /^\d+$/;
+
+export const IS_IMPORT_WALLET_ENABLED = false;

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';