big tidy and some refactoring of high level component hierachy

nym-wallet/src/components/Accounts/AccountItem.tsx

@@ -7,15 +7,18 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import { Edit } from '@mui/icons-material';
+import { useClipboard } from 'use-clipboard-copy';
 import { AccountsContext } from 'src/context';
 import { AccountAvatar } from './AccountAvatar';
 
 export const AccountItem = ({ name, address }: { name: string; address: string }) => {
   const { selectedAccount, handleSelectAccount, handleAccountToEdit, setDialogToDisplay, setAccountMnemonic } =
     useContext(AccountsContext);
+  const { copy, copied } = useClipboard({ copiedTimeout: 1000 });
   return (
     <ListItem
       disablePadding
@@ -30,7 +33,19 @@ export const AccountItem = ({ name, address }: { name: string; address: string }
           primary={name}
           secondary={
             <Box>
-              <Typography variant="body2">{address}</Typography>
+              <Tooltip title={copied ? 'Copied!' : `Click to copy address ${address}`}>
+                <Typography
+                  component="span"
+                  variant="body2"
+                  onClick={(e: React.MouseEvent<HTMLElement>) => {
+                    e.stopPropagation();
+                    copy(address);
+                  }}
+                  sx={{ '&:hover': { color: 'grey.900' } }}
+                >
+                  {address}
+                </Typography>
+              </Tooltip>
               <Box sx={{ mt: 0.5 }}>
                 <Typography
                   variant="body2"

nym-wallet/src/components/Accounts/AddAccountModal.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
 import {
-  Alert,
   Box,
   Button,
   CircularProgress,
@@ -13,7 +12,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { Check, Close, ContentCopySharp } from '@mui/icons-material';
+import { ArrowBackSharp } from '@mui/icons-material';
 import { useClipboard } from 'use-clipboard-copy';
 import { createMnemonic } from 'src/requests';
 import { AccountsContext } from 'src/context';
@@ -83,7 +82,7 @@ const ImportMnemonic = ({
   </Box>
 );
 
-const NameAccount = ({ onPrev, onNext }: { onPrev: () => void; onNext: (value: string) => void }) => {
+const NameAccount = ({ onNext }: { onNext: (value: string) => void }) => {
   const [value, setValue] = useState('');
   return (
     <Box sx={{ mt: 1 }}>
@@ -91,9 +90,6 @@ const NameAccount = ({ onPrev, onNext }: { onPrev: () => void; onNext: (value: s
         <TextField value={value} onChange={(e) => setValue(e.target.value)} fullWidth />
       </DialogContent>
       <DialogActions sx={{ p: 3, pt: 0 }}>
-        <Button fullWidth size="large" onClick={onPrev}>
-          Back
-        </Button>
         <Button
           disabled={!value.length}
           fullWidth
@@ -109,9 +105,9 @@ const NameAccount = ({ onPrev, onNext }: { onPrev: () => void; onNext: (value: s
   );
 };
 
-const ConfirmPassword = ({ onPrev, onConfirm }: { onPrev: () => void; onConfirm: (password: string) => void }) => {
+const ConfirmPassword = ({ onConfirm }: { onConfirm: (password: string) => void }) => {
   const [value, setValue] = useState('');
-  const { isLoading, error, setError } = useContext(AccountsContext);
+  const { isLoading, error } = useContext(AccountsContext);
 
   return (
     <Box sx={{ mt: 1 }}>
@@ -124,16 +120,6 @@ const ConfirmPassword = ({ onPrev, onConfirm }: { onPrev: () => void; onConfirm:
         <TextField value={value} onChange={(e) => setValue(e.target.value)} fullWidth type="password" />
       </DialogContent>
       <DialogActions sx={{ p: 3, pt: 0 }}>
-        <Button
-          fullWidth
-          size="large"
-          onClick={() => {
-            setError(undefined);
-            onPrev();
-          }}
-        >
-          Back
-        </Button>
         <Button
           disabled={!value.length || isLoading}
           fullWidth
@@ -173,9 +159,12 @@ export const AddAccountModal = () => {
 
   useEffect(() => {
     if (dialogToDisplay === 'Add') generateMnemonic();
-    else setData({ mnemonic: '', accountName: '' });
   }, [dialogToDisplay]);
 
+  useEffect(() => {
+    setError(undefined);
+  }, [step]);
+
   return (
     <Dialog
       open={dialogToDisplay === 'Add' || dialogToDisplay === 'Import'}
@@ -186,8 +175,8 @@ export const AddAccountModal = () => {
       <DialogTitle sx={{ pb: 0 }}>
         <Box display="flex" justifyContent="space-between" alignItems="center">
           <Typography variant="h6">{`${dialogToDisplay} new account`}</Typography>
-          <IconButton onClick={handleClose}>
-            <Close />
+          <IconButton onClick={() => (step === 0 ? handleClose() : setStep((s) => s - 1))}>
+            <ArrowBackSharp />
           </IconButton>
         </Box>
         <Typography sx={{ mt: 2 }}>
@@ -209,7 +198,6 @@ export const AddAccountModal = () => {
           case 1:
             return (
               <NameAccount
-                onPrev={() => setStep((s) => s - 1)}
                 onNext={(accountName) => {
                   setData((d) => ({ ...d, accountName }));
                   setStep((s) => s + 1);
@@ -219,7 +207,6 @@ export const AddAccountModal = () => {
           case 2:
             return (
               <ConfirmPassword
-                onPrev={() => setStep((s) => s - 1)}
                 onConfirm={(password) => {
                   if (data.accountName && data.mnemonic) {
                     handleAddAccount({ accountName: data.accountName, mnemonic: data.mnemonic, password });

nym-wallet/src/components/Accounts/MnemonicModal.tsx

@@ -11,7 +11,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { Close } from '@mui/icons-material';
+import { ArrowBackSharp } from '@mui/icons-material';
 import { AccountsContext } from 'src/context';
 import { useClipboard } from 'use-clipboard-copy';
 import { Mnemonic } from '../Mnemonic';
@@ -45,7 +45,7 @@ export const MnemonicModal = () => {
         <Box display="flex" justifyContent="space-between" alignItems="center">
           <Typography variant="h6">Display mnemonic</Typography>
           <IconButton onClick={handleClose}>
-            <Close />
+            <ArrowBackSharp />
           </IconButton>
         </Box>
         <Typography variant="body1" sx={{ color: 'grey.600' }}>

nym-wallet/src/components/Accounts/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AccountsProvider } from 'src/context';
+import { Accounts } from './Accounts';
+
+export const MultiAccounts = () => (
+  <AccountsProvider>
+    <Accounts />
+  </AccountsProvider>
+);

nym-wallet/src/components/AppBar.tsx

@@ -1,21 +1,22 @@
 import React, { useContext } from 'react';
 import { AppBar as MuiAppBar, Grid, IconButton, Toolbar } from '@mui/material';
+import { useHistory } from 'react-router-dom';
 import { Logout } from '@mui/icons-material';
-import { ClientContext } from '../context/main';
+import { AppContext } from '../context/main';
 import { NetworkSelector } from './NetworkSelector';
 import { Node as NodeIcon } from '../svg-icons/node';
-import { Accounts } from './Accounts/Accounts';
+import { MultiAccounts } from './Accounts';
 
 export const AppBar = () => {
-  const { showSettings, logOut, handleShowSettings } = useContext(ClientContext);
-
+  const { showSettings, logOut, handleShowSettings } = useContext(AppContext);
+  const history = useHistory();
   return (
     <MuiAppBar position="sticky" sx={{ boxShadow: 'none', bgcolor: 'transparent' }}>
       <Toolbar disableGutters>
         <Grid container justifyContent="space-between" alignItems="center" flexWrap="nowrap">
           <Grid item container alignItems="center" spacing={1}>
             <Grid item>
-              <Accounts />
+              <MultiAccounts />
             </Grid>
             <Grid item>
               <NetworkSelector />
@@ -32,7 +33,14 @@ export const AppBar = () => {
               </IconButton>
             </Grid>
             <Grid item>
-              <IconButton size="small" onClick={logOut} sx={{ color: 'nym.background.dark' }}>
+              <IconButton
+                size="small"
+                onClick={async () => {
+                  await logOut();
+                  history.push('/');
+                }}
+                sx={{ color: 'nym.background.dark' }}
+              >
                 <Logout fontSize="small" />
               </IconButton>
             </Grid>

nym-wallet/src/components/ClientAddress.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useContext } from 'react';
 import { Box, Typography, Tooltip } from '@mui/material';
-import { ClientContext } from '../context/main';
+import { AppContext } from '../context/main';
 import { CopyToClipboard } from './CopyToClipboard';
 import { splice } from '../utils';
 
@@ -53,6 +53,6 @@ export const ClientAddressDisplay: FC<ClientAddressProps & { address?: string }>
 );
 
 export const ClientAddress: FC<ClientAddressProps> = ({ ...props }) => {
-  const { clientDetails } = useContext(ClientContext);
+  const { clientDetails } = useContext(AppContext);
   return <ClientAddressDisplay {...props} address={clientDetails?.client_address} />;
 };

nym-wallet/src/components/Fee.tsx

@@ -2,11 +2,11 @@ import React, { useState, useEffect, useContext } from 'react';
 import { Typography } from '@mui/material';
 import { Operation } from '../types';
 import { getGasFee } from '../requests';
-import { ClientContext } from '../context/main';
+import { AppContext } from '../context/main';
 
 export const Fee = ({ feeType }: { feeType: Operation }) => {
   const [fee, setFee] = useState<string>();
-  const { currency } = useContext(ClientContext);
+  const { currency } = useContext(AppContext);
 
   const getFee = async () => {
     const res = await getGasFee(feeType);

nym-wallet/src/components/LoadingPage.tsx

@@ -1,33 +1,38 @@
 import React from 'react';
 import { Box, LinearProgress, Stack } from '@mui/material';
 import { NymWordmark } from '@nymproject/react';
+import { AuthTheme } from 'src/theme';
 
 export const LoadingPage = () => (
-  <Box
-    sx={{
-      height: '100vh',
-      width: '100vw',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      overflow: 'auto',
-      bgcolor: 'nym.background.dark',
-    }}
-  >
+  <AuthTheme>
     <Box
       sx={{
-        width: '100%',
+        position: 'fixed',
+        height: '100vh',
+        width: '100vw',
         display: 'flex',
         justifyContent: 'center',
-        margin: 'auto',
+        alignItems: 'center',
+        overflow: 'auto',
+        bgcolor: 'nym.background.dark',
+        zIndex: 2000,
       }}
     >
-      <Stack spacing={3} alignItems="center" sx={{ width: 1080 }}>
-        <NymWordmark width={75} fill="white" />
-        <Box width="25%">
-          <LinearProgress variant="indeterminate" color="primary" />
-        </Box>
-      </Stack>
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          margin: 'auto',
+        }}
+      >
+        <Stack spacing={3} alignItems="center" sx={{ width: 1080 }}>
+          <NymWordmark width={75} fill="white" />
+          <Box width="25%">
+            <LinearProgress variant="indeterminate" color="primary" />
+          </Box>
+        </Stack>
+      </Box>
     </Box>
-  </Box>
+  </AuthTheme>
 );

nym-wallet/src/components/Nav.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
 import { AccountBalanceWalletOutlined, ArrowBack, ArrowForward, Description, Settings } from '@mui/icons-material';
-import { ADMIN_ADDRESS, ClientContext } from '../context/main';
+import { ADMIN_ADDRESS, AppContext } from '../context/main';
 import { Bond, Delegate, Unbond, Undelegate } from '../svg-icons';
 
 const routesSchema = [
@@ -44,7 +44,7 @@ const routesSchema = [
 ];
 
 export const Nav = () => {
-  const { clientDetails, handleShowAdmin } = useContext(ClientContext);
+  const { clientDetails, handleShowAdmin } = useContext(AppContext);
   const location = useLocation();
 
   useEffect(() => {

nym-wallet/src/components/NetworkSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react';
 import { Button, List, ListItem, ListItemIcon, ListItemText, ListSubheader, Popover } from '@mui/material';
 import { ArrowDropDown, CheckSharp } from '@mui/icons-material';
-import { ClientContext, IS_DEV_MODE } from '../context/main';
+import { AppContext, IS_DEV_MODE } from '../context/main';
 import { Network } from '../types';
 
 const networks: { networkName: Network; name: string }[] = [
@@ -22,7 +22,7 @@ const NetworkItem: React.FC<{ title: string; isSelected: boolean; onSelect: () =
 );
 
 export const NetworkSelector = () => {
-  const { network, switchNetwork } = useContext(ClientContext);
+  const { network, switchNetwork } = useContext(AppContext);
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 

nym-wallet/src/components/TokenPoolSelector.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { FormControl, InputLabel, ListItemText, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/material';
-import { ClientContext } from '../context/main';
+import { AppContext } from '../context/main';
 
 type TPoolOption = 'balance' | 'locked';
 
@@ -12,7 +12,7 @@ export const TokenPoolSelector: React.FC<{ disabled: boolean; onSelect: (pool: T
   const {
     userBalance: { tokenAllocation, balance, fetchBalance, fetchTokenAllocation },
     currency,
-  } = useContext(ClientContext);
+  } = useContext(AppContext);
 
   useEffect(() => {
     (async () => {

nym-wallet/src/components/index.ts

@@ -15,3 +15,4 @@ export * from './ClientAddress';
 export * from './InfoToolTip';
 export * from './Title';
 export * from './TokenPoolSelector';
+export * from './LoadingPage';

nym-wallet/src/context/accounts.tsx

@@ -2,7 +2,7 @@ import React, { createContext, Dispatch, SetStateAction, useContext, useEffect,
 import { AccountEntry } from 'src/types';
 import { addAccount as addAccountRequest, showMnemonicForAccount } from 'src/requests';
 import { useSnackbar } from 'notistack';
-import { ClientContext } from './main';
+import { AppContext } from './main';
 
 type TAccounts = {
   accounts?: AccountEntry[];
@@ -39,7 +39,7 @@ export const AccountsProvider: React.FC = ({ children }) => {
   });
   const [error, setError] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
-  const { onAccountChange, storedAccounts } = useContext(ClientContext);
+  const { onAccountChange, storedAccounts } = useContext(AppContext);
   const { enqueueSnackbar } = useSnackbar();
 
   const handleAddAccount = async ({
@@ -76,9 +76,11 @@ export const AccountsProvider: React.FC = ({ children }) => {
     setAccountToEdit(accounts?.find((acc) => acc.id === accountName));
 
   const handleSelectAccount = async (accountName: string) => {
-    await onAccountChange(accountName);
-    const match = accounts?.find((acc) => acc.id === accountName);
-    setSelectedAccount(match);
+    if (accountName !== selectedAccount?.id) {
+      await onAccountChange(accountName);
+      const match = accounts?.find((acc) => acc.id === accountName);
+      setSelectedAccount(match);
+    }
   };
 
   const handleGetAcccountMnemonic = async ({ password, accountName }: { password: string; accountName: string }) => {

nym-wallet/src/context/auth.tsx

@@ -1,11 +1,10 @@
 import React, { createContext, useEffect, useMemo, useState } from 'react';
-import { useHistory } from 'react-router-dom';
 import { createMnemonic } from 'src/requests';
-import { TMnemonicWords } from 'src/pages/sign-in/types';
+import { TMnemonicWords } from 'src/pages/auth/types';
 
-export const SignInContext = createContext({} as TSignInContent);
+export const AuthContext = createContext({} as TAuthContext);
 
-export type TSignInContent = {
+export type TAuthContext = {
   error?: string;
   password: string;
   mnemonic: string;
@@ -22,23 +21,17 @@ const mnemonicToArray = (mnemonic: string): TMnemonicWords =>
     .split(' ')
     .reduce((a, c: string, index) => [...a, { name: c, index: index + 1, disabled: false }], [] as TMnemonicWords);
 
-export const SignInProvider: React.FC = ({ children }) => {
+export const AuthProvider: React.FC = ({ children }) => {
   const [password, setPassword] = useState('');
   const [mnemonic, setMnemonic] = useState('');
   const [mnemonicWords, setMnemonicWords] = useState<TMnemonicWords>([]);
   const [error, setError] = useState<string>();
 
-  const history = useHistory();
-
   const generateMnemonic = async () => {
     const mnemonicPhrase = await createMnemonic();
     setMnemonic(mnemonicPhrase);
   };
 
-  useEffect(() => {
-    history.push('/welcome');
-  }, []);
-
   useEffect(() => {
     if (mnemonic.length > 0) {
       const mnemonicArray = mnemonicToArray(mnemonic);
@@ -54,7 +47,7 @@ export const SignInProvider: React.FC = ({ children }) => {
   };
 
   return (
-    <SignInContext.Provider
+    <AuthContext.Provider
       value={useMemo(
         () => ({
           error,
@@ -71,6 +64,6 @@ export const SignInProvider: React.FC = ({ children }) => {
       )}
     >
       {children}
-    </SignInContext.Provider>
+    </AuthContext.Provider>
   );
 };

nym-wallet/src/context/index.tsx

@@ -1,3 +1,3 @@
 export * from './main';
-export * from './sign-in';
+export * from './auth';
 export * from './accounts';

nym-wallet/src/context/main.tsx

@@ -31,7 +31,7 @@ export const urls = (networkName?: Network) =>
 
 type TLoginType = 'mnemonic' | 'password';
 
-type TClientContext = {
+type TAppContext = {
   mode: 'light' | 'dark';
   clientDetails?: Account;
   storedAccounts?: AccountEntry[];
@@ -56,9 +56,9 @@ type TClientContext = {
   onAccountChange: (accountId: string) => void;
 };
 
-export const ClientContext = createContext({} as TClientContext);
+export const AppContext = createContext({} as TAppContext);
 
-export const ClientContextProvider = ({ children }: { children: React.ReactNode }) => {
+export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   const [clientDetails, setClientDetails] = useState<Account>();
   const [storedAccounts, setStoredAccounts] = useState<AccountEntry[]>();
   const [mixnodeDetails, setMixnodeDetails] = useState<TMixnodeBondDetails | null>();
@@ -119,12 +119,15 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
   };
 
   useEffect(() => {
-    if (network) refreshAccount(network);
-  }, [network]);
+    if (!clientDetails) {
+      clearState();
+      history.push('/');
+    }
+  }, [clientDetails]);
 
   useEffect(() => {
-    if (!clientDetails) clearState();
-  }, [clientDetails]);
+    if (network) refreshAccount(network);
+  }, [network]);
 
   const logIn = async ({ type, value }: { type: TLoginType; value: string }) => {
     if (value.length === 0) {
@@ -215,5 +218,5 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode
     ],
   );
 
-  return <ClientContext.Provider value={memoizedValue}>{children}</ClientContext.Provider>;
+  return <AppContext.Provider value={memoizedValue}>{children}</AppContext.Provider>;
 };

nym-wallet/src/hooks/useCheckOwnership.ts

@@ -1,6 +1,6 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { Console } from '../utils/console';
-import { ClientContext } from '../context/main';
+import { AppContext } from '../context/main';
 import { checkGatewayOwnership, checkMixnodeOwnership, getVestingPledgeInfo } from '../requests';
 import { EnumNodeType, TNodeOwnership } from '../types';
 
@@ -11,7 +11,7 @@ const initial = {
 };
 
 export const useCheckOwnership = () => {
-  const { clientDetails } = useContext(ClientContext);
+  const { clientDetails } = useContext(AppContext);
 
   const [ownership, setOwnership] = useState<TNodeOwnership>(initial);
   const [isLoading, setIsLoading] = useState(true);

nym-wallet/src/hooks/useGetBalance.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { invoke } from '@tauri-apps/api';
 import { VestingAccountInfo } from 'src/types/rust/vestingaccountinfo';
-import { Balance, Coin, OriginalVestingResponse, Period } from '../types';
+import { Balance, Coin, Network, OriginalVestingResponse, Period } from '../types';
 import {
   getVestingCoins,
   getVestedCoins,
@@ -92,9 +92,7 @@ export const useGetBalance = (address?: string): TUseuserBalance => {
     } catch (err) {
       setError(err as string);
     } finally {
-      setTimeout(() => {
-        setIsLoading(false);
-      }, 1000);
+      setIsLoading(false);
     }
   }, []);
 

nym-wallet/src/index.tsx

@@ -1,63 +1,39 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { SnackbarProvider } from 'notistack';
-import { AppRoutes, SignInRoutes } from './routes';
-import { ClientContext, ClientContextProvider } from './context/main';
-import { ApplicationLayout } from './layouts';
-import { Admin, Settings } from './pages';
+import { Routes } from './routes';
+import { AppProvider } from './context/main';
 import { ErrorFallback } from './components';
-import { NymWalletTheme, WelcomeTheme } from './theme';
+import { NymWalletTheme } from './theme';
 import { maximizeWindow } from './utils';
-import { AccountsProvider, SignInProvider } from './context';
-import { LoadingPage } from './components/LoadingPage';
 
 const App = () => {
-  const { clientDetails, isLoading } = useContext(ClientContext);
-
   useEffect(() => {
     maximizeWindow();
   }, []);
 
-  return !clientDetails ? (
-    <WelcomeTheme>
-      <SignInProvider>{!isLoading ? <SignInRoutes /> : <LoadingPage />}</SignInProvider>
-    </WelcomeTheme>
-  ) : (
-    <NymWalletTheme>
-      <AccountsProvider>
-        {isLoading ? (
-          <LoadingPage />
-        ) : (
-          <ApplicationLayout>
-            <Settings />
-            <Admin />
-            <AppRoutes />
-          </ApplicationLayout>
-        )}
-      </AccountsProvider>
-    </NymWalletTheme>
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <Router>
+        <SnackbarProvider
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+        >
+          <AppProvider>
+            <NymWalletTheme>
+              <Routes />
+            </NymWalletTheme>
+          </AppProvider>
+        </SnackbarProvider>
+      </Router>
+    </ErrorBoundary>
   );
 };
 
-const AppWrapper = () => (
-  <ErrorBoundary FallbackComponent={ErrorFallback}>
-    <Router>
-      <SnackbarProvider
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-      >
-        <ClientContextProvider>
-          <App />
-        </ClientContextProvider>
-      </SnackbarProvider>
-    </Router>
-  </ErrorBoundary>
-);
-
 const root = document.getElementById('root');
 
-ReactDOM.render(<AppWrapper />, root);
+ReactDOM.render(<App />, root);

nym-wallet/src/layouts/AppLayout.tsx

@@ -1,44 +1,52 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { NymWordmark } from '@nymproject/react';
 import { Box, Container } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { AppBar, Nav } from '../components';
+import { AppContext } from 'src/context';
+import { Settings } from 'src/pages';
+import { AppBar, LoadingPage, Nav } from '../components';
 
 export const ApplicationLayout: React.FC = ({ children }) => {
   const theme = useTheme();
+  const { isLoading, showSettings } = useContext(AppContext);
+
   return (
-    <Box
-      sx={{
-        height: '100vh',
-        width: '100vw',
-        display: 'grid',
-        gridTemplateColumns: '240px auto',
-        gridTemplateRows: '100%',
-        overflow: 'hidden',
-      }}
-    >
+    <>
+      {isLoading && <LoadingPage />}
+      {showSettings && <Settings />}
       <Box
         sx={{
-          background: '#121726',
-          overflow: 'auto',
-          py: 3,
-          px: 5,
+          height: '100vh',
+          width: '100vw',
+          display: 'grid',
+          gridTemplateColumns: '240px auto',
+          gridTemplateRows: '100%',
+          overflow: 'hidden',
         }}
-        display="flex"
-        flexDirection="column"
-        justifyContent="space-between"
       >
-        <Box>
-          <Box sx={{ mb: 4 }}>
-            <NymWordmark height={14} fill={theme.palette.background.paper} />
+        <Box
+          sx={{
+            background: '#121726',
+            overflow: 'auto',
+            py: 3,
+            px: 5,
+          }}
+          display="flex"
+          flexDirection="column"
+          justifyContent="space-between"
+        >
+          <Box>
+            <Box sx={{ mb: 4 }}>
+              <NymWordmark height={14} fill={theme.palette.background.paper} />
+            </Box>
+            <Nav />
           </Box>
-          <Nav />
         </Box>
+        <Container>
+          <AppBar />
+          {children}
+        </Container>
       </Box>
-      <Container>
-        <AppBar />
-        {children}
-      </Container>
-    </Box>
+    </>
   );
 };

nym-wallet/src/layouts/AuthLayout.tsx

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react';
+import { NymWordmark } from '@nymproject/react';
+import { Stack, Box } from '@mui/material';
+import { AppContext } from 'src/context';
+import { LoadingPage } from 'src/components';
+import { Step } from '../pages/auth/components/step';
+
+export const AuthLayout: React.FC = ({ children }) => {
+  const { isLoading } = useContext(AppContext);
+
+  return isLoading ? (
+    <LoadingPage />
+  ) : (
+    <Box
+      sx={{
+        height: '100vh',
+        width: '100vw',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'auto',
+        bgcolor: 'nym.background.dark',
+      }}
+    >
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          margin: 'auto',
+        }}
+      >
+        <Stack spacing={3} alignItems="center" sx={{ width: 1080 }}>
+          <NymWordmark width={75} />
+          <Step />
+          {children}
+        </Stack>
+      </Box>
+    </Box>
+  );
+};

nym-wallet/src/pages/Admin/index.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Backdrop, Box, Button, CircularProgress, FormControl, Grid, Paper, Slide, TextField } from '@mui/material';
 
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { NymCard } from '../../components';
 import { getContractParams, setContractParams } from '../../requests';
 import { TauriContractStateParams } from '../../types';
@@ -99,7 +99,7 @@ const AdminForm: React.FC<{
 };
 
 export const Admin: React.FC = () => {
-  const { showAdmin, handleShowAdmin } = useContext(ClientContext);
+  const { showAdmin, handleShowAdmin } = useContext(AppContext);
   const [isLoading, setIsLoading] = useState(false);
   const [params, setParams] = useState<TauriContractStateParams>();
 

nym-wallet/src/pages/auth/components/index.ts

@@ -1,8 +1,6 @@
 export * from './heading';
 export * from './word-tiles';
-export * from './render-page';
 export * from './password-strength';
 export * from './error';
 export * from './textfields';
 export * from './step';
-export * from './page-layout';

nym-wallet/src/pages/auth/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AuthProvider } from 'src/context';
+import { AuthRoutes } from 'src/routes/auth';
+
+export const Auth = () => (
+  <AuthProvider>
+    <AuthRoutes />
+  </AuthProvider>
+);

nym-wallet/src/pages/auth/pages/confirm-mnemonic.tsx

@@ -2,11 +2,11 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button, Stack } from '@mui/material';
 import { validateMnemonic } from 'src/requests';
-import { SignInContext } from 'src/context';
+import { AuthContext } from 'src/context/auth';
 import { MnemonicInput, Subtitle } from '../components';
 
 export const ConfirmMnemonic = () => {
-  const { error, setError, setMnemonic, mnemonic } = useContext(SignInContext);
+  const { error, setError, setMnemonic, mnemonic } = useContext(AuthContext);
   const [localMnemonic, setLocalMnemonic] = useState(mnemonic);
   const history = useHistory();
 

nym-wallet/src/pages/auth/pages/connect-password.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button, CircularProgress, FormControl, Stack } from '@mui/material';
 import { useSnackbar } from 'notistack';
-import { SignInContext } from 'src/context';
+import { AuthContext } from 'src/context/auth';
 import { createPassword } from 'src/requests';
 import { Subtitle, Title, PasswordStrength } from '../components';
 import { PasswordInput } from '../components/textfields';
@@ -12,7 +12,7 @@ export const ConnectPassword = () => {
   const [isStrongPassword, setIsStrongPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const { mnemonic, password, setPassword, resetState } = useContext(SignInContext);
+  const { mnemonic, password, setPassword, resetState } = useContext(AuthContext);
   const history = useHistory();
 
   const { enqueueSnackbar } = useSnackbar();

nym-wallet/src/pages/auth/pages/create-mnemonic.tsx

@@ -1,13 +1,13 @@
 import React, { useContext, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Alert, Button, Stack, Typography } from '@mui/material';
-import { SignInContext } from 'src/context';
+import { AuthContext } from 'src/context/auth';
 import { Check, ContentCopySharp } from '@mui/icons-material';
 import { useClipboard } from 'use-clipboard-copy';
 import { WordTiles } from '../components';
 
 export const CreateMnemonic = () => {
-  const { mnemonic, mnemonicWords, generateMnemonic, resetState } = useContext(SignInContext);
+  const { mnemonic, mnemonicWords, generateMnemonic, resetState } = useContext(AuthContext);
   const history = useHistory();
 
   useEffect(() => {

nym-wallet/src/pages/auth/pages/create-password.tsx

@@ -2,17 +2,16 @@ import React, { useContext, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button, FormControl, Stack } from '@mui/material';
 import { useSnackbar } from 'notistack';
-import { SignInContext } from 'src/context/sign-in';
+import { AuthContext } from 'src/context/auth';
 import { createPassword } from 'src/requests';
 import { PasswordInput, Subtitle, Title, PasswordStrength } from '../components';
 
 export const CreatePassword = () => {
-  const { password, setPassword, resetState } = useContext(SignInContext);
+  const { password, setPassword, resetState, mnemonic } = useContext(AuthContext);
   const [confirmedPassword, setConfirmedPassword] = useState<string>('');
   const [isStrongPassword, setIsStrongPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const { mnemonic } = useContext(SignInContext);
   const history = useHistory();
 
   const handleSkip = () => {

nym-wallet/src/pages/auth/pages/existing-account.tsx

@@ -19,7 +19,7 @@ export const ExistingAccount = () => {
           Sign in with password
         </Button>
         <Box display="flex" justifyContent="space-between">
-          <Button color="inherit" onClick={() => history.push('/welcome')}>
+          <Button color="inherit" onClick={() => history.push('/')}>
             Back
           </Button>
           <Button color="info" onClick={() => history.push('/sign-in-mnemonic')}>

nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Box, Button, FormControl, Stack } from '@mui/material';
-import { ClientContext } from 'src/context';
+import { AppContext } from 'src/context';
 import { isPasswordCreated } from 'src/requests';
 import { MnemonicInput, Subtitle } from '../components';
 
@@ -9,7 +9,7 @@ export const SignInMnemonic = () => {
   const [mnemonic, setMnemonic] = useState('');
   const [passwordExists, setPasswordExists] = useState(true);
 
-  const { setError, logIn, error } = useContext(ClientContext);
+  const { setError, logIn, error } = useContext(AppContext);
   const history = useHistory();
 
   const checkForPassword = async () => {

nym-wallet/src/pages/auth/pages/signin-password.tsx

@@ -2,11 +2,11 @@ import React, { useContext, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Box, Button, FormControl, Stack } from '@mui/material';
 import { PasswordInput, Subtitle } from '../components';
-import { ClientContext } from '../../../context/main';
+import { AppContext } from '../../../context/main';
 
 export const SignInPassword = () => {
   const [password, setPassword] = useState('');
-  const { setError, logIn, error } = useContext(ClientContext);
+  const { setError, logIn, error } = useContext(AppContext);
   const history = useHistory();
 
   return (

nym-wallet/src/pages/auth/pages/verify-mnemonic.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button, Stack } from '@mui/material';
-import { SignInContext } from 'src/context/sign-in';
+import { AuthContext } from 'src/context/auth';
 import { randomNumberBetween } from 'src/utils';
 import { HiddenWords, Subtitle, Title, WordTiles } from '../components';
 import { THiddenMnemonicWord, THiddenMnemonicWords, TMnemonicWord, TMnemonicWords } from '../types';
@@ -13,7 +13,7 @@ export const VerifyMnemonic = () => {
   const [hiddenRandomWords, setHiddenRandomWords] = useState<THiddenMnemonicWords>();
   const [currentSelection, setCurrentSelection] = useState(0);
 
-  const { mnemonicWords } = useContext(SignInContext);
+  const { mnemonicWords } = useContext(AuthContext);
   const history = useHistory();
 
   useEffect(() => {

nym-wallet/src/pages/balance/balance.tsx

@@ -2,10 +2,10 @@ import React, { useContext, useEffect } from 'react';
 import { Alert, Button, Grid, Link, Typography } from '@mui/material';
 import { OpenInNew } from '@mui/icons-material';
 import { NymCard, ClientAddress } from '../../components';
-import { ClientContext, urls } from '../../context/main';
+import { AppContext, urls } from '../../context/main';
 
 export const BalanceCard = () => {
-  const { userBalance, clientDetails, network } = useContext(ClientContext);
+  const { userBalance, clientDetails, network } = useContext(AppContext);
 
   useEffect(() => {
     userBalance.fetchBalance();

nym-wallet/src/pages/balance/components/vesting-timeline.tsx

@@ -2,7 +2,7 @@
 import React, { useContext } from 'react';
 import { Box, Tooltip, Typography } from '@mui/material';
 import { format } from 'date-fns';
-import { ClientContext } from '../../../context/main';
+import { AppContext } from '../../../context/main';
 
 const calculateMarkerPosition = (arrLength: number, index: number) => (1 / arrLength) * 100 * index;
 
@@ -19,7 +19,7 @@ const Marker: React.FC<{ tooltipText: string; color: string; position: string }>
 export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ percentageComplete }) => {
   const {
     userBalance: { currentVestingPeriod, vestingAccountInfo },
-  } = useContext(ClientContext);
+  } = useContext(AppContext);
 
   const nextPeriod =
     typeof currentVestingPeriod === 'object' && !!vestingAccountInfo?.periods

nym-wallet/src/pages/balance/index.tsx

@@ -2,11 +2,11 @@ import React, { useContext, useEffect } from 'react';
 import { Box } from '@mui/material';
 import { BalanceCard } from './balance';
 import { VestingCard } from './vesting';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { PageLayout } from '../../layouts';
 
 export const Balance = () => {
-  const { userBalance } = useContext(ClientContext);
+  const { userBalance } = useContext(AppContext);
 
   useEffect(() => {
     userBalance.fetchBalance();

nym-wallet/src/pages/balance/vesting.tsx

@@ -16,7 +16,7 @@ import {
 import { InfoOutlined, Refresh } from '@mui/icons-material';
 import { useSnackbar } from 'notistack';
 import { Fee, InfoTooltip, NymCard, Title } from '../../components';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { withdrawVestedCoins } from '../../requests';
 import { Period } from '../../types';
 import { VestingTimeline } from './components/vesting-timeline';
@@ -38,7 +38,7 @@ const vestingPeriod = (current?: Period, original?: number) => {
 };
 
 const VestingSchedule = () => {
-  const { userBalance, currency } = useContext(ClientContext);
+  const { userBalance, currency } = useContext(AppContext);
   const [vestedPercentage, setVestedPercentage] = useState(0);
 
   const calculatePercentage = () => {
@@ -93,7 +93,7 @@ const VestingSchedule = () => {
 };
 
 const TokenTransfer = () => {
-  const { userBalance, currency } = useContext(ClientContext);
+  const { userBalance, currency } = useContext(AppContext);
   const icon = useCallback(
     () => (
       <Box sx={{ display: 'flex', mr: 1 }}>
@@ -123,7 +123,7 @@ const TokenTransfer = () => {
 export const VestingCard = () => {
   const [isLoading, setIsLoading] = useState(false);
 
-  const { userBalance } = useContext(ClientContext);
+  const { userBalance } = useContext(AppContext);
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 
   const refreshBalances = async () => {

nym-wallet/src/pages/bond/BondForm.tsx

@@ -16,7 +16,7 @@ import { NodeTypeSelector } from '../../components/NodeTypeSelector';
 import { bond, vestingBond, majorToMinor } from '../../requests';
 import { validationSchema } from './validationSchema';
 import { Gateway, MixNode, TBondArgs, EnumNodeType } from '../../types';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { Fee, TokenPoolSelector } from '../../components';
 
 type TBondFormFields = {
@@ -96,7 +96,7 @@ export const BondForm = ({
     defaultValues,
   });
 
-  const { userBalance, currency, clientDetails } = useContext(ClientContext);
+  const { userBalance, currency, clientDetails } = useContext(AppContext);
 
   useEffect(() => {
     reset();

nym-wallet/src/pages/bond/SuccessView.tsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
 import { Box } from '@mui/material';
 import { SuccessReponse, TransactionDetails } from '../../components';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { useCheckOwnership } from '../../hooks/useCheckOwnership';
 
 export const SuccessView: React.FC<{ details?: { amount: string; address: string } }> = ({ details }) => {
-  const { userBalance, currency } = useContext(ClientContext);
+  const { userBalance, currency } = useContext(AppContext);
   const { ownership } = useCheckOwnership();
 
   return (

nym-wallet/src/pages/delegate/DelegateForm.tsx

@@ -4,7 +4,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import { DelegationResult, EnumNodeType, TDelegateArgs } from '../../types';
 import { validationSchema } from './validationSchema';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { delegate, majorToMinor, vestingDelegateToMixnode } from '../../requests';
 import { Fee, TokenPoolSelector } from '../../components';
 import { Console } from '../../utils/console';
@@ -41,7 +41,7 @@ export const DelegateForm = ({
     resolver: yupResolver(validationSchema),
   });
 
-  const { userBalance, currency, clientDetails } = useContext(ClientContext);
+  const { userBalance, currency, clientDetails } = useContext(AppContext);
 
   useEffect(() => {
     reset();

nym-wallet/src/pages/delegate/SuccessView.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import { Box, Stack, Typography } from '@mui/material';
 import { SuccessReponse, TransactionDetails } from '../../components';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 
 export const SuccessView: React.FC<{ details?: { amount: string; address: string } }> = ({ details }) => {
-  const { userBalance, currency } = useContext(ClientContext);
+  const { userBalance, currency } = useContext(AppContext);
   return (
     <>
       <SuccessReponse

nym-wallet/src/pages/delegate/index.tsx

@@ -4,7 +4,7 @@ import { DelegateForm } from './DelegateForm';
 import { NymCard } from '../../components';
 import { EnumRequestStatus, RequestStatus } from '../../components/RequestStatus';
 import { SuccessView } from './SuccessView';
-import { urls, ClientContext } from '../../context/main';
+import { urls, AppContext } from '../../context/main';
 import { PageLayout } from '../../layouts';
 
 export const Delegate = () => {
@@ -12,7 +12,7 @@ export const Delegate = () => {
   const [error, setError] = useState<string>();
   const [successDetails, setSuccessDetails] = useState<{ amount: string; address: string }>();
 
-  const { network } = useContext(ClientContext);
+  const { network } = useContext(AppContext);
 
   return (
     <PageLayout>

nym-wallet/src/pages/index.ts

@@ -5,7 +5,7 @@ export * from './delegate';
 export * from './internal-docs';
 export * from './receive';
 export * from './send';
-export * from './sign-in';
+export * from './auth';
 export * from './settings';
 export * from './unbond';
 export * from './undelegate';

nym-wallet/src/pages/internal-docs/index.tsx

@@ -2,10 +2,10 @@ import React, { useContext } from 'react';
 import { NymCard } from '../../components';
 import { ApiList } from './ApiList';
 
-import { ADMIN_ADDRESS, ClientContext } from '../../context/main';
+import { ADMIN_ADDRESS, AppContext } from '../../context/main';
 
 export const InternalDocs = () => {
-  const { clientDetails } = useContext(ClientContext);
+  const { clientDetails } = useContext(AppContext);
   if (clientDetails?.client_address === ADMIN_ADDRESS) {
     return (
       <NymCard title="Docs" subheader="Internal API docs">

nym-wallet/src/pages/receive/index.tsx

@@ -2,11 +2,11 @@ import React, { useContext } from 'react';
 import QRCode from 'qrcode.react';
 import { Alert, Box, Stack } from '@mui/material';
 import { ClientAddress, NymCard } from '../../components';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { PageLayout } from '../../layouts';
 
 export const Receive = () => {
-  const { clientDetails, currency } = useContext(ClientContext);
+  const { clientDetails, currency } = useContext(AppContext);
 
   return (
     <PageLayout>

nym-wallet/src/pages/send/SendConfirmation.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { Box, CircularProgress, Link, Typography } from '@mui/material';
 import { SendError } from './SendError';
-import { ClientContext, urls } from '../../context/main';
+import { AppContext, urls } from '../../context/main';
 import { SuccessReponse } from '../../components';
 import { TransactionDetails } from '../../components/TransactionDetails';
 import { TransactionDetails as TTransactionDetails } from '../../types';
@@ -15,7 +15,7 @@ export const SendConfirmation = ({
   error?: string;
   isLoading: boolean;
 }) => {
-  const { userBalance, currency, network } = useContext(ClientContext);
+  const { userBalance, currency, network } = useContext(AppContext);
 
   if (!data && !error && !isLoading) return null;
 

nym-wallet/src/pages/send/SendForm.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { Grid, InputAdornment, TextField } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { Fee } from '../../components';
 
 export const SendForm = () => {
@@ -9,7 +9,7 @@ export const SendForm = () => {
     register,
     formState: { errors },
   } = useFormContext();
-  const { currency } = useContext(ClientContext);
+  const { currency } = useContext(AppContext);
 
   return (
     <Grid container spacing={3}>

nym-wallet/src/pages/send/SendReview.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { Card, Divider, Grid, Typography } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 
 const SendReviewField = ({ title, subtitle, info }: { title: string; subtitle?: string; info?: boolean }) => (
   <>
@@ -14,7 +14,7 @@ const SendReviewField = ({ title, subtitle, info }: { title: string; subtitle?:
 
 export const SendReview = ({ transferFee }: { transferFee?: string }) => {
   const { getValues } = useFormContext();
-  const { clientDetails, currency } = useContext(ClientContext);
+  const { clientDetails, currency } = useContext(AppContext);
 
   const values = getValues();
 

nym-wallet/src/pages/send/SendWizard.tsx

@@ -6,7 +6,7 @@ import { Box, Button, Step, StepLabel, Stepper } from '@mui/material';
 import { SendForm } from './SendForm';
 import { SendReview } from './SendReview';
 import { SendConfirmation } from './SendConfirmation';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { validationSchema } from './validationSchema';
 import { TauriTxResult, TransactionDetails } from '../../types';
 import { getGasFee, majorToMinor, send } from '../../requests';
@@ -32,7 +32,7 @@ export const SendWizard = () => {
   const [transferFee, setTransferFee] = useState<string>();
   const [confirmedData, setConfirmedData] = useState<TransactionDetails & { tx_hash: string }>();
 
-  const { userBalance } = useContext(ClientContext);
+  const { userBalance } = useContext(AppContext);
 
   useEffect(() => {
     const getFee = async () => {

nym-wallet/src/pages/send/index.tsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
 import { NymCard } from '../../components';
 import { SendWizard } from './SendWizard';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { PageLayout } from '../../layouts';
 
 export const Send = () => {
-  const { currency } = useContext(ClientContext);
+  const { currency } = useContext(AppContext);
   return (
     <PageLayout>
       <NymCard title={`Send ${currency?.major}`} noPadding>

nym-wallet/src/pages/settings/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Alert, Box, Dialog } from '@mui/material';
 import { NymCard } from '../../components';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { Tabs } from './tabs';
 import { Profile } from './profile';
 import { SystemVariables } from './system-variables';
@@ -15,7 +15,7 @@ const tabs = ['Profile', 'System variables', 'Node stats'];
 export const Settings = () => {
   const [selectedTab, setSelectedTab] = useState(0);
 
-  const { mixnodeDetails, showSettings, getBondDetails, handleShowSettings } = useContext(ClientContext);
+  const { mixnodeDetails, showSettings, getBondDetails, handleShowSettings } = useContext(AppContext);
   const { status, saturation, rewardEstimation, inclusionProbability } = useSettingsState(showSettings);
 
   const handleTabChange = (_: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab);

nym-wallet/src/pages/settings/node-stats.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import { OpenInNew } from '@mui/icons-material';
 import { Button, Link, Stack, Typography } from '@mui/material';
-import { urls, ClientContext } from '../../context/main';
+import { urls, AppContext } from '../../context/main';
 
 export const NodeStats = ({ mixnodeId }: { mixnodeId?: string }) => {
-  const { network } = useContext(ClientContext);
+  const { network } = useContext(AppContext);
   return (
     <Stack spacing={2} sx={{ p: 4 }}>
       <Typography>All your node stats are available on the link below</Typography>

nym-wallet/src/pages/settings/profile.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import { Box, Button, Divider, Stack, TextField, Typography } from '@mui/material';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 
 export const Profile = () => {
-  const { mixnodeDetails } = useContext(ClientContext);
+  const { mixnodeDetails } = useContext(AppContext);
 
   if (!mixnodeDetails) return null;
 

nym-wallet/src/pages/settings/system-variables.tsx

@@ -9,7 +9,7 @@ import { Fee, InfoTooltip } from '../../components';
 import { InclusionProbabilityResponse } from '../../types';
 import { useCheckOwnership } from '../../hooks/useCheckOwnership';
 import { updateMixnode, vestingUpdateMixnode } from '../../requests';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { Console } from '../../utils/console';
 
 const DataField = ({ title, info, Indicator }: { title: string; info: string; Indicator: React.ReactElement }) => (
@@ -57,7 +57,7 @@ export const SystemVariables = ({
   inclusionProbability: InclusionProbabilityResponse;
 }) => {
   const [nodeUpdateResponse, setNodeUpdateResponse] = useState<'success' | 'failed'>();
-  const { currency, mixnodeDetails } = useContext(ClientContext);
+  const { currency, mixnodeDetails } = useContext(AppContext);
   const { ownership } = useCheckOwnership();
 
   const {

nym-wallet/src/pages/settings/useSettingsState.ts

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useState } from 'react';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import {
   getMixnodeRewardEstimation,
   getMixnodeStakeSaturation,
@@ -18,7 +18,7 @@ export const useSettingsState = (shouldUpdate: boolean) => {
     in_reserve: 0,
   });
 
-  const { mixnodeDetails } = useContext(ClientContext);
+  const { mixnodeDetails } = useContext(AppContext);
 
   const getStatus = async (mixnodeKey: string) => {
     const newStatus = await getMixnodeStatus(mixnodeKey);

nym-wallet/src/pages/sign-in/components/page-layout.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Stack, Box } from '@mui/material';
-import { NymWordmark } from '@nymproject/react';
-import { Step } from './step';
-
-export const PageLayout: React.FC = ({ children }) => (
-  <Box
-    sx={{
-      height: '100vh',
-      width: '100vw',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      overflow: 'auto',
-      bgcolor: 'nym.background.dark',
-    }}
-  >
-    <Box
-      sx={{
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        margin: 'auto',
-      }}
-    >
-      <Stack spacing={3} alignItems="center" sx={{ width: 1080 }}>
-        <NymWordmark width={75} />
-        <Step />
-        {children}
-      </Stack>
-    </Box>
-  </Box>
-);

nym-wallet/src/pages/sign-in/components/render-page.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { TPages } from '../types';
-
-export const RenderPage = ({ children, page }: { children: React.ReactElement[]; page: TPages }) => (
-  <>
-    {React.Children.map(children, (Child) => {
-      if (page === Child?.props.page) return Child;
-      return null;
-    })}
-  </>
-);

nym-wallet/src/pages/sign-in/index.tsx

@@ -1 +0,0 @@
-export * from './pages';

nym-wallet/src/pages/unbond/index.tsx

@@ -3,14 +3,14 @@ import { Alert, Box, Button, CircularProgress } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import { Fee, NymCard } from '../../components';
 import { useCheckOwnership } from '../../hooks/useCheckOwnership';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { unbond, vestingUnbond } from '../../requests';
 import { PageLayout } from '../../layouts';
 
 export const Unbond = () => {
   const [isLoading, setIsLoading] = useState(false);
   const { checkOwnership, ownership } = useCheckOwnership();
-  const { userBalance, getBondDetails } = useContext(ClientContext);
+  const { userBalance, getBondDetails } = useContext(AppContext);
 
   const { enqueueSnackbar } = useSnackbar();
 

nym-wallet/src/pages/undelegate/index.tsx

@@ -4,7 +4,7 @@ import { EnumRequestStatus, NymCard, RequestStatus } from '../../components';
 import { UndelegateForm } from './UndelegateForm';
 import { getCurrentEpoch, getPendingDelegations, getReverseMixDelegations } from '../../requests';
 import { Epoch, PendingUndelegate, TPagedDelegations } from '../../types';
-import { ClientContext } from '../../context/main';
+import { AppContext } from '../../context/main';
 import { PageLayout } from '../../layouts';
 import { removeObjectDuplicates } from '../../utils';
 
@@ -16,7 +16,7 @@ export const Undelegate = () => {
   const [pendingUndelegations, setPendingUndelegations] = useState<PendingUndelegate[]>();
   const [currentEndEpoch, setCurrentEndEpoch] = useState<Epoch['end']>();
 
-  const { clientDetails } = useContext(ClientContext);
+  const { clientDetails } = useContext(AppContext);
 
   const initialize = async () => {
     setStatus(EnumRequestStatus.initial);

nym-wallet/src/routes/app.tsx

@@ -1,32 +1,35 @@
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
+import { ApplicationLayout } from 'src/layouts';
 import { Bond, Balance, Delegate, InternalDocs, Receive, Send, Unbond, Undelegate } from '../pages';
 
 export const AppRoutes = () => (
-  <Switch>
-    <Route path="/balance">
-      <Balance />
-    </Route>
-    <Route path="/send">
-      <Send />
-    </Route>
-    <Route path="/receive">
-      <Receive />
-    </Route>
-    <Route path="/bond">
-      <Bond />
-    </Route>
-    <Route path="/unbond">
-      <Unbond />
-    </Route>
-    <Route path="/delegate">
-      <Delegate />
-    </Route>
-    <Route path="/undelegate">
-      <Undelegate />
-    </Route>
-    <Route path="/docs">
-      <InternalDocs />
-    </Route>
-  </Switch>
+  <ApplicationLayout>
+    <Switch>
+      <Route path="/balance">
+        <Balance />
+      </Route>
+      <Route path="/send">
+        <Send />
+      </Route>
+      <Route path="/receive">
+        <Receive />
+      </Route>
+      <Route path="/bond">
+        <Bond />
+      </Route>
+      <Route path="/unbond">
+        <Unbond />
+      </Route>
+      <Route path="/delegate">
+        <Delegate />
+      </Route>
+      <Route path="/undelegate">
+        <Undelegate />
+      </Route>
+      <Route path="/docs">
+        <InternalDocs />
+      </Route>
+    </Switch>
+  </ApplicationLayout>
 );

nym-wallet/src/routes/auth.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { AuthProvider } from 'src/context';
+import { AuthLayout } from 'src/layouts/AuthLayout';
+import {
+  CreateMnemonic,
+  CreatePassword,
+  ExistingAccount,
+  SignInMnemonic,
+  SignInPassword,
+  VerifyMnemonic,
+  WelcomeContent,
+  ConnectPassword,
+} from 'src/pages/auth/pages';
+import { ConfirmMnemonic } from 'src/pages/auth/pages/confirm-mnemonic';
+import { AuthTheme } from 'src/theme';
+
+export const AuthRoutes = () => (
+  <AuthProvider>
+    <AuthTheme>
+      <AuthLayout>
+        <Switch>
+          <Route path="/" exact>
+            <WelcomeContent />
+          </Route>
+          <Route path="/existing-account">
+            <ExistingAccount />
+          </Route>
+          <Route path="/create-mnemonic">
+            <CreateMnemonic />
+          </Route>
+          <Route path="/verify-mnemonic">
+            <VerifyMnemonic />
+          </Route>
+          <Route path="/create-password">
+            <CreatePassword />
+          </Route>
+          <Route path="/sign-in-mnemonic">
+            <SignInMnemonic />
+          </Route>
+          <Route path="/sign-in-password">
+            <SignInPassword />
+          </Route>
+          <Route path="/confirm-mnemonic">
+            <ConfirmMnemonic />
+          </Route>
+          <Route path="/connect-password">
+            <ConnectPassword />
+          </Route>
+        </Switch>
+      </AuthLayout>
+    </AuthTheme>
+  </AuthProvider>
+);

nym-wallet/src/routes/index.tsx

@@ -1,2 +1,10 @@
-export * from './app';
-export * from './sign-in';
+import React, { useContext } from 'react';
+import { AppContext } from 'src/context';
+import { AppRoutes } from './app';
+import { AuthRoutes } from './auth';
+
+export const Routes = () => {
+  const { clientDetails } = useContext(AppContext);
+  if (!clientDetails) return <AuthRoutes />;
+  return <AppRoutes />;
+};

nym-wallet/src/routes/sign-in.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import { PageLayout } from 'src/pages/sign-in/components';
-import {
-  CreateMnemonic,
-  CreatePassword,
-  ExistingAccount,
-  SignInMnemonic,
-  SignInPassword,
-  VerifyMnemonic,
-  WelcomeContent,
-  ConnectPassword,
-} from 'src/pages/sign-in/pages';
-import { ConfirmMnemonic } from 'src/pages/sign-in/pages/confirm-mnemonic';
-
-export const SignInRoutes = () => (
-  <PageLayout>
-    <Switch>
-      <Route path="/welcome">
-        <WelcomeContent />
-      </Route>
-      <Route path="/existing-account">
-        <ExistingAccount />
-      </Route>
-      <Route path="/create-mnemonic">
-        <CreateMnemonic />
-      </Route>
-      <Route path="/verify-mnemonic">
-        <VerifyMnemonic />
-      </Route>
-      <Route path="/create-password">
-        <CreatePassword />
-      </Route>
-      <Route path="/sign-in-mnemonic">
-        <SignInMnemonic />
-      </Route>
-      <Route path="/sign-in-password">
-        <SignInPassword />
-      </Route>
-      <Route path="/confirm-mnemonic">
-        <ConfirmMnemonic />
-      </Route>
-      <Route path="/connect-password">
-        <ConnectPassword />
-      </Route>
-    </Switch>
-  </PageLayout>
-);

nym-wallet/src/theme/index.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { CssBaseline } from '@mui/material';
 import { getDesignTokens } from './theme';
-import { ClientContext } from '../context/main';
+import { AppContext } from '../context/main';
 import { NymWalletThemeWithMode } from './NymWalletTheme';
 
 /**
@@ -10,11 +10,11 @@ import { NymWalletThemeWithMode } from './NymWalletTheme';
  */
 
 export const NymWalletTheme: React.FC = ({ children }) => {
-  const { mode } = useContext(ClientContext);
+  const { mode } = useContext(AppContext);
   return <NymWalletThemeWithMode mode={mode}>{children}</NymWalletThemeWithMode>;
 };
 
-export const WelcomeTheme: React.FC = ({ children }) => {
+export const AuthTheme: React.FC = ({ children }) => {
   const theme = createTheme(getDesignTokens('dark'));
   return (
     <ThemeProvider theme={theme}>