1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js

109 lines
2.0 KiB
JavaScript
Raw Normal View History

import React from 'react';
import ExchangeRateDisplay from './exchange-rate-display';
2020-08-18 15:53:54 +02:00
export default {
title: 'Pages/Swaps/ExchangeRateDisplay',
id: __filename,
};
2020-08-18 15:53:54 +02:00
export const DefaultStory = (args) => {
return <ExchangeRateDisplay {...args} />;
};
2020-08-18 15:53:54 +02:00
DefaultStory.storyName = 'Default';
DefaultStory.argTypes = {
primaryTokenValue: {
control: {
type: 'text',
},
defaultValue: '2000000000000000000',
},
primaryTokenDecimals: {
control: {
type: 'number',
},
defaultValue: 18,
},
primaryTokenSymbol: {
control: {
type: 'text',
},
defaultValue: 'ETH',
},
secondaryTokenValue: {
control: {
type: 'text',
},
defaultValue: '200000000000000000',
},
secondaryTokenDecimals: {
control: 'number',
defaultValue: 18,
},
secondaryTokenSymbol: {
control: {
type: 'text',
},
defaultValue: 'ABC',
},
};
export const WhiteOnBlue = (args) => {
2020-08-18 15:53:54 +02:00
return (
<div
style={{
width: '150px',
height: '30px',
borderRadius: '4px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background:
'linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-muted) 101.32%)',
2020-08-18 15:53:54 +02:00
}}
>
<ExchangeRateDisplay {...args} />
2020-08-18 15:53:54 +02:00
</div>
);
};
WhiteOnBlue.argTypes = {
primaryTokenValue: {
control: {
type: 'text',
},
defaultValue: '2000000000000000000',
},
primaryTokenDecimals: {
control: {
type: 'number',
},
defaultValue: 18,
},
primaryTokenSymbol: {
control: {
type: 'text',
},
defaultValue: 'ETH',
},
secondaryTokenValue: {
control: {
type: 'text',
},
defaultValue: '200000000000000000',
},
secondaryTokenDecimals: {
control: {
type: 'number',
},
defaultValue: 18,
},
secondaryTokenSymbol: {
control: {
type: 'text',
},
defaultValue: 'ABC',
},
};