create new tx confirmation modal

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 = {};

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,
+};

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: () => {},
+};

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>
+);