From cca89775aaa4b5cce236bcf3f311c94f5936b6ef Mon Sep 17 00:00:00 2001
From: Cody Bender <codyfbender@gmail.com>
Date: Fri, 9 Aug 2024 13:19:21 -0400
Subject: [PATCH] style: home screen first pass

---
 package.json                      |   1 +
 public/index.html                 |   5 +
 src/components/AccountDetails.tsx |  44 ++++----
 src/components/Accounts.tsx       | 170 +++++++++++++----------------
 src/components/Dialog.tsx         |  55 ++++++++++
 src/components/ShowPKDialog.tsx   |  45 ++++----
 src/index.tsx                     |  29 +++++
 src/screens/HomeScreen.tsx        | 173 +++++++++++++++---------------
 yarn.lock                         | 131 +++++++++++++++++-----
 9 files changed, 399 insertions(+), 254 deletions(-)
 create mode 100644 src/components/Dialog.tsx

diff --git a/package.json b/package.json
index 91e19c9..fd29103 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@ethersproject/shims": "^5.7.0",
     "@hookform/resolvers": "^3.3.4",
     "@json-rpc-tools/utils": "^1.7.6",
+    "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.4",
     "@react-navigation/elements": "^1.3.30",
     "@react-navigation/native": "^6.1.10",
diff --git a/public/index.html b/public/index.html
index 2a0b70a..f863862 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,11 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Laconic Wallet Web App" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+    rel="stylesheet" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/components/AccountDetails.tsx b/src/components/AccountDetails.tsx
index 8c16c61..bd2e737 100644
--- a/src/components/AccountDetails.tsx
+++ b/src/components/AccountDetails.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-import { View } from 'react-native';
-import { Text } from 'react-native-paper';
+import React from "react";
 
-import { Account } from '../types';
-import styles from '../styles/stylesheet';
+import { Account } from "../types";
+import { Box, Stack, Typography } from "@mui/material";
 
 interface AccountDetailsProps {
   account: Account | undefined;
@@ -11,20 +9,28 @@ interface AccountDetailsProps {
 
 const AccountDetails: React.FC<AccountDetailsProps> = ({ account }) => {
   return (
-    <View style={styles.accountContainer}>
-      <Text variant="bodyLarge" selectable={true}>
-        <Text style={styles.highlight}>Address: </Text>
-        {account?.address}
-      </Text>
-      <Text variant="bodyLarge" selectable={true}>
-        <Text style={styles.highlight}>Public Key: </Text>
-        {account?.pubKey}
-      </Text>
-      <Text variant="bodyLarge">
-        <Text style={styles.highlight}>HD Path: </Text>
-        {account?.hdPath}
-      </Text>
-    </View>
+    <Box sx={{ marginY: 4 }}>
+      <Stack spacing={1}>
+        <Stack flexDirection="row">
+          <Typography color="secondary" sx={{ mr: 1 }}>
+            Address:
+          </Typography>
+          <Typography color="text.primary">{account?.address}</Typography>
+        </Stack>
+      </Stack>
+      <Stack flexDirection="row">
+        <Typography color="secondary" sx={{ mr: 1 }}>
+          Public Key:
+        </Typography>
+        <Typography color="text.primary">{account?.pubKey}</Typography>
+      </Stack>
+      <Stack flexDirection="row">
+        <Typography color="secondary" sx={{ mr: 1 }}>
+          HD Path:
+        </Typography>
+        <Typography color="text.primary">{account?.hdPath}</Typography>
+      </Stack>
+    </Box>
   );
 };
 
diff --git a/src/components/Accounts.tsx b/src/components/Accounts.tsx
index a1c292c..426f3e6 100644
--- a/src/components/Accounts.tsx
+++ b/src/components/Accounts.tsx
@@ -1,22 +1,23 @@
-import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { Button, List, Text, useTheme } from 'react-native-paper';
+import React, { useEffect, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { List } from "react-native-paper";
 
-import { useNavigation } from '@react-navigation/native';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useNavigation } from "@react-navigation/native";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 
-import { StackParamsList, Account } from '../types';
-import { addAccount } from '../utils/accounts';
-import styles from '../styles/stylesheet';
-import HDPathDialog from './HDPathDialog';
-import AccountDetails from './AccountDetails';
-import { useAccounts } from '../context/AccountsContext';
-import { useWalletConnect } from '../context/WalletConnectContext';
-import { useNetworks } from '../context/NetworksContext';
-import ConfirmDialog from './ConfirmDialog';
-import { getNamespaces } from '../utils/wallet-connect/helpers';
-import ShowPKDialog from './ShowPKDialog';
-import { setInternetCredentials } from '../utils/key-store';
+import { StackParamsList, Account } from "../types";
+import { addAccount } from "../utils/accounts";
+import HDPathDialog from "./HDPathDialog";
+import AccountDetails from "./AccountDetails";
+import { useAccounts } from "../context/AccountsContext";
+import { useWalletConnect } from "../context/WalletConnectContext";
+import { useNetworks } from "../context/NetworksContext";
+import ConfirmDialog from "./ConfirmDialog";
+import { getNamespaces } from "../utils/wallet-connect/helpers";
+import ShowPKDialog from "./ShowPKDialog";
+import { setInternetCredentials } from "../utils/key-store";
+import { Button, Link, Stack } from "@mui/material";
+import { LoadingButton } from "@mui/lab";
 
 const Accounts = () => {
   const navigation =
@@ -27,16 +28,14 @@ const Accounts = () => {
   const { networksData, selectedNetwork, setNetworksData, setSelectedNetwork } =
     useNetworks();
 
-  const {web3wallet} = useWalletConnect();
+  const { web3wallet } = useWalletConnect();
   const [expanded, setExpanded] = useState(false);
   const [isAccountCreating, setIsAccountCreating] = useState(false);
   const [hdDialog, setHdDialog] = useState(false);
-  const [pathCode, setPathCode] = useState('');
+  const [pathCode, setPathCode] = useState("");
   const [deleteNetworkDialog, setDeleteNetworkDialog] =
     useState<boolean>(false);
 
-  const theme = useTheme();
-
   const handlePress = () => setExpanded(!expanded);
 
   const hideDeleteNetworkDialog = () => setDeleteNetworkDialog(false);
@@ -88,7 +87,7 @@ const Accounts = () => {
   };
 
   const renderAccountItems = () =>
-    accounts.map(account => (
+    accounts.map((account) => (
       <List.Item
         key={account.index}
         title={`Account ${account.index + 1}`}
@@ -101,12 +100,12 @@ const Accounts = () => {
 
   const handleRemove = async () => {
     const updatedNetworks = networksData.filter(
-      networkData => selectedNetwork!.networkId !== networkData.networkId,
+      (networkData) => selectedNetwork!.networkId !== networkData.networkId,
     );
 
     await setInternetCredentials(
-      'networks',
-      '_',
+      "networks",
+      "_",
       JSON.stringify(updatedNetworks),
     );
 
@@ -128,91 +127,72 @@ const Accounts = () => {
         <List.Accordion
           title={`Account ${currentIndex + 1}`}
           expanded={expanded}
-          onPress={handlePress}>
+          onPress={handlePress}
+        >
           {renderAccountItems()}
         </List.Accordion>
 
-        <View style={styles.addAccountButton}>
-          <Button
-            mode="contained"
-            onPress={addAccountHandler}
+        <Stack direction="row" spacing={3} sx={{ mt: 4 }}>
+          <LoadingButton
+            variant="contained"
+            onClick={addAccountHandler}
             loading={isAccountCreating}
-            disabled={isAccountCreating}>
-            {isAccountCreating ? 'Adding' : 'Add Account'}
-          </Button>
-        </View>
+            disabled={isAccountCreating}
+          >
+            {isAccountCreating ? "Adding" : "Add Account"}
+          </LoadingButton>
 
-        <View style={styles.addAccountButton}>
           <Button
-            mode="contained"
-            onPress={() => {
+            variant="contained"
+            onClick={() => {
               setHdDialog(true);
               setPathCode(`m/44'/${selectedNetwork!.coinType}'/`);
-            }}>
+            }}
+          >
             Add Account from HD path
           </Button>
-        </View>
+        </Stack>
 
         <AccountDetails account={accounts[currentIndex]} />
-        <View style={styles.linkContainer}>
-          <View style={styles.signLink}>
-            <TouchableOpacity
-              onPress={() => {
-                navigation.navigate('SignMessage', {
-                  selectedNamespace: selectedNetwork!.namespace,
-                  selectedChainId: selectedNetwork!.chainId,
-                  accountInfo: accounts[currentIndex],
-                });
-              }}>
-              <Text
-                variant="titleSmall"
-                style={[styles.hyperlink, { color: theme.colors.primary }]}>
-                Sign Message
-              </Text>
-            </TouchableOpacity>
-          </View>
+        <Stack direction="row" spacing={4}>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate("SignMessage", {
+                selectedNamespace: selectedNetwork!.namespace,
+                selectedChainId: selectedNetwork!.chainId,
+                accountInfo: accounts[currentIndex],
+              });
+            }}
+          >
+            <Link>Sign Message</Link>
+          </TouchableOpacity>
 
-          <View style={styles.signLink}>
-            <TouchableOpacity
-              onPress={() => {
-                navigation.navigate('AddNetwork');
-              }}>
-              <Text
-                variant="titleSmall"
-                style={[styles.hyperlink, { color: theme.colors.primary }]}>
-                Add Network
-              </Text>
-            </TouchableOpacity>
-          </View>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate("AddNetwork");
+            }}
+          >
+            <Link>Add Network</Link>
+          </TouchableOpacity>
 
-          <View style={styles.signLink}>
-            <TouchableOpacity
-              onPress={() => {
-                navigation.navigate('EditNetwork', {
-                  selectedNetwork: selectedNetwork!,
-                });
-              }}>
-              <Text
-                variant="titleSmall"
-                style={[styles.hyperlink, { color: theme.colors.primary }]}>
-                Edit Network
-              </Text>
-            </TouchableOpacity>
-          </View>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate("EditNetwork", {
+                selectedNetwork: selectedNetwork!,
+              });
+            }}
+          >
+            <Link>Edit Network</Link>
+          </TouchableOpacity>
 
           {!selectedNetwork!.isDefault && (
-            <View style={styles.signLink}>
-              <TouchableOpacity
-                onPress={() => {
-                  setDeleteNetworkDialog(true);
-                }}>
-                <Text
-                  variant="titleSmall"
-                  style={[styles.hyperlink, { color: theme.colors.primary }]}>
-                  Delete Network
-                </Text>
-              </TouchableOpacity>
-            </View>
+            <TouchableOpacity
+              onPress={() => {
+                setDeleteNetworkDialog(true);
+              }}
+            >
+              <Link>Delete Network</Link>
+            </TouchableOpacity>
           )}
           <ConfirmDialog
             title="Delete Network"
@@ -221,7 +201,7 @@ const Accounts = () => {
             onConfirm={handleRemove}
           />
           <ShowPKDialog />
-        </View>
+        </Stack>
       </View>
     </View>
   );
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
new file mode 100644
index 0000000..905b001
--- /dev/null
+++ b/src/components/Dialog.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Button,
+  Typography,
+} from "@mui/material";
+
+import styles from "../styles/stylesheet";
+import GridView from "./Grid";
+import { CustomDialogProps } from "../types";
+
+const DialogComponent = ({
+  visible,
+  hideDialog,
+  contentText,
+}: CustomDialogProps) => {
+  const words = contentText.split(" ");
+
+  const copyMnemonic = () => {
+    navigator.clipboard.writeText(contentText);
+  };
+
+  return (
+    <Dialog open={visible} onClose={hideDialog}>
+      <DialogTitle>Mnemonic</DialogTitle>
+      <DialogContent>
+        <Typography
+          variant="h6"
+          component="div"
+          style={{ color: "rgba(0, 0, 0, 0.87)" }}
+        >
+          Your mnemonic provides full access to your wallet and funds. Make sure
+          to note it down.
+        </Typography>
+        <Typography
+          variant="h6"
+          component="div"
+          style={{ ...styles.dialogWarning }}
+        >
+          Do not share your mnemonic with anyone
+        </Typography>
+        <GridView words={words} />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={copyMnemonic}>Copy</Button>
+        <Button onClick={hideDialog}>Done</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export { DialogComponent };
diff --git a/src/components/ShowPKDialog.tsx b/src/components/ShowPKDialog.tsx
index b733c81..46ec396 100644
--- a/src/components/ShowPKDialog.tsx
+++ b/src/components/ShowPKDialog.tsx
@@ -1,16 +1,16 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { Button, Typography } from '@mui/material';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
+import React, { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { Button, Link, Typography } from "@mui/material";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
 
-import styles from '../styles/stylesheet';
-import { getPathKey } from '../utils/misc';
-import { useNetworks } from '../context/NetworksContext';
-import { useAccounts } from '../context/AccountsContext';
-import { Text, 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";
+import { Text, useTheme } from "react-native-paper";
 
 const ShowPKDialog = () => {
   const { currentIndex } = useAccounts();
@@ -41,12 +41,9 @@ const ShowPKDialog = () => {
         <TouchableOpacity
           onPress={() => {
             setShowPKDialog(true);
-          }}>
-          <Text
-            variant="titleSmall"
-            style={[styles.hyperlink, { color: theme.colors.primary }]}>
-            Show Private Key
-          </Text>
+          }}
+        >
+          <Link>Show Private Key</Link>
         </TouchableOpacity>
       </View>
       <View>
@@ -66,8 +63,8 @@ const ShowPKDialog = () => {
                   variant="body1"
                   style={styles.dataBoxData}
                   sx={{
-                    wordWrap: 'break-word',
-                    whiteSpace: 'initial',
+                    wordWrap: "break-word",
+                    whiteSpace: "initial",
                   }}
                 >
                   {privateKey}
@@ -76,11 +73,9 @@ const ShowPKDialog = () => {
             )}
             <View>
               <Typography variant="body1" style={styles.dialogWarning}>
-                <Typography component="span">
-                  Warning:
-                </Typography>
-                Never disclose this key. Anyone with your private keys can
-                steal any assets held in your account.
+                <Typography component="span">Warning:</Typography>
+                Never disclose this key. Anyone with your private keys can steal
+                any assets held in your account.
               </Typography>
             </View>
           </DialogContent>
diff --git a/src/index.tsx b/src/index.tsx
index e1b13fa..1cd34ee 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -36,12 +36,41 @@ const navigationTheme: typeof DarkTheme = {
     card: "#18181A",
   },
 };
+
 const muiTheme = createTheme({
+  components: {
+    MuiButton: {
+      defaultProps: {
+        color: "primary",
+        sx: {
+          fontFamily: `DM Mono, monospace`,
+          fontWeight: 400,
+        },
+      },
+    },
+    MuiLink: {
+      defaultProps: {
+        color: "text.primary",
+        fontSize: "14px",
+      },
+    },
+    MuiTypography: {
+      defaultProps: {
+        fontWeight: 400,
+      },
+    },
+  },
   palette: {
     mode: "dark",
     primary: {
       main: "#0000F4",
     },
+    secondary: {
+      main: "#A2A2FF",
+    },
+    error: {
+      main: "#B20710",
+    },
   },
 });
 
diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
index a40f5de..6105dec 100644
--- a/src/screens/HomeScreen.tsx
+++ b/src/screens/HomeScreen.tsx
@@ -1,31 +1,30 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { View, ActivityIndicator, Image } from 'react-native';
-import { Button, Text } from 'react-native-paper';
+import React, { useCallback, useEffect, useState } from "react";
+import { View, ActivityIndicator, Image } from "react-native";
+import { Text } from "react-native-paper";
+import { Box, Button, Divider, Portal, Snackbar } from "@mui/material";
 
-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 { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { useNavigation } from "@react-navigation/native";
+import { getSdkError } from "@walletconnect/utils";
 
-import { createWallet, resetWallet, retrieveAccounts } from '../utils/accounts';
-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';
-import ConfirmDialog from '../components/ConfirmDialog';
-import styles from '../styles/stylesheet';
-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';
+import { createWallet, resetWallet, retrieveAccounts } from "../utils/accounts";
+import { NetworkDropdown } from "../components/NetworkDropdown";
+import Accounts from "../components/Accounts";
+import CreateWallet from "../components/CreateWallet";
+import ConfirmDialog from "../components/ConfirmDialog";
+import styles from "../styles/stylesheet";
+import { useAccounts } from "../context/AccountsContext";
+import { useWalletConnect } from "../context/WalletConnectContext";
+import { NetworksDataState, StackParamsList } from "../types";
+import { useNetworks } from "../context/NetworksContext";
+import ImportWalletDialog from "../components/ImportWalletDialog";
+import { MnemonicDialog } from "../components/MnemonicDialog";
 
 const WCLogo = () => {
   return (
     <Image
       style={styles.walletConnectLogo}
-      source={require('../assets/WalletConnect-Icon-Blueberry.png')}
+      source={require("../assets/WalletConnect-Icon-Blueberry.png")}
     />
   );
 };
@@ -44,7 +43,7 @@ const HomeScreen = () => {
       navigation.setOptions({
         // eslint-disable-next-line react/no-unstable-nested-components
         headerRight: () => (
-          <Button onPress={() => navigation.navigate('WalletConnect')}>
+          <Button onClick={() => navigation.navigate("WalletConnect")}>
             {<WCLogo />}
           </Button>
         ),
@@ -62,9 +61,9 @@ const HomeScreen = () => {
   const [mnemonicDialog, setMnemonicDialog] = useState<boolean>(false);
   const [resetWalletDialog, setResetWalletDialog] = useState<boolean>(false);
   const [toastVisible, setToastVisible] = useState(false);
-  const [invalidMnemonicError, setInvalidMnemonicError] = useState('');
+  const [invalidMnemonicError, setInvalidMnemonicError] = useState("");
   const [isAccountsFetched, setIsAccountsFetched] = useState<boolean>(true);
-  const [phrase, setPhrase] = useState('');
+  const [phrase, setPhrase] = useState("");
 
   const hideMnemonicDialog = () => setMnemonicDialog(false);
   const hideResetDialog = () => setResetWalletDialog(false);
@@ -96,7 +95,7 @@ const HomeScreen = () => {
   };
 
   const importWalletHandler = async (recoveryPhrase: string) => {
-    try{
+    try {
       const mnemonic = await createWallet(networksData, recoveryPhrase);
       if (mnemonic) {
         fetchAccounts();
@@ -120,10 +119,10 @@ const HomeScreen = () => {
     await resetWallet();
     const sessions = web3wallet!.getActiveSessions();
 
-    Object.keys(sessions).forEach(async sessionId => {
+    Object.keys(sessions).forEach(async (sessionId) => {
       await web3wallet!.disconnectSession({
         topic: sessionId,
-        reason: getSdkError('USER_DISCONNECTED'),
+        reason: getSdkError("USER_DISCONNECTED"),
       });
     });
     setActiveSessions({});
@@ -135,7 +134,7 @@ const HomeScreen = () => {
     setCurrentIndex,
     setNetworksData,
     setSelectedNetwork,
-    web3wallet
+    web3wallet,
   ]);
 
   const updateNetwork = (networkData: NetworksDataState) => {
@@ -149,70 +148,72 @@ const HomeScreen = () => {
 
   return (
     <View style={styles.appContainer}>
-      {!isAccountsFetched ? (
-        <View style={styles.spinnerContainer}>
-          <Text style={styles.LoadingText}>Loading...</Text>
-          <ActivityIndicator size="large" color="#0000ff" />
-        </View>
-      ) : isWalletCreated && selectedNetwork ? (
-        <>
-          <NetworkDropdown updateNetwork={updateNetwork} />
-          <View style={styles.accountComponent}>
-            <Accounts />
+      <Box sx={{ maxWidth: "752px", marginX: "auto" }}>
+        {!isAccountsFetched ? (
+          <View style={styles.spinnerContainer}>
+            <Text style={styles.LoadingText}>Loading...</Text>
+            <ActivityIndicator size="large" color="#0000ff" />
           </View>
-          <View style={styles.resetContainer}>
+        ) : isWalletCreated && selectedNetwork ? (
+          <>
+            <NetworkDropdown updateNetwork={updateNetwork} />
+            <View style={styles.accountComponent}>
+              <Accounts />
+            </View>
+            <Divider flexItem sx={{ my: 4 }} />
             <Button
-              style={styles.resetButton}
-              mode="contained"
-              buttonColor="#B82B0D"
-              onPress={() => {
+              variant="contained"
+              onClick={() => {
                 setResetWalletDialog(true);
-              }}>
+              }}
+              color="error"
+            >
               Reset Wallet
             </Button>
-          </View>
-        </>
-      ) : (
-        <>
-          <CreateWallet
-            isWalletCreating={isWalletCreating}
-            createWalletHandler={createWalletHandler}
-          />
-          { IS_IMPORT_WALLET_ENABLED && <View style={styles.createWalletContainer}>
-            <Button
-              mode="contained"
-              onPress={() => setImportWalletDialog(true)}>
-            Import Wallet
-            </Button>
-          </View> }
-        </>
-      )}
-      <ImportWalletDialog
-        visible={importWalletDialog}
-        hideDialog={() => setImportWalletDialog(false)}
-        importWalletHandler={importWalletHandler}
-      />
-      <MnemonicDialog
-        visible={mnemonicDialog}
-        hideDialog={hideMnemonicDialog}
-        contentText={phrase}
-      />
-      <ConfirmDialog
-        title="Reset wallet"
-        visible={resetWalletDialog}
-        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'} }}
+          </>
+        ) : (
+          <>
+            <CreateWallet
+              isWalletCreating={isWalletCreating}
+              createWalletHandler={createWalletHandler}
+            />
+            <View style={styles.createWalletContainer}>
+              <Button
+                variant="contained"
+                onClick={() => setImportWalletDialog(true)}
+              >
+                Import Wallet
+              </Button>
+            </View>
+          </>
+        )}
+        <ImportWalletDialog
+          visible={importWalletDialog}
+          hideDialog={() => setImportWalletDialog(false)}
+          importWalletHandler={importWalletHandler}
         />
-      </Portal>
+        <MnemonicDialog
+          visible={mnemonicDialog}
+          hideDialog={hideMnemonicDialog}
+          contentText={phrase}
+        />
+        <ConfirmDialog
+          title="Reset wallet"
+          visible={resetWalletDialog}
+          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>
+      </Box>
     </View>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index a05bdbc..5122fa6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2125,6 +2125,33 @@
     "@ethersproject/properties" "^5.7.0"
     "@ethersproject/strings" "^5.7.0"
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.7.tgz#7602367795a390ff0662efd1c7ae8ca74e75fb12"
+  integrity sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.7"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.10.tgz#b74c32f34a50336c86dcf1f1c845cf3a39e26d6f"
+  integrity sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.7"
+
+"@floating-ui/react-dom@^2.0.8":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz#cca58b6b04fc92b4c39288252e285e0422291fb0"
+  integrity sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/utils@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.7.tgz#d0ece53ce99ab5a8e37ebdfe5e32452a2bfc073e"
+  integrity sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==
+
 "@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@@ -2557,11 +2584,37 @@
     tweetnacl "^1.0.3"
     tweetnacl-util "^0.15.1"
 
+"@mui/base@5.0.0-beta.40":
+  version "5.0.0-beta.40"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2"
+  integrity sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@floating-ui/react-dom" "^2.0.8"
+    "@mui/types" "^7.2.14"
+    "@mui/utils" "^5.15.14"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/core-downloads-tracker@^5.16.4":
   version "5.16.4"
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.4.tgz#a34de72acd7e81fdbcc7eeb07786205e90dda148"
   integrity sha512-rNdHXhclwjEZnK+//3SR43YRx0VtjdHnUFhMSGYmAMJve+KiwEja/41EYh8V3pZKqF2geKyfcFUenTfDTYUR4w==
 
+"@mui/lab@^5.0.0-alpha.173":
+  version "5.0.0-alpha.173"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.173.tgz#a0f9696d93a765b48d69a7da5aaca0affa510ae8"
+  integrity sha512-Gt5zopIWwxDgGy/MXcp6GueD84xFFugFai4hYiXY0zowJpTVnIrTQCQXV004Q7rejJ7aaCntX9hpPJqCrioshA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/base" "5.0.0-beta.40"
+    "@mui/system" "^5.16.5"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.5"
+    clsx "^2.1.0"
+    prop-types "^15.8.1"
+
 "@mui/material@^5.16.4":
   version "5.16.4"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.16.4.tgz#992d630637d9d38620e4937fb11d0a97965fdabf"
@@ -2589,6 +2642,15 @@
     "@mui/utils" "^5.16.4"
     prop-types "^15.8.1"
 
+"@mui/private-theming@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.16.6.tgz#547671e7ae3f86b68d1289a0b90af04dfcc1c8c9"
+  integrity sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/utils" "^5.16.6"
+    prop-types "^15.8.1"
+
 "@mui/styled-engine@^5.16.4":
   version "5.16.4"
   resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.16.4.tgz#a7a8c9079c307bab91ccd65ed5dd1496ddf2a3ab"
@@ -2599,6 +2661,16 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
+"@mui/styled-engine@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.16.6.tgz#60110c106dd482dfdb7e2aa94fd6490a0a3f8852"
+  integrity sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
 "@mui/system@^5.16.4":
   version "5.16.4"
   resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.16.4.tgz#c03f971ed273f0ad06c69c949c05e866ad211407"
@@ -2613,11 +2685,37 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/types@^7.2.15":
+"@mui/system@^5.16.5":
+  version "5.16.7"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.16.7.tgz#4583ca5bf3b38942e02c15a1e622ba869ac51393"
+  integrity sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/private-theming" "^5.16.6"
+    "@mui/styled-engine" "^5.16.6"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.6"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.14", "@mui/types@^7.2.15":
   version "7.2.15"
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.15.tgz#dadd232fe9a70be0d526630675dff3b110f30b53"
   integrity sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==
 
+"@mui/utils@^5.15.14", "@mui/utils@^5.16.5", "@mui/utils@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.16.6.tgz#905875bbc58d3dcc24531c3314a6807aba22a711"
+  integrity sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/types" "^7.2.15"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+
 "@mui/utils@^5.16.4":
   version "5.16.4"
   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.16.4.tgz#8e50e27a630e3d8eeb3e9d3bc31cbb0e4956f5fd"
@@ -13225,16 +13323,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -13337,7 +13426,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13351,13 +13440,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -14654,7 +14736,7 @@ workbox-window@6.6.1:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -14672,15 +14754,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"