diff --git a/src/components/LikeAndShare.jsx b/src/components/LikeAndShare.jsx index 24869f6..65aa0cc 100644 --- a/src/components/LikeAndShare.jsx +++ b/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 (
- diff --git a/src/components/LikeAndShare.scss b/src/components/LikeAndShare.scss index 49e6103..4130291 100644 --- a/src/components/LikeAndShare.scss +++ b/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; -} +} \ No newline at end of file diff --git a/src/utils/like-nft.js b/src/utils/like-nft.js new file mode 100644 index 0000000..7b1586e --- /dev/null +++ b/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 } diff --git a/src/utils/sign-message.js b/src/utils/sign-message.js new file mode 100644 index 0000000..523140b --- /dev/null +++ b/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 }