Refactor page-container component structure

ui/app/components/page-container/index.js

@@ -0,0 +1 @@
+export { default } from './page-container.component'

ui/app/components/page-container/page-container-content.component.js

@@ -1,18 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class PageContainerContent extends Component {
-
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-  };
-
-  render () {
-    return (
-      <div className="page-container__content">
-        {this.props.children}
-      </div>
-    );
-  }
-
-}

ui/app/components/page-container/page-container-footer/index.js

@@ -0,0 +1 @@
+export { default } from './page-container-footer.component'

ui/app/components/page-container/page-container-footer/page-container-footer.component.js

@@ -5,12 +5,24 @@ export default class PageContainerFooter extends Component {
 
   static propTypes = {
     onCancel: PropTypes.func,
+    cancelText: PropTypes.string,
     onSubmit: PropTypes.func,
+    submitText: PropTypes.string,
     disabled: PropTypes.bool,
-  };
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
 
   render () {
-    const { onCancel, onSubmit, disabled } = this.props
+    const {
+      onCancel,
+      cancelText,
+      onSubmit,
+      submitText,
+      disabled,
+    } = this.props
 
     return (
       <div className="page-container__footer">
@@ -19,23 +31,19 @@ export default class PageContainerFooter extends Component {
           className="btn-secondary--lg page-container__footer-button"
           onClick={() => onCancel()}
         >
-          {this.context.t('cancel')}
+          { this.context.t('cancel') || cancelText }
         </button>
 
         <button
           className="btn-primary--lg page-container__footer-button"
           disabled={disabled}
-          onClick={(e) => onSubmit(e)}
+          onClick={e => onSubmit(e)}
         >
-          {this.context.t('next')}
+          { this.context.t('next') || submitText }
         </button>
 
       </div>
-    );
+    )
   }
 
 }
-
-PageContainerFooter.contextTypes = {
-  t: PropTypes.func,
-}

ui/app/components/page-container/page-container-header.component.js

@@ -1,35 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class PageContainerHeader extends Component {
-
-  static propTypes = {
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-    onClose: PropTypes.func,
-  };
-
-  render () {
-    const { title, subtitle, onClose } = this.props
-
-    return (
-      <div className="page-container__header">
-
-        <div className="page-container__title">
-          {title}
-        </div>
-
-        <div className="page-container__subtitle">
-          {subtitle}
-        </div>
-
-        <div
-          className="page-container__header-close"
-          onClick={() => onClose()}
-        />
-
-      </div>
-    );
-  }
-
-}

ui/app/components/page-container/page-container-header/index.js

@@ -0,0 +1 @@
+export { default } from './page-container-header.component'

ui/app/components/page-container/page-container-header/page-container-header.component.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class PageContainerHeader extends Component {
+
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    subtitle: PropTypes.string,
+    onClose: PropTypes.func,
+    showBackButton: PropTypes.bool,
+    onBackButtonClick: PropTypes.func,
+    backButtonStyles: PropTypes.object,
+    backButtonString: PropTypes.string,
+  };
+
+  renderHeaderRow () {
+    const { showBackButton, onBackButtonClick, backButtonStyles, backButtonString } = this.props
+
+    return showBackButton && (
+      <div className="page-container__header-row">
+        <span
+          className="page-container__back-button"
+          onClick={onBackButtonClick}
+          style={backButtonStyles}
+        >
+          { backButtonString || 'Back' }
+        </span>
+      </div>
+    )
+  }
+
+  render () {
+    const { title, subtitle, onClose } = this.props
+
+    return (
+      <div className="page-container__header">
+
+        { this.renderHeaderRow() }
+
+        <div className="page-container__title">
+          {title}
+        </div>
+
+        <div className="page-container__subtitle">
+          {subtitle}
+        </div>
+
+        <div
+          className="page-container__header-close"
+          onClick={() => onClose()}
+        />
+
+      </div>
+    )
+  }
+
+}

ui/app/components/page-container/page-container.component.js

@@ -1,18 +1,72 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
+import PageContainerHeader from './page-container-header'
+import PageContainerFooter from './page-container-footer'
+
 export default class PageContainer extends Component {
 
   static propTypes = {
-    children: PropTypes.node.isRequired,
+    // PageContainerHeader props
+    title: PropTypes.string.isRequired,
+    subtitle: PropTypes.string,
+    onClose: PropTypes.func,
+    showBackButton: PropTypes.bool,
+    onBackButtonClick: PropTypes.func,
+    backButtonStyles: PropTypes.object,
+    backButtonString: PropTypes.string,
+    // Content props
+    ContentComponent: PropTypes.func,
+    contentComponentProps: PropTypes.object,
+    // PageContainerFooter props
+    onCancel: PropTypes.func,
+    cancelText: PropTypes.string,
+    onSubmit: PropTypes.func,
+    submitText: PropTypes.string,
+    disabled: PropTypes.bool,
   };
 
   render () {
+    const {
+      title,
+      subtitle,
+      onClose,
+      showBackButton,
+      onBackButtonClick,
+      backButtonStyles,
+      backButtonString,
+      ContentComponent,
+      contentComponentProps,
+      onCancel,
+      cancelText,
+      onSubmit,
+      submitText,
+      disabled,
+    } = this.props
+
     return (
       <div className="page-container">
-        {this.props.children}
+        <PageContainerHeader
+          title={title}
+          subtitle={subtitle}
+          onClose={onClose}
+          showBackButton={showBackButton}
+          onBackButtonClick={onBackButtonClick}
+          backButtonStyles={backButtonStyles}
+          backButtonString={backButtonString}
+        />
+        <div className="page-container__content">
+          <ContentComponent { ...contentComponentProps } />
         </div>
-    );
+        <PageContainerFooter
+          onCancel={onCancel}
+          cancelText={cancelText}
+          onSubmit={onSubmit}
+          submitText={submitText}
+          disabled={disabled}
+        />
+      </div>
+    )
   }
 
 }

ui/app/components/send/send-v2-container.js

@@ -53,6 +53,7 @@ function mapStateToProps (state) {
     tokenContract: getSelectedTokenContract(state),
     unapprovedTxs: state.metamask.unapprovedTxs,
     network: state.metamask.network,
+    isToken: Boolean(getSelectedToken(state)),
   }
 }
 

ui/app/send-v2.js

@@ -31,10 +31,10 @@ const {
 } = require('./components/send/send-utils')
 const { isValidAddress } = require('./util')
 
-import PageContainer from './components/page-container/page-container.component'
+import PageContainer from './components/page-container'
-import SendHeader from './components/send_/send-header/send-header.container'
+// import SendHeader from './components/send_/send-header/send-header.container'
-import PageContainerContent from './components/page-container/page-container-content.component'
+// import PageContainerContent from './components/page-container/page-container-content.component'
-import PageContainerFooter from './components/page-container/page-container-footer.component'
+// import PageContainerFooter from './components/page-container/page-container-footer.component'
 
 SendTransactionScreen.contextTypes = {
   t: PropTypes.func,
@@ -500,16 +500,44 @@ SendTransactionScreen.prototype.renderFooter = function () {
 }
 
 SendTransactionScreen.prototype.render = function () {
+  const {
+    isToken,
+    clearSend,
+    goHome,
+    gasTotal,
+    tokenBalance,
+    selectedToken,
+    errors: { amount: amountError, to: toError },
+  } = this.props
+
+  const missingTokenBalance = selectedToken && !tokenBalance
+  const noErrors = !amountError && toError === null
+
   return (
 
-    h(PageContainer, [
+    h(PageContainer, {
+      title: isToken ? this.context.t('sendTokens') : this.context.t('sendETH'),
+      subtitle: this.context.t('onlySendToEtherAddress'),
+      onClose: () => {
+        clearSend()
+        goHome()
+      },
+      ContentComponent: this.renderForm,
+      onCancel: () => {
+        clearSend()
+        goHome()
+      },
+      onSubmit: e => this.onSubmit(e),
+      disabled: !noErrors || !gasTotal || missingTokenBalance,
+    })
+    // , [
 
-      h(SendHeader),
+    //   h(SendHeader),
 
-      this.renderForm(),
+    //   this.renderForm(),
 
-      this.renderFooter(),
+    //   this.renderFooter(),
-    ])
+    // ])
 
   )
 }