mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-02 06:07:06 +01:00
1521e63913
This PR changes over the deprecated knobs and actions in `fee-card.stories.js` to controls.
I attempted to create a `README.mdx`, but unfortunately the `<ArgsTable of={FeeCard} />` refused to render out any of the documentation comments I added to the `FeeCard.propTypes`, thus that has not been included (and no documentation has been added to the propTypes of FeeCard).
_Please note:_ currently nested arg types are not possible in StoryBook, but discussions are open: https://github.com/storybookjs/storybook/issues/11486. This means that the StoryBook shows `primaryFee`, `primaryMaxFee`, `secondaryFee` and `secondaryMaxFee`, but these are mapped to the 2 `primaryFee` and `secondaryFee` props of the component. This is visible if the developer clicks on the `Show code` button at the docs page in StoryBook.
Signed-off-by: Jurriaan Den Toonder <1493561+Fastjur@users.noreply.github.com>
132 lines
2.5 KiB
JavaScript
132 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import { MAINNET_CHAIN_ID } from '../../../../shared/constants/network';
|
|
import FeeCard from './fee-card';
|
|
|
|
const containerStyle = {
|
|
width: '300px',
|
|
};
|
|
|
|
export default {
|
|
title: 'Pages/Swaps/FeeCard',
|
|
id: __filename,
|
|
component: FeeCard,
|
|
argTypes: {
|
|
primaryFee: {
|
|
control: {
|
|
type: 'text',
|
|
},
|
|
},
|
|
primaryMaxFee: {
|
|
control: {
|
|
type: 'text',
|
|
},
|
|
},
|
|
secondaryFee: {
|
|
control: {
|
|
type: 'text',
|
|
},
|
|
},
|
|
secondaryMaxFee: {
|
|
control: {
|
|
type: 'text',
|
|
},
|
|
},
|
|
onFeeCardMaxRowClick: {
|
|
action: 'Clicked max fee row edit link',
|
|
},
|
|
hideTokenApprovalRow: {
|
|
control: {
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
tokenApprovalSourceTokenSymbol: {
|
|
control: {
|
|
type: 'text',
|
|
},
|
|
},
|
|
onTokenApprovalClick: {
|
|
action: 'Clicked on token approval',
|
|
},
|
|
metaMaskFee: {
|
|
control: {
|
|
type: 'text',
|
|
},
|
|
},
|
|
onQuotesClick: {
|
|
action: 'Clicked on quotes link',
|
|
},
|
|
numberOfQuotes: {
|
|
control: {
|
|
type: 'number',
|
|
},
|
|
},
|
|
chainId: {
|
|
control: {
|
|
type: 'text',
|
|
},
|
|
},
|
|
smartTransactionsOptInStatus: {
|
|
control: {
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
smartTransactionsEnabled: {
|
|
control: {
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
isBestQuote: {
|
|
control: {
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
supportsEIP1559V2: {
|
|
control: {
|
|
type: 'boolean',
|
|
},
|
|
},
|
|
},
|
|
args: {
|
|
primaryFee: '1 ETH',
|
|
primaryMaxFee: '2 ETH',
|
|
secondaryFee: '100 USD',
|
|
secondaryMaxFee: '200 USD',
|
|
hideTokenApprovalRow: false,
|
|
tokenApprovalSourceTokenSymbol: 'ABC',
|
|
metaMaskFee: '0.875',
|
|
numberOfQuotes: 6,
|
|
chainId: MAINNET_CHAIN_ID,
|
|
isBestQuote: true,
|
|
},
|
|
};
|
|
|
|
export const DefaultStory = (args) => {
|
|
// Please note, currently nested arg types are not possible, but discussions are open:
|
|
// https://github.com/storybookjs/storybook/issues/11486
|
|
const {
|
|
primaryFee,
|
|
primaryMaxFee,
|
|
secondaryFee,
|
|
secondaryMaxFee,
|
|
...rest
|
|
} = args;
|
|
|
|
return (
|
|
<div style={containerStyle}>
|
|
<FeeCard
|
|
primaryFee={{
|
|
fee: primaryFee,
|
|
maxFee: primaryMaxFee,
|
|
}}
|
|
secondaryFee={{
|
|
fee: secondaryFee,
|
|
maxFee: secondaryMaxFee,
|
|
}}
|
|
{...rest}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
DefaultStory.storyName = 'Default';
|