From 3d5da527f90ebbbbec1427fc102fcea027ff5ca1 Mon Sep 17 00:00:00 2001
From: fadnesscharlie <82005916+fadnesscharlie@users.noreply.github.com>
Date: Mon, 21 Feb 2022 06:13:11 -0800
Subject: [PATCH] Added Controls and Action ArgType, took out
 @storybook/addon-knobs  (#13660)

* added controls and took out unused code

* Fix Lint Issues
---
 .../exchange-rate-display.stories.js          | 103 ++++++++++++++----
 1 file changed, 80 insertions(+), 23 deletions(-)

diff --git a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js
index 1b859c5f4..d66be935a 100644
--- a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js
+++ b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { text, number } from '@storybook/addon-knobs';
 import ExchangeRateDisplay from './exchange-rate-display';
 
 export default {
@@ -7,22 +6,50 @@ export default {
   id: __filename,
 };
 
-export const DefaultStory = () => {
-  return (
-    <ExchangeRateDisplay
-      primaryTokenValue={text('primaryTokenValue', '2000000000000000000')}
-      primaryTokenDecimals={number('primaryTokenDecimals', 18)}
-      primaryTokenSymbol={text('primaryTokenSymbol', 'ETH')}
-      secondaryTokenValue={text('secondaryTokenValue', '200000000000000000')}
-      secondaryTokenDecimals={number('secondaryTokenDecimals', 18)}
-      secondaryTokenSymbol={text('secondaryTokenSymbol', 'ABC')}
-    />
-  );
+export const DefaultStory = (args) => {
+  return <ExchangeRateDisplay {...args} />;
 };
 
 DefaultStory.storyName = 'Default';
 
-export const WhiteOnBlue = () => {
+DefaultStory.argTypes = {
+  primaryTokenValue: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '2000000000000000000',
+  },
+  primaryTokenDecimals: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 18,
+  },
+  primaryTokenSymbol: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'ETH',
+  },
+  secondaryTokenValue: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '200000000000000000',
+  },
+  secondaryTokenDecimals: {
+    control: 'number',
+    defaultValue: 18,
+  },
+  secondaryTokenSymbol: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'ABC',
+  },
+};
+
+export const WhiteOnBlue = (args) => {
   return (
     <div
       style={{
@@ -35,16 +62,46 @@ export const WhiteOnBlue = () => {
         background: 'linear-gradient(90deg, #037DD6 0%, #1098FC 101.32%)',
       }}
     >
-      <ExchangeRateDisplay
-        primaryTokenValue={text('primaryTokenValue', '2000000000000000000')}
-        primaryTokenDecimals={number('primaryTokenDecimals', 18)}
-        primaryTokenSymbol={text('primaryTokenSymbol', 'ETH')}
-        secondaryTokenValue={text('secondaryTokenValue', '200000000000000000')}
-        secondaryTokenDecimals={number('secondaryTokenDecimals', 18)}
-        secondaryTokenSymbol={text('secondaryTokenSymbol', 'ABC')}
-        className="exchange-rate-display--white"
-        arrowColor="white"
-      />
+      <ExchangeRateDisplay {...args} />
     </div>
   );
 };
+
+WhiteOnBlue.argTypes = {
+  primaryTokenValue: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '2000000000000000000',
+  },
+  primaryTokenDecimals: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 18,
+  },
+  primaryTokenSymbol: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'ETH',
+  },
+  secondaryTokenValue: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '200000000000000000',
+  },
+  secondaryTokenDecimals: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 18,
+  },
+  secondaryTokenSymbol: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'ABC',
+  },
+};