review fixes

pages/api/account/watchlist/get-with-tokens.ts

 import type { NextApiRequest, NextApiResponse } from 'next';
-import nodeFetch from 'node-fetch';
 
 import type { WatchlistAddresses } from 'types/api/account';
 import type { Tokenlist } from 'types/api/tokenlist';
@@ -19,7 +18,7 @@ const watchlistWithTokensHandler = async(_req: NextApiRequest, res: NextApiRespo
   const watchlistData = await watchlistResponse.json() as WatchlistAddresses;
 
   const data = await Promise.all(watchlistData.map(async item => {
-    const tokens = await nodeFetch(`https://blockscout.com/xdai/testnet/api?module=account&action=tokenlist&address=${ item.address_hash }`);
+    const tokens = await fetch(`?module=account&action=tokenlist&address=${ item.address_hash }`);
 
     const tokensData = await tokens.json() as Tokenlist;
     return ({ ...item, tokens_count: Array.isArray(tokensData.result) ? tokensData.result.length : 0 });

ui/pages/Watchlist.tsx

-import { Box, Button, Text, Spinner, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, Text, Skeleton, useDisclosure } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
@@ -6,6 +6,7 @@ import type { TWatchlist, TWatchlistItem } from 'types/client/account';
 
 import AccountPageHeader from 'ui/shared/AccountPageHeader';
 import Page from 'ui/shared/Page/Page';
+import SkeletonTable from 'ui/shared/SkeletonTable';
 import AddressModal from 'ui/watchlist/AddressModal/AddressModal';
 import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
 import WatchlistTable from 'ui/watchlist/WatchlistTable/WatchlistTable';
@@ -45,14 +46,19 @@ const WatchList: React.FC = () => {
       <Box h="100%">
         <AccountPageHeader text="Watch list"/>
         <Text marginBottom={ 12 }>An email notification can be sent to you when an address on your watch list sends or receives any transactions.</Text>
-        { !watchlistData && <Spinner/> }
+        { !watchlistData && (
+          <>
+            <SkeletonTable columns={ [ '70%', '30%', '160px', '108px' ] }/>
+            <Skeleton height="44px" width="156px" marginTop={ 8 }/>
+          </>
+        ) }
         { Boolean(watchlistData?.length) && (
+          <>
             <WatchlistTable
               data={ watchlistData }
               onDeleteClick={ onDeleteClick }
               onEditClick={ onEditClick }
             />
-        ) }
             <Box marginTop={ 8 }>
               <Button
                 variant="primary"
@@ -62,6 +68,8 @@ const WatchList: React.FC = () => {
                 Add address
               </Button>
             </Box>
+          </>
+        ) }
       </Box>
       <AddressModal { ...addressModalProps } onClose={ onAddressModalClose } data={ addressModalData }/>
       <DeleteAddressModal { ...deleteModalProps } onClose={ onDeleteModalClose } data={ deleteModalData }/>

ui/watchlist/AddressModal/AddressForm.tsx

@@ -63,8 +63,6 @@ const AddressForm: React.FC<Props> = ({ data, onClose }) => {
   const queryClient = useQueryClient();
 
   const { mutate } = useMutation((formData: Inputs) => {
-
-    let mutationFunction;
     const requestParams = {
       name: formData?.tag,
       address_hash: formData?.address,
@@ -75,12 +73,11 @@ const AddressForm: React.FC<Props> = ({ data, onClose }) => {
     };
     if (data) {
       // edit address
-      mutationFunction = () => fetch(`/api/account/watchlist/${ data.id }`, { method: 'PUT', body: JSON.stringify(requestParams) });
+      return fetch(`/api/account/watchlist/${ data.id }`, { method: 'PUT', body: JSON.stringify(requestParams) });
     } else {
       // add address
-      mutationFunction = () => fetch('/api/account/watchlist', { method: 'POST', body: JSON.stringify(requestParams) });
+      return fetch('/api/account/watchlist', { method: 'POST', body: JSON.stringify(requestParams) });
     }
-    return mutationFunction();
   }, {
     onError: () => {
       // eslint-disable-next-line no-console

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -25,7 +25,7 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
       <VStack spacing={ 2 } align="stretch" overflow="hidden" fontWeight={ 500 } color="gray.700">
         <AddressLinkWithTooltip address={ item.address_hash }/>
         <HStack spacing={ 0 } fontSize="sm" h={ 6 }>
-          <Image src="./xdai.png" alt="chain-logo" marginRight="10px" w="16px" h="16px"/>
+          <Image src="/xdai.png" alt="chain-logo" marginRight="10px" w="16px" h="16px"/>
           <Text color={ mainTextColor }>{ `xDAI balance:${ nbsp }` + nativeBalance }</Text>
           <Text variant="secondary">{ `${ nbsp }(${ nativeBalanceUSD })` }</Text>
         </HStack>