Merge pull request #9 from tom2drum/delete-modal

components/AddressModal/AddressModal.tsx

@@ -56,7 +56,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
       <ModalOverlay/>
       <ModalContent>
         <ModalHeader fontWeight="500">New Address to Watchlist</ModalHeader>
-        <ModalCloseButton color="blue.500"/>
+        <ModalCloseButton/>
         <ModalBody>
           <Text lineHeight="30px" marginBottom="40px">
             An Email notification can be sent to you when an address on your watch list sends or receives any transactions.

components/DeleteModal/DeleteModal.tsx

+import React, { useCallback } from 'react';
+
+import {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from '@chakra-ui/react';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  getDisclosureProps: () => any;
+  address?: string;
+}
+
+const DeleteModal: React.FC<Props> = ({ isOpen, onClose, address }) => {
+
+  const onDeleteClick = useCallback(() => {
+    // eslint-disable-next-line no-console
+    console.log('delete ', address);
+    onClose()
+  }, [ address, onClose ]);
+
+  return (
+    <Modal isOpen={ isOpen } onClose={ onClose } size="md">
+      <ModalOverlay/>
+      <ModalContent>
+        <ModalCloseButton/>
+        <ModalBody>
+          { `Delete ${ address || 'address' } from watchlist?` }
+        </ModalBody>
+
+        <ModalFooter>
+          <Button variant="ghost" onClick={ onDeleteClick }>Yes</Button>
+          <Button colorScheme="blue" ml={ 3 } onClick={ onClose }>
+              No
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default DeleteModal;

pages/watchlist.tsx

@@ -10,26 +10,35 @@ import AddressModal from '../components/AddressModal/AddressModal';
 
 import type { TWatchlistItem } from '../data/watchlist';
 import { watchlist } from '../data/watchlist';
+import DeleteModal from '../components/DeleteModal/DeleteModal';
 
 const WatchList: NextPage = () => {
   const addressModalProps = useDisclosure();
-  const [ data, setData ] = useState<TWatchlistItem>();
+  const deleteModalProps = useDisclosure();
+
+  const [ addressModalData, setAddressModalData ] = useState<TWatchlistItem>();
+  const [ deleteModalData, setDeleteModalData ] = useState<string>();
 
   const onEditClick = useCallback((index: number) => () => {
-    setData(watchlist[index]);
+    setAddressModalData(watchlist[index]);
     addressModalProps.onOpen();
   }, [ addressModalProps ])
 
-  const onDeleteClick = useCallback((index: number) => () => {
-    // eslint-disable-next-line no-console
-    console.log('delete', index);
-  }, [ ])
-
-  const onModalClose = useCallback(() => {
-    setData(undefined);
+  const onAddressModalClose = useCallback(() => {
+    setAddressModalData(undefined);
     addressModalProps.onClose();
   }, [ addressModalProps ]);
 
+  const onDeleteClick = useCallback((index: number) => () => {
+    setDeleteModalData(watchlist[index]?.address);
+    deleteModalProps.onOpen();
+  }, [ deleteModalProps ])
+
+  const onDeleteModalClose = useCallback(() => {
+    setDeleteModalData(undefined);
+    deleteModalProps.onClose();
+  }, [ deleteModalProps ]);
+
   return (
     <Page>
       <Box h="100%">
@@ -50,7 +59,8 @@ const WatchList: NextPage = () => {
           </Button>
         </Box>
       </Box>
-      <AddressModal { ...addressModalProps } onClose={ onModalClose } data={ data }/>
+      <AddressModal { ...addressModalProps } onClose={ onAddressModalClose } data={ addressModalData }/>
+      <DeleteModal { ...deleteModalProps } onClose={ onDeleteModalClose } address={ deleteModalData }/>
     </Page>
   );
 };

theme/components/Modal.ts

@@ -29,6 +29,7 @@ const Modal: ComponentMultiStyleConfig = {
     closeButton: {
       top: '40px',
       right: '40px',
+      color: 'blue.500',
     },
   },
 }