From 4cbbead359e9bf6152fd58e52869099b9c8d0839 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Fri, 10 Jun 2022 21:38:53 +0100
Subject: [PATCH] create new tx confirmation modal

---
 nym-wallet/.storybook/main.js                 | 19 ++++++-----
 nym-wallet/.storybook/mocks/tauri/app.js      |  8 +++++
 .../src/components/ConfirmTX.stories.tsx      | 30 +++++++++++++++++
 nym-wallet/src/components/ConfirmTX.tsx       | 33 +++++++++++++++++++
 4 files changed, 82 insertions(+), 8 deletions(-)
 create mode 100644 nym-wallet/.storybook/mocks/tauri/app.js
 create mode 100644 nym-wallet/src/components/ConfirmTX.stories.tsx
 create mode 100644 nym-wallet/src/components/ConfirmTX.tsx

diff --git a/nym-wallet/.storybook/main.js b/nym-wallet/.storybook/main.js
index db6de0998f..c4a255d616 100644
--- a/nym-wallet/.storybook/main.js
+++ b/nym-wallet/.storybook/main.js
@@ -9,6 +9,7 @@ module.exports = {
   core: {
     builder: 'webpack5',
   },
+  typescript: { reactDocgen: false },
   // webpackFinal: async (config, { configType }) => {
   //   // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
   //   // You can change the configuration based on that.
@@ -32,15 +33,17 @@ module.exports = {
     config.resolve.extensions = ['.tsx', '.ts', '.js'];
     config.resolve.plugins = [new TsconfigPathsPlugin()];
 
-    config.plugins.push(new ForkTsCheckerWebpackPlugin({
-      typescript: {
-        mode: 'write-references',
-        diagnosticOptions: {
-          semantic: true,
-          syntactic: true,
+    config.plugins.push(
+      new ForkTsCheckerWebpackPlugin({
+        typescript: {
+          mode: 'write-references',
+          diagnosticOptions: {
+            semantic: true,
+            syntactic: true,
+          },
         },
-      },
-    }));
+      }),
+    );
 
     if (!config.resolve.alias) {
       config.resolve.alias = {};
diff --git a/nym-wallet/.storybook/mocks/tauri/app.js b/nym-wallet/.storybook/mocks/tauri/app.js
new file mode 100644
index 0000000000..9ef3db093f
--- /dev/null
+++ b/nym-wallet/.storybook/mocks/tauri/app.js
@@ -0,0 +1,8 @@
+/**
+ * This is a mock for Tauri's API package (@tauri-apps/api/window), to prevent stories from being excluded, because they either use
+ * or import dependencies that use Tauri.
+ */
+
+module.exports = {
+  getVersion: () => undefined,
+};
diff --git a/nym-wallet/src/components/ConfirmTX.stories.tsx b/nym-wallet/src/components/ConfirmTX.stories.tsx
new file mode 100644
index 0000000000..83f42d7000
--- /dev/null
+++ b/nym-wallet/src/components/ConfirmTX.stories.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Box } from '@mui/material';
+import { ConfirmTx } from './ConfirmTX';
+import { ModalListItem } from './Modals/ModalListItem';
+
+export default {
+  title: 'Wallet / Confirm Transaction',
+  component: ConfirmTx,
+} as ComponentMeta<typeof ConfirmTx>;
+
+const Template: ComponentStory<typeof ConfirmTx> = (args) => (
+  <ConfirmTx {...args}>
+    <ModalListItem label="Transaction type" value="Bond" divider />
+    <ModalListItem label="Current bond" value={`100 ${args.currency}`} divider />
+    <ModalListItem label="Additional bond" value={`50 ${args.currency}`} divider />
+  </ConfirmTx>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  open: true,
+  header: 'Confirm transaction',
+  subheader: 'Confirm and proceed or cancel transaction',
+  fee: { amount: '1', denom: 'NYM' },
+  currency: 'NYM',
+  onClose: () => {},
+  onConfirm: async () => {},
+  onPrev: () => {},
+};
diff --git a/nym-wallet/src/components/ConfirmTX.tsx b/nym-wallet/src/components/ConfirmTX.tsx
new file mode 100644
index 0000000000..65ccee4839
--- /dev/null
+++ b/nym-wallet/src/components/ConfirmTX.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { SimpleModal } from './Modals/SimpleModal';
+import { MajorCurrencyAmount, MajorAmountString } from '@nymproject/types';
+import { ModalListItem } from './Modals/ModalListItem';
+import { Button } from '@mui/material';
+
+export const ConfirmTx: React.FC<{
+  open: boolean;
+  header: string;
+  subheader: string;
+  fee: MajorCurrencyAmount;
+  currency: MajorAmountString;
+  onConfirm: () => Promise<void>;
+  onClose?: () => void;
+  onPrev: () => void;
+}> = ({ open, fee, onConfirm, onClose, header, subheader, onPrev, children }) => (
+  <SimpleModal
+    open={open}
+    header={header}
+    subHeader={subheader}
+    okLabel="Confirm"
+    onOk={onConfirm}
+    onClose={onClose}
+    SecondaryAction={
+      <Button fullWidth sx={{ mt: 1 }} size="large" onClick={onPrev}>
+        Cancel
+      </Button>
+    }
+  >
+    {children}
+    <ModalListItem label="Estimated fee for this operation" value={`${fee.amount} ${fee.denom}`} />
+  </SimpleModal>
+);