templates/explorer/includes/asset-card.html.twig line 1

  2. <div class="grid-x nft-container glow-{{ nftMetadata.template.tier }}">
  3.     <div class="small-12 large-12 cell">
  4.         <div class="template-nft">
  5.             <a href="{{ path('explorer_asset_detail', { id: nftMetadata.nftHub.id }) }}">
  6.             <img src="{{ nftMetadata.imageUrl }}" />
  7.             </a>
  8.             <div class="mint-num">#{{ nftMetadata.mint }}</div>
  9. {#            <div style="display: block; background: #1d232d; padding: 7px; border-radius: 10px; font-size: 1em; margin: 5px;">#}
  10. {#                <span><span style="font-weight:bold; color: dodgerblue; margin-right: 2px;">L</span>{{ (nftMetadata.statStar is defined) ? nftMetadata.statStar : nftMetadata.luck }}</span>#}
  11. {#                <span><span style="font-weight:bold; color: dodgerblue; margin-right: 2px;">D</span>{{ (nftMetadata.statRectangle is defined) ? nftMetadata.statRectangle : nftMetadata.distance }}</span>#}
  12. {#                <span><span style="font-weight:bold; color: dodgerblue; margin-right: 2px;">T</span>{{ (nftMetadata.statCircle is defined) ? nftMetadata.statCircle : nftMetadata.tension }}</span>#}
  13. {#            </div>#}
  14.             <div style="display: block; margin: 7px 10px 10px 0;">
  15.                 {% if nftMetadata.template.genus.id != 3 %}
  16.                 <span style="font-weight: bold; font-size: 1em; float: right; margin-left: 5px; color: goldenrod"><em>{{ nftMetadata.score }}</em></span>
  17.                 <span style="font-weight: bold; font-size: 1em; float: right;">{{ nftMetadata.grade }}</span>
  18.                 <div style="height: 10px; width: 10px; border-radius: 8px; float: right; margin: 7px;" class="bg-tier-{{ (nftMetadata.template.tier is defined) ? nftMetadata.template.tier : nftMetadata.tier }}"></div>
  19.                 <img data-tooltip aria-haspopup="true" class="has-tip" title="{{ nftMetadata.schoolOfMagic.name }}" style="border-bottom: 0; height: 20px; width: 20px; float: right;" src="{{ asset('/build/images/web/icon-' ~ nftMetadata.schoolOfMagic.name|lower ~ '.png') }}" />
  21.                 {% endif %}
  22.                 <div style="float: left; padding: 3px 3px 3px 12px; font-size: .8em;">
  23.                     {% if nftMetadata.nftHub.activeMarketItem is not empty%}
  24.                         {# If Market Item exists, look for username attached to Market Item Seller #}
  25.                         {% if nftMetadata.nftHub.activeMarketItem|first.seller.user.username is defined and nftMetadata.nftHub.activeMarketItem|first.seller.user.username|length <= 10 %}
  26.                             {{ nftMetadata.nftHub.activeMarketItem|first.seller.user.username }}
  27.                         {% elseif nftMetadata.nftHub.activeMarketItem|first.seller.user.username is defined %}
  28.                             {{ nftMetadata.nftHub.activeMarketItem|first.seller.user.username|slice(0,10) ~ '...' }}
  29.                         {% endif %}
  30.                     {% else %}
  31.                         {# Otherwise look for username attached to NFT #}
  32.                         {% if nftMetadata.nftHub.thetaWallet.user.username is defined and nftMetadata.nftHub.thetaWallet.user.username| length <= 10 %}
  33.                             {{ nftMetadata.nftHub.thetaWallet.user.username }}
  34.                         {% elseif nftMetadata.nftHub.thetaWallet.user.username is defined %}
  35.                             {{ nftMetadata.nftHub.thetaWallet.user.username|slice(0,10) ~ '...' }}
  36.                         {% endif %}
  37.                     {% endif %}
  38.                 </div>
  39.                 <div style="clear: both;"></div>
  41.             </div>
  42.             <div style="display: block; padding: 0 12px 12px 12px; text-align: left;">
  43.                 <span style="font-size: .6em; text-align: left; display: block;">Series {{ nftMetadata.nftCollection.series }}</span>
  44.                 <span style="font-size: .8em; text-align: left; display: block; font-weight: bold;">{{ nftMetadata.nftCollection.name }}</span>
  45.                 <span style="text-align: left; font-size: 1em; font-weight: bold; display: block;">{{ nftMetadata.name|length > 18 ? nftMetadata.name|slice(0,18) ~ '...' : nftMetadata.name }}</span>
  46.                 <div style="font-weight: bold; text-align: left; display: block; min-height: 25px; vertical-align: center; margin-top: 10px;">
  47.                 {% if nftMetadata.nftHub.activeMarketItem is not empty %}
  48.                     <img height="20" width="20" src="{{ asset('build/images/web/tfuel-logo.svg') }}" style="vertical-align: top;" />
  49.                     <span class="market-price-{{ nftMetadata.nftHub.activeMarketItem|first.id }}" style="color: #ffa50d; font-size: .9em; vertical-align: top;">{{ nftMetadata.nftHub.activeMarketItem|first.price|number_format(2,'.',',')  }}</span> <span style="color: #ffa50d; font-size: .9em; vertical-align: top;">TFUEL</span>
  50.                 {% endif %}
  51.                 </div>
  52.             </div>
  53.             <div style="padding: 3px;">
  54.                 {# MARKET OFFER LOGIC ------------------------------------------------------------------------------- #}
  55.                 {% if nftMetadata.nftHub.thetaWallet.address != '0x000000000000000000000000000000000000dEaD' %} {# already opened #}
  56.                     {% if nftMetadata.nftHub.isMinted is same as(true) %}
  57.                         {% if app.user %} {# If not logged in, show Market Offer button that links to app_login #}
  58.                             {% if app.user.activeWallet is defined %} {# If wallet is not defined they cannot interact with the market #}
  59.                                 {% if (app.user.activeWallet != nftMetadata.nftHub.thetaWallet) and
  60.                                     ((nftMetadata.nftHub.activeMarketItem is empty) or (nftMetadata.nftHub.activeMarketItem is not empty and nftMetadata.nftHub.activeMarketItem|first.seller != app.user.activeWallet)) %}
  61.                                     {# Two possibilities:
  62.                                         1) Item is listed for sale, so the owning wallet is the market address,
  63.                                         2) item is not listed and does not belong to the user #}
  64.                                     {# Scenario 1: Item is listed on Market and current user does not own item / is not the seller #}
  65.                                     {# See if current user has an existing offer #}
  66.                                     {% set activeOffer = null %}
  67.                                     {% for offer in nftMetadata.nftHub.activeMarketOffers %}
  68.                                         {% if offer.bidder == app.user.activeWallet %}
  69.                                             {% set activeOffer = offer %}
  70.                                         {% endif %}
  71.                                     {% endfor %}
  72.                                     {% if activeOffer is not null %}
  73.                                         {# If current user has an existing offer, show Update and Cancel buttons #}
  74.                                         <button class="double-button-left button orange-button initiateUpdateMarketOffer {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" data-open="updateMarketOffer-{{ nftMetadata.nftHub.id }}" style="width: 50%; display: block; float: left; font-size: .8em; font-weight: bold;">Update Offer</button>
  75.                                         {% include 'marketplace/modals/updateMarketOffer.html.twig' with {'marketOffer' : activeOffer, 'assetMetadata' : nftMetadata, 'app': app } %}
  76.                                         <button class="double-button-right button orange-button initiateCancelMarketOffer {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" data-open="cancelMarketOffer-{{ nftMetadata.nftHub.id }}" style="width: 50%; display: block; float: left; font-size: .8em; font-weight: bold;">Cancel Offer</button>
  77.                                         {% include 'marketplace/modals/cancelMarketOffer.html.twig' with {'marketOffer' : activeOffer, 'assetMetadata' : nftMetadata, 'app': app } %}
  78.                                         <div style="clear: both;"></div>
  79.                                     {% elseif not app.user.activeWallet %}
  80.                                         <button class="button orange-button initiateCreateMarketOffer connect-wallet" data-open="connect-wallet-modal" style="width: 100%; font-size: .8em; font-weight: bold;">Make Offer</button>
  81.                                         <button class="button orange-button initiateCreateMarketOffer" data-open="createMarketOffer-{{ nftMetadata.nftHub.id }}" style="width: 100%; font-size: .8em; font-weight: bold; display: none;">Make Offer</button>
  82.                                     {% else %}
  83.                                         {# If current user does not have an existing offer, show Make Offer button #}
  84.                                         <button class="button orange-button initiateCreateMarketOffer {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" data-open="createMarketOffer-{{ nftMetadata.nftHub.id }}" style="width: 100%; font-size: .8em; font-weight: bold;">MAKE OFFER</button>
  85.                                     {% endif %}
  86.                                     {% include 'marketplace/modals/createMarketOffer.html.twig' with {'assetMetadata' : nftMetadata, 'app': app } %}
  87.                                 {% else %} {# User owns this item, so show View Offers button #}
  88.                                     <button onclick="window.location.href='{{ url('explorer_asset_detail', { id: nftMetadata.nftHub.id }) }}#asset-offers';" class="button view-offers orange-button" style="width: 100%; font-size: .8em; font-weight: bold;" {{ nftMetadata.nftHub.activeMarketOffers|length == 0 ? 'disabled' : '' }}>View Offers ({{ nftMetadata.nftHub.activeMarketOffers|length }})</button>
  89.                                 {% endif %}
  90.                             {% else %} {# No wallet connected #}
  91.                                 Button to connect wallet
  92.                             {% endif %}
  93.                         {% else %} {# Not logged in #}
  94.                             <a class="button orange-button initiateCreateMarketOffer"  style="width: 100%; font-size: .8em; font-weight: bold;" href="{{ path('app_login') }}" />MAKE OFFER</a>
  95.                         {% endif %}
  97.                     {% else %} {# NFT not minted #}
  98.                         <button class="button orange-button" data-open="createMarketOffer-{{ nftMetadata.nftHub.id }}" style="width: 100%; font-size: .8em; font-weight: bold; background-color: #333" disabled>View Offers (0)</button>
  99.                     {% endif %}
  101.                 {% else %}
  102.                     <button class="button orange-button" data-open="createMarketOffer-{{ nftMetadata.nftHub.id }}" style="width: 100%; font-size: .8em; font-weight: bold; background-color: #333" disabled>MAKE OFFER</button>
  103.                 {% endif %}
  105.                 {# MARKET ITEM LOGIC -------------------------------------------------------------------------------- #}
  106.                 {% if app.user %} {# If not logged in, show BUY NOW button that links to app_login #}
  107.                     {% if app.user.activeWallet is defined %} {# If wallet is not defined they cannot interact with the market #}
  109.                         {% if nftMetadata.nftHub.activeMarketItem is not empty %} {# Item is listed for sale in Market #}
  110.                             {# If user is the owner/seller of the item so buttons specific to Market Contract version #}
  111.                             {% if app.user.activeWallet == nftMetadata.nftHub.activeMarketItem|first.seller %}
  112.                                 {# Check which Market Contract item is listed on and show appropriate buttons #}
  113.                                 {% if nftMetadata.nftHub.activeMarketItem|first.marketContract.id == 3 %}
  114.                                     <button class="double-button-left-w-curve button initiateUpdateMarketItem {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" data-open="updateMarketItem-{{ nftMetadata.nftHub.activeMarketItem|first.id }}" style="width: 50%; float: left; font-size: .8em; font-weight: bold;">Update</button>
  115.                                     <button class="double-button-right-w-curve button initiateCancelMarketItem {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" data-open="cancelMarketItem-{{ nftMetadata.nftHub.activeMarketItem|first.id }}" style="width: 50%; float: left; font-size: .8em; font-weight: bold;">Cancel</button>
  116.                                 {% else %}
  117.                                     <a class="button orange-button initiateCancelMarketItem {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" data-open="cancelMarketItem-{{ nftMetadata.nftHub.activeMarketItem|first.id }}" style="width: 100%; font-size: .8em; font-weight: bold;">Cancel</a>
  118.                                 {% endif %}
  119.                                 {% include 'marketplace/modals/createMarketCancel.html.twig' with {'marketItem': nftMetadata.nftHub.activeMarketItem|first, 'app': app } %}
  120.                                 {% include 'marketplace/modals/updateMarketItem.html.twig' with {'assetMetadata' : nftMetadata, 'marketItem' : nftMetadata.nftHub.activeMarketItem|first, 'app' : app } %}
  121.                             {# If user does not have an active wallet change button to open Connect Wallet Modal #}
  122.                             {% elseif not app.user.activeWallet %}
  123.                                 <button class="button orange-button initiateTransactMarketItem connect-wallet" data-open="connect-wallet-modal" style="width: 100%; font-size: .8em; font-weight: bold;">BUY NOW</button>
  124.                                 <button class="button orange-button initiateTransactMarketItem {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}"
  125.                                         data-open="transactMarketItem-{{ nftMetadata.nftHub.activeMarketItem|first.id }}"
  126.                                         style="width: 100%; font-size: .8em; font-weight: bold; display: none;">BUY NOW
  127.                                 </button>
  128.                             {# If user is not the owner/seller show BUY NOW button #}
  129.                             {% else %}
  130.                                 {# If user has an existing offer on this item they must cancel that offer before Buying #}
  131.                                 {# We already looped through this above, so we can just reuse activeOffer here #}
  132.                                 {% if activeOffer is defined and activeOffer is not null %}
  133.                                     <button class="button orange-button initiateTransactMarketItem"
  134.                                             data-open="conflict-cancelMarketOffer-{{ nftMetadata.nftHub.activeMarketItem|first.id }}"
  135.                                             style="width: 100%; font-size: .8em; font-weight: bold;">BUY NOW
  136.                                     </button>
  137.                                     <div class="reveal" id="conflict-cancelMarketOffer-{{ nftMetadata.nftHub.activeMarketItem|first.id }}" data-reveal
  138.                                          style="text-align: center; background: #1f1f29; border-radius: 15px; border: none;">
  139.                                         <h1>Active Offer Exists</h1>
  140.                                         <img height="100" width="100" src="{{ asset('build/images/web/warning.svg') }}" />
  141.                                         <p>You must cancel your offer for this item before you can purchase from the Market.</p>
  142.                                         <button class="close-button" data-close aria-label="Close modal" type="button">
  143.                                             <span aria-hidden="true">&times;</span>
  144.                                         </button>
  145.                                     </div>
  146.                                 {% else %}
  147.                                     <button class="button orange-button initiateTransactMarketItem {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}"
  148.                                             data-open="transactMarketItem-{{ nftMetadata.nftHub.activeMarketItem|first.id }}"
  149.                                             style="width: 100%; font-size: .8em; font-weight: bold;">BUY NOW
  150.                                     </button>
  151.                                 {% endif %}
  152.                             {% endif %}
  153.                             {% include 'marketplace/modals/transactMarketItem.html.twig' with {'marketItem': nftMetadata.nftHub.activeMarketItem|first, 'app': app } %}
  155.                         {% else %} {# Item not for sale #}
  156.                             {# If current user is the owner show Sell button #}
  157.                             {% if app.user.activeWallet == nftMetadata.nftHub.thetaWallet %}
  159.                                 {% if nftMetadata.nftHub.isMinted is same as(true) %}
  161.                                     {# If the NFT is a crate #}
  162.                                     {% if nftMetadata.template.genus.name == 'crate' %}
  163.                                         {% if nftMetadata.nftHub.crateActionLog.isOpened is same as(null) %}
  164.                                             {% if app.user.activeWallet.isApprovedForAllMarketCrate is same as(true) %}
  165.                                                 <button class="button orange-button initiateCreateMarketItem {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" style="width: 100%; font-weight: bold; font-size: .8em; color: #fff;" data-open="createMarketItem-{{ nftMetadata.nftHub.id }}">Sell</button>
  166.                                                 {% include 'marketplace/modals/createMarketItem.html.twig' with {'assetMetadata': nftMetadata, 'app': app } %}
  167.                                             {% else %}
  168.                                                 <button class="button orange-button initiateCreateMarketItem" style="width: 100%; font-weight: bold; font-size: .8em; display: none; color: #fff;" data-open="createMarketItem-{{ nftMetadata.nftHub.id }}">Sell</button>
  169.                                                 {% include 'marketplace/modals/setApprovalForAll.html.twig' with {'assetMetadata': nftMetadata, 'app': app, 'buttonText': 'Sell'} %}
  170.                                                 {% include 'marketplace/modals/createMarketItem.html.twig' with {'assetMetadata': nftMetadata, 'app': app, 'hideSellButton': true } %}
  171.                                             {% endif %}
  172.                                         {% else %}
  173.                                             <button class="button orange-button initiateCreateMarketItem inactive" style="width: 100%; font-weight: bold; font-size: .8em; color: #fff;" data-open="createMarketItem-{{ nftMetadata.nftHub.id }}" disabled>Sell</button>
  174.                                         {% endif %}
  175.                                     {% endif %}
  177.                                     {# If the NFT is not a crate #}
  178.                                     {% if nftMetadata.template.genus.name != 'crate' %}
  179.                                         {# If the wallet has approved the Market Contract then show Sell button #}
  180.                                         {% if app.user.activeWallet.isApprovedForAllMarket2 is same as(true) %}
  181.                                             <button class="button orange-button initiateCreateMarketItem {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" style="width: 100%; font-weight: bold; font-size: .8em; color: #fff;" data-open="createMarketItem-{{ nftMetadata.nftHub.id }}">Sell</button>
  182.                                             {% include 'marketplace/modals/createMarketItem.html.twig' with {'assetMetadata': nftMetadata, 'app': app } %}
  183.                                         {# If the wallet has not approved Market contract, show sell button but open Permission Modal (this fades to Sell button after success) #}
  184.                                         {% else %}
  185.                                             <button class="button orange-button initiateCreateMarketItem" style="width: 100%; font-weight: bold; font-size: .8em; display: none; color: #fff;" data-open="createMarketItem-{{ nftMetadata.nftHub.id }}">Sell</button>
  186.                                             {% include 'marketplace/modals/setApprovalForAll.html.twig' with {'assetMetadata': nftMetadata, 'app': app, 'buttonText': 'Sell'} %}
  187.                                             {% include 'marketplace/modals/createMarketItem.html.twig' with {'assetMetadata': nftMetadata, 'app': app, 'hideSellButton': true } %}
  188.                                         {% endif %}
  189.                                     {% endif %}
  190.                                 {% else %} {# Item not minted yet (drop from crate) #}
  191.                                     <button class="button orange-button initiateCreateMarketItem inactive" style="width: 100%; font-weight: bold; font-size: .8em; color: #fff;" data-open="createMarketItem-{{ nftMetadata.nftHub.id }}" disabled>Sell</button>
  192.                                 {% endif %}
  194.                             {# If current user is not owner and item is not listed for sale #}
  195.                             {% else %}
  196.                                 <button class="button orange-button"
  197.                                         style="width: 100%; font-size: .8em; font-weight: bold; color: #666; background-color: #333;" disabled>Not for Sale
  198.                                 </button>
  199.                             {% endif %}
  200.                         {% endif %}
  201.                     {% else %} {# No wallet connected #}
  202.                         Button to connect wallet
  203.                     {% endif %}
  204.                 {% else %} {# Not logged in #}
  205.                     {% if nftMetadata.nftHub.activeMarketItem is not empty %}
  206.                         <a class="button orange-button initiatetransactMarketItem"  style="width: 100%; font-size: .8em; font-weight: bold;" href="{{ path('app_login') }}" />BUY NOW</a>
  207.                     {% else %}
  208.                         <button class="button orange-button"  style="width: 100%; font-size: .8em; font-weight: bold; background: #333;" disabled />BUY NOW</a>
  209.                     {% endif %}
  210.                 {% endif %}
  212.                 {% if marketItem is defined and marketItem is not same as(null) and marketItem.isSold is same as(true) %}
  213.                     <span style="font-size: .8em; padding: 5px; display: block; font-weight: bold; margin: 10px; border-radius: 5px;"><em>{{ marketItem.updatedAt|date }}</em></span>
  214.                 {% endif %}
  215.             </div>
  216.         </div>
  217.     </div>
  218. </div>