use watchlist_address_id instead of fetching whole watchlist

types/api/address.ts

@@ -32,6 +32,7 @@ export interface Address {
   private_tags: Array<AddressTag> | null;
   public_tags: Array<AddressTag> | null;
   token: TokenInfo | null;
+  watchlist_address_id: number | null;
   watchlist_names: Array<WatchlistName> | null;
 }
 

ui/address/AddressDetails.tsx

@@ -56,6 +56,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
     implementation_name: null,
     implementation_address: null,
     token: null,
+    watchlist_address_id: null,
     watchlist_names: null,
     creation_tx_hash: null,
     block_number_balance_updated_at: null,

ui/address/details/AddressFavoriteButton.tsx

@@ -8,7 +8,7 @@ import type { UserInfo } from 'types/api/account';
 import starFilledIcon from 'icons/star_filled.svg';
 import starOutlineIcon from 'icons/star_outline.svg';
 import { resourceKey } from 'lib/api/resources';
-import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import { getResourceKey } from 'lib/api/useApiQuery';
 import useLoginUrl from 'lib/hooks/useLoginUrl';
 import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
 import WatchlistAddModal from 'ui/watchlist/AddressModal/AddressModal';
@@ -17,10 +17,10 @@ import DeleteAddressModal from 'ui/watchlist/DeleteAddressModal';
 interface Props {
   className?: string;
   hash: string;
-  isAdded: boolean;
+  watchListId: number | null;
 }
 
-const AddressFavoriteButton = ({ className, hash, isAdded }: Props) => {
+const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
   const addModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
   const queryClient = useQueryClient();
@@ -30,15 +30,13 @@ const AddressFavoriteButton = ({ className, hash, isAdded }: Props) => {
   const isAuth = Boolean(profileData);
   const loginUrl = useLoginUrl();
 
-  const watchListQuery = useApiQuery('watchlist', { queryOptions: { enabled: isAdded } });
-
   const handleClick = React.useCallback(() => {
     if (!isAuth) {
       window.location.assign(loginUrl);
       return;
     }
-    isAdded ? deleteModalProps.onOpen() : addModalProps.onOpen();
-  }, [ addModalProps, deleteModalProps, isAdded, isAuth, loginUrl ]);
+    watchListId ? deleteModalProps.onOpen() : addModalProps.onOpen();
+  }, [ addModalProps, deleteModalProps, watchListId, isAuth, loginUrl ]);
 
   const handleAddOrDeleteSuccess = React.useCallback(async() => {
     const queryKey = getResourceKey('address', { pathParams: { hash: router.query.hash?.toString() } });
@@ -57,18 +55,15 @@ const AddressFavoriteButton = ({ className, hash, isAdded }: Props) => {
   const formData = React.useMemo(() => {
     return {
       address_hash: hash,
-      // FIXME temporary solution
-      // there is no endpoint in api what can return watchlist address info by its hash
-      // so we look up in the whole watchlist and hope we can find a necessary item
-      id: watchListQuery.data?.find((address) => address.address?.hash === hash)?.id || '',
+      id: String(watchListId),
     };
-  }, [ hash, watchListQuery.data ]);
+  }, [ hash, watchListId ]);
 
   return (
     <>
-      <Tooltip label={ `${ isAdded ? 'Remove address from Watch list' : 'Add address to Watch list' }` }>
+      <Tooltip label={ `${ watchListId ? 'Remove address from Watch list' : 'Add address to Watch list' }` }>
         <IconButton
-          isActive={ isAdded }
+          isActive={ Boolean(watchListId) }
           className={ className }
           aria-label="edit"
           variant="outline"
@@ -76,7 +71,7 @@ const AddressFavoriteButton = ({ className, hash, isAdded }: Props) => {
           pl="6px"
           pr="6px"
           onClick={ handleClick }
-          icon={ <Icon as={ isAdded ? starFilledIcon : starOutlineIcon } boxSize={ 5 }/> }
+          icon={ <Icon as={ watchListId ? starFilledIcon : starOutlineIcon } boxSize={ 5 }/> }
           onFocusCapture={ usePreventFocusAfterModalClosing() }
         />
       </Tooltip>

ui/shared/AddressHeadingInfo.tsx

 import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
-import type { AddressParam } from 'types/api/addressParams';
+import type { Address } from 'types/api/address';
 import type { TokenInfo } from 'types/api/token';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -13,7 +13,7 @@ import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 interface Props {
-  address: Pick<AddressParam, 'hash' | 'is_contract' | 'implementation_name' | 'watchlist_names'>;
+  address: Pick<Address, 'hash' | 'is_contract' | 'implementation_name' | 'watchlist_names' | 'watchlist_address_id'>;
   token?: TokenInfo | null;
   isLinkDisabled?: boolean;
 }
@@ -36,7 +36,7 @@ const AddressHeadingInfo = ({ address, token, isLinkDisabled }: Props) => {
       <CopyToClipboard text={ address.hash }/>
       { address.is_contract && token && <AddressAddToMetaMask ml={ 2 } token={ token }/> }
       { !address.is_contract && (
-        <AddressFavoriteButton hash={ address.hash } isAdded={ Boolean(address.watchlist_names?.length) } ml={ 3 }/>
+        <AddressFavoriteButton hash={ address.hash } watchListId={ address.watchlist_address_id } ml={ 3 }/>
       ) }
       <AddressQrCode hash={ address.hash } ml={ 2 }/>
     </Flex>