Generic Confirmation Modal (#940)

* Make generic modal

* Allow generic modals to be injected into send button component

common/components/ConfirmationModal/index.ts

@@ -1 +0,0 @@
-export * from './ConfirmationModal';

common/components/ConfirmationModal/index.tsx

@@ -0,0 +1,14 @@
+import {
+  ConfirmationModalTemplate,
+  OwnProps as ConfirmationModalTemplateProps
+} from '../ConfirmationModalTemplate';
+import { Details, Summary } from './components';
+import React, { SFC } from 'react';
+
+interface OwnProps {
+  onClose: ConfirmationModalTemplateProps['onClose'];
+}
+
+export const ConfirmationModal: SFC<OwnProps> = ({ onClose }) => (
+  <ConfirmationModalTemplate summary={<Summary />} details={<Details />} onClose={onClose} />
+);

common/components/ConfirmationModalTemplate/ConfirmationModalTemplate.tsx

@@ -1,6 +1,5 @@
 import Modal, { IButton } from 'components/ui/Modal';
 import Spinner from 'components/ui/Spinner';
-import { Details, Summary } from './components';
 import React from 'react';
 import { connect } from 'react-redux';
 import { getWalletType, IWalletType } from 'selectors/wallet';
@@ -17,13 +16,14 @@ import {
   currentTransactionFailed
 } from 'selectors/transaction';
 import translate, { translateRaw } from 'translations';
-import './ConfirmationModal.scss';
+import './ConfirmationModalTemplate.scss';
 import { AppState } from 'reducers';
 
 interface DispatchProps {
   broadcastLocalTransactionRequested: TBroadcastLocalTransactionRequested;
   broadcastWeb3TransactionRequested: TBroadcastWeb3TransactionRequested;
 }
+
 interface StateProps {
   lang: string;
   walletTypes: IWalletType;
@@ -31,7 +31,20 @@ interface StateProps {
   transactionBroadcasted: boolean;
   transactionFailed: boolean;
 }
-interface OwnProps {
+
+export interface ConfirmButtonCBProps {
+  type: IButton['type'];
+  timeLocked: boolean;
+  timeLeft: number;
+  timePrefix: string;
+  defaultText: string;
+  onConfirm: ConfirmationModalTemplateClass['confirm'];
+}
+
+export interface OwnProps {
+  summary: React.ReactElement<any> | null;
+  details: React.ReactElement<any> | null;
+  withConfirmButton?(props: ConfirmButtonCBProps): IButton;
   onClose(): void;
 }
 interface State {
@@ -41,7 +54,7 @@ interface State {
 
 type Props = DispatchProps & StateProps & OwnProps;
 
-class ConfirmationModalClass extends React.Component<Props, State> {
+class ConfirmationModalTemplateClass extends React.Component<Props, State> {
   private readTimer = 0;
   public constructor(props: Props) {
     super(props);
@@ -72,15 +85,27 @@ class ConfirmationModalClass extends React.Component<Props, State> {
   public render() {
     const { onClose, transactionBroadcasting } = this.props;
     const { timeToRead } = this.state;
-
     const buttonPrefix = timeToRead > 0 ? `(${timeToRead}) ` : '';
+    const defaultConfirmButton = {
+      text: buttonPrefix + translateRaw('SENDModal_Yes'),
+      type: 'primary' as IButton['type'],
+      disabled: timeToRead > 0,
+      onClick: this.confirm
+    };
+
+    const confirmButton: IButton = this.props.withConfirmButton
+      ? this.props.withConfirmButton({
+          onConfirm: defaultConfirmButton.onClick,
+          timeLeft: timeToRead,
+          timePrefix: buttonPrefix,
+          timeLocked: defaultConfirmButton.disabled,
+          defaultText: translateRaw('SENDModal_Yes'),
+          type: defaultConfirmButton.type
+        })
+      : defaultConfirmButton;
+
     const buttons: IButton[] = [
-      {
-        text: buttonPrefix + translateRaw('SENDModal_Yes'),
-        type: 'primary',
-        disabled: timeToRead > 0,
-        onClick: this.confirm
-      },
+      confirmButton,
       {
         text: translateRaw('SENDModal_No'),
         type: 'default',
@@ -104,9 +129,8 @@ class ConfirmationModalClass extends React.Component<Props, State> {
               </div>
             ) : (
               <div>
-                <Summary />
-                <Details />
-
+                {this.props.summary}
+                {this.props.details}
                 <div className="ConfModal-confirm">{translate('SENDModal_Content_3')}</div>
               </div>
             )}
@@ -130,7 +154,7 @@ class ConfirmationModalClass extends React.Component<Props, State> {
   };
 }
 
-export const ConfirmationModal = connect(
+export const ConfirmationModalTemplate = connect(
   (state: AppState) => ({
     transactionBroadcasting: currentTransactionBroadcasting(state),
     transactionBroadcasted: currentTransactionBroadcasted(state),
@@ -139,4 +163,4 @@ export const ConfirmationModal = connect(
     walletTypes: getWalletType(state)
   }),
   { broadcastLocalTransactionRequested, broadcastWeb3TransactionRequested }
-)(ConfirmationModalClass);
+)(ConfirmationModalTemplateClass);

common/components/ConfirmationModalTemplate/index.ts

@@ -0,0 +1 @@
+export * from './ConfirmationModalTemplate';

common/components/SendButton.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { SendButtonFactory } from './SendButtonFactory';
 import translate from 'translations';
+import { ConfirmationModal } from 'components/ConfirmationModal';
 
-export const SendButton: React.SFC<{ onlyTransactionParameters?: boolean }> = ({
-  onlyTransactionParameters
-}) => (
+export const SendButton: React.SFC<{
+  onlyTransactionParameters?: boolean;
+  customModal?: typeof ConfirmationModal;
+}> = ({ onlyTransactionParameters, customModal }) => (
   <SendButtonFactory
     onlyTransactionParameters={!!onlyTransactionParameters}
+    Modal={customModal ? customModal : ConfirmationModal}
     withProps={({ onClick }) => (
       <div className="row form-group">
         <div className="col-xs-12">

common/components/SendButtonFactory/OnlineSend.tsx

@@ -22,20 +22,24 @@ interface DispatchProps {
   showNotification: TShowNotification;
   reset: TReset;
 }
+
 interface OwnProps {
+  Modal: typeof ConfirmationModal;
   withProps(props: CallbackProps): React.ReactElement<any> | null;
 }
+
 const INITIAL_STATE: State = {
   showModal: false
 };
 
 type Props = OwnProps & StateProps & DispatchProps;
+
 class OnlineSendClass extends Component<Props, State> {
   public state: State = INITIAL_STATE;
 
   public render() {
     const displayModal = this.state.showModal ? (
-      <ConfirmationModal onClose={this.toggleModal} />
+      <this.props.Modal onClose={this.toggleModal} />
     ) : null;
 
     return !this.props.offline ? (

common/components/SendButtonFactory/SendButtonFactory.tsx

@@ -8,6 +8,7 @@ import { getWalletType, IWalletType } from 'selectors/wallet';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { AppState } from 'reducers';
+import { ConfirmationModal } from 'components/ConfirmationModal';
 
 export interface CallbackProps {
   onClick(): void;
@@ -18,6 +19,7 @@ interface StateProps {
 }
 interface OwnProps {
   onlyTransactionParameters?: boolean;
+  Modal: typeof ConfirmationModal;
   withProps(props: CallbackProps): React.ReactElement<any> | null;
 }
 
@@ -62,7 +64,7 @@ class SendButtonFactoryClass extends Component<Props> {
               </div>
             )}
             <OfflineBroadcast />
-            <OnlineSend withProps={this.props.withProps} />
+            <OnlineSend withProps={this.props.withProps} Modal={this.props.Modal} />
           </React.Fragment>
         )}
       />

common/containers/Tabs/Contracts/components/Deploy.tsx

@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
 import { FullWalletOnly } from 'components/renderCbs';
 import { NonceField, TXMetaDataPanel } from 'components';
 import './Deploy.scss';
+import { ConfirmationModal } from 'components/ConfirmationModal';
 
 interface DispatchProps {
   setToField: TSetToField;
@@ -73,6 +74,7 @@ class DeployClass extends Component<DispatchProps> {
               {translate('NAV_DeployContract')}
             </button>
           )}
+          Modal={ConfirmationModal}
         />
       </main>
     );