watchlist. зайчатки

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/Tag/Tag.tsx

+import React from 'react';
+
+import { Box } from '@chakra-ui/react'
+
+type Props = { children: React.ReactNode };
+
+const Tag: React.FC<Props> = (props) => {
+  return (
+    <Box backgroundColor="gray.200" color="gray.600" borderRadius="4px" fontSize="xs" padding="2px 8px" width="fit-content">
+      { props.children }
+    </Box>
+  )
+}
+
+export default Tag;

components/WatchlistTable/WatchListAddressItem.tsx

+import React, { useCallback } from 'react';
+
+import { Box, Icon } from '@chakra-ui/react';
+
+import copyToClipboard from '../../lib/copyToClipboard';
+
+import type { TWatchlistItem } from '../../data/watchlist';
+
+const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
+  const copyToClipboardCallback = useCallback(() => copyToClipboard(item.address), [ item ]);
+  return (
+    <Box display="flex">
+      <Box backgroundColor="red" w={ 50 } h={ 50 } marginRight="16px"></Box>
+      <Box>
+        <Box>
+          { item.address }
+          { /* TODO: как быть с иконками? */ }
+          <Icon color="red" w="20px" h="20px" cursor="pointer" onClick={ copyToClipboardCallback }>
+            { /* eslint-disable-next-line max-len */ }
+            <path d="M12.9091 3H5.27273C4.56955 3 4 3.56955 4 4.27273V13.1818H5.27273V4.27273H12.9091V3ZM14.8182 5.54545H7.81818C7.115 5.54545 6.54545 6.115 6.54545 6.81818V15.7273C6.54545 16.4305 7.115 17 7.81818 17H14.8182C15.5214 17 16.0909 16.4305 16.0909 15.7273V6.81818C16.0909 6.115 15.5214 5.54545 14.8182 5.54545ZM14.8182 15.7273H7.81818V6.81818H14.8182V15.7273Z" fill="#3F68C0"/>
+          </Icon>
+        </Box>
+        <Box>{ item.tokens.xDAI.amount + ' ' + item.tokens.xDAI.symbol }</Box>
+        <Box>{ Object.keys(item.tokens).length + 'tokens' }</Box>
+        <Box>{ item.totalUSD }</Box>
+      </Box>
+    </Box>
+  )
+}
+
+export default WatchListAddressItem;

components/WatchlistTable/WatchlistTable.tsx

+/* eslint-disable max-len */
+import React from 'react';
+
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  TableContainer,
+  Switch,
+  Icon,
+  Box,
+} from '@chakra-ui/react'
+
+import { Th, Td } from '../Table/Table';
+
+import Tag from '../Tag/Tag';
+
+import type { TWatchlist } from '../../data/watchlist';
+
+import WatchListAddressItem from './WatchListAddressItem';
+
+interface Props {
+  data: TWatchlist;
+}
+
+const WatchlistTable = ({ data }: Props) => {
+  const editIcon = (
+    <Icon w="20px" h="20px" fill="blue">
+      <g clipPath="url(#clip0_279_1243)">
+        <path d="M20.0771 3.60072L17.0441 0.567747C16.678 0.20161 16.1913 0 15.6735 0C15.1558 0 14.669 0.20161 14.3029 0.567735L1.60665 13.2638C1.48614 13.3843 1.40846 13.541 1.38556 13.7099L0.651735 19.1161C0.619025 19.3573 0.700799 19.5998 0.872859 19.7718C1.01993 19.9189 1.2185 20 1.42368 20C1.45849 20 1.49353 19.9977 1.52852 19.9929L6.93476 19.2591C7.10366 19.2362 7.26038 19.1586 7.38088 19.038L20.0771 6.34197C20.4432 5.97586 20.6448 5.48909 20.6448 4.97136C20.6448 4.45359 20.4432 3.96682 20.0771 3.60072ZM6.46488 17.7505L2.33338 18.3112L2.89418 14.1798L11.8911 5.18302L15.4617 8.7537L6.46488 17.7505ZM18.9753 5.24017L16.5635 7.65191L12.9929 4.08125L15.4046 1.66952C15.5015 1.57262 15.6147 1.55814 15.6735 1.55814C15.7323 1.55814 15.8454 1.57262 15.9424 1.66952L18.9754 4.70249C19.0723 4.79938 19.0867 4.91252 19.0867 4.97133C19.0867 5.03013 19.0722 5.14327 18.9753 5.24017Z" fill="#3F68C0"/>
+      </g>
+      <defs>
+        <clipPath id="clip0_279_1243">
+          <rect width="20.0002" height="20" fill="white" transform="translate(0.644653)"/>
+        </clipPath>
+      </defs>
+    </Icon>
+  );
+
+  const deleteIcon = (
+    <Icon w="20px" h="20px" fill="red">
+      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
+        <path d="M15.6447 19.375H5.64465C5.14737 19.375 4.67046 19.1775 4.31883 18.8258C3.9672 18.4742 3.76965 17.9973 3.76965 17.5V5.625C3.76965 5.45924 3.8355 5.30027 3.95271 5.18306C4.06992 5.06585 4.22889 5 4.39465 5C4.56041 5 4.71938 5.06585 4.83659 5.18306C4.95381 5.30027 5.01965 5.45924 5.01965 5.625V17.5C5.01965 17.6658 5.0855 17.8247 5.20271 17.9419C5.31992 18.0592 5.47889 18.125 5.64465 18.125H15.6447C15.8104 18.125 15.9694 18.0592 16.0866 17.9419C16.2038 17.8247 16.2697 17.6658 16.2697 17.5V5.625C16.2697 5.45924 16.3355 5.30027 16.4527 5.18306C16.5699 5.06585 16.7289 5 16.8947 5C17.0604 5 17.2194 5.06585 17.3366 5.18306C17.4538 5.30027 17.5197 5.45924 17.5197 5.625V17.5C17.5197 17.9973 17.3221 18.4742 16.9705 18.8258C16.6188 19.1775 16.1419 19.375 15.6447 19.375Z" fill="#F2A5C0"/>
+        <path d="M18.1447 4.375H3.14465C2.97889 4.375 2.81992 4.30915 2.70271 4.19194C2.5855 4.07473 2.51965 3.91576 2.51965 3.75C2.51965 3.58424 2.5855 3.42527 2.70271 3.30806C2.81992 3.19085 2.97889 3.125 3.14465 3.125H18.1447C18.3104 3.125 18.4694 3.19085 18.5866 3.30806C18.7038 3.42527 18.7697 3.58424 18.7697 3.75C18.7697 3.91576 18.7038 4.07473 18.5866 4.19194C18.4694 4.30915 18.3104 4.375 18.1447 4.375Z" fill="#F2A5C0"/>
+        <path d="M13.1447 4.375C12.9789 4.375 12.8199 4.30915 12.7027 4.19194C12.5855 4.07473 12.5197 3.91576 12.5197 3.75V1.875H8.76965V3.75C8.76965 3.91576 8.70381 4.07473 8.58659 4.19194C8.46938 4.30915 8.31041 4.375 8.14465 4.375C7.97889 4.375 7.81992 4.30915 7.70271 4.19194C7.5855 4.07473 7.51965 3.91576 7.51965 3.75V1.25C7.51965 1.08424 7.5855 0.925268 7.70271 0.808058C7.81992 0.690848 7.97889 0.625 8.14465 0.625H13.1447C13.3104 0.625 13.4694 0.690848 13.5866 0.808058C13.7038 0.925268 13.7697 1.08424 13.7697 1.25V3.75C13.7697 3.91576 13.7038 4.07473 13.5866 4.19194C13.4694 4.30915 13.3104 4.375 13.1447 4.375Z" fill="#F2A5C0"/>
+        <path d="M10.6447 16.25C10.4789 16.25 10.3199 16.1842 10.2027 16.0669C10.0855 15.9497 10.0197 15.7908 10.0197 15.625V6.875C10.0197 6.70924 10.0855 6.55027 10.2027 6.43306C10.3199 6.31585 10.4789 6.25 10.6447 6.25C10.8104 6.25 10.9694 6.31585 11.0866 6.43306C11.2038 6.55027 11.2697 6.70924 11.2697 6.875V15.625C11.2697 15.7908 11.2038 15.9497 11.0866 16.0669C10.9694 16.1842 10.8104 16.25 10.6447 16.25Z" fill="#F2A5C0"/>
+        <path d="M13.7697 15C13.6039 15 13.4449 14.9342 13.3277 14.8169C13.2105 14.6997 13.1447 14.5408 13.1447 14.375V8.125C13.1447 7.95924 13.2105 7.80027 13.3277 7.68306C13.4449 7.56585 13.6039 7.5 13.7697 7.5C13.9354 7.5 14.0944 7.56585 14.2116 7.68306C14.3288 7.80027 14.3947 7.95924 14.3947 8.125V14.375C14.3947 14.5408 14.3288 14.6997 14.2116 14.8169C14.0944 14.9342 13.9354 15 13.7697 15Z" fill="#F2A5C0"/>
+        <path d="M7.51965 15C7.35389 15 7.19492 14.9342 7.07771 14.8169C6.9605 14.6997 6.89465 14.5408 6.89465 14.375V8.125C6.89465 7.95924 6.9605 7.80027 7.07771 7.68306C7.19492 7.56585 7.35389 7.5 7.51965 7.5C7.68541 7.5 7.84438 7.56585 7.96159 7.68306C8.07881 7.80027 8.14465 7.95924 8.14465 8.125V14.375C8.14465 14.5408 8.07881 14.6997 7.96159 14.8169C7.84438 14.9342 7.68541 15 7.51965 15Z" fill="#F2A5C0"/>
+      </svg>
+    </Icon>
+  )
+  return (
+    <TableContainer>
+      <Table variant="simple">
+        <Thead>
+          <Tr>
+            <Th>Address</Th>
+            <Th>Private tag</Th>
+            <Th>Notification</Th>
+            <Th></Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          { data.map(item => {
+            return (
+              <Tr alignItems="top" key={ item.address }>
+                <Td><WatchListAddressItem item={ item }/></Td>
+                <Td><Tag>{ item.tag }</Tag></Td>
+                <Td><Switch colorScheme="green" size="md" isChecked={ item.notifications }/></Td>
+                <Td><Box>{ editIcon }{ deleteIcon }</Box></Td>
+              </Tr>
+            )
+          }) }
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default WatchlistTable;

data/watchlist.ts

+export const watchlist = [
+  {
+    address: '0x4831c121879d3de0e2b181d9d55e9b0724f5d926',
+    tokens: {
+      xDAI: {
+        symbol: 'xDAI',
+        amount: 100,
+        decimals: 18,
+        usd: 100,
+      },
+      ABC: {
+        symbol: 'ABC',
+        amount: 100,
+        decimals: 18,
+        usd: 100,
+      },
+    },
+    totalUSD: 123123,
+    tag: 'some_tag',
+    notification: true,
+  },
+  {
+    address: '0x8c461F78760988c4135e363a87dd736f8b671ff0',
+    tokens: {
+      xDAI: {
+        symbol: 'xDAI',
+        amount: 200,
+        usd: 200,
+      },
+      ABC: {
+        symbol: 'ABC',
+        amount: 200,
+        usd: 200,
+      },
+    },
+    totalUSD: 123123,
+    tag: 'some_other_tag',
+  },
+];
+
+export type TWatchlist = Array<TWatchlistItem>
+
+export type TWatchlistItem = {
+  address: string;
+  tokens: Record<string, TTokenItem>;
+  totalUSD: number;
+  tag: string;
+  notification?: boolean;
+}
+
+export type TTokenItem = {
+  symbol: string;
+  amount: number;
+  usd: number;
+}

lib/copyToClipboard.ts

+export default function copyToClipboard(text: string, successCallback?: () => void, errCallback?: () => void) {
+  navigator.clipboard.writeText(text).then(function() {
+    successCallback && successCallback();
+  }, function() {
+    errCallback && errCallback();
+  });
+}

pages/watchlist.tsx

 import React from 'react';
 import type { NextPage } from 'next';
+
 import { Center } from '@chakra-ui/react';
+
 import Page from '../components/Page/Page';
 
+import WatchlistTable from '../components/WatchlistTable/WatchlistTable';
+
+import { watchlist } from '../data/watchlist';
+
 const WatchList: NextPage = () => {
   return (
     <Page>
       <Center h="100%">
-      Watch List Page
+        <WatchlistTable data={ watchlist }/>
       </Center>
     </Page>
   );