From 0e4787f0783555f256d3a34f0bf8940aac4d9f80 Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Fri, 6 May 2022 15:54:38 +0100 Subject: [PATCH] minor refactors --- .../src/components/Accounts/AccountItem.tsx | 17 ++- .../src/components/Accounts/Accounts.tsx | 2 + .../components/Accounts/AddAccountModal.tsx | 58 +--------- .../src/components/Accounts/MnemonicModal.tsx | 102 ++++++++++++++++++ .../src/components/Accounts/ShowMnemonic.tsx | 29 ----- .../components/Accounts/ShowMnemonicModal.tsx | 47 -------- .../Accounts/stories/ShowMnemonic.stories.tsx | 23 ---- nym-wallet/src/components/Mnemonic.tsx | 37 +++++++ nym-wallet/src/context/accounts.tsx | 29 ++++- nym-wallet/src/requests/account.ts | 2 +- 10 files changed, 184 insertions(+), 162 deletions(-) create mode 100644 nym-wallet/src/components/Accounts/MnemonicModal.tsx delete mode 100644 nym-wallet/src/components/Accounts/ShowMnemonic.tsx delete mode 100644 nym-wallet/src/components/Accounts/ShowMnemonicModal.tsx delete mode 100644 nym-wallet/src/components/Accounts/stories/ShowMnemonic.stories.tsx create mode 100644 nym-wallet/src/components/Mnemonic.tsx diff --git a/nym-wallet/src/components/Accounts/AccountItem.tsx b/nym-wallet/src/components/Accounts/AccountItem.tsx index 940da46285..584fc37231 100644 --- a/nym-wallet/src/components/Accounts/AccountItem.tsx +++ b/nym-wallet/src/components/Accounts/AccountItem.tsx @@ -12,10 +12,10 @@ import { import { Edit } from '@mui/icons-material'; import { AccountsContext } from 'src/context'; import { AccountAvatar } from './AccountAvatar'; -import { ShowMnemonic } from './ShowMnemonic'; export const AccountItem = ({ name, address }: { name: string; address: string }) => { - const { selectedAccount, handleSelectAccount, handleAccountToEdit } = useContext(AccountsContext); + const { selectedAccount, handleSelectAccount, handleAccountToEdit, setDialogToDisplay, setAccountMnemonic } = + useContext(AccountsContext); return ( {address} - + ) => { + e.stopPropagation(); + setDialogToDisplay('Mnemonic'); + setAccountMnemonic((accountMnemonic) => ({ ...accountMnemonic, accountName: name })); + }} + > + Show mnemonic + } diff --git a/nym-wallet/src/components/Accounts/Accounts.tsx b/nym-wallet/src/components/Accounts/Accounts.tsx index 9845ec1269..77fd2eba9f 100644 --- a/nym-wallet/src/components/Accounts/Accounts.tsx +++ b/nym-wallet/src/components/Accounts/Accounts.tsx @@ -5,6 +5,7 @@ import { EditAccountModal } from './EditAccountModal'; import { AddAccountModal } from './AddAccountModal'; import { AccountsModal } from './AccountsModal'; import { AccountAvatar } from './AccountAvatar'; +import { MnemonicModal } from './MnemonicModal'; export const Accounts = () => { const { accounts, selectedAccount, setDialogToDisplay } = useContext(AccountsContext); @@ -22,6 +23,7 @@ export const Accounts = () => { + ) : null; }; diff --git a/nym-wallet/src/components/Accounts/AddAccountModal.tsx b/nym-wallet/src/components/Accounts/AddAccountModal.tsx index 3fae200f38..78a44b96f3 100644 --- a/nym-wallet/src/components/Accounts/AddAccountModal.tsx +++ b/nym-wallet/src/components/Accounts/AddAccountModal.tsx @@ -17,6 +17,7 @@ import { Check, Close, ContentCopySharp } from '@mui/icons-material'; import { useClipboard } from 'use-clipboard-copy'; import { createMnemonic } from 'src/requests'; import { AccountsContext } from 'src/context'; +import { Mnemonic } from '../Mnemonic'; const createAccountSteps = [ 'Copy and save mnemonic for your new account', @@ -29,67 +30,12 @@ const importAccountSteps = [ 'Confirm the password used to login to your wallet', ]; -const passwordCreationSteps = [ - 'Log out', - 'During sign in screen click “Sign in with mnemonic” button', - 'On next screen click “Create a password for your account”', - 'Sign in to wallet with your new password', - 'Now you can create multiple accounts', -]; - -const NoPassword = ({ onClose }: { onClose: () => void }) => ( - - - - - - You can’t add new accounts if your wallet doesn’t have a password. - - Follow steps below to create password. - - How to create password to your account - {passwordCreationSteps.map((step, i) => ( - {`${i + 1}. ${step}`} - ))} - - - - - - -); - const MnemonicStep = ({ mnemonic, onNext }: { mnemonic: string; onNext: () => void }) => { const { copy, copied } = useClipboard({ copiedTimeout: 5000 }); return ( - - - - Below is your 24 word mnemonic, make sure to store it in a safe place for accessing your wallet in the - future - - - - - - + + )} + + + ); +}; diff --git a/nym-wallet/src/components/Accounts/ShowMnemonic.tsx b/nym-wallet/src/components/Accounts/ShowMnemonic.tsx deleted file mode 100644 index 00cce65f44..0000000000 --- a/nym-wallet/src/components/Accounts/ShowMnemonic.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { Box, Typography } from '@mui/material'; -import { CopyToClipboard } from '@nymproject/react'; - -export const ShowMnemonic = ({ accountName }: { accountName: string }) => { - const [showMnemonic, setShowMnemonic] = useState(); - const [mnemonic, setMnemonic] = useState(); - - return ( - - { - e.stopPropagation(); - setShowMnemonic((show) => (!show ? accountName : undefined)); - }} - > - {`${showMnemonic ? 'Hide' : 'Show'} mnemonic`} - - {mnemonic && ( - - {mnemonic} - - - )} - - ); -}; diff --git a/nym-wallet/src/components/Accounts/ShowMnemonicModal.tsx b/nym-wallet/src/components/Accounts/ShowMnemonicModal.tsx deleted file mode 100644 index 392bd4e841..0000000000 --- a/nym-wallet/src/components/Accounts/ShowMnemonicModal.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { - Alert, - AlertTitle, - Box, - Dialog, - DialogContent, - DialogTitle, - IconButton, - Stack, - Typography, -} from '@mui/material'; -import { Close } from '@mui/icons-material'; -import { CopyToClipboard } from '@nymproject/react'; - -export const ShowMnemonicModal = ({ - mnemonic, - show, - onClose, -}: { - mnemonic: string; - show: boolean; - onClose: () => void; -}) => ( - - - - Show mnemonic - - - - - - - - - DO NOT share this phrase with anyone! - These words can be used to steal all your accounts. - - } icon={false}> - Mnemonic - {mnemonic} - - - - -); diff --git a/nym-wallet/src/components/Accounts/stories/ShowMnemonic.stories.tsx b/nym-wallet/src/components/Accounts/stories/ShowMnemonic.stories.tsx deleted file mode 100644 index 0db1a2046a..0000000000 --- a/nym-wallet/src/components/Accounts/stories/ShowMnemonic.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { Box } from '@mui/material'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ShowMnemonicModal } from 'src/components/Accounts/ShowMnemonicModal'; - -export default { - title: 'Wallet / Multi Account / Show Mnemonic', - component: ShowMnemonicModal, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - - - -); - -export const Default = Template.bind({}); -Default.args = { - mnemonic: - 'lonely employ curtain skull gas swim pizza injury tail birth inmate apart giraffe behave caution hammer echo action best symptom skull toast beyond casino', - show: true, - onClose: () => {}, -}; diff --git a/nym-wallet/src/components/Mnemonic.tsx b/nym-wallet/src/components/Mnemonic.tsx new file mode 100644 index 0000000000..e49c2b8042 --- /dev/null +++ b/nym-wallet/src/components/Mnemonic.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Alert, Button, Stack, TextField, Typography } from '@mui/material'; +import { Check, ContentCopySharp } from '@mui/icons-material'; + +export const Mnemonic = ({ + mnemonic, + copied, + handleCopy, +}: { + mnemonic: string; + copied: boolean; + handleCopy: (text?: string) => void; +}) => ( + + + + Below is your 24 word mnemonic, make sure to store it in a safe place for accessing your wallet in the future + + + + + + +); diff --git a/nym-wallet/src/context/accounts.tsx b/nym-wallet/src/context/accounts.tsx index e71b893048..d98a7d697f 100644 --- a/nym-wallet/src/context/accounts.tsx +++ b/nym-wallet/src/context/accounts.tsx @@ -1,6 +1,6 @@ import React, { createContext, Dispatch, SetStateAction, useContext, useEffect, useMemo, useState } from 'react'; import { AccountEntry } from 'src/types'; -import { addAccount as addAccountRequest } from 'src/requests'; +import { addAccount as addAccountRequest, showMnemonicForAccount } from 'src/requests'; import { useSnackbar } from 'notistack'; import { ClientContext } from './main'; @@ -11,16 +11,20 @@ type TAccounts = { dialogToDisplay?: TAccountsDialog; isLoading: boolean; error?: string; + accountMnemonic: TAccountMnemonic; setError: Dispatch>; + setAccountMnemonic: Dispatch>; handleAddAccount: (data: { accountName: string; mnemonic: string; password: string }) => void; setDialogToDisplay: (dialog?: TAccountsDialog) => void; handleSelectAccount: (accountId: string) => void; handleAccountToEdit: (accountId: string) => void; handleEditAccount: (account: AccountEntry) => void; handleImportAccount: (account: AccountEntry) => void; + handleGetAcccountMnemonic: (data: { password: string; accountName: string }) => void; }; -export type TAccountsDialog = 'Accounts' | 'Add' | 'Edit' | 'Import'; +export type TAccountsDialog = 'Accounts' | 'Add' | 'Edit' | 'Import' | 'Mnemonic'; +export type TAccountMnemonic = { value?: string; accountName?: string }; export const AccountsContext = createContext({} as TAccounts); @@ -29,6 +33,10 @@ export const AccountsProvider: React.FC = ({ children }) => { const [selectedAccount, setSelectedAccount] = useState(); const [accountToEdit, setAccountToEdit] = useState(); const [dialogToDisplay, setDialogToDisplay] = useState(); + const [accountMnemonic, setAccountMnemonic] = useState({ + value: undefined, + accountName: undefined, + }); const [error, setError] = useState(); const [isLoading, setIsLoading] = useState(false); const { onAccountChange, storedAccounts } = useContext(ClientContext); @@ -73,6 +81,18 @@ export const AccountsProvider: React.FC = ({ children }) => { setSelectedAccount(match); }; + const handleGetAcccountMnemonic = async ({ password, accountName }: { password: string; accountName: string }) => { + try { + setIsLoading(true); + const mnemonic = await showMnemonicForAccount({ password, accountName }); + setAccountMnemonic({ value: mnemonic, accountName }); + } catch (e) { + setError(e as string); + } finally { + setIsLoading(false); + } + }; + useEffect(() => { if (storedAccounts) { setAccounts(storedAccounts); @@ -93,15 +113,18 @@ export const AccountsProvider: React.FC = ({ children }) => { selectedAccount, accountToEdit, dialogToDisplay, + accountMnemonic, setDialogToDisplay, + setAccountMnemonic, isLoading, handleAddAccount, handleEditAccount, handleAccountToEdit, handleSelectAccount, handleImportAccount, + handleGetAcccountMnemonic, }), - [accounts, selectedAccount, accountToEdit, dialogToDisplay, isLoading, error], + [accounts, selectedAccount, accountToEdit, dialogToDisplay, isLoading, error, accountMnemonic], )} > {children} diff --git a/nym-wallet/src/requests/account.ts b/nym-wallet/src/requests/account.ts index f40eb6465c..bc85fe30ad 100644 --- a/nym-wallet/src/requests/account.ts +++ b/nym-wallet/src/requests/account.ts @@ -58,7 +58,7 @@ export const listAccounts = async () => { }; export const showMnemonicForAccount = async ({ password, accountName }: { password: string; accountName: string }) => { - const res: string = await invoke('show_mnemonic_for_account_in_password', { password, innerId: accountName }); + const res: string = await invoke('show_mnemonic_for_account_in_password', { password, accountId: accountName }); return res; };