1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/app/collectible-details/collectible-details.stories.js
Alex Donesky 3a31326199
Add fallback image/card for NFTs when image was not fetched correctly or does not exist (#15034)
* add fallback image/card for collectibles when image was not fetched correctly or does not exist

* UI and storybook updates (#15071)

* UI and storybook updates

* Adding break so token id is displayed

* subtle border fix

* Updating content

* Removing unused image

* Adding proptype descriptions

* Lint fix

Co-authored-by: George Marshall <george.marshall@consensys.net>
2022-06-30 08:46:38 -07:00

42 lines
992 B
JavaScript

import React from 'react';
import CollectibleDetails from './collectible-details';
const collectible = {
name: 'Catnip Spicywright',
tokenId: '1124157',
address: '0x06012c8cf97bead5deae237070f9587f8e7a266d',
image: './catnip-spicywright.png',
description:
"Good day. My name is Catnip Spicywight, which got me teased a lot in high school. If I want to put low fat mayo all over my hamburgers, I shouldn't have to answer to anyone about it, am I right? One time I beat Arlene in an arm wrestle.",
};
export default {
title: 'Components/App/CollectiblesDetail',
id: __filename,
argTypes: {
collectible: {
control: 'object',
},
},
args: {
collectible,
},
};
export const DefaultStory = (args) => {
return <CollectibleDetails {...args} />;
};
DefaultStory.storyName = 'Default';
export const NoImage = (args) => {
return <CollectibleDetails {...args} />;
};
NoImage.args = {
collectible: {
...collectible,
image: undefined,
},
};