1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Convert knobs and actions to controls/args for MainQuoteSummary (#14758)

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
Jordon 2022-06-15 08:43:26 -07:00 committed by GitHub
parent d8e1961fd1
commit f5c6d0054f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 12 deletions

View File

@ -0,0 +1,14 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import MainQuoteSummary from '.';
# MainQuoteSummary
MainQuoteSummary displays the quote of a swap.
<Canvas>
<Story id="ui-pages-swaps-main-quote-summary-main-quote-summary-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={MainQuoteSummary} />

View File

@ -129,21 +129,54 @@ export default function MainQuoteSummary({
}
MainQuoteSummary.propTypes = {
/**
* The amount that will be sent in the smallest denomination.
* For example, wei is the smallest denomination for ether.
*/
sourceValue: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(BigNumber),
]).isRequired,
/**
* Maximum number of decimal places for the source token.
*/
sourceDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* The ticker symbol for the source token.
*/
sourceSymbol: PropTypes.string.isRequired,
/**
* The amount that will be received in the smallest denomination.
* For example, wei is the smallest denomination for ether.
*/
destinationValue: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(BigNumber),
]).isRequired,
/**
* Maximum number of decimal places for the destination token.
*/
destinationDecimals: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
/**
* The ticker symbol for the destination token.
*/
destinationSymbol: PropTypes.string.isRequired,
/**
* The location of the source token icon file.
*/
sourceIconUrl: PropTypes.string,
/**
* The location of the destination token icon file.
*/
destinationIconUrl: PropTypes.string,
};

View File

@ -1,13 +1,55 @@
import React from 'react';
import { text, number } from '@storybook/addon-knobs';
import README from './README.mdx';
import MainQuoteSummary from './main-quote-summary';
export default {
title: 'Pages/Swaps/MainQuoteSummary',
id: __filename,
component: MainQuoteSummary,
parameters: {
docs: {
page: README,
},
},
argTypes: {
sourceValue: {
control: 'text',
},
sourceDecimals: {
control: 'number',
},
sourceSymbol: {
control: 'text',
},
destinationValue: {
control: 'text',
},
destinationDecimals: {
control: 'number',
},
destinationSymbol: {
control: 'text',
},
sourceIconUrl: {
control: 'text',
},
destinationIconUrl: {
control: 'text',
},
},
args: {
sourceValue: '2000000000000000000',
sourceDecimals: 18,
sourceSymbol: 'ETH',
destinationValue: '200000000000000000',
destinationDecimals: 18,
destinationSymbol: 'ABC',
sourceIconUrl: '.storybook/images/metamark.svg',
destinationIconUrl: '.storybook/images/sai.svg',
},
};
export const DefaultStory = () => {
export const DefaultStory = (args) => {
return (
<div
style={{
@ -17,16 +59,7 @@ export const DefaultStory = () => {
padding: '24px',
}}
>
<MainQuoteSummary
sourceValue={text('sourceValue', '2000000000000000000')}
sourceDecimals={number('sourceDecimals', 18)}
sourceSymbol={text('sourceSymbol', 'ETH')}
destinationValue={text('destinationValue', '200000000000000000')}
destinationDecimals={number('destinationDecimals', 18)}
destinationSymbol={text('destinationSymbol', 'ABC')}
sourceIconUrl=".storybook/images/metamark.svg"
destinationIconUrl=".storybook/images/sai.svg"
/>
<MainQuoteSummary {...args} />
</div>
);
};