NFT view by ID, syncing to latest rev

packages/nft/src/App.tsx

@@ -36,7 +36,7 @@ export default function App() {
               <Route path="/" element={<AllAssets />} />
               <Route path="/mine" element={<MyAssets />} />
               <Route path="/mint" element={<Mint />} />
-              <Route path="/objects/:rev" element={<NftView />} />
+              <Route path="/objects/:id" element={<NftView />} />
               <Route path="/transactions/:txn" element={<Transaction.Component />} />
               <Route path="*" element={<Navigate to="/" replace={true} />} />
               <Route path="*" element={<Error404 />} />

packages/nft/src/components/Gallery.tsx

@@ -23,27 +23,28 @@ export type UserQuery<T extends Class> = Partial<{
 function NFTCard({ nft }: { nft: NFT }) {
   return (
     <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="#">
+      <Link
+        to={`/objects/${nft._id}`}
+        className="block font-medium text-blue-600 dark:text-blue-500 w-full"
+      >
         <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="#">
+        <div className="p-5">
           <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 truncate"
-          title={nft.artist}
-        >
-          {nft.artist}
-        </p>
-      </div>
+          <p
+            className="mb-3 font-normal text-gray-700 dark:text-gray-400 truncate"
+            title={nft.artist}
+          >
+            {nft.artist}
+          </p>
+        </div>
+      </Link>
     </div>
   )
 }
@@ -115,12 +116,7 @@ function FromRevs({ revs, computer }: { revs: string[]; computer: any }) {
     <div className="flex flex-wrap gap-4 mb-4 mt-4">
       {revs.map((rev) => (
         <div key={rev}>
-          <Link
-            to={`/objects/${rev}`}
-            className="block font-medium text-blue-600 dark:text-blue-500 w-full"
-          >
-            <ValueComponent rev={rev} computer={computer} />
-          </Link>
+          <ValueComponent rev={rev} computer={computer} />
         </div>
       ))}
     </div>
@@ -206,7 +202,7 @@ export default function WithPagination<T extends Class>(q: UserQuery<T>) {
       const query = { ...q, ...params }
       query.offset = contractsPerPage * pageNum
       query.limit = contractsPerPage + 1
-      query.order = 'DESC'
+      query.order = "DESC"
       const result = await computer.query(query)
       setIsNextAvailable(result.length > contractsPerPage)
       setRevs(result.slice(0, contractsPerPage))

packages/nft/src/components/Mint.tsx

@@ -5,14 +5,14 @@ import { Link } from "react-router-dom"
 import { Computer } from "@bitcoin-computer/lib"
 import { REACT_APP_NFT_MOD_SPEC } from "../constants/modSpecs"
 
-function SuccessContent(rev: string) {
+function SuccessContent(id: string) {
   return (
     <>
       <div className="p-4 md:p-5">
         <div>
           Congratiolations! You minted an nft. Click{" "}
           <Link
-            to={`/objects/${rev}`}
+            to={`/objects/${id}`}
             className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
             onClick={() => {
               Modal.hideModal("success-modal")

packages/nft/src/components/Nft.tsx

@@ -10,7 +10,11 @@ import {
 import { Computer } from "@bitcoin-computer/lib"
 import { OfferHelper, PaymentHelper, PaymentMock, SaleHelper } from "@bitcoin-computer/swap"
 import { NFT } from "@bitcoin-computer/TBC721"
-import { REACT_APP_OFFER_MOD_SPEC, REACT_APP_PAYMENT_MOD_SPEC, REACT_APP_SALE_MOD_SPEC } from "../constants/modSpecs"
+import {
+  REACT_APP_OFFER_MOD_SPEC,
+  REACT_APP_PAYMENT_MOD_SPEC,
+  REACT_APP_SALE_MOD_SPEC
+} from "../constants/modSpecs"
 
 const modalId = "smart-object-bought-modal"
 
@@ -43,8 +47,8 @@ const BuyNFT = async ({
   await computer.broadcast(finalTx)
   // const test = await computer.sync(txId)
   // need to have a sleep on this to get latest reve
-  const [updatedRev] = await computer.query({ ids: [nft._id] })
-  setFunctionResult(updatedRev)
+  // const [updatedRev] = await computer.query({ ids: [nft._id] })
+  setFunctionResult(nft._id)
   Modal.showModal(modalId)
   return nftAmount
 }
@@ -285,14 +289,14 @@ function showBuyOffer(computer: Computer, smartObject: NFT) {
   return smartObject && smartObject._owners[0] !== computer.getPublicKey() && smartObject.offerTxRev
 }
 
-function SuccessContent(rev: string) {
+function SuccessContent(id: string) {
   return (
     <>
       <div className="p-4 md:p-5">
         <div>
           You bought this NFT{" "}
           <Link
-            to={`/objects/${rev}`}
+            to={`/objects/${id}`}
             className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
             onClick={() => {
               Modal.hideModal(modalId)
@@ -319,7 +323,7 @@ function NftView() {
   const location = useLocation()
   const params = useParams()
   const navigate = useNavigate()
-  const [rev] = useState(params.rev || "")
+  const [id] = useState(params.id || "")
   const computer = useContext(ComputerContext)
   const [smartObject, setSmartObject] = useState<any | null>(null)
   const [functionResult, setFunctionResult] = useState<any>({})
@@ -328,7 +332,8 @@ function NftView() {
     const fetch = async () => {
       try {
         showLoader(true)
-        const synced = await computer.sync(rev)
+        const latesRev = await computer.getLatestRev(id)
+        const synced = (await computer.sync(latesRev)) as any
         setSmartObject(synced)
         showLoader(false)
       } catch (error) {
@@ -337,7 +342,7 @@ function NftView() {
       }
     }
     fetch()
-  }, [computer, rev, location, navigate])
+  }, [computer, id, location, navigate])
 
   return (
     <>