mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-29 15:50:28 +01:00
4f8c4820d2
* adding badges for nfts * fixing default nft styling issue * adding multichain flag, making borderRadius inline * Apply suggestions from code review Co-authored-by: George Marshall <george.marshall@consensys.net> * fixing imports * removing nullcheck for guaranteed fields * moving badgewrapper UI into multichain component * using Box for button, removing inline style, border-radius for NFT default image * adding nft badges to NFT Details page * nits, snap update * fixing/refactoring nftdefaultimage display, adding clickable, removing handleimageclick, refactor NFTItem, required props * editing nft-default-image story, test, and snap * Updating to fix positioning, use Box props to reduce CSS and BEM naming conventions * moving minor styling to Box props, adding comment * display block typo --------- Co-authored-by: George Marshall <george.marshall@consensys.net>
194 lines
7.0 KiB
Plaintext
194 lines
7.0 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||
|
||
exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
||
<div>
|
||
<div
|
||
class="asset-navigation"
|
||
>
|
||
<button
|
||
class="asset-breadcrumb"
|
||
>
|
||
<span
|
||
class="box mm-icon mm-icon--size-xs box--margin-inline-end-3 box--display-inline-block box--flex-direction-row box--color-inherit"
|
||
data-testid="asset__back"
|
||
style="mask-image: url('./images/icons/arrow-left.svg');"
|
||
/>
|
||
<span>
|
||
Test Account
|
||
</span>
|
||
/
|
||
<span
|
||
class="asset-breadcrumb__asset"
|
||
>
|
||
Munk Generator
|
||
</span>
|
||
</button>
|
||
<div>
|
||
<button
|
||
aria-label="NFT Options"
|
||
class="box mm-button-icon mm-button-icon--size-lg nft-options__button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent box--rounded-lg"
|
||
data-testid="nft-options__button"
|
||
>
|
||
<span
|
||
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
|
||
style="mask-image: url('./images/icons/more-vertical.svg');"
|
||
/>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="box nft-details box--flex-direction-row"
|
||
>
|
||
<div
|
||
class="box nft-details__top-section box--gap-6 box--flex-direction-row"
|
||
>
|
||
<div
|
||
class="box nft-details__card box--flex-direction-row box--justify-content-center box--background-color-background-default box--rounded-md box--border-style-solid box--border-color-border-muted box--border-width-1 box--display-flex"
|
||
>
|
||
<img
|
||
alt="MUNK #1 1"
|
||
class="nft-details__image"
|
||
src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="box nft-details__info box--flex-direction-column box--justify-content-space-between box--display-flex"
|
||
>
|
||
<div>
|
||
<h4
|
||
class="box mm-text mm-text--heading-sm mm-text--font-weight-bold box--margin-bottom-2 box--flex-direction-row box--color-text-default"
|
||
>
|
||
MUNK #1
|
||
</h4>
|
||
<h5
|
||
class="box mm-text mm-text--body-md mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-muted"
|
||
>
|
||
#
|
||
1
|
||
</h5>
|
||
</div>
|
||
<div
|
||
class="box box--display-flex box--flex-direction-row box--width-1/2"
|
||
>
|
||
<button
|
||
class="button btn--rounded btn-primary nft-details__send-button"
|
||
data-testid="nft-send-button"
|
||
role="button"
|
||
tabindex="0"
|
||
>
|
||
Send
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="box box--margin-bottom-2 box--flex-direction-row"
|
||
>
|
||
<div
|
||
class="box box--display-flex box--flex-direction-row"
|
||
>
|
||
<h6
|
||
class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
|
||
>
|
||
Last sold
|
||
</h6>
|
||
<div
|
||
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
|
||
>
|
||
<h6
|
||
class="box mm-text mm-text--body-sm mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-alternative"
|
||
>
|
||
1/18/2023
|
||
</h6>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="box box--display-flex box--flex-direction-row"
|
||
>
|
||
<h6
|
||
class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
|
||
>
|
||
Last price sold
|
||
</h6>
|
||
<div
|
||
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
|
||
>
|
||
<h6
|
||
class="box mm-text mm-text--body-sm mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-alternative"
|
||
>
|
||
0.0049 ETH
|
||
</h6>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="box box--display-flex box--flex-direction-row"
|
||
>
|
||
<h6
|
||
class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
|
||
>
|
||
Source
|
||
</h6>
|
||
<h6
|
||
class="box mm-text nft-details__image-source mm-text--body-sm box--margin-bottom-4 box--flex-direction-row box--color-primary-default"
|
||
>
|
||
<a
|
||
href="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
title="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
|
||
>
|
||
https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link
|
||
</a>
|
||
</h6>
|
||
</div>
|
||
<div
|
||
class="box box--display-flex box--flex-direction-row"
|
||
>
|
||
<h6
|
||
class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
|
||
>
|
||
Contract address
|
||
</h6>
|
||
<div
|
||
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
|
||
>
|
||
<h6
|
||
class="box mm-text mm-text--body-sm mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-alternative"
|
||
>
|
||
0xDc7...6414
|
||
</h6>
|
||
<div
|
||
class="nft-details__tooltip-wrapper"
|
||
>
|
||
<div
|
||
aria-describedby="tippy-tooltip-1"
|
||
class=""
|
||
data-original-title="Copy to clipboard"
|
||
data-tooltipped=""
|
||
style="display: inline;"
|
||
tabindex="0"
|
||
>
|
||
<button
|
||
aria-label="copy"
|
||
class="box mm-button-icon mm-button-icon--size-lg nft-details__contract-copy-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-alternative box--background-color-transparent box--rounded-lg"
|
||
data-testid="nft-address-copy"
|
||
>
|
||
<span
|
||
class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
|
||
style="mask-image: url('./images/icons/copy.svg');"
|
||
/>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h6
|
||
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
|
||
>
|
||
Disclaimer: MetaMask pulls the media file from the source url. This url sometimes is changed by the marketplace the NFT was minted on.
|
||
</h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|