Merge pull request #10 from tom2drum/icons

icons

additional.d.ts

+/// <reference types="next-react-svg" />
\ No newline at end of file

components/AccountNav/AccountNav.tsx

 import React from 'react';
 import { VStack, Text } from '@chakra-ui/react';
 import AccountNavLink from './AccountNavLink';
-import { FaRegStar, FaTag, FaUserTag, FaCode, FaMarsDouble } from 'react-icons/fa'
+import StarIcon from '../../icons/star.svg'
+// тут кривая иконка в макете, потом доделаем
+import PrivateTagIcon from '../../icons/privateTag.svg'
+import PublicTagIcon from '../../icons/publicTag.svg'
+import ApiKeysIcon from '../../icons/apiKeys.svg';
+import ABIIcon from '../../icons/ABI.svg';
 
 const navItems = [
-  { text: 'Watchlist', pathname: '/watchlist', icon: FaRegStar },
-  { text: 'Private tags', pathname: '/private-tags', icon: FaUserTag },
-  { text: 'Public tags', pathname: '/public-tags', icon: FaTag },
-  { text: 'API keys', pathname: '/api-keys', icon: FaMarsDouble },
-  { text: 'Custom ABI', pathname: '/custom-abi', icon: FaCode },
+  { text: 'Watchlist', pathname: '/watchlist', icon: StarIcon },
+  { text: 'Private tags', pathname: '/private-tags', icon: PrivateTagIcon },
+  { text: 'Public tags', pathname: '/public-tags', icon: PublicTagIcon },
+  { text: 'API keys', pathname: '/api-keys', icon: ApiKeysIcon },
+  { text: 'Custom ABI', pathname: '/custom-abi', icon: ABIIcon },
 ]
 
 const AccountNav = () => {

components/AccountNav/AccountNavLink.tsx

@@ -2,12 +2,11 @@ import React from 'react';
 import { Link, Icon, Text, HStack } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
-import type { IconType } from 'react-icons';
 
 interface Props {
   pathname: string;
   text: string;
-  icon: IconType;
+  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
 }
 
 const AccountNavLink = ({ text, pathname, icon }: Props) => {

components/AddressModal/AddressModal.tsx

@@ -89,7 +89,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
           </Box>
           <Text color="gray.600" fontSize="14px" marginBottom="20px">Notification methods:</Text>
           <Checkbox
-            defaultChecked={ notification }
+            isChecked={ notification }
             colorScheme="green"
             onChange={ onNotificationChange }
           >

components/CopyToClipboard/CopyToClipboard.tsx

 import React, { useCallback, useEffect } from 'react';
 
 import { Icon, useClipboard, useToast } from '@chakra-ui/react';
-import { FaCopy } from 'react-icons/fa';
+import CopyIcon from '../../icons/copy.svg';
 
 const CopyToClipboard = ({ text }: {text: string}) => {
   const { hasCopied, onCopy } = useClipboard(text);
@@ -18,7 +18,7 @@ const CopyToClipboard = ({ text }: {text: string}) => {
   }, [ toast, hasCopied ]);
 
   const copyToClipboardCallback = useCallback(() => onCopy(), [ onCopy ]);
-  return <Icon as={ FaCopy } w="15px" h="15px" color="blue.500" cursor="pointer" onClick={ copyToClipboardCallback }/>;
+  return <Icon as={ CopyIcon } w="20px" h="20px" color="blue.500" cursor="pointer" onClick={ copyToClipboardCallback }/>;
 }
 
 export default CopyToClipboard;

components/WatchlistTable/WatchListAddressItem.tsx

@@ -5,14 +5,15 @@ 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';
+import TokensIcon from '../../icons/tokens.svg';
+import WalletIcon from '../../icons/wallet.svg';
 
 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">
+        <HStack spacing="8px" alignContent="center">
           <Link href="#" color="blue.500">
             { item.address }
           </Link>
@@ -27,14 +28,14 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
         ) }
         { item.tokensAmount && (
           <HStack spacing="0">
-            <Icon as={ FaIcicles } marginRight="10px" w="16px" h="16px"/>
+            <Icon as={ TokensIcon } marginRight="10px" w="17px" 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"/>
+            <Icon as={ WalletIcon } 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>

components/WatchlistTable/WatchListTableItem.tsx

@@ -9,7 +9,8 @@ import {
   HStack,
 } from '@chakra-ui/react'
 
-import { FaEdit, FaTrash } from 'react-icons/fa';
+import EditIcon from '../../icons/edit.svg';
+import DeleteIcon from '../../icons/delete.svg';
 
 import type { TWatchlistItem } from '../../data/watchlist';
 
@@ -37,8 +38,8 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       <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" onClick={ onItemEditClick }/>
-          <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.200" onClick={ onItemDeleteClick }/>
+          <Icon as={ EditIcon } w="20px" h="20px" cursor="pointer" color="blue.500" onClick={ onItemEditClick }/>
+          <Icon as={ DeleteIcon } w="20px" h="20px" cursor="pointer" color="red.200" onClick={ onItemDeleteClick }/>
         </HStack>
       </Td>
     </Tr>

icons/ABI.svg

+<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M5.176 5.29a1.253 1.253 0 0 0-1.76.16L.29 9.2a1.247 1.247 0 0 0 0 1.6l3.125 3.75a1.25 1.25 0 1 0 1.919-1.601L2.876 10l2.459-2.949a1.25 1.25 0 0 0-.159-1.76Zm6.318-2.765a1.261 1.261 0 0 0-1.47.981l-2.5 12.5a1.247 1.247 0 0 0 1.229 1.493 1.249 1.249 0 0 0 1.223-1.005l2.5-12.5a1.246 1.246 0 0 0-.982-1.47ZM19.709 9.2l-3.125-3.75a1.249 1.249 0 1 0-1.919 1.6L17.124 10l-2.459 2.949a1.251 1.251 0 0 0 .584 2 1.248 1.248 0 0 0 1.335-.399l3.125-3.75a1.247 1.247 0 0 0 0-1.6Z"/></svg>
\ No newline at end of file

icons/apiKeys.svg

+<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.297 3.699a1.699 1.699 0 0 1 3.397 0V4.6a1 1 0 1 0 2 0v-.902a3.699 3.699 0 1 0-7.397 0v6.268a1 1 0 0 0 2 0V3.699Zm5.397 6.298a1 1 0 1 0-2 0v6.295a1.699 1.699 0 0 1-3.397 0v-.913a1 1 0 1 0-2 0v.913a3.699 3.699 0 0 0 7.397 0V9.997ZM3.69 8.297c-.93 0-1.69.758-1.69 1.699 0 .94.76 1.698 1.691 1.698h6.304a1 1 0 0 1 0 2H3.691A3.695 3.695 0 0 1 0 9.996c0-2.04 1.65-3.699 3.691-3.699h.902a1 1 0 1 1 0 2h-.902Zm6.304-2a1 1 0 1 0 0 2h6.292c.943 0 1.704.762 1.704 1.699a1.7 1.7 0 0 1-1.704 1.698h-.865a1 1 0 1 0 0 2h.865a3.701 3.701 0 0 0 3.704-3.698 3.701 3.701 0 0 0-3.704-3.699H9.995Z"/></svg>
\ No newline at end of file

icons/copy.svg

+<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.91 3H5.272C4.57 3 4 3.57 4 4.273v8.909h1.273v-8.91h7.636V3Zm1.908 2.545h-7c-.703 0-1.273.57-1.273 1.273v8.91c0 .702.57 1.272 1.273 1.272h7c.703 0 1.273-.57 1.273-1.273V6.818c0-.703-.57-1.273-1.273-1.273Zm0 10.182h-7V6.818h7v8.91Z"/></svg>
\ No newline at end of file

icons/delete.svg

+<svg width="21" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M15.645 19.375h-10A1.875 1.875 0 0 1 3.77 17.5V5.625a.625.625 0 0 1 1.25 0V17.5a.625.625 0 0 0 .625.625h10a.625.625 0 0 0 .625-.625V5.625a.625.625 0 0 1 1.25 0V17.5a1.875 1.875 0 0 1-1.875 1.875Zm2.5-15h-15a.625.625 0 0 1 0-1.25h15a.625.625 0 1 1 0 1.25Z"/><path d="M13.145 4.375a.625.625 0 0 1-.625-.625V1.875H8.77V3.75a.625.625 0 0 1-1.25 0v-2.5a.625.625 0 0 1 .625-.625h5a.625.625 0 0 1 .625.625v2.5a.625.625 0 0 1-.625.625Zm-2.5 11.875a.625.625 0 0 1-.625-.625v-8.75a.625.625 0 0 1 1.25 0v8.75a.625.625 0 0 1-.625.625ZM13.77 15a.625.625 0 0 1-.625-.625v-6.25a.625.625 0 0 1 1.25 0v6.25a.625.625 0 0 1-.625.625Zm-6.25 0a.625.625 0 0 1-.625-.625v-6.25a.625.625 0 0 1 1.25 0v6.25A.625.625 0 0 1 7.52 15Z"/></svg>
\ No newline at end of file

icons/edit.svg

+<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M19.433 3.6 16.399.569A1.926 1.926 0 0 0 15.03 0c-.518 0-1.005.202-1.37.568L.961 13.264a.779.779 0 0 0-.221.446l-.734 5.406a.78.78 0 0 0 .877.877l5.406-.734a.78.78 0 0 0 .446-.221L19.433 6.342c.366-.366.567-.853.567-1.37 0-.518-.201-1.005-.567-1.371ZM5.82 17.75l-4.131.561.56-4.131 8.997-8.997 3.571 3.57L5.82 17.75ZM18.33 5.24l-2.41 2.412-3.57-3.57 2.411-2.413a.379.379 0 0 1 .538 0l3.033 3.033a.379.379 0 0 1 0 .538Z"/></svg>
\ No newline at end of file

icons/privateTag.svg

+<svg width="21" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M8.61 20a2.262 2.262 0 0 1-1.615-.665L.677 13.017a2.265 2.265 0 0 1 0-3.23L9.133 1.33C9.893.57 11.271 0 12.316 0h5.416c1.235 0 2.28 1.045 2.28 2.28v5.416c0 1.045-.57 2.423-1.33 3.183l-8.456 8.456A2.262 2.262 0 0 1 8.61 20Zm3.706-18.575c-.665 0-1.71.428-2.185.903l-8.456 8.456a.832.832 0 0 0 0 1.188l6.318 6.318c.332.332.902.332 1.188 0l8.456-8.456c.475-.475.902-1.473.902-2.186V2.233a.852.852 0 0 0-.855-.855h-5.368v.047Z"/><path d="M14.311 8.504A2.808 2.808 0 0 1 11.508 5.7a2.808 2.808 0 0 1 2.803-2.803A2.808 2.808 0 0 1 17.114 5.7a2.808 2.808 0 0 1-2.803 2.803Zm0-4.276a1.48 1.48 0 0 0-1.473 1.473 1.48 1.48 0 0 0 1.473 1.472 1.48 1.48 0 0 0 1.473-1.472 1.48 1.48 0 0 0-1.473-1.473Z"/></svg>
\ No newline at end of file

icons/publicTag.svg

+<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 3.75h-5.732l-8.75 8.75 5.732 5.733 8.75-8.75V3.75Zm0-1.25a1.25 1.25 0 0 1 1.25 1.25v5.732c0 .332-.132.65-.366.884l-8.75 8.75a1.25 1.25 0 0 1-1.768 0l-5.732-5.732a1.25 1.25 0 0 1 0-1.768l8.75-8.75a1.25 1.25 0 0 1 .883-.366H17.5Z"/><path d="M13.75 6.875a.625.625 0 1 1 1.25 0 .625.625 0 0 1-1.25 0Zm-1.25 0a1.875 1.875 0 1 0 3.75 0 1.875 1.875 0 0 0-3.75 0ZM11.143 1.25c-.332 0-.65.132-.884.366L.937 10.937l-.053-.053a1.25 1.25 0 0 1 0-1.768l8.75-8.75A1.25 1.25 0 0 1 10.517 0h5.733a1.25 1.25 0 0 1 1.25 1.25h-6.357Z"/></svg>
\ No newline at end of file

icons/star.svg

+<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M15.713 20a.724.724 0 0 1-.354-.09L10 16.956 4.64 19.91a.728.728 0 0 1-.796-.061.788.788 0 0 1-.256-.342.827.827 0 0 1-.045-.432l1.024-6.252L.229 8.394a.802.802 0 0 1-.207-.377.829.829 0 0 1 .015-.435.795.795 0 0 1 .232-.361.741.741 0 0 1 .379-.179L6.64 6.13 9.321.442a.78.78 0 0 1 .28-.323.731.731 0 0 1 .798 0 .78.78 0 0 1 .28.323l2.68 5.688 5.993.912a.74.74 0 0 1 .379.178.8.8 0 0 1 .232.361.828.828 0 0 1-.192.813l-4.338 4.428 1.024 6.252a.83.83 0 0 1-.167.644.762.762 0 0 1-.26.208.728.728 0 0 1-.319.074h.002ZM2.383 8.38l3.523 3.598c.088.09.154.2.192.321a.829.829 0 0 1 .026.378l-.832 5.08 4.355-2.397a.73.73 0 0 1 .706 0l4.356 2.399-.833-5.082a.828.828 0 0 1 .026-.378.799.799 0 0 1 .191-.323l3.524-3.596-4.87-.74a.738.738 0 0 1-.335-.143.785.785 0 0 1-.234-.29L10 2.585 7.822 7.207a.785.785 0 0 1-.234.29.738.738 0 0 1-.336.143l-4.87.74Z"/></svg>
\ No newline at end of file

icons/tokens.svg

+<svg width="17" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.281 0a3.636 3.636 0 1 0 0 7.273 3.636 3.636 0 0 0 0-7.273ZM2.099 3.636a2.182 2.182 0 1 1 4.364 0 2.182 2.182 0 0 1-4.364 0ZM13.01 0a3.636 3.636 0 1 0 0 7.273 3.636 3.636 0 0 0 0-7.273Zm-2.183 3.636a2.182 2.182 0 1 1 4.364 0 2.182 2.182 0 0 1-4.364 0ZM.646 12.364a3.636 3.636 0 1 1 7.272 0 3.636 3.636 0 0 1-7.272 0Zm3.636-2.182a2.182 2.182 0 1 0 0 4.363 2.182 2.182 0 0 0 0-4.363Zm8.727-1.455a3.636 3.636 0 1 0 0 7.273 3.636 3.636 0 0 0 0-7.273Zm-2.181 3.637a2.182 2.182 0 1 1 4.363 0 2.182 2.182 0 0 1-4.364 0Z"/></svg>
\ No newline at end of file

icons/wallet.svg

+<svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.923 16H3.077A3.078 3.078 0 0 1 0 12.924V4.312a.615.615 0 0 1 .615-.615h12.308A3.077 3.077 0 0 1 16 6.773v6.151A3.076 3.076 0 0 1 12.923 16ZM1.23 4.927v7.997a1.845 1.845 0 0 0 1.846 1.846h9.846a1.846 1.846 0 0 0 1.846-1.846V6.773a1.845 1.845 0 0 0-1.846-1.846H1.23Z"/><path d="M14.154 4.927a.616.616 0 0 1-.615-.615V2.62a1.433 1.433 0 0 0-.48-1.15 1.194 1.194 0 0 0-1.028-.197L1.71 3.617a.615.615 0 0 0-.48.615.615.615 0 0 1-1.23 0 1.845 1.845 0 0 1 1.433-1.815L11.76.073a2.401 2.401 0 0 1 2.068.437 2.67 2.67 0 0 1 .941 2.11v1.692a.615.615 0 0 1-.615.615Zm1.231 7.382h-4.308a2.462 2.462 0 1 1 0-4.921h4.308a.615.615 0 0 1 .615.615v3.69a.615.615 0 0 1-.615.616Zm-4.308-3.691a1.231 1.231 0 0 0 0 2.46h3.692v-2.46h-3.692Z"/></svg>
\ No newline at end of file

next.config.js

-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
+const withReactSvg = require('next-react-svg')
+const path = require('path')
 
-module.exports = nextConfig
+module.exports = withReactSvg({
+  include: path.resolve(__dirname, 'icons'),
+  reactStrictMode: true,
+  webpack(config, options) {
+    return config
+  }
+})
\ No newline at end of file

package.json

@@ -16,9 +16,9 @@
     "@emotion/styled": "^11",
     "framer-motion": "^6",
     "next": "12.1.6",
+    "next-react-svg": "1.1.3",
     "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-icons": "^4.4.0"
+    "react-dom": "18.1.0"
   },
   "devDependencies": {
     "@types/node": "17.0.36",

tsconfig.json

@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"],
   "exclude": ["node_modules"]
 }