edit-gas-display (#12165)

.storybook/test-data.js

@@ -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,
     },

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

@@ -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>
   );
 };