templates/explorer/includes/asset-card.html.twig line 1
<div class="grid-x nft-container glow-{{ nftMetadata.template.tier }}">
<div class="small-12 large-12 cell">
<div class="template-nft">
<a href="{{ path('explorer_asset_detail', { id: nftMetadata.nftHub.id }) }}">
<img src="{{ nftMetadata.imageUrl }}" />
</a>
<div class="mint-num">#{{ nftMetadata.mint }}</div>
{# <div style="display: block; background: #1d232d; padding: 7px; border-radius: 10px; font-size: 1em; margin: 5px;">#}
{# <span><span style="font-weight:bold; color: dodgerblue; margin-right: 2px;">L</span>{{ (nftMetadata.statStar is defined) ? nftMetadata.statStar : nftMetadata.luck }}</span>#}
{# <span><span style="font-weight:bold; color: dodgerblue; margin-right: 2px;">D</span>{{ (nftMetadata.statRectangle is defined) ? nftMetadata.statRectangle : nftMetadata.distance }}</span>#}
{# <span><span style="font-weight:bold; color: dodgerblue; margin-right: 2px;">T</span>{{ (nftMetadata.statCircle is defined) ? nftMetadata.statCircle : nftMetadata.tension }}</span>#}
{# </div>#}
<div style="display: block; margin: 7px 10px 10px 0;">
{% if nftMetadata.template.genus.id != 3 %}
<span style="font-weight: bold; font-size: 1em; float: right; margin-left: 5px; color: goldenrod"><em>{{ nftMetadata.score }}</em></span>
<span style="font-weight: bold; font-size: 1em; float: right;">{{ nftMetadata.grade }}</span>
<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>
<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') }}" />
{% endif %}
<div style="float: left; padding: 3px 3px 3px 12px; font-size: .8em;">
{% if nftMetadata.nftHub.activeMarketItem is not empty%}
{# If Market Item exists, look for username attached to Market Item Seller #}
{% if nftMetadata.nftHub.activeMarketItem|first.seller.user.username is defined and nftMetadata.nftHub.activeMarketItem|first.seller.user.username|length <= 10 %}
{{ nftMetadata.nftHub.activeMarketItem|first.seller.user.username }}
{% elseif nftMetadata.nftHub.activeMarketItem|first.seller.user.username is defined %}
{{ nftMetadata.nftHub.activeMarketItem|first.seller.user.username|slice(0,10) ~ '...' }}
{% endif %}
{% else %}
{# Otherwise look for username attached to NFT #}
{% if nftMetadata.nftHub.thetaWallet.user.username is defined and nftMetadata.nftHub.thetaWallet.user.username| length <= 10 %}
{{ nftMetadata.nftHub.thetaWallet.user.username }}
{% elseif nftMetadata.nftHub.thetaWallet.user.username is defined %}
{{ nftMetadata.nftHub.thetaWallet.user.username|slice(0,10) ~ '...' }}
{% endif %}
{% endif %}
</div>
<div style="clear: both;"></div>
</div>
<div style="display: block; padding: 0 12px 12px 12px; text-align: left;">
<span style="font-size: .6em; text-align: left; display: block;">Series {{ nftMetadata.nftCollection.series }}</span>
<span style="font-size: .8em; text-align: left; display: block; font-weight: bold;">{{ nftMetadata.nftCollection.name }}</span>
<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>
<div style="font-weight: bold; text-align: left; display: block; min-height: 25px; vertical-align: center; margin-top: 10px;">
{% if nftMetadata.nftHub.activeMarketItem is not empty %}
<img height="20" width="20" src="{{ asset('build/images/web/tfuel-logo.svg') }}" style="vertical-align: top;" />
<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>
{% endif %}
</div>
</div>
<div style="padding: 3px;">
{# MARKET OFFER LOGIC ------------------------------------------------------------------------------- #}
{% if nftMetadata.nftHub.thetaWallet.address != '0x000000000000000000000000000000000000dEaD' %} {# already opened #}
{% if nftMetadata.nftHub.isMinted is same as(true) %}
{% if app.user %} {# If not logged in, show Market Offer button that links to app_login #}
{% if app.user.activeWallet is defined %} {# If wallet is not defined they cannot interact with the market #}
{% if (app.user.activeWallet != nftMetadata.nftHub.thetaWallet) and
((nftMetadata.nftHub.activeMarketItem is empty) or (nftMetadata.nftHub.activeMarketItem is not empty and nftMetadata.nftHub.activeMarketItem|first.seller != app.user.activeWallet)) %}
{# Two possibilities:
1) Item is listed for sale, so the owning wallet is the market address,
2) item is not listed and does not belong to the user #}
{# Scenario 1: Item is listed on Market and current user does not own item / is not the seller #}
{# See if current user has an existing offer #}
{% set activeOffer = null %}
{% for offer in nftMetadata.nftHub.activeMarketOffers %}
{% if offer.bidder == app.user.activeWallet %}
{% set activeOffer = offer %}
{% endif %}
{% endfor %}
{% if activeOffer is not null %}
{# If current user has an existing offer, show Update and Cancel buttons #}
<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>
{% include 'marketplace/modals/updateMarketOffer.html.twig' with {'marketOffer' : activeOffer, 'assetMetadata' : nftMetadata, 'app': app } %}
<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>
{% include 'marketplace/modals/cancelMarketOffer.html.twig' with {'marketOffer' : activeOffer, 'assetMetadata' : nftMetadata, 'app': app } %}
<div style="clear: both;"></div>
{% elseif not app.user.activeWallet %}
<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>
<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>
{% else %}
{# If current user does not have an existing offer, show Make Offer button #}
<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>
{% endif %}
{% include 'marketplace/modals/createMarketOffer.html.twig' with {'assetMetadata' : nftMetadata, 'app': app } %}
{% else %} {# User owns this item, so show View Offers button #}
<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>
{% endif %}
{% else %} {# No wallet connected #}
Button to connect wallet
{% endif %}
{% else %} {# Not logged in #}
<a class="button orange-button initiateCreateMarketOffer" style="width: 100%; font-size: .8em; font-weight: bold;" href="{{ path('app_login') }}" />MAKE OFFER</a>
{% endif %}
{% else %} {# NFT not minted #}
<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>
{% endif %}
{% else %}
<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>
{% endif %}
{# MARKET ITEM LOGIC -------------------------------------------------------------------------------- #}
{% if app.user %} {# If not logged in, show BUY NOW button that links to app_login #}
{% if app.user.activeWallet is defined %} {# If wallet is not defined they cannot interact with the market #}
{% if nftMetadata.nftHub.activeMarketItem is not empty %} {# Item is listed for sale in Market #}
{# If user is the owner/seller of the item so buttons specific to Market Contract version #}
{% if app.user.activeWallet == nftMetadata.nftHub.activeMarketItem|first.seller %}
{# Check which Market Contract item is listed on and show appropriate buttons #}
{% if nftMetadata.nftHub.activeMarketItem|first.marketContract.id == 3 %}
<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>
<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>
{% else %}
<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>
{% endif %}
{% include 'marketplace/modals/createMarketCancel.html.twig' with {'marketItem': nftMetadata.nftHub.activeMarketItem|first, 'app': app } %}
{% include 'marketplace/modals/updateMarketItem.html.twig' with {'assetMetadata' : nftMetadata, 'marketItem' : nftMetadata.nftHub.activeMarketItem|first, 'app' : app } %}
{# If user does not have an active wallet change button to open Connect Wallet Modal #}
{% elseif not app.user.activeWallet %}
<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>
<button class="button orange-button initiateTransactMarketItem {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}"
data-open="transactMarketItem-{{ nftMetadata.nftHub.activeMarketItem|first.id }}"
style="width: 100%; font-size: .8em; font-weight: bold; display: none;">BUY NOW
</button>
{# If user is not the owner/seller show BUY NOW button #}
{% else %}
{# If user has an existing offer on this item they must cancel that offer before Buying #}
{# We already looped through this above, so we can just reuse activeOffer here #}
{% if activeOffer is defined and activeOffer is not null %}
<button class="button orange-button initiateTransactMarketItem"
data-open="conflict-cancelMarketOffer-{{ nftMetadata.nftHub.activeMarketItem|first.id }}"
style="width: 100%; font-size: .8em; font-weight: bold;">BUY NOW
</button>
<div class="reveal" id="conflict-cancelMarketOffer-{{ nftMetadata.nftHub.activeMarketItem|first.id }}" data-reveal
style="text-align: center; background: #1f1f29; border-radius: 15px; border: none;">
<h1>Active Offer Exists</h1>
<img height="100" width="100" src="{{ asset('build/images/web/warning.svg') }}" />
<p>You must cancel your offer for this item before you can purchase from the Market.</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
{% else %}
<button class="button orange-button initiateTransactMarketItem {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}"
data-open="transactMarketItem-{{ nftMetadata.nftHub.activeMarketItem|first.id }}"
style="width: 100%; font-size: .8em; font-weight: bold;">BUY NOW
</button>
{% endif %}
{% endif %}
{% include 'marketplace/modals/transactMarketItem.html.twig' with {'marketItem': nftMetadata.nftHub.activeMarketItem|first, 'app': app } %}
{% else %} {# Item not for sale #}
{# If current user is the owner show Sell button #}
{% if app.user.activeWallet == nftMetadata.nftHub.thetaWallet %}
{% if nftMetadata.nftHub.isMinted is same as(true) %}
{# If the NFT is a crate #}
{% if nftMetadata.template.genus.name == 'crate' %}
{% if nftMetadata.nftHub.crateActionLog.isOpened is same as(null) %}
{% if app.user.activeWallet.isApprovedForAllMarketCrate is same as(true) %}
<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>
{% include 'marketplace/modals/createMarketItem.html.twig' with {'assetMetadata': nftMetadata, 'app': app } %}
{% else %}
<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>
{% include 'marketplace/modals/setApprovalForAll.html.twig' with {'assetMetadata': nftMetadata, 'app': app, 'buttonText': 'Sell'} %}
{% include 'marketplace/modals/createMarketItem.html.twig' with {'assetMetadata': nftMetadata, 'app': app, 'hideSellButton': true } %}
{% endif %}
{% else %}
<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>
{% endif %}
{% endif %}
{# If the NFT is not a crate #}
{% if nftMetadata.template.genus.name != 'crate' %}
{# If the wallet has approved the Market Contract then show Sell button #}
{% if app.user.activeWallet.isApprovedForAllMarket2 is same as(true) %}
<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>
{% include 'marketplace/modals/createMarketItem.html.twig' with {'assetMetadata': nftMetadata, 'app': app } %}
{# If the wallet has not approved Market contract, show sell button but open Permission Modal (this fades to Sell button after success) #}
{% else %}
<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>
{% include 'marketplace/modals/setApprovalForAll.html.twig' with {'assetMetadata': nftMetadata, 'app': app, 'buttonText': 'Sell'} %}
{% include 'marketplace/modals/createMarketItem.html.twig' with {'assetMetadata': nftMetadata, 'app': app, 'hideSellButton': true } %}
{% endif %}
{% endif %}
{% else %} {# Item not minted yet (drop from crate) #}
<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>
{% endif %}
{# If current user is not owner and item is not listed for sale #}
{% else %}
<button class="button orange-button"
style="width: 100%; font-size: .8em; font-weight: bold; color: #666; background-color: #333;" disabled>Not for Sale
</button>
{% endif %}
{% endif %}
{% else %} {# No wallet connected #}
Button to connect wallet
{% endif %}
{% else %} {# Not logged in #}
{% if nftMetadata.nftHub.activeMarketItem is not empty %}
<a class="button orange-button initiatetransactMarketItem" style="width: 100%; font-size: .8em; font-weight: bold;" href="{{ path('app_login') }}" />BUY NOW</a>
{% else %}
<button class="button orange-button" style="width: 100%; font-size: .8em; font-weight: bold; background: #333;" disabled />BUY NOW</a>
{% endif %}
{% endif %}
{% if marketItem is defined and marketItem is not same as(null) and marketItem.isSold is same as(true) %}
<span style="font-size: .8em; padding: 5px; display: block; font-weight: bold; margin: 10px; border-radius: 5px;"><em>{{ marketItem.updatedAt|date }}</em></span>
{% endif %}
</div>
</div>
</div>
</div>