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

98 Create managed wallet
Greenstand · Jan 16, 2024 · 5bcd5d1 · 5bcd5d1
2 parents 9f6d64c + 57fad61
commit 5bcd5d1
Show file tree

Hide file tree

Showing 6 changed files with 438 additions and 110 deletions.
diff --git a/src/api/wallets.js b/src/api/wallets.js
@@ -61,3 +61,22 @@ export const getWalletById = async (token, id) => {
 
   return walletData;
 };
+
+export const createWallet = async (token, walletName) => {
+  const postRequest = {
+    wallet: walletName,
+  };
+
+  const createdWallet = await apiClient
+    .setAuthHeader(token)
+    .post('/wallets', postRequest)
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.error(error);
+      throw Error('An error occurred while creating the wallet.');
+    });
+
+  return createdWallet;
+};
diff --git a/src/components/Routes/ClientRoutes.js b/src/components/Routes/ClientRoutes.js
@@ -1,82 +1,82 @@
-import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
-import Wallet from '../../pages/Wallet/Wallet';
-import Login from '../../pages/Login/Login';
-import Layout from '../layout/Layout';
-import AuthContext from '../../store/auth-context';
-import SendTokens from '../../pages/SendTokens/SendTokens';
-import NotFound from '../../pages/NotFound/NotFound';
-import { useContext } from 'react';
-import MyTransfers from '../../pages/MyTransfers/MyTransfers';
-import { TransfersProvider } from '../../store/TransfersContext';
-import ListWallets from '../../pages/ListWallets/ListWallets';
-import { WalletsProvider } from '../../store/WalletsContext';
-
-const ProtectedRoute = ({ isLoggedIn, redirectPath = '/login' }) => {
-  if (!isLoggedIn) {
-    return <Navigate to={redirectPath} replace />;
-  }
-
-  return <Outlet />;
-};
-
-const ClientRoutes = () => {
-  const authCtx = useContext(AuthContext);
-
-  return (
-    <Routes>
-      <Route element={<ProtectedRoute isLoggedIn={authCtx.isLoggedIn} />}>
-        <Route
-          path="/"
-          exact
-          element={
-            <Layout>
-              <Wallet />
-            </Layout>
-          }
-        />
-        <Route
-          path="/my-transfers"
-          exact
-          element={
-            <Layout>
-              <TransfersProvider>
-                <MyTransfers />
-              </TransfersProvider>
-            </Layout>
-          }
-        />
-        <Route
-          path="/send-tokens"
-          exact
-          element={
-            <Layout>
-              <SendTokens />
-            </Layout>
-          }
-        />
-        <Route
-          path="/list-wallets"
-          exact
-          element={
-            <Layout>
-              <WalletsProvider>
-                <ListWallets />
-              </WalletsProvider>
-            </Layout>
-          }
-        />
-        <Route
-          path="*"
-          element={
-            <Layout>
-              <NotFound />
-            </Layout>
-          }
-        />
-      </Route>
-      <Route path="login" element={<Login />} />
-    </Routes>
-  );
-};
-
-export default ClientRoutes;
+import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
+import Wallet from '../../pages/Wallet/Wallet';
+import Login from '../../pages/Login/Login';
+import Layout from '../layout/Layout';
+import AuthContext from '../../store/auth-context';
+import SendTokens from '../../pages/SendTokens/SendTokens';
+import NotFound from '../../pages/NotFound/NotFound';
+import { useContext } from 'react';
+import MyTransfers from '../../pages/MyTransfers/MyTransfers';
+import { TransfersProvider } from '../../store/TransfersContext';
+import ListWallets from '../../pages/ListWallets/ListWallets';
+import { WalletsProvider } from '../../store/WalletsContext';
+
+const ProtectedRoute = ({ isLoggedIn, redirectPath = '/login' }) => {
+  if (!isLoggedIn) {
+    return <Navigate to={redirectPath} replace />;
+  }
+
+  return <Outlet />;
+};
+
+const ClientRoutes = () => {
+  const authCtx = useContext(AuthContext);
+
+  return (
+    <Routes>
+      <Route element={<ProtectedRoute isLoggedIn={authCtx.isLoggedIn} />}>
+        <Route
+          path="/"
+          exact
+          element={
+            <Layout>
+              <Wallet />
+            </Layout>
+          }
+        />
+        <Route
+          path="/my-transfers"
+          exact
+          element={
+            <Layout>
+              <TransfersProvider>
+                <MyTransfers />
+              </TransfersProvider>
+            </Layout>
+          }
+        />
+        <Route
+          path="/send-tokens"
+          exact
+          element={
+            <Layout>
+              <SendTokens />
+            </Layout>
+          }
+        />
+        <Route
+          path="/list-wallets"
+          exact
+          element={
+            <Layout>
+              <WalletsProvider>
+                <ListWallets />
+              </WalletsProvider>
+            </Layout>
+          }
+        />
+        <Route
+          path="*"
+          element={
+            <Layout>
+              <NotFound />
+            </Layout>
+          }
+        />
+      </Route>
+      <Route path="login" element={<Login />} />
+    </Routes>
+  );
+};
+
+export default ClientRoutes;
diff --git a/src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.js b/src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.js
@@ -0,0 +1,149 @@
+import { CreateButton, CreateNewWallet } 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';
+import { useContext, useState } from 'react';
+import { Button, TextField } from '@mui/material';
+import { createWallet } from '../../../api/wallets';
+import AuthContext from '../../../store/auth-context';
+
+const CreateManagedWallet = ({ loadData, setMessage }) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const handleDialogOpen = () => {
+    setDialogOpen(true);
+  };
+
+  const handleDialogClose = () => {
+    setDialogOpen(false);
+  };
+
+  return (
+    <>
+      <CreateNewWallet
+        type="button"
+        variant="contained"
+        color="primary"
+        onClick={handleDialogOpen}
+      >
+        Create Managed Wallet
+      </CreateNewWallet>
+      <CreateNewWalletDialog
+        open={dialogOpen}
+        handleClose={handleDialogClose}
+        loadData={loadData}
+        setMessage={setMessage}
+      />
+    </>
+  );
+};
+
+const CreateNewWalletDialog = ({ open, handleClose, loadData, setMessage }) => {
+  const [walletName, setWalletName] = useState('');
+  const [createWalletError, setCreateWalletError] = useState(false);
+  const [createWalletErrorMessage, setCreateWalletErrorMessage] = useState('');
+
+  const authContext = useContext(AuthContext);
+
+  const closeDialog = () => {
+    setCreateWalletError(false);
+    setCreateWalletErrorMessage('');
+    handleClose();
+  };
+
+  const handleTextChange = (event) => {
+    setWalletName(event.target.value);
+  };
+
+  const validateCreateWallet = (wallet) => {
+    if (!wallet) {
+      setCreateWalletError(true);
+      setCreateWalletErrorMessage('Wallet name is required');
+      return false;
+    }
+
+    const pattern = /^[a-zA-Z0-9\-.@]+$/;
+    if (!pattern.test(wallet)) {
+      setCreateWalletError(true);
+      setCreateWalletErrorMessage(
+        'Wallet can only contain numbers, letters and the - . @ symbols'
+      );
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleCreateWallet = async () => {
+    if (!validateCreateWallet(walletName)) {
+      return;
+    }
+    try {
+      const createdWallet = await createWallet(authContext.token, walletName);
+      console.log(createdWallet);
+      setMessage(
+        `Wallet with name ${createdWallet.wallet} successfully created`
+      );
+      loadData();
+    } catch (error) {
+      console.error(error);
+      setMessage(error);
+    }
+
+    setWalletName('');
+    closeDialog();
+  };
+
+  return (
+    <Dialog open={open} onClose={closeDialog} fullWidth={true} maxWidth={'xs'}>
+      <DialogTitle>
+        Create Managed Wallet
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+          }}
+        >
+          <CloseIcon />
+        </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}
+        />
+      </DialogContent>
+      <DialogActions
+        style={{ justifyContent: 'center', paddingBottom: '1.5em' }}
+      >
+        <Button onClick={closeDialog}>Cancel</Button>
+        <CreateButton
+          type="button"
+          variant="contained"
+          color="primary"
+          onClick={handleCreateWallet}
+        >
+          Create
+        </CreateButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CreateManagedWallet;
diff --git a/src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.styled.js b/src/pages/ListWallets/CreateManagedWallet/CreateManagedWallet.styled.js
@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import { Button, Typography } from '@mui/material';
+
+export const CreateNewWallet = styled(Button)({
+  color: '#fff',
+  height: '2.5rem',
+  boxShadow: 'none',
+  padding: '0.5rem 0.5rem 0.5rem 0.625rem',
+});
+
+export const CreateButton = styled(Button)({
+  color: '#fff',
+  boxShadow: 'none',
+});
+
+export const DialogText = styled(Typography)({
+  fontSize: '16px',
+  lineHeight: '24px',
+});