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

convert SendGasRow stories with argtypes (#13554)

Browse Source
This commit is contained in:
Benjamin Bourgeois 2022-02-16 23:18:30 +00:00 committed by GitHub
parent 009c6e1455
commit 207436d11c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/pages/send/send-content/send-gas-row/README.mdx Normal file
View File

@ -0,0 +1,12 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import SendGasRow from '.';
# SendGasRow
<Canvas>
<Story id="ui-pages-send-send-content-send-gas-row-send-gas-row-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={SendGasRow} />

27
ui/pages/send/send-content/send-gas-row/send-gas-row.stories.js
View File

@ -2,13 +2,12 @@
import React, { useEffect, useState } from 'react';
import { Provider } from 'react-redux';
import { boolean } from '@storybook/addon-knobs';
import testData from '../../../../../.storybook/test-data';
import { GAS_INPUT_MODES } from '../../../../ducks/send';
import { updateMetamaskState } from '../../../../store/actions';
import configureStore from '../../../../store/store';
import { calcGasTotal } from '../../send.utils';
import { updateMetamaskState } from '../../../../store/actions';
import { GAS_INPUT_MODES } from '../../../../ducks/send';
import README from './README.mdx';
import SendGasRow from './send-gas-row.component';
const store = configureStore(testData);
@ -17,16 +16,26 @@ export default {
title: 'Pages/Send/SendContent/SendGasRow',
id: __filename,
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
parameters: {
docs: {
page: README,
},
},
argTypes: {
insufficientBalance: {
name: 'Is Insufficient Balance',
control: { type: 'boolean' },
defaultValue: false,
},
},
};
export const DefaultStory = () => {
export const DefaultStory = (args) => {
const state = store.getState();
const { metamask } = state;
const { send } = metamask;
const [sendState, setSendState] = useState(send);
const insufficientBalance = boolean('Is Insufficient Balance', false);
useEffect(() => {
const newState = Object.assign(metamask, {
send: sendState,
@ -65,7 +74,7 @@ export const DefaultStory = () => {
return (
<div style={{ width: 500 }}>
<SendGasRow
insufficientBalance={insufficientBalance}
{...args}
updateGasPrice={updateGasPrice}
updateGasLimit={updateGasLimit}
gasPrice={send.gasPrice}
@ -76,4 +85,4 @@ export const DefaultStory = () => {
);
};
DefaultStory.storyName = 'Default';
DefaultStory.storyName = 'SendGasRow';