m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 12:29:06 +01:00
Code

EditGasPopover story: convert knobs and actions to controls / args #13056 (#13125)

Browse Source
This commit is contained in:
dragana8 2022-01-04 20:23:57 +01:00 committed by GitHub
parent 066b78c722
commit e213ea77bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
ui/components/app/edit-gas-popover/edit-gas-popover.stories.js
View File

@ -1,7 +1,5 @@
import React from 'react';
import { Provider } from 'react-redux';
import { action } from '@storybook/addon-actions';
import { boolean } from '@storybook/addon-knobs';
import { decGWEIToHexWEI } from '../../../helpers/utils/conversions.util';
import configureStore from '../../../store/store';
import testData from '../../../../.storybook/test-data';
@ -18,13 +16,22 @@ export default {
title: 'Components/App/EditGasPopover',
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
id: __filename,
argTypes: {
editGasDisplayProps: {
control: 'object',
},
transaction: {
control: 'object',
},
defaultEstimateToUse: { control: 'text' },
mode: { control: 'text' },
confirmButtonText: { control: 'text' },
minimumGasLimit: { control: 'text' },
onClose: { action: 'Close Edit Gas Popover' },
},
};
export const DefaultStory = () => {
return (
<div style={{ width: '600px' }}>
<EditGasPopover
transaction={{
const transaction = {
userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM,
txParams: {
maxFeePerGas: decGWEIToHexWEI('10000'),
@ -32,64 +39,25 @@ export const DefaultStory = () => {
gas: `0x5600`,
gasPrice: '0x5600',
},
}}
defaultEstimateToUse={GAS_RECOMMENDATIONS.HIGH}
mode={EDIT_GAS_MODES.SWAPS}
confirmButtonText="Submit"
onClose={() => action(`Close Edit Gas Popover`)()}
minimumGasLimit="5700"
/>
};
const defaultEstimateToUse = GAS_RECOMMENDATIONS.HIGH;
const mode = EDIT_GAS_MODES.SWAPS;
const confirmButtonText = 'Submit';
const minimumGasLimit = '5700';
export const DefaultStory = (args) => {
return (
<div style={{ width: '600px' }}>
<EditGasPopover {...args} />
</div>
);
};
DefaultStory.storyName = 'Default';
export const WithDifferentButtonText = () => {
return (
<div style={{ width: '600px' }}>
<EditGasPopover
confirmButtonText="Custom Value"
transaction={{
userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM,
txParams: {
maxFeePerGas: decGWEIToHexWEI('10000'),
maxPriorityFeePerGas: '0x5600',
gas: `0x5600`,
gasPrice: '0x5600',
},
}}
defaultEstimateToUse={GAS_RECOMMENDATIONS.HIGH}
mode={EDIT_GAS_MODES.SWAPS}
onClose={() => action(`Close Edit Gas Popover`)()}
minimumGasLimit="5700"
/>
</div>
);
};
export const WithEducationalContentFlow = () => {
return (
<div style={{ width: '600px' }}>
<EditGasPopover
editGasDisplayProps={{
showEducationButton: boolean('Show Education Button', true),
}}
transaction={{
userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM,
txParams: {
maxFeePerGas: decGWEIToHexWEI('10000'),
maxPriorityFeePerGas: '0x5600',
gas: `0x5600`,
gasPrice: '0x5600',
},
}}
defaultEstimateToUse={GAS_RECOMMENDATIONS.HIGH}
mode={EDIT_GAS_MODES.SWAPS}
confirmButtonText="Submit"
onClose={() => action(`Close Edit Gas Popover`)()}
minimumGasLimit="5700"
/>
</div>
);
DefaultStory.args = {
transaction,
defaultEstimateToUse,
mode,
confirmButtonText,
minimumGasLimit,
};