From b7dea1ce755b9bcd6a1dc8635f59954e1fecd0ed Mon Sep 17 00:00:00 2001
From: dlaxcess <35979307+dlaxcess@users.noreply.github.com>
Date: Wed, 4 May 2022 15:56:17 +0200
Subject: [PATCH] Gridlistdetail (#177)

* Grid mode
---
 gulp/scss/_class.scss                         |   2 +-
 gulp/scss/front.scss                          |  26 +-
 .../Nft => misc/old/svelte}/NftsList.svelte   |   0
 svelte/components/Global/Content.svelte       |  41 ++
 svelte/components/Global/Home.svelte          |  13 +-
 svelte/components/Nft/Nft.svelte              | 363 ++++++++----------
 svelte/components/Nft/NftGrid.svelte          |  48 +++
 svelte/components/Nft/NftLine.svelte          | 182 +++++++++
 svelte/components/Nft/NftList.svelte          |  91 +++++
 .../components/Nft/NftsListDisplayMode.svelte |  39 ++
 svelte/components/Nft/NftsListGrid.svelte     |  21 +
 svelte/components/Nft/NftsListLines.svelte    |  31 ++
 svelte/helpers/mediasDisplay.ts               |  54 +++
 svelte/helpers/shortcodes.ts                  |  13 +
 svelte/tests/BreadCrumb.svelte                |  12 +-
 svelte/tests/CollectionListSimple.svelte      |  28 +-
 svelte/tests/CollectionSimple.svelte          |   8 +-
 svelte/tests/NftDetail.svelte                 | 204 ----------
 .../common/shortcode/shortcode.php            |   2 +-
 19 files changed, 720 insertions(+), 458 deletions(-)
 rename {svelte/components/Nft => misc/old/svelte}/NftsList.svelte (100%)
 create mode 100644 svelte/components/Global/Content.svelte
 create mode 100644 svelte/components/Nft/NftGrid.svelte
 create mode 100644 svelte/components/Nft/NftLine.svelte
 create mode 100644 svelte/components/Nft/NftList.svelte
 create mode 100644 svelte/components/Nft/NftsListDisplayMode.svelte
 create mode 100644 svelte/components/Nft/NftsListGrid.svelte
 create mode 100644 svelte/components/Nft/NftsListLines.svelte
 create mode 100644 svelte/helpers/mediasDisplay.ts
 create mode 100644 svelte/helpers/shortcodes.ts
 delete mode 100644 svelte/tests/NftDetail.svelte

diff --git a/gulp/scss/_class.scss b/gulp/scss/_class.scss
index 363a2e6cd..f9b7aee91 100644
--- a/gulp/scss/_class.scss
+++ b/gulp/scss/_class.scss
@@ -204,7 +204,7 @@ select {
       background: rgba($green, 0.2);
     }
   }
-  &-sell {
+  &-sell, &-buy {
     color: $white;
     background: $green;
     &:hover {
diff --git a/gulp/scss/front.scss b/gulp/scss/front.scss
index 901b20240..ebccb901a 100644
--- a/gulp/scss/front.scss
+++ b/gulp/scss/front.scss
@@ -63,28 +63,13 @@
 }
 
 .media {
-  @include border-radius;
-  overflow: hidden;
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 100%;
-  height: 130px;
-  width: 130px;
-
-  img {
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.media-grid {
   @include border-radius;
   overflow: hidden;
   display: inline-block;
   vertical-align: middle;
   width: 100%;
-  img {
+  
+  img, video {
     object-fit: cover;
     width: 100%;
     height: 100%;
@@ -294,11 +279,12 @@
         padding-top: 100%;
         position: relative;
 
-        img {
+        img, video {
           transition: all 300ms ease;
           position: absolute;
           top: 0;
           left: 0;
+          width:100%;
         }
       }
 
@@ -471,6 +457,10 @@
     font-weight: bold;
     margin-bottom: 30px;
   }
+
+  video {
+    width: 100%;
+  }
 }
 
 .modal-close,
diff --git a/svelte/components/Nft/NftsList.svelte b/misc/old/svelte/NftsList.svelte
similarity index 100%
rename from svelte/components/Nft/NftsList.svelte
rename to misc/old/svelte/NftsList.svelte
diff --git a/svelte/components/Global/Content.svelte b/svelte/components/Global/Content.svelte
new file mode 100644
index 000000000..db0792864
--- /dev/null
+++ b/svelte/components/Global/Content.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  // import { displayedTokenID } from "main/diplayedNft";
+
+  import Nft from "../Nft/Nft.svelte";
+  import NftList from "../Nft/NftList.svelte";
+
+  export let chainId: number;
+  export let address: string;
+  export let account: string;
+  export let platform: string;
+  export let refreshing: boolean = false;
+  export let refresh: number;
+
+  let tokenID: string = "";
+
+  $: account && chainId && address && handleChange();
+  const handleChange = () => (tokenID = "");
+
+  const handleClick = (evt: Event) => {
+    const evtTarget = evt.target as HTMLInputElement;
+    if (!evtTarget.classList.contains("btn")) {
+      if (evtTarget.closest("div [data-tokenid]")) {
+        evt.preventDefault();
+        tokenID = evtTarget.closest("div [data-tokenid]").getAttribute("data-tokenid");
+      } else if (evtTarget.getAttribute("data-back") === "backtocoll") {
+        evt.preventDefault();
+        tokenID = "";
+      }
+    }
+  };
+</script>
+
+<div on:click={(evt) => handleClick(evt)}>
+  {#if tokenID}
+    <Nft {chainId} {address} {tokenID} {account} {platform} />
+  {:else}
+    {#key address}
+      <NftList {chainId} {address} {account} {refresh} bind:refreshing {platform} />
+    {/key}
+  {/if}
+</div>
diff --git a/svelte/components/Global/Home.svelte b/svelte/components/Global/Home.svelte
index f6aed2d10..dff03c985 100644
--- a/svelte/components/Global/Home.svelte
+++ b/svelte/components/Global/Home.svelte
@@ -9,19 +9,20 @@
   import Create from "../Global/Create.svelte";
   import Navigation from "../Global/Navigation.svelte";
 
-  import Nft from "../Nft/Nft.svelte";
-  import NftsList from "../Nft/NftsList.svelte";
   import NftsListRefresh from "../Nft/NftsListRefresh.svelte";
 
   import Title from "../Global/Title.svelte";
   // import BreadCrumb from "../../tests/BreadCrumb.svelte";
   import HomeLayout from "../Global/HomeLayout.svelte";
 
+  import Content from "./Content.svelte";
+
   // import { metamaskProvider } from "main/metamask";
 
+  export let platform: string = "dapp";
+
   let chainId: number;
   let address: string;
-  let tokenID: string;
   let account: string;
   let refreshing: boolean;
   let refresh: number;
@@ -62,11 +63,7 @@
 
   <span slot="content">
     {#if chainId && account && address}
-      {#if tokenID}
-        <Nft {chainId} {address} {tokenID} />
-      {:else}
-        <NftsList {chainId} {address} {account} {refresh} bind:refreshing />
-      {/if}
+      <Content {chainId} {address} {account} {platform} bind:refreshing {refresh} />
     {/if}
   </span>
 </HomeLayout>
diff --git a/svelte/components/Nft/Nft.svelte b/svelte/components/Nft/Nft.svelte
index 586879e32..f9856b81d 100644
--- a/svelte/components/Nft/Nft.svelte
+++ b/svelte/components/Nft/Nft.svelte
@@ -3,45 +3,34 @@
 
   import type { NftType } from "lib/ktypes";
   import {
-    getShortAddress,
     nftUrl,
     explorerCollectionUrl,
-    nftDescription,
-    nftDescriptionShort,
-    nftName,
-    nftOpenSeaUrl,
-    addressSame,
-    textShort,
     explorerAddressLink,
     kredeumNftUrl,
-    getNetwork
+    getNetwork,
+    nftOpenSeaUrl,
+    addressSame
   } from "lib/kconfig";
-  // import { nftKey } from "lib/kconfig";
-  import { nftGetImageLink } from "lib/knft-get-metadata";
-  import { onMount } from "svelte";
+  import { divMedia } from "helpers/mediasDisplay";
+
+  import { shortcode } from "helpers/shortcodes";
 
   import { nftStore } from "stores/nft/nft";
+
   import NftTransfer from "./NftTransfer.svelte";
 
-  /////////////////////////////////////////////////
-  //  <Nft {chainId} {address} {tokenID} {account}? {index}? {more}? {platform}? />
-  // Display NFT
-  /////////////////////////////////////////////////
   export let chainId: number;
   export let address: string;
   export let tokenID: string;
   export let account: string = undefined;
-  export let index = 0;
-  export let more = 0;
   export let platform: string = "dapp";
-
   let nft: Readable<NftType>;
 
   // let i = 1;
   // HANDLE CHANGE : on truthy chainId and address, and whatever account
   $: account, chainId && address && tokenID && handleChange();
   const handleChange = (): void => {
-    // console.log(`NFT CHANGE #${i++} ${nftKey(chainId, address, tokenID)}`);
+    // console.log(`NFTDETAIL CHANGE #${i++} ${nftKey(chainId, address, tokenID)}`);
 
     // STATE VIEW : sync get Nft
     nft = nftStore.getOneStore(chainId, address, tokenID);
@@ -50,201 +39,173 @@
     nftStore.refreshOne(chainId, address, tokenID).catch(console.error);
   };
 
-  const moreToggle = (): void => {
-    more = more > 0 ? 0 : (document.getElementById(`more-detail-${index}`)?.offsetHeight || 0) + 70;
-  };
-
-  const shortcode = async (_nft: NftType) => {
-    const data = `[kredeum_sell chain="${_nft.chainName}" collection="${_nft.address}" tokenid="${
-      _nft.tokenID
-    }" ipfs="${_nft.ipfs}"]${nftName(_nft)}[/kredeum_sell]`;
-
-    await navigator.clipboard.writeText(data).catch(() => console.log("Not copied"));
-    console.log("Copied");
-  };
-
-  const divMediaImage = (src: string, height?: number) => {
-    const heightString = height ? `height="${height}"` : "";
-    return `<img alt="link" src=${src} ${heightString}/>`;
-  };
-
-  const divMediaVideo = (src: string, small = true) => {
-    let video: string;
-    if (small) {
-      video = '<video preload="metadata" style="border-radius: initial;">';
-    } else {
-      video =
-        '<video autoplay="true"  controls="" controlslist="nodownload" loop="" playsinline="" preload="metadata" style="border-radius: initial;">';
-    }
-    video += `<source src="${src}" type="video/mp4"></video>`;
-    return video;
-  };
-
-  const divMedia = (_nft: NftType, index: number, small = false) => {
-    const mediaContentType = _nft.contentType?.split("/");
-    const mediaType = mediaContentType?.[0] || "image";
-
-    const mediaSrc = nftGetImageLink(_nft);
-    let div: string;
-    if (small) {
-      div = `<div id="media-small-${index}" class="media media-small media-${mediaType}">`;
-    } else {
-      div = `<div id="media-full-${index}" class="media media-${mediaType}">`;
-    }
-    if (mediaType == "video") {
-      div += divMediaVideo(mediaSrc, small);
-    } else if (mediaType == "image") {
-      div += divMediaImage(mediaSrc);
-    } else {
-      div += '<div class="media-text"></div>';
-    }
-    div += "</div>";
-
-    // console.log("divMedia div", div);
-    return div;
-  };
-
-  onMount(() => {
-    console.log("NFT", $nft);
-    if (more == -1) moreToggle();
-  });
+  // const backToCollection = () => {
+  //   // displayedTokenID.set("");
+  //   tokenID = "";
+  // };
 </script>
 
-<div
-  id="table-drop-{index}"
-  class="table-row table-drop"
-  class:closed={!more}
-  style="height: {more ? `${more}px` : 'auto'};"
->
-  <div id="media-{index}" class="table-col">
-    <div class="table-col-content">
-      {@html divMedia($nft, index, true)}
-
-      <strong>{nftName($nft)}</strong>
-      <span id="description-short-{index}" class:hidden={more}>{nftDescriptionShort($nft, 64)} </span>
-      <a
-        class="info-button"
-        href={nftGetImageLink($nft)}
-        title="&#009;{nftDescription($nft)} 
-                NFT address (click to view in explorer)&#013.{nftUrl($nft)}"
-        target="_blank"><i class="fas fa-info-circle" /></a
-      >
+{#if $nft}
+  <h2 class="m-b-20 return">
+    <i class="fa fa-arrow-left fa-left" /><a href="." data-back="backtocoll" class="link">Return to collection</a>
+  </h2>
+
+  <div class="row grid-detail-krd">
+    <div class="col col-xs-12 col-sm-4 col-md-3">
+      <div class="card-krd">
+        <div class="media media-grid media-photo">
+          <a href="#zoom">
+            <i class="fas fa-search" />
+            <!-- <img src={$nft.image} alt={$nft.name} /> -->
+            {@html divMedia($nft, Number($nft?.tokenID), false)}
+          </a>
+        </div>
+      </div>
     </div>
-  </div>
 
-  <div id="marketplace-{index}" class="table-col">
-    <div class="table-col-content">
-      {#if getNetwork($nft.chainId)?.openSea}
-        {#if addressSame($nft.owner, account)}
-          <a href={nftOpenSeaUrl($nft.chainId, $nft)} class="btn btn-small btn-sell" title="Sell" target="_blank">
-            Sell
-          </a>
-        {:else}
-          <a href={nftOpenSeaUrl($nft.chainId, $nft)} class="btn btn-small btn-buy" title="Buy" target="_blank">
-            Buy
-          </a>
-        {/if}
-      {:else}
-        <a
-          class="info-button"
-          href={nftGetImageLink($nft)}
-          title="&#009;{nftDescription($nft)} 
-                  NFT address (click to view explorer)&#013.{nftUrl($nft)}"
-          target="_blank"><i class="fas fa-info-circle" /></a
-        >
-      {/if}
-      <span id="token-id-{index}" title="  #{$nft.tokenID}">
-        &nbsp;&nbsp;<strong>#{textShort($nft.tokenID)}</strong>
-      </span>
+    <div class="col col-xs-12 col-sm-8 col-md-9">
+      <div class="card-krd">
+        <h3>{$nft.name}</h3>
+        <p>
+          {$nft.description}
+        </p>
+
+        <ul class="steps">
+          <li>
+            <div class="flex"><span class="label"><strong>Token ID</strong></span></div>
+            <div class="flex"><strong>#{$nft.tokenID}</strong></div>
+          </li>
+          <li>
+            <div class="flex"><span class="label">Owner</span></div>
+            <div class="flex">{@html explorerAddressLink($nft.chainId, $nft.owner, 15)}</div>
+          </li>
+          <li>
+            <div class="flex"><span class="label">Permanent link</span></div>
+            <div class="flex">
+              <a
+                class="link overflow-ellipsis"
+                href={kredeumNftUrl($nft.chainId, $nft)}
+                title={nftUrl($nft, 10)}
+                target="_blank"
+              >
+                {@html nftUrl($nft, 10)}
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="flex"><span class="label">collection @</span></div>
+            <div class="flex">
+              <a
+                class="link overflow-ellipsis"
+                href={explorerCollectionUrl($nft.chainId, $nft?.address)}
+                title={$nft.address}
+                target="_blank"
+              >
+                {$nft.address}
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="flex"><span class="label">Metadata ipfs</span></div>
+            <div class="flex">
+              <a class="link overflow-ellipsis" href={$nft.tokenURI} title={$nft.ipfsJson} target="_blank"
+                >{$nft.ipfsJson}</a
+              >
+            </div>
+          </li>
+          <li>
+            <div class="flex"><span class="label">Image</span></div>
+            <div class="flex">
+              <a class="link overflow-ellipsis" href={$nft.image} title={$nft.ipfs} target="_blank">
+                {$nft.ipfs}
+              </a>
+            </div>
+          </li>
+        </ul>
+
+        <div class="p-t-40 p-b-40 grid-buttons">
+          {#if "wordpress" === platform}
+            <a href="#schortcodes" class="btn btn-small btn-outline" title="Get shortcode"
+              ><i class="fa fa-code" /><span>Get shortcode</span></a
+            >
+          {/if}
+          <a href="#transfert-$nft-{$nft.tokenID}" class="btn btn-small btn-outline" title="Make a gift"
+            ><i class="fa fa-gift" /><span>Make a gift</span></a
+          >
+
+          {#if getNetwork($nft.chainId)?.openSea}
+            {#if addressSame($nft.owner, account)}
+              <a href={nftOpenSeaUrl(chainId, $nft)} class="btn btn-small btn-sell" title="Sell" target="_blank">
+                Sell
+              </a>
+            {:else}
+              <a href={nftOpenSeaUrl(chainId, $nft)} class="btn btn-small btn-buy" title="Buy" target="_blank"> Buy </a>
+            {/if}
+          {/if}
+        </div>
+      </div>
     </div>
   </div>
-
-  <div id="more-{index}" class="table-col more" on:click={() => moreToggle()}>
-    <div class="table-col-content txtright">
-      <div class="more-button"><i class="fas fa-chevron-down" /></div>
+{/if}
+
+<!-- Modales of detail view -->
+<!-- Modal Zoom -->
+<div id="zoom" class="modal-window">
+  <div>
+    <div class="modal-content">
+      <a href="." title="Close" class="modal-close"><i class="fa fa-times" /></a>
+      <div class="modal-body">
+        <div class="media media-photo">
+          <a href="#zoom">
+            <!-- <img src={$nft.image} alt={$nft.name} /> -->
+            {@html divMedia($nft, Number($nft?.tokenID), false)}
+          </a>
+        </div>
+      </div>
     </div>
   </div>
+</div>
 
-  <div id="more-detail-{index}" class="detail">
-    {#await divMedia($nft, index)}
-      <div class="media media-full media-text" />
-    {:then mediaDiv}
-      {@html mediaDiv}
-    {/await}
-    <div id="description-{index}" class="description">
-      <strong>Description</strong>
-
-      <p>
-        {nftDescription($nft)}
-      </p>
-      <ul class="steps">
-        <li class="complete">
-          <div class="flex"><span class="label">Owner</span></div>
-          <div class="flex">
-            {@html explorerAddressLink($nft.chainId, $nft.owner, 15)}
-          </div>
-        </li>
-        <li class="complete">
-          <div class="flex"><span class="label">Permanent Link</span></div>
-          <div class="flex">
-            <a class="link" href={kredeumNftUrl($nft.chainId, $nft)} target="_blank">
-              {@html nftUrl($nft, 10)}
-            </a>
-          </div>
-        </li>
-        <li class="complete">
-          <div class="flex"><span class="label">Collection @</span></div>
-          <div class="flex">
-            <a class="link" href={explorerCollectionUrl($nft.chainId, $nft?.address)} target="_blank"
-              >{getShortAddress($nft.address, 15)}</a
-            >
-          </div>
-        </li>
-
-        <li class="complete">
-          <div class="flex"><span class="label">Metadata IPFS</span></div>
-          <div class="flex">
-            <a class="link" href={$nft.tokenURI} target="_blank">{textShort($nft.ipfsJson)}</a>
-          </div>
-        </li>
-
-        <li class="complete">
-          <div class="flex"><span class="label">Image IPFS</span></div>
-          <div class="flex">
-            <a class="link" href={$nft.image} target="_blank">{textShort($nft.ipfs)}</a>
-          </div>
-        </li>
-        <li class="complete">
-          <div class="flex">
-            <a href="#transfert-$nft-{$nft.tokenID}" class="btn btn-small btn-default" title="Transfer NFT">
-              <i class="fas fa-gift" /> Transfer
-            </a>
-          </div>
-          <!-- <div class="flex">
-            <a href="#claim-$nft-{$nft.tokenID}" class="btn btn-small btn-default" title="Claim NFT on Kovan">
-              <i class="fas fa-exclamation" /> Claim on Kovan
-            </a>
-          </div> -->
-        </li>
-        {#if platform === "wordpress"}
-          <li class="complete">
-            <div class="flex"><span class="label">Copy shortcode sell button</span></div>
+<!-- Modal Shortcodes -->
+<div id="schortcodes" class="modal-window">
+  <div>
+    <div class="modal-content">
+      <a href="." title="Close" class="modal-close"><i class="fa fa-times" /></a>
+      <div class="modal-body">
+        <div class="titre">
+          <i class="fas fa-code fa-left c-green" />
+          Shortcodes
+        </div>
+        <p>Click on the Copy Button to copy the shortcode in your clipboard and then paste it in a WordPress page.</p>
+
+        <ul class="steps">
+          <li>
+            <div class="flex"><span class="label">Sell direclty on Opensea</span></div>
             <div class="flex">
-              <button on:click={() => shortcode($nft)} class="btn krd_shortcode_data">Shortcode</button>
+              <a on:click|preventDefault={() => shortcode($nft)} class="btn btn-small btn-outline" href="." title="Copy"
+                >Copy</a
+              >
             </div>
           </li>
-        {/if}
-      </ul>
+          <!-- <li>
+            <div class="flex"><span class="label">Sell direclty on Gamestop</span></div>
+            <div class="flex"><a class="btn btn-small btn-outline" href="." title="Copy">Copy</a></div>
+          </li>
+          <li>
+            <div class="flex"><span class="label">Mint on your front page</span></div>
+            <div class="flex"><a class="btn btn-small btn-outline" href="." title="Copy">Copy</a></div>
+          </li>
+          <li>
+            <div class="flex"><span class="label">Sell directly without market-places</span></div>
+            <div class="flex"><a class="btn btn-small btn-outline" href="." title="Copy">Copy</a></div>
+          </li> -->
+        </ul>
+      </div>
     </div>
   </div>
+</div>
 
-  <!-- Modal transfer $nft -->
-  <div id="transfert-$nft-{$nft.tokenID}" class="modal-window">
-    <NftTransfer {chainId} {address} {tokenID} />
-  </div>
-
-  <!--  <div id="claim-$nft-{$nft.tokenID}" class="modal-window">
-    <NftClaimView bind:$nft />
-  </div>
-   -->
+<!-- Modal gift -->
+<div id="transfert-$nft-{$nft.tokenID}" class="modal-window">
+  <NftTransfer {chainId} {address} {tokenID} />
 </div>
diff --git a/svelte/components/Nft/NftGrid.svelte b/svelte/components/Nft/NftGrid.svelte
new file mode 100644
index 000000000..77aa1ebc9
--- /dev/null
+++ b/svelte/components/Nft/NftGrid.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { NftType } from "lib/ktypes";
+
+  import { nftName, nftOpenSeaUrl, addressSame, getNetwork } from "lib/kconfig";
+  import { divMedia } from "helpers/mediasDisplay";
+
+  /////////////////////////////////////////////////
+  //  <NftGrid {nft} {account} {index} {platform}? />
+  // Display NFT card for Grid mode
+  /////////////////////////////////////////////////
+  export let nft: NftType;
+  export let account: string = undefined;
+
+  export let index: number;
+
+  // export let platform: string = "dapp";
+
+  console.log("nft", nft);
+  ///////////////////////////////////////////////////////////////////////////////
+</script>
+
+<div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">
+  <div class="grid-card-krd" data-tokenid={nft?.tokenID}>
+    {@html divMedia(nft, index, true)}
+
+    <div class="caption">
+      <h3>{nftName(nft)}</h3>
+      {#if getNetwork(nft.chainId)?.openSea}
+        {#if addressSame(nft.owner, account)}
+          <a href={nftOpenSeaUrl(nft.chainId, nft)} class="btn btn-small btn-sell" title="Sell" target="_blank">
+            Sell
+          </a>
+        {:else}
+          <a href={nftOpenSeaUrl(nft.chainId, nft)} class="btn btn-small btn-buy" title="Buy" target="_blank"> Buy </a>
+        {/if}
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid-card-krd h3 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-height: 20.8px;
+  }
+</style>
diff --git a/svelte/components/Nft/NftLine.svelte b/svelte/components/Nft/NftLine.svelte
new file mode 100644
index 000000000..4cb0021e7
--- /dev/null
+++ b/svelte/components/Nft/NftLine.svelte
@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { NftType } from "lib/ktypes";
+  import {
+    getShortAddress,
+    nftUrl,
+    explorerCollectionUrl,
+    nftDescription,
+    nftDescriptionShort,
+    nftName,
+    nftOpenSeaUrl,
+    addressSame,
+    textShort,
+    explorerAddressLink,
+    kredeumNftUrl,
+    getNetwork
+  } from "lib/kconfig";
+  // import { nftKey } from "lib/kconfig";
+  import { nftGetImageLink } from "lib/knft-get-metadata";
+  import { divMedia } from "helpers/mediasDisplay";
+
+  import { onMount } from "svelte";
+
+  import { shortcode } from "helpers/shortcodes";
+  import NftTransfer from "./NftTransfer.svelte";
+
+  /////////////////////////////////////////////////
+  //  <NftLine {nft} {account}? {index}? {more}? {platform}? />
+  // Display NFT
+  /////////////////////////////////////////////////
+  export let nft: NftType;
+  export let account: string = undefined;
+  export let index = 0;
+  export let more = 0;
+  export let platform: string = "dapp";
+
+  // let i = 1;
+  const moreToggle = (): void => {
+    more = more > 0 ? 0 : (document.getElementById(`more-detail-${index}`)?.offsetHeight || 0) + 70;
+  };
+
+  onMount(() => {
+    console.log("NFT", nft);
+    if (more == -1) moreToggle();
+  });
+</script>
+
+<div
+  id="table-drop-{index}"
+  class="table-row table-drop"
+  class:closed={!more}
+  style="height: {more ? `${more}px` : 'auto'};"
+>
+  <div id="media-{index}" class="table-col">
+    <div class="table-col-content">
+      {@html divMedia(nft, index, true, "list")}
+
+      <strong>{nftName(nft)}</strong>
+      <span id="description-short-{index}" class:hidden={more}>{nftDescriptionShort(nft, 64)} </span>
+      <a
+        class="info-button"
+        href={nftGetImageLink(nft)}
+        title="&#009;{nftDescription(nft)} 
+                NFT address (click to view in explorer)&#013.{nftUrl(nft)}"
+        target="_blank"><i class="fas fa-info-circle" /></a
+      >
+    </div>
+  </div>
+
+  <div id="marketplace-{index}" class="table-col">
+    <div class="table-col-content">
+      {#if getNetwork(nft.chainId)?.openSea}
+        {#if addressSame(nft.owner, account)}
+          <a href={nftOpenSeaUrl(nft.chainId, nft)} class="btn btn-small btn-sell" title="Sell" target="_blank">
+            Sell
+          </a>
+        {:else}
+          <a href={nftOpenSeaUrl(nft.chainId, nft)} class="btn btn-small btn-buy" title="Buy" target="_blank"> Buy </a>
+        {/if}
+      {:else}
+        <a
+          class="info-button"
+          href={nftGetImageLink(nft)}
+          title="&#009;{nftDescription(nft)} 
+                  NFT address (click to view explorer)&#013.{nftUrl(nft)}"
+          target="_blank"><i class="fas fa-info-circle" /></a
+        >
+      {/if}
+      <span id="token-id-{index}" title="  #{nft.tokenID}">
+        &nbsp;&nbsp;<strong>#{textShort(nft.tokenID)}</strong>
+      </span>
+    </div>
+  </div>
+
+  <div id="more-{index}" class="table-col more" on:click={() => moreToggle()}>
+    <div class="table-col-content txtright">
+      <div class="more-button"><i class="fas fa-chevron-down" /></div>
+    </div>
+  </div>
+
+  <div id="more-detail-{index}" class="detail">
+    {#await divMedia(nft, index, false, "list")}
+      <div class="media media-full media-text" />
+    {:then mediaDiv}
+      {@html mediaDiv}
+    {/await}
+    <div id="description-{index}" class="description">
+      <strong>Description</strong>
+
+      <p>
+        {nftDescription(nft)}
+      </p>
+      <ul class="steps">
+        <li class="complete">
+          <div class="flex"><span class="label">Owner</span></div>
+          <div class="flex">
+            {@html explorerAddressLink(nft.chainId, nft.owner, 15)}
+          </div>
+        </li>
+        <li class="complete">
+          <div class="flex"><span class="label">Permanent Link</span></div>
+          <div class="flex">
+            <a class="link" href={kredeumNftUrl(nft.chainId, nft)} target="_blank">
+              {@html nftUrl(nft, 10)}
+            </a>
+          </div>
+        </li>
+        <li class="complete">
+          <div class="flex"><span class="label">Collection @</span></div>
+          <div class="flex">
+            <a class="link" href={explorerCollectionUrl(nft.chainId, nft?.address)} target="_blank"
+              >{getShortAddress(nft.address, 15)}</a
+            >
+          </div>
+        </li>
+
+        <li class="complete">
+          <div class="flex"><span class="label">Metadata IPFS</span></div>
+          <div class="flex">
+            <a class="link" href={nft.tokenURI} target="_blank">{textShort(nft.ipfsJson)}</a>
+          </div>
+        </li>
+
+        <li class="complete">
+          <div class="flex"><span class="label">Image IPFS</span></div>
+          <div class="flex">
+            <a class="link" href={nft.image} target="_blank">{textShort(nft.ipfs)}</a>
+          </div>
+        </li>
+        <li class="complete">
+          <div class="flex">
+            <a href="#transfert-$nft-{nft.tokenID}" class="btn btn-small btn-default" title="Transfer NFT">
+              <i class="fas fa-gift" /> Transfer
+            </a>
+          </div>
+          <!-- <div class="flex">
+            <a href="#claim-$nft-{$nft.tokenID}" class="btn btn-small btn-default" title="Claim NFT on Kovan">
+              <i class="fas fa-exclamation" /> Claim on Kovan
+            </a>
+          </div> -->
+        </li>
+        {#if platform === "wordpress"}
+          <li class="complete">
+            <div class="flex"><span class="label">Copy shortcode sell button</span></div>
+            <div class="flex">
+              <button on:click={() => shortcode(nft)} class="btn krd_shortcode_data">Shortcode</button>
+            </div>
+          </li>
+        {/if}
+      </ul>
+    </div>
+  </div>
+
+  <!-- Modal transfer $nft -->
+  <div id="transfert-$nft-{nft.tokenID}" class="modal-window">
+    <NftTransfer chainId={nft.chainId} address={nft.address} tokenID={nft.tokenID} />
+  </div>
+
+  <!--  <div id="claim-$nft-{$nft.tokenID}" class="modal-window">
+    <NftClaimView bind:$nft />
+  </div>
+   -->
+</div>
diff --git a/svelte/components/Nft/NftList.svelte b/svelte/components/Nft/NftList.svelte
new file mode 100644
index 000000000..2073558f4
--- /dev/null
+++ b/svelte/components/Nft/NftList.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { Readable } from "svelte/store";
+
+  import type { CollectionType, NftType } from "lib/ktypes";
+  import { explorerCollectionUrl, collectionUrl } from "lib/kconfig";
+
+  import { nftStore } from "stores/nft/nft";
+  import { collectionStore } from "stores/collection/collection";
+
+  import NftsListDisplayMode from "./NftsListDisplayMode.svelte";
+
+  import NftsListLines from "./NftsListLines.svelte";
+  import NftsListGrid from "./NftsListGrid.svelte";
+
+  /////////////////////////////////////////////////
+  // <NftList {chainId} {address}  {account} {refreshing} />
+  // List Nfts from collection owned by account
+  /////////////////////////////////////////////////
+  export let chainId: number;
+  export let address: string;
+  export let account: string = undefined;
+  export let refreshing: boolean = undefined;
+  export let refresh: number = 1;
+
+  export let platform: string = "dapp";
+
+  let displayMode: string = "grid";
+
+  // let i = 1;
+  let nfts: Readable<Map<string, NftType>>;
+  let collection: Readable<CollectionType>;
+
+  // HANDLE CHANGE : on truthy chainId, address and account, and whatever refresh
+  $: refresh, chainId && address && account && handleChange();
+  const handleChange = async (): Promise<void> => {
+    // console.log(`NFT LIST CHANGE #${i++} ${nftListKey(chainId, address, account)}`);
+
+    // STATE VIEW : sync get Collection
+    collection = collectionStore.getOneStore(chainId, address);
+
+    // STATE VIEW : sync get NFT list
+    nfts = nftStore.getSubListStore(chainId, address, account);
+
+    // ACTION : async refresh NFT list
+    refreshing = true;
+    await nftStore.refreshSubList(chainId, address, account);
+    refreshing = false;
+  };
+</script>
+
+{#if $collection && nfts}
+  <div class="row alignbottom">
+    <div class="col col-xs-12">
+      <h2>Collection '{$collection?.name}'</h2>
+      {$nfts?.size || 0}/{$collection?.balancesOf?.get(account) || $nfts?.size || 0}
+      {$collection?.symbol || "NFT"}
+      {#if refreshing}...{/if}
+      <a
+        class="info-button"
+        href={explorerCollectionUrl(chainId, address)}
+        title="&#009;Collection address (click to view in explorer)&#013;
+      {collectionUrl(chainId, address)}"
+        target="_blank"><i class="fas fa-info-circle" /></a
+      >
+    </div>
+    <div class="col col-xs-12">
+      <NftsListDisplayMode bind:displayMode />
+    </div>
+  </div>
+
+  {#if "list" === displayMode}
+    <NftsListLines {chainId} {account} {nfts} {platform} />
+  {:else if "grid" === displayMode}
+    <NftsListGrid {account} {nfts} />
+  {/if}
+
+  <!-- {#if platform === "wordpress"}
+    <div>WordPress</div>
+  {/if} -->
+{:else}
+  <div class="card-krd">
+    <p>
+      {#if refreshing}
+        <h2>Collection '{$collection?.name}'</h2>
+        Refreshing NFTs...
+      {:else}
+        No NFTs ✌️
+      {/if}
+    </p>
+  </div>
+{/if}
diff --git a/svelte/components/Nft/NftsListDisplayMode.svelte b/svelte/components/Nft/NftsListDisplayMode.svelte
new file mode 100644
index 000000000..093c65003
--- /dev/null
+++ b/svelte/components/Nft/NftsListDisplayMode.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  export let displayMode: string = "grid";
+</script>
+
+<div id="displayListMode" class="col col-xs-12 col-sm-5">
+  <div class="box-fields">
+    <input
+      bind:group={displayMode}
+      class="box-field"
+      id="display-grid-type"
+      name="nfts-display-type"
+      type="radio"
+      value="grid"
+    />
+    <label class="field" for="display-grid-type"><i class="fas fa-th" /></label>
+
+    <input
+      bind:group={displayMode}
+      class="box-field"
+      id="display-list-type"
+      name="nfts-display-type"
+      type="radio"
+      value="list"
+    />
+    <label class="field" for="display-list-type"><i class="fas fa-list" /></label>
+  </div>
+</div>
+
+<style>
+  #displayListMode {
+    float: right;
+    text-align: right;
+    padding: 0;
+  }
+
+  #displayListMode .box-fields .field i {
+    margin: 0;
+  }
+</style>
diff --git a/svelte/components/Nft/NftsListGrid.svelte b/svelte/components/Nft/NftsListGrid.svelte
new file mode 100644
index 000000000..518b10e97
--- /dev/null
+++ b/svelte/components/Nft/NftsListGrid.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Readable } from "svelte/store";
+  import type { NftType } from "lib/ktypes";
+
+  import NftGrid from "./NftGrid.svelte";
+  /////////////////////////////////////////////////
+  //  <NftListGrid {account} {nfts} {platform}? />
+  // Display NFTs List in Grid mode
+  /////////////////////////////////////////////////
+  export let account: string = undefined;
+
+  export let nfts: Readable<Map<string, NftType>>;
+
+  // export let platform: string = "dapp";
+</script>
+
+<div class="row grid-krd">
+  {#each [...$nfts.values()] as nft, index}
+    <NftGrid {nft} {account} {index} />
+  {/each}
+</div>
diff --git a/svelte/components/Nft/NftsListLines.svelte b/svelte/components/Nft/NftsListLines.svelte
new file mode 100644
index 000000000..f485fd09f
--- /dev/null
+++ b/svelte/components/Nft/NftsListLines.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Readable } from "svelte/store";
+  import type { NftType } from "lib/ktypes";
+
+  import { getNetwork } from "lib/kconfig";
+
+  import NftLine from "./NftLine.svelte";
+
+  /////////////////////////////////////////////////
+  //  <NftListLines {chainId} {account} {nfts} {platform}? />
+  // Display NFTs List
+  /////////////////////////////////////////////////
+  export let chainId: number;
+  export let account: string;
+  export let nfts: Readable<Map<string, NftType>>;
+  export let platform = "dapp";
+</script>
+
+<div class="table">
+  <div class="table-row table-head hidden-xs">
+    <div class="table-col"><span class="label">Media</span></div>
+    {#if getNetwork(chainId)?.openSea}
+      <div class="table-col"><span class="label">Marketplace</span></div>
+    {:else}
+      <div class="table-col"><span class="label">Infos</span></div>
+    {/if}
+  </div>
+  {#each [...$nfts.values()] as nft}
+    <NftLine {nft} {account} {platform} />
+  {/each}
+</div>
diff --git a/svelte/helpers/mediasDisplay.ts b/svelte/helpers/mediasDisplay.ts
new file mode 100644
index 000000000..282c7fdb2
--- /dev/null
+++ b/svelte/helpers/mediasDisplay.ts
@@ -0,0 +1,54 @@
+import type { NftType } from "lib/ktypes";
+import { nftGetImageLink } from "lib/knft-get-metadata";
+
+const divMediaImage = (src: string, height?: number) => {
+  const heightString = height ? `height="${height}"` : "";
+  return `<img alt="link" src=${src} ${heightString}/>`;
+};
+
+const divMediaVideo = (src: string, small = true) => {
+  let video: string;
+  if (small) {
+    video = "<video preload=\"metadata\" style=\"border-radius: initial;\">";
+  } else {
+    video =
+      "<video autoplay=\"true\"  controls=\"\" controlslist=\"nodownload\" loop=\"\" playsinline=\"\" preload=\"metadata\" style=\"border-radius: initial;\">";
+  }
+  video += `<source src="${src}" type="video/mp4"></video>`;
+  return video;
+};
+
+const divMedia = (nft: NftType, index: number, small = false, display: string = "grid") => {
+  const mediaContentType = nft.contentType?.split("/");
+  const mediaType = mediaContentType[0] || "image";
+
+  const mediaSrc = nftGetImageLink(nft);
+  let div: string = "";
+  if (small) {
+    if ("list" === display) {
+      div = `<div id="media-small-${index}" class="media media-small media-${mediaType}">`;
+    } else {
+      div += `<div id="media-small-${index}" class="media media-grid media-${mediaType}">`;
+    }
+  } else {
+    if ("list" === display) {
+      div = `<div id="media-full-${index}" class="media media-${mediaType}">`;
+    } else {
+      div += `<div id="media-full-${index}" class="media media-grid media-${mediaType}">`;
+    }
+  }
+  div += `<a href=".${/*normalizedSoloNftUrl(chainId, nft)*/ ""}">`;
+  if (mediaType == "video") {
+    div += divMediaVideo(mediaSrc, small);
+  } else if (mediaType == "image") {
+    div += divMediaImage(mediaSrc);
+  } else {
+    div += "<div class=\"media-text\"></div>";
+  }
+  div += "</a></div>";
+
+  // console.log("divMedia div", div);
+  return div;
+};
+
+export { divMedia };
diff --git a/svelte/helpers/shortcodes.ts b/svelte/helpers/shortcodes.ts
new file mode 100644
index 000000000..23b3da7cf
--- /dev/null
+++ b/svelte/helpers/shortcodes.ts
@@ -0,0 +1,13 @@
+import type { NftType } from "lib/ktypes";
+import { nftName } from "lib/kconfig";
+
+const shortcode = async (_nft: NftType) => {
+  const data = `[kredeum_sell chain="${_nft.chainName}" collection="${_nft.address}" tokenid="${_nft.tokenID}" cid="${
+    _nft.image
+  }" image=50]${nftName(_nft)}[/kredeum_sell]`;
+
+  await navigator.clipboard.writeText(data).catch(() => console.log("Not copied"));
+  console.log("Copied");
+};
+
+export { shortcode };
diff --git a/svelte/tests/BreadCrumb.svelte b/svelte/tests/BreadCrumb.svelte
index ad76f5cb8..850879734 100644
--- a/svelte/tests/BreadCrumb.svelte
+++ b/svelte/tests/BreadCrumb.svelte
@@ -5,24 +5,24 @@
   import { urlHash2RefNFT } from "helpers/urlHash";
 
   import { metamaskChainId, metamaskAccount } from "main/metamask";
-  import { currentCollection, currentTokenID, currentAction } from "main/current";
+  import { /*currentCollection, currentTokenID,*/ currentAction } from "main/current";
 
   export let display = false;
 
   let refNFT: RefNFT;
 
   // INITIAL urlHash values
-  const { address, tokenID, action } = urlHash2RefNFT(window.location.hash);
+  const { /*address, tokenID,*/ action } = urlHash2RefNFT(window.location.hash);
   // console.log("INITIAL urlHash values", address, tokenID, action);
-  $currentCollection = address;
-  $currentTokenID = tokenID;
+  // $currentCollection = address;
+  // $currentTokenID = tokenID;
   $currentAction = action;
 
   // Refresh NFT ref
   $: refNFT = {
     chainId: $metamaskChainId,
-    address: $currentCollection,
-    tokenID: $currentTokenID,
+    // address: $currentCollection,
+    // tokenID: $currentTokenID,
     account: $metamaskAccount,
     action: $currentAction
   };
diff --git a/svelte/tests/CollectionListSimple.svelte b/svelte/tests/CollectionListSimple.svelte
index 73547152e..399d1275d 100644
--- a/svelte/tests/CollectionListSimple.svelte
+++ b/svelte/tests/CollectionListSimple.svelte
@@ -3,7 +3,7 @@
 
   import type { CollectionType } from "lib/ktypes";
   import { collectionStore } from "stores/collection/collection";
-  import { currentCollection } from "main/current";
+  // import { currentCollection } from "main/current";
   import CollectionSimple from "./CollectionSimple.svelte";
 
   /////////////////////////////////////////////////
@@ -17,7 +17,7 @@
   export let refreshing: boolean = undefined;
 
   let collections: Readable<Map<string, CollectionType>>;
-  let collectionDefault: Readable<string>;
+  // let collectionDefault: Readable<string>;
 
   // let i: number = 0;
   // HANDLE CHANGE : on truthy chainId and account, and whatever mintable
@@ -29,7 +29,7 @@
     collections = collectionStore.getSubListStore(chainId, account, mintable);
 
     // STATE VIEW : sync get default Collection
-    collectionDefault = collectionStore.getDefaultSubStore(chainId, mintable, account);
+    // collectionDefault = collectionStore.getDefaultSubStore(chainId, mintable, account);
 
     // ACTION : async refresh Collections
     refreshing = true;
@@ -42,17 +42,17 @@
   };
 
   // Current Collection is already defined, or is defined in url, or is default collection
-  $: ($currentCollection || $collectionDefault) && handleChangeAddress();
-  const handleChangeAddress = (): void => {
-    $currentCollection = $currentCollection || $collectionDefault;
-    address = $currentCollection;
-  };
+  // $: ($currentCollection || $collectionDefault) && handleChangeAddress();
+  // const handleChangeAddress = (): void => {
+  //   $currentCollection = $currentCollection || $collectionDefault;
+  //   address = $currentCollection;
+  // };
 
-  // STATE CHANGER : SET default Collection
-  const _setCollection = (collection: string): void => {
-    $currentCollection = collection;
-    return collectionStore.setDefaultOne(chainId, collection, mintable, account);
-  };
+  // // STATE CHANGER : SET default Collection
+  // const _setCollection = (collection: string): void => {
+  //   $currentCollection = collection;
+  //   return collectionStore.setDefaultOne(chainId, collection, mintable, account);
+  // };
 </script>
 
 {#if address}
@@ -61,7 +61,7 @@
 
 {#if collections}
   {#each [...$collections] as [key, coll]}
-    <p id={key} on:click={() => _setCollection(coll.address)}>
+    <p id={key} on:click={() => /*_setCollection(coll.address)*/ ""}>
       {coll?.name}
       {coll?.address}
     </p>
diff --git a/svelte/tests/CollectionSimple.svelte b/svelte/tests/CollectionSimple.svelte
index 5bc74c040..b6e4bef2d 100644
--- a/svelte/tests/CollectionSimple.svelte
+++ b/svelte/tests/CollectionSimple.svelte
@@ -3,7 +3,7 @@
 
   import type { CollectionType } from "lib/ktypes";
 
-  import { collectionStore } from "stores/collection/collection";
+  // import { collectionStore } from "stores/collection/collection";
 
   /////////////////////////////////////////////////
   // <Collection {chainId} {address} {account}? />
@@ -20,12 +20,10 @@
   $: account, chainId && address && handleChange();
   const handleChange = (): void => {
     // console.log(`COLLECTION CHANGE #${i++} ${collectionKey(chainId, address, account)}`);
-
     // STATE VIEW : sync get Collection
-    collection = collectionStore.getOneStore(chainId, address);
-
+    // collection = collectionStore.getOneStore(chainId, address);
     // ACTION : async refresh Collection
-    collectionStore.refreshOne(chainId, address, account).catch(console.error);
+    // collectionStore.refreshOne(chainId, address, account).catch(console.error);
   };
 </script>
 
diff --git a/svelte/tests/NftDetail.svelte b/svelte/tests/NftDetail.svelte
deleted file mode 100644
index f2540a68a..000000000
--- a/svelte/tests/NftDetail.svelte
+++ /dev/null
@@ -1,204 +0,0 @@
-<script lang="ts">
-  import type { Readable } from "svelte/store";
-
-  import type { NftType } from "lib/ktypes";
-  import { nftUrl, explorerCollectionUrl, explorerAddressLink, kredeumNftUrl } from "lib/kconfig";
-  // import { nftKey} from "lib/kconfig";
-
-  import { nftStore } from "stores/nft/nft";
-
-  export let chainId: number;
-  export let address: string;
-  export let tokenID: string;
-  export let account: string = undefined;
-
-  let nft: Readable<NftType>;
-
-  // let i = 1;
-  // HANDLE CHANGE : on truthy chainId and address, and whatever account
-  $: account, chainId && address && tokenID && handleChange();
-  const handleChange = async (): Promise<void> => {
-    // console.log(`NFTDETAIL CHANGE #${i++} ${nftKey(chainId, address, tokenID)}`);
-
-    // STATE VIEW : sync get Nft
-    nft = nftStore.getOneStore(chainId, address, tokenID);
-
-    // ACTION : async refresh Nft
-    await nftStore.refreshOne(chainId, address, tokenID);
-  };
-
-  console.info(`yo ${$nft.image}`);
-</script>
-
-<h2 class="m-b-20 return">
-  <i class="fa fa-arrow-left fa-left" /><a href="." class="link">Return to collection</a>
-</h2>
-
-<div class="row grid-detail-krd">
-  <div class="col col-xs-12 col-sm-4 col-md-3">
-    <div class="card-krd">
-      <div class="media media-photo">
-        <a href="#zoom">
-          <i class="fas fa-search" />
-          <img src={$nft.image} alt={$nft.name} />
-        </a>
-      </div>
-    </div>
-  </div>
-
-  <div class="col col-xs-12 col-sm-8 col-md-9">
-    <div class="card-krd">
-      <h3>{$nft.name}</h3>
-      <p>
-        {$nft.description}
-      </p>
-
-      <ul class="steps">
-        <li>
-          <div class="flex"><span class="label"><strong>Token ID</strong></span></div>
-          <div class="flex"><strong>#{$nft.tokenID}</strong></div>
-        </li>
-        <li>
-          <div class="flex"><span class="label">Owner</span></div>
-          <div class="flex">{@html explorerAddressLink($nft.chainId, $nft.owner, 15)}</div>
-        </li>
-        <li>
-          <div class="flex"><span class="label">Permanent link</span></div>
-          <div class="flex">
-            <a
-              class="link overflow-ellipsis"
-              href={kredeumNftUrl($nft.chainId, $nft)}
-              title={nftUrl($nft, 10)}
-              target="_blank"
-            >
-              {@html nftUrl($nft, 10)}
-            </a>
-          </div>
-        </li>
-        <li>
-          <div class="flex"><span class="label">collection @</span></div>
-          <div class="flex">
-            <a
-              class="link overflow-ellipsis"
-              href={explorerCollectionUrl($nft.chainId, $nft?.address)}
-              title={$nft.address}
-              target="_blank"
-            >
-              {$nft.address}
-            </a>
-          </div>
-        </li>
-        <li>
-          <div class="flex"><span class="label">Metadata ipfs</span></div>
-          <div class="flex">
-            <a class="link overflow-ellipsis" href={$nft.tokenURI} title={$nft.ipfsJson} target="_blank"
-              >{$nft.ipfsJson}</a
-            >
-          </div>
-        </li>
-        <li>
-          <div class="flex"><span class="label">Image</span></div>
-          <div class="flex">
-            <a class="link overflow-ellipsis" href={$nft.image} title={$nft.ipfs} target="_blank">
-              {$nft.ipfs}
-            </a>
-          </div>
-        </li>
-      </ul>
-
-      <div class="p-t-40 p-b-40 grid-buttons">
-        <a href="#schortcodes" class="btn btn-small btn-outline" title="Get shortcode"
-          ><i class="fa fa-code" /><span>Get shortcode</span></a
-        >
-        <a href="#gift" class="btn btn-small btn-outline" title="Make a gift"
-          ><i class="fa fa-gift" /><span>Make a gift</span></a
-        >
-
-        <a href="." class="btn btn-small btn-sell" title="Sell">Sell</a>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Modales of detail view -->
-<!-- Modal Zoom -->
-<div id="zoom" class="modal-window">
-  <div>
-    <div class="modal-content">
-      <a href="." title="Close" class="modal-close"><i class="fa fa-times" /></a>
-      <div class="modal-body">
-        <div class="media media-photo">
-          <a href="#zoom"><img src={$nft.image} alt={$nft.name} /></a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Modal Shortcodes -->
-<div id="schortcodes" class="modal-window">
-  <div>
-    <div class="modal-content">
-      <a href="." title="Close" class="modal-close"><i class="fa fa-times" /></a>
-      <div class="modal-body">
-        <div class="titre">
-          <i class="fas fa-code fa-left c-green" />
-          Shortcodes
-        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac felis a sapien lobortis finibus nec vel
-          lectus.
-        </p>
-
-        <ul class="steps">
-          <li>
-            <div class="flex"><span class="label">Sell direclty on Opensea</span></div>
-            <div class="flex"><a class="btn btn-small btn-outline" href="." title="Copy">Copy</a></div>
-          </li>
-          <li>
-            <div class="flex"><span class="label">Sell direclty on Gamestop</span></div>
-            <div class="flex"><a class="btn btn-small btn-outline" href="." title="Copy">Copy</a></div>
-          </li>
-          <li>
-            <div class="flex"><span class="label">Mint on your front page</span></div>
-            <div class="flex"><a class="btn btn-small btn-outline" href="." title="Copy">Copy</a></div>
-          </li>
-          <li>
-            <div class="flex"><span class="label">Sell directly without market-places</span></div>
-            <div class="flex"><a class="btn btn-small btn-outline" href="." title="Copy">Copy</a></div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Modal gift -->
-<div id="gift" class="modal-window">
-  <div>
-    <div class="modal-content">
-      <a href="." title="Close" class="modal-close"><i class="fa fa-times" /></a>
-      <div class="modal-body">
-        <div class="titre">
-          <i class="fas fa-gift fa-left c-green" />
-          Make a gift
-        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac felis a sapien lobortis finibus nec vel
-          lectus.
-        </p>
-
-        <form method="POST" action="" enctype="multipart/form-data">
-          <div class="section">
-            <div class="form-field">
-              <input type="text" id="gift" name="gift" placeholder="Enter the recipient's address" />
-            </div>
-          </div>
-          <div class="txtright">
-            <button class="btn btn-default btn-sell" type="submit">Send</button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/wordpress/plugins/kredeum-nfts/common/shortcode/shortcode.php b/wordpress/plugins/kredeum-nfts/common/shortcode/shortcode.php
index 59140ae4c..7c9b85922 100644
--- a/wordpress/plugins/kredeum-nfts/common/shortcode/shortcode.php
+++ b/wordpress/plugins/kredeum-nfts/common/shortcode/shortcode.php
@@ -46,7 +46,7 @@ function ( $atts = array(), $content = null, $tag = '' ) {
 		$o .= 'Buy NFT: ' . $content;
 		$o .= '</button></a>';
 		if ( isset( $args['image'] ) && ( $args['image'] > 0 ) ) {
-			$o .= '<br><br><div><img src="https://ipfs.io/ipfs/' . $args['cid'] . '" width="' . $args['image'] . '%"></img></div>';
+			$o .= '<br><br><div><img src="' . $args['cid'] . '" width="' . $args['image'] . '%"></img></div>';
 		}
 		$o .= '</div>';
 		return $o;