1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/pages/swaps/fee-card/fee-card.stories.js

100 lines
2.9 KiB
JavaScript
Raw Normal View History

import React from 'react';
import { action } from '@storybook/addon-actions';
import { text, boolean, number, object } from '@storybook/addon-knobs';
2021-09-24 16:47:40 +02:00
import { MAINNET_CHAIN_ID } from '../../../../shared/constants/network';
import FeeCard from './fee-card';
2020-10-06 20:28:38 +02:00
const tokenApprovalTextComponent = (
2020-11-03 00:41:28 +01:00
<span key="swaps-view-quote-approve-symbol-1" className="view-quote__bold">
ABC
</span>
);
2020-10-06 20:28:38 +02:00
const containerStyle = {
width: '300px',
};
2020-10-06 20:28:38 +02:00
export default {
title: 'FeeCard',
id: __filename,
};
2020-10-06 20:28:38 +02:00
export const WithAllProps = () => {
return (
<div style={containerStyle}>
<FeeCard
feeRowText={text('feeRowText', 'Network fees')}
2020-11-03 00:41:28 +01:00
primaryFee={{
2020-10-06 20:28:38 +02:00
fee: text('primaryFee', '1 ETH'),
maxFee: text('primaryMaxFee', '2 ETH'),
2020-11-03 00:41:28 +01:00
}}
secondaryFee={{
2020-10-06 20:28:38 +02:00
fee: text('secondaryFee', '100 USD'),
maxFee: text('secondaryMaxFee', '200 USD'),
2020-11-03 00:41:28 +01:00
}}
2021-09-24 16:47:40 +02:00
chainId={MAINNET_CHAIN_ID}
networkAndAccountSupports1559={false}
onFeeCardMaxRowClick={action('Clicked max fee row link')}
tokenApprovalTextComponent={tokenApprovalTextComponent}
tokenApprovalSourceTokenSymbol="ABC"
onTokenApprovalClick={action('Clicked third row link')}
hideTokenApprovalRow={false}
metaMaskFee="0.875"
savings={object('savings 1', { total: '8.55' })}
onQuotesClick={action('Clicked quotes link')}
numberOfQuotes={number('numberOfQuotes', 6)}
isBestQuote={boolean('isBestQuote', true)}
conversionRate={300}
currentCurrency="usd"
2020-10-06 20:28:38 +02:00
/>
</div>
);
};
2020-10-06 20:28:38 +02:00
export const WithoutThirdRow = () => {
return (
<div style={containerStyle}>
<FeeCard
feeRowText={text('feeRowText', 'Network fees')}
2020-11-03 00:41:28 +01:00
primaryFee={{
2020-10-06 20:28:38 +02:00
fee: text('primaryFee', '1 ETH'),
maxFee: text('primaryMaxFee', '2 ETH'),
2020-11-03 00:41:28 +01:00
}}
secondaryFee={{
2020-10-06 20:28:38 +02:00
fee: text('secondaryFee', '100 USD'),
maxFee: text('secondaryMaxFee', '200 USD'),
2020-11-03 00:41:28 +01:00
}}
onFeeCardMaxRowClick={action('Clicked max fee row link')}
hideTokenApprovalRow
onQuotesClick={action('Clicked quotes link')}
numberOfQuotes={number('numberOfQuotes', 1)}
isBestQuote={boolean('isBestQuote', true)}
savings={object('savings 1', { total: '8.55' })}
metaMaskFee="0.875"
2021-09-24 16:47:40 +02:00
chainId={MAINNET_CHAIN_ID}
networkAndAccountSupports1559={false}
2020-10-06 20:28:38 +02:00
/>
</div>
);
};
2020-10-06 20:28:38 +02:00
export const WithOnlyRequiredProps = () => {
return (
<div style={containerStyle}>
<FeeCard
2020-11-03 00:41:28 +01:00
primaryFee={{
2020-10-06 20:28:38 +02:00
fee: text('primaryFee', '1 ETH'),
maxFee: text('primaryMaxFee', '2 ETH'),
2020-11-03 00:41:28 +01:00
}}
onFeeCardMaxRowClick={action('Clicked max fee row link')}
hideTokenApprovalRow
metaMaskFee="0.875"
onQuotesClick={action('Clicked quotes link')}
numberOfQuotes={2}
2021-09-24 16:47:40 +02:00
chainId={MAINNET_CHAIN_ID}
networkAndAccountSupports1559={false}
2020-10-06 20:28:38 +02:00
/>
</div>
);
};