diff --git a/ui/pages/swaps/select-quote-popover/select-quote-popover.stories.js b/ui/pages/swaps/select-quote-popover/select-quote-popover.stories.js
index 0da8e42c3a0a..69bedcce5e35 100644
--- a/ui/pages/swaps/select-quote-popover/select-quote-popover.stories.js
+++ b/ui/pages/swaps/select-quote-popover/select-quote-popover.stories.js
@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { object } from '@storybook/addon-knobs';
 import Button from '../../../components/ui/button';
 import mockQuoteData from './mock-quote-data';
 import README from './README.mdx';
@@ -29,11 +27,16 @@ export default {
       options: ['Agg1', 'Agg2', 'Agg3', 'Agg4', 'Agg5', 'Agg6'],
     },
     quoteDataRows: {
-      control: 'object',
+      control: {
+        type: 'object',
+      },
     },
     hideEstimatedGasFee: {
       control: 'boolean',
     },
+    onSubmit: {
+      action: 'onSubmit',
+    },
   },
   args: {
     quoteDataRows: mockQuoteData,
@@ -43,14 +46,19 @@ export default {
 export const DefaultStory = (args) => {
   const [showPopover, setShowPopover] = useState(false);
 
+  const handleSubmit = () => {
+    setShowPopover(false);
+    args.onSubmit();
+  };
+
   return (
     <div>
       <Button onClick={() => setShowPopover(true)}>Open Popover</Button>
       {showPopover && (
         <SelectQuotePopover
-          quoteDataRows={object('quoteDataRows', mockQuoteData)}
+          quoteDataRows={args.quoteDataRows}
           onClose={() => setShowPopover(false)}
-          onSubmit={action('submit SelectQuotePopover')}
+          onSubmit={handleSubmit}
           swapToSymbol={args.swapToSymbol || 'DAI'}
           initialAggId={args.initialAggId || 'Agg4'}
           hideEstimatedGasFee={args.hideEstimatedGasFee || false}