Disable buttons on confirmation modal when transaction is broadcasting (#1987)

* Fix an issue where the disableButtons property was not being passed to the modal body.

* Add a hideButtons property for modals and hide the buttons for a broadcasting confirmation modal

* Don't show fade when there are no buttons

common/components/ConfirmationModalTemplate/ConfirmationModalTemplate.tsx

@@ -100,6 +100,7 @@ class ConfirmationModalTemplateClass extends React.Component<Props, State> {
         buttons={buttons}
         handleClose={onClose}
         disableButtons={transactionBroadcasting}
+        hideButtons={transactionBroadcasting}
         isOpen={isOpen}
       >
         {transactionBroadcasting ? (

common/components/ui/Modal/ModalBody.tsx

@@ -9,7 +9,8 @@ interface Props {
   modalStyle?: CSSProperties;
   hasButtons?: number;
   buttons?: IButton[];
-  disableButtons?: any;
+  disableButtons?: boolean;
+  hideButtons?: boolean;
   handleClose(): void;
 }
 
@@ -45,7 +46,7 @@ export default class ModalBody extends React.Component<Props> {
   };
 
   public render() {
-    const { title, children, modalStyle, hasButtons, handleClose } = this.props;
+    const { title, children, modalStyle, hasButtons, hideButtons, handleClose } = this.props;
     return (
       <div
         className="Modal"
@@ -68,9 +69,9 @@ export default class ModalBody extends React.Component<Props> {
 
         <div className="Modal-content" ref={div => (this.modalContent = div as HTMLElement)}>
           {children}
-          <div className={`Modal-fade ${!hasButtons ? 'has-no-footer' : ''}`} />
+          <div className={`Modal-fade ${!hasButtons || hideButtons ? 'has-no-footer' : ''}`} />
         </div>
-        {hasButtons && <div className="Modal-footer">{this.renderButtons()}</div>}
+        {hasButtons && !hideButtons && <div className="Modal-footer">{this.renderButtons()}</div>}
       </div>
     );
   }

common/components/ui/Modal/index.tsx

@@ -15,6 +15,7 @@ interface Props {
   isOpen?: boolean;
   title?: React.ReactNode;
   disableButtons?: boolean;
+  hideButtons?: boolean;
   children: React.ReactNode;
   buttons?: IButton[];
   maxWidth?: number;
@@ -56,7 +57,16 @@ export default class Modal extends PureComponent<Props, {}> {
   }
 
   public render() {
-    const { isOpen, title, children, buttons, handleClose, maxWidth } = this.props;
+    const {
+      isOpen,
+      title,
+      children,
+      buttons,
+      disableButtons,
+      hideButtons,
+      handleClose,
+      maxWidth
+    } = this.props;
     const hasButtons = buttons && buttons.length;
     const modalStyle: ModalStyle = {};
 
@@ -65,7 +75,16 @@ export default class Modal extends PureComponent<Props, {}> {
       modalStyle.maxWidth = `${maxWidth}px`;
     }
 
-    const modalBodyProps = { title, children, modalStyle, hasButtons, buttons, handleClose };
+    const modalBodyProps = {
+      title,
+      children,
+      modalStyle,
+      hasButtons,
+      buttons,
+      disableButtons,
+      hideButtons,
+      handleClose
+    };
 
     const modal = (
       <TransitionGroup>