templates/explorer/asset-detail.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Marketplace{% endblock %}
  5. {% block body %}
  6.     <div id="crate-contents" style="display: none; padding-top: 15%;">
  7.         <div class="grid-container">
  8.             <div class="grid-x grid-padding-x grid-padding-y crate-contents align-center">
  9.                 <div class="small-12 medium-4 cell">
  10.                     <img class="crate" src="{{ asset("/build/images/web/front-crate.png") }}" />
  11.                 </div>
  12.             </div>
  13.             <div class="grid-x">
  14.                 <div class="small-12 cell">
  15.                     <p style="font-size: .9em; text-align: center;">Please note that it may take up to 5 minutes for the NFT to process and show in your inventory.</p>
  16.                     <button id="close-crate-contents" class="button" style="display: none;">Close</button>
  17.                 </div>
  18.             </div>
  19.         </div>
  20.     </div>
  25. <div class="grid-container">
  26.     <div class="grid-x grid-padding-y grid-padding-x">
  27.         <div class="small-12 cell" style="text-align: center;">
  28.             <h1 style="margin-top: 75px;">Asset Detail</h1>
  29.         </div>
  30.         <div class="small-12 medium-offset-1 cell">
  31.             <div class="small-12 cell">
  32.                 {{ wo_render_breadcrumbs() }}
  33.             </div>
  34.         </div>
  36.         {% if assetMetadata.nftHub.isMinted is same as(null) and assetMetadata.nftHub.scriptMint is same as(true) %}
  37.             <div class="small-12 medium-10 medium-offset-1 end cell">
  38.                 <p style="text-align: center; font-size: .9em; background: #c4510f; padding: 10px; border-radius: 3px; font-weight: bold;">This asset is currently being processed on the blockchain. It will be available in your inventory in approximately 10 minutes.</p>
  39.             </div>
  40.         {% endif %}
  41.         <div class="small-12 medium-3 medium-offset-1 cell">
  42.             {% include 'explorer/includes/asset-card.html.twig' with {'nftMetadata': assetMetadata, 'app': app} %}
  44.             {#            <div style="background: #13161d; padding: 50px; text-align: center; border-radius: 10px;">#}
  45. {#                <div class="grid-x grid-padding-x grid-padding-y">#}
  46. {#                    <div class="small-12 cell">#}
  47. {#                        <div style="position: relative; height: 150px;">#}
  48. {#                            <img src="{{ assetMetadata.imageUrl }}" />#}
  49. {#                        </div>#}
  50. {#                    </div>#}
  51. {#                    <div class="small-4 cell">#}
  52. {#                        <p><span class="nft-detail-label">L</span><br />#}
  53. {#                            <span class="nft-detail-text">{{ assetMetadata.statStar }}</span></p>#}
  54. {#                    </div>#}
  55. {#                    <div class="small-4 cell">#}
  56. {#                        <p><span class="nft-detail-label">D</span><br />#}
  57. {#                            <span class="nft-detail-text">{{ assetMetadata.statRectangle }}</span></p>#}
  58. {#                    </div>#}
  59. {#                    <div class="small-4 cell">#}
  60. {#                        <p><span class="nft-detail-label">T</span><br />#}
  61. {#                            <span class="nft-detail-text">{{ assetMetadata.statCircle }}</span></p>#}
  62. {#                    </div>#}
  63. {#                </div>#}
  64. {#            </div>#}
  65.             {% if assetMetadata.template.genus.id != 3 %}
  66.             <div class="grid-container" style="background: #252534; padding: 15px 0 20px 0; text-align: center; border-radius: 10px; margin-top: 15px;">
  67.                 <div class="grid-x">
  68.                     <div class="small-12 cell">
  69.                         <div style="margin-bottom: 15px; display: block;">
  70.                         <span data-tooltip tabindex="1" title="Stat comparison for {{ assetMetadata.name}} across ALL NFT Collection Series. Note that these ranges are pulled from all existing {{ assetMetadata.name }} NFTs and do not represent actual minimum and maximum potential values." class="family-orgovan">Stat Comparison</span>
  71.                         </div>
  72.                     </div>
  73.                     <div class="small-12 cell">
  74.                         <div class="grid-container">
  75.                             <div class="grid-x grid-margin-y">
  76.                                 <div class="small-1 cell" style="text-align: center; font-size: .8em; font-weight: bold; color: dodgerblue">
  77.                                     <span data-tooltip tabindex="1" title="Overall Score. Note that the Overall Score is calculated using all stats, including the Additional Stats listed below.">S</span>
  78.                                 </div>
  79.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  80.                                     {{ nftMinMaxStats.minScore|number_format(0,'.',',') }}
  81.                                 </div>
  82.                                 {% if (nftMinMaxStats.maxScore - nftMinMaxStats.minScore) > 0 %}
  83.                                     {% set scorePercent = (assetMetadata.score - nftMinMaxStats.minScore) / (nftMinMaxStats.maxScore - nftMinMaxStats.minScore) %}
  84.                                 {% endif %}
  85.                                 <div class="small-7 cell">
  86.                                     <div style="background: #333; border-radius: 3px; height: 12px; margin-top: 3px;">
  87.                                         <div style="height:12px; width: 5px; border-radius: 2px;
  88.                                         {% if nftMinMaxStats.maxScore == assetMetadata.score %}
  89.                                                 width: 100%;
  90.                                         {% else %}
  91.                                                 width: {{ scorePercent * 100 }}%;
  92.                                                 float: left;
  93.                                         {% endif %}
  94.                                                 background: goldenrod;">
  95.                                         </div>
  96.                                     </div>
  97.                                 </div>
  98.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  99.                                     {{ nftMinMaxStats.maxScore|number_format(0,'.',',') }}
  100.                                 </div>
  101.                             </div>
  102.                         </div>
  103.                         <div class="grid-container">
  104.                             <div class="grid-x grid-margin-y">
  105.                                 <div class="small-1 cell" style="text-align: center; font-size: .8em; font-weight: bold; color: dodgerblue">
  106.                                     <span data-tooltip tabindex="1" title="Luck">L</span>
  107.                                 </div>
  108.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  109.                                     {{ nftMinMaxStats.minStar }}
  110.                                 </div>
  111.                                 {% if (nftMinMaxStats.maxStar - nftMinMaxStats.minStar) > 0 %}
  112. {#                                    {% set luckStat = (assetMetadata.nftMetadataquest.progress > assetMetadata.nftMetadataquest.goal) ? assetMetadata.statStar + assetMetadata.nftMetadataQuest.statStarMod : assetMetadata.statStar %}#}
  113. {#                                    {% set starPercent = (luckStat - nftMinMaxStats.minStar) / (luckStat - nftMinMaxStats.minStar) %}#}
  114.                                     {% set starPercent = (assetMetadata.statStar - nftMinMaxStats.minStar) / (nftMinMaxStats.maxStar - nftMinMaxStats.minStar) %}
  115.                                 {% endif %}
  116.                                 <div class="small-7 cell">
  117.                                     <div style="background: #333; border-radius: 3px; height: 12px; margin-top:3px">
  118.                                         <div style="height:12px; width: 5px; border-radius: 2px;
  119.                                         {% if nftMinMaxStats.maxStar == assetMetadata.statStar %}
  120.                                                 width: 100%;
  121.                                         {% else %}
  122.                                                 width: {{ starPercent * 100 }}%;
  123.                                                 float: left;
  124.                                         {% endif %}
  125.                                                 background: dodgerblue;">
  126.                                         </div>
  127.                                     </div>
  128.                                 </div>
  129.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  130.                                     {{ nftMinMaxStats.maxStar }}
  131.                                 </div>
  132.                             </div>
  133.                         </div>
  134.                         <div class="grid-container">
  135.                             <div class="grid-x grid-margin-y">
  136.                                 <div class="small-1 cell" style="text-align: center; font-size: .8em; font-weight: bold; color: dodgerblue">
  137.                                     <span data-tooltip tabindex="1" title="Distance">D</span>
  138.                                 </div>
  139. {#                                <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">#}
  140. {#                                    {{ assetMetadata.statRectangle }}#}
  141. {#                                </div>#}
  142.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  143.                                     {{ nftMinMaxStats.minRectangle }}
  144.                                 </div>
  145.                                 {% if (nftMinMaxStats.maxRectangle - nftMinMaxStats.minRectangle) > 0 %}
  146.                                     {% set rectanglePercent = (assetMetadata.statRectangle - nftMinMaxStats.minRectangle) / (nftMinMaxStats.maxRectangle - nftMinMaxStats.minRectangle) %}
  147.                                 {% endif %}
  148.                                 <div class="small-7 cell">
  149.                                     <div style="background: #333; border-radius: 3px; height: 12px; margin-top: 3px;">
  150.                                         <div style="height:12px; width: 5px; border-radius: 2px;
  151.                                         {% if nftMinMaxStats.maxRectangle == assetMetadata.statRectangle %}
  152.                                                 width: 100%;
  153.                                         {% else %}
  154.                                                 width: {{ rectanglePercent * 100 }}%;
  155.                                                 float: left;
  156.                                         {% endif %}
  157.                                                 background: dodgerblue;">
  158.                                         </div>
  159.                                     </div>
  160.                                 </div>
  161.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  162.                                     {{ nftMinMaxStats.maxRectangle }}
  163.                                 </div>
  164.                             </div>
  165.                         </div>
  166.                         <div class="grid-container">
  167.                             <div class="grid-x grid-margin-y">
  168.                                 <div class="small-1 cell" style="text-align: center; font-size: .8em; font-weight: bold; color: dodgerblue">
  169.                                     <span data-tooltip tabindex="1" title="Tension">T</span>
  170.                                 </div>
  171.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  172.                                     {{ nftMinMaxStats.minCircle }}
  173.                                 </div>
  174.                                 {% if (nftMinMaxStats.maxCircle - nftMinMaxStats.minCircle) > 0 %}
  175.                                     {% set circlePercent = (assetMetadata.statCircle - nftMinMaxStats.minCircle) / (nftMinMaxStats.maxCircle - nftMinMaxStats.minCircle) %}
  176.                                 {% endif %}
  177.                                 <div class="small-7 cell">
  178.                                     <div style="background: #333; border-radius: 3px; height: 12px; margin-top: 3px;">
  179.                                         <div style="height:12px; width: 5px; border-radius: 2px;
  180.                                         {% if nftMinMaxStats.maxCircle == assetMetadata.statCircle %}
  181.                                             width: 100%;
  182.                                         {% else %}
  183.                                                 width: {{ circlePercent * 100 }}%;
  184.                                                 float: left;
  185.                                         {% endif %}
  186.                                                 background: dodgerblue;">
  187.                                         </div>
  188.                                     </div>
  189.                                 </div>
  190.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  191.                                     {{ nftMinMaxStats.maxCircle }}
  192.                                 </div>
  193.                             </div>
  194.                         </div>
  196.                     </div>
  197.                 </div>
  198.             </div>
  200.             <div class="grid-container" style="background: #252534; padding: 15px 0 20px 0; text-align: center; border-radius: 10px; margin-top: 15px;">
  201.                 <div class="grid-x">
  202.                     <div class="small-12 cell">
  203.                         <div style="margin-bottom: 15px; display: block;">
  204.                             <span data-tooltip tabindex="1" title="These are additional stats tied to this NFT. These stats are not yet used in game, but are planned for future updates." class="family-orgovan">Additional Stats</span>
  205.                         </div>
  206.                     </div>
  207.                     <div class="small-12 cell">
  208.                         <div class="grid-container">
  209.                             <div class="grid-x grid-margin-y">
  210.                                 <div class="small-1 cell" style="text-align: center; font-size: .8em; font-weight: bold; color: dodgerblue">
  211.                                     <svg style="filter: invert(88%) sepia(13%) saturate(0%) hue-rotate(347deg) brightness(91%) contrast(93%);" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21 4c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1z" fill-rule="nonzero"/></svg>                                </div>
  212.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  213.                                     {{ nftMinMaxStats.minSquare }}
  214.                                 </div>
  215.                                 {% if (nftMinMaxStats.maxSquare - nftMinMaxStats.minSquare) > 0 %}
  216.                                     {% set squarePercent = (assetMetadata.statSquare - nftMinMaxStats.minSquare) / (nftMinMaxStats.maxSquare - nftMinMaxStats.minSquare) %}
  217.                                 {% endif %}
  218.                                 <div class="small-7 cell">
  219.                                     <div style="background: #333; border-radius: 3px; height: 12px; margin-top:3px">
  220.                                         <div style="height:12px; width: 5px; border-radius: 2px;
  221.                                         {% if nftMinMaxStats.maxSquare == assetMetadata.statSquare %}
  222.                                                 width: 100%;
  223.                                         {% else %}
  224.                                                 width: {{ squarePercent * 100 }}%;
  225.                                                 float: left;
  226.                                         {% endif %}
  227.                                                 background: dodgerblue;">
  228.                                         </div>
  229.                                     </div>
  230.                                 </div>
  231.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  232.                                     {{ nftMinMaxStats.maxSquare }}
  233.                                 </div>
  234.                             </div>
  235.                         </div>
  236.                         <div class="grid-container">
  237.                             <div class="grid-x grid-margin-y">
  238.                                 <div class="small-1 cell" style="text-align: center; font-size: .8em; font-weight: bold; color: dodgerblue">
  239.                                     <svg style="filter: invert(88%) sepia(13%) saturate(0%) hue-rotate(347deg) brightness(91%) contrast(93%);" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.262 2.306c.196-.196.461-.306.738-.306s.542.11.738.306c1.917 1.917 7.039 7.039 8.956 8.956.196.196.306.461.306.738s-.11.542-.306.738c-1.917 1.917-7.039 7.039-8.956 8.956-.196.196-.461.306-.738.306s-.542-.11-.738-.306c-1.917-1.917-7.039-7.039-8.956-8.956-.196-.196-.306-.461-.306-.738s.11-.542.306-.738c1.917-1.917 7.039-7.039 8.956-8.956z" fill-rule="nonzero"/></svg>                                </div>
  240.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  241.                                     {{ nftMinMaxStats.minDiamond }}
  242.                                 </div>
  243.                                 {% if (nftMinMaxStats.maxDiamond - nftMinMaxStats.minDiamond) > 0 %}
  244.                                     {% set diamondPercent = (assetMetadata.statDiamond - nftMinMaxStats.minDiamond) / (nftMinMaxStats.maxDiamond - nftMinMaxStats.minDiamond) %}
  245.                                 {% endif %}
  246.                                 <div class="small-7 cell">
  247.                                     <div style="background: #333; border-radius: 3px; height: 12px; margin-top: 3px;">
  248.                                         <div style="height:12px; width: 5px; border-radius: 2px;
  249.                                         {% if nftMinMaxStats.maxDiamond == assetMetadata.statDiamond %}
  250.                                                 width: 100%;
  251.                                         {% else %}
  252.                                                 width: {{ diamondPercent * 100 }}%;
  253.                                                 float: left;
  254.                                         {% endif %}
  255.                                                 background: dodgerblue;">
  256.                                         </div>
  257.                                     </div>
  258.                                 </div>
  259.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  260.                                     {{ nftMinMaxStats.maxDiamond }}
  261.                                 </div>
  262.                             </div>
  263.                         </div>
  264.                         <div class="grid-container">
  265.                             <div class="grid-x grid-margin-y">
  266.                                 <div class="small-1 cell" style="text-align: center; font-size: .8em; font-weight: bold; color: dodgerblue">
  267.                                     <svg style="filter: invert(88%) sepia(13%) saturate(0%) hue-rotate(347deg) brightness(91%) contrast(93%);" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.882 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367z" fill-rule="nonzero"/></svg>
  268.                                 </div>
  269.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  270.                                     {{ nftMinMaxStats.minTriangle }}
  271.                                 </div>
  272.                                 {% if (nftMinMaxStats.maxTriangle - nftMinMaxStats.minTriangle) > 0 %}
  273.                                     {% set trianglePercent = (assetMetadata.statTriangle - nftMinMaxStats.minTriangle) / (nftMinMaxStats.maxTriangle - nftMinMaxStats.minTriangle) %}
  274.                                 {% endif %}
  275.                                 <div class="small-7 cell">
  276.                                     <div style="background: #333; border-radius: 3px; height: 12px; margin-top: 3px;">
  277.                                         <div style="height:12px; width: 5px; border-radius: 2px;
  278.                                         {% if nftMinMaxStats.maxTriangle == assetMetadata.statTriangle %}
  279.                                                 width: 100%;
  280.                                         {% else %}
  281.                                                 width: {{ trianglePercent * 100 }}%;
  282.                                                 float: left;
  283.                                         {% endif %}
  284.                                                 background: dodgerblue;">
  285.                                         </div>
  286.                                     </div>
  287.                                 </div>
  288.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  289.                                     {{ nftMinMaxStats.maxTriangle }}
  290.                                 </div>
  291.                             </div>
  292.                         </div>
  293.                         <div class="grid-container">
  294.                             <div class="grid-x grid-margin-y">
  295.                                 <div class="small-1 cell" style="text-align: center; font-size: .8em; font-weight: bold; color: dodgerblue">
  296.                                     <svg style="filter: invert(88%) sepia(13%) saturate(0%) hue-rotate(347deg) brightness(91%) contrast(93%);" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 5.72c-2.624-4.517-10-3.198-10 2.461 0 3.725 4.345 7.727 9.303 12.54.194.189.446.283.697.283s.503-.094.697-.283c4.977-4.831 9.303-8.814 9.303-12.54 0-5.678-7.396-6.944-10-2.461z" fill-rule="nonzero"/></svg>
  297.                                 </div>
  298.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  299.                                     {{ nftMinMaxStats.minHeart }}
  300.                                 </div>
  301.                                 {% if (nftMinMaxStats.maxHeart - nftMinMaxStats.minHeart) > 0 %}
  302.                                     {% set heartPercent = (assetMetadata.statHeart - nftMinMaxStats.minHeart) / (nftMinMaxStats.maxHeart - nftMinMaxStats.minHeart) %}
  303.                                 {% endif %}
  304.                                 <div class="small-7 cell">
  305.                                     <div style="background: #333; border-radius: 3px; height: 12px; margin-top: 3px;">
  306.                                         <div style="height:12px; width: 5px; border-radius: 2px;
  307.                                         {% if nftMinMaxStats.maxHeart == assetMetadata.statHeart %}
  308.                                                 width: 100%;
  309.                                         {% else %}
  310.                                                 width: {{ heartPercent * 100 }}%;
  311.                                                 float: left;
  312.                                         {% endif %}
  313.                                                 background: dodgerblue;">
  314.                                         </div>
  315.                                     </div>
  316.                                 </div>
  317.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  318.                                     {{ nftMinMaxStats.maxHeart }}
  319.                                 </div>
  320.                             </div>
  321.                         </div>
  322.                         <div class="grid-container">
  323.                             <div class="grid-x grid-margin-y">
  324.                                 <div class="small-1 cell" style="text-align: center; font-size: .8em; font-weight: bold; color: dodgerblue">
  325.                                     <svg style="filter: invert(88%) sepia(13%) saturate(0%) hue-rotate(347deg) brightness(91%) contrast(93%);" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22.005 15.728c0 .266-.106.52-.293.707-1 1-4.272 4.272-5.272 5.272-.187.188-.442.293-.707.293-1.414 0-6.042 0-7.457 0-.265 0-.519-.105-.707-.293-1-1-4.271-4.272-5.271-5.272-.188-.187-.293-.441-.293-.707 0-1.414 0-6.042 0-7.456 0-.266.105-.52.293-.707 1-1 4.271-4.272 5.271-5.272.188-.188.442-.293.707-.293h7.457c.265 0 .52.105.707.293 1 1 4.272 4.272 5.272 5.272.187.187.293.441.293.707z" fill-rule="nonzero"/></svg>                                </div>
  326.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  327.                                     {{ nftMinMaxStats.minOctagon }}
  328.                                 </div>
  329.                                 {% if (nftMinMaxStats.maxOctagon - nftMinMaxStats.minOctagon) > 0 %}
  330.                                     {% set octagonPercent = (assetMetadata.statOctagon - nftMinMaxStats.minOctagon) / (nftMinMaxStats.maxOctagon - nftMinMaxStats.minOctagon) %}
  331.                                 {% endif %}
  332.                                 <div class="small-7 cell">
  333.                                     <div style="background: #333; border-radius: 3px; height: 12px; margin-top: 3px;">
  334.                                         <div style="height:12px; width: 5px; border-radius: 2px;
  335.                                         {% if nftMinMaxStats.maxOctagon == assetMetadata.statOctagon %}
  336.                                                 width: 100%;
  337.                                         {% else %}
  338.                                                 width: {{ octagonPercent * 100 }}%;
  339.                                                 float: left;
  340.                                         {% endif %}
  341.                                                 background: dodgerblue;">
  342.                                         </div>
  343.                                     </div>
  344.                                 </div>
  345.                                 <div class="small-2 cell" style="text-align: center; font-size: .8em; font-weight: bold;">
  346.                                     {{ nftMinMaxStats.maxOctagon }}
  347.                                 </div>
  348.                             </div>
  349.                         </div>
  351.                     </div>
  352.                 </div>
  353.             </div>
  354.             {% endif %} {# if assetMetadata.template.genus.id != 3 #}
  355. {#            <div style="text-align: center;">#}
  356. {#                <div class="grid-x grid-padding-x grid-padding-y">#}
  357. {#                    <div class="small-12 cell">#}
  358. {#                        {% if marketItem == true %}#}
  359. {#                            <p style="padding: 20px; text-align: center;"><img height="25" width="25" src="{{ asset('build/images/web/tfuel-logo.svg') }}" style="vertical-align: top;" /> <span style="font-size: 2em; font-weight: bold; color: #ffa50d; ">{{ marketItem.price|number_format(2,'.',',') }}</span></p>#}
  360. {#                            {% if app.user is not null#}
  361. {#                                and app.user.activeWallet == marketItem.seller %}#}
  362. {#                                #}{# Show Cancel Button #}
  363. {#                                <button class="button initiateMarketCancel" data-open="initiateMarketCancel-{{ marketItem.id }}" style="width: 100%; font-weight: bold; font-size: 1.1em;">Cancel</button>#}
  364. {#                                {% include 'marketplace/modals/createMarketCancel.html.twig' with {'marketItem': marketItem, 'app': app } %}#}
  365. {#                            {% elseif app.user is not null %}#}
  366. {#                                #}{# Show Buy Button #}
  367. {#                                <button class="button initiateMarketSale" data-open="initiateMarketSale-{{ marketItem.id }}" style="width: 100%; padding: 15px 50px; font-weight: bold; font-size: 1.1em;">Buy</button>#}
  368. {#                                {% include 'marketplace/modals/createMarketSale.html.twig' with {'marketItem': marketItem, 'app': app } %}#}
  369. {#                            {% else %}#}
  370. {#                                #}{# Show Buy Button but direct towards login #}
  371. {#                                <a href="{{ path('app_login') }}" class="button" style="width: 100%; padding: 15px 50px; font-weight: bold; font-size: 1.1em;">Buy</a>#}
  372. {#                            {% endif %}#}
  373. {#                        {% elseif marketItem == false %}#}
  374. {#                            {% if app.user is not null#}
  375. {#                                and app.user.activeWallet is defined#}
  376. {#                                and app.user.activeWallet.isApprovedForAllMarket is same as(true)#}
  377. {#                                and app.user.activeWallet == assetMetadata.nftHub.thetaWallet#}
  378. {#                            %}#}
  379. {#                                <a class="button gold-button initiateMarketCreateItem" style="margin-top: 10px; font-weight: bold; font-size: 1.1em;" href="#" data-open="createMarketItem-{{ assetMetadata.id }}">Sell</a>#}
  380. {#                                {% include 'marketplace/modals/createMarketItem.html.twig' with {'assetMetadata': assetMetadata, 'app': app } %}#}
  381. {#                            {% elseif app.user.activeWallet.address is defined#}
  382. {#                                and app.user.activeWallet.address == assetMetadata.nftHub.thetaWallet.address#}
  383. {#                            %}#}
  384. {#                                #}{# If User has not given Marketplace contract permissions to handle NFT tokens we must ask for that first #}
  385. {#                                #}{# include both Approval and Sell modals so that we can immediately show the Sell button after Approval #}
  386. {#                                <a class="button gold-button initiateMarketCreateItem" style="margin-top: 10px; font-weight: bold; font-size: 1.1em; display: none;" href="#" data-open="createMarketItem-{{ assetMetadata.id }}">Sell</a>#}
  387. {#                                {% include 'marketplace/modals/setApprovalForAll.html.twig' with {'assetMetadata': assetMetadata, 'app': app} %}#}
  388. {#                                {% include 'marketplace/modals/createMarketItem.html.twig' with {'assetMetadata': assetMetadata, 'app': app, 'hideSellButton': true } %}#}
  389. {#                            {% endif %}#}
  390. {#                        {% endif %}#}
  391. {#                    </div>#}
  392. {#                </div>#}
  393. {#            </div>#}
  394.                 <div class="grid-x" style="margin: 5px;">
  395.                     <div class="small-12 cell">
  396.                         {# Show Open Crate if current User owns the crate #}
  397.                         {% if app.user and app.user.activeWallet is defined and app.user.activeWallet == assetMetadata.nftHub.thetaWallet %}
  398.                             {# If the crate is still in minting process show disabled Open Crate button #}
  399.                             {% if assetMetadata.nftHub.crateActionLog is not same as(null) and assetMetadata.nftHub.isMinted is same as(null) %}
  400.                                 <button class="button orange-button initiateOpenCrate {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" style="width: 100%; height: 50px; margin-top: 10px; background-color: darkslateblue; font-weight: bold; font-size: .8em; color: #fff;" data-open="openCrate-{{ assetMetadata.nftHub.id }}" disabled>Open Crate</button>
  401.                             {# If the crate is not opened show Open Crate button #}
  402.                             {% elseif assetMetadata.nftHub.crateActionLog is not same as(null) and assetMetadata.nftHub.crateActionLog.isOpened is same as(null) %}
  403.                                 <button class="button orange-button initiateOpenCrate {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" style="width: 100%; height: 50px; margin-top: 10px; background-color: darkslateblue; font-weight: bold; font-size: .8em; color: #fff;" data-open="openCrate-{{ assetMetadata.nftHub.id }}">Open Crate</button>
  404.                                 {% include 'crate/modals/openCrate.html.twig' with {'assetMetadata': assetMetadata, 'app': app} %}
  405.                             {% endif %}
  406.                         {% endif %}
  407.                         {# If the crate is opened show details #}
  408.                         {% if assetMetadata.nftHub.crateActionLog is not same as(null) and assetMetadata.nftHub.crateActionLog.isOpened is same as(true) %}
  409.                             <p style="font-size: .8em; padding: 10px; background: #c4510f; border-radius: 3px;">
  410.                                 Crate opened by <strong>{{ assetMetadata.nftHub.crateActionLog.openedBy.user.username is defined ? assetMetadata.nftHub.crateActionLog.openedBy.user.username : assetMetadata.nftHub.crateActionLog.openedBy.address|slice(0,6 ) ~ '...' ~ assetMetadata.nftHub.crateActionLog.openedBy.address|slice(38,42) }}</strong>
  411.                                 on {{ assetMetadata.nftHub.crateActionLog.initiateOpenAt|date }}</p>
  412.                         {% endif %}
  413.                     </div>
  414.                 </div>
  415.         </div>
  416.         <div class="small-12 medium-7 end cell">
  417.             <div class="grid-container" style="background: #252534; padding: 50px; border-radius: 10px;">
  418.                 <div class="grid-x">
  419.                     <div class="small-12 cell">
  420.                         <p><span class="nft-detail-label">Name</span><br />
  421.                             <span class="nft-detail-text">{{ assetMetadata.name }}</span></p>
  422.                     </div>
  423.                     <div class="small-12 medium-12 cell">
  424.                         <p><span class="nft-detail-label">Series</span><br />
  425.                             <span class="nft-detail-text">{{ assetMetadata.nftCollection.name }} {{ assetMetadata.nftCollection.series }}</span></p>
  426.                     </div>
  427.                     <div class="small-12 medium-4 cell">
  428.                         <p><span class="nft-detail-label">Mint number</span><br />
  429.                             <span class="nft-detail-text"><span class="highlight">#{{ assetHub.nftMetadata.mint }}</span> of {{ totalMinted }}</span></p>
  430.                     </div>
  431.                     <div class="small-12 medium-3 end cell">
  432.                         <p><span class="nft-detail-label">Token Id</span><br />
  433.                             <span class="nft-detail-text">{{ assetMetadata.nftHub.id }}</span></p>
  434.                     </div>
  435.                     <div class="small-12 medium-3 cell">
  436.                         <p><span class="nft-detail-label">Wear</span><br />
  437.                         {% if assetMetadata.template.genus.id != 3 %}
  438.                             <span class="nft-detail-text">{{ assetMetadata.wear }}</span></p>
  439.                         {% else %}
  440.                             N/A
  441.                         {% endif %}
  442.                     </div>
  443.                     <div class="small-12 medium-2 cell">
  444.                         <p><span class="nft-detail-label">Weight</span><br />
  445.                         {% if assetMetadata.template.genus.id != 3 %}
  446.                             <span class="nft-detail-text">{{ assetMetadata.weight }}</span></p>
  447.                         {% else %}
  448.                             N/A
  449.                         {% endif %}
  450.                     </div>
  451.                     <div class="small-12 medium-4 cell">
  452.                         {% if assetMetadata.template.tier == 0 %}
  453.                             {% set tier = 'Old' %}
  454.                         {% elseif assetMetadata.template.tier == 1 %}
  455.                             {% set tier = 'Fodder' %}
  456.                         {% elseif assetMetadata.template.tier == 2 %}
  457.                             {% set tier = 'Common' %}
  458.                         {% elseif assetMetadata.template.tier == 3 %}
  459.                             {% set tier = 'Uncommon' %}
  460.                         {% elseif assetMetadata.template.tier == 4 %}
  461.                             {% set tier = 'Rare' %}
  462.                         {% elseif assetMetadata.template.tier == 5 %}
  463.                             {% set tier = 'Epic' %}
  464.                         {% elseif assetMetadata.template.tier == 6 %}
  465.                             {% set tier = 'Legendary' %}
  466.                         {% elseif assetMetadata.template.tier == 7 %}
  467.                             {% set tier = 'Extreme' %}
  468.                         {% elseif assetMetadata.template.tier == 100 %}
  469.                             {% set tier = 'Promotional' %}
  470.                         {% endif %}
  471.                         <p><span class="nft-detail-label">Tier</span><br />
  472.                         {% if assetMetadata.template.genus.id != 3 %}
  473.                             <span class="nft-detail-text">{{ tier }}</span></p>
  474.                         {% else %}
  475.                             N/A
  476.                         {% endif %}
  477.                     </div>
  478.                     <div class="small-12 medium-4 cell">
  479.                         <p><span class="nft-detail-label">Grade</span><br />
  480.                             {% if assetMetadata.template.genus.id != 3 %}
  481.                                 <span class="nft-detail-text">{{ assetMetadata.grade }}</span></p>
  482.                             {% else %}
  483.                                 N/A
  484.                             {% endif %}
  485.                     </div>
  486.                     <div class="small-12 medium-4 end cell">
  487.                         <p><span class="nft-detail-label">Score</span><br />
  488.                         {% if assetMetadata.template.genus.id != 3 %}
  489.                             <span class="nft-detail-text" style="color: goldenrod">{{ assetMetadata.score|number_format(2,'.',',') }}</span></p>
  490.                         {% else %}
  491.                             N/A
  492.                         {% endif %}
  493.                     </div>
  494.                     <div class="small-12 cell">
  495.                         <p><span class="nft-detail-label">School of Magic</span><br />
  496.                         <span class="nft-detail-text">{{ assetMetadata.schoolOfMagic.name is defined ? assetMetadata.schoolOfMagic.name : 'N/A' }}</span></p>
  497.                     </div>
  498.                     <div class="small-12 cell">
  499.                         <p><span class="nft-detail-label">Description</span><br />
  500.                             <span class="nft-detail-text">{{ assetMetadata.description }}</span></p>
  501.                     </div>
  502.                     <div class="small-12 cell">
  503.                         <p><span class="nft-detail-label">Created</span><br />
  504.                             <span class="nft-detail-text">{{ assetMetadata.createdAt|date() }}</span></p>
  505.                     </div>
  506.                     <div class="small-12 cell">
  507.                         <p><span class="nft-detail-label">Owner</span><br />
  508.                             {% if assetMetadata.nftHub.activeMarketItem is not empty %}
  509.                                 {% if assetMetadata.nftHub.activeMarketItem|first.seller.user.username is defined %}
  510.                                     <span class="nft-detail-text"><span class="highlight"><a href="{{ path('user_profile', { userId: assetMetadata.nftHub.activeMarketItem|first.seller.user.id, domain: app_domain }) }}">{{ assetMetadata.nftHub.activeMarketItem|first.seller.user.username is defined ? assetMetadata.nftHub.activeMarketItem|first.seller.user.username : ''}} ({{ assetMetadata.nftHub.activeMarketItem|first.seller.address|slice(0,6) }}...{{ assetMetadata.nftHub.activeMarketItem|first.seller.address|slice(38,42) }})</a></span></span></p>
  511.                                 {% elseif assetMetadata.nftHub.activeMarketItem|first.seller.address is defined %}
  512.                                     <a href="https://explorer.thetatoken.org/account/{{ assetMetadata.nftHub.activeMarketItem|first.seller.address }}" target="_blank">{{ assetMetadata.nftHub.activeMarketItem|first.seller.address }}</a>
  513.                                 {% endif %}
  514.                             {% else %}
  515.                                 {% if assetHub.thetaWallet.user.username is defined %}
  516.                                 <span class="nft-detail-text"><span class="highlight"><a href="{{ path('user_profile', { userId: assetHub.thetaWallet.user.id, domain: app_domain }) }}">{{ assetHub.thetaWallet.user.username is defined ? assetHub.thetaWallet.user.username : ''}} ({{ assetHub.thetaWallet.address|slice(0,6) }}...{{ assetHub.thetaWallet.address|slice(38,42) }})</a></span></span></p>
  517.                                 {% elseif assetHub.thetaWallet.address is defined %}
  518.                                     <a href="https://explorer.thetatoken.org/account/{{ assetHub.thetaWallet.address }}" target="_blank">{{ assetHub.thetaWallet.address }}</a>
  519.                                 {% endif %}
  520.                             {% endif %}
  521.                     </div>
  522.                     <div class="small-12 cell">
  523.                         <p><span class="nft-detail-label">IPFS URL</span><br />
  524.                             <span class="nft-detail-text" style="font-size: .8em;"><a href="{{ assetMetadata.nftHub.ipfsUrl }}">{{ assetMetadata.nftHub.ipfsUrl }}</a></span></p>
  525.                     </div>
  526.                     <div class="small-12 cell">
  527.                         <p><span class="nft-detail-label">QUEST DETAIL</span><br />
  528.                         {% if assetMetadata.template.genus.id != 3 %}
  529.                             Progress: {{ assetMetadata.nftMetadataQuest.progress }}
  530.                             Goal: {{ assetMetadata.nftMetadataQuest.goal }}
  531.                         {% else %}
  532.                             N/A
  533.                         {% endif %}
  534.                     </div>
  535.                 </div>
  536.             </div>
  537.             <div class="grid-container" style="margin-top: 15px; background: #252534; padding: 35px 50px; border-radius: 10px;">
  538.                 <div class="grid-x">
  539.                     <div class="small-12 cell">
  540.                         <h2>Transfer History</h2>
  541.                     </div>
  542.                     <div class="small-12 cell">
  543.                     {% for transfer in assetTransferHistory %}
  544.                         <div class="grid-container" style="padding: 3px 0;">
  545.                             <div class="grid-x">
  546.                                 <div class="small-12 medium-4 cell">
  547.                                     {{ transfer.timestamp|date() }}
  548.                                 </div>
  549.                                 <div class="small-12 medium-8 cell">
  550.                                     {% if transfer.fromAddress == '0x0000000000000000000000000000000000000000' or transfer.fromAddress == '0xC0DF07Ae87912a7Df9798e68d18cBD77E3Da8BCf' or transfer.fromAddress == '0xBF05F3330ba6fF8bb4dCE16c4A8a1D8B23DeD398'
  551.                                         or transfer.fromAddress == '0x3Fc3FE7C34F1aD2D4cA86219eF1b67af9aA7aBD4'%}
  552.                                         {% if transfer.fromAddress == '0x0000000000000000000000000000000000000000' %}
  553.                                             Genesis
  554.                                         {% elseif transfer.fromAddress == '0xC0DF07Ae87912a7Df9798e68d18cBD77E3Da8BCf' or transfer.fromAddress == '0x3Fc3FE7C34F1aD2D4cA86219eF1b67af9aA7aBD4' %}
  555.                                             <a href="https://explorer.thetatoken.org/account/{{ transfer.fromAddress }}" target="_blank">Marketplace</a>
  556.                                         {% elseif transfer.fromAddress == '0xBF05F3330ba6fF8bb4dCE16c4A8a1D8B23DeD398' %}
  557.                                             Minter
  558.                                         {% endif %}
  559.                                     {% else %}
  560.                                         <a href="{{ path('user_profile_wallet_address', { walletAddress: transfer.fromAddress }) }}">{{ transfer.fromAddress|slice(0,6) }}...{{ transfer.fromAddress|slice(38,42)}}</a>
  561.                                     {% endif %}
  562.                                     <svg xmlns="http://www.w3.org/2000/svg" width="23.828" height="14.769" style=" margin: 0 5px; filter: invert(96%) sepia(78%) saturate(2%) hue-rotate(181deg) brightness(111%) contrast(100%);"><path d="m13.616 2.828 2.585 2.586H0v4h16.143l-2.527 2.526 2.828 2.829 7.384-7.384L16.444 0l-2.828 2.828z"/></svg>
  563.                                     {% if transfer.toAddress == '0x0000000000000000000000000000000000000000' or transfer.toAddress == '0xC0DF07Ae87912a7Df9798e68d18cBD77E3Da8BCf' or transfer.toAddress == '0xBF05F3330ba6fF8bb4dCE16c4A8a1D8B23DeD398'
  564.                                         or transfer.toAddress == '0x3Fc3FE7C34F1aD2D4cA86219eF1b67af9aA7aBD4'%}
  565.                                         {% if transfer.toAddress == '0x0000000000000000000000000000000000000000' %}
  566.                                             Genesis
  567.                                         {% elseif transfer.toAddress == '0xC0DF07Ae87912a7Df9798e68d18cBD77E3Da8BCf' or transfer.toAddress == '0x3Fc3FE7C34F1aD2D4cA86219eF1b67af9aA7aBD4' %}
  568.                                             <a href="https://explorer.thetatoken.org/account/{{ transfer.toAddress }}" target="_blank">Marketplace</a>
  569.                                         {% elseif transfer.toAddress == '0xBF05F3330ba6fF8bb4dCE16c4A8a1D8B23DeD398' %}
  570.                                             Minter
  571.                                         {% endif %}
  572.                                     {% else %}
  573.                                         <a href="{{ path('user_profile_wallet_address', { walletAddress: transfer.toAddress }) }}">{{ transfer.toAddress|slice(0,6) }}...{{ transfer.toAddress|slice(38,42)}}</a>
  574.                                     {% endif %}
  575.                                 </div>
  576.                             </div>
  577.                         </div>
  578.                     {% endfor %}
  579.                     </div>
  580.                 </div>
  581.             </div>
  582.             <div class="grid-container" style="margin-top: 15px; background: #252534; padding: 35px 50px; border-radius: 10px;">
  583.                 <div class="grid-x">
  584.                     <div class="small-12 cell">
  585.                         <h2>Market History</h2>
  586.                     </div>
  587.                     <div class="small-12 cell">
  588.                     {% if assetMarketHistory|length == 0 %}
  589.                             <p>No market sales exist for this asset.</p>
  590.                     {% else %}
  591.                         {% for transfer in assetMarketHistory %}
  592.                             {% if transfer.price > 0 %}
  593.                             <div class="grid-container" style="padding: 3px 0;">
  594.                                 <div class="grid-x">
  595.                                     <div class="small-12 medium-4 cell">
  596.                                         {{ transfer.updatedAt|date() }}
  597.                                     </div>
  598.                                     <div class="small-12 medium-8 cell">
  599.                                         <img alt="" height="20" width="20" src="{{ asset('build/images/web/tfuel-logo.svg') }}" style="vertical-align: top;" /> <strong><span style="color: #ffa50d">{{ transfer.price|number_format(2,'.',',') }}</span></strong>
  600.                                     </div>
  601.                                 </div>
  602.                             </div>
  603.                             {% endif %}
  604.                         {% endfor %}
  605.                     {% endif %}
  606.                     </div>
  607.                 </div>
  608.             </div>
  609.             <div class="grid-container" style="margin-top: 15px; background: #252534; padding: 35px 50px; border-radius: 10px;">
  610.                 <div class="grid-x">
  611.                     <div class="small-12 cell">
  612.                         <h2 id="asset-offers">Offers</h2>
  613.                     </div>
  614.                     <div class="small-12 cell">
  615.                         {% if assetMetadata.nftHub.activeMarketOffers|length == 0 %}
  616.                             <p>No offers exist for this asset.</p>
  617.                         {% else %}
  618.                             {% for offer in assetMetadata.nftHub.activeMarketOffers %}
  619.                                 <div class="grid-container" style="padding: 3px 0;">
  620.                                     <div class="grid-x">
  621.                                         <div class="small-12 medium-5 cell">
  622.                                             {% if offer.bidder.user.username is defined %}
  623.                                                 <span class="nft-detail-text"><span class="highlight"><a href="{{ path('user_profile', { userId: offer.bidder.user.id, domain: app_domain }) }}">{{ offer.bidder.user.username is defined ? offer.bidder.user.username : ''}} ({{ offer.bidder.address|slice(0,6) }}...{{ offer.bidder.address|slice(38,42) }})</a></span></span></p>
  624.                                             {% elseif offer.bidder.address is defined %}
  625.                                                 <a href="https://explorer.thetatoken.org/account/{{ offer.bidder.address }}" target="_blank">{{ offer.bidder.address|slice(0,6) }}...{{ offer.bidder.address|slice(38,42) }}</a>
  626.                                             {% endif %}
  627.                                         </div>
  628.                                         <div class="small-12 medium-4 cell">
  629.                                             <img alt="" height="20" width="20" src="{{ asset('build/images/web/tfuel-logo.svg') }}" style="vertical-align: top;" /> <strong><span style="color: #ffa50d">{{ offer.price|number_format(2,'.',',') }}</span></strong>
  630.                                         </div>
  631.                                         <div class="small-12 medium-3 cell">
  632.                                             {# If the current User is the owner of this item, we need to show Accept Offer buttons #}
  633.                                             {# However, they can only accept if this item is not actively listed in the market #}
  634.                                             {# They also need to have approved market permissions #}
  635.                                             {# If Main Token #}
  636.                                             {% if assetMetadata.nftHub.nftContract.id == 1 %}
  637.                                                 {% if app.user.activeWallet and app.user.activeWallet.isApprovedForAllMarket2 is same as(false) %}
  638.                                                     <button class="button initiateAcceptMarketOffer {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" data-open="acceptMarketOffer-{{ offer.id }}" style="display: none;">Accept Offer</button>
  639.                                                     {% include 'marketplace/modals/setApprovalForAll.html.twig' with {'assetMetadata': assetMetadata, 'app': app, 'buttonText': 'Accept Offer'} %}
  640.                                                     {% include 'marketplace/modals/acceptMarketOffer.html.twig' with {'marketOffer' : offer, 'assetMetadata' : assetMetadata, 'app': app } %}
  641.                                                 {% elseif assetMetadata.nftHub.activeMarketItem is not empty and app.user.activeWallet == assetMetadata.nftHub.activeMarketItem|first.seller %}
  642.                                                     <button class="button initiateAcceptMarketOffer"
  643.                                                             data-open="conflict-cancelMarketItem-{{ assetMetadata.nftHub.activeMarketItem|first.id }}"
  644.                                                             style="width: 100%; font-size: .8em; font-weight: bold;">Accept Offer
  645.                                                     </button>
  646.                                                     <div class="reveal" id="conflict-cancelMarketItem-{{ assetMetadata.nftHub.activeMarketItem|first.id }}" data-reveal
  647.                                                          style="text-align: center; background: #1f1f29; border-radius: 15px; border: none;">
  648.                                                         <h1>Active Market Exists</h1>
  649.                                                         <img height="100" width="100" src="{{ asset('build/images/web/warning.svg') }}" />
  650.                                                         <p>You must cancel your Market listing for this item before you can accept an Offer.</p>
  651.                                                         <button class="close-button" data-close aria-label="Close modal" type="button">
  652.                                                             <span aria-hidden="true">&times;</span>
  653.                                                         </button>
  654.                                                     </div>
  655.                                                 {% else %}
  656.                                                     {% if (app.user and app.user.activeWallet is defined) and app.user.activeWallet == assetMetadata.nftHub.thetaWallet %}
  657.                                                         <button class="button initiateAcceptMarketOffer {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" data-open="acceptMarketOffer-{{ offer.id }}">Accept Offer</button>
  658.                                                         {% include 'marketplace/modals/acceptMarketOffer.html.twig' with {'marketOffer' : offer, 'assetMetadata' : assetMetadata, 'app': app } %}
  659.                                                     {% endif %}
  660.                                                 {% endif %}
  661.                                             {% elseif assetMetadata.nftHub.nftContract.id == 4 %}
  662.                                                 {# If Crate Token #}
  663.                                                 {% if app.user.activeWallet and app.user.activeWallet.isApprovedForAllMarketCrate is same as(false) %}
  664.                                                     <button class="button initiateAcceptMarketOffer {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" data-open="acceptMarketOffer-{{ offer.id }}" style="display: none;">Accept Offer</button>
  665.                                                     {% include 'marketplace/modals/setApprovalForAll.html.twig' with {'assetMetadata': assetMetadata, 'app': app, 'buttonText': 'Accept Offer'} %}
  666.                                                     {% include 'marketplace/modals/acceptMarketOffer.html.twig' with {'marketOffer' : offer, 'assetMetadata' : assetMetadata, 'app': app } %}
  667.                                                 {% elseif assetMetadata.nftHub.activeMarketItem is not empty and app.user.activeWallet == assetMetadata.nftHub.activeMarketItem|first.seller %}
  668.                                                     <button class="button initiateAcceptMarketOffer"
  669.                                                             data-open="conflict-cancelMarketItem-{{ assetMetadata.nftHub.activeMarketItem|first.id }}"
  670.                                                             style="width: 100%; font-size: .8em; font-weight: bold;">Accept Offer
  671.                                                     </button>
  672.                                                     <div class="reveal" id="conflict-cancelMarketItem-{{ assetMetadata.nftHub.activeMarketItem|first.id }}" data-reveal
  673.                                                          style="text-align: center; background: #1f1f29; border-radius: 15px; border: none;">
  674.                                                         <h1>Active Market Exists</h1>
  675.                                                         <img height="100" width="100" src="{{ asset('build/images/web/warning.svg') }}" />
  676.                                                         <p>You must cancel your Market listing for this item before you can accept an Offer.</p>
  677.                                                         <button class="close-button" data-close aria-label="Close modal" type="button">
  678.                                                             <span aria-hidden="true">&times;</span>
  679.                                                         </button>
  680.                                                     </div>
  681.                                                 {% else %}
  682.                                                     {% if (app.user and app.user.activeWallet is defined) and app.user.activeWallet == assetMetadata.nftHub.thetaWallet %}
  683.                                                         <button class="button initiateAcceptMarketOffer {{ app.user.walletExtension == 1 ? 'ext-theta' : 'ext-meta' }}" data-open="acceptMarketOffer-{{ offer.id }}">Accept Offer</button>
  684.                                                         {% include 'marketplace/modals/acceptMarketOffer.html.twig' with {'marketOffer' : offer, 'assetMetadata' : assetMetadata, 'app': app } %}
  685.                                                     {% endif %}
  686.                                                 {% endif %}
  687.                                             {% endif %}
  688.                                         </div>
  689.                                     </div>
  690.                                 </div>
  691.                             {% endfor %}
  692.                         {% endif %}
  693.                     </div>
  694.                 </div>
  695.             </div>
  696.         </div>
  697.     </div>
  698. </div>
  699. {% endblock %}