From a77368be34432c8a4f27c8c7c3deba006a3927bf Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Mon, 30 Aug 2021 17:53:41 -0500
Subject: [PATCH] Add confirm-send-ether component to Storybook (#11395)

* confirm-send-ether

* fix conflict

* lintfix

Co-authored-by: kumavis <kumavis@users.noreply.github.com>
---
 .../confirm-send-ether.stories.js             | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 ui/pages/confirm-send-ether/confirm-send-ether.stories.js

diff --git a/ui/pages/confirm-send-ether/confirm-send-ether.stories.js b/ui/pages/confirm-send-ether/confirm-send-ether.stories.js
new file mode 100644
index 000000000..92efb0aee
--- /dev/null
+++ b/ui/pages/confirm-send-ether/confirm-send-ether.stories.js
@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react';
+
+import { select } from '@storybook/addon-knobs';
+import { store } from '../../../.storybook/preview';
+import { updateTransactionParams } from '../../store/actions';
+import ConfirmSendEther from '.';
+
+export default {
+  title: 'Confirmation Screens',
+};
+
+// transaction id for redux dispatcher
+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 SendEther = () => {
+  return (
+    <PageSet>
+      <ConfirmSendEther />
+    </PageSet>
+  );
+};