diff --git a/nym-wallet/src/components/Accounts/AccountsModal.tsx b/nym-wallet/src/components/Accounts/AccountsModal.tsx index 7c44effbd0..4b4c9205aa 100644 --- a/nym-wallet/src/components/Accounts/AccountsModal.tsx +++ b/nym-wallet/src/components/Accounts/AccountsModal.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography } from '@mui/material'; -import { Add, Close } from '@mui/icons-material'; +import { Add, ArrowDownwardSharp, Close } from '@mui/icons-material'; +import { TAccount } from 'src/types'; import { AccountItem } from './AccountItem'; -import { TAccount } from './types'; export const AccountsModal = ({ show, @@ -10,16 +10,18 @@ export const AccountsModal = ({ selectedAccount, onClose, onAccountSelect, - onAddAccount, - onEditAccount, + onAdd, + onEdit, + onImport, }: { show: boolean; accounts: TAccount[]; selectedAccount: TAccount['address']; onClose: () => void; onAccountSelect: (account: TAccount) => void; - onAddAccount: () => void; - onEditAccount: (acc: TAccount) => void; + onAdd: () => void; + onEdit: (acc: TAccount) => void; + onImport: () => void; }) => ( @@ -42,21 +44,17 @@ export const AccountsModal = ({ onAccountSelect({ name, address }); onClose(); }} - onEdit={() => onEditAccount({ name, address })} + onEdit={() => onEdit({ name, address })} selected={selectedAccount === address} key={address} /> ))} - + diff --git a/nym-wallet/src/components/Accounts/EditAccount.stories.tsx b/nym-wallet/src/components/Accounts/EditAccount.stories.tsx new file mode 100644 index 0000000000..4163ef93cc --- /dev/null +++ b/nym-wallet/src/components/Accounts/EditAccount.stories.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Box } from '@mui/material'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { v4 as uuid } from 'uuid'; +import { EditAccountModal } from './EditAccountModal'; + +export default { + title: 'Wallet / Multi Account / Edit Account', + component: EditAccountModal, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + + + +); + +export const Default = Template.bind({}); +Default.args = { + account: { name: 'Account 1', address: uuid() }, + show: true, + onClose: () => {}, +}; diff --git a/nym-wallet/src/components/Accounts/EditAccountModal.tsx b/nym-wallet/src/components/Accounts/EditAccountModal.tsx index cb3f2c3b3f..1f290c6f0f 100644 --- a/nym-wallet/src/components/Accounts/EditAccountModal.tsx +++ b/nym-wallet/src/components/Accounts/EditAccountModal.tsx @@ -11,7 +11,7 @@ import { Typography, } from '@mui/material'; import { Close } from '@mui/icons-material'; -import { TAccount } from './types'; +import { TAccount } from 'src/types'; export const EditAccountModal = ({ account, diff --git a/nym-wallet/src/components/Accounts/ImportAccount.stories.tsx b/nym-wallet/src/components/Accounts/ImportAccount.stories.tsx new file mode 100644 index 0000000000..98365cb809 --- /dev/null +++ b/nym-wallet/src/components/Accounts/ImportAccount.stories.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Box } from '@mui/material'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { ImportAccountModal } from './ImportAccountModal'; + +export default { + title: 'Wallet / Multi Account / Import Account', + component: ImportAccountModal, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + + + +); + +export const Default = Template.bind({}); +Default.args = { + show: true, + onClose: () => {}, + onImport: () => {}, +}; diff --git a/nym-wallet/src/components/Accounts/ImportAccountModal.tsx b/nym-wallet/src/components/Accounts/ImportAccountModal.tsx new file mode 100644 index 0000000000..8222f330bf --- /dev/null +++ b/nym-wallet/src/components/Accounts/ImportAccountModal.tsx @@ -0,0 +1,70 @@ +import React, { useEffect, useState } from 'react'; +import { + Box, + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + IconButton, + TextField, + Typography, +} from '@mui/material'; +import { Close } from '@mui/icons-material'; + +export const ImportAccountModal = ({ + show, + onClose, + onImport, +}: { + show: boolean; + onClose: () => void; + onImport: (mnemonic: string) => void; +}) => { + const [mnemonic, setMnemonic] = useState(''); + + useEffect(() => { + if (!show) setMnemonic(''); + }, [show]); + + return ( + + + + Import account + + + + + + Provide mnemonic of account you want to import + + + + + setMnemonic(e.target.value)} + autoFocus + multiline + rows={3} + /> + + + + + + + ); +}; diff --git a/nym-wallet/src/components/Accounts/index.tsx b/nym-wallet/src/components/Accounts/index.tsx index ac16c21f66..44c4bf8d85 100644 --- a/nym-wallet/src/components/Accounts/index.tsx +++ b/nym-wallet/src/components/Accounts/index.tsx @@ -1,11 +1,14 @@ import React, { useEffect, useState } from 'react'; import { Button } from '@mui/material'; import { v4 as uuidv4 } from 'uuid'; +import { TAccount } from 'src/types'; import { EditAccountModal } from './EditAccountModal'; import { AddAccountModal } from './AddAccountModal'; import { AccountColor } from './AccountColor'; import { AccountsModal } from './AccountsModal'; -import { TAccount, TDialog } from './types'; +import { ImportAccountModal } from './ImportAccountModal'; + +export type TDialog = 'Accounts' | 'Add' | 'Edit' | 'Import'; export const Accounts = ({ storedAccounts }: { storedAccounts: TAccount[] }) => { const [accounts, setAccounts] = useState(storedAccounts); @@ -35,13 +38,14 @@ export const Accounts = ({ storedAccounts }: { storedAccounts: TAccount[] }) => accounts={accounts} onAccountSelect={(acc) => setSelectedAccount(acc)} selectedAccount={selectedAccount.address} - onAddAccount={() => { + onAdd={() => { setDialogToDisplay('Add'); }} - onEditAccount={(acc) => { + onEdit={(acc) => { setAccountToEdit(acc); setDialogToDisplay('Edit'); }} + onImport={() => setDialogToDisplay('Import')} /> setDialogToDisplay('Accounts'); }} /> + setDialogToDisplay('Accounts')} + onImport={(mnemonic) => { + setAccounts((accs) => [...accs, { name: 'New Account', address: uuidv4() }]); + setDialogToDisplay('Accounts'); + }} + /> ); }; diff --git a/nym-wallet/src/components/Accounts/types.ts b/nym-wallet/src/components/Accounts/types.ts deleted file mode 100644 index 92225d133e..0000000000 --- a/nym-wallet/src/components/Accounts/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type TAccount = { - name: string; - address: string; -}; - -export type TDialog = 'Accounts' | 'Add' | 'Edit'; diff --git a/nym-wallet/src/hooks/useAccounts.ts b/nym-wallet/src/hooks/useAccounts.ts new file mode 100644 index 0000000000..21e22226a2 --- /dev/null +++ b/nym-wallet/src/hooks/useAccounts.ts @@ -0,0 +1,11 @@ +import React, { useState } from 'react'; +import { TDialog } from 'src/components/Accounts'; + +export const useAccounts = () => { + const [accounts, setAccounts] = useState(storedAccounts); + const [selectedAccount, setSelectedAccount] = useState(accounts[0]); + const [accountToEdit, setAccountToEdit] = useState(); + const [dialogToDisplay, setDialogToDisplay] = useState(); + + return { dialogToDisplay, accounts, accountToEdit, selectedAccount }; +}; diff --git a/nym-wallet/src/requests/account.ts b/nym-wallet/src/requests/account.ts index 12316d7b49..5b143c3a93 100644 --- a/nym-wallet/src/requests/account.ts +++ b/nym-wallet/src/requests/account.ts @@ -30,3 +30,8 @@ export const isPasswordCreated = async (): Promise => { const res: boolean = await invoke('does_password_file_exist'); return res; }; + +export const createNewAccount = async (mnemonic: string): Promise => { + const res: Account = await invoke('create_new_account', { mnemonic }); + return res; +}; diff --git a/nym-wallet/src/types/global.ts b/nym-wallet/src/types/global.ts index 58df3bff09..758cd2095f 100644 --- a/nym-wallet/src/types/global.ts +++ b/nym-wallet/src/types/global.ts @@ -74,3 +74,8 @@ export type TCurrency = { }; export type Period = 'Before' | { In: number } | 'After'; + +export type TAccount = { + name: string; + address: string; +};