diff --git a/nym-wallet/src/components/Accounts/AddAccountModal.tsx b/nym-wallet/src/components/Accounts/AddAccountModal.tsx index 4745dd4590..4bac2e5660 100644 --- a/nym-wallet/src/components/Accounts/AddAccountModal.tsx +++ b/nym-wallet/src/components/Accounts/AddAccountModal.tsx @@ -3,6 +3,7 @@ import { Alert, Box, Button, + CircularProgress, Dialog, DialogActions, DialogContent, @@ -115,6 +116,8 @@ const NameAccount = ({ onNext }: { onNext: (value: string) => void }) => { const ConfirmPassword = ({ onConfirm }: { onConfirm: (password: string) => void }) => { const [value, setValue] = useState(''); + const { isLoading } = useContext(AccountsContext); + return ( @@ -122,12 +125,13 @@ const ConfirmPassword = ({ onConfirm }: { onConfirm: (password: string) => void diff --git a/nym-wallet/src/context/accounts.tsx b/nym-wallet/src/context/accounts.tsx index ffd5a10757..a2699446e1 100644 --- a/nym-wallet/src/context/accounts.tsx +++ b/nym-wallet/src/context/accounts.tsx @@ -9,6 +9,7 @@ type TAccounts = { selectedAccount?: AccountEntry; accountToEdit?: AccountEntry; dialogToDisplay?: TAccountsDialog; + isLoading: boolean; handleAddAccount: (data: { accountName: string; mnemonic: string; password: string }) => void; setDialogToDisplay: (dialog?: TAccountsDialog) => void; handleSelectAccount: (accountId: string) => void; @@ -22,11 +23,11 @@ export type TAccountsDialog = 'Accounts' | 'Add' | 'Edit' | 'Import'; export const AccountsContext = createContext({} as TAccounts); export const AccountsProvider: React.FC = ({ children }) => { - const [accounts, setAccounts] = useState(); + const [accounts, setAccounts] = useState([]); const [selectedAccount, setSelectedAccount] = useState(); const [accountToEdit, setAccountToEdit] = useState(); const [dialogToDisplay, setDialogToDisplay] = useState(); - + const [isLoading, setIsLoading] = useState(false); const { onAccountChange, storedAccounts } = useContext(ClientContext); const { enqueueSnackbar } = useSnackbar(); @@ -39,14 +40,20 @@ export const AccountsProvider: React.FC = ({ children }) => { mnemonic: string; password: string; }) => { + setIsLoading(true); try { - await addAccountRequest({ + const newAccount = await addAccountRequest({ accountName, mnemonic, password, }); + setAccounts((accs) => [...accs, newAccount]); + enqueueSnackbar('New account created', { variant: 'success' }); + setDialogToDisplay('Accounts'); } catch (e) { - enqueueSnackbar('Error adding account', { variant: 'error' }); + enqueueSnackbar(`Error adding account: ${e}`, { variant: 'error' }); + } finally { + setIsLoading(false); } }; const handleEditAccount = (account: AccountEntry) => @@ -63,7 +70,7 @@ export const AccountsProvider: React.FC = ({ children }) => { const match = accounts?.find((acc) => acc.id === accountName); setSelectedAccount(match); } catch (e) { - enqueueSnackbar('Error swtiching account', { variant: 'error' }); + console.log('boom!'); } }; @@ -86,13 +93,14 @@ export const AccountsProvider: React.FC = ({ children }) => { accountToEdit, dialogToDisplay, setDialogToDisplay, + isLoading, handleAddAccount, handleEditAccount, handleAccountToEdit, handleSelectAccount, handleImportAccount, }), - [accounts, selectedAccount, accountToEdit, dialogToDisplay], + [accounts, selectedAccount, accountToEdit, dialogToDisplay, isLoading], )} > {children} diff --git a/nym-wallet/src/context/main.tsx b/nym-wallet/src/context/main.tsx index 18faa9f4c8..be20a1a0f1 100644 --- a/nym-wallet/src/context/main.tsx +++ b/nym-wallet/src/context/main.tsx @@ -153,10 +153,15 @@ export const ClientContextProvider = ({ children }: { children: React.ReactNode const onAccountChange = async (accountId: string) => { if (network) { setIsLoading(true); - await switchAccount(accountId); - await loadAccount(network); - setIsLoading(false); - enqueueSnackbar('Account switch success', { variant: 'success', preventDuplicate: true }); + try { + await switchAccount(accountId); + await loadAccount(network); + enqueueSnackbar('Account switch success', { variant: 'success', preventDuplicate: true }); + } catch (e) { + enqueueSnackbar(`Error swtiching account: ${e}`, { variant: 'error' }); + } finally { + setIsLoading(false); + } } }; diff --git a/nym-wallet/src/requests/account.ts b/nym-wallet/src/requests/account.ts index 603bf9e1b2..f40eb6465c 100644 --- a/nym-wallet/src/requests/account.ts +++ b/nym-wallet/src/requests/account.ts @@ -2,32 +2,35 @@ import { invoke } from '@tauri-apps/api'; import { AccountEntry } from 'src/types/rust/accountentry'; import { Account } from '../types'; -export const createMnemonic = async (): Promise => invoke('create_new_mnemonic'); +export const createMnemonic = async () => { + const res: string = await invoke('create_new_mnemonic'); + return res; +}; -export const createPassword = async ({ mnemonic, password }: { mnemonic: string; password: string }): Promise => { +export const createPassword = async ({ mnemonic, password }: { mnemonic: string; password: string }) => { await invoke('create_password', { mnemonic, password }); }; -export const signInWithMnemonic = async (mnemonic: string): Promise => { +export const signInWithMnemonic = async (mnemonic: string) => { const res: Account = await invoke('connect_with_mnemonic', { mnemonic }); return res; }; -export const signInWithPassword = async (password: string): Promise => { +export const signInWithPassword = async (password: string) => { const res: Account = await invoke('sign_in_with_password', { password }); return res; }; -export const validateMnemonic = async (mnemonic: string): Promise => { +export const validateMnemonic = async (mnemonic: string) => { const res: boolean = await invoke('validate_mnemonic', { mnemonic }); return res; }; -export const signOut = async (): Promise => { +export const signOut = async () => { await invoke('logout'); }; -export const isPasswordCreated = async (): Promise => { +export const isPasswordCreated = async () => { const res: boolean = await invoke('does_password_file_exist'); return res; }; @@ -40,8 +43,9 @@ export const addAccount = async ({ mnemonic: string; password: string; accountName: string; -}): Promise => { - await invoke('add_account_for_password', { mnemonic, password, innerId: accountName }); +}) => { + const res: AccountEntry = await invoke('add_account_for_password', { mnemonic, password, innerId: accountName }); + return res; }; export const removeAccount = async ({ password, accountName }: { password: string; accountName: string }) => {