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

edit-gas-display (#12165)

Browse Source
This commit is contained in:
Etienne Dusseault 2021-09-23 22:40:03 -03:00 committed by GitHub
parent 3ec3baa3a1
commit bf4e565497
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 82 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
.storybook/test-data.js
View File

@ -1,5 +1,3 @@
import { TRANSACTION_STATUSES } from '../shared/constants/transaction';
const state = {
invalidCustomNetwork: {
state: 'CLOSED',
@ -21,6 +19,24 @@ const state = {
1559: true,
},
},
gasFeeEstimates: '0x5208',
swapsState: {
quotes: {},
fetchParams: null,
tokens: null,
tradeTxId: null,
approveTxId: null,
quotesLastFetched: null,
customMaxGas: '',
customGasPrice: null,
selectedAggId: null,
customApproveTxData: '',
errorKey: '',
topAggId: null,
routeState: '',
swapsFeatureIsLive: false,
swapsQuoteRefreshTime: 60000,
},
isInitialized: true,
isUnlocked: true,
isAccountMenuOpen: false,
@ -103,24 +119,6 @@ const state = {
},
},
},
recipient: {
address: '0x39a4e4Af7cCB654dB9500F258c64781c8FbD39F0',
nickname: 'John Doe',
error: '',
warning: '',
},
addresses: [
{
address: '0x39a4e4Af7cCB654dB9500F258c64781c8FbD39F0',
name: 'DAI',
isEns: false,
},
{
address: '1x39a4e4Af7cCB654dB9500F258c64781c8FbD39F0',
name: 'ETH',
isEns: true,
},
],
contractExchangeRates: {
'0xaD6D458402F60fD3Bd25163575031ACDce07538D': 0,
},

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

@ -1,31 +1,89 @@
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';
import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
import EditGasPopover from '.';
const store = configureStore(testData);
export default {
title: 'Edit Gas Display Popover',
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
id: __filename,
};
export const basic = () => {
export const Basic = () => {
return (
<div style={{ width: '600px' }}>
<EditGasPopover />
<EditGasPopover
transaction={{
userFeeLevel: 'medium',
txParams: {
maxFeePerGas: decGWEIToHexWEI('10000'),
maxPriorityFeePerGas: '0x5600',
gas: `0x5600`,
gasPrice: '0x5600',
},
}}
defaultEstimateToUse="high"
mode={EDIT_GAS_MODES.SWAPS}
confirmButtonText="Submit"
onClose={() => action(`Close Edit Gas Popover`)()}
minimumGasLimit="5700"
/>
</div>
);
};
export const basicWithDifferentButtonText = () => {
export const BasicWithDifferentButtonText = () => {
return (
<div style={{ width: '600px' }}>
<EditGasPopover confirmButtonText="Custom Value" />
<EditGasPopover
confirmButtonText="Custom Value"
transaction={{
userFeeLevel: 'medium',
txParams: {
maxFeePerGas: decGWEIToHexWEI('10000'),
maxPriorityFeePerGas: '0x5600',
gas: `0x5600`,
gasPrice: '0x5600',
},
}}
defaultEstimateToUse="high"
mode={EDIT_GAS_MODES.SWAPS}
onClose={() => action(`Close Edit Gas Popover`)()}
minimumGasLimit="5700"
/>
</div>
);
};
export const educationalContentFlow = () => {
export const EducationalContentFlow = () => {
return (
<div style={{ width: '600px' }}>
<EditGasPopover editGasDisplayProps={{ showEducationButton: true }} />
<EditGasPopover
editGasDisplayProps={{
showEducationButton: boolean('Show Education Button', true),
}}
transaction={{
userFeeLevel: 'medium',
txParams: {
maxFeePerGas: decGWEIToHexWEI('10000'),
maxPriorityFeePerGas: '0x5600',
gas: `0x5600`,
gasPrice: '0x5600',
},
}}
defaultEstimateToUse="high"
mode={EDIT_GAS_MODES.SWAPS}
confirmButtonText="Submit"
onClose={() => action(`Close Edit Gas Popover`)()}
minimumGasLimit="5700"
/>
</div>
);
};