Merge pull request #111 from pranavkparti/create-managed-wallet

Update Create managed wallet

src/api/wallets.js

@@ -31,7 +31,7 @@ export const getWallets = async (
       const wallets = response.data.wallets.map((wallet) =>
         mapWallet(wallet, 'name')
       );
-      return { 
+      return {
         total: response.data.total,
         wallets,
       };
@@ -75,7 +75,7 @@ export const createWallet = async (token, walletName) => {
     })
     .catch((error) => {
       console.error(error);
-      throw Error('An error occurred while creating the wallet.');
+      throw Error(error.response.data.message);
     });
 
   return createdWallet;

src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.js

@@ -1,8 +1,12 @@
-import { CreateButton, CreateNewWallet } from './CreateManagedWallet.styled';
+import {
+  CreateButton,
+  CreateNewWallet,
+  CreateSuccessIcon,
+  CreateSuccessText,
+} from './CreateManagedWallet.styled';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
-
 import DialogActions from '@mui/material/DialogActions';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
@@ -11,7 +15,7 @@ import { Button, TextField } from '@mui/material';
 import { createWallet } from '../../../api/wallets';
 import AuthContext from '../../../store/auth-context';
 
-const CreateManagedWallet = ({ loadData, setMessage }) => {
+const CreateManagedWallet = ({ loadData }) => {
   const [dialogOpen, setDialogOpen] = useState(false);
 
   const handleDialogOpen = () => {
@@ -36,40 +40,50 @@ const CreateManagedWallet = ({ loadData, setMessage }) => {
         open={dialogOpen}
         handleClose={handleDialogClose}
         loadData={loadData}
-        setMessage={setMessage}
       />
     </>
   );
 };
 
-const CreateNewWalletDialog = ({ open, handleClose, loadData, setMessage }) => {
+const CreateNewWalletDialog = ({ open, handleClose, loadData }) => {
   const [walletName, setWalletName] = useState('');
   const [createWalletError, setCreateWalletError] = useState(false);
   const [createWalletErrorMessage, setCreateWalletErrorMessage] = useState('');
+  const [createSuccess, setCreateSuccess] = useState(false);
 
   const authContext = useContext(AuthContext);
 
   const closeDialog = () => {
     setCreateWalletError(false);
     setCreateWalletErrorMessage('');
+    setWalletName('');
     handleClose();
+    setCreateSuccess(false);
   };
 
   const handleTextChange = (event) => {
     setWalletName(event.target.value);
   };
 
+  const setWalletError = (errorMessage) => {
+    setCreateWalletError(true);
+    setCreateWalletErrorMessage(errorMessage);
+  };
+
   const validateCreateWallet = (wallet) => {
     if (!wallet) {
-      setCreateWalletError(true);
-      setCreateWalletErrorMessage('Wallet name is required');
+      setWalletError('Wallet name is required');
+      return false;
+    }
+
+    if (wallet.length < 3) {
+      setWalletError('Wallet name must be at least 3 characters long');
       return false;
     }
 
     const pattern = /^[a-zA-Z0-9\-.@]+$/;
     if (!pattern.test(wallet)) {
-      setCreateWalletError(true);
-      setCreateWalletErrorMessage(
+      setWalletError(
         'Wallet can only contain numbers, letters and the - . @ symbols'
       );
       return false;
@@ -85,26 +99,23 @@ const CreateNewWalletDialog = ({ open, handleClose, loadData, setMessage }) => {
     try {
       const createdWallet = await createWallet(authContext.token, walletName);
       console.log(createdWallet);
-      setMessage(
-        `Wallet with name ${createdWallet.wallet} successfully created`
-      );
+      setCreateSuccess(true);
+      setWalletName('');
       loadData();
     } catch (error) {
       console.error(error);
-      setMessage(error);
+      setCreateWalletError(true);
+      setCreateWalletErrorMessage(error.message);
     }
-
-    setWalletName('');
-    closeDialog();
   };
 
   return (
     <Dialog open={open} onClose={closeDialog} fullWidth={true} maxWidth={'xs'}>
       <DialogTitle>
-        Create Managed Wallet
+        {!createSuccess && 'Create Managed Wallet'}
         <IconButton
           aria-label="close"
-          onClick={handleClose}
+          onClick={closeDialog}
           sx={{
             position: 'absolute',
             right: 8,
@@ -115,33 +126,49 @@ const CreateNewWalletDialog = ({ open, handleClose, loadData, setMessage }) => {
         </IconButton>
       </DialogTitle>
       <DialogContent>
-        <TextField
-          autoFocus
-          margin="normal"
-          id="managed-wallet-name"
-          label="Wallet Name"
-          fullWidth
-          variant="standard"
-          inputProps={{ style: { fontSize: 16 } }}
-          InputLabelProps={{ style: { fontSize: 16 } }}
-          onChange={handleTextChange}
-          error={createWalletError}
-          helperText={createWalletErrorMessage}
-        />
+        {!createSuccess ? (
+          <TextField
+            autoFocus
+            margin="normal"
+            id="managed-wallet-name"
+            label="Wallet Name"
+            fullWidth
+            variant="standard"
+            inputProps={{ style: { fontSize: 16 } }}
+            InputLabelProps={{ style: { fontSize: 16 } }}
+            onChange={handleTextChange}
+            error={createWalletError}
+            helperText={createWalletErrorMessage}
+            value={walletName}
+          />
+        ) : (
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <CreateSuccessIcon />
+            <CreateSuccessText>Wallet created successfully</CreateSuccessText>
+          </div>
+        )}
       </DialogContent>
-      <DialogActions
-        style={{ justifyContent: 'center', paddingBottom: '1.5em' }}
-      >
-        <Button onClick={closeDialog}>Cancel</Button>
-        <CreateButton
-          type="button"
-          variant="contained"
-          color="primary"
-          onClick={handleCreateWallet}
+      {!createSuccess && (
+        <DialogActions
+          style={{ justifyContent: 'center', paddingBottom: '1.5em' }}
         >
-          Create
-        </CreateButton>
-      </DialogActions>
+          <Button onClick={closeDialog}>Cancel</Button>
+          <CreateButton
+            type="button"
+            variant="contained"
+            color="primary"
+            onClick={handleCreateWallet}
+          >
+            Create
+          </CreateButton>
+        </DialogActions>
+      )}
     </Dialog>
   );
 };

src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.styled.js

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { Button, Typography } from '@mui/material';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 
 export const CreateNewWallet = styled(Button)({
   color: '#fff',
@@ -13,7 +14,15 @@ export const CreateButton = styled(Button)({
   boxShadow: 'none',
 });
 
-export const DialogText = styled(Typography)({
-  fontSize: '16px',
-  lineHeight: '24px',
+export const CreateSuccessIcon = styled(CheckCircleOutlineIcon)({
+  color: '#86c232',
+  height: '4.75rem',
+  width: '4.75rem',
+  marginBottom: '1.5rem',
+});
+
+export const CreateSuccessText = styled(Typography)({
+  color: '#86c232',
+  fontSize: '1.375rem',
+  marginBottom: '2rem',
 });

src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.test.js

@@ -10,6 +10,8 @@ import {
 } from '@testing-library/react';
 import CreateManagedWallet from './CreateManagedWallet';
 import userEvent from '@testing-library/user-event';
+import { createWallet } from '../../../api/wallets';
+import { wait } from '@testing-library/user-event/dist/utils';
 
 jest.mock('react-secure-storage', () => {
   return {
@@ -18,6 +20,12 @@ jest.mock('react-secure-storage', () => {
   };
 });
 
+jest.mock('../../../api/wallets', () => {
+  return {
+    createWallet: jest.fn(),
+  };
+});
+
 const TestWrapper = (props) => {
   return (
     <ThemeProvider theme={theme}>
@@ -79,14 +87,23 @@ describe('Create managed wallet', function () {
 
     //creating wallet with no wallet text
     userEvent.click(createWalletButton);
-    expect(screen.queryByText(/Wallet name is required/));
+    expect(screen.queryByText(/Wallet name is required/)).toBeTruthy();
 
     //creating wallet with invalid wallet name
     const textbox = screen.getByRole('textbox');
     userEvent.type(textbox, 'testwallet!@;/');
     expect(textbox.value).toBe('testwallet!@;/');
     userEvent.click(createWalletButton);
-    expect(screen.queryByText(/Wallet can only contain numbers/));
+    expect(screen.queryByText(/Wallet can only contain numbers/)).toBeTruthy();
+
+    //creating wallet with less than 3 characters
+    userEvent.clear(textbox);
+    userEvent.type(textbox, 'te');
+    expect(textbox.value).toBe('te');
+    userEvent.click(createWalletButton);
+    expect(
+      screen.queryByText(/Wallet name must be at least 3 characters long/)
+    ).toBeTruthy();
   });
 
   it('close and cancel buttons work correctly', async () => {
@@ -127,4 +144,36 @@ describe('Create managed wallet', function () {
       screen.queryByRole('dialog', { name: /Create Managed Wallet/ })
     ).toBeNull();
   });
+
+  it('create valid wallet successfully', async () => {
+    createWallet.mockResolvedValueOnce('testwallet');
+
+    render(
+      <TestWrapper>
+        <CreateManagedWallet />
+      </TestWrapper>
+    );
+
+    //opening the modal
+    const createButton = screen.getByRole('button');
+    userEvent.click(createButton);
+
+    //create button
+    const createWalletButton = screen.getByRole('button', { name: /Create/ });
+
+    //creating wallet with no wallet text
+    const textbox = screen.getByRole('textbox');
+    userEvent.type(textbox, 'testwallet');
+    userEvent.click(createWalletButton);
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByRole('button', { name: /Create/ })
+    );
+
+    expect(
+      screen.queryByText(/Wallet created successfully/)
+    ).toBeInTheDocument();
+
+    // screen.getByRole('');
+  });
 });

src/pages/ListWallets/ListWallets.js

@@ -65,7 +65,7 @@ const ListWallets = () => {
       >
         <Grid item>
           <Typography variant={'h4'}>Managed Wallets List</Typography>
-          <CreateManagedWallet loadData={loadData} setMessage={setMessage} />
+          <CreateManagedWallet loadData={loadData} />
         </Grid>
         <Grid item>
           <Table