OpenSea

packages/nextjs/components/ProfilComponent.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import { Address } from "./scaffold-eth";
 import {
@@ -6,9 +7,10 @@ import {
   ShareIcon,
 } from "@heroicons/react/24/outline";
 import useIsValidator from "~~/hooks/contracts/access-manager/useIsValidator.hook";
+import useContractAddress from "~~/hooks/useContractAddress";
 import useIsOwner from "~~/hooks/useIsOwner.hook";
 import { DeedInfoModel } from "~~/models/deed-info.model";
-import { notification } from "~~/utils/scaffold-eth";
+import { getTargetNetwork, notification } from "~~/utils/scaffold-eth";
 
 interface Props {
   onRefresh: () => void;
@@ -25,6 +27,9 @@ export default function ProfileComponent({
 }: Props) {
   const isOwner = useIsOwner(deedData);
   const isValidator = useIsValidator();
+  const { id: chainId } = getTargetNetwork();
+  const deedNFTAddresss = useContractAddress("DeedNFT");
+
   const handleChatClick = () => {
     if (isOwner) {
       const subject = encodeURIComponent(
@@ -94,6 +99,20 @@ export default function ProfileComponent({
             </svg>
             Refresh
           </button>
+          <button
+            className="btn btn-link no-underline text-[2.2vw] sm:text-[12px] text-zinc-400 font-normal uppercase tracking-wide"
+            onClick={() =>
+              window.open(
+                chainId === 137
+                  ? `https://opensea.io/assets/matic/${deedNFTAddresss}/${deedData.mintedId}`
+                  : `https://testnets.opensea.io/assets/sepolia/${deedNFTAddresss}/${deedData.mintedId}`,
+                "_blank",
+              )
+            }
+          >
+            <Image alt="OpenSea Logo" src="/images/opensea-logo.svg" width={20} height={20} />
+            OpenSea
+          </button>
         </div>
         <div className="dropdown dropdown-end">
           <div tabIndex={0} role="button" className="btn bg-[#0e0e0e] m-1">

packages/nextjs/components/PropertyListBuy.tsx

@@ -76,11 +76,7 @@ const BidOffers = ({ deedData }: Props) => {
                         notification.success("Property listed");
                       }}
                       onGoToToken={() => {
-                        window.open(
-                          chainId === 137
-                            ? `https://opensea.io/assets/matic/${deedNFTAddresss}/${deedData.mintedId}`
-                            : `https://testnets.opensea.io/assets/sepolia/${deedNFTAddresss}/${deedData.mintedId}`,
-                        );
+                        window.open(`/overview/${deedData.id}`);
                       }}
                       onClose={() => {
                         listings.mutate();

packages/nextjs/components/SidePanel.tsx

@@ -385,7 +385,7 @@ const SidePanel = ({ deedData, initialData, stableCoin, refetchDeedInfo, router
               </button>
             ))}
           <div className="btn-group my-3 flex">
-            {deedData.id && (
+            {deedData.id && !deedData.paymentInformation.receipt && (
               <>
                 <button
                   onClick={() => handlePayment(deedData.id!)}

packages/nextjs/hooks/contracts/deed-nft/useDeedMint.hook.ts

@@ -34,11 +34,7 @@ const useDeedMint = (onConfirmed?: (txnReceipt: TransactionReceipt) => void) =>
     try {
       payload = await uploadFiles(authToken, data, undefined, true);
       if (!payload) return;
-      // Fill NFT metadata as OpenSea standard
-      payload.name = data.propertyDetails.propertyAddress;
-      payload.description = data.propertyDetails.propertyDescription;
-      payload.image = payload.propertyDetails.propertyImages?.[0].fileId;
-      payload.external_url = `https://app.deed3.io/overview/${payload.id}`;
+      payload = updateNFTMetadata(payload); // Update OpenSea metadata
       hash = await fileClient.uploadJson(payload);
     } catch (error) {
       notification.error("Error while publishing documents");
@@ -77,3 +73,59 @@ const useDeedMint = (onConfirmed?: (txnReceipt: TransactionReceipt) => void) =>
 };
 
 export default useDeedMint;
+
+export const updateNFTMetadata = (data: DeedInfoModel & OpenSeaMetadata) => {
+  // Fill NFT metadata as OpenSea standard
+  data.name = `${data.propertyDetails.propertyAddress}, ${data.propertyDetails.propertyCity},
+   ${data.propertyDetails.propertyState}`;
+  data.description = data.propertyDetails.propertyDescription;
+  data.image = data.propertyDetails.propertyImages?.[0].fileId;
+  data.external_url = `https://app.deed3.io/overview/${data.id}`;
+  data.attributes = [
+    { trait_type: "Type", value: data.propertyDetails.propertyType },
+    { trait_type: "Address", value: data.propertyDetails.propertyAddress },
+  ];
+
+  if (data.propertyDetails.propertySize)
+    data.attributes.push({ trait_type: "Size", value: data.propertyDetails.propertySize });
+  if (data.propertyDetails.propertyBathrooms)
+    data.attributes.push({
+      trait_type: "Bathrooms",
+      value: data.propertyDetails.propertyBathrooms,
+    });
+  if (data.propertyDetails.propertyBedrooms)
+    data.attributes.push({ trait_type: "Bedrooms", value: data.propertyDetails.propertyBedrooms });
+  if (data.propertyDetails.propertyZoning)
+    data.attributes.push({ trait_type: "Zoning", value: data.propertyDetails.propertyZoning });
+  if (data.propertyDetails.propertySquareFootage)
+    data.attributes.push({
+      trait_type: "Square Footage",
+      value: data.propertyDetails.propertySquareFootage,
+    });
+  if (data.propertyDetails.propertyHouseType)
+    data.attributes.push({
+      trait_type: "House Type",
+      value: data.propertyDetails.propertyHouseType,
+    });
+  if (data.propertyDetails.propertyBuildYear)
+    data.attributes.push({
+      trait_type: "Build Year",
+      value: data.propertyDetails.propertyBuildYear,
+    });
+  if (data.propertyDetails.vehicleMake)
+    data.attributes.push({ trait_type: "Vehicle Make", value: data.propertyDetails.vehicleMake });
+  if (data.propertyDetails.vehicleModel)
+    data.attributes.push({ trait_type: "Vehicle Model", value: data.propertyDetails.vehicleModel });
+  if (data.propertyDetails.yearOfManufacture)
+    data.attributes.push({
+      trait_type: "Year of Manufacture",
+      value: data.propertyDetails.yearOfManufacture,
+    });
+  if (data.propertyDetails.currentMileage)
+    data.attributes.push({
+      trait_type: "Current Mileage",
+      value: data.propertyDetails.currentMileage,
+    });
+
+  return data;
+};

packages/nextjs/hooks/contracts/deed-nft/useDeedUpdate.hook.ts

@@ -1,4 +1,5 @@
 import { useScaffoldContractWrite } from "../../scaffold-eth";
+import { updateNFTMetadata } from "./useDeedMint.hook";
 import { TransactionReceipt } from "viem";
 import useDeedClient from "~~/clients/deeds.client";
 import useFileClient from "~~/clients/files.client";
@@ -30,9 +31,11 @@ const useDeedUpdate = (onConfirmed?: (txnReceipt: TransactionReceipt) => void) =
     let toastId = notification.loading("Uploading documents...");
     let hash;
     try {
-      const payload = await uploadFiles(authToken, data, old);
+      let payload = await uploadFiles(authToken, data, old);
       if (!payload) return;
 
+      payload = updateNFTMetadata(payload); // Update OpenSea metadata
+
       // Start by saving data into database for redundancy
       await deedClient.saveDeed({ ...data, isValidated: false });
 

packages/nextjs/models/deed-info.model.ts

@@ -121,4 +121,5 @@ export interface OpenSeaMetadata {
   description?: string;
   image?: string;
   external_url?: string;
+  attributes?: { trait_type: string; value: string }[];
 }

packages/nextjs/pages/_app.tsx

@@ -57,7 +57,7 @@ const ScaffoldEthApp = (props: AppProps) => {
     automatedRoyalties: fees?.global_automatedRoyalties,
     normalizeRoyalties: fees?.global_normalizeRoyalties,
     marketplaceFees: fees?.global_marketplaceFees,
-    source: "deed3.io",
+    source: "app.deed3.io",
   };
 
   return (