1 files changed, 35 insertions, 28 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
index 41fe901fa..07e55a1f0 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -24,8 +24,9 @@ export default class GasModalPageContainer extends Component {
       newTotalEth: PropTypes.string,
     }),
     onSubmit: PropTypes.func,
-    customGasPriceInHex: PropTypes.string,
-    customGasLimitInHex: PropTypes.string,
+    customModalGasPriceInHex: PropTypes.string,
+    customModalGasLimitInHex: PropTypes.string,
+    cancelAndClose: PropTypes.func,
   }
 
   state = {}
@@ -51,32 +52,34 @@ export default class GasModalPageContainer extends Component {
         updateCustomGasLimit={convertThenUpdateCustomGasLimit}
         customGasPrice={customGasPrice}
         customGasLimit={customGasLimit}
-        millisecondsRemaining={91000}
+        timeRemaining={'1 min 31 sec'}
         totalFee={newTotalFiat}
       />
     )
   }
 
-  renderInfoRow (className, totalLabelKey, fiatTotal, cryptoTotal) {
-    return (
-      <div className={className}>
-        <div className={`${className}__total-info`}>
-          <span className={`${className}__total-info__total-label`}>{`${this.context.t(totalLabelKey)}:`}</span>
-          <span className={`${className}__total-info__total-value`}>{fiatTotal}</span>
-        </div>
-        <div className={`${className}__sum-info`}>
-          <span className={`${className}__sum-info__sum-label`}>{`${this.context.t('amountPlusTxFee')}`}</span>
-          <span className={`${className}__sum-info__sum-value`}>{cryptoTotal}</span>
-        </div>
-      </div>
-    )
-  }
+  renderInfoRows (newTotalFiat, newTotalEth, sendAmount, transactionFee) {
+    const baseClassName = 'gas-modal-content__info-row'
 
-  renderInfoRows (originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) {
     return (
       <div>
-        { this.renderInfoRow('gas-modal-content__info-row--fade', 'originalTotal', originalTotalFiat, originalTotalEth) }
-        { this.renderInfoRow('gas-modal-content__info-row', 'newTotal', newTotalFiat, newTotalEth) }
+        <div className={baseClassName}>
+          <div className={`${baseClassName}__send-info`}>
+            <span className={`${baseClassName}__send-info__label`}>{`Send Amount`}</span>
+            <span className={`${baseClassName}__send-info__value`}>{sendAmount}</span>
+          </div>
+          <div className={`${baseClassName}__transaction-info`}>
+            <span className={`${baseClassName}__transaction-info__label`}>{`Transaction Fee`}</span>
+            <span className={`${baseClassName}__transaction-info__value`}>{transactionFee}</span>
+          </div>
+          <div className={`${baseClassName}__total-info`}>
+            <span className={`${baseClassName}__total-info__label`}>{`New Total`}</span>
+            <span className={`${baseClassName}__total-info__value`}>{newTotalEth}</span>
+          </div>
+          <div className={`${baseClassName}__fiat-total-info`}>
+            <span className={`${baseClassName}__fiat-total-info__value`}>{newTotalFiat}</span>
+          </div>
+        </div>
       </div>
     )
   }
@@ -86,6 +89,8 @@ export default class GasModalPageContainer extends Component {
     originalTotalEth,
     newTotalFiat,
     newTotalEth,
+    sendAmount,
+    transactionFee,
   },
   {
     gasPriceButtonGroupProps,
@@ -106,7 +111,7 @@ export default class GasModalPageContainer extends Component {
         {tabsToRender.map(({ name, content }, i) => <Tab name={this.context.t(name)} key={`gas-modal-tab-${i}`}>
             <div className="gas-modal-content">
               { content }
-              { this.renderInfoRows(originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) }
+              { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
             </div>
           </Tab>
         )}
@@ -116,11 +121,11 @@ export default class GasModalPageContainer extends Component {
 
   render () {
     const {
-      hideModal,
+      cancelAndClose,
       infoRowProps,
       onSubmit,
-      customGasPriceInHex,
-      customGasLimitInHex,
+      customModalGasPriceInHex,
+      customModalGasLimitInHex,
       ...tabProps
     } = this.props
 
@@ -131,13 +136,15 @@ export default class GasModalPageContainer extends Component {
           subtitle={this.context.t('customGasSubTitle')}
           tabsComponent={this.renderTabs(infoRowProps, tabProps)}
           disabled={false}
-          onCancel={() => hideModal()}
-          onClose={() => hideModal()}
+          onCancel={() => cancelAndClose()}
+          onClose={() => cancelAndClose()}
           onSubmit={() => {
-            onSubmit(customGasLimitInHex, customGasPriceInHex)
-            hideModal()
+            onSubmit(customModalGasLimitInHex, customModalGasPriceInHex)
+            cancelAndClose()
           }}
           submitText={this.context.t('save')}
+          headerCloseText={'Close'}
+          hideCancel={true}
         />
       </div>
     )