From c98c2fe36f58443d9bddfa486bdfc138d33da55b Mon Sep 17 00:00:00 2001
From: jonty007 <vivek.singh2994@gmail.com>
Date: Tue, 23 Jul 2024 17:12:06 +0530
Subject: [PATCH 1/2] search by public key

---
 packages/nft/src/components/Navbar.tsx | 13 +++++++++++--
 packages/nft/src/components/Nft.tsx    | 15 +++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/nft/src/components/Navbar.tsx b/packages/nft/src/components/Navbar.tsx
index 8f539b1d1..a5e6f1006 100644
--- a/packages/nft/src/components/Navbar.tsx
+++ b/packages/nft/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 import { Modal, Auth, UtilsContext, Drawer } from "@bitcoin-computer/components"
 import { useEffect, useState } from "react"
 import { initFlowbite } from "flowbite"
@@ -246,8 +246,17 @@ function NavbarDropdownButton() {
 }
 
 export function Logo({ name = "TBC NFT" }) {
+  const navigate = useNavigate()
+
   return (
-    <Link to={`/`} className="flex items-center space-x-3 rtl:space-x-reverse">
+    <Link
+      to={`/`}
+      onClick={() => {
+        navigate(`/`)
+        window.location.reload()
+      }}
+      className="flex items-center space-x-3 rtl:space-x-reverse"
+    >
       <img src="/logo.png" className="h-10" alt="Bitcoin Computer Logo" />
       <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
         {name}
diff --git a/packages/nft/src/components/Nft.tsx b/packages/nft/src/components/Nft.tsx
index dd06b2e22..ee5888c13 100644
--- a/packages/nft/src/components/Nft.tsx
+++ b/packages/nft/src/components/Nft.tsx
@@ -112,6 +112,21 @@ const SmartObjectValues = ({ smartObject }: any) => {
           </div>
         </div>
       )}
+      {smartObject._owners && smartObject._owners[0] && (
+        <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
+          {capitalizeFirstLetter("owned by:")}{" "}
+          <Link
+            to={`/?publicKey=${smartObject._owners[0]}`}
+            className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+            onClick={() => {
+              Modal.hideModal(modalId)
+            }}
+          >
+            {smartObject._owners[0].substring(0, 8)}...
+            {smartObject._owners[0].substring(smartObject._owners[0].length - 2)}
+          </Link>
+        </p>
+      )}
     </>
   )
 }

From b7309d6e3b160f4688e7f4d9291b65ac19b4e28a Mon Sep 17 00:00:00 2001
From: jonty007 <vivek.singh2994@gmail.com>
Date: Fri, 2 Aug 2024 14:45:16 +0530
Subject: [PATCH 2/2] NFT UI

---
 packages/nft/src/components/Gallery.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/nft/src/components/Gallery.tsx b/packages/nft/src/components/Gallery.tsx
index 188d62a64..c7870e4b0 100644
--- a/packages/nft/src/components/Gallery.tsx
+++ b/packages/nft/src/components/Gallery.tsx
@@ -23,7 +23,7 @@ export type UserQuery<T extends Class> = Partial<{
 function NFTCard({ nft }: { nft: NFT }) {
   console.log(nft)
   return (
-    <div className="w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden mb-4">
+    <div className="w-full max-w-80 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 mb-4">
       <a href="#">
         <div className="w-full h-64 bg-gray-200 flex items-center justify-center">
           <img className="max-h-full max-w-full object-contain" src={nft.url} alt="" />
@@ -31,11 +31,19 @@ function NFTCard({ nft }: { nft: NFT }) {
       </a>
       <div className="p-5">
         <a href="#">
-          <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          <h5
+            className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white truncate"
+            title={nft.name}
+          >
             {nft.name}
           </h5>
         </a>
-        <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">{nft.artist}</p>
+        <p
+          className="mb-3 font-normal text-gray-700 dark:text-gray-400 truncate"
+          title={nft.artist}
+        >
+          {nft.artist}
+        </p>
       </div>
     </div>
   )