search by public key

packages/nft/src/components/Gallery.tsx

@@ -22,19 +22,27 @@ export type UserQuery<T extends Class> = Partial<{
 
 function NFTCard({ nft }: { nft: 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="" />
         </div>
       </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>
   )

packages/nft/src/components/Navbar.tsx

@@ -1,4 +1,5 @@
-import { Link } from "react-router-dom"
+
+import { Link, useNavigate } from "react-router-dom"
 import { Modal, Auth, Drawer } from "@bitcoin-computer/components"
 import { useEffect, useState } from "react"
 import { initFlowbite } from "flowbite"
@@ -158,8 +159,16 @@ function NavbarDropdownButton() {
 }
 
 export function Logo({ name = "Bitcoin Computer 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}

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>
+      )}
     </>
   )
 }