Merge pull request #3 from tom2drum/watchlist

watchlist. зайчатки

components/CopyToClipboard/CopyToClipboard.tsx

+import React, { useCallback, useEffect } from 'react';
+
+import { Icon, useClipboard, useToast } from '@chakra-ui/react';
+import { FaCopy } from 'react-icons/fa';
+
+const WatchListAddressItem = ({ text }: {text: string}) => {
+  const { hasCopied, onCopy } = useClipboard(text);
+  const toast = useToast();
+
+  useEffect(() => {
+    if (hasCopied) {
+      toast({
+        description: 'Copied',
+        status: 'success',
+        duration: 3000,
+      })
+    }
+  }, [ toast, hasCopied ]);
+
+  const copyToClipboardCallback = useCallback(() => onCopy(), [ onCopy ]);
+  return <Icon as={ FaCopy } w="15px" h="15px" color="blue.500" cursor="pointer" onClick={ copyToClipboardCallback }/>;
+}
+
+export default WatchListAddressItem;

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 from 'react';
+
+import { Link, HStack, VStack, Image, Text, Icon } from '@chakra-ui/react';
+
+import CopyToClipboard from '../CopyToClipboard/CopyToClipboard';
+import type { TWatchlistItem } from '../../data/watchlist';
+import { nbsp } from '../../lib/html-entities';
+import { FaIcicles, FaWallet } from 'react-icons/fa';
+
+const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
+  return (
+    <HStack spacing="12px" align="top">
+      <Image src="/acc.png" alt="Account Image" w="50px" h="50px"/>
+      <VStack align="stretch">
+        <HStack spacing="8px">
+          <Link href="#" color="blue.500">
+            { item.address }
+          </Link>
+          <CopyToClipboard text={ item.address }/>
+        </HStack>
+        { item.tokenBalance && (
+          <HStack spacing="0">
+            <Image src="./xdai.png" alt="chain-logo" marginRight="10px" w="16px" h="16px"/>
+            <Text fontSize="12px">{ item.tokenBalance + ' xDAI' }</Text>
+            <Text fontSize="12px" color="gray.500">{ `${ nbsp }($${ item.tokenBalanceUSD } USD)` }</Text>
+          </HStack>
+        ) }
+        { item.tokensAmount && (
+          <HStack spacing="0">
+            <Icon as={ FaIcicles } marginRight="10px" w="16px" h="16px"/>
+            <Text fontSize="12px">{ item.tokensAmount + ' tokens' }</Text>
+            <Text fontSize="12px" color="gray.500">{ `${ nbsp }($${ item.tokensUSD } USD)` }</Text>
+          </HStack>
+        ) }
+        { item.totalUSD && (
+          <HStack spacing="0">
+            <Icon as={ FaWallet } marginRight="10px" w="16px" h="16px"/>
+            <Text fontSize="12px">{ `Total balance:${ nbsp }` }</Text>
+            <Link fontSize="12px" href="#" color="blue.500">{ `$${ item.totalUSD } USD` }</Link>
+          </HStack>
+        ) }
+      </VStack>
+    </HStack>
+  )
+}
+
+export default WatchListAddressItem;

components/WatchlistTable/WatchlistTable.tsx

+import React from 'react';
+
+import {
+  Tag,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  TableContainer,
+  Switch,
+  Icon,
+  HStack,
+} 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';
+
+interface Props {
+  data: TWatchlist;
+}
+
+const WatchlistTable = ({ data }: Props) => {
+  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.notification }/></Td>
+                <Td>
+                  <HStack spacing="30px">
+                    <Icon as={ FaEdit } w="20px" h="20px" cursor="pointer" color="blue.500"/>
+                    <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.500"/>
+                  </HStack>
+                </Td>
+              </Tr>
+            )
+          }) }
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default WatchlistTable;

data/watchlist.ts

+export const watchlist = [
+  {
+    address: '0x4831c121879d3de0e2b181d9d55e9b0724f5d926',
+    tokenBalance: 100.1,
+    tokenBalanceUSD: 101.2,
+    tokensAmount: 2,
+    tokensUSD: 202.2,
+    totalUSD: 123123,
+    tag: 'some_tag',
+    notification: true,
+  },
+  {
+    address: '0x8c461F78760988c4135e363a87dd736f8b671ff0',
+    tokensAmount: 2,
+    tokensUSD: 2202.2,
+    totalUSD: 3000.5,
+    tag: 'some_other_tag',
+    notification: false,
+  },
+  {
+    address: '0x8c461F78760988c4135e363a87dd736f8b671ff0',
+    tokenBalance: 200.2,
+    tokenBalanceUSD: 202.4,
+    totalUSD: 3000.5,
+    tag: 'some_other_tag',
+    notification: false,
+  },
+];
+
+export type TWatchlist = Array<TWatchlistItem>
+
+export type TWatchlistItem = {
+  address: string;
+  tokenBalance?: number;
+  tokenBalanceUSD?: number;
+  tokensAmount?: number;
+  tokensUSD?: number;
+  totalUSD?: number;
+  tag: string;
+  notification?: boolean;
+}

lib/html-entities.ts

+// https://unicode-table.com
+export const asymp = String.fromCharCode(8776); // приблизительно
+export const hellip = String.fromCharCode(8230); // многоточие
+export const nbsp = String.fromCharCode(160); // неразрывный пробел
+export const thinsp = String.fromCharCode(8201); // короткий пробел
+export const space = String.fromCharCode(32); // обычный пробел
+export const nbdash = String.fromCharCode(8209); // неразрывное тире
+export const mdash = String.fromCharCode(8212); // длинное тире
+export const ndash = String.fromCharCode(8211); // среднее тире
+export const laquo = String.fromCharCode(171); // кавычки-ёлочки (левые)
+export const raquo = String.fromCharCode(187); // кавычки-ёлочки (правые)
+export const middot = String.fromCharCode(183); // точка по центру строки (в вертикальном смысле)
+export const blackCircle = String.fromCharCode(9679); // жирная точка по центру строки (в вертикальном смысле)
+export const blackRightwardsArrowhead = String.fromCharCode(10148); // ➤
+export const degree = String.fromCharCode(176); // градус °
+export const times = String.fromCharCode(215); // мультипликатор ×
+export const disk = String.fromCharCode(8226); // диск •
+export const minus = String.fromCharCode(8722); // минус −
+export const leftLineArrow = String.fromCharCode(8592); // стрелка ←
+export const rightLineArrow = String.fromCharCode(8594); // стрелка →

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>
   );