Updates

Author: edwardysun

apps/dashboard/src/lib/project-showcase-constants.ts

@@ -7,7 +7,7 @@ export const PROJECT_SHOWCASE_DATA = [
     slug: "artifact",
     description:
       "Blockchain-based platform for creating and trading digital art NFTs.",
-    // image: "ipfs://QmQJrpMvLApCnoQaoXVd8Rb5Wyjn8u6c8Ei2rG6KawCwWS",
+    image: "ipfs://QmQJrpMvLApCnoQaoXVd8Rb5Wyjn8u6c8Ei2rG6KawCwWS",
     industries: ["Art", "Games"],
     link: "https://www.gotartifact.com/",
     case_study: "No case study available",

apps/dashboard/src/pages/project-showcase/[slug].tsx

@@ -7,13 +7,17 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { ExternalLink, FileText } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { ThirdwebProvider } from "thirdweb/react";
 import { PROJECT_SHOWCASE_DATA } from "../../lib/project-showcase-constants";
 
-export default function DetailPage() {
+export function DetailPageUI() {
+  const thirdwebClient = useThirdwebClient();
   const router = useRouter();
   const { slug } = router.query;
 
@@ -69,9 +73,16 @@ export default function DetailPage() {
             </CardFooter>
           </div>
           <div className="md:w-1/2">
-            <div className="relative aspect-video md:aspect-square w-full h-full">
+            <div className="relative aspect-video h-full w-full md:aspect-square">
               <Image
-                src={project.image}
+                src={
+                  project.image?.startsWith("ipfs://")
+                    ? (resolveSchemeWithErrorHandler({
+                        client: thirdwebClient,
+                        uri: project.image,
+                      }) ?? "")
+                    : ""
+                }
                 alt={`${project.title} Thumbnail`}
                 layout="fill"
                 objectFit="cover"
@@ -84,3 +95,11 @@ export default function DetailPage() {
     </div>
   );
 }
+
+export default function DetailPage() {
+  return (
+    <ThirdwebProvider>
+      <DetailPageUI />
+    </ThirdwebProvider>
+  );
+}

apps/dashboard/src/pages/project-showcase/index.tsx

@@ -17,17 +17,21 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { ArrowRight } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
+import { ThirdwebProvider } from "thirdweb/react";
 import {
   PROJECT_SHOWCASE_DATA,
   PROJECT_SHOWCASE_INDUSTRIES,
   PROJECT_SHOWCASE_ITEMS_PER_PAGE,
 } from "../../lib/project-showcase-constants";
 
-export default function ProjectShowcase() {
+export function ProjectShowcaseUI() {
+  const thirdwebClient = useThirdwebClient();
   const [selectedIndustry, setSelectedIndustry] = useState("All");
   const [currentPage, setCurrentPage] = useState(1);
 
@@ -94,7 +98,14 @@ export default function ProjectShowcase() {
               >
                 <Card className="flex h-full cursor-pointer flex-col overflow-hidden transition-shadow hover:shadow-lg">
                   <Image
-                    src={project.image || ""}
+                    src={
+                      project.image?.startsWith("ipfs://")
+                        ? (resolveSchemeWithErrorHandler({
+                            client: thirdwebClient,
+                            uri: project.image,
+                          }) ?? "")
+                        : ""
+                    }
                     alt={project.title}
                     width={300}
                     height={200}
@@ -170,3 +181,11 @@ export default function ProjectShowcase() {
     </div>
   );
 }
+
+export default function ProjectShowcasePage() {
+  return (
+    <ThirdwebProvider>
+      <ProjectShowcaseUI />
+    </ThirdwebProvider>
+  );
+}