Add confirm-deploy-contract component to Storybook (#11211)

* confirm deploy contract

* use downloaded image

.storybook/test-data.js

@@ -261,7 +261,7 @@ const state = {
       }
     },
     "assetImages": {
-      "0xad6d458402f60fd3bd25163575031acdce07538d": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xaD6D458402F60fD3Bd25163575031ACDce07538D/logo.png"
+      "0xad6d458402f60fd3bd25163575031acdce07538d": "./images/logo.png"
     },
     "hiddenTokens": [],
     "suggestedTokens": {},
@@ -272,7 +272,7 @@ const state = {
     "ipfsGateway": "dweb.link",
     "infuraBlocked": false,
     "migratedPrivacyMode": false,
-    "selectedAddress": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
+    "selectedAddress": "0x9d0ba4ddac06032527b140912ec808ab9451b788",
     "metaMetricsId": "0xc2377d11fec1c3b7dd88c4854240ee5e3ed0d9f63b00456d98d80320337b827f",
     "conversionDate": 1620710825.03,
     "conversionRate": 3910.28,

ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js

@@ -0,0 +1,57 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect } from 'react';
+
+import { select } from '@storybook/addon-knobs';
+import { store } from '../../../.storybook/preview';
+import { updateTransactionParams } from '../../store/actions';
+import ConfirmDeployContract from '.';
+
+export default {
+  title: 'Confirmation Screens',
+};
+
+// transaction ID
+const id = 3111025347726181;
+
+const PageSet = ({ children }) => {
+  const options = [];
+  const receiverOptions = {
+    'Address 1': '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
+    'Address 2': '0x55e0bfb2d400e9be8cf9b114e38a40969a02f69a',
+  };
+  const state = store.getState();
+  const { identities } = state.metamask;
+  Object.keys(identities).forEach(function (key) {
+    options.push({
+      label: identities[key].name,
+      address: key,
+    });
+  });
+  const sender = select('Sender', options, options[0]);
+  const receiver = select(
+    'Receiver',
+    receiverOptions,
+    '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
+  );
+
+  const confirmTransactionState = state.confirmTransaction.txData.txParams;
+
+  useEffect(() => {
+    confirmTransactionState.from = sender.address;
+    store.dispatch(updateTransactionParams(id, confirmTransactionState));
+  }, [sender, confirmTransactionState]);
+
+  useEffect(() => {
+    confirmTransactionState.to = receiver;
+    store.dispatch(updateTransactionParams(id, confirmTransactionState));
+  }, [receiver, confirmTransactionState]);
+  return children;
+};
+
+export const DeployContract = () => {
+  return (
+    <PageSet>
+      <ConfirmDeployContract />
+    </PageSet>
+  );
+};