m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02: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

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

@ -1,7 +1,5 @@
import React from 'react'; import React from 'react';
import { Provider } from 'react-redux'; 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 { decGWEIToHexWEI } from '../../../helpers/utils/conversions.util';
import configureStore from '../../../store/store'; import configureStore from '../../../store/store';
import testData from '../../../../.storybook/test-data'; import testData from '../../../../.storybook/test-data';
@ -18,78 +16,48 @@ export default {
title: 'Components/App/EditGasPopover', title: 'Components/App/EditGasPopover',
decorators: [(story) => <Provider store={store}>{story()}</Provider>], decorators: [(story) => <Provider store={store}>{story()}</Provider>],
id: __filename, 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 = () => { const transaction = {
userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM,
txParams: {
maxFeePerGas: decGWEIToHexWEI('10000'),
maxPriorityFeePerGas: '0x5600',
gas: `0x5600`,
gasPrice: '0x5600',
},
};
const defaultEstimateToUse = GAS_RECOMMENDATIONS.HIGH;
const mode = EDIT_GAS_MODES.SWAPS;
const confirmButtonText = 'Submit';
const minimumGasLimit = '5700';
export const DefaultStory = (args) => {
return ( return (
<div style={{ width: '600px' }}> <div style={{ width: '600px' }}>
<EditGasPopover <EditGasPopover {...args} />
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> </div>
); );
}; };
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
DefaultStory.args = {
export const WithDifferentButtonText = () => { transaction,
return ( defaultEstimateToUse,
<div style={{ width: '600px' }}> mode,
<EditGasPopover confirmButtonText,
confirmButtonText="Custom Value" minimumGasLimit,
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>
);
}; };