Merge pull request #6 from tom2drum/add-address

components/AddAddressModal/AddAddressModal.tsx

+import React from 'react';
+
+import {
+  Box,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Input,
+  Checkbox,
+  Text,
+  Grid,
+  GridItem,
+} from '@chakra-ui/react';
+
+const NOTIFICATIONS = [ 'xDAI', 'ERC-20', 'ERC-721, ERC-1155 (NFT)' ];
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const AddAddressModal: React.FC<Props> = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={ isOpen } onClose={ onClose } size="md">
+      <ModalOverlay/>
+      <ModalContent>
+        <ModalHeader fontWeight="500">New Address to Watchlist</ModalHeader>
+        <ModalCloseButton color="blue.500"/>
+        <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.
+          </Text>
+          <Input placeholder="Address (0x...)*" marginBottom="20px"/>
+          <Input placeholder="Private tag (max 35 characters)*" marginBottom="30px"/>
+          <Text color="gray.600" fontSize="14px" marginBottom="32px">
+            Please select what types of notifications you will receive:
+          </Text>
+          <Box marginBottom="32px">
+            <Grid templateColumns="repeat(3, max-content)" gap="20px 24px">
+              { NOTIFICATIONS.map((notification: string) => {
+                return (
+                  <>
+                    <GridItem>{ notification }</GridItem>
+                    <GridItem><Checkbox colorScheme="green">Incoming</Checkbox></GridItem>
+                    <GridItem><Checkbox colorScheme="green">Outgoing</Checkbox></GridItem>
+                  </>
+                )
+              }) }
+            </Grid>
+          </Box>
+          <Text color="gray.600" fontSize="14px" marginBottom="20px">Notification methods:</Text>
+          <Checkbox defaultChecked colorScheme="green">Email notifications</Checkbox>
+        </ModalBody>
+
+        <ModalFooter justifyContent="flex-start">
+          <Button colorScheme="blue" onClick={ onClose }>
+            Add address
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default AddAddressModal;

components/Page/Page.tsx

@@ -19,7 +19,7 @@ const Page = ({ children }: Props) => {
         alignItems="stretch"
       >
         <AccountNav/>
-        <Box borderRadius="base" w="100%" overflow="hidden" bgColor="white">{ children }</Box>
+        <Box borderRadius="base" w="100%" overflow="hidden" bgColor="white" padding="32px 20px">{ children }</Box>
       </HStack>
     </LightMode>
   );

components/Table/Table.tsx

-import React from 'react';
-
-import {
-  // Table,
-  // Thead,
-  // Tbody,
-  // Tfoot,
-  Td as ChakraTd,
-  Th as ChakraTh,
-  // Tr,
-  // TableContainer,
-} from '@chakra-ui/react';
-
-const firstLastStyle = {
-  _first: { paddingLeft: 0 },
-  _last: { paddingRight: 0 },
-}
-
-export const Th = ({ children }: {children?: React.ReactNode}) => {
-  return <ChakraTh textTransform="none" fontSize="sm" fontWeight="normal" { ...firstLastStyle }>{ children }</ChakraTh>
-};
-
-export const Td = ({ children }: {children?: React.ReactNode}) => {
-  return <ChakraTd fontSize="md" { ...firstLastStyle } verticalAlign="top">{ children }</ChakraTd>
-};

components/WatchlistTable/WatchlistTable.tsx

@@ -6,6 +6,8 @@ import {
   Thead,
   Tbody,
   Tr,
+  Th,
+  Td,
   TableContainer,
   Switch,
   Icon,
@@ -13,8 +15,6 @@ import {
 } from '@chakra-ui/react'
 import { FaEdit, FaTrash } from 'react-icons/fa';
 
-import { Th, Td } from '../Table/Table';
-
 import type { TWatchlist } from '../../data/watchlist';
 
 import WatchListAddressItem from './WatchListAddressItem';
@@ -25,7 +25,7 @@ interface Props {
 
 const WatchlistTable = ({ data }: Props) => {
   return (
-    <TableContainer>
+    <TableContainer width="100%">
       <Table variant="simple">
         <Thead>
           <Tr>

pages/watchlist.tsx

 import React from 'react';
 import type { NextPage } from 'next';
 
-import { Center } from '@chakra-ui/react';
+import { Box, Button, Text, useDisclosure } from '@chakra-ui/react';
 
 import Page from '../components/Page/Page';
 
 import WatchlistTable from '../components/WatchlistTable/WatchlistTable';
+import AddAddressModal from '../components/AddAddressModal/AddAddressModal';
 
 import { watchlist } from '../data/watchlist';
 
 const WatchList: NextPage = () => {
+  const addModalProps = useDisclosure()
   return (
     <Page>
-      <Center h="100%">
-        <WatchlistTable data={ watchlist }/>
-      </Center>
+      <Box h="100%">
+        <Text marginBottom="40px">An Email notification can be sent to you when an address on your watch list sends or receives any transactions.</Text>
+        { Boolean(watchlist.length) && <WatchlistTable data={ watchlist }/> }
+        <Box marginTop="32px">
+          <Button
+            colorScheme="blue"
+            onClick={ addModalProps.onOpen }
+          >
+            Add address
+          </Button>
+        </Box>
+      </Box>
+      <AddAddressModal { ...addModalProps }/>
     </Page>
   );
 };

theme/components/Button.ts

+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const Button: ComponentStyleConfig = {
+  baseStyle: {
+    fontWeight: 'normal',
+  },
+}
+
+export default Button;

theme/components/Modal.ts

+import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
+
+const Modal: ComponentMultiStyleConfig = {
+  parts: [ ],
+  sizes: {
+    md: {
+      dialog: {
+        maxW: '760px',
+      },
+    },
+  },
+  baseStyle: {
+    dialog: {
+      padding: '40px',
+      borderRadius: '30px',
+    },
+    header: {
+      padding: 0,
+      marginBottom: '20px',
+      fontSize: '24px',
+    },
+    body: {
+      padding: 0,
+      marginBottom: '40px',
+    },
+    footer: {
+      padding: 0,
+    },
+    closeButton: {
+      top: '40px',
+      right: '40px',
+    },
+  },
+}
+
+export default Modal;

theme/components/Table.ts

+import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
+
+const firstLastStyle = {
+  _first: { paddingLeft: 0 },
+  _last: { paddingRight: 0 },
+}
+
+const Table: ComponentMultiStyleConfig = {
+  parts: [ 'th', 'td' ],
+  baseStyle: {
+    th: {
+      ...firstLastStyle,
+      textTransform: 'none',
+      fontWeight: 'normal',
+    },
+    td: {
+      ...firstLastStyle,
+      fontSize: 'md',
+      verticalAlign: 'top',
+    },
+  },
+}
+
+export default Table;

theme/components/index.ts

 import Switch from './Switch';
+import Button from './Button';
+import Modal from './Modal';
+import Table from './Table';
 
 const components = {
   Switch,
+  Button,
+  Modal,
+  Table,
 }
 
 export default components;