From 76bfc399b6c16742765eb18c2d8f87e72a2fdffb Mon Sep 17 00:00:00 2001
From: dragana8 <92531782+dragana8@users.noreply.github.com>
Date: Thu, 13 Jan 2022 12:36:27 +0100
Subject: [PATCH] convert knobs and actions to controls / args (#13203)

* changed knobs

* review updates
---
 .../gas-fee-display.stories.js                | 22 +++++------
 .../send-hex-data-row.stories.js              | 15 ++++---
 .../send/send-footer/send-footer.stories.js   | 39 ++++++++++---------
 3 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js b/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js
index 3e55f7f06..b02ce345d 100644
--- a/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js
+++ b/ui/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.stories.js
@@ -1,22 +1,22 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { number, boolean } from '@storybook/addon-knobs';
 import GasFeeDisplay from './gas-fee-display.component';
 
 export default {
   title: 'Pages/Send/SendContent/SendGasRow/GasFeeDisplay',
   id: __filename,
+  argTypes: {
+    gasTotal: { control: 'number' },
+    gasLoadingError: { control: 'boolean' },
+    onReset: { action: 'OnReset' },
+  },
 };
 
-export const DefaultStory = () => {
-  const gasTotal = number('Gas Total', 10000000000);
-  return (
-    <GasFeeDisplay
-      gasTotal={gasTotal}
-      gasLoadingError={boolean('Gas Loading Error', false)}
-      onReset={action('OnReset')}
-    />
-  );
+export const DefaultStory = (args) => {
+  return <GasFeeDisplay {...args} />;
 };
 
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  gasTotal: 10000000000,
+  gasLoadingError: false,
+};
diff --git a/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.stories.js b/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.stories.js
index c4dd46e79..b3c774d6a 100644
--- a/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.stories.js
+++ b/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.stories.js
@@ -1,21 +1,24 @@
 import React from 'react';
-import { boolean } from '@storybook/addon-knobs';
 import SendHexDataRow from './send-hex-data-row.component';
 
 export default {
   title: 'Pages/Send/SendContent/SendHexDataRow',
   id: __filename,
+  argTypes: {
+    inError: { control: 'boolean' },
+    updateSendHexData: { action: 'updateSendHexData' },
+  },
 };
 
-export const DefaultStory = () => {
+export const DefaultStory = (args) => {
   return (
     <div style={{ width: 450 }}>
-      <SendHexDataRow
-        inError={boolean('In Error', false)}
-        updateSendHexData={() => null}
-      />
+      <SendHexDataRow {...args} updateSendHexData={() => null} />
     </div>
   );
 };
 
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  inError: false,
+};
diff --git a/ui/pages/send/send-footer/send-footer.stories.js b/ui/pages/send/send-footer/send-footer.stories.js
index 84118cace..9a9179a35 100644
--- a/ui/pages/send/send-footer/send-footer.stories.js
+++ b/ui/pages/send/send-footer/send-footer.stories.js
@@ -1,30 +1,33 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
 
 import SendFooter from './send-footer.component';
 
 export default {
   title: 'Pages/Send/SendFooter',
   id: __filename,
+  argTypes: {
+    clearSend: { action: 'clearSend' },
+    sign: { action: 'sign' },
+    from: { control: 'object' },
+    disabled: { control: 'boolean' },
+    mostRecentOverviewPage: { control: 'text' },
+    sendErrors: { control: 'object' },
+    history: { action: 'history' },
+    addToAddressBookIfNew: { action: 'addToAddressBookIfNew' },
+    resetSendState: { action: 'resetSendState' },
+  },
 };
 
-export const DefaultStory = () => {
-  const disabled = boolean('Disabled', false);
-  return (
-    <SendFooter
-      clearSend={() => action('Cancel Button Pressed')()}
-      sign={() => action('Next Button Pressed')()}
-      // The other props below are only to make the component show no error
-      from={{ address: '' }}
-      history={{ push: () => undefined }}
-      addToAddressBookIfNew={() => undefined}
-      disabled={disabled}
-      mostRecentOverviewPage=""
-      resetSendState={() => undefined}
-      sendErrors={{}}
-    />
-  );
+export const DefaultStory = (args) => {
+  return <SendFooter {...args} />;
 };
 
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  from: {
+    address: '',
+  },
+  disabled: false,
+  mostRecentOverviewPage: '',
+  sendErrors: {},
+};