Refactor and redesign confirm transaction views

6 files changed, 84 insertions, 13 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 621775592..936af914c 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -40,6 +40,9 @@
     "message": "MetaMask",
     "description": "The name of the application"
   },
+  "approve": {
+    "message": "Approve"
+  },
   "approved": {
     "message": "Approved"
   },
@@ -89,6 +92,9 @@
   "buyCoinbaseExplainer": {
     "message": "Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin."
   },
+  "bytes": {
+    "message": "Bytes"
+  },
   "ok": {
     "message": "Ok"
   },
@@ -149,6 +155,9 @@
   "copyContractAddress": {
     "message": "Copy Contract Address"
   },
+  "copyAddress": {
+    "message": "Copy address to clipboard"
+  },
   "copyToClipboard": {
     "message": "Copy to clipboard"
   },
@@ -318,6 +327,9 @@
   "fromShapeShift": {
     "message": "From ShapeShift"
   },
+  "functionType": {
+    "message": "Function Type"
+  },
   "gas": {
     "message": "Gas",
     "description": "Short indication of gas cost"
@@ -370,6 +382,9 @@
   "hereList": {
     "message": "Here's a list!!!!"
   },
+  "hexData": {
+    "message": "Hex Data"
+  },
   "hide": {
     "message": "Hide"
   },
@@ -582,6 +597,9 @@
     "message": "or",
     "description": "choice between creating or importing a new account"
   },
+  "origin": {
+    "message": "Origin"
+  },
   "password": {
     "message": "Password"
   },
@@ -911,6 +929,9 @@
   "transactionNumber": {
     "message": "Transaction Number"
   },
+  "transfer": {
+    "message": "Transfer"
+  },
   "transfers": {
     "message": "Transfers"
   },
diff --git a/app/images/alert-red.svg b/app/images/alert-red.svg
new file mode 100644
index 000000000..ac5b30e27
--- /dev/null
+++ b/app/images/alert-red.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Artboard Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Artboard-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-48">
+            <circle id="Oval" fill="#D0021B" cx="8" cy="8" r="8"></circle>
+            <rect id="Rectangle-41" fill="#FFFFFF" x="7" y="3" width="2" height="7" rx="1"></rect>
+            <rect id="Rectangle-41" fill="#FFFFFF" x="7" y="11" width="2" height="2" rx="1"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/images/alert.svg b/app/images/alert.svg
new file mode 100644
index 000000000..534eda194
--- /dev/null
+++ b/app/images/alert.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="29px" height="29px" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>7414FFD8-B28A-4593-9D7E-19E73D687B50</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Action-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Approve---insufficient-amount" transform="translate(-69.000000, -166.000000)">
+            <g id="Group-7" transform="translate(53.000000, 51.000000)">
+                <g id="Group-34" transform="translate(0.000000, 91.000000)">
+                    <g id="alert" transform="translate(16.000000, 24.000000)">
+                        <circle id="Oval" fill="#605A1C" cx="14.5" cy="14.5" r="14.5"></circle>
+                        <path d="M16,16.8282967 L14,16.8282967 L14,7 L16,7 L16,16.8282967 Z M16,21 L14,21 L14,19 L16,19 L16,21 Z" id="!" fill="#FFFCDB"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/images/caret-left.svg b/app/images/caret-left.svg
new file mode 100644
index 000000000..0ea266161
--- /dev/null
+++ b/app/images/caret-left.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="9px" height="15px" viewBox="0 0 9 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>8439120D-5704-4273-B416-FEE134322584</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Action-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Approve---insufficient-amount" transform="translate(-75.000000, -69.000000)" stroke="#3099F2" stroke-width="2">
+            <g id="Group-7" transform="translate(53.000000, 51.000000)">
+                <g id="cancel" transform="translate(24.000000, 14.000000)">
+                    <g id="Group">
+                        <polyline id="Path-8" points="6.1263881 18.0633906 0 11.6306831 6.31493631 5"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/scripts/controllers/network/enums.js b/app/scripts/controllers/network/enums.js
index 9da7f309c..3190eb37c 100644
--- a/app/scripts/controllers/network/enums.js
+++ b/app/scripts/controllers/network/enums.js
@@ -4,6 +4,7 @@ const KOVAN = 'kovan'
 const MAINNET = 'mainnet'
 const LOCALHOST = 'localhost'
 
+const MAINNET_CODE = 1
 const ROPSTEN_CODE = 3
 const RINKEYBY_CODE = 4
 const KOVAN_CODE = 42
@@ -13,13 +14,13 @@ const RINKEBY_DISPLAY_NAME = 'Rinkeby'
 const KOVAN_DISPLAY_NAME = 'Kovan'
 const MAINNET_DISPLAY_NAME = 'Main Ethereum Network'
 
-
 module.exports = {
   ROPSTEN,
   RINKEBY,
   KOVAN,
   MAINNET,
   LOCALHOST,
+  MAINNET_CODE,
   ROPSTEN_CODE,
   RINKEYBY_CODE,
   KOVAN_CODE,
diff --git a/app/scripts/controllers/transactions/tx-state-manager.js b/app/scripts/controllers/transactions/tx-state-manager.js
index 0aae4774b..b4d751830 100644
--- a/app/scripts/controllers/transactions/tx-state-manager.js
+++ b/app/scripts/controllers/transactions/tx-state-manager.js
@@ -399,19 +399,17 @@ class TransactionStateManager extends EventEmitter {
   _setTxStatus (txId, status) {
     const txMeta = this.getTx(txId)
     txMeta.status = status
-    setTimeout(() => {
-      try {
-        this.updateTx(txMeta, `txStateManager: setting status to ${status}`)
-        this.emit(`${txMeta.id}:${status}`, txId)
-        this.emit(`tx:status-update`, txId, status)
-        if (['submitted', 'rejected', 'failed'].includes(status)) {
-          this.emit(`${txMeta.id}:finished`, txMeta)
-        }
-        this.emit('update:badge')
-      } catch (error) {
-        log.error(error)
+    try {
+      this.updateTx(txMeta, `txStateManager: setting status to ${status}`)
+      this.emit(`${txMeta.id}:${status}`, txId)
+      this.emit(`tx:status-update`, txId, status)
+      if (['submitted', 'rejected', 'failed'].includes(status)) {
+        this.emit(`${txMeta.id}:finished`, txMeta)
       }
-    })
+      this.emit('update:badge')
+    } catch (error) {
+      log.error(error)
+    }
   }
 
   /**