chore: updating marketplace icons (#6424)

* chore: updating marketplace icons

* removing console

* eslint

* uni logo

* nft20

* weird svg id bug

* adding gradient id to other marketplaces

* purchasable markets

* test size inc

* removing the nxyz endpoint

* adding back nxyz endpoint for testing

* graphql enum is purchasable markets

* removing nxyz

* self nit

* changing width and height to size - removing gradientId from props - updating gradient id

* removing purchasable markets

* linting

* adding tests to ensure marketplace

* better description

* needs to check for null and not undefined
This commit is contained in:
Jack Short 2023-04-25 15:20:30 -04:00 committed by GitHub
parent 87144de9c8
commit 771618b1c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 657 additions and 221 deletions

@ -1,11 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 364 364">
<defs>
<style>.cls-1{fill:#0052ff;}.cls-2{fill:#fff;}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<rect class="cls-1" width="364" height="364" />
<path class="cls-2" d="M232.77,192.91a53.51,53.51,0,1,1-.08-22.16,1.38,1.38,0,0,0,1.34,1.09h51.48a1.38,1.38,0,0,0,1.37-1.52A107.12,107.12,0,0,0,178.39,74.9c-57.49,1-104.27,48-105.1,105.51a107.12,107.12,0,0,0,213.63,12.92,1.39,1.39,0,0,0-1.38-1.52H234.11A1.36,1.36,0,0,0,232.77,192.91Z"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 593 B

@ -1,14 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 364 364">
<defs>
<style>.cls-1{fill:#0083c9;}.cls-2{fill:#f89c1b;}.cls-3{fill:#80c241;}.cls-4{fill:#ed1c24;}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<rect width="364" height="364" />
<rect class="cls-1" x="140.51" y="105.4" width="39.59" height="153.99"/>
<rect class="cls-2" x="190.26" y="106.12" width="39.59" height="103.62"/>
<rect class="cls-3" x="226.65" y="183.4" width="39.59" height="112.38" transform="translate(6.86 486.04) rotate(-90)"/>
<rect class="cls-4" x="75.34" y="204.11" width="39.59" height="70.95" transform="translate(-144.45 334.72) rotate(-90)"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 743 B

@ -1,6 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" fill="black"/>
<path d="M8.4264 12.5C8.50338 12.3667 8.69583 12.3667 8.77281 12.5L12.7565 19.4C12.8335 19.5333 12.7373 19.7 12.5833 19.7H4.61589C4.46193 19.7 4.36571 19.5333 4.44269 19.4L8.4264 12.5Z" fill="white"/>
<circle cx="15.9" cy="16" r="3.9" fill="white"/>
<rect x="20.25" y="12.35" width="7.25" height="7.25" rx="0.2" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 474 B

@ -1,17 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 364">
<defs>
<style>.cls-1{fill:#3d3d3d;}.cls-2{fill:#24ddd8;}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<rect class="cls-1" width="363" height="364"/>
<path class="cls-2" d="M218.1,115.8V102.1S187,101,177.94,115.76l-.22-13.45s-28.93-1.57-42.2,15.37c-3.53,4.51-6.09,8.14-7.88,12.7-3.86,9.81-3.27,24.88-3.27,24.88l0,66s-8.86-1.72-14.32,3a1.68,1.68,0,0,1-2,.23,1.4,1.4,0,0,1-.57-.8c-1.52-5.38-12.33-8.91-18.74-2.09-6.87,7.31-3.2,20.58,8.72,21.06,0,0-2.49,19.78,13.62,27.16,13.38,6.13,22,0,22,0s5,6.92,17.61,6.92h86.71c6.24,0,20.32-7.19,20.32-21.73V102.27S225,101.08,218.1,115.8ZM250.17,256c0,10.83-13.41,13.94-15.23,13.94H149.49a18.79,18.79,0,0,1-15.24-7.75c-5.62,4.89-13.89,3.68-13.89,3.68-16-1.09-16.76-19.32-15.67-22.93s.26-6.87-6.28-6.77-8.08-6.93-3.77-9.69,8.41-.16,8.44,3.19c0,2,2,4.43,5.19,4.53,4.23.13,6.21-5.52,12.68-5.88a19.4,19.4,0,0,1,10.77,2.4s.82-52.07.82-85.95c0-7.69,3.83-15.12,7.79-20.3a36.74,36.74,0,0,1,8-7.8,37.65,37.65,0,0,1,22.83-7.12v37.59h0c0-34.3,39.88-37.59,39.88-37.59v36.93h0c0-34.61,39.1-36.93,39.1-36.93Z"/>
<path class="cls-2" d="M238.24,214.27v31.47a11,11,0,0,1-11,11h-1.9a.65.65,0,0,1-.65-.65v-6.49a6.8,6.8,0,0,0-5.76-6.81,6.65,6.65,0,0,0-7.52,6.59v6.29a1.06,1.06,0,0,1-1.06,1.07h-37.8a1.07,1.07,0,0,1-1.07-1.07v-6a6.82,6.82,0,0,0-6.44-6.91,6.64,6.64,0,0,0-6.84,6.64v6.71a.65.65,0,0,1-.65.65h-1.45a11,11,0,0,1-11-11V214.28a11,11,0,0,1,11-11h1.45a.65.65,0,0,1,.65.65v6.84a6.64,6.64,0,0,0,13.28,0V204.3a1.06,1.06,0,0,1,1.07-1.06h37.8a1.05,1.05,0,0,1,1.06,1.06v6.14a6.82,6.82,0,0,0,6.44,6.91,6.63,6.63,0,0,0,6.84-6.62v-6.84a.65.65,0,0,1,.65-.65h1.91A11,11,0,0,1,238.24,214.27Z"/>
<rect class="cls-2" x="158.03" y="170.28" width="13.88" height="20.1" rx="3.72"/>
<rect class="cls-2" x="211.11" y="170.28" width="13.88" height="20.1" rx="3.72"/>
<path class="cls-2" d="M242.71,116.19s-29.8,2.46-25.51,37.8a92,92,0,0,1,8.33-23.15C229.06,124.34,237.32,119.4,242.71,116.19Z"/>
<path class="cls-2" d="M202.64,116.19s-29.8,2.46-25.51,37.8a92,92,0,0,1,8.33-23.15C189,124.34,197.25,119.4,202.64,116.19Z"/>
<path class="cls-2" d="M163.31,116.19s-29.8,2.46-25.51,37.8a92,92,0,0,1,8.33-23.15C149.65,124.34,157.92,119.4,163.31,116.19Z"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

@ -1,30 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 364 364.73">
<defs>
<style>.cls-1{fill:#fffdfd;}.cls-2{fill:url(#linear-gradient);}.cls-3{isolation:isolate;opacity:0.5;fill:url(#linear-gradient-2);}</style>
<linearGradient id="linear-gradient" x1="235.4" y1="269.1" x2="133.56" y2="167.26" gradientTransform="matrix(1, 0, 0, -1, 0, 364.73)" gradientUnits="userSpaceOnUse">
<stop offset="0.09" stop-color="#ff6d41"/>
<stop offset="0.5" stop-color="#fa297f"/>
<stop offset="1" stop-color="#fa297f"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="207.26" y1="295.68" x2="105" y2="193.43" gradientTransform="matrix(1, 0, 0, -1, 0, 364.73)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#652cb4"/><stop offset="0.07" stop-color="#652cb4" stop-opacity="0.82"/>
<stop offset="0.19" stop-color="#652cb4" stop-opacity="0.53"/>
<stop offset="0.3" stop-color="#652cb4" stop-opacity="0.3"/>
<stop offset="0.4" stop-color="#652cb4" stop-opacity="0.14"/>
<stop offset="0.49" stop-color="#652cb4" stop-opacity="0.04"/>
<stop offset="0.55" stop-color="#652cb4" stop-opacity="0"/>
</linearGradient>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g id="NFTX"><rect class="cls-1" width="364" height="364.73" />
<polygon class="cls-2" points="182.52 38.79 73.06 148.78 182.52 254.16 291.97 148.78 182.52 38.79"/>
<polygon class="cls-3" points="182.52 148.78 73.06 148.78 182.52 38.79 182.52 148.78"/>
<path d="M127.44,242.37a116.42,116.42,0,0,1,7.42-9.31C102,241,79.31,257.71,79.31,277c0,.72,0,1.44.1,2.15,3.23-1.23,6.64-2.7,10.25-4.49C111.39,263.94,119.92,252.48,127.44,242.37Z"/>
<path d="M161.7,277.86C168.28,269,174,261.38,190,253.45s25.54-7.77,36.53-7.6c7.36.11,15.3.24,25-1.85-11.81-6.37-27-11.2-44.15-13.78l-24.86,23.93-17.38-16.73c-12.39,8.38-18.73,16.9-24.49,24.63-6.58,8.85-12.26,16.49-28.32,24.41C101.07,292,93,293.61,85.45,294c6,8,16.06,15,29,20.35,3-1.17,6.16-2.56,9.5-4.2C145.65,299.43,154.17,288,161.7,277.86Z"/>
<path d="M261.22,255c-12.57-.21-26.8-.43-48.53,10.3s-30.26,22.19-37.78,32.3C168.33,306.4,162.65,314,146.6,322c-.73.36-1.43.7-2.14,1a193,193,0,0,0,33.94,2.95c2.5,0,5-.05,7.45-.14A135,135,0,0,0,196,313.35c6.58-8.85,12.26-16.49,28.32-24.41s25.55-7.77,36.53-7.6a130.72,130.72,0,0,0,16.37-.47,23.62,23.62,0,0,0,.31-3.85c0-7.92-3.82-15.4-10.59-22C265,255,263.14,255,261.22,255Z"/>
<path d="M218.12,321.83c26-5.61,46.1-16.56,54.75-30A97.82,97.82,0,0,0,247,300.73C232.93,307.66,224.42,314.87,218.12,321.83Z"/>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

@ -1,12 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 364">
<defs>
<style>.cls-1{fill:#fcd903;}.cls-2{fill:#020100;}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path class="cls-1" d="M285.85,364H77.15A77.15,77.15,0,0,1,0,286.85V77.15A77.15,77.15,0,0,1,77.15,0h208.7A77.15,77.15,0,0,1,363,77.15v209.7A77.15,77.15,0,0,1,285.85,364ZM74.09,107.52V267.34H137.6V213.41c26.76,0,53-.21,79.21.11,9.71.12,14.67,5.83,14.84,15.73.18,10.13,0,20.27,0,30.4v7.72h63.37c0-15.84.82-31.47-.24-47-1-14.64-9.32-25.25-22.75-31.56-1.29-.61-2.62-1.12-4-1.71.27-.36.35-.54.48-.61a8.62,8.62,0,0,1,1.32-.67c15-5.49,22.36-16.53,23.09-32.17.77-16.55-4.49-30-20-38.08-12.45-6.44-26-8.1-39.64-8.17-52.49-.26-105-.18-157.48-.21A11.44,11.44,0,0,0,74.09,107.52Z"/>
<path class="cls-2" d="M74.09,107.52a11.44,11.44,0,0,1,1.73-.3c52.5,0,105,0,157.48.21,13.65.07,27.19,1.73,39.64,8.17,15.55,8,20.81,21.53,20,38.08-.73,15.64-8.11,26.68-23.09,32.17a8.62,8.62,0,0,0-1.32.67c-.13.07-.21.25-.48.61,1.37.59,2.7,1.1,4,1.71,13.43,6.31,21.75,16.92,22.75,31.56,1.06,15.5.24,31.13.24,47H231.7v-7.72c0-10.13.13-20.27,0-30.4-.17-9.9-5.13-15.61-14.84-15.73-26.22-.32-52.45-.11-79.21-.11v53.93H74.09Zm63.65,62.39c23.83,0,47.39,0,70.95,0,3.66,0,7.32,0,11-.28,5.58-.49,6.71-2.27,7.14-8.08.41-5.37-2.86-6.48-6.93-7a49.5,49.5,0,0,0-6-.25q-35.89,0-71.78,0c-1.44,0-2.87.13-4.37.2Z"/>
<path class="cls-1" d="M137.74,169.91v-15.4c1.5-.07,2.93-.2,4.37-.2q35.89,0,71.78,0a49.5,49.5,0,0,1,6,.25c4.07.5,7.34,1.61,6.93,7-.43,5.81-1.56,7.59-7.14,8.08-3.64.32-7.3.28-11,.28C185.13,169.92,161.57,169.91,137.74,169.91Z"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

@ -1,6 +0,0 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 14.4C0 6.4471 6.4471 0 14.4 0H33.6C41.5529 0 48 6.4471 48 14.4V33.6C48 41.5529 41.5529 48 33.6 48H14.4C6.4471 48 0 41.5529 0 33.6V14.4Z" fill="#B9B9FF"/>
<path d="M9.29999 15H12L15.3 24L12 33H9.29999L12.6 24L9.29999 15Z" fill="#121212"/>
<path d="M23.5727 33.192C22.1807 33.192 21.0367 32.872 20.1407 32.232C19.2607 31.592 18.8207 30.72 18.8207 29.616H21.2447C21.2447 30.112 21.4607 30.496 21.8927 30.768C22.3407 31.024 22.9167 31.152 23.6207 31.152H24.6287C25.4607 31.152 26.0767 30.992 26.4767 30.672C26.8767 30.336 27.0767 29.896 27.0767 29.352C27.0767 28.808 26.8847 28.384 26.5007 28.08C26.1167 27.776 25.5727 27.56 24.8687 27.432L23.0687 27.168C20.4447 26.752 19.1327 25.48 19.1327 23.352C19.1327 22.136 19.5327 21.208 20.3327 20.568C21.1327 19.928 22.2767 19.608 23.7647 19.608H24.6767C26.0527 19.608 27.1567 19.92 27.9887 20.544C28.8207 21.152 29.2367 21.96 29.2367 22.968H26.8127C26.8127 22.568 26.6127 22.248 26.2127 22.008C25.8287 21.768 25.3007 21.648 24.6287 21.648H23.7167C22.9807 21.648 22.4207 21.8 22.0367 22.104C21.6527 22.392 21.4607 22.808 21.4607 23.352C21.4607 24.28 22.1167 24.848 23.4287 25.056L25.2287 25.344C26.6687 25.568 27.7247 25.992 28.3967 26.616C29.0687 27.224 29.4047 28.104 29.4047 29.256C29.4047 30.488 28.9967 31.456 28.1807 32.16C27.3807 32.848 26.1807 33.192 24.5807 33.192H23.5727Z" fill="#121212"/>
<path d="M38.7 15H36L32.7 24L36 33H38.7L35.4 24L38.7 15Z" fill="#121212"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

@ -1,34 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 364 364">
<defs>
<style>.cls-1{fill:#fff;}.cls-2{fill:#0d0f23;}.cls-3{fill:#2f2f2f;}.cls-4{fill:url(#linear-gradient);}.cls-5{fill:url(#linear-gradient-2);}</style>
<linearGradient id="linear-gradient" x1="177.18" y1="64.07" x2="177.18" y2="292.45" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1bace4"/>
<stop offset="0.7" stop-color="#fa52a0"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="164.69" y1="109.21" x2="242.53" y2="187.05" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#8f82c4"/>
<stop offset="1" stop-color="#e65ba7"/>
</linearGradient>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<rect class="cls-1" width="364" height="364" />
<path class="cls-2" d="M306.26,190.34h0a58.84,58.84,0,0,0-2.07-7.38c-1-2.39-10.24-2.92-11.31-3q.81,2.07,1.5,4.2c2.1,6.46,3.42,13.7,2.81,20.39-1,10.66-9.86,16.75-23.12,17.78-1.82.14-3.65,0-5.48,0a101.74,101.74,0,0,1-16.07-1.56l-1.17-.21c-1-.18-1.72-.32-2.06-.4l-.13,0-.11,0a80.19,80.19,0,0,1-5.48,7.6l.22,0c.76,0,2.81.49,2.3,2.4-.56,2.08-3.55,1.64-5.55,1.17-6.58,7.34-16.39,15.73-27.36,16.53-19.84,1.44-30-20.5-47-39.29S122.52,218.3,112,228.86s-20.79,9.39-20.79,9.39.38.39,1.12,1.08l0,0a249,249,0,0,0,42.51,33.08c7.21,4.5,14.53,8.74,22,12.53,5.1,2.45,10.56,4.92,16.42,7.4l.18.08.13.05A135.84,135.84,0,0,0,215.92,302c15.06.83,28.52-2.82,37.92-16.29l1.1-1.57,0-.05.84-1.19c13.11-18.76,26.36-37.44,40-55.84l.74-1C307.51,211.05,307.64,198.11,306.26,190.34Zm-30.21,43.22c-1.38.18-12.9,1.8-23.57-.17,0,0-2.84,0-2.84-2.5,0,0,.22-2.36,4.14-1.36s16.31,1.41,21.63.16c0,0,2.19-.72,2.89,1S277.43,233.39,276.05,233.56Z"/>
<path class="cls-3" d="M255.81,282.93c13.11-18.76,26.36-37.44,40-55.84C280.76,247.75,260.19,276.75,255.81,282.93Z"/>
<path class="cls-1" d="M249.64,230.89s.22-2.36,4.14-1.36,16.31,1.41,21.63.16c0,0,2.19-.72,2.89,1s-.87,2.67-2.25,2.84-12.9,1.8-23.57-.17C252.48,233.39,249.64,233.34,249.64,230.89Z"/>
<path class="cls-3" d="M252.52,220.8c.78.14,1.57.25,2.36.37C254,221.05,253.22,220.92,252.52,220.8Z"/>
<path class="cls-3" d="M306.26,190.33a58.84,58.84,0,0,0-2.07-7.38.3.3,0,0,1,0,.08A44.32,44.32,0,0,1,306.26,190.33Z"/>
<path class="cls-4" d="M173.32,292.37c-5.86-2.48-11.32-4.95-16.42-7.4l2,1,2.05,1,1,.49q.76.38,1.53.72,1.16.54,2.31,1.05c2.52,1.13,5.06,2.19,7.63,3.2Zm76.49-72.08-.38-.07,1.22.24Zm53.89-38.72c-6.17-16.66-16.37-30.79-28.17-43.74a252.85,252.85,0,0,0-83.44-60.35c-16.76-7.58-34.22-12.78-49.8-13.41-19.83,0-29.84,4.43-38.43,16.31q-24.23,33.54-48.19,67.27c-4.61,6.48-6.07,13.87-5.31,21.77,1.46,15.06,8.21,28,16.64,40.05.56.81,1.13,1.61,1.71,2.41,1.35,1.89,2.73,3.74,4.15,5.57.5.65,1,1.3,1.51,1.94,1.69,2.15,3.43,4.25,5.2,6.31.63.74,1.26,1.47,1.91,2.2.35.41.71.81,1.08,1.21s.87,1,1.32,1.47c.6.65,1.19,1.3,1.79,1.94,1.07,1.14,2.14,2.26,3.23,3.37l1.71,1.73c.58.58.06.09.63.65.61,0,.93,0,.93,0s9.33,1.13,19.84-9.42,37.05-39.07,54.13-20.29,27.2,40.73,47,39.29c11-.8,20.78-9.19,27.36-16.53l-.72-.18c-1.91-.5-5-1.84-3.91-4s4-.33,4-.33c.4.17.79.3,1.16.42l.54.15.5.12c.32.07.61.12.86.16l.28,0,.35,0a80.19,80.19,0,0,0,5.48-7.6c-1.86-.39-3.72-.83-5.56-1.3-.93-.24-1.86-.49-2.78-.76s-2-.58-3-.89-2-.62-3-1-2-.67-3-1q-3-1-5.87-2.24l-2.28-.94c-1.19-.5-2.36-1-3.54-1.53a243.23,243.23,0,0,1-78.8-55.73c-12.58-13.35-23.67-27.87-29.42-45.7a43.18,43.18,0,0,1-2-8.71c-1.7-16.83,7.61-26.45,26.48-27.06,13.66-.45,26.76,2.92,39.4,7.6,36.7,13.6,67.77,35.63,94.09,64.38.66.72,1.31,1.43,1.95,2.16.52.58,1,1.17,1.55,1.76.37.43.74.85,1.1,1.28s.77.9,1.14,1.36c.56.66,1.11,1.33,1.65,2l1.41,1.79c.32.4.63.81.94,1.22s.78,1,1.16,1.56l.31.42c.48.65.95,1.3,1.4,2l.22.32c.44.63.88,1.26,1.3,1.91q1.47,2.2,2.82,4.48c.16.27.33.55.48.83s.2.33.29.5c.29.51.58,1,.86,1.54l.26.47c.35.65.69,1.3,1,2s.63,1.27.94,1.91l.33.7c.32.71.64,1.42.95,2.14s.58,1.38.86,2.08c.05.12.1.23.14.35,1.07.06,10.33.59,11.31,3C304,182.49,303.87,182,303.7,181.57ZM99,102.88a2.27,2.27,0,0,1,2.17-2.1,2.11,2.11,0,0,1,1.76,2.79,4.47,4.47,0,0,0,.07,2.28c.11.38.29,2.87-1.83,2.87C98.46,108.72,98.89,104.88,99,102.88Zm20.73,40.6c12.15,18.19,35.9,37.84,36.79,38.66s3.51,2,2,3.94-4.56-.5-4.56-.5c-6.44-4.67-24.83-23.05-36.73-38.23S101.1,117,100.53,114.44a8,8,0,0,1-.14-1,2.07,2.07,0,0,1,2.88-2.15,2.36,2.36,0,0,1,1.18,1.63C105.09,115.88,107.61,125.28,119.76,143.48Z"/>
<path class="cls-1" d="M246.09,230.16c-.63,2.35-4.37,1.48-6.27,1s-5-1.84-3.91-4,4-.33,4-.33a13,13,0,0,0,3.91.95C244.55,227.76,246.6,228.25,246.09,230.16Z"/>
<path class="cls-1" d="M276.05,233.56c-1.38.18-12.9,1.8-23.57-.17,0,0-2.84,0-2.84-2.5,0,0,.22-2.36,4.14-1.36s16.31,1.41,21.63.16c0,0,2.19-.72,2.89,1S277.43,233.39,276.05,233.56Z"/>
<path class="cls-1" d="M101.2,108.72c-2.74,0-2.31-3.84-2.17-5.84a2.27,2.27,0,0,1,2.17-2.1,2.11,2.11,0,0,1,1.76,2.79,4.47,4.47,0,0,0,.07,2.28C103.14,106.23,103.32,108.72,101.2,108.72Z"/>
<path class="cls-1" d="M158.55,186.08c-1.51,2-4.56-.5-4.56-.5-6.44-4.67-24.83-23.05-36.73-38.23S101.1,117,100.53,114.44a8,8,0,0,1-.14-1,2.07,2.07,0,0,1,2.88-2.15,2.36,2.36,0,0,1,1.18,1.63c.64,2.92,3.16,12.32,15.31,30.52s35.9,37.84,36.79,38.66S160.06,184.11,158.55,186.08Z"/>
<path class="cls-1" d="M294.38,184.17q-.69-2.13-1.5-4.2c0-.12-.09-.23-.14-.35-.28-.7-.56-1.4-.86-2.08s-.63-1.43-.95-2.14l-.33-.7c-.31-.64-.62-1.28-.94-1.91s-.67-1.31-1-2l-.26-.47c-.28-.52-.57-1-.86-1.54-.09-.17-.19-.34-.29-.5l-.48-.83q-1.35-2.28-2.82-4.48c-.42-.64-.85-1.28-1.3-1.91l-.22-.32c-.46-.66-.92-1.31-1.4-2l-.31-.42c-.38-.53-.77-1-1.16-1.56s-.62-.82-.94-1.22l-1.41-1.79c-.55-.67-1.09-1.34-1.65-2-.37-.46-.76-.91-1.14-1.36s-.73-.85-1.1-1.28c-.51-.59-1-1.18-1.55-1.76q-1-1.1-1.95-2.16c-26.32-28.75-57.39-50.78-94.09-64.38-12.64-4.68-25.74-8-39.4-7.6-18.87.61-28.18,10.23-26.48,27.06a43.18,43.18,0,0,0,2,8.71c5.75,17.83,16.84,32.35,29.42,45.7a243.23,243.23,0,0,0,78.8,55.73c1.18.52,2.35,1,3.54,1.53l2.28.94c1.95.79,3.9,1.53,5.87,2.24,1,.35,2,.7,3,1s2,.65,3,1,2,.61,3,.89,1.85.52,2.78.76c1.84.47,3.7.91,5.56,1.3l.11,0,.13,0,.14,0,.38.07.13,0,.71.14.33.06a102.69,102.69,0,0,0,17.61,1.84c1.83,0,3.66.12,5.48,0,13.26-1,22.16-7.12,23.12-17.78C297.8,197.87,296.48,190.63,294.38,184.17ZM247,182.45a11.09,11.09,0,0,1-1,.65,5.7,5.7,0,0,1-.54.3,12.23,12.23,0,0,1-1.15.55l-.62.24c-.42.16-.86.3-1.31.43l-.71.19c-.47.12-1,.22-1.48.31l-.78.13-.81.11-1.27.13q-.65.06-1.32.09l-.15,0A70.87,70.87,0,0,1,220.6,182c-23.73-8.6-43.49-22.66-57.57-43.88-2.77-4.18-4.52-9.23-5.9-14.11-.08-.3-.16-.59-.21-.89s-.07-.36-.1-.54a10.55,10.55,0,0,1-.12-1.56c0-.17,0-.33,0-.49a10,10,0,0,1,.16-1.35,3.12,3.12,0,0,1,.09-.44l.12-.42a2.58,2.58,0,0,1,.13-.42c0-.14.1-.27.16-.4s.11-.27.17-.4a2.4,2.4,0,0,1,.2-.39c.06-.13.14-.25.21-.38a3.17,3.17,0,0,1,.23-.36c.08-.12.16-.24.25-.35a3,3,0,0,1,.27-.35c.09-.11.19-.22.29-.32a1.79,1.79,0,0,1,.3-.32c.16-.16.33-.32.51-.47s.36-.29.55-.43.38-.27.59-.4l.63-.36.67-.32c.22-.1.46-.19.7-.28s.49-.17.74-.24l.52-.14.26-.06c.66-.15,1.32-.27,2-.38s1.35-.19,2-.25a35.2,35.2,0,0,1,4.11-.12l1.16.07q.66,0,1.32.12c.39,0,.78.1,1.17.16.65.1,1.31.22,1.95.34l1,.19,1.23.26c.19,0,.39.08.57.12,1.43.32,2.84.67,4.23,1.07l.16,0c.53.15,1.06.3,1.58.47.33.09.66.19,1,.3,1.75.55,3.48,1.16,5.17,1.83.5.2,1,.39,1.47.6s.88.36,1.32.55c.62.26,1.23.54,1.85.82l1.75.83,1.32.66c.51.25,1,.51,1.52.78,1,.51,1.92,1,2.87,1.58,1.53.87,3,1.78,4.52,2.73,1,.61,1.91,1.24,2.86,1.89h0c.94.64,1.88,1.3,2.81,2s1.62,1.2,2.43,1.81q3.61,2.76,7.08,5.77l1.18,1,1.17,1.07,1.53,1.45c1,1,2.09,2.06,3.1,3.12l1,1c.91,1,1.8,1.94,2.67,2.92.53.59,1.06,1.18,1.58,1.78l1.56,1.8c.52.6,1,1.21,1.54,1.81l2,2.43.29.36c.17.19.31.38.45.57s.38.49.55.74.47.66.69,1,.52.79.75,1.2c.14.22.28.45.4.68s.21.35.31.53.31.56.46.85c.38.72.75,1.44,1.09,2.18.57,1.17,1.08,2.36,1.57,3.55C251.92,173.82,251.21,179.29,247,182.45Z"/>
<path class="cls-5" d="M247,182.45a11.09,11.09,0,0,1-1,.65,5.7,5.7,0,0,1-.54.3,12.23,12.23,0,0,1-1.15.55l-.62.24c-.42.16-.86.3-1.31.43l-.71.19c-.47.11-1,.22-1.48.31l-.78.13-.81.11-1.27.13-1.32.08h-.15A70.87,70.87,0,0,1,220.6,182c-23.73-8.6-43.49-22.66-57.57-43.88-2.77-4.18-4.52-9.23-5.9-14.11-.08-.3-.16-.59-.21-.89s-.07-.36-.1-.54a10.55,10.55,0,0,1-.12-1.56c0-.17,0-.33,0-.49a10,10,0,0,1,.16-1.35,3.12,3.12,0,0,1,.09-.44l.12-.42a2.58,2.58,0,0,1,.13-.42c0-.14.1-.27.16-.4s.11-.27.17-.4a2.4,2.4,0,0,1,.2-.39c.06-.13.14-.25.21-.38a3.17,3.17,0,0,1,.23-.36c.08-.12.16-.24.25-.35a3,3,0,0,1,.27-.35c.09-.11.19-.22.29-.32a1.79,1.79,0,0,1,.3-.32c.16-.16.33-.32.51-.47s.36-.29.55-.43.38-.27.59-.4l.63-.36.67-.32c.22-.1.46-.19.7-.28s.49-.17.74-.24l.52-.14.26-.06c.66-.15,1.32-.27,2-.38s1.35-.19,2-.25a35.2,35.2,0,0,1,4.11-.12l1.16.07q.66,0,1.32.12c.39,0,.78.1,1.17.16.65.1,1.31.22,1.95.34l1,.19,1.23.26c.19,0,.39.08.57.12,1.43.32,2.84.67,4.23,1.07l.16,0c.53.15,1.06.3,1.58.47.33.09.66.19,1,.3,1.75.55,3.48,1.16,5.17,1.83.5.2,1,.39,1.47.6s.88.36,1.32.55c.62.26,1.23.54,1.85.82l1.75.83,1.32.66c.51.25,1,.51,1.52.78,1,.51,1.92,1,2.87,1.58,1.53.87,3,1.78,4.52,2.73,1,.61,1.91,1.24,2.86,1.89h0c.94.64,1.88,1.3,2.81,2s1.62,1.2,2.43,1.81q3.61,2.76,7.08,5.77l1.18,1,1.17,1.07,1.53,1.45c1,1,2.09,2.06,3.1,3.12l1,1c.91,1,1.8,1.94,2.67,2.92.53.59,1.06,1.18,1.58,1.78l1.56,1.8c.52.6,1,1.21,1.54,1.81l2,2.43.29.36c.17.19.31.38.45.57s.37.49.55.74.47.66.69,1,.52.79.75,1.2c.14.22.28.45.4.68s.21.35.31.53.31.56.46.85c.38.72.75,1.44,1.09,2.18.57,1.17,1.08,2.36,1.57,3.55C251.92,173.82,251.21,179.29,247,182.45Z"/>
<path d="M156.87,119.18a10,10,0,0,0-.16,1.35A6.73,6.73,0,0,1,156.87,119.18Z"/>
<path d="M166.45,111.55c-.67.11-1.33.23-2,.38l-.26.06.26-.07C165.12,111.78,165.78,111.65,166.45,111.55Z"/>
<path d="M226.1,137.19l-1.18-1q-3.46-3-7.08-5.77c2.41,1.83,4.77,3.76,7.08,5.76C225.32,136.49,225.71,136.84,226.1,137.19Z"/>
<path d="M235.87,185.56A55.12,55.12,0,0,1,220.6,182,70.87,70.87,0,0,0,235.87,185.56Z"/><path d="M242.53,154.94l-.29-.36-2-2.43q1,1.22,2,2.43A4.39,4.39,0,0,1,242.53,154.94Z"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 9.7 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 7.8 KiB

@ -1,19 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 363 363.93">
<defs>
<style>.cls-1{fill:#fff;}.cls-2,.cls-3{fill:#ff007a;}.cls-3{fill-rule:evenodd;}</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="US">
<rect class="cls-1" width="363" height="363.93" />
<path class="cls-2" d="M133.66,88.51c-2.58-.4-2.69-.45-1.48-.64,2.34-.36,7.84.13,11.64,1,8.85,2.11,16.91,7.51,25.51,17.12l2.29,2.55,3.27-.53c13.77-2.22,27.78-.46,39.5,5,3.23,1.5,8.31,4.47,9,5.23a14.12,14.12,0,0,1,.82,3.49c.87,5.78.44,10.21-1.33,13.53-1,1.8-1,2.37-.37,3.91a3.79,3.79,0,0,0,3.38,2.14c2.91,0,6-4.72,7.5-11.29l.58-2.61,1.14,1.3c6.27,7.12,11.19,16.83,12,23.75l.22,1.8-1-1.64a20.33,20.33,0,0,0-6-6.29c-4.21-2.79-8.66-3.74-20.44-4.36-10.64-.56-16.66-1.47-22.63-3.42-10.15-3.33-15.27-7.75-27.34-23.62-5.36-7-8.67-11-12-14.09C150.44,93.72,143.08,90,133.66,88.51Z"/>
<path class="cls-2" d="M225.74,104.25c.26-4.73.9-7.84,2.19-10.69a11.42,11.42,0,0,1,1.06-2,7.31,7.31,0,0,1-.49,1.85c-.94,2.76-1.09,6.54-.45,10.93.82,5.58,1.28,6.38,7.16,12.41,2.76,2.82,6,6.39,7.13,7.92l2.11,2.78-2.11-2a90.34,90.34,0,0,0-9.85-7.85c-.88-.45-1-.45-1.55.09s-.61,1.25-.68,4.8c-.1,5.53-.86,9.08-2.67,12.63-1,1.92-1.14,1.51-.25-.66.66-1.61.73-2.33.73-7.68,0-10.75-1.29-13.34-8.76-17.77-1.89-1.12-5-2.74-6.92-3.59a28.13,28.13,0,0,1-3.39-1.66c.21-.21,7.5,1.92,10.43,3,4.36,1.68,5.08,1.9,5.61,1.7C225.39,108.33,225.56,107.29,225.74,104.25Z"/>
<path class="cls-2" d="M138.68,122.64c-5.24-7.24-8.49-18.35-7.79-26.65l.22-2.57,1.19.22a29.77,29.77,0,0,1,7.93,3c5,3,7.12,7,9.31,17.24.64,3,1.48,6.39,1.87,7.54a51.22,51.22,0,0,0,4.89,9c1.38,2,.46,3-2.58,2.7C149.06,132.62,142.75,128.26,138.68,122.64Z"/>
<path class="cls-2" d="M219.37,176.56c-24.53-9.9-33.17-18.49-33.17-33a22.78,22.78,0,0,1,.17-3.88,18.57,18.57,0,0,1,2.1,1.56c5,4,10.55,5.71,26,8,9.07,1.33,14.18,2.4,18.89,4,15,5,24.23,15.08,26.44,28.84a47.74,47.74,0,0,1-.78,15.44c-.82,3.12-3.32,8.75-4,9-.18.06-.36-.64-.41-1.61a20,20,0,0,0-7.23-14C242.39,186.56,235.7,183.15,219.37,176.56Z"/>
<path class="cls-2" d="M202.15,180.67a45.44,45.44,0,0,0-1.18-5.2l-.63-1.87,1.16,1.31a21,21,0,0,1,4,7.21c.82,2.36.92,3.06.91,6.88s-.11,4.55-.87,6.67a21,21,0,0,1-5.18,8.25c-4.48,4.57-10.24,7.11-18.55,8.16-1.44.18-5.66.49-9.36.68-9.33.48-15.47,1.49-21,3.43a4.46,4.46,0,0,1-1.57.38c-.23-.22,3.53-2.47,6.64-4,4.37-2.11,8.73-3.26,18.49-4.89,4.82-.81,9.8-1.78,11.06-2.17C198,201.87,204.11,192.4,202.15,180.67Z"/>
<path class="cls-2" d="M213.39,200.69c-3.25-7-4-13.8-2.22-20.13.19-.67.5-1.22.69-1.22a6.48,6.48,0,0,1,1.7.92c1.51,1,4.52,2.72,12.54,7.11,10,5.47,15.72,9.71,19.61,14.55a31.65,31.65,0,0,1,6.51,15,50.93,50.93,0,0,1-.61,14.72c-2.7,10.6-9,18.91-17.88,23.77a25.08,25.08,0,0,1-2.6,1.3,9.37,9.37,0,0,1,1.05-2.7,24.32,24.32,0,0,0,1.08-19.23c-1.39-4.17-4.23-9.26-9.95-17.86C216.66,206.88,215,204.22,213.39,200.69Z"/>
<path class="cls-2" d="M121.27,238.59c9.1-7.71,20.42-13.18,30.74-14.86a47.87,47.87,0,0,1,16,.62c6.6,1.69,12.5,5.49,15.57,10s4.29,8.27,5.63,16.83c.53,3.38,1.1,6.77,1.28,7.54,1,4.43,3,8,5.39,9.76,3.85,2.83,10.49,3,17,.45a8.38,8.38,0,0,1,2.14-.66c.24.23-3,2.44-5.37,3.6a18.13,18.13,0,0,1-8.9,2.17c-6,0-11-3.05-15.09-9.27a71.72,71.72,0,0,1-4.07-8.15c-4.38-10-6.54-13.05-11.62-16.38-4.42-2.9-10.12-3.42-14.41-1.31a9.37,9.37,0,0,0-3.17,14.55,12.49,12.49,0,0,0,7,3.69,7.51,7.51,0,0,0,8.51-7.54c0-3-1.16-4.73-4.06-6-4-1.79-8.22.3-8.2,4a3.34,3.34,0,0,0,2.29,3.31c1,.46,1,.5.21.33-3.63-.76-4.48-5.15-1.56-8.07,3.51-3.5,10.77-2,13.26,2.82a12.36,12.36,0,0,1,.26,8.42c-2,5.41-8,8.25-14,6.7-4.11-1.05-5.79-2.19-10.75-7.31-8.62-8.9-12-10.63-24.39-12.57l-2.38-.38Z"/>
<path class="cls-3" d="M56.26,39.17c28.79,35,73.17,89.56,75.38,92.62,1.82,2.52,1.13,4.79-2,6.56a18.77,18.77,0,0,1-7.08,2,9,9,0,0,1-5.94-2.55c-1.17-1.11-5.9-8.18-16.8-25.14-8.34-13-15.32-23.74-15.51-23.92-.44-.42-.43-.4,14.66,26.67,9.48,17,12.68,23,12.68,23.82,0,1.64-.44,2.5-2.46,4.75-3.35,3.75-4.85,8-5.93,16.69-1.22,9.78-4.63,16.68-14.08,28.51-5.54,6.92-6.44,8.19-7.84,11a20.31,20.31,0,0,0-2.44,9.91,30.85,30.85,0,0,0,1.63,12.2c1.25,3.93,2.55,6.52,5.89,11.71,2.88,4.47,4.54,7.79,4.54,9.1,0,1,.2,1,4.66,0,10.69-2.42,19.36-6.67,24.24-11.89,3-3.22,3.73-5,3.76-9.43,0-2.89-.09-3.5-.87-5.16-1.27-2.71-3.58-5-8.68-8.45-6.67-4.58-9.52-8.26-10.31-13.32-.64-4.16.11-7.09,3.8-14.85,3.82-8,4.77-11.45,5.41-19.55.41-5.23,1-7.29,2.48-8.94s3-2.31,6.84-2.84c6.31-.87,10.32-2.5,13.62-5.55a11.86,11.86,0,0,0,4.25-9l.14-2.9-1.6-1.87C132.92,122.52,52.38,33.84,52,33.84,52,33.84,53.86,36.24,56.26,39.17Zm38,176.2a5.16,5.16,0,0,0-1.58-6.78c-2.07-1.38-5.29-.73-5.29,1.07,0,.55.3,1,1,1.3,1.14.59,1.23,1.26.32,2.62s-.84,2.59.21,3.42C90.57,218.33,93,217.6,94.23,215.37Z"/>
<path class="cls-3" d="M144.29,150.18a11.14,11.14,0,0,0-6.73,7.36c-.54,2-.23,5.54.58,6.63,1.31,1.76,2.59,2.22,6,2.2,6.74-.05,12.6-3,13.29-6.57.55-3-2-7.09-5.57-8.9A13.16,13.16,0,0,0,144.29,150.18Zm7.88,6.18c1-1.48.59-3.08-1.18-4.16-3.37-2.07-8.46-.36-8.46,2.83,0,1.59,2.65,3.32,5.09,3.32A6.55,6.55,0,0,0,152.17,156.36Z"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 4.9 KiB

@ -16,7 +16,7 @@ try {
} }
// The last recorded size for these assets, as reported by `yarn build`. // The last recorded size for these assets, as reported by `yarn build`.
const LAST_SIZE_MAIN_KB = 420 const LAST_SIZE_MAIN_KB = 435
// This is the async-loaded js, called <number>.<hash>.js, with a matching css file. // This is the async-loaded js, called <number>.<hash>.js, with a matching css file.
const LAST_SIZE_ENTRY_KB = 1442 const LAST_SIZE_ENTRY_KB = 1442

@ -173,15 +173,6 @@ export const filter = style([
}, },
]) ])
export const marketplaceIcon = style([
sprinkles({
width: '16',
height: '16',
borderRadius: '4',
flexShrink: '0',
}),
])
export const rarityInfo = style([ export const rarityInfo = style([
sprinkles({ sprinkles({
display: 'flex', display: 'flex',

@ -23,6 +23,7 @@ import {
TokenMetadata, TokenMetadata,
TokenRarity, TokenRarity,
} from 'nft/types' } from 'nft/types'
import { getMarketplaceIcon } from 'nft/utils'
import { shortenAddress } from 'nft/utils/address' import { shortenAddress } from 'nft/utils/address'
import { buildActivityAsset } from 'nft/utils/buildActivityAsset' import { buildActivityAsset } from 'nft/utils/buildActivityAsset'
import { formatEth } from 'nft/utils/currency' import { formatEth } from 'nft/utils/currency'
@ -103,7 +104,6 @@ export const BuyCell = ({
}, [asset, itemsInBag]) }, [asset, itemsInBag])
const trace = useTrace({ page: InterfacePageName.NFT_COLLECTION_PAGE }) const trace = useTrace({ page: InterfacePageName.NFT_COLLECTION_PAGE })
const eventProperties = { const eventProperties = {
collection_address: asset.address, collection_address: asset.address,
token_id: asset.tokenId, token_id: asset.tokenId,
@ -160,17 +160,6 @@ export const AddressCell = ({ address, desktopLBreakpoint, chainId }: AddressCel
) )
} }
export const MarketplaceIcon = ({ marketplace }: { marketplace: Markets | string }) => {
return (
<Box
as="img"
alt={marketplace}
src={`/nft/svgs/marketplaces/${marketplace.toLowerCase()}.svg`}
className={styles.marketplaceIcon}
/>
)
}
const PriceTooltip = ({ price }: { price: string }) => ( const PriceTooltip = ({ price }: { price: string }) => (
<MouseoverTooltip <MouseoverTooltip
text={ text={
@ -189,7 +178,7 @@ export const PriceCell = ({ marketplace, price }: { marketplace?: Markets | stri
return ( return (
<Row display={{ sm: 'none', md: 'flex' }} gap="8"> <Row display={{ sm: 'none', md: 'flex' }} gap="8">
{marketplace && <MarketplaceIcon marketplace={marketplace} />} {marketplace && getMarketplaceIcon(marketplace, '16')}
{formattedPrice ? ( {formattedPrice ? (
formattedPrice.length > 6 ? ( formattedPrice.length > 6 ? (
<PriceTooltip price={formattedPrice} /> <PriceTooltip price={formattedPrice} />

@ -41,6 +41,7 @@ import {
} from 'nft/types' } from 'nft/types'
import { import {
calcPoolPrice, calcPoolPrice,
getMarketplaceIcon,
getRarityStatus, getRarityStatus,
isInSameMarketplaceCollection, isInSameMarketplaceCollection,
isInSameSudoSwapPool, isInSameSudoSwapPool,
@ -55,7 +56,7 @@ import styled, { css } from 'styled-components/macro'
import { ThemedText } from 'theme' import { ThemedText } from 'theme'
import { LoadingAssets } from './CollectionAssetLoading' import { LoadingAssets } from './CollectionAssetLoading'
import { MARKETPLACE_ITEMS, MarketplaceLogo } from './MarketplaceSelect' import { MARKETPLACE_ITEMS } from './MarketplaceSelect'
import { ClearAllButton } from './shared' import { ClearAllButton } from './shared'
import { Sweep } from './Sweep' import { Sweep } from './Sweep'
import { TraitChip } from './TraitChip' import { TraitChip } from './TraitChip'
@ -543,7 +544,7 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
key={market} key={market}
value={ value={
<MarketNameWrapper> <MarketNameWrapper>
<MarketplaceLogo src={`/nft/svgs/marketplaces/${market.toLowerCase()}.svg`} /> {getMarketplaceIcon(market, '16')}
{MARKETPLACE_ITEMS[market as keyof typeof MARKETPLACE_ITEMS]} {MARKETPLACE_ITEMS[market as keyof typeof MARKETPLACE_ITEMS]}
</MarketNameWrapper> </MarketNameWrapper>
} }

@ -453,7 +453,7 @@ export const CollectionStats = ({ stats, isMobile }: { stats: GenieCollection; i
borderRadius="round" borderRadius="round"
position="absolute" position="absolute"
className={isCollectionStatsLoading ? styles.collectionImageIsLoading : styles.collectionImage} className={isCollectionStatsLoading ? styles.collectionImageIsLoading : styles.collectionImage}
src={stats.isFoundation && !stats.imageUrl ? '/nft/svgs/marketplaces/foundation.svg' : stats.imageUrl} src={stats.imageUrl}
/> />
<Box className={styles.statsText}> <Box className={styles.statsText}>
<CollectionName <CollectionName

@ -8,6 +8,7 @@ import { ChevronUpIcon } from 'nft/components/icons'
import { subheadSmall } from 'nft/css/common.css' import { subheadSmall } from 'nft/css/common.css'
import { useCollectionFilters } from 'nft/hooks/useCollectionFilters' import { useCollectionFilters } from 'nft/hooks/useCollectionFilters'
import { TraitPosition, useTraitsOpen } from 'nft/hooks/useTraitsOpen' import { TraitPosition, useTraitsOpen } from 'nft/hooks/useTraitsOpen'
import { getMarketplaceIcon } from 'nft/utils'
import { FormEvent, useEffect, useMemo, useReducer, useState } from 'react' import { FormEvent, useEffect, useMemo, useReducer, useState } from 'react'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { ThemedText } from 'theme' import { ThemedText } from 'theme'
@ -24,12 +25,6 @@ const FilterItemWrapper = styled(Row)`
} }
` `
export const MarketplaceLogo = styled.img`
height: 16px;
width: 16px;
border-radius: 4px;
`
const MarketNameWrapper = styled(Row)` const MarketNameWrapper = styled(Row)`
gap: 10px; gap: 10px;
` `
@ -45,13 +40,6 @@ export const MARKETPLACE_ITEMS = {
cryptopunks: 'LarvaLabs', cryptopunks: 'LarvaLabs',
} }
function getMarketLogoSrc(market: string) {
const marketplaceItem = Object.keys(MARKETPLACE_ITEMS).find(
(key) => MARKETPLACE_ITEMS[key as keyof typeof MARKETPLACE_ITEMS] === market
)
return `/nft/svgs/marketplaces/${marketplaceItem}.svg`
}
export const FilterItem = ({ export const FilterItem = ({
title, title,
element, element,
@ -111,7 +99,7 @@ const MarketplaceItem = ({
const titleWithLogo = ( const titleWithLogo = (
<MarketNameWrapper> <MarketNameWrapper>
<MarketplaceLogo src={getMarketLogoSrc(title)} /> {getMarketplaceIcon(title, '16')}
{title} {title}
</MarketNameWrapper> </MarketNameWrapper>
) )

@ -1,8 +1,9 @@
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { OpacityHoverState, ScrollBarStyles } from 'components/Common' import { OpacityHoverState, ScrollBarStyles } from 'components/Common'
import { LoadingBubble } from 'components/Tokens/loading' import { LoadingBubble } from 'components/Tokens/loading'
import { EventCell, MarketplaceIcon } from 'nft/components/collection/ActivityCells' import { EventCell } from 'nft/components/collection/ActivityCells'
import { ActivityEvent } from 'nft/types' import { ActivityEvent } from 'nft/types'
import { getMarketplaceIcon } from 'nft/utils'
import { shortenAddress } from 'nft/utils/address' import { shortenAddress } from 'nft/utils/address'
import { formatEth } from 'nft/utils/currency' import { formatEth } from 'nft/utils/currency'
import { getTimeDifference } from 'nft/utils/date' import { getTimeDifference } from 'nft/utils/date'
@ -167,7 +168,7 @@ const AssetActivity = ({ events }: { events: ActivityEvent[] | undefined }) => {
<TD> <TD>
{formattedPrice && ( {formattedPrice && (
<PriceContainer> <PriceContainer>
{marketplace && <MarketplaceIcon marketplace={marketplace} />} {marketplace && getMarketplaceIcon(marketplace, '16')}
{formattedPrice} ETH {formattedPrice} ETH
</PriceContainer> </PriceContainer>
)} )}

@ -92,14 +92,6 @@ const PriceRow = styled.div`
align-items: flex-end; align-items: flex-end;
` `
const MarketplaceIcon = styled.img`
width: 20px;
height: 20px;
border-radius: 4px;
margin-top: auto;
margin-bottom: auto;
`
const BuyNowButton = styled.div<{ assetInBag: boolean; margin: boolean; useAccentColor: boolean }>` const BuyNowButton = styled.div<{ assetInBag: boolean; margin: boolean; useAccentColor: boolean }>`
position: relative; position: relative;
width: 100%; width: 100%;
@ -210,6 +202,11 @@ const DefaultLink = styled(Link)`
text-decoration: none; text-decoration: none;
` `
const MarketplaceIcon = styled(ExternalLink)`
display: flex;
align-items: center;
`
const OwnerContainer = ({ asset }: { asset: WalletAsset }) => { const OwnerContainer = ({ asset }: { asset: WalletAsset }) => {
const navigate = useNavigate() const navigate = useNavigate()
const { data: USDValue } = useQuery(['fetchPrice', {}], () => fetchPrice(), {}) const { data: USDValue } = useQuery(['fetchPrice', {}], () => fetchPrice(), {})
@ -243,9 +240,9 @@ const OwnerContainer = ({ asset }: { asset: WalletAsset }) => {
<HeaderRow> <HeaderRow>
<ThemedText.SubHeader color="accentAction">{listing ? 'Your Price' : 'List for Sale'}</ThemedText.SubHeader> <ThemedText.SubHeader color="accentAction">{listing ? 'Your Price' : 'List for Sale'}</ThemedText.SubHeader>
{listing && ( {listing && (
<ExternalLink href={listing.marketplaceUrl}> <MarketplaceIcon href={listing.marketplaceUrl}>
<MarketplaceIcon alt={listing.marketplace} src={getMarketplaceIcon(listing.marketplace)} /> {getMarketplaceIcon(listing.marketplace, '20')}
</ExternalLink> </MarketplaceIcon>
)} )}
</HeaderRow> </HeaderRow>
<PriceRow> <PriceRow>
@ -373,9 +370,9 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
<BestPriceContainer> <BestPriceContainer>
<HeaderRow> <HeaderRow>
<ThemedText.SubHeader color="accentAction">Best Price</ThemedText.SubHeader> <ThemedText.SubHeader color="accentAction">Best Price</ThemedText.SubHeader>
<ExternalLink href={cheapestOrder.marketplaceUrl}> <MarketplaceIcon href={cheapestOrder.marketplaceUrl}>
<MarketplaceIcon alt={cheapestOrder.marketplace} src={getMarketplaceIcon(cheapestOrder.marketplace)} /> {getMarketplaceIcon(cheapestOrder.marketplace, '20')}
</ExternalLink> </MarketplaceIcon>
</HeaderRow> </HeaderRow>
<PriceRow> <PriceRow>
<ThemedText.MediumHeader fontSize="28px" lineHeight="36px"> <ThemedText.MediumHeader fontSize="28px" lineHeight="36px">

@ -2,7 +2,7 @@ import { formatNumberOrString, NumberType } from '@uniswap/conedison/format'
import { loadingAnimation } from 'components/Loader/styled' import { loadingAnimation } from 'components/Loader/styled'
import { LoadingBubble } from 'components/Tokens/loading' import { LoadingBubble } from 'components/Tokens/loading'
import { useCollection } from 'graphql/data/nft/Collection' import { useCollection } from 'graphql/data/nft/Collection'
import { VerifiedIcon } from 'nft/components/icons' import { UniswapMagentaIcon, VerifiedIcon } from 'nft/components/icons'
import { Markets, TrendingCollection } from 'nft/types' import { Markets, TrendingCollection } from 'nft/types'
import { ethNumberStandardFormatter } from 'nft/utils' import { ethNumberStandardFormatter } from 'nft/utils'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
@ -246,7 +246,7 @@ export const CarouselCard = ({ collection, onClick }: CarouselCardProps) => {
<CardBottomContainer> <CardBottomContainer>
<> <>
<TableElement> <TableElement>
<MarketplaceIcon src="/nft/svgs/marketplaces/uniswap-magenta.svg" alt="Uniswap icon" /> <UniswapMagentaIcon width="20" height="20" />
<FirstColumnTextWrapper> <FirstColumnTextWrapper>
<ThemedText.SubHeaderSmall color="userThemeColor">Uniswap</ThemedText.SubHeaderSmall> <ThemedText.SubHeaderSmall color="userThemeColor">Uniswap</ThemedText.SubHeaderSmall>
</FirstColumnTextWrapper> </FirstColumnTextWrapper>

File diff suppressed because one or more lines are too long

@ -143,15 +143,13 @@ export enum Markets {
NFTX = 'nftx', NFTX = 'nftx',
Opensea = 'opensea', Opensea = 'opensea',
Rarible = 'rarible', Rarible = 'rarible',
Uniswap = 'Uniswap',
Uniswap_V2 = 'Uniswap_V2',
SushiSwap = 'SushiSwap',
SuperRare = 'superrare',
Sudoswap = 'sudoswap', Sudoswap = 'sudoswap',
KnownOrigin = 'knownorigin',
WETH = 'weth',
Cryptopunks = 'cryptopunks', Cryptopunks = 'cryptopunks',
CryptoPhunks = 'cryptophunks', Gem = 'gem',
Foundation = 'foundation',
Zora = 'zora',
Blur = 'blur',
Ensvision = 'ensvision',
} }
export const isPooledMarket = (market?: Markets): boolean => { export const isPooledMarket = (market?: Markets): boolean => {

@ -0,0 +1,11 @@
import { Markets } from 'nft/types'
import { getMarketplaceIcon } from './asset'
describe('Marketplace icons', () => {
it('all of marketplaces returns an icon', () => {
Object.keys(Markets).forEach((marketplace) => {
expect(getMarketplaceIcon(marketplace)).not.toBeNull()
})
})
})

@ -1,4 +1,20 @@
import { DetailsOrigin, GenieAsset, Listing, UpdatedGenieAsset, WalletAsset } from 'nft/types' import {
SquareCryptopunksMarketplaceIcon,
SquareEnsVisionMarketplaceIcon,
SquareFoundationMarketplaceIcon,
SquareGemMarketplaceIcon,
SquareLooksBlurMarketplaceIcon,
SquareLooksRareMarketplaceIcon,
SquareLooksX2Y2MarketplaceIcon,
SquareNft20MarketplaceIcon,
SquareNftXMarketplaceIcon,
SquareOpenSeaMarketplaceIcon,
SquareRaribleMarketplaceIcon,
SquareSudoSwapMarketplaceIcon,
SquareZoraMarketplaceIcon,
} from 'nft/components/icons'
import { DetailsOrigin, GenieAsset, Listing, Markets, UpdatedGenieAsset, WalletAsset } from 'nft/types'
import { v4 as uuidv4 } from 'uuid'
export function getRarityStatus( export function getRarityStatus(
rarityStatusCache: Map<string, boolean>, rarityStatusCache: Map<string, boolean>,
@ -25,8 +41,38 @@ export const getAssetHref = (asset: GenieAsset | WalletAsset, origin?: DetailsOr
return `/nfts/asset/${address}/${asset.tokenId}${origin ? `?origin=${origin}` : ''}` return `/nfts/asset/${address}/${asset.tokenId}${origin ? `?origin=${origin}` : ''}`
} }
export const getMarketplaceIcon = (marketplace: string) => { export const getMarketplaceIcon = (marketplace: string, size: string | number = '16') => {
return `/nft/svgs/marketplaces/${marketplace.toLowerCase()}.svg` switch (marketplace.toLowerCase()) {
case Markets.Opensea:
return <SquareOpenSeaMarketplaceIcon width={size} height={size} />
case Markets.LooksRare:
return <SquareLooksRareMarketplaceIcon width={size} height={size} />
case Markets.X2Y2:
return <SquareLooksX2Y2MarketplaceIcon width={size} height={size} gradientId={uuidv4()} />
case Markets.Blur:
return <SquareLooksBlurMarketplaceIcon width={size} height={size} />
case Markets.Sudoswap:
return <SquareSudoSwapMarketplaceIcon width={size} height={size} />
case Markets.NFTX:
return <SquareNftXMarketplaceIcon width={size} height={size} gradientId={uuidv4()} />
case Markets.Gem:
return <SquareGemMarketplaceIcon width={size} height={size} gradientId={uuidv4()} />
case Markets.Zora:
return <SquareZoraMarketplaceIcon width={size} height={size} gradientId={uuidv4()} />
case Markets.Ensvision:
return <SquareEnsVisionMarketplaceIcon width={size} height={size} />
case Markets.Cryptopunks:
case 'larvalabs':
return <SquareCryptopunksMarketplaceIcon width={size} height={size} />
case Markets.Rarible:
return <SquareRaribleMarketplaceIcon width={size} height={size} />
case Markets.Foundation:
return <SquareFoundationMarketplaceIcon width={size} height={size} />
case Markets.NFT20:
return <SquareNft20MarketplaceIcon width={size} height={size} />
default:
return null
}
} }
export const generateTweetForAsset = (asset: GenieAsset): string => { export const generateTweetForAsset = (asset: GenieAsset): string => {