add confirm-encryption-public-key component to Storybook (#11364)

* confirm-encryption-public-key

* lintfix

* lintfix

.storybook/test-data.js

@@ -15,9 +15,9 @@ const state = {
     "isAccountMenuOpen": false,
     "rpcUrl": "https://rawtestrpc.metamask.io/",
     "identities": {
-      "0x983211ce699ea5ab57cc528086154b6db1ad8e55": {
-        "name": "Account 1",
-        "address": "0x983211ce699ea5ab57cc528086154b6db1ad8e55"
+      "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4": {
+        "name": "This is a Really Long Account Name",
+        "address": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4"
       },
       "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e": {
         "name": "Account 2",
@@ -160,8 +160,8 @@ const state = {
     },
     "network": "3",
     "accounts": {
-      "0x983211ce699ea5ab57cc528086154b6db1ad8e55": {
-        "address": "0x983211ce699ea5ab57cc528086154b6db1ad8e55",
+      "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4": {
+        "address": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
         "balance": "0x176e5b6f173ebe66"
       },
       "0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e": {
@@ -200,7 +200,16 @@ const state = {
     "unapprovedPersonalMsgCount": 0,
     "unapprovedDecryptMsgs": {},
     "unapprovedDecryptMsgCount": 0,
-    "unapprovedEncryptionPublicKeyMsgs": {},
+    "unapprovedEncryptionPublicKeyMsgs": {
+      "7786962153682822": {
+        "id": 7786962153682822,
+        "msgParams": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
+        "time": 1622687544054,
+        "status": "unapproved",
+        "type": "eth_getEncryptionPublicKey",
+        "origin": "https://metamask.github.io"
+      }
+    },
     "unapprovedEncryptionPublicKeyMsgCount": 0,
     "unapprovedTypedMessages": {},
     "unapprovedTypedMessagesCount": 0,

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js

@@ -33,10 +33,6 @@ export default class ConfirmEncryptionPublicKey extends Component {
     nativeCurrency: PropTypes.string.isRequired,
   };
 
-  state = {
-    fromAccount: this.props.fromAccount,
-  };
-
   componentDidMount = () => {
     if (
       getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION
@@ -92,7 +88,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
   };
 
   renderAccount = () => {
-    const { fromAccount } = this.state;
+    const { fromAccount } = this.props;
     const { t } = this.context;
 
     return (
@@ -109,11 +105,12 @@ export default class ConfirmEncryptionPublicKey extends Component {
   };
 
   renderBalance = () => {
-    const { conversionRate, nativeCurrency } = this.props;
-    const { t } = this.context;
     const {
+      conversionRate,
+      nativeCurrency,
       fromAccount: { balance },
-    } = this.state;
+    } = this.props;
+    const { t } = this.context;
 
     const nativeCurrencyBalance = conversionUtil(balance, {
       fromNumericBase: 'hex',

ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { select } from '@storybook/addon-knobs';
+
+import { store } from '../../../.storybook/preview';
+import { updateMetamaskState } from '../../store/actions';
+import ConfirmEncryptionPublicKey from '.';
+
+export default {
+  title: 'Confirmation Screens',
+};
+
+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({
+        unapprovedEncryptionPublicKeyMsgs,
+      }),
+    );
+  }, [account, unapprovedEncryptionPublicKeyMsgs]);
+
+  return children;
+};
+
+export const ConfirmEncryption = () => {
+  store.dispatch(updateMetamaskState({ unapprovedTxs: {} }));
+  return (
+    <PageSet>
+      <ConfirmEncryptionPublicKey />
+    </PageSet>
+  );
+};