From 35bbb0a757c8f71150b4031dcd83ec5fb01088f2 Mon Sep 17 00:00:00 2001
From: Corantin <corantin.noll@gmail.com>
Date: Fri, 7 Jun 2024 11:50:19 -0400
Subject: [PATCH] OpenSea

---
 .../nextjs/components/ProfilComponent.tsx     | 21 ++++++-
 .../nextjs/components/PropertyListBuy.tsx     |  6 +-
 packages/nextjs/components/SidePanel.tsx      |  2 +-
 .../contracts/deed-nft/useDeedMint.hook.ts    | 62 +++++++++++++++++--
 .../contracts/deed-nft/useDeedUpdate.hook.ts  |  5 +-
 packages/nextjs/models/deed-info.model.ts     |  1 +
 packages/nextjs/pages/_app.tsx                |  2 +-
 packages/nextjs/public/OpenSea.svg            | 17 +++++
 .../nextjs/public/images/opensea-logo.svg     | 23 +++++++
 9 files changed, 125 insertions(+), 14 deletions(-)
 create mode 100644 packages/nextjs/public/OpenSea.svg
 create mode 100644 packages/nextjs/public/images/opensea-logo.svg

diff --git a/packages/nextjs/components/ProfilComponent.tsx b/packages/nextjs/components/ProfilComponent.tsx
index cd3312b3..e640b0e6 100644
--- a/packages/nextjs/components/ProfilComponent.tsx
+++ b/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">
diff --git a/packages/nextjs/components/PropertyListBuy.tsx b/packages/nextjs/components/PropertyListBuy.tsx
index 1d0cbb17..44d95f0a 100644
--- a/packages/nextjs/components/PropertyListBuy.tsx
+++ b/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();
diff --git a/packages/nextjs/components/SidePanel.tsx b/packages/nextjs/components/SidePanel.tsx
index dbff3b0a..0356188a 100644
--- a/packages/nextjs/components/SidePanel.tsx
+++ b/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!)}
diff --git a/packages/nextjs/hooks/contracts/deed-nft/useDeedMint.hook.ts b/packages/nextjs/hooks/contracts/deed-nft/useDeedMint.hook.ts
index f731667c..44547d45 100644
--- a/packages/nextjs/hooks/contracts/deed-nft/useDeedMint.hook.ts
+++ b/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;
+};
diff --git a/packages/nextjs/hooks/contracts/deed-nft/useDeedUpdate.hook.ts b/packages/nextjs/hooks/contracts/deed-nft/useDeedUpdate.hook.ts
index edf56928..002587e6 100644
--- a/packages/nextjs/hooks/contracts/deed-nft/useDeedUpdate.hook.ts
+++ b/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 });
 
diff --git a/packages/nextjs/models/deed-info.model.ts b/packages/nextjs/models/deed-info.model.ts
index 35f14079..54f0fa8e 100644
--- a/packages/nextjs/models/deed-info.model.ts
+++ b/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 }[];
 }
diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx
index 01faf1ec..c17c0eb8 100644
--- a/packages/nextjs/pages/_app.tsx
+++ b/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 (
diff --git a/packages/nextjs/public/OpenSea.svg b/packages/nextjs/public/OpenSea.svg
new file mode 100644
index 00000000..af49aa0b
--- /dev/null
+++ b/packages/nextjs/public/OpenSea.svg
@@ -0,0 +1,17 @@
+<svg width="360" height="360" viewBox="0 0 360 360" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3_64)">
+<g clip-path="url(#clip1_3_64)">
+<path d="M252.072 212.292C245.826 220.662 232.686 234.558 225.378 234.558H191.412V212.274H218.466C222.336 212.274 226.026 210.708 228.69 207.954C242.586 193.554 250.614 176.418 250.614 158.04C250.614 126.684 227.178 98.964 191.394 82.26V67.284C191.394 60.84 186.174 55.62 179.73 55.62C173.286 55.62 168.066 60.84 168.066 67.284V73.494C158.04 70.56 147.42 68.328 136.332 67.05C154.692 86.994 165.906 113.67 165.906 142.92C165.906 169.146 156.942 193.23 141.876 212.31H168.066V234.63H129.726C124.542 234.63 120.33 230.436 120.33 225.234V215.478C120.33 213.768 118.944 212.364 117.216 212.364H66.672C65.682 212.364 64.836 213.174 64.836 214.164C64.8 254.088 96.39 284.058 134.172 284.058H240.822C266.382 284.058 277.812 251.298 292.788 230.454C298.602 222.39 312.552 215.91 316.782 214.11C317.556 213.786 318.006 213.066 318.006 212.22V199.26C318.006 197.946 316.71 196.956 315.432 197.316C315.432 197.316 253.782 211.482 253.062 211.68C252.342 211.896 252.072 212.31 252.072 212.31V212.292Z" fill="#0086FF"/>
+<path d="M146.16 142.83C146.16 122.724 139.266 104.22 127.746 89.586L69.732 189.972H132.138C141.012 176.436 146.178 160.236 146.178 142.848L146.16 142.83Z" fill="#0086FF"/>
+<path d="M181.566 1.00604e-05C80.91 -0.82799 -0.82799 80.91 1.00604e-05 181.566C0.84601 279.306 80.694 359.172 178.416 359.982C279.072 360.846 360.846 279.072 359.982 178.416C359.172 80.712 279.306 0.84601 181.566 1.00604e-05ZM127.746 89.586C139.266 104.22 146.16 122.742 146.16 142.83C146.16 160.236 140.994 176.436 132.12 189.954H69.714L127.728 89.568L127.746 89.586ZM318.006 199.242V212.202C318.006 213.048 317.556 213.768 316.782 214.092C312.552 215.892 298.602 222.372 292.788 230.436C277.812 251.28 266.382 284.04 240.822 284.04H134.172C96.408 284.04 64.818 254.07 64.836 214.146C64.836 213.156 65.682 212.346 66.672 212.346H117.216C118.962 212.346 120.33 213.75 120.33 215.46V225.216C120.33 230.4 124.524 234.612 129.726 234.612H168.066V212.292H141.876C156.942 193.212 165.906 169.128 165.906 142.902C165.906 113.652 154.692 86.976 136.332 67.032C147.438 68.328 158.058 70.542 168.066 73.476V67.266C168.066 60.822 173.286 55.602 179.73 55.602C186.174 55.602 191.394 60.822 191.394 67.266V82.242C227.178 98.946 250.614 126.666 250.614 158.022C250.614 176.418 242.568 193.536 228.69 207.936C226.026 210.69 222.336 212.256 218.466 212.256H191.412V234.54H225.378C232.704 234.54 245.844 220.644 252.072 212.274C252.072 212.274 252.342 211.86 253.062 211.644C253.782 211.428 315.432 197.28 315.432 197.28C316.728 196.92 318.006 197.91 318.006 199.224V199.242Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_3_64">
+<rect width="360" height="360" fill="white"/>
+</clipPath>
+<clipPath id="clip1_3_64">
+<rect width="360" height="360" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/nextjs/public/images/opensea-logo.svg b/packages/nextjs/public/images/opensea-logo.svg
new file mode 100644
index 00000000..c7fb057e
--- /dev/null
+++ b/packages/nextjs/public/images/opensea-logo.svg
@@ -0,0 +1,23 @@
+<svg width="360" height="360" viewBox="0 0 360 360" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clipPath="url(#clip0_3_64)">
+    <g clipPath="url(#clip1_3_64)">
+      <path
+        d="M252.072 212.292C245.826 220.662 232.686 234.558 225.378 234.558H191.412V212.274H218.466C222.336 212.274 226.026 210.708 228.69 207.954C242.586 193.554 250.614 176.418 250.614 158.04C250.614 126.684 227.178 98.964 191.394 82.26V67.284C191.394 60.84 186.174 55.62 179.73 55.62C173.286 55.62 168.066 60.84 168.066 67.284V73.494C158.04 70.56 147.42 68.328 136.332 67.05C154.692 86.994 165.906 113.67 165.906 142.92C165.906 169.146 156.942 193.23 141.876 212.31H168.066V234.63H129.726C124.542 234.63 120.33 230.436 120.33 225.234V215.478C120.33 213.768 118.944 212.364 117.216 212.364H66.672C65.682 212.364 64.836 213.174 64.836 214.164C64.8 254.088 96.39 284.058 134.172 284.058H240.822C266.382 284.058 277.812 251.298 292.788 230.454C298.602 222.39 312.552 215.91 316.782 214.11C317.556 213.786 318.006 213.066 318.006 212.22V199.26C318.006 197.946 316.71 196.956 315.432 197.316C315.432 197.316 253.782 211.482 253.062 211.68C252.342 211.896 252.072 212.31 252.072 212.31V212.292Z"
+        fill="#0086FF" />
+      <path
+        d="M146.16 142.83C146.16 122.724 139.266 104.22 127.746 89.586L69.732 189.972H132.138C141.012 176.436 146.178 160.236 146.178 142.848L146.16 142.83Z"
+        fill="#0086FF" />
+      <path
+        d="M181.566 1.00604e-05C80.91 -0.82799 -0.82799 80.91 1.00604e-05 181.566C0.84601 279.306 80.694 359.172 178.416 359.982C279.072 360.846 360.846 279.072 359.982 178.416C359.172 80.712 279.306 0.84601 181.566 1.00604e-05ZM127.746 89.586C139.266 104.22 146.16 122.742 146.16 142.83C146.16 160.236 140.994 176.436 132.12 189.954H69.714L127.728 89.568L127.746 89.586ZM318.006 199.242V212.202C318.006 213.048 317.556 213.768 316.782 214.092C312.552 215.892 298.602 222.372 292.788 230.436C277.812 251.28 266.382 284.04 240.822 284.04H134.172C96.408 284.04 64.818 254.07 64.836 214.146C64.836 213.156 65.682 212.346 66.672 212.346H117.216C118.962 212.346 120.33 213.75 120.33 215.46V225.216C120.33 230.4 124.524 234.612 129.726 234.612H168.066V212.292H141.876C156.942 193.212 165.906 169.128 165.906 142.902C165.906 113.652 154.692 86.976 136.332 67.032C147.438 68.328 158.058 70.542 168.066 73.476V67.266C168.066 60.822 173.286 55.602 179.73 55.602C186.174 55.602 191.394 60.822 191.394 67.266V82.242C227.178 98.946 250.614 126.666 250.614 158.022C250.614 176.418 242.568 193.536 228.69 207.936C226.026 210.69 222.336 212.256 218.466 212.256H191.412V234.54H225.378C232.704 234.54 245.844 220.644 252.072 212.274C252.072 212.274 252.342 211.86 253.062 211.644C253.782 211.428 315.432 197.28 315.432 197.28C316.728 196.92 318.006 197.91 318.006 199.224V199.242Z"
+        fill="none" />
+    </g>
+  </g>
+  <defs>
+    <clipPath id="clip0_3_64">
+      <rect width="360" height="360" fill="none" />
+    </clipPath>
+    <clipPath id="clip1_3_64">
+      <rect width="360" height="360" fill="none" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file