always semi rule

.eslintrc.js

@@ -178,6 +178,7 @@ module.exports = {
     'space-unary-ops': 'off',
     'template-curly-spacing': [ 'error', 'always' ],
     'wrap-iife': [ 'error', 'inside' ],
+    semi: [ 'error', 'always' ],
 
     'react/jsx-key': 'error',
     'react/jsx-no-bind': [ 'error', {

next.config.js

@@ -5,6 +5,6 @@ module.exports = withReactSvg({
   include: path.resolve(__dirname, 'icons'),
   reactStrictMode: true,
   webpack(config) {
-    return config
+    return config;
   },
-})
+});

pages/_app.tsx

@@ -23,4 +23,4 @@ function MyApp({ Component, pageProps }: AppProps) {
   );
 }
 
-export default MyApp
+export default MyApp;

pages/_document.tsx

 import React from 'react';
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { ColorModeScript } from '@chakra-ui/react';
-import theme from 'theme'
+import theme from 'theme';
 
 class MyDocument extends Document {
   render() {
@@ -23,8 +23,8 @@ class MyDocument extends Document {
           <NextScript/>
         </body>
       </Html>
-    )
+    );
   }
 }
 
-export default MyDocument
+export default MyDocument;

pages/api-keys.tsx

 import React from 'react';
 import type { NextPage } from 'next';
-import Head from 'next/head'
+import Head from 'next/head';
 
 import ApiKeys from 'ui/pages/ApiKeys';
 
@@ -11,6 +11,6 @@ const ApiKeysPage: NextPage = () => {
       <ApiKeys/>
     </>
   );
-}
+};
 
-export default ApiKeysPage
+export default ApiKeysPage;

pages/api/account/private-tags/address/[id].ts

-import type { NextApiRequest } from 'next'
+import type { NextApiRequest } from 'next';
 
 import handler from 'pages/api/utils/handler';
 
@@ -7,10 +7,10 @@ const getUrl = (req: NextApiRequest) => {
   if (req.method === 'PUT') {
     const params = { address_hash: req.query.address_hash as string, name: req.query.name as string };
     const searchParams = new URLSearchParams(params);
-    url += `?${ searchParams.toString() }`
+    url += `?${ searchParams.toString() }`;
   }
   return url;
-}
+};
 
 const addressDeleteHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);
 

pages/api/account/private-tags/transaction/[id].ts

-import type { NextApiRequest } from 'next'
+import type { NextApiRequest } from 'next';
 
 import handler from 'pages/api/utils/handler';
 
@@ -7,10 +7,10 @@ const getUrl = (req: NextApiRequest) => {
   if (req.method === 'PUT') {
     const params = { transaction_hash: req.query.transaction_hash as string, name: req.query.name as string };
     const searchParams = new URLSearchParams(params);
-    url += `?${ searchParams.toString() }`
+    url += `?${ searchParams.toString() }`;
   }
   return url;
-}
+};
 
 const transactionDeleteHandler = handler(getUrl, [ 'DELETE', 'PUT' ]);
 

pages/api/utils/fetch.ts

@@ -8,11 +8,11 @@ export default function fetch(path: string, init?: RequestInit): Promise<Respons
     accept: 'application/json',
     authorization: `Bearer ${ process.env.API_AUTHORIZATION_TOKEN }`,
     'content-type': 'application/json',
-  }
+  };
   const url = `https://${ process.env.API_HOST }${ process.env.API_BASE_PATH }${ path }`;
 
   return nodeFetch(url, {
     headers,
     ...init,
-  })
+  });
 }

pages/api/utils/handler.ts

-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import fetch from './fetch';
 
@@ -7,7 +7,7 @@ type Methods = 'GET' | 'POST' | 'PUT' | 'DELETE';
 export default function handler<TRes>(getUrl: (_req: NextApiRequest) => string, allowedMethods: Array<Methods>) {
   return async(_req: NextApiRequest, res: NextApiResponse<TRes>) => {
     if (_req.method === 'GET' && allowedMethods.includes('GET')) {
-      const response = await fetch(getUrl(_req))
+      const response = await fetch(getUrl(_req));
       const data = await response.json() as TRes;
 
       res.status(200).json(data);
@@ -15,17 +15,17 @@ export default function handler<TRes>(getUrl: (_req: NextApiRequest) => string,
       const response = await fetch(getUrl(_req), {
         method: 'POST',
         body: _req.body,
-      })
+      });
       const data = await response.json() as TRes;
 
-      res.status(200).json(data)
+      res.status(200).json(data);
     } else if (allowedMethods.includes('PUT') && _req.method === 'PUT') {
       const response = await fetch(getUrl(_req), {
         method: 'PUT',
-      })
+      });
       const data = await response.json() as TRes;
 
-      res.status(200).json(data)
+      res.status(200).json(data);
     } else if (allowedMethods.includes('DELETE') && _req.method === 'DELETE') {
       const response = await fetch(getUrl(_req), { method: 'DELETE' });
       // FIXME: add error handlers
@@ -35,8 +35,8 @@ export default function handler<TRes>(getUrl: (_req: NextApiRequest) => string,
       }
       res.status(200).end();
     } else {
-      res.setHeader('Allow', allowedMethods)
-      res.status(405).end(`Method ${ _req.method } Not Allowed`)
+      res.setHeader('Allow', allowedMethods);
+      res.status(405).end(`Method ${ _req.method } Not Allowed`);
     }
-  }
+  };
 }

pages/index.tsx

@@ -13,4 +13,4 @@ const Home: NextPage = () => {
   );
 };
 
-export default Home
+export default Home;

pages/private-tags.tsx

 import React, { useCallback, useState } from 'react';
 import type { NextPage } from 'next';
-import Head from 'next/head'
+import Head from 'next/head';
 
-import { useQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query';
 
 import PrivateTags from 'ui/pages/PrivateTags';
 
@@ -20,20 +20,20 @@ const PrivateTagsPage: NextPage = () => {
   // FIXME: request data only for active tab and only once
   // don't refetch after tab change
   useQuery([ 'address' ], async() => {
-    const response = await fetch('/api/account/private-tags/address')
+    const response = await fetch('/api/account/private-tags/address');
     if (!response.ok) {
-      throw new Error('Network response was not ok')
+      throw new Error('Network response was not ok');
     }
-    return response.json()
-  })
+    return response.json();
+  });
 
   useQuery([ 'transaction' ], async() => {
-    const response = await fetch('/api/account/private-tags/transaction')
+    const response = await fetch('/api/account/private-tags/transaction');
     if (!response.ok) {
-      throw new Error('Network response was not ok')
+      throw new Error('Network response was not ok');
     }
-    return response.json()
-  })
+    return response.json();
+  });
 
   return (
     <>
@@ -41,6 +41,6 @@ const PrivateTagsPage: NextPage = () => {
       <PrivateTags onChangeTab={ onChangeTab }/>
     </>
   );
-}
+};
 
 export default PrivateTagsPage;

pages/public-tags.tsx

 import React from 'react';
 import type { NextPage } from 'next';
-import Head from 'next/head'
+import Head from 'next/head';
 
 import PublicTags from 'ui/pages/PublicTags';
 
@@ -11,6 +11,6 @@ const PublicTagsPage: NextPage = () => {
       <PublicTags/>
     </>
   );
-}
+};
 
-export default PublicTagsPage
+export default PublicTagsPage;

pages/watchlist.tsx

 import React from 'react';
 import type { NextPage } from 'next';
-import Head from 'next/head'
+import Head from 'next/head';
 
 import WatchList from 'ui/pages/Watchlist';
 
@@ -11,6 +11,6 @@ const WatchListPage: NextPage = () => {
       <WatchList/>
     </>
   );
-}
+};
 
-export default WatchListPage
+export default WatchListPage;

theme/components/Button.ts

@@ -15,7 +15,7 @@ const variantPrimary = {
   _disabled: {
     opacity: 0.2,
   },
-}
+};
 
 const variantSecondary = {
   color: 'blue.600',
@@ -29,7 +29,7 @@ const variantSecondary = {
   _disabled: {
     opacity: 0.2,
   },
-}
+};
 
 const variantIcon: SystemStyleFunction = (props) => {
   return {
@@ -37,8 +37,8 @@ const variantIcon: SystemStyleFunction = (props) => {
     _hover: {
       color: mode('blue.400', 'blue.200')(props),
     },
-  }
-}
+  };
+};
 
 const variantIconBorder = {
   color: 'blue.600',
@@ -51,14 +51,14 @@ const variantIconBorder = {
   _disabled: {
     opacity: 0.2,
   },
-}
+};
 
 const variants = {
   primary: variantPrimary,
   secondary: variantSecondary,
   icon: variantIcon,
   iconBorder: variantIconBorder,
-}
+};
 
 const Button: ComponentStyleConfig = {
   baseStyle: {
@@ -91,6 +91,6 @@ const Button: ComponentStyleConfig = {
       px: 2,
     },
   },
-}
+};
 
 export default Button;

theme/components/Checkbox.ts

@@ -3,12 +3,12 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
 const baseStyleLabel: SystemStyleObject = {
   _disabled: { opacity: 0.2 },
-}
+};
 
 const Checkbox: ComponentStyleConfig = {
   baseStyle: {
     label: baseStyleLabel,
   },
-}
+};
 
 export default Checkbox;

theme/components/Form.ts

@@ -8,7 +8,7 @@ import getDefaultFormColors from '../utils/getDefaultFormColors';
 const activeInputStyles = {
   paddingTop: '30px',
   paddingBottom: '10px',
-}
+};
 
 const getActiveLabelStyles = (theme: Dict, fc: string) => ({
   color: getColor(theme, fc),
@@ -78,13 +78,13 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
       marginStart: 0,
       color: mode('gray.500', 'whiteAlpha.400')(props),
     },
-  }
-}
+  };
+};
 
 const Form: ComponentStyleConfig = {
   variants: {
     floating: variantFloating,
   },
-}
+};
 
 export default Form;

theme/components/Heading.ts

@@ -3,7 +3,7 @@ import type { ComponentStyleConfig } from '@chakra-ui/theme';
 const baseStyle = {
   fontWeight: '500',
   letterSpacing: '-0.5px',
-}
+};
 
 // WIP
 // designer promised to sync theme and page mock-ups
@@ -13,11 +13,11 @@ const sizes = {
     fontSize: '32px',
     lineHeight: '40px',
   },
-}
+};
 
 const Heading: ComponentStyleConfig = {
   sizes,
   baseStyle,
-}
+};
 
 export default Heading;

theme/components/Input.ts

@@ -24,7 +24,7 @@ const sizes: Record<string, SystemStyleObject> = {
     h: '80px',
     borderRadius: 'base',
   },
-}
+};
 
 const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
   const transitionProps = getDefaultTransitionProps();
@@ -37,8 +37,8 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
       bg: mode('gray.100', 'whiteAlpha.200')(props),
       ...transitionProps,
     },
-  }
-}
+  };
+};
 
 const Input: ComponentStyleConfig = {
   sizes: {
@@ -57,11 +57,11 @@ const Input: ComponentStyleConfig = {
   variants: {
     outline: variantOutline,
   },
-}
+};
 
 InputComponent.defaultProps = {
   ...InputComponent.defaultProps,
   placeholder: ' ',
-}
+};
 
 export default Input;

theme/components/Link.ts

@@ -5,7 +5,7 @@ import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 
 const baseStyle: SystemStyleInterpolation = {
   ...getDefaultTransitionProps(),
-}
+};
 
 const variantPrimary: SystemStyleFunction = (props) => {
   return {
@@ -13,8 +13,8 @@ const variantPrimary: SystemStyleFunction = (props) => {
     _hover: {
       color: mode('blue.400', 'blue.200')(props),
     },
-  }
-}
+  };
+};
 
 const variantSecondary: SystemStyleFunction = (props) => {
   return {
@@ -22,22 +22,22 @@ const variantSecondary: SystemStyleFunction = (props) => {
     _hover: {
       color: mode('gray.600', 'gray.400')(props),
     },
-  }
-}
+  };
+};
 
 const variants = {
   primary: variantPrimary,
   secondary: variantSecondary,
-}
+};
 
 const defaultProps = {
   variant: 'primary',
-}
+};
 
 const Link: ComponentStyleConfig = {
   variants,
   defaultProps,
   baseStyle,
-}
+};
 
 export default Link;

theme/components/Modal.ts

-import { modalAnatomy as parts } from '@chakra-ui/anatomy'
-import type { PartsStyleFunction, SystemStyleFunction } from '@chakra-ui/theme-tools'
-import { mode } from '@chakra-ui/theme-tools'
+import { modalAnatomy as parts } from '@chakra-ui/anatomy';
+import type { PartsStyleFunction, SystemStyleFunction } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
 import type { ComponentMultiStyleConfig } from '@chakra-ui/theme';
 
 const baseStyleDialog: SystemStyleFunction = (props) => {
@@ -8,25 +8,25 @@ const baseStyleDialog: SystemStyleFunction = (props) => {
     padding: 8,
     borderRadius: 'lg',
     bg: mode('white', 'gray.800')(props),
-  }
-}
+  };
+};
 
 const baseStyleHeader = {
   padding: 0,
   marginBottom: 8,
   fontSize: '2xl',
   lineHeight: 10,
-}
+};
 
 const baseStyleBody = {
   padding: 0,
   marginBottom: 8,
-}
+};
 
 const baseStyleFooter = {
   padding: 0,
   justifyContent: 'flex-start',
-}
+};
 
 const baseStyleCloseButton: SystemStyleFunction = (props) => {
   return {
@@ -37,11 +37,11 @@ const baseStyleCloseButton: SystemStyleFunction = (props) => {
     color: mode('gray.700', 'gray.600')(props),
     _hover: { color: 'blue.400' },
     _active: { bg: 'none' },
-  }
-}
+  };
+};
 const baseStyleOverlay = {
   bg: 'blackAlpha.800',
-}
+};
 
 const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
   dialog: baseStyleDialog(props),
@@ -50,7 +50,7 @@ const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
   footer: baseStyleFooter,
   closeButton: baseStyleCloseButton(props),
   overlay: baseStyleOverlay,
-})
+});
 
 const sizes = {
   md: {
@@ -58,13 +58,13 @@ const sizes = {
       maxW: '760px',
     },
   },
-}
+};
 
 const Modal: ComponentMultiStyleConfig = {
   parts: parts.keys,
   sizes,
   baseStyle,
-}
+};
 
 Modal.defaultProps = { isCentered: true };
 

theme/components/Radio.ts

@@ -3,12 +3,12 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
 const baseStyleLabel: SystemStyleObject = {
   _disabled: { opacity: 0.2 },
-}
+};
 
 const Radio: ComponentStyleConfig = {
   baseStyle: {
     label: baseStyleLabel,
   },
-}
+};
 
 export default Radio;

theme/components/Table.ts

@@ -21,8 +21,8 @@ const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
       borderColor: mode('gray.200', 'whiteAlpha.200')(props),
       ...transitionProps,
     },
-  }
-}
+  };
+};
 
 const Table: ComponentMultiStyleConfig = {
   parts: [ 'th', 'td', 'table', 'thead' ],
@@ -65,6 +65,6 @@ const Table: ComponentMultiStyleConfig = {
   variants: {
     simple: variantSimple,
   },
-}
+};
 
 export default Table;

theme/components/Tabs.ts

 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import type {
   PartsStyleFunction,
-} from '@chakra-ui/theme-tools'
-import { getColor } from '@chakra-ui/theme-tools'
+} from '@chakra-ui/theme-tools';
+import { getColor } from '@chakra-ui/theme-tools';
 
-import type { tabsAnatomy as parts } from '@chakra-ui/anatomy'
+import type { tabsAnatomy as parts } from '@chakra-ui/anatomy';
 
 const variantSoftRounded: PartsStyleFunction<typeof parts> = (props) => {
-  const { colorScheme: c, theme } = props
+  const { colorScheme: c, theme } = props;
   return {
     tab: {
       borderRadius: '12px',
@@ -21,13 +21,13 @@ const variantSoftRounded: PartsStyleFunction<typeof parts> = (props) => {
         color: getColor(theme, `${ c }.400`),
       },
     },
-  }
-}
+  };
+};
 
 const Tabs: ComponentStyleConfig = {
   variants: {
     'soft-rounded': variantSoftRounded,
   },
-}
+};
 
 export default Tabs;

theme/components/Tag.ts

@@ -13,12 +13,12 @@ const variantGray: PartsStyleFunction<typeof parts> = (props) => {
       color: mode('gray.600', 'gray.50')(props),
       ...transitionProps,
     },
-  }
-}
+  };
+};
 
 const variants = {
   gray: variantGray,
-}
+};
 
 const Tag: ComponentStyleConfig = {
   baseStyle: {
@@ -30,6 +30,6 @@ const Tag: ComponentStyleConfig = {
     },
   },
   variants,
-}
+};
 
 export default Tag;

theme/components/Text.ts

@@ -10,6 +10,6 @@ const Text: ComponentStyleConfig = {
   variants: {
     secondary: variantSecondary,
   },
-}
+};
 
 export default Text;

theme/components/Textarea.ts

 import type {
   SystemStyleObject,
-} from '@chakra-ui/theme-tools'
+} from '@chakra-ui/theme-tools';
 
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
@@ -16,7 +16,7 @@ const sizes: Record<string, SystemStyleObject> = {
     h: '160px',
     borderRadius: 'base',
   },
-}
+};
 
 const Textarea: ComponentStyleConfig = {
   sizes,
@@ -27,11 +27,11 @@ const Textarea: ComponentStyleConfig = {
     size: 'md',
     variant: 'outline',
   },
-}
+};
 
 TextareaComponent.defaultProps = {
   ...TextareaComponent.defaultProps,
   placeholder: ' ',
-}
+};
 
 export default Textarea;

theme/components/Tooltip.ts

@@ -5,8 +5,8 @@ const Tooltip: ComponentStyleConfig = {
   baseStyle: {
     maxWidth: 'unset',
   },
-}
+};
 
-TooltipComponent.defaultProps = { ...TooltipComponent.defaultProps, hasArrow: true }
+TooltipComponent.defaultProps = { ...TooltipComponent.defaultProps, hasArrow: true };
 
 export default Tooltip;

theme/components/index.ts

@@ -28,6 +28,6 @@ const components = {
   Text,
   Textarea,
   Tooltip,
-}
+};
 
 export default components;

theme/config.ts

@@ -4,6 +4,6 @@ const config: ThemeConfig = {
   initialColorMode: 'system',
   useSystemColorMode: false,
   disableTransitionOnChange: false,
-}
+};
 
 export default config;

theme/foundations/borders.ts

@@ -7,6 +7,6 @@ const borders = {
     lg: '24px',
     full: '9999px',
   },
-}
+};
 
 export default borders;

theme/foundations/colors.ts

@@ -46,6 +46,6 @@ const colors = {
     '800': 'RGBA(16, 17, 18, 0.80)',
     '900': 'RGBA(16, 17, 18, 0.92)',
   },
-}
+};
 
 export default colors;

theme/foundations/typography.ts

@@ -21,6 +21,6 @@ const typography = {
       fontFamily: 'heading',
     },
   },
-}
+};
 
 export default typography;

theme/global.ts

@@ -7,6 +7,6 @@ const global = (props: StyleFunctionProps) => ({
     bg: mode('white', 'black')(props),
     ...getDefaultTransitionProps(),
   },
-})
+});
 
 export default global;

theme/index.ts

@@ -16,6 +16,6 @@ const overrides = {
   styles: {
     global,
   },
-}
+};
 
 export default extendTheme(overrides);

theme/utils/getDefaultFormColors.ts

@@ -2,10 +2,10 @@ import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
 import { mode } from '@chakra-ui/theme-tools';
 
 export default function getDefaultFormColors(props: StyleFunctionProps) {
-  const { focusBorderColor: fc, errorBorderColor: ec, filledBorderColor: flc } = props
+  const { focusBorderColor: fc, errorBorderColor: ec, filledBorderColor: flc } = props;
   return {
     focusColor: fc || mode('brand.700', 'brand.300')(props),
     errorColor: ec || mode('red.400', 'red.300')(props),
     filledColor: flc || mode('gray.300', 'gray.600')(props),
-  }
+  };
 }

theme/utils/getDefaultTransitionProps.ts

@@ -3,5 +3,5 @@ export default function getDefaultTransitionProps() {
     transitionProperty: 'background-color, color, border-color',
     transitionDuration: 'normal',
     transitionTimingFunction: 'ease',
-  }
+  };
 }

theme/utils/getOutlinedFieldStyles.ts

@@ -4,7 +4,7 @@ import getDefaultFormColors from './getDefaultFormColors';
 import getDefaultTransitionProps from './getDefaultTransitionProps';
 
 export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
-  const { theme } = props
+  const { theme } = props;
   const { focusColor: fc, errorColor: ec, filledColor: flc } = getDefaultFormColors(props);
   const transitionProps = getDefaultTransitionProps();
 
@@ -39,5 +39,5 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
     ':-webkit-autofill': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:hover': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:focus': { transition: 'background-color 5000s ease-in-out 0s' },
-  }
+  };
 }

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -44,7 +44,7 @@ const ApiKeyForm: React.FC<Props> = ({ data }) => {
         />
         <FormLabel>Auto-generated API key token</FormLabel>
       </FormControl>
-    )
+    );
   }, []);
 
   const renderNameInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'name'>}) => {
@@ -57,7 +57,7 @@ const ApiKeyForm: React.FC<Props> = ({ data }) => {
         />
         <FormLabel>Application name for API key (e.g Web3 project)</FormLabel>
       </FormControl>
-    )
+    );
   }, [ errors ]);
 
   return (
@@ -92,7 +92,7 @@ const ApiKeyForm: React.FC<Props> = ({ data }) => {
         </Button>
       </Box>
     </>
-  )
-}
+  );
+};
 
 export default ApiKeyForm;

ui/apiKey/ApiKeyModal/ApiKeyModal.tsx

@@ -13,10 +13,10 @@ type Props = {
 
 const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const title = data ? 'Edit API key' : 'New API key';
-  const text = 'Add an application name to identify your API key. Click the button below to auto-generate the associated key.'
+  const text = 'Add an application name to identify your API key. Click the button below to auto-generate the associated key.';
 
   const renderForm = useCallback(() => {
-    return <ApiKeyForm data={ data }/>
+    return <ApiKeyForm data={ data }/>;
   }, [ data ]);
   return (
     <FormModal<TApiKeyItem>
@@ -27,7 +27,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
       data={ data }
       renderForm={ renderForm }
     />
-  )
-}
+  );
+};
 
 export default AddressModal;

ui/apiKey/ApiKeyTable/ApiKeyTable.tsx

@@ -7,7 +7,7 @@ import {
   Tr,
   Th,
   TableContainer,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 
 import type { TApiKey, TApiKeyItem } from 'data/apiKey';
 

ui/apiKey/ApiKeyTable/ApiKeyTableItem.tsx

@@ -5,7 +5,7 @@ import {
   Td,
   HStack,
   Text,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 
 import EditButton from 'ui/shared/EditButton';
 import DeleteButton from 'ui/shared/DeleteButton';
@@ -45,7 +45,7 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
       </Td>
     </Tr>
-  )
+  );
 };
 
 export default WatchlistTableItem;

ui/apiKey/DeleteApiKeyModal.tsx

 import React, { useCallback } from 'react';
 import { Text } from '@chakra-ui/react';
-import DeleteModal from 'ui/shared/DeleteModal'
+import DeleteModal from 'ui/shared/DeleteModal';
 
 type Props = {
   isOpen: boolean;
@@ -17,7 +17,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, name }) => {
   const renderText = useCallback(() => {
     return (
       <Text display="flex">API key for<Text fontWeight="600" whiteSpace="pre">{ ` "${ name || 'name' }" ` }</Text>will be deleted</Text>
-    )
+    );
   }, [ name ]);
   return (
     <DeleteModal
@@ -27,7 +27,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, name }) => {
       title="Remove API key"
       renderContent={ renderText }
     />
-  )
-}
+  );
+};
 
 export default DeleteAddressModal;

ui/header/ColorModeToggler.tsx

 import type { UseCheckboxProps } from '@chakra-ui/checkbox';
-import { useCheckbox } from '@chakra-ui/checkbox'
+import { useCheckbox } from '@chakra-ui/checkbox';
 import type {
   SystemStyleObject,
   ThemingProps,
@@ -9,10 +9,10 @@ import {
   chakra,
   forwardRef,
   omitThemingProps,
-} from '@chakra-ui/system'
-import { dataAttr, __DEV__ } from '@chakra-ui/utils'
-import * as React from 'react'
-import { SunIcon } from '@chakra-ui/icons'
+} from '@chakra-ui/system';
+import { dataAttr, __DEV__ } from '@chakra-ui/utils';
+import * as React from 'react';
+import { SunIcon } from '@chakra-ui/icons';
 import { useColorMode, useColorModeValue, Icon } from '@chakra-ui/react';
 import getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
 import moonIcon from '../../icons/moon.svg';
@@ -36,22 +36,22 @@ export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((prop
     getRootProps,
   } = useCheckbox({ ...ownProps, isChecked: colorMode === 'light' });
 
-  const trackBg = useColorModeValue('blackAlpha.100', 'whiteAlpha.200')
-  const thumbBg = useColorModeValue('white', 'black')
+  const trackBg = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
+  const thumbBg = useColorModeValue('white', 'black');
   const transitionProps = getDefaultTransitionProps();
 
   const trackStyles: SystemStyleObject = React.useMemo(() => ({
     bg: trackBg,
     ...transitionProps,
     transitionDuration: '500ms',
-  }), [ trackBg, transitionProps ])
+  }), [ trackBg, transitionProps ]);
 
   const thumbStyles: SystemStyleObject = React.useMemo(() => ({
     bg: thumbBg,
     ...transitionProps,
     transitionProperty: 'background-color, transform',
     transitionDuration: '500ms',
-  }), [ thumbBg, transitionProps ])
+  }), [ thumbBg, transitionProps ]);
 
   return (
     <chakra.label
@@ -85,9 +85,9 @@ export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((prop
         />
       </chakra.div>
     </chakra.label>
-  )
-})
+  );
+});
 
 if (__DEV__) {
-  ColorModeToggler.displayName = 'ColorModeToggler'
+  ColorModeToggler.displayName = 'ColorModeToggler';
 }

ui/header/Header.tsx

 import React from 'react';
 import { HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center, useColorModeValue } from '@chakra-ui/react';
-import { SearchIcon } from '@chakra-ui/icons'
+import { SearchIcon } from '@chakra-ui/icons';
 import Identicon from 'react-identicons';
 import { ColorModeToggler } from './ColorModeToggler';
 
@@ -30,7 +30,7 @@ const Header = () => {
         <Identicon className={ styles.identicon } string="randomness" size={ 96 }/>
       </Center>
     </HStack>
-  )
-}
+  );
+};
 
 export default Header;

ui/navigation/AccountNavLink.tsx

@@ -35,7 +35,7 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
         </HStack>
       </Link>
     </NextLink>
-  )
-}
+  );
+};
 
 export default AccountNavLink;

ui/navigation/AccountNavigation.tsx

 import React from 'react';
 import { Box, VStack } from '@chakra-ui/react';
 import AccountNavLink from './AccountNavLink';
-import WatchlistIcon from 'icons/watchlist.svg'
-import PrivateTagIcon from 'icons/privattags.svg'
-import PublicTagIcon from 'icons/publictags.svg'
+import WatchlistIcon from 'icons/watchlist.svg';
+import PrivateTagIcon from 'icons/privattags.svg';
+import PublicTagIcon from 'icons/publictags.svg';
 import ApiKeysIcon from 'icons/API.svg';
 import ABIIcon from 'icons/ABI.svg';
 
@@ -13,7 +13,7 @@ const navItems = [
   { 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 AccountNavigation = () => {
   return (
@@ -22,7 +22,7 @@ const AccountNavigation = () => {
         { navItems.map((item) => <AccountNavLink key={ item.text } { ...item }/>) }
       </VStack>
     </Box>
-  )
-}
+  );
+};
 
 export default AccountNavigation;

ui/navigation/MainNavLink.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link, Icon, Text, HStack } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
-import { ChevronRightIcon } from '@chakra-ui/icons'
+import { ChevronRightIcon } from '@chakra-ui/icons';
 import useColors from './useColors';
 
 interface Props {
@@ -39,7 +39,7 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
         </HStack>
       </Link>
     </NextLink>
-  )
-}
+  );
+};
 
 export default MainNavLink;

ui/navigation/MainNavigation.tsx

 import React from 'react';
 import { Box, VStack } from '@chakra-ui/react';
 import MainNavLink from './MainNavLink';
-import BlocksIcon from 'icons/block.svg'
-import TransactionsIcon from 'icons/transactions.svg'
-import TokensIcon from 'icons/token.svg'
+import BlocksIcon from 'icons/block.svg';
+import TransactionsIcon from 'icons/transactions.svg';
+import TokensIcon from 'icons/token.svg';
 import AppsIcon from 'icons/apps.svg';
 import BlockscoutIcon from 'icons/blockscout.svg';
 
@@ -13,7 +13,7 @@ const navItems = [
   { text: 'Tokens', pathname: '/tokens', icon: TokensIcon },
   { text: 'Apps', pathname: '/apps', icon: AppsIcon },
   { text: 'Blockscout', pathname: '/blockscout', icon: BlockscoutIcon },
-]
+];
 
 const MainNavigation = () => {
   return (
@@ -22,7 +22,7 @@ const MainNavigation = () => {
         { navItems.map((item) => <MainNavLink key={ item.text } { ...item }/>) }
       </VStack>
     </Box>
-  )
-}
+  );
+};
 
 export default MainNavigation;

ui/navigation/NavFooter.tsx

@@ -13,7 +13,7 @@ const SOCIAL_LINKS = [
   { link: '#tw', icon: twIcon },
   { link: '#tg', icon: tgIcon },
   { link: '#stats', icon: statsIcon },
-]
+];
 
 const NavFooter = () => {
   return (
@@ -35,7 +35,7 @@ const NavFooter = () => {
             <Link href={ sl.link } key={ sl.link } variant="secondary">
               <Icon as={ sl.icon } boxSize={ 5 }/>
             </Link>
-          )
+          );
         }) }
       </HStack>
       <Text>
@@ -43,7 +43,7 @@ const NavFooter = () => {
       </Text>
       <Text>Version: <Link color="blue.500">v4.2.1-beta</Link></Text>
     </VStack>
-  )
-}
+  );
+};
 
 export default NavFooter;

ui/navigation/Navigation.tsx

@@ -3,7 +3,7 @@ import { VStack, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
 
 import AccountNavigation from './AccountNavigation';
 import MainNavigation from './MainNavigation';
-import NavFooter from './NavFooter'
+import NavFooter from './NavFooter';
 
 import logoIcon from 'icons/logo.svg';
 import networksIcon from 'icons/networks.svg';
@@ -42,7 +42,7 @@ const Navigation = () => {
       <AccountNavigation/>
       <NavFooter/>
     </VStack>
-  )
-}
+  );
+};
 
 export default Navigation;

ui/navigation/useColors.ts

@@ -11,5 +11,5 @@ export default function useColors() {
       'default': 'transparent',
       active: useColorModeValue('blue.50', 'whiteAlpha.200'),
     },
-  }
+  };
 }

ui/pages/ApiKeys.tsx

@@ -25,7 +25,7 @@ const ApiKeys: React.FC = () => {
   const onEditClick = useCallback((data: TApiKeyItem) => {
     setApiKeyModalData(data);
     apiKeyModalProps.onOpen();
-  }, [ apiKeyModalProps ])
+  }, [ apiKeyModalProps ]);
 
   const onApiKeyModalClose = useCallback(() => {
     setApiKeyModalData(undefined);
@@ -35,14 +35,14 @@ const ApiKeys: React.FC = () => {
   const onDeleteClick = useCallback((data: TApiKeyItem) => {
     setDeleteModalData(data.name);
     deleteModalProps.onOpen();
-  }, [ deleteModalProps ])
+  }, [ deleteModalProps ]);
 
   const onDeleteModalClose = useCallback(() => {
     setDeleteModalData(undefined);
     deleteModalProps.onClose();
   }, [ deleteModalProps ]);
 
-  const canAdd = apiKey.length < DATA_LIMIT
+  const canAdd = apiKey.length < DATA_LIMIT;
 
   return (
     <Page>
@@ -82,4 +82,4 @@ const ApiKeys: React.FC = () => {
   );
 };
 
-export default ApiKeys
+export default ApiKeys;

ui/pages/PrivateTags.tsx

 import React, { useCallback } from 'react';
-import { useQueryClient } from '@tanstack/react-query'
+import { useQueryClient } from '@tanstack/react-query';
 
 import type { AddressTags, TransactionTags } from 'types/api/account';
 
@@ -28,7 +28,7 @@ const PrivateTags = ({ onChangeTab: onChangeTabProps }: Props) => {
 
   const onTabChange = useCallback((index: number) => {
     onChangeTabProps(index);
-  }, [ onChangeTabProps ])
+  }, [ onChangeTabProps ]);
 
   return (
     <Page>
@@ -53,4 +53,4 @@ const PrivateTags = ({ onChangeTab: onChangeTabProps }: Props) => {
   );
 };
 
-export default PrivateTags
+export default PrivateTags;

ui/pages/PublicTags.tsx

@@ -26,7 +26,7 @@ const PublicTags: React.FC = () => {
   const [ screen, setScreen ] = useState<TScreen>('data');
   const [ formData, setFormData ] = useState<TPublicTagItem>();
 
-  const toast = useToast()
+  const toast = useToast();
 
   const showToast = useCallback((action: TToastAction) => {
     toast({
@@ -67,10 +67,10 @@ const PublicTags: React.FC = () => {
   let header;
 
   if (screen === 'data') {
-    content = <PublicTagsData changeToFormScreen={ changeToFormScreen } onTagDelete={ onTagDelete }/>
-    header = 'Public tags'
+    content = <PublicTagsData changeToFormScreen={ changeToFormScreen } onTagDelete={ onTagDelete }/>;
+    header = 'Public tags';
   } else {
-    content = <PublicTagsForm changeToDataScreen={ changeToDataScreen } data={ formData }/>
+    content = <PublicTagsForm changeToDataScreen={ changeToDataScreen } data={ formData }/>;
     header = formData ? 'Request to edit a public tag/label' : 'Request a public tag/label';
   }
 

ui/pages/Watchlist.tsx

@@ -21,7 +21,7 @@ const WatchList: React.FC = () => {
   const onEditClick = useCallback((data: TWatchlistItem) => {
     setAddressModalData(data);
     addressModalProps.onOpen();
-  }, [ addressModalProps ])
+  }, [ addressModalProps ]);
 
   const onAddressModalClose = useCallback(() => {
     setAddressModalData(undefined);
@@ -31,7 +31,7 @@ const WatchList: React.FC = () => {
   const onDeleteClick = useCallback((data: TWatchlistItem) => {
     setDeleteModalData(data.address);
     deleteModalProps.onOpen();
-  }, [ deleteModalProps ])
+  }, [ deleteModalProps ]);
 
   const onDeleteModalClose = useCallback(() => {
     setDeleteModalData(undefined);
@@ -66,4 +66,4 @@ const WatchList: React.FC = () => {
   );
 };
 
-export default WatchList
+export default WatchList;

ui/privateTags/AddressModal/AddressForm.tsx

@@ -42,14 +42,14 @@ const AddressForm: React.FC<Props> = ({ data, onClose }) => {
     const requestParams = {
       name: formData?.tag,
       address_hash: formData?.address,
-    }
+    };
     if (data) {
       // edit tag
       const params = new URLSearchParams(requestParams);
-      mutationFunction = () => fetch(`/api/account/private-tags/address/${ data.id }?${ params.toString() }`, { method: 'PUT' })
+      mutationFunction = () => fetch(`/api/account/private-tags/address/${ data.id }?${ params.toString() }`, { method: 'PUT' });
     } else {
       // add tag
-      mutationFunction = () => fetch('/api/account/private-tags/address', { method: 'POST', body: JSON.stringify(requestParams) })
+      mutationFunction = () => fetch('/api/account/private-tags/address', { method: 'POST', body: JSON.stringify(requestParams) });
     }
     return mutationFunction();
   }, {
@@ -71,11 +71,11 @@ const AddressForm: React.FC<Props> = ({ data, onClose }) => {
   };
 
   const renderAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'address'>}) => {
-    return <AddressInput<Inputs, 'address'> field={ field } isInvalid={ Boolean(errors.address) }/>
+    return <AddressInput<Inputs, 'address'> field={ field } isInvalid={ Boolean(errors.address) }/>;
   }, [ errors ]);
 
   const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput field={ field } isInvalid={ Boolean(errors.tag) }/>
+    return <TagInput field={ field } isInvalid={ Boolean(errors.tag) }/>;
   }, [ errors ]);
 
   return (
@@ -113,7 +113,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose }) => {
         </Button>
       </Box>
     </>
-  )
-}
+  );
+};
 
 export default AddressForm;

ui/privateTags/AddressModal/AddressModal.tsx

@@ -13,10 +13,10 @@ type Props = {
 
 const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const title = data ? 'Edit address tag' : 'New address tag';
-  const text = 'Label any address with a private address tag (up to 35 chars) to customize your explorer experience.'
+  const text = 'Label any address with a private address tag (up to 35 chars) to customize your explorer experience.';
 
   const renderForm = useCallback(() => {
-    return <AddressForm data={ data } onClose={ onClose }/>
+    return <AddressForm data={ data } onClose={ onClose }/>;
   }, [ data, onClose ]);
   return (
     <FormModal<AddressTag>
@@ -27,7 +27,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
       data={ data }
       renderForm={ renderForm }
     />
-  )
-}
+  );
+};
 
 export default AddressModal;

ui/privateTags/AddressTagTable/AddressTagTable.tsx

@@ -7,7 +7,7 @@ import {
   Tr,
   Th,
   TableContainer,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 
 import type { AddressTags, AddressTag } from 'types/api/account';
 

ui/privateTags/AddressTagTable/AddressTagTableItem.tsx

@@ -5,7 +5,7 @@ import {
   Tr,
   Td,
   HStack,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 
 import AddressIcon from 'ui/shared/AddressIcon';
 import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
@@ -52,7 +52,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
       </Td>
     </Tr>
-  )
+  );
 };
 
 export default AddressTagTableItem;

ui/privateTags/DeletePrivateTagModal.tsx

 import React, { useCallback, useState } from 'react';
 import { Text } from '@chakra-ui/react';
-import DeleteModal from 'ui/shared/DeleteModal'
+import DeleteModal from 'ui/shared/DeleteModal';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
@@ -22,7 +22,7 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
   const queryClient = useQueryClient();
 
   const { mutate } = useMutation(() => {
-    return fetch(`/api/account/private-tags/${ type }/${ id }`, { method: 'DELETE' })
+    return fetch(`/api/account/private-tags/${ type }/${ id }`, { method: 'DELETE' });
   }, {
     onError: () => {
       // eslint-disable-next-line no-console
@@ -38,13 +38,13 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
 
   const onDelete = useCallback(() => {
     setPending(true);
-    mutate()
+    mutate();
   }, [ mutate ]);
 
   const renderText = useCallback(() => {
     return (
       <Text display="flex">Tag<Text fontWeight="600" whiteSpace="pre">{ ` "${ tag || 'tag' }" ` }</Text>will be deleted</Text>
-    )
+    );
   }, [ tag ]);
 
   return (
@@ -56,7 +56,7 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
       renderContent={ renderText }
       pending={ pending }
     />
-  )
-}
+  );
+};
 
 export default DeletePrivateTagModal;

ui/privateTags/PrivateAddressTags.tsx

@@ -21,7 +21,7 @@ const PrivateAddressTags = ({ addressTags }: Props) => {
   const onEditClick = useCallback((data: AddressTag) => {
     setAddressModalData(data);
     addressModalProps.onOpen();
-  }, [ addressModalProps ])
+  }, [ addressModalProps ]);
 
   const onAddressModalClose = useCallback(() => {
     setAddressModalData(undefined);
@@ -31,7 +31,7 @@ const PrivateAddressTags = ({ addressTags }: Props) => {
   const onDeleteClick = useCallback((data: AddressTag) => {
     setDeleteModalData(data);
     deleteModalProps.onOpen();
-  }, [ deleteModalProps ])
+  }, [ deleteModalProps ]);
 
   const onDeleteModalClose = useCallback(() => {
     setDeleteModalData(undefined);
@@ -72,4 +72,4 @@ const PrivateAddressTags = ({ addressTags }: Props) => {
   );
 };
 
-export default PrivateAddressTags
+export default PrivateAddressTags;

ui/privateTags/PrivateTransactionTags.tsx

@@ -23,7 +23,7 @@ const PrivateTransactionTags = ({ transactionTags }: Props) => {
   const onEditClick = useCallback((data: TransactionTag) => {
     setTransactionModalData(data);
     transactionModalProps.onOpen();
-  }, [ transactionModalProps ])
+  }, [ transactionModalProps ]);
 
   const onAddressModalClose = useCallback(() => {
     setTransactionModalData(undefined);
@@ -33,7 +33,7 @@ const PrivateTransactionTags = ({ transactionTags }: Props) => {
   const onDeleteClick = useCallback((data: TransactionTag) => {
     setDeleteModalData(data);
     deleteModalProps.onOpen();
-  }, [ deleteModalProps ])
+  }, [ deleteModalProps ]);
 
   const onDeleteModalClose = useCallback(() => {
     setDeleteModalData(undefined);
@@ -73,4 +73,4 @@ const PrivateTransactionTags = ({ transactionTags }: Props) => {
   );
 };
 
-export default PrivateTransactionTags
+export default PrivateTransactionTags;

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -43,14 +43,14 @@ const TransactionForm: React.FC<Props> = ({ data, onClose }) => {
     const requestParams = {
       name: formData?.tag,
       transaction_hash: formData?.transaction,
-    }
+    };
     if (data) {
       // edit tag
       const params = new URLSearchParams(requestParams);
-      mutationFunction = () => fetch(`/api/account/private-tags/transaction/${ data.id }?${ params.toString() }`, { method: 'PUT' })
+      mutationFunction = () => fetch(`/api/account/private-tags/transaction/${ data.id }?${ params.toString() }`, { method: 'PUT' });
     } else {
       // add tag
-      mutationFunction = () => fetch('/api/account/private-tags/transaction', { method: 'POST', body: JSON.stringify(requestParams) })
+      mutationFunction = () => fetch('/api/account/private-tags/transaction', { method: 'POST', body: JSON.stringify(requestParams) });
     }
     return mutationFunction();
   }, {
@@ -69,15 +69,15 @@ const TransactionForm: React.FC<Props> = ({ data, onClose }) => {
   const onSubmit: SubmitHandler<Inputs> = formData => {
     setPending(true);
     // api method for editing is not implemented now!!!
-    mutate(formData)
-  }
+    mutate(formData);
+  };
 
   const renderTransactionInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'transaction'>}) => {
-    return <TransactionInput field={ field } isInvalid={ Boolean(errors.transaction) }/>
+    return <TransactionInput field={ field } isInvalid={ Boolean(errors.transaction) }/>;
   }, [ errors ]);
 
   const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput field={ field } isInvalid={ Boolean(errors.tag) }/>
+    return <TagInput field={ field } isInvalid={ Boolean(errors.tag) }/>;
   }, [ errors ]);
 
   return (
@@ -115,7 +115,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose }) => {
         </Button>
       </Box>
     </>
-  )
-}
+  );
+};
 
 export default TransactionForm;

ui/privateTags/TransactionModal/TransactionModal.tsx

@@ -13,10 +13,10 @@ type Props = {
 
 const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const title = data ? 'Edit transaction tag' : 'New transaction tag';
-  const text = 'Label any transaction with a private transaction tag (up to 35 chars) to customize your explorer experience.'
+  const text = 'Label any transaction with a private transaction tag (up to 35 chars) to customize your explorer experience.';
 
   const renderForm = useCallback(() => {
-    return <TransactionForm data={ data } onClose={ onClose }/>
+    return <TransactionForm data={ data } onClose={ onClose }/>;
   }, [ data, onClose ]);
   return (
     <FormModal<TransactionTag>
@@ -27,7 +27,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
       data={ data }
       renderForm={ renderForm }
     />
-  )
-}
+  );
+};
 
 export default AddressModal;

ui/privateTags/TransactionTagTable/TransactionTagTable.tsx

@@ -9,7 +9,7 @@ import {
   Tr,
   Th,
   TableContainer,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 
 import TransactionTagTableItem from './TransactionTagTableItem';
 

ui/privateTags/TransactionTagTable/TransactionTagTableItem.tsx

@@ -6,7 +6,7 @@ import {
   Td,
   HStack,
   Tooltip,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 
 import EditButton from 'ui/shared/EditButton';
 import DeleteButton from 'ui/shared/DeleteButton';
@@ -49,7 +49,7 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
       </Td>
     </Tr>
-  )
+  );
 };
 
 export default AddressTagTableItem;

ui/publicTags/DeletePublicTagModal.tsx

@@ -35,7 +35,7 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, tags = [], onD
           <Text fontWeight="600" whiteSpace="pre">{ ` "${ tags[0].name }" ` }</Text>
           <Text>will be removed.</Text>
         </>
-      )
+      );
     }
     if (tags.length > 1) {
       const tagsText: Array<JSX.Element | string> = [];
@@ -51,12 +51,12 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, tags = [], onD
         if (index === tags.length - 1) {
           tagsText.push(<Text fontWeight="600" whiteSpace="pre">{ ` "${ tag.name }" ` }</Text>);
         }
-      })
+      });
       text = (
         <>
           <Text>Public tags</Text>{ tagsText }<Text>will be removed.</Text>
         </>
-      )
+      );
     }
     return (
       <>
@@ -72,7 +72,7 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, tags = [], onD
           <FormLabel>Why do you want to remove tags?</FormLabel>
         </FormControl>
       </>
-    )
+    );
   }, [ tags, reason, onFieldChange ]);
 
   return (
@@ -83,7 +83,7 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, tags = [], onD
       title="Request to remove a public tag"
       renderContent={ renderContent }
     />
-  )
-}
+  );
+};
 
 export default DeletePublicTagModal;

ui/publicTags/PublicTagTable/PublicTagTable.tsx

@@ -7,7 +7,7 @@ import {
   Tr,
   Th,
   TableContainer,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 
 import type { TPublicTagItem, TPublicTags } from 'data/publicTags';
 

ui/publicTags/PublicTagTable/PublicTagTableItem.tsx

@@ -9,7 +9,7 @@ import {
   HStack,
   VStack,
   useColorModeValue,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 
 import AddressIcon from 'ui/shared/AddressIcon';
 import AddressLinkWithTooltip from 'ui/shared/AddressLinkWithTooltip';
@@ -49,7 +49,7 @@ const PublicTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
                   { adr.addressName && <Text fontSize="sm" color={ secondaryColor } mt={ 0.5 }>{ adr.addressName }</Text> }
                 </Box>
               </HStack>
-            )
+            );
           }) }
         </VStack>
       </Td>
@@ -62,7 +62,7 @@ const PublicTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
                   { tag.name }
                 </Tag>
               </TruncatedTextTooltip>
-            )
+            );
           }) }
         </VStack>
       </Td>
@@ -76,7 +76,7 @@ const PublicTagTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
       </Td>
     </Tr>
-  )
+  );
 };
 
 export default PublicTagTableItem;

ui/publicTags/PublicTagsData.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useState } from 'react';
 import type { TPublicTagItem, TPublicTag } from 'data/publicTags';
 import { publicTags } from 'data/publicTags';
 import PublicTagTable from './PublicTagTable/PublicTagTable';
-import DeletePublicTagModal from './DeletePublicTagModal'
+import DeletePublicTagModal from './DeletePublicTagModal';
 
 type Props = {
   changeToFormScreen: (data?: TPublicTagItem) => void;
@@ -26,7 +26,7 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
 
   const onItemEditClick = useCallback((item: TPublicTagItem) => {
     changeToFormScreen(item);
-  }, [ changeToFormScreen ])
+  }, [ changeToFormScreen ]);
 
   const onItemDeleteClick = useCallback((item: TPublicTagItem) => {
     setDeleteModalData(item.tags);
@@ -58,7 +58,7 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
         onDeleteSuccess={ onTagDelete }
       />
     </>
-  )
-}
+  );
+};
 
 export default PublicTagsData;

ui/publicTags/PublicTagsForm/PublicTagFormAction.tsx

@@ -22,8 +22,8 @@ export default function PublicTagFormAction({ control, canReport }: Props) {
           </Radio>
         </Stack>
       </RadioGroup>
-    )
-  }, [ canReport ])
+    );
+  }, [ canReport ]);
 
   return (
     <Controller
@@ -31,5 +31,5 @@ export default function PublicTagFormAction({ control, canReport }: Props) {
       control={ control }
       render={ renderRadioGroup }
     />
-  )
+  );
 }

ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx

@@ -28,7 +28,7 @@ export default function PublicTagFormAction({ control, index, fieldsLength, hasE
         size="lg"
         placeholder="Smart contract / Address (0x...)"
       />
-    )
+    );
   }, [ hasError ]);
 
   return (
@@ -64,5 +64,5 @@ export default function PublicTagFormAction({ control, index, fieldsLength, hasE
           top="25px"
         />
       ) }</>
-  )
+  );
 }

ui/publicTags/PublicTagsForm/PublicTagFormComment.tsx

@@ -18,8 +18,8 @@ export default function PublicTagFormComment({ control }: Props) {
         />
         <FormLabel>Specify the reason for adding tags and color preference(s).</FormLabel>
       </FormControl>
-    )
-  }, [])
+    );
+  }, []);
 
   return (
     <Controller
@@ -27,5 +27,5 @@ export default function PublicTagFormComment({ control }: Props) {
       control={ control }
       render={ renderComment }
     />
-  )
+  );
 }

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -110,7 +110,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
               onRemoveFieldClick={ onRemoveFieldClick }
             />
           </Box>
-        )
+        );
       }) }
       <Box marginBottom={ 8 }>
         <PublicTagFormComment control={ control }/>
@@ -133,7 +133,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
         </Button>
       </HStack>
     </Box>
-  )
-}
+  );
+};
 
 export default PublicTagsForm;

ui/publicTags/PublicTagsForm/PublicTagsFormInput.tsx

@@ -21,7 +21,7 @@ export default function PublicTagsFormInput<Inputs extends FieldValues>({ label,
         />
         <FormLabel>{ label }</FormLabel>
       </FormControl>
-    )
+    );
   }, [ label, required ]);
   return (
     <Controller
@@ -29,5 +29,5 @@ export default function PublicTagsFormInput<Inputs extends FieldValues>({ label,
       control={ control }
       render={ renderInput }
     />
-  )
+  );
 }

ui/shared/AccountPageHeader.tsx

@@ -5,7 +5,7 @@ import { Heading } from '@chakra-ui/react';
 const PageHeader = ({ text }: {text: string}) => {
   return (
     <Heading as="h1" size="lg" marginBottom={ 8 }>{ text }</Heading>
-  )
-}
+  );
+};
 
 export default PageHeader;

ui/shared/AddressInput.tsx

-import React from 'react'
+import React from 'react';
 import type { ControllerRenderProps, FieldValues, Path } from 'react-hook-form';
 
 import {
@@ -33,5 +33,5 @@ export default function AddressInput<Inputs extends FieldValues, Name extends Pa
       />
       <FormLabel>{ placeholder }</FormLabel>
     </FormControl>
-  )
+  );
 }

ui/shared/AddressLinkWithTooltip.tsx

@@ -20,7 +20,7 @@ const AddressLinkWithTooltip = ({ address }: {address: string}) => {
       </Link>
       <CopyToClipboard text={ address }/>
     </HStack>
-  )
-}
+  );
+};
 
 export default React.memo(AddressLinkWithTooltip);

ui/shared/AddressWithDots.tsx

@@ -9,7 +9,7 @@
 // so i did it with js
 
 import React, { useCallback, useEffect, useRef } from 'react';
-import { Tooltip } from '@chakra-ui/react'
+import { Tooltip } from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
 import type { FontFace } from 'use-font-face-observer';
 import useFontFaceObserver from 'use-font-face-observer';
@@ -65,13 +65,13 @@ const AddressWithDots = ({ address, fontWeight }: {address: string; fontWeight:
   // that's why there are separate useEffect hooks
   useEffect(() => {
     calculateString();
-  }, [ calculateString, isFontFaceLoaded ])
+  }, [ calculateString, isFontFaceLoaded ]);
 
   useEffect(() => {
-    const resizeHandler = _debounce(calculateString, 50)
-    window.addEventListener('resize', resizeHandler)
+    const resizeHandler = _debounce(calculateString, 50);
+    window.addEventListener('resize', resizeHandler);
     return function cleanup() {
-      window.removeEventListener('resize', resizeHandler)
+      window.removeEventListener('resize', resizeHandler);
     };
   }, [ calculateString ]);
 
@@ -81,11 +81,11 @@ const AddressWithDots = ({ address, fontWeight }: {address: string; fontWeight:
   if (isTruncated) {
     return (
       <Tooltip label={ address }>{ content }</Tooltip>
-    )
+    );
   }
 
   return content;
-}
+};
 
 function getWidth(el: HTMLElement) {
   return el.getBoundingClientRect().width;

ui/shared/CopyToClipboard.tsx

@@ -27,6 +27,6 @@ const CopyToClipboard = ({ text }: {text: string}) => {
       />
     </Tooltip>
   );
-}
+};
 
 export default CopyToClipboard;

ui/shared/DeleteButton.tsx

@@ -9,7 +9,7 @@ type Props = {
 }
 
 const DeleteButton = ({ onClick }: Props) => {
-  const onFocusCapture = useCallback((e: React.SyntheticEvent) => e.stopPropagation(), [])
+  const onFocusCapture = useCallback((e: React.SyntheticEvent) => e.stopPropagation(), []);
   return (
     <Tooltip label="Delete">
       <IconButton
@@ -22,7 +22,7 @@ const DeleteButton = ({ onClick }: Props) => {
         onFocusCapture={ onFocusCapture }
       />
     </Tooltip>
-  )
-}
+  );
+};
 
 export default DeleteButton;

ui/shared/DeleteModal.tsx

@@ -49,7 +49,7 @@ const DeleteModal: React.FC<Props> = ({ isOpen, onClose, onDelete, title, render
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
-}
+  );
+};
 
 export default DeleteModal;

ui/shared/EditButton.tsx

@@ -9,7 +9,7 @@ type Props = {
 }
 
 const EditButton = ({ onClick }: Props) => {
-  const onFocusCapture = useCallback((e: React.SyntheticEvent) => e.stopPropagation(), [])
+  const onFocusCapture = useCallback((e: React.SyntheticEvent) => e.stopPropagation(), []);
   return (
     <Tooltip label="Edit">
       <IconButton
@@ -22,7 +22,7 @@ const EditButton = ({ onClick }: Props) => {
         onFocusCapture={ onFocusCapture }
       />
     </Tooltip>
-  )
-}
+  );
+};
 
 export default EditButton;

ui/shared/FormModal.tsx

@@ -36,5 +36,5 @@ export default function FormModal<TData>({ isOpen, onClose, data, title, text, r
         </ModalBody>
       </ModalContent>
     </Modal>
-  )
+  );
 }

ui/shared/Page/Page.tsx

@@ -34,4 +34,4 @@ const Page = ({ children }: Props) => {
   );
 };
 
-export default Page
+export default Page;

ui/shared/TagInput.tsx

@@ -25,7 +25,7 @@ const TagInput: React.FC<Props> = ({ field, isInvalid }) => {
       />
       <FormLabel>Private tag (max 35 characters)</FormLabel>
     </FormControl>
-  )
-}
+  );
+};
 
 export default TagInput;

ui/shared/TransactionInput.tsx

-import React from 'react'
+import React from 'react';
 import type { ControllerRenderProps, FieldValues } from 'react-hook-form';
 
 import {
@@ -24,7 +24,7 @@ const AddressInput: React.FC<Props> = ({ field, isInvalid }) => {
       />
       <FormLabel>Transaction hash (0x...)</FormLabel>
     </FormControl>
-  )
-}
+  );
+};
 
-export default AddressInput
+export default AddressInput;

ui/shared/TruncatedTextTooltip.tsx

 import React from 'react';
-import { Tooltip } from '@chakra-ui/react'
+import { Tooltip } from '@chakra-ui/react';
 import debounce from 'lodash/debounce';
 import useFontFaceObserver from 'use-font-face-observer';
 import { BODY_TYPEFACE } from 'theme/foundations/typography';
@@ -33,18 +33,18 @@ const TruncatedTextTooltip = ({ children, label }: Props) => {
   // FIXME: that should be useLayoutEffect, but it keeps complaining about SSR
   // let's keep it as it is until the first issue
   React.useEffect(() => {
-    updatedTruncateState()
+    updatedTruncateState();
   }, [ updatedTruncateState, isFontFaceLoaded ]);
 
   // we want to do recalculation when isFontFaceLoaded flag is changed
   // but we don't want to create more resize event listeners
   // that's why there are separate useEffect hooks
   React.useEffect(() => {
-    const handleResize = debounce(updatedTruncateState, 1000)
-    window.addEventListener('resize', handleResize)
+    const handleResize = debounce(updatedTruncateState, 1000);
+    window.addEventListener('resize', handleResize);
 
     return function cleanup() {
-      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('resize', handleResize);
     };
   }, [ updatedTruncateState ]);
 
@@ -52,7 +52,7 @@ const TruncatedTextTooltip = ({ children, label }: Props) => {
   // and it is not cleared how to manage case with two or more children
   const child = React.Children.only(children) as React.ReactElement & {
     ref?: React.Ref<React.ReactNode>;
-  }
+  };
   const modifiedChildren = React.cloneElement(
     child,
     { ref: childRef },

ui/watchlist/AddressModal/AddressForm.tsx

@@ -43,11 +43,11 @@ const AddressForm: React.FC<Props> = ({ data }) => {
   const onSubmit: SubmitHandler<Inputs> = data => console.log(data);
 
   const renderAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'address'>}) => {
-    return <AddressInput<Inputs, 'address'> field={ field } isInvalid={ Boolean(errors.address) }/>
+    return <AddressInput<Inputs, 'address'> field={ field } isInvalid={ Boolean(errors.address) }/>;
   }, [ errors ]);
 
   const renderTagInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'tag'>}) => {
-    return <TagInput field={ field } isInvalid={ Boolean(errors.tag) }/>
+    return <TagInput field={ field } isInvalid={ Boolean(errors.tag) }/>;
   }, [ errors ]);
 
   const renderCheckbox = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'notification'>}) => (
@@ -98,7 +98,7 @@ const AddressForm: React.FC<Props> = ({ data }) => {
                 <GridItem><Checkbox colorScheme="blue" size="lg">Incoming</Checkbox></GridItem>
                 <GridItem><Checkbox colorScheme="blue" size="lg">Outgoing</Checkbox></GridItem>
               </React.Fragment>
-            )
+            );
           }) }
         </Grid>
       </Box>
@@ -119,7 +119,7 @@ const AddressForm: React.FC<Props> = ({ data }) => {
         </Button>
       </Box>
     </>
-  )
-}
+  );
+};
 
 export default AddressForm;

ui/watchlist/AddressModal/AddressModal.tsx

@@ -13,10 +13,10 @@ type Props = {
 
 const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const title = data ? 'Edit watch list address' : 'New address to watch list';
-  const text = 'An email notification can be sent to you when an address on your watch list sends or receives any transactions.'
+  const text = 'An email notification can be sent to you when an address on your watch list sends or receives any transactions.';
 
   const renderForm = useCallback(() => {
-    return <AddressForm data={ data }/>
+    return <AddressForm data={ data }/>;
   }, [ data ]);
   return (
     <FormModal<TWatchlistItem>
@@ -27,7 +27,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
       data={ data }
       renderForm={ renderForm }
     />
-  )
-}
+  );
+};
 
 export default AddressModal;

ui/watchlist/DeleteAddressModal.tsx

 import React, { useCallback } from 'react';
 import { Text } from '@chakra-ui/react';
-import DeleteModal from 'ui/shared/DeleteModal'
+import DeleteModal from 'ui/shared/DeleteModal';
 
 type Props = {
   isOpen: boolean;
@@ -17,7 +17,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, address }) => {
   const renderText = useCallback(() => {
     return (
       <Text display="flex">Address <Text fontWeight="600" whiteSpace="pre"> { address || 'address' } </Text>   will be deleted</Text>
-    )
+    );
   }, [ address ]);
 
   return (
@@ -28,7 +28,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, address }) => {
       title="Remove address from watch list"
       renderContent={ renderText }
     />
-  )
-}
+  );
+};
 
 export default DeleteAddressModal;

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -40,7 +40,7 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
         ) }
       </VStack>
     </HStack>
-  )
-}
+  );
+};
 
 export default WatchListAddressItem;

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -6,7 +6,7 @@ import {
   Td,
   Switch,
   HStack,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 
 import EditButton from 'ui/shared/EditButton';
 import DeleteButton from 'ui/shared/DeleteButton';
@@ -49,7 +49,7 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
         </HStack>
       </Td>
     </Tr>
-  )
+  );
 };
 
 export default WatchlistTableItem;

ui/watchlist/WatchlistTable/WatchlistTable.tsx

@@ -7,7 +7,7 @@ import {
   Tr,
   Th,
   TableContainer,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 
 import type { TWatchlist, TWatchlistItem } from 'data/watchlist';