Added feature to like or dislike NFTs & check if NFT is liked or not

src/components/LikeAndShare.jsx

@@ -1,22 +1,47 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { ShareNft } from '@/components/ShareNft/ShareNft'
 import { Icon } from '@/elements/Icon'
 import CountUp from '@/components/CountUp/CountUp'
+import { isNftLiked, likeOrDislikeNft } from '@/utils/like-nft'
+import { useWeb3React } from '@web3-react/core'
 
 const LikeAndShare = ({ nft }) => {
   const [showSharePopup, setShowSharePopup] = useState(false)
   const [likeCount, setLikeCount] = useState(1024)
   const [isLike, setIsLike] = useState(false)
 
-  const onHandleLike = () => {
+  const { library, account } = useWeb3React()
+
+  useEffect(() => {
+    (async function () {
+      const liked = await isNftLiked({ account, tokenId: nft?.tokenId })
+      setIsLike(liked)
+    })()
+  }, [nft, account])
+
+  const onHandleLike = async () => {
     setLikeCount(isLike ? likeCount - 1 : likeCount + 1)
-    setIsLike(!isLike)
+
+    const message = 'Like/UnLike Neptune Mutual NFT'
+    likeOrDislikeNft({
+      account,
+      library,
+      tokenId: nft.tokenId,
+      signingMessage: message,
+      onSuccess: () => {
+        setIsLike(prev => !prev)
+      }
+    })
   }
 
   return (
     <div className='like and share'>
-      <button className={`like btn ${isLike ? 'liked' : ''}`} onClick={onHandleLike}>
+      <button
+        className={`like btn ${isLike ? 'liked' : ''}`}
+        disabled={!account}
+        onClick={onHandleLike}
+      >
         <Icon variant='heart' size='lg' />
         <CountUp number={likeCount} localized />
       </button>

src/components/LikeAndShare.scss

@@ -7,7 +7,7 @@
   align-items: center;
   color: colors.$gray-700;
 
-  & > button {
+  &>button {
     display: flex;
     align-items: center;
     gap: 4px;
@@ -23,9 +23,13 @@
         }
       }
     }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 }
 
 .dark .like.and.share {
   color: colors.$gray-200;
-}
+}

src/utils/like-nft.js

@@ -0,0 +1,71 @@
+import { AppConstants } from '@/constants/AppConstants'
+
+const { signMessage } = require('@/utils/sign-message')
+
+const getNftLikeDislikeUrl = (tokenId, account) => {
+  return AppConstants.nftApiBaseURL + '/log/like/:tokenId/:account'
+    .replace(':tokenId', tokenId)
+    .replace(':account', account)
+}
+
+const getIsNftLikedUrl = (tokenId, account) => {
+  return AppConstants.nftApiBaseURL + '/insights/like/:tokenId/:account'
+    .replace(':tokenId', tokenId)
+    .replace(':account', account)
+}
+
+const likeOrDislikeNft = async ({
+  account,
+  tokenId,
+  library,
+  signingMessage,
+  onSuccess = () => {},
+  onError = e => e
+}) => {
+  if (!account) return
+
+  try {
+    const signature = await signMessage(library, signingMessage)
+
+    const url = getNftLikeDislikeUrl(tokenId, account)
+
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        signature
+      })
+    })
+
+    if (res.ok) {
+      if (onSuccess) onSuccess()
+      return
+    }
+
+    if (onError) onError()
+  } catch (e) {
+    if (onError) onError(e)
+  }
+}
+
+const isNftLiked = async ({ account, tokenId }) => {
+  if (!tokenId || !account) return false
+
+  const url = getIsNftLikedUrl(tokenId, account)
+
+  try {
+    const res = await fetch(url)
+    const json = await res.json()
+    const liked = json?.data?.[0]?.liked
+
+    return liked
+  } catch (error) {
+    console.log({ error })
+  }
+
+  return false
+}
+
+export { likeOrDislikeNft, getNftLikeDislikeUrl, isNftLiked, getIsNftLikedUrl }

src/utils/sign-message.js

@@ -0,0 +1,10 @@
+const signMessage = async (library, message) => {
+  if (!library || !library.getSigner) return ''
+
+  const signer = library.getSigner()
+  const res = await signer.signMessage(message)
+
+  return res
+}
+
+export { signMessage }