From 9eebe7eda42c84498e9c88859acab574a59d37a3 Mon Sep 17 00:00:00 2001
From: Harpreet Singh <szinghh@gmail.com>
Date: Wed, 27 Mar 2024 18:43:54 +0530
Subject: [PATCH] refactor: client side with useffect

---
 apps/www/registry/default/ui/nft-card.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/www/registry/default/ui/nft-card.tsx b/apps/www/registry/default/ui/nft-card.tsx
index 0440e1d..0d74536 100644
--- a/apps/www/registry/default/ui/nft-card.tsx
+++ b/apps/www/registry/default/ui/nft-card.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react"
 import {
   fetchDigitalAsset,
   mplTokenMetadata,
@@ -42,9 +43,19 @@ const NftCard = async ({
   mintAddress,
   ...props
 }: NftCardProps) => {
-  const umi = createUmi(process.env.NEXT_PUBLIC_QUICKNODE!).use(mplTokenMetadata())
+  const [nftData, setNftData] = useState<any>(null)
+  const umi = createUmi(process.env.NEXT_PUBLIC_QUICKNODE!).use(
+    mplTokenMetadata()
+  )
+
+  useEffect(() => {
+    const fetchNftData = async () => {
+      const nftData = await fetchDigitalAsset(umi, publicKey(mintAddress))
+      setNftData(nftData)
+    }
+    fetchNftData()
+  }, [])
 
-  const nftData = await fetchDigitalAsset(umi, publicKey(mintAddress))
   console.log(nftData)
   return (
     <div className={cn(nftCardVariants({ variant }), className)} {...props}>