Show private key of selected account (#117)

* Display private key of selected account

* Update dialog box UI

* Refactor show private key dialog

* Refactor code to use context variables

src/components/Accounts.tsx

@@ -6,7 +6,7 @@ import { setInternetCredentials } from 'react-native-keychain';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
-import { AccountsProps, StackParamsList, Account } from '../types';
+import { StackParamsList, Account } from '../types';
 import { addAccount } from '../utils/accounts';
 import styles from '../styles/stylesheet';
 import HDPathDialog from './HDPathDialog';
@@ -16,12 +16,14 @@ import { web3wallet } from '../utils/wallet-connect/WalletConnectUtils';
 import { useNetworks } from '../context/NetworksContext';
 import ConfirmDialog from './ConfirmDialog';
 import { getNamespaces } from '../utils/wallet-connect/helpers';
+import ShowPKDialog from './ShowPKDialog';
 
-const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
+const Accounts = () => {
   const navigation =
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
 
-  const { accounts, setAccounts, setCurrentIndex } = useAccounts();
+  const { accounts, setAccounts, setCurrentIndex, currentIndex } =
+    useAccounts();
   const { networksData, selectedNetwork, setNetworksData, setSelectedNetwork } =
     useNetworks();
   const [expanded, setExpanded] = useState(false);
@@ -80,7 +82,7 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
     setIsAccountCreating(false);
     if (newAccount) {
       updateAccounts(newAccount);
-      updateIndex(newAccount.index);
+      setCurrentIndex(newAccount.index);
     }
   };
 
@@ -90,7 +92,7 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
         key={account.index}
         title={`Account ${account.index + 1}`}
         onPress={() => {
-          updateIndex(account.index);
+          setCurrentIndex(account.index);
           setExpanded(false);
         }}
       />
@@ -120,7 +122,6 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
           visible={hdDialog}
           hideDialog={() => setHdDialog(false)}
           updateAccounts={updateAccounts}
-          updateIndex={updateIndex}
           pathCode={pathCode}
         />
         <List.Accordion
@@ -218,6 +219,8 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
           hideDialog={hideDeleteNetworkDialog}
           onConfirm={handleRemove}
         />
+
+        <ShowPKDialog />
       </View>
     </ScrollView>
   );

src/components/HDPath.tsx

@@ -5,20 +5,20 @@ import { Button, TextInput } from 'react-native-paper';
 import { addAccountFromHDPath } from '../utils/accounts';
 import { Account, NetworksDataState, PathState } from '../types';
 import styles from '../styles/stylesheet';
+import { useAccounts } from '../context/AccountsContext';
 
 const HDPath = ({
   pathCode,
   updateAccounts,
-  updateIndex,
   hideDialog,
   selectedNetwork,
 }: {
   pathCode: string;
-  updateIndex: (index: number) => void;
   updateAccounts: (account: Account) => void;
   hideDialog: () => void;
   selectedNetwork: NetworksDataState;
 }) => {
+  const { setCurrentIndex } = useAccounts();
   const [isAccountCreating, setIsAccountCreating] = useState(false);
   const [path, setPath] = useState<PathState>({
     firstNumber: '',
@@ -46,7 +46,7 @@ const HDPath = ({
       const newAccount = await addAccountFromHDPath(hdPath, selectedNetwork);
       if (newAccount) {
         updateAccounts(newAccount);
-        updateIndex(newAccount.index);
+        setCurrentIndex(newAccount.index);
         hideDialog();
       }
     } catch (error) {

src/components/HDPathDialog.tsx

@@ -8,7 +8,6 @@ import { useNetworks } from '../context/NetworksContext';
 const HDPathDialog = ({
   visible,
   hideDialog,
-  updateIndex,
   updateAccounts,
   pathCode,
 }: HDPathDialogProps) => {
@@ -22,7 +21,6 @@ const HDPathDialog = ({
           <HDPath
             selectedNetwork={selectedNetwork!}
             pathCode={pathCode}
-            updateIndex={updateIndex}
             updateAccounts={updateAccounts}
             hideDialog={hideDialog}
           />

src/components/ShowPKDialog.tsx

@@ -0,0 +1,97 @@
+import { TouchableOpacity, View } from 'react-native';
+import React, { useState } from 'react';
+import { Button, Text, Portal, Dialog, useTheme } from 'react-native-paper';
+
+import styles from '../styles/stylesheet';
+import { getPathKey } from '../utils/misc';
+import { useNetworks } from '../context/NetworksContext';
+import { useAccounts } from '../context/AccountsContext';
+
+const ShowPKDialog = () => {
+  const { currentIndex } = useAccounts();
+  const { selectedNetwork } = useNetworks();
+
+  const [privateKey, setprivateKey] = useState<string>();
+  const [showPKDialog, setShowPKDialog] = useState<boolean>(false);
+
+  const theme = useTheme();
+
+  const handleShowPrivateKey = async () => {
+    const pathKey = await getPathKey(
+      `${selectedNetwork!.namespace}:${selectedNetwork!.chainId}`,
+      currentIndex,
+    );
+
+    setprivateKey(pathKey.privKey);
+  };
+
+  const hideShowPKDialog = () => {
+    setShowPKDialog(false);
+    setprivateKey(undefined);
+  };
+
+  return (
+    <>
+      <View style={styles.signLink}>
+        <TouchableOpacity
+          onPress={() => {
+            setShowPKDialog(true);
+          }}>
+          <Text
+            variant="titleSmall"
+            style={[styles.hyperlink, { color: theme.colors.primary }]}>
+            Show Private Key
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <View>
+        <Portal>
+          <Dialog visible={showPKDialog} onDismiss={hideShowPKDialog}>
+            <Dialog.Title>
+              {!privateKey ? (
+                <Text>Show Private Key?</Text>
+              ) : (
+                <Text>Private Key</Text>
+              )}
+            </Dialog.Title>
+            <Dialog.Content>
+              {privateKey && (
+                <View style={[styles.dataBox, styles.dataBoxContainer]}>
+                  <Text
+                    selectable
+                    variant="bodyMedium"
+                    style={styles.dataBoxData}>
+                    {privateKey}
+                  </Text>
+                </View>
+              )}
+              <View>
+                <Text variant="bodyMedium" style={styles.dialogWarning}>
+                  <Text style={[styles.highlight, styles.dialogWarning]}>
+                    Warning:
+                  </Text>
+                  Never disclose this key. Anyone with your private keys can
+                  steal any assets held in your account.
+                </Text>
+              </View>
+            </Dialog.Content>
+            <Dialog.Actions>
+              {!privateKey ? (
+                <>
+                  <Button onPress={handleShowPrivateKey} textColor="red">
+                    Yes
+                  </Button>
+                  <Button onPress={hideShowPKDialog}>No</Button>
+                </>
+              ) : (
+                <Button onPress={hideShowPKDialog}>Ok</Button>
+              )}
+            </Dialog.Actions>
+          </Dialog>
+        </Portal>
+      </View>
+    </>
+  );
+};
+
+export default ShowPKDialog;

src/screens/HomeScreen.tsx

@@ -29,8 +29,7 @@ const WCLogo = () => {
 };
 
 const HomeScreen = () => {
-  const { accounts, setAccounts, currentIndex, setCurrentIndex } =
-    useAccounts();
+  const { accounts, setAccounts, setCurrentIndex } = useAccounts();
 
   const { networksData, selectedNetwork, setSelectedNetwork, setNetworksData } =
     useNetworks();
@@ -123,10 +122,6 @@ const HomeScreen = () => {
     setCurrentIndex(0);
   };
 
-  const updateIndex = (index: number) => {
-    setCurrentIndex(index);
-  };
-
   useEffect(() => {
     fetchAccounts();
   }, [networksData, setAccounts, selectedNetwork, fetchAccounts]);
@@ -142,7 +137,7 @@ const HomeScreen = () => {
         <>
           <NetworkDropdown updateNetwork={updateNetwork} />
           <View style={styles.accountComponent}>
-            <Accounts currentIndex={currentIndex} updateIndex={updateIndex} />
+            <Accounts />
           </View>
           <View style={styles.resetContainer}>
             <Button

src/types.ts

@@ -45,11 +45,6 @@ export type Account = {
   hdPath: string;
 };
 
-export type AccountsProps = {
-  currentIndex: number;
-  updateIndex: (index: number) => void;
-};
-
 export type NetworkDropdownProps = {
   updateNetwork: (networksData: NetworksDataState) => void;
 };
@@ -95,7 +90,6 @@ export type HDPathDialogProps = {
   pathCode: string;
   visible: boolean;
   hideDialog: () => void;
-  updateIndex: (index: number) => void;
   updateAccounts: (account: Account) => void;
 };