Merge pull request #3632 from MetaMask/retry-tx-refractor

Retry tx refractor

ui/app/conf-tx.js

@@ -40,6 +40,7 @@ function mapStateToProps (state) {
     currentCurrency: state.metamask.currentCurrency,
     blockGasLimit: state.metamask.currentBlockGasLimit,
     computedBalances: state.metamask.computedBalances,
+    selectedAddressTxList: state.metamask.selectedAddressTxList,
   }
 }
 
@@ -48,6 +49,23 @@ function ConfirmTxScreen () {
   Component.call(this)
 }
 
+ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) {
+  const {
+    unapprovedTxs,
+    network,
+    selectedAddressTxList,
+  } = this.props
+  const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevProps
+  const prevUnconfTxList = txHelper(prevUnapprovedTxs, {}, {}, {}, network)
+  const prevTxData = prevUnconfTxList[prevIndex] || {}
+  const prevTx = selectedAddressTxList.find(({ id }) => id === prevTxData.id) || {}
+  const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network)
+
+  if (prevTx.status === 'dropped' && unconfTxList.length === 0) {
+    this.goHome({})
+  }
+}
+
 ConfirmTxScreen.prototype.render = function () {
   const props = this.props
   const {

ui/app/css/itcss/components/confirm.scss

@@ -242,6 +242,22 @@ section .confirm-screen-account-number,
   }
 }
 
+@media screen and (max-width: 379px) {
+  .confirm-screen-row {
+    span.confirm-screen-section-column {
+      flex: 0.4;
+    }
+
+    div.confirm-screen-section-column {
+      flex: 0.6;
+    }
+
+    .currency-display__input {
+      font-size: 14px;
+    }
+  }
+}
+
 .confirm-screen-row-detail {
   font-size: 12px;
   line-height: 16px;

ui/app/css/itcss/components/transaction-list.scss

@@ -170,6 +170,7 @@
 
   @media screen and (max-width: 379px) {
     margin-left: 0px;
+    text-align: center;
   }
 }
 
@@ -244,7 +245,6 @@
 }
 
 .tx-list-item {
-  height: 80px;
   border-top: 1px solid rgb(231, 231, 231);
   flex: 0 0 auto;
   display: flex;