Reorder rows for better table logic

1 files changed, 37 insertions, 32 deletions

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 1e6299902..510ef78e6 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -108,44 +108,18 @@ PTXP.render = function () {
 
       h('.table-box', [
 
+        // Ether Value
+        // Currently not customizable, but easily modified
+        // in the way that gas and gasLimit currently are.
         h('.row', [
           h('.cell.label', 'Amount'),
           h(EthBalance, { value: txParams.value }),
         ]),
 
+        // Gas Limit (customizable)
         h('.cell.row', [
-          h('.cell.label', 'Max Transaction Fee'),
-          h(EthBalance, { value: txFee.toString(16) }),
-        ]),
-
-        h('.cell.row', {
-          style: {
-            fontFamily: 'Montserrat Regular',
-            background: 'white',
-            padding: '10px 25px',
-          },
-        }, [
-          h('.cell.label', 'Max Total'),
-          h('.cell.value', {
-            style: {
-              display: 'flex',
-              alignItems: 'center',
-            },
-          }, [
-            h(EthBalance, {
-              value: maxCost.toString(16),
-              inline: true,
-              labelColor: 'black',
-              fontSize: '16px',
-            }),
-          ]),
-        ]),
-        h('.cell.row', {
-
-        }, [
           h('.cell.label', 'Gas Limit'),
           h('.cell.value', {
-
           }, [
             h(HexInput, {
               value: gas,
@@ -161,9 +135,9 @@ PTXP.render = function () {
             }),
           ]),
         ]),
-        h('.cell.row', {
 
-        }, [
+        // Gas Price (customizable)
+        h('.cell.row', [
           h('.cell.label', 'Gas Price'),
           h('.cell.value', {
           }, [
@@ -181,6 +155,37 @@ PTXP.render = function () {
             }),
           ]),
         ]),
+
+        // Max Transaction Fee (calculated)
+        h('.cell.row', [
+          h('.cell.label', 'Max Transaction Fee'),
+          h(EthBalance, { value: txFee.toString(16) }),
+        ]),
+
+        h('.cell.row', {
+          style: {
+            fontFamily: 'Montserrat Regular',
+            background: 'white',
+            padding: '10px 25px',
+          },
+        }, [
+          h('.cell.label', 'Max Total'),
+          h('.cell.value', {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+            },
+          }, [
+            h(EthBalance, {
+              value: maxCost.toString(16),
+              inline: true,
+              labelColor: 'black',
+              fontSize: '16px',
+            }),
+          ]),
+        ]),
+
+        // Data size row:
         h('.cell.row', {
           style: {
             background: '#f7f7f7',