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

ui/components/app/edit-gas-popover/edit-gas-popover.stories.js

@@ -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,78 +16,48 @@ 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={{
-          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>
-  );
+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';
 
-DefaultStory.storyName = 'Default';
-
-export const WithDifferentButtonText = () => {
+export const DefaultStory = (args) => {
   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"
-      />
+      <EditGasPopover {...args} />
     </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.storyName = 'Default';
+DefaultStory.args = {
+  transaction,
+  defaultEstimateToUse,
+  mode,
+  confirmButtonText,
+  minimumGasLimit,
 };