From 7e1983a4bc7dee7ad101bdb52da3960e48ca3432 Mon Sep 17 00:00:00 2001
From: Jiku Godwill <jikugodwill@yahoo.com>
Date: Fri, 6 Sep 2024 16:43:41 +0100
Subject: [PATCH] Showed NFT Images

---
 widget/components/NFT/Card.jsx    | 34 ++++++++++++++++++++++---------
 widget/components/NFT/Details.jsx |  8 ++++----
 widget/page/home.jsx              |  2 +-
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/widget/components/NFT/Card.jsx b/widget/components/NFT/Card.jsx
index 2769a91..44a6fae 100644
--- a/widget/components/NFT/Card.jsx
+++ b/widget/components/NFT/Card.jsx
@@ -1,12 +1,25 @@
+const { href } = VM.require("buildhub.near/widget/lib.url") || {
+  href: () => {},
+};
 const Card = ({ data }) => {
+  if (!data) {
+    return "Loading";
+  }
+  const size = "100%";
   return (
     <div className="d-flex flex-column gap-1 w-15 p-3">
-      <Link
-        to={`{config_index}?page=product&contractId=${data.nft_contract_id}&metadataId=${data?.metadata_id}`}
-        target="_blank"
+      <a
+        href={href({
+          widgetSrc: "${config_account}/widget/Index",
+          params: {
+            page: "product",
+            contractId: data?.nft_contract_id,
+            metadataId: data?.metadata_id,
+          },
+        })}
       >
         <Widget
-          src="{alias_MOB}/widget/NftImage"
+          src="${alias_MOB}/widget/NftImage"
           props={{
             nft: {
               tokenId: data?.token_id,
@@ -14,7 +27,7 @@ const Card = ({ data }) => {
             },
             style: {
               width: size,
-              height: size,
+              height: "300px",
               objectFit: "cover",
               minWidth: size,
               minHeight: size,
@@ -27,12 +40,11 @@ const Card = ({ data }) => {
               "https://ipfs.near.social/ipfs/bafkreihdiy3ec4epkkx7wc4wevssruen6b7f3oep5ylicnpnyyqzayvcry",
           }}
         />
-      </Link>
+      </a>
       <button
-        disabled={!accountId}
+        // disabled={!accountId}
         onClick={() => {
-          if (!accountId) return;
-          buy(priceYocto, data?.token_id, data?.nft_contract_id);
+          //add this NFT as json object to the connect user's social DB account
         }}
         style={{
           border: "1px solid black",
@@ -42,8 +54,10 @@ const Card = ({ data }) => {
           cursor: "pointer",
         }}
       >
-        Buy {priceNear} N
+        Add to cart
       </button>
     </div>
   );
 };
+
+return <Card {...props} />;
diff --git a/widget/components/NFT/Details.jsx b/widget/components/NFT/Details.jsx
index 4b90e81..b888390 100644
--- a/widget/components/NFT/Details.jsx
+++ b/widget/components/NFT/Details.jsx
@@ -1,10 +1,10 @@
 const { isDarkModeOn, data, NftCount, listingCount } = props;
 const { buyToken } = VM.require(
-  "${config_account}/widget/Mintbase.NFT.modules"
+  "${alias_GENADROP}/widget/Mintbase.NFT.modules"
 );
 
 const { buyTokenAsADao } = VM.require(
-  "${config_account}/widget/Mintbase.utils.sdk"
+  "${alias_GENADROP}/widget/Mintbase.utils.sdk"
 ) || { buyTokenAsADao: () => {} };
 
 const { href } = VM.require("buildhub.near/widget/lib.url") || {
@@ -424,7 +424,7 @@ return !data ? (
             <small>Contract</small>
             <Link
               to={href({
-                widgetSrc: "${config_account}/widget/Mintbase.App.Index",
+                widgetSrc: "${alias_GENADROP}/widget/Mintbase.App.Index",
                 params: {
                   page: "contract",
                   accountId: data?.nft_contract_id,
@@ -438,7 +438,7 @@ return !data ? (
             <small>Owner</small>
             <Link
               to={href({
-                widgetSrc: "${config_account}/widget/Mintbase.App.Index",
+                widgetSrc: "${alias_GENADROP}/widget/Mintbase.App.Index",
                 params: {
                   page: "human",
                   accountId: data?.owner,
diff --git a/widget/page/home.jsx b/widget/page/home.jsx
index 32f939f..6406990 100644
--- a/widget/page/home.jsx
+++ b/widget/page/home.jsx
@@ -89,7 +89,7 @@ const home = ({ storeId }) => {
           </div>
         </>
       ) : (
-        <h5>The store has no listed NFTs yet.</h5>
+        <h5>There's nothing to show yet.</h5>
       )}
     </Root>
   );