1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js
2021-04-28 14:53:59 -05:00

48 lines
1.5 KiB
JavaScript

import React from 'react';
import { text, number } from '@storybook/addon-knobs';
import ExchangeRateDisplay from './exchange-rate-display';
export default {
title: 'ExchangeRateDisplay',
};
export const Default = () => {
return (
<ExchangeRateDisplay
primaryTokenValue={text('primaryTokenValue', '2000000000000000000')}
primaryTokenDecimals={number('primaryTokenDecimals', 18)}
primaryTokenSymbol={text('primaryTokenSymbol', 'ETH')}
secondaryTokenValue={text('secondaryTokenValue', '200000000000000000')}
secondaryTokenDecimals={number('secondaryTokenDecimals', 18)}
secondaryTokenSymbol={text('secondaryTokenSymbol', 'ABC')}
/>
);
};
export const WhiteOnBlue = () => {
return (
<div
style={{
width: '150px',
height: '30px',
borderRadius: '4px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: 'linear-gradient(90deg, #037DD6 0%, #1098FC 101.32%)',
}}
>
<ExchangeRateDisplay
primaryTokenValue={text('primaryTokenValue', '2000000000000000000')}
primaryTokenDecimals={number('primaryTokenDecimals', 18)}
primaryTokenSymbol={text('primaryTokenSymbol', 'ETH')}
secondaryTokenValue={text('secondaryTokenValue', '200000000000000000')}
secondaryTokenDecimals={number('secondaryTokenDecimals', 18)}
secondaryTokenSymbol={text('secondaryTokenSymbol', 'ABC')}
className="exchange-rate-display--white"
arrowColor="white"
/>
</div>
);
};