refactor: client side with useffect

code100x · Mar 27, 2024 · 9eebe7e · 9eebe7e
1 parent a020ec6
commit 9eebe7e
Showing 1 changed file with 13 additions and 2 deletions.
diff --git 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}>