diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js
index a30b9f986..85f79dc37 100644
--- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js
+++ b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js
@@ -1,49 +1,85 @@
-import React, { useEffect } from 'react';
-import { select } from '@storybook/addon-knobs';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { action } from '@storybook/addon-actions';
+import configureStore from '../../store/store';
+import testData from '../../../.storybook/test-data';
+import ConfirmEncryptionPublicKey from './confirm-encryption-public-key.component';
 
-import { store, getNewState } from '../../../.storybook/preview';
-import { updateMetamaskState } from '../../store/actions';
-import ConfirmEncryptionPublicKey from '.';
+const store = configureStore(testData);
+const { confirmTransaction, history, metamask } = store.getState();
 
 export default {
   title: 'Pages/ConfirmEncryptionPublicKey',
   id: __filename,
+  component: ConfirmEncryptionPublicKey,
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
+  argTypes: {
+    fromAccount: {
+      control: {
+        type: 'object',
+      },
+    },
+    clearConfirmTransaction: {
+      action: 'clearConfirmTransaction',
+    },
+    cancelEncryptionPublicKey: {
+      action: 'cancelEncryptionPublicKey',
+    },
+    encryptionPublicKey: {
+      action: 'encryptionPublicKey',
+    },
+    conversionRate: {
+      control: {
+        type: 'number',
+      },
+    },
+    history: {
+      control: {
+        type: 'object',
+      },
+    },
+    requesterAddress: {
+      control: {
+        type: 'text',
+      },
+    },
+    txData: {
+      control: {
+        type: 'object',
+      },
+    },
+    subjectMetadata: {
+      control: {
+        type: 'object',
+      },
+    },
+    mostRecentOverviewPage: {
+      control: {
+        type: 'text',
+      },
+    },
+    nativeCurrency: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    fromAccount: metamask.accountArray[0],
+    conversionRate: metamask.conversionRate,
+    history: {
+      push: action('history.push()'),
+    },
+    requesterAddress: confirmTransaction.txData.txParams.from,
+    txData: confirmTransaction.txData,
+    subjectMetadata: metamask.subjectMetadata,
+    mostRecentOverviewPage: history.mostRecentOverviewPage,
+    nativeCurrency: metamask.nativeCurrency,
+  },
 };
 
-const PageSet = ({ children }) => {
-  const state = store.getState();
-  const options = [];
-  const { identities, unapprovedEncryptionPublicKeyMsgs } = state.metamask;
-  Object.keys(identities).forEach(function (key) {
-    options.push({
-      label: identities[key].name,
-      name: identities[key].name,
-      address: key,
-    });
-  });
-  const account = select('Account', options, options[0]);
-
-  useEffect(() => {
-    unapprovedEncryptionPublicKeyMsgs['7786962153682822'].msgParams =
-      account.address;
-    store.dispatch(
-      updateMetamaskState(
-        getNewState(state.metamask, {
-          unapprovedEncryptionPublicKeyMsgs,
-        }),
-      ),
-    );
-  }, [account, unapprovedEncryptionPublicKeyMsgs, state.metamask]);
-
-  return children;
-};
-
-export const DefaultStory = () => {
-  return (
-    <PageSet>
-      <ConfirmEncryptionPublicKey />
-    </PageSet>
-  );
+export const DefaultStory = (args) => {
+  return <ConfirmEncryptionPublicKey {...args} />;
 };
 
 DefaultStory.storyName = 'Default';