diff --git a/nym-wallet/src/components/Accounts/AccountOverview.tsx b/nym-wallet/src/components/Accounts/AccountOverview.tsx
new file mode 100644
index 0000000000..17830ba319
--- /dev/null
+++ b/nym-wallet/src/components/Accounts/AccountOverview.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button } from '@mui/material';
+import { AccountEntry } from 'src/types';
+import { AccountAvatar } from './AccountAvatar';
+
+export const AccountOverview = ({ account, onClick }: { account: AccountEntry; onClick: () => void }) => (
+ }
+ sx={{ color: 'nym.text.dark' }}
+ onClick={onClick}
+ disableRipple
+ >
+ {account.id}
+
+);
diff --git a/nym-wallet/src/components/Accounts/Accounts.tsx b/nym-wallet/src/components/Accounts/Accounts.tsx
index 77fd2eba9f..a59b59c95f 100644
--- a/nym-wallet/src/components/Accounts/Accounts.tsx
+++ b/nym-wallet/src/components/Accounts/Accounts.tsx
@@ -1,25 +1,18 @@
-import React, { useContext } from 'react';
-import { Button } from '@mui/material';
-import { AccountsContext } from 'src/context';
+import React, { useContext, useState } from 'react';
+import { AccountsContext, AppContext } from 'src/context';
import { EditAccountModal } from './EditAccountModal';
import { AddAccountModal } from './AddAccountModal';
import { AccountsModal } from './AccountsModal';
-import { AccountAvatar } from './AccountAvatar';
import { MnemonicModal } from './MnemonicModal';
+import { AccountOverview } from './AccountOverview';
+import { MultiAccountHowTo } from './MultiAccountHowTo';
export const Accounts = () => {
const { accounts, selectedAccount, setDialogToDisplay } = useContext(AccountsContext);
return accounts && selectedAccount ? (
<>
- }
- sx={{ color: 'nym.text.dark' }}
- onClick={() => setDialogToDisplay('Accounts')}
- disableRipple
- >
- {selectedAccount.id}
-
+ setDialogToDisplay('Accounts')} />
@@ -27,3 +20,17 @@ export const Accounts = () => {
>
) : null;
};
+
+export const SingleAccount = () => {
+ const [showHowToDialog, setShowHowToDialog] = useState(false);
+ const { clientDetails } = useContext(AppContext);
+ return (
+ <>
+ setShowHowToDialog(true)}
+ />
+ setShowHowToDialog(false)} />
+ >
+ );
+};
diff --git a/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx b/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
new file mode 100644
index 0000000000..4f9f514c47
--- /dev/null
+++ b/nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Alert, Box, Dialog, DialogContent, DialogTitle, IconButton, Stack, Typography } from '@mui/material';
+import { Close } from '@mui/icons-material';
+
+const passwordCreationSteps = [
+ 'Log out',
+ 'When signing in, select “Sign in with mnemonic”',
+ 'On the next screen click “Create a password for your account”',
+ 'Sign in to wallet with your new password',
+ 'Now you can create multiple accounts',
+];
+
+export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => (
+
+);
diff --git a/nym-wallet/src/components/Accounts/index.tsx b/nym-wallet/src/components/Accounts/index.tsx
index 94e4348091..9e02c40d2b 100644
--- a/nym-wallet/src/components/Accounts/index.tsx
+++ b/nym-wallet/src/components/Accounts/index.tsx
@@ -1,9 +1,16 @@
-import React from 'react';
-import { AccountsProvider } from 'src/context';
-import { Accounts } from './Accounts';
+import React, { useContext } from 'react';
+import { AccountsProvider, AppContext } from 'src/context';
+import { Accounts, SingleAccount } from './Accounts';
-export const MultiAccounts = () => (
-
-
-
-);
+export const MultiAccounts = () => {
+ const { loginType } = useContext(AppContext);
+
+ if (loginType === 'password') {
+ return (
+
+
+
+ );
+ }
+ return ;
+};