From bad70eb1b328aa911a2523ccab642d7607161b4b Mon Sep 17 00:00:00 2001
From: Nick Doiron <ndoiron@mapmeld.com>
Date: Mon, 22 Jan 2018 23:48:03 -1000
Subject: first steps to i18n

---
 ui/app/components/account-dropdowns.js             | 12 +++++-----
 ui/app/components/account-export.js                |  8 +++----
 ui/app/components/account-menu/index.js            | 14 ++++++------
 ui/app/components/buy-button-subview.js            |  8 +++----
 ui/app/components/coinbase-form.js                 |  4 ++--
 ui/app/components/copyButton.js                    |  2 +-
 ui/app/components/copyable.js                      |  2 +-
 ui/app/components/customize-gas-modal/index.js     | 20 ++++++++---------
 .../dropdowns/components/account-dropdowns.js      | 19 ++++++++--------
 ui/app/components/dropdowns/network-dropdown.js    | 26 +++++++++++-----------
 ui/app/components/dropdowns/token-menu-dropdown.js |  2 +-
 ui/app/components/ens-input.js                     |  4 ++--
 ui/app/components/hex-as-decimal-input.js          |  2 +-
 ui/app/components/network.js                       | 24 ++++++++++----------
 ui/app/components/notice.js                        |  2 +-
 ui/app/components/pending-msg-details.js           |  3 +--
 ui/app/components/pending-msg.js                   | 14 +++++-------
 ui/app/components/pending-personal-msg-details.js  |  3 +--
 ui/app/components/pending-typed-msg-details.js     |  2 +-
 ui/app/components/pending-typed-msg.js             |  6 ++---
 ui/app/components/shapeshift-form.js               | 22 +++++++++---------
 ui/app/components/shift-list-item.js               |  8 +++----
 ui/app/components/signature-request.js             | 24 +++++++++-----------
 ui/app/components/token-list.js                    |  6 ++---
 ui/app/components/transaction-list-item.js         | 16 ++++++-------
 ui/app/components/transaction-list.js              |  3 +--
 ui/app/components/tx-list-item.js                  |  2 +-
 ui/app/components/tx-list.js                       |  4 ++--
 ui/app/components/tx-view.js                       |  6 ++---
 ui/app/components/wallet-view.js                   |  8 +++----
 30 files changed, 132 insertions(+), 144 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 0c34a5154..3e5805c0e 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -79,7 +79,7 @@ class AccountDropdowns extends Component {
     try { // Sometimes keyrings aren't loaded yet:
       const type = keyring.type
       const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label', 'LOOSE') : null
+      return isLoose ? h('.keyring-label', t('looseCaps')) : null
     } catch (e) { return }
   }
 
@@ -129,7 +129,7 @@ class AccountDropdowns extends Component {
                 diameter: 32,
               },
             ),
-            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'),
+            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, t('createAccount')),
           ],
         ),
         h(
@@ -192,7 +192,7 @@ class AccountDropdowns extends Component {
               global.platform.openWindow({ url })
             },
           },
-          'View account on Etherscan',
+          t('etherscanView'),
         ),
         h(
           DropdownMenuItem,
@@ -204,7 +204,7 @@ class AccountDropdowns extends Component {
               actions.showQrView(selected, identity ? identity.name : '')
             },
           },
-          'Show QR Code',
+          t('qrCode'),
         ),
         h(
           DropdownMenuItem,
@@ -216,7 +216,7 @@ class AccountDropdowns extends Component {
               copyToClipboard(checkSumAddress)
             },
           },
-          'Copy Address to clipboard',
+          t('copyAddress'),
         ),
         h(
           DropdownMenuItem,
@@ -226,7 +226,7 @@ class AccountDropdowns extends Component {
               actions.requestAccountExport()
             },
           },
-          'Export Private Key',
+          t('exportPrivateKey'),
         ),
       ]
     )
diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 32b103c86..346872a97 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -35,7 +35,7 @@ ExportAccountView.prototype.render = function () {
   if (notExporting) return h('div')
 
   if (exportRequested) {
-    const warning = `Export private keys at your own risk.`
+    const warning = t('exportPrivateKeyWarning')
     return (
       h('div', {
         style: {
@@ -53,7 +53,7 @@ ExportAccountView.prototype.render = function () {
             h('p.error', warning),
             h('input#exportAccount.sizing-input', {
               type: 'password',
-              placeholder: 'confirm password',
+              placeholder: t('confirmPasswordSmall'),
               onKeyPress: this.onExportKeyPress.bind(this),
               style: {
                 position: 'relative',
@@ -74,10 +74,10 @@ ExportAccountView.prototype.render = function () {
                 style: {
                   marginRight: '10px',
                 },
-              }, 'Submit'),
+              }, t('submit')),
               h('button', {
                 onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-              }, 'Cancel'),
+              }, t('cancel')),
             ]),
           (this.props.warning) && (
           h('span.error', {
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index aeb8a0b38..aec00ff6b 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -70,10 +70,10 @@ AccountMenu.prototype.render = function () {
     h(Item, {
       className: 'account-menu__header',
     }, [
-      'My Accounts',
+      t('myAccounts'),
       h('button.account-menu__logout-button', {
         onClick: lockMetamask,
-      }, 'Log out'),
+      }, t('logout')),
     ]),
     h(Divider),
     h('div.account-menu__accounts', this.renderAccounts()),
@@ -81,23 +81,23 @@ AccountMenu.prototype.render = function () {
     h(Item, {
       onClick: () => showNewAccountPage('CREATE'),
       icon: h('img', { src: 'images/plus-btn-white.svg' }),
-      text: 'Create Account',
+      text: t('createAccount'),
     }),
     h(Item, {
       onClick: () => showNewAccountPage('IMPORT'),
       icon: h('img', { src: 'images/import-account.svg' }),
-      text: 'Import Account',
+      text: t('importAccount'),
     }),
     h(Divider),
     h(Item, {
       onClick: showInfoPage,
       icon: h('img', { src: 'images/mm-info-icon.svg' }),
-      text: 'Info & Help',
+      text: t('infoHelp'),
     }),
     h(Item, {
       onClick: showConfigPage,
       icon: h('img', { src: 'images/settings.svg' }),
-      text: 'Settings',
+      text: t('settings'),
     }),
   ])
 }
@@ -155,6 +155,6 @@ AccountMenu.prototype.indicateIfLoose = function (keyring) {
   try { // Sometimes keyrings aren't loaded yet:
     const type = keyring.type
     const isLoose = type !== 'HD Key Tree'
-    return isLoose ? h('.keyring-label', 'IMPORTED') : null
+    return isLoose ? h('.keyring-label', t('importedCaps')) : null
   } catch (e) { return }
 }
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index d5958787b..76da4fc9d 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -76,7 +76,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
             paddingTop: '4px',
             paddingBottom: '4px',
           },
-        }, 'Deposit Eth'),
+        }, t('depositEth')),
       ]),
 
       // loading indication
@@ -118,7 +118,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
             paddingTop: '4px',
             paddingBottom: '4px',
           },
-        }, 'Select Service'),
+        }, t('selectService')),
       ]),
 
     ])
@@ -164,14 +164,14 @@ BuyButtonSubview.prototype.primarySubview = function () {
               style: {
                 marginTop: '15px',
               },
-            }, 'Borrow With Dharma (Beta)')
+            }, t('borrowDharma'))
           ) : null,
       ])
     )
 
     default:
       return (
-        h('h2.error', 'Unknown network ID')
+        h('h2.error', t('unknownNetworkId'))
       )
 
   }
diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js
index f70208625..6532cb3bf 100644
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.js
@@ -37,11 +37,11 @@ CoinbaseForm.prototype.render = function () {
     }, [
       h('button.btn-green', {
         onClick: this.toCoinbase.bind(this),
-      }, 'Continue to Coinbase'),
+      }, t('continueToCoinbase')),
 
       h('button.btn-red', {
         onClick: () => props.dispatch(actions.goHome()),
-      }, 'Cancel'),
+      }, t('cancel')),
     ]),
   ])
 }
diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
index a25d0719c..5d5be8feb 100644
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/copyButton.js
@@ -22,7 +22,7 @@ CopyButton.prototype.render = function () {
   const value = props.value
   const copied = state.copied
 
-  const message = copied ? 'Copied' : props.title || ' Copy '
+  const message = copied ? t('copiedButton') : props.title || t('copyButton')
 
   return h('.copy-button', {
     style: {
diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js
index a4f6f4bc6..690e44153 100644
--- a/ui/app/components/copyable.js
+++ b/ui/app/components/copyable.js
@@ -22,7 +22,7 @@ Copyable.prototype.render = function () {
   const { copied } = state
 
   return h(Tooltip, {
-    title: copied ? 'Copied!' : 'Copy',
+    title: copied ? t('copiedExclamation') : t('copy'),
     position: 'bottom',
   }, h('span', {
     style: {
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 826d2cd4b..a5384daaf 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -146,7 +146,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
   })
 
   if (!balanceIsSufficient) {
-    error = 'Insufficient balance for current gas total'
+    error = t('balanceIsInsufficientGas')
   }
 
   const gasLimitTooLow = gasLimit && conversionGreaterThan(
@@ -162,7 +162,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
   )
 
   if (gasLimitTooLow) {
-    error = 'Gas limit must be at least 21000'
+    error = t('gasLimitTooLow')
   }
 
   this.setState({ error })
@@ -239,7 +239,7 @@ CustomizeGasModal.prototype.render = function () {
     }, [
       h('div.send-v2__customize-gas__header', {}, [
 
-        h('div.send-v2__customize-gas__title', 'Customize Gas'),
+        h('div.send-v2__customize-gas__title', t('customGas')),
 
         h('div.send-v2__customize-gas__close', {
           onClick: hideModal,
@@ -255,8 +255,8 @@ CustomizeGasModal.prototype.render = function () {
           // max: 1000,
           step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
           onChange: value => this.convertAndSetGasPrice(value),
-          title: 'Gas Price (GWEI)',
-          copy: 'We calculate the suggested gas prices based on network success rates.',
+          title: t('gasPrice'),
+          copy: t('gasPriceCalculation'),
         }),
 
         h(GasModalCard, {
@@ -265,8 +265,8 @@ CustomizeGasModal.prototype.render = function () {
           // max: 100000,
           step: 1,
           onChange: value => this.convertAndSetGasLimit(value),
-          title: 'Gas Limit',
-          copy: 'We calculate the suggested gas limit based on network success rates.',
+          title: t('gasLimit'),
+          copy: t('gasLimitCalculation'),
         }),
 
       ]),
@@ -279,16 +279,16 @@ CustomizeGasModal.prototype.render = function () {
 
         h('div.send-v2__customize-gas__revert', {
           onClick: () => this.revert(),
-        }, ['Revert']),
+        }, [t('revert')]),
 
         h('div.send-v2__customize-gas__buttons', [
           h('div.send-v2__customize-gas__cancel', {
             onClick: this.props.hideModal,
-          }, ['CANCEL']),
+          }, [t('cancelButton')]),
 
           h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, {
             onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal),
-          }, ['SAVE']),
+          }, [t('saveButton')]),
         ]),
 
       ]),
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index f97ac0691..7ecec38d2 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -129,7 +129,7 @@ class AccountDropdowns extends Component {
                   actions.showEditAccountModal(identity)
                 },
               }, [
-                'Edit',
+                t('editButton'),
               ]),
             ]),
 
@@ -159,7 +159,7 @@ class AccountDropdowns extends Component {
     try { // Sometimes keyrings aren't loaded yet:
       const type = keyring.type
       const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label', 'LOOSE') : null
+      return isLoose ? h('.keyring-label', t('looseCaps')) : null
     } catch (e) { return }
   }
 
@@ -217,7 +217,7 @@ class AccountDropdowns extends Component {
                 fontSize: '16px',
                 lineHeight: '23px',
               },
-            }, 'Create Account'),
+            }, t('createAccount')),
           ],
         ),
         h(
@@ -251,7 +251,7 @@ class AccountDropdowns extends Component {
                 fontSize: '16px',
                 lineHeight: '23px',
               },
-            }, 'Import Account'),
+            }, t('importAccount')),
           ]
         ),
       ]
@@ -302,7 +302,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          'Account Details',
+          t('accDetails'),
         ),
         h(
           DropdownMenuItem,
@@ -318,7 +318,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          'View account on Etherscan',
+          t('etherscanView'),
         ),
         h(
           DropdownMenuItem,
@@ -334,7 +334,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          'Copy Address to clipboard',
+          t('copyAddress'),
         ),
         h(
           DropdownMenuItem,
@@ -346,7 +346,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          'Export Private Key',
+          t('exportPrivateKey'),
         ),
         h(
           DropdownMenuItem,
@@ -361,7 +361,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          'Add Token',
+          t('addToken'),
         ),
 
       ]
@@ -479,4 +479,3 @@ function mapStateToProps (state) {
 }
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns)
-
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index dfaa6b22c..02773fb46 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -93,13 +93,13 @@ NetworkDropdown.prototype.render = function () {
   }, [
 
     h('div.network-dropdown-header', {}, [
-      h('div.network-dropdown-title', {}, 'Networks'),
+      h('div.network-dropdown-title', {}, t('networks')),
 
       h('div.network-dropdown-divider'),
 
       h('div.network-dropdown-content',
         {},
-        'The default network for Ether transactions is Main Net.'
+        t('defaultNetwork')
       ),
     ]),
 
@@ -121,7 +121,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
           },
-        }, 'Main Ethereum Network'),
+        }, t('mainnet')),
       ]
     ),
 
@@ -143,7 +143,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
           },
-        }, 'Ropsten Test Network'),
+        }, t('ropsten')),
       ]
     ),
 
@@ -165,7 +165,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
           },
-        }, 'Kovan Test Network'),
+        }, t('kovan')),
       ]
     ),
 
@@ -187,7 +187,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
           },
-        }, 'Rinkeby Test Network'),
+        }, t('rinkeby')),
       ]
     ),
 
@@ -209,7 +209,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
           },
-        }, 'Localhost 8545'),
+        }, t('localhost')),
       ]
     ),
 
@@ -233,7 +233,7 @@ NetworkDropdown.prototype.render = function () {
           style: {
             color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
           },
-        }, 'Custom RPC'),
+        }, t('customRPC')),
       ]
     ),
 
@@ -248,15 +248,15 @@ NetworkDropdown.prototype.getNetworkName = function () {
   let name
 
   if (providerName === 'mainnet') {
-    name = 'Main Ethereum Network'
+    name = t('mainnet')
   } else if (providerName === 'ropsten') {
-    name = 'Ropsten Test Network'
+    name = t('ropsten')
   } else if (providerName === 'kovan') {
-    name = 'Kovan Test Network'
+    name = t('kovan')
   } else if (providerName === 'rinkeby') {
-    name = 'Rinkeby Test Network'
+    name = t('rinkeby')
   } else {
-    name = 'Unknown Private Network'
+    name = t('unknownNetwork')
   }
 
   return name
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index dc7a985e3..3dfcec5a8 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -43,7 +43,7 @@ TokenMenuDropdown.prototype.render = function () {
             showHideTokenConfirmationModal(this.props.token)
             this.props.onClose()
           },
-        }, 'Hide Token'),
+        }, t('hideToken')),
 
       ]),
     ]),
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index 6553053f7..3e7a23369 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -89,13 +89,13 @@ EnsInput.prototype.lookupEnsName = function () {
   log.info(`ENS attempting to resolve name: ${recipient}`)
   this.ens.lookup(recipient.trim())
   .then((address) => {
-    if (address === ZERO_ADDRESS) throw new Error('No address has been set for this name.')
+    if (address === ZERO_ADDRESS) throw new Error(t('noAddressForName'))
     if (address !== ensResolution) {
       this.setState({
         loadingEns: false,
         ensResolution: address,
         nickname: recipient.trim(),
-        hoverText: address + '\nClick to Copy',
+        hoverText: address + '\n' + t('clickCopy'),
         ensFailure: false,
       })
     }
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index 4a71e9585..07432a1f2 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -132,7 +132,7 @@ HexAsDecimalInput.prototype.constructWarning = function () {
   } else if (max) {
     message += `must be less than or equal to ${max}.`
   } else {
-    message += 'Invalid input.'
+    message += t('invalidInput')
   }
 
   return message
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 3e91fa807..6cb1ff53d 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -33,7 +33,7 @@ Network.prototype.render = function () {
       onClick: (event) => this.props.onClick(event),
     }, [
       h('img', {
-        title: 'Attempting to connect to blockchain.',
+        title: t('attemptingConnect'),
         style: {
           width: '27px',
         },
@@ -41,22 +41,22 @@ Network.prototype.render = function () {
       }),
     ])
   } else if (providerName === 'mainnet') {
-    hoverText = 'Main Ethereum Network'
+    hoverText = t('mainnet')
     iconName = 'ethereum-network'
   } else if (providerName === 'ropsten') {
-    hoverText = 'Ropsten Test Network'
+    hoverText = t('ropsten')
     iconName = 'ropsten-test-network'
   } else if (parseInt(networkNumber) === 3) {
-    hoverText = 'Ropsten Test Network'
+    hoverText = t('ropsten')
     iconName = 'ropsten-test-network'
   } else if (providerName === 'kovan') {
-    hoverText = 'Kovan Test Network'
+    hoverText = t('kovan')
     iconName = 'kovan-test-network'
   } else if (providerName === 'rinkeby') {
-    hoverText = 'Rinkeby Test Network'
+    hoverText = t('rinkeby')
     iconName = 'rinkeby-test-network'
   } else {
-    hoverText = 'Unknown Private Network'
+    hoverText = t('unknownNetwork')
     iconName = 'unknown-private-network'
   }
 
@@ -84,7 +84,7 @@ Network.prototype.render = function () {
                 backgroundColor: '#038789', // $blue-lagoon
                 nonSelectBackgroundColor: '#15afb2',
               }),
-              h('.network-name', 'Main Network'),
+              h('.network-name', t('mainnet')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'ropsten-test-network':
@@ -93,7 +93,7 @@ Network.prototype.render = function () {
                 backgroundColor: '#e91550', // $crimson
                 nonSelectBackgroundColor: '#ec2c50',
               }),
-              h('.network-name', 'Ropsten Test Net'),
+              h('.network-name', t('ropsten')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'kovan-test-network':
@@ -102,7 +102,7 @@ Network.prototype.render = function () {
                 backgroundColor: '#690496', // $purple
                 nonSelectBackgroundColor: '#b039f3',
               }),
-              h('.network-name', 'Kovan Test Net'),
+              h('.network-name', t('kovan')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'rinkeby-test-network':
@@ -111,7 +111,7 @@ Network.prototype.render = function () {
                 backgroundColor: '#ebb33f', // $tulip-tree
                 nonSelectBackgroundColor: '#ecb23e',
               }),
-              h('.network-name', 'Rinkeby Test Net'),
+              h('.network-name', t('rinkeby')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           default:
@@ -123,7 +123,7 @@ Network.prototype.render = function () {
                 },
               }),
 
-              h('.network-name', 'Private Network'),
+              h('.network-name', t('privateNetwork')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
         }
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index 941ac33e6..5bda329ed 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -111,7 +111,7 @@ Notice.prototype.render = function () {
         style: {
           marginTop: '18px',
         },
-      }, 'Accept'),
+      }, t('accept')),
     ])
   )
 }
diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js
index 718a22de0..3ea063c3c 100644
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.js
@@ -39,7 +39,7 @@ PendingMsgDetails.prototype.render = function () {
       // message data
       h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
         h('.flex-column.flex-space-between', [
-          h('label.font-small', 'MESSAGE'),
+          h('label.font-small', t('messageCaps')),
           h('span.font-small', msgParams.data),
         ]),
       ]),
@@ -47,4 +47,3 @@ PendingMsgDetails.prototype.render = function () {
     ])
   )
 }
-
diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js
index 834719c53..236849c18 100644
--- a/ui/app/components/pending-msg.js
+++ b/ui/app/components/pending-msg.js
@@ -29,17 +29,14 @@ PendingMsg.prototype.render = function () {
           fontWeight: 'bold',
           textAlign: 'center',
         },
-      }, 'Sign Message'),
+      }, t('signMessage')),
 
       h('.error', {
         style: {
           margin: '10px',
         },
       }, [
-        `Signing this message can have
-        dangerous side effects. Only sign messages from
-        sites you fully trust with your entire account.
-        This dangerous method will be removed in a future version. `,
+        t('signNotice'),
         h('a', {
           href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527',
           style: { color: 'rgb(247, 134, 28)' },
@@ -48,7 +45,7 @@ PendingMsg.prototype.render = function () {
             const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527'
             global.platform.openWindow({ url })
           },
-        }, 'Read more here.'),
+        }, t('readMore')),
       ]),
 
       // message details
@@ -58,13 +55,12 @@ PendingMsg.prototype.render = function () {
       h('.flex-row.flex-space-around', [
         h('button', {
           onClick: state.cancelMessage,
-        }, 'Cancel'),
+        }, t('cancel')),
         h('button', {
           onClick: state.signMessage,
-        }, 'Sign'),
+        }, t('sign')),
       ]),
     ])
 
   )
 }
-
diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js
index 1050513f2..30c475347 100644
--- a/ui/app/components/pending-personal-msg-details.js
+++ b/ui/app/components/pending-personal-msg-details.js
@@ -45,7 +45,7 @@ PendingMsgDetails.prototype.render = function () {
           height: '260px',
         },
       }, [
-        h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'),
+        h('label.font-small', { style: { display: 'block' } }, t('messageCaps')),
         h(BinaryRenderer, {
           value: data,
           style: {
@@ -57,4 +57,3 @@ PendingMsgDetails.prototype.render = function () {
     ])
   )
 }
-
diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js
index b5fd29f71..a3381174d 100644
--- a/ui/app/components/pending-typed-msg-details.js
+++ b/ui/app/components/pending-typed-msg-details.js
@@ -45,7 +45,7 @@ PendingMsgDetails.prototype.render = function () {
           height: '260px',
         },
       }, [
-        h('label.font-small', { style: { display: 'block' } }, 'YOU ARE SIGNING'),
+        h('label.font-small', { style: { display: 'block' } }, t('youSignCaps')),
         h(TypedMessageRenderer, {
           value: data,
           style: {
diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js
index f8926d0a3..73702d0f8 100644
--- a/ui/app/components/pending-typed-msg.js
+++ b/ui/app/components/pending-typed-msg.js
@@ -26,7 +26,7 @@ PendingMsg.prototype.render = function () {
           fontWeight: 'bold',
           textAlign: 'center',
         },
-      }, 'Sign Message'),
+      }, t('signMessage')),
 
       // message details
       h(PendingTxDetails, state),
@@ -35,10 +35,10 @@ PendingMsg.prototype.render = function () {
       h('.flex-row.flex-space-around', [
         h('button', {
           onClick: state.cancelTypedMessage,
-        }, 'Cancel'),
+        }, t('cancelButton')),
         h('button', {
           onClick: state.signTypedMessage,
-        }, 'Sign'),
+        }, t('signButton')),
       ]),
     ])
 
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 2270b8236..773ff227c 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -14,7 +14,7 @@ function mapStateToProps (state) {
     tokenExchangeRates,
     selectedAddress,
   } = state.metamask
-  
+
   return {
     coinOptions,
     tokenExchangeRates,
@@ -92,7 +92,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
       }))
       .catch(() => this.setState({
         showQrCode: false,
-        errorMessage: 'Invalid Request',
+        errorMessage: t('invalidRequest'),
         isLoading: false,
       }))
   }
@@ -124,10 +124,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () {
 
   return h('div.shapeshift-form__metadata', {}, [
 
-    this.renderMetadata('Status', limit ? 'Available' : 'Unavailable'),
-    this.renderMetadata('Limit', limit),
-    this.renderMetadata('Exchange Rate', rate),
-    this.renderMetadata('Minimum', minimum),
+    this.renderMetadata(t('status'), limit ? t('available') : t('unavailable')),
+    this.renderMetadata(t('limit'), limit),
+    this.renderMetadata(t('exchangeRate'), rate),
+    this.renderMetadata(t('min'), minimum),
 
   ])
 }
@@ -141,7 +141,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
   return h('div.shapeshift-form', {}, [
 
     h('div.shapeshift-form__deposit-instruction', [
-      'Deposit your BTC to the address below:',
+      t('depositBTC'),
     ]),
 
     h('div', depositAddress),
@@ -178,7 +178,7 @@ ShapeshiftForm.prototype.render = function () {
 
             h('div.shapeshift-form__selector', [
 
-              h('div.shapeshift-form__selector-label', 'Deposit'),
+              h('div.shapeshift-form__selector-label', t('deposit')),
 
               h(SimpleDropdown, {
                 selectedOption: this.state.depositCoin,
@@ -198,7 +198,7 @@ ShapeshiftForm.prototype.render = function () {
             h('div.shapeshift-form__selector', [
 
               h('div.shapeshift-form__selector-label', [
-                'Receive',
+                t('receive'),
               ]),
 
               h('div.shapeshift-form__selector-input', ['ETH']),
@@ -214,7 +214,7 @@ ShapeshiftForm.prototype.render = function () {
           }, [
 
             h('div.shapeshift-form__address-input-label', [
-              'Your Refund Address',
+              t('refundAddress'),
             ]),
 
             h('input.shapeshift-form__address-input', {
@@ -236,7 +236,7 @@ ShapeshiftForm.prototype.render = function () {
         className: btnClass,
         disabled: !token,
         onClick: () => this.onBuyWithShapeShift(),
-      }, ['Buy']),
+      }, [t('buyButton')]),
 
     ])
 }
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 111a77df4..6e5be641f 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -141,7 +141,7 @@ ShiftListItem.prototype.renderInfo = function () {
             width: '100%',
           },
         }, `${props.depositType} to ETH via ShapeShift`),
-        h('div', 'No deposits received'),
+        h('div', t('noDeposits')),
         h('div', {
           style: {
             fontSize: 'x-small',
@@ -164,7 +164,7 @@ ShiftListItem.prototype.renderInfo = function () {
             width: '100%',
           },
         }, `${props.depositType} to ETH via ShapeShift`),
-        h('div', 'Conversion in progress'),
+        h('div', t('conversionProgress')),
         h('div', {
           style: {
             fontSize: 'x-small',
@@ -189,7 +189,7 @@ ShiftListItem.prototype.renderInfo = function () {
             color: '#ABA9AA',
             width: '100%',
           },
-        }, 'From ShapeShift'),
+        }, t('fromShapeShift')),
         h('div', formatDate(props.time)),
         h('div', {
           style: {
@@ -201,7 +201,7 @@ ShiftListItem.prototype.renderInfo = function () {
       ])
 
     case 'failed':
-      return h('span.error', '(Failed)')
+      return h('span.error', '(' + t('failed') + ')')
     default:
       return ''
   }
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index c5cc23aa8..459d6a1a2 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -54,7 +54,7 @@ SignatureRequest.prototype.renderHeader = function () {
 
     h('div.request-signature__header-background'),
 
-    h('div.request-signature__header__text', 'Signature Request'),
+    h('div.request-signature__header__text', t('sigRequest')),
 
     h('div.request-signature__header__tip-container', [
       h('div.request-signature__header__tip'),
@@ -75,7 +75,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () {
 
   return h('div.request-signature__account', [
 
-    h('div.request-signature__account-text', ['Account:']),
+    h('div.request-signature__account-text', [t('account')]),
 
     h(AccountDropdownMini, {
       selectedAccount,
@@ -102,7 +102,7 @@ SignatureRequest.prototype.renderBalance = function () {
 
   return h('div.request-signature__balance', [
 
-    h('div.request-signature__balance-text', ['Balance:']),
+    h('div.request-signature__balance-text', [t('balance')]),
 
     h('div.request-signature__balance-value', `${balanceInEther} ETH`),
 
@@ -136,7 +136,7 @@ SignatureRequest.prototype.renderRequestInfo = function () {
   return h('div.request-signature__request-info', [
 
     h('div.request-signature__headline', [
-      `Your signature is being requested`,
+      t('yourSigRequested'),
     ]),
 
   ])
@@ -154,21 +154,18 @@ SignatureRequest.prototype.msgHexToText = function (hex) {
 
 SignatureRequest.prototype.renderBody = function () {
   let rows
-  let notice = 'You are signing:'
+  let notice = t('youSign')
 
   const { txData } = this.props
   const { type, msgParams: { data } } = txData
 
   if (type === 'personal_sign') {
-    rows = [{ name: 'Message', value: this.msgHexToText(data) }]
+    rows = [{ name: t('message'), value: this.msgHexToText(data) }]
   } else if (type === 'eth_signTypedData') {
     rows = data
   } else if (type === 'eth_sign') {
-    rows = [{ name: 'Message', value: data }]
-    notice = `Signing this message can have
-    dangerous side effects. Only sign messages from
-    sites you fully trust with your entire account.
-    This dangerous method will be removed in a future version. `
+    rows = [{ name: t('message'), value: data }]
+    notice = t('signNotice')
   }
 
   return h('div.request-signature__body', {}, [
@@ -227,10 +224,10 @@ SignatureRequest.prototype.renderFooter = function () {
   return h('div.request-signature__footer', [
     h('button.request-signature__footer__cancel-button', {
       onClick: cancel,
-    }, 'CANCEL'),
+    }, t('cancelButton')),
     h('button.request-signature__footer__sign-button', {
       onClick: sign,
-    }, 'SIGN'),
+    }, t('signButton')),
   ])
 }
 
@@ -250,4 +247,3 @@ SignatureRequest.prototype.render = function () {
   )
 
 }
-
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index 8e06e0f27..a25566e64 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -42,7 +42,7 @@ TokenList.prototype.render = function () {
   const { tokens, isLoading, error } = state
 
   if (isLoading) {
-    return this.message('Loading Tokens...')
+    return this.message(t('loadingTokens'))
   }
 
   if (error) {
@@ -52,7 +52,7 @@ TokenList.prototype.render = function () {
         padding: '80px',
       },
     }, [
-      'We had trouble loading your token balances. You can view them ',
+      t('troubleTokenBalances'),
       h('span.hotFix', {
         style: {
           color: 'rgba(247, 134, 28, 1)',
@@ -63,7 +63,7 @@ TokenList.prototype.render = function () {
           url: `https://ethplorer.io/address/${userAddress}`,
         })
         },
-      }, 'here'),
+      }, t('here')),
     ])
   }
 
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 4e3d2cb93..10d4236cb 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -85,7 +85,7 @@ TransactionListItem.prototype.render = function () {
         ]),
 
         h(Tooltip, {
-          title: 'Transaction Number',
+          title: t('transactionNumber'),
           position: 'right',
         }, [
           h('span', {
@@ -142,12 +142,12 @@ TransactionListItem.prototype.render = function () {
           style: {
             paddingRight: '2px',
           },
-        }, 'Taking too long?'),
+        }, t('takesTooLong')),
         h('div', {
           style: {
             textDecoration: 'underline',
           },
-        }, 'Retry with a higher gas price here'),
+        }, t('retryWithMoreGas')),
       ]),
     ])
   )
@@ -176,11 +176,11 @@ function recipientField (txParams, transaction, isTx, isMsg) {
   let message
 
   if (isMsg) {
-    message = 'Signature Requested'
+    message = t('sigRequested')
   } else if (txParams.to) {
     message = addressSummary(txParams.to)
   } else {
-    message = 'Contract Published'
+    message = t('contractPublished')
   }
 
   return h('div', {
@@ -203,7 +203,7 @@ function renderErrorOrWarning (transaction) {
 
   // show rejected
   if (status === 'rejected') {
-    return h('span.error', ' (Rejected)')
+    return h('span.error', ' (' + t('rejected') + ')')
   }
   if (transaction.err || transaction.warning) {
     const { err, warning = {} } = transaction
@@ -219,7 +219,7 @@ function renderErrorOrWarning (transaction) {
             title: message,
             position: 'bottom',
           }, [
-            h(`span.error`, ` (Failed)`),
+            h(`span.error`, ` (` + t('failed') + `)`),
           ])
       )
     }
@@ -231,7 +231,7 @@ function renderErrorOrWarning (transaction) {
         title: message,
         position: 'bottom',
       }, [
-        h(`span.warning`, ` (Warning)`),
+        h(`span.warning`, ` (` + t('warning') + `)`),
       ])
     }
   }
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 69b72614c..cb3f8097b 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -78,10 +78,9 @@ TransactionList.prototype.render = function () {
             style: {
               marginTop: '50px',
             },
-          }, 'No transaction history.'),
+          }, t('noTransactionHistory')),
         ]),
       ]),
     ])
   )
 }
-
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 7ccc5c315..d53277925 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -63,7 +63,7 @@ TxListItem.prototype.getAddressText = function () {
     default:
       return address
         ? `${address.slice(0, 10)}...${address.slice(-4)}`
-        : 'Contract Published'
+        : t('contractPublished')
   }
 }
 
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 84cd0f093..6076ab5d3 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -55,7 +55,7 @@ TxList.prototype.renderTransaction = function () {
     : [h(
         'div.tx-list-item.tx-list-item--empty',
         { key: 'tx-list-none' },
-        [ 'No Transactions' ],
+        [ t('noTransactions') ],
       )]
 }
 
@@ -110,7 +110,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
 
   if (isUnapproved) {
     opts.onClick = () => showConfTxPage({id: transActionId})
-    opts.transactionStatus = 'Not Started'
+    opts.transactionStatus = t('Not Started')
   } else if (transactionHash) {
     opts.onClick = () => this.view(transactionHash, transactionNetworkId)
   }
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index b25d8e0f9..423234d4f 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -72,21 +72,21 @@ TxView.prototype.renderButtons = function () {
           onClick: () => showModal({
             name: 'DEPOSIT_ETHER',
           }),
-        }, 'DEPOSIT'),
+        }, t('depositButton')),
 
         h('button.btn-clear.hero-balance-button', {
           style: {
             marginLeft: '0.8em',
           },
           onClick: showSendPage,
-        }, 'SEND'),
+        }, t('sendButton')),
       ])
     )
     : (
       h('div.flex-row.flex-center.hero-balance-buttons', [
         h('button.btn-clear.hero-balance-button', {
           onClick: showSendTokenPage,
-        }, 'SEND'),
+        }, t('sendButton')),
       ])
     )
 }
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index b1ef83cee..3d9c01c6e 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -113,7 +113,7 @@ WalletView.prototype.render = function () {
         onClick: hideSidebar,
       }),
 
-      h('div.wallet-view__keyring-label', isLoose ? 'IMPORTED' : ''),
+      h('div.wallet-view__keyring-label', isLoose ? t('importedCaps') : ''),
 
       h('div.flex-column.flex-center.wallet-view__name-container', {
         style: { margin: '0 auto' },
@@ -130,7 +130,7 @@ WalletView.prototype.render = function () {
           selectedIdentity.name,
         ]),
 
-        h('button.btn-clear.wallet-view__details-button', 'DETAILS'),
+        h('button.btn-clear.wallet-view__details-button', t('detailsCaps')),
       ]),
     ]),
 
@@ -142,7 +142,7 @@ WalletView.prototype.render = function () {
         setTimeout(() => this.setState({ hasCopied: false }), 3000)
       },
     }, [
-      this.state.hasCopied && 'Copied to Clipboard',
+      this.state.hasCopied && t('copiedClipboard'),
       !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
       h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
     ]),
@@ -156,7 +156,7 @@ WalletView.prototype.render = function () {
         showAddTokenPage()
         hideSidebar()
       },
-    }, 'Add Token'),
+    }, t('addToken')),
   ])
 }
 
-- 
cgit v1.2.3


From 99898ac77594d8fe6d4d2aa5bc3e3ba6492f4a10 Mon Sep 17 00:00:00 2001
From: Nick Doiron <ndoiron@mapmeld.com>
Date: Tue, 23 Jan 2018 22:14:47 -1000
Subject: better organization of locale file; i18n in more view files

---
 ui/app/components/customize-gas-modal/index.js     |  4 +--
 .../dropdowns/components/account-dropdowns.js      |  2 +-
 ui/app/components/modals/account-details-modal.js  |  4 +--
 .../components/modals/account-modal-container.js   |  2 +-
 ui/app/components/modals/buy-options-modal.js      | 14 +++++-----
 ui/app/components/modals/deposit-ether-modal.js    | 29 +++++++++-----------
 .../components/modals/edit-account-name-modal.js   |  4 +--
 .../components/modals/export-private-key-modal.js  | 15 ++++------
 .../modals/hide-token-confirmation-modal.js        |  8 +++---
 ui/app/components/modals/modal.js                  | 10 +++----
 ui/app/components/modals/new-account-modal.js      | 12 ++++----
 .../pending-tx/confirm-deploy-contract.js          | 20 +++++++-------
 ui/app/components/pending-tx/confirm-send-ether.js | 18 ++++++------
 ui/app/components/pending-tx/confirm-send-token.js | 26 +++++++++---------
 ui/app/components/pending-typed-msg.js             |  4 +--
 ui/app/components/send-token/index.js              | 32 +++++++++++-----------
 ui/app/components/send/gas-fee-display-v2.js       |  3 +-
 ui/app/components/send/gas-tooltip.js              |  3 +-
 ui/app/components/send/to-autocomplete.js          |  3 +-
 ui/app/components/signature-request.js             |  4 +--
 20 files changed, 103 insertions(+), 114 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index a5384daaf..ae9ff769d 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -284,11 +284,11 @@ CustomizeGasModal.prototype.render = function () {
         h('div.send-v2__customize-gas__buttons', [
           h('div.send-v2__customize-gas__cancel', {
             onClick: this.props.hideModal,
-          }, [t('cancelButton')]),
+          }, [t('cancelCaps')]),
 
           h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, {
             onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal),
-          }, [t('saveButton')]),
+          }, [t('saveCaps')]),
         ]),
 
       ]),
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 7ecec38d2..76fbb8060 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -129,7 +129,7 @@ class AccountDropdowns extends Component {
                   actions.showEditAccountModal(identity)
                 },
               }, [
-                t('editButton'),
+                t('editCaps'),
               ]),
             ]),
 
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index c1f7a3236..746c6de4c 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -64,12 +64,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('button.btn-clear.account-modal__button', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
-      }, 'View account on Etherscan'),
+      }, t('etherscanView')),
 
       // Holding on redesign for Export Private Key functionality
       h('button.btn-clear.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
-      }, 'Export private key'),
+      }, t('exportPrivateKeyLower')),
 
   ])
 }
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
index c548fb7b3..538edcf13 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -59,7 +59,7 @@ AccountModalContainer.prototype.render = function () {
 
         h('i.fa.fa-angle-left.fa-lg'),
 
-        h('span.account-modal-back__text', ' Back'),
+        h('span.account-modal-back__text', ' ' + t('back')),
 
       ]),
 
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 74a7a847e..60fef7db4 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -56,15 +56,15 @@ BuyOptions.prototype.render = function () {
       }, [
         h('div.buy-modal-content-title', {
           style: {},
-        }, 'Transfers'),
-        h('div', {}, 'How would you like to deposit Ether?'),
+        }, t('transfers')),
+        h('div', {}, t('howToDeposit')),
       ]),
 
       h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
         isTestNetwork
-          ? this.renderModalContentOption(networkName, 'Test Faucet', () => toFaucet(network))
-          : this.renderModalContentOption('Coinbase', 'Deposit with Fiat', () => toCoinbase(address)),
+          ? this.renderModalContentOption(networkName, t('testFaucet'), () => toFaucet(network))
+          : this.renderModalContentOption('Coinbase', t('depositFiat'), () => toCoinbase(address)),
 
         // h('div.buy-modal-content-option', {}, [
         //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
@@ -72,8 +72,8 @@ BuyOptions.prototype.render = function () {
         // ]),,
 
         this.renderModalContentOption(
-          'Direct Deposit',
-          'Deposit from another account',
+          t('directDeposit'),
+          t('depositFromAccount'),
           () => this.goToAccountDetailsModal()
         ),
 
@@ -84,7 +84,7 @@ BuyOptions.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, 'Cancel')),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, t('cancel'))),
     ]),
   ])
 }
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 532d66653..85f640a68 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -6,16 +6,13 @@ const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 const ShapeshiftForm = require('../shapeshift-form')
 
-const DIRECT_DEPOSIT_ROW_TITLE = 'Directly Deposit Ether'
-const DIRECT_DEPOSIT_ROW_TEXT = `If you already have some Ether, the quickest way to get Ether in
-your new wallet by direct deposit.`
-const COINBASE_ROW_TITLE = 'Buy on Coinbase'
-const COINBASE_ROW_TEXT = `Coinbase is the world’s most popular way to buy and sell bitcoin,
-ethereum, and litecoin.`
-const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift'
-const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether
-directly into your MetaMask wallet. No Account Needed.`
-const FAUCET_ROW_TITLE = 'Test Faucet'
+const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
+const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
+const COINBASE_ROW_TITLE = t('buyCoinbase')
+const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
+const SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
+const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
+const FAUCET_ROW_TITLE = t('testFaucet')
 const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
 
 function mapStateToProps (state) {
@@ -110,10 +107,10 @@ DepositEtherModal.prototype.render = function () {
 
     h('div.deposit-ether-modal__header', [
 
-      h('div.deposit-ether-modal__header__title', ['Deposit Ether']),
+      h('div.deposit-ether-modal__header__title', [t('depositEther')]),
 
       h('div.deposit-ether-modal__header__description', [
-        'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.',
+        t('needEtherInWallet'),
       ]),
 
       h('div.deposit-ether-modal__header__close', {
@@ -131,7 +128,7 @@ DepositEtherModal.prototype.render = function () {
         logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
         title: DIRECT_DEPOSIT_ROW_TITLE,
         text: DIRECT_DEPOSIT_ROW_TEXT,
-        buttonLabel: 'View Account',
+        buttonLabel: t('viewAccount'),
         onButtonClick: () => this.goToAccountDetailsModal(),
         hide: buyingWithShapeshift,
       }),
@@ -140,7 +137,7 @@ DepositEtherModal.prototype.render = function () {
         logo: h('i.fa.fa-tint.fa-2x'),
         title: FAUCET_ROW_TITLE,
         text: facuetRowText(networkName),
-        buttonLabel: 'Get Ether',
+        buttonLabel: t('getEther'),
         onButtonClick: () => toFaucet(network),
         hide: !isTestNetwork || buyingWithShapeshift,
       }),
@@ -151,7 +148,7 @@ DepositEtherModal.prototype.render = function () {
         }),
         title: COINBASE_ROW_TITLE,
         text: COINBASE_ROW_TEXT,
-        buttonLabel: 'Continue to Coinbase',
+        buttonLabel: t('continueToCoinbase'),
         onButtonClick: () => toCoinbase(address),
         hide: isTestNetwork || buyingWithShapeshift,
       }),
@@ -162,7 +159,7 @@ DepositEtherModal.prototype.render = function () {
         }),
         title: SHAPESHIFT_ROW_TITLE,
         text: SHAPESHIFT_ROW_TEXT,
-        buttonLabel: 'Buy with Shapeshift',
+        buttonLabel: t('shapeshiftBuy'),
         onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
         hide: isTestNetwork,
         hideButton: buyingWithShapeshift,
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index e2361140d..410fac7ba 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -50,7 +50,7 @@ EditAccountNameModal.prototype.render = function () {
       ]),
 
       h('div.edit-account-name-modal-title', {
-      }, ['Edit Account Name']),
+      }, [t('editAccountName')]),
 
       h('input.edit-account-name-modal-input', {
         placeholder: identity.name,
@@ -69,7 +69,7 @@ EditAccountNameModal.prototype.render = function () {
         },
         disabled: this.state.inputText.length === 0,
       }, [
-        'SAVE',
+        t('saveCaps'),
       ]),
 
     ]),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 422f23f44..0745827cb 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -48,8 +48,8 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo
 
 ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
   return h('span.private-key-password-label', privateKey
-    ? 'This is your private key (click to copy)'
-    : 'Type Your Password'
+    ? t('copyPrivateKey')
+    : t('typePassword')
   )
 }
 
@@ -86,8 +86,8 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
     ),
 
     (privateKey
-      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done')
-      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm')
+      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), t('done'))
+      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm'))
     ),
 
   ])
@@ -120,7 +120,7 @@ ExportPrivateKeyModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('span.modal-body-title', 'Show Private Keys'),
+      h('span.modal-body-title', t('showPrivateKeys')),
 
       h('div.private-key-password', {}, [
         this.renderPasswordLabel(privateKey),
@@ -130,10 +130,7 @@ ExportPrivateKeyModal.prototype.render = function () {
         !warning ? null : h('span.private-key-password-error', warning),
       ]),
 
-      h('div.private-key-password-warning', `Warning: Never disclose this key.
-        Anyone with your private keys can take steal any assets held in your
-        account.`
-      ),
+      h('div.private-key-password-warning', t('privateKeyWarning')),
 
       this.renderButtons(privateKey, this.state.password, address, hideModal),
 
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index 56c7ba299..55f1695af 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -41,7 +41,7 @@ HideTokenConfirmationModal.prototype.render = function () {
     h('div.hide-token-confirmation__container', {
     }, [
       h('div.hide-token-confirmation__title', {}, [
-        'Hide Token?',
+        t('hideTokenPrompt'),
       ]),
 
       h(Identicon, {
@@ -54,19 +54,19 @@ HideTokenConfirmationModal.prototype.render = function () {
       h('div.hide-token-confirmation__symbol', {}, symbol),
 
       h('div.hide-token-confirmation__copy', {}, [
-        'You can add this token back in the future by going go to “Add token” in your accounts options menu.',
+        t('readdToken'),
       ]),
 
       h('div.hide-token-confirmation__buttons', {}, [
         h('button.btn-cancel.hide-token-confirmation__button', {
           onClick: () => hideModal(),
         }, [
-          'CANCEL',
+          t('cancelCaps'),
         ]),
         h('button.btn-clear.hide-token-confirmation__button', {
           onClick: () => hideToken(address),
         }, [
-          'HIDE',
+          t('hideCaps'),
         ]),
       ]),
     ]),
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index afb2a2175..e4e644d40 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -169,9 +169,8 @@ const MODALS = {
   BETA_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {
-        header: 'Welcome to the New UI (Beta)',
-        message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens,
-        and let us know if you have any issues.`,
+        header: t('uiWelcome'),
+        message: t('uiWelcomeMessage'),
       }),
     ],
     mobileModalStyle: {
@@ -187,9 +186,8 @@ const MODALS = {
   OLD_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {
-        header: 'Old UI',
-        message: `You have returned to the old UI. You can switch back to the New UI through the option in the top
-        right dropdown menu.`,
+        header: t('oldUI'),
+        message: t('oldUIMessage'),
       }),
     ],
     mobileModalStyle: {
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index fc1fd413d..4fdfbd745 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -22,7 +22,7 @@ class NewAccountModal extends Component {
       h('div.new-account-modal-wrapper', {
       }, [
         h('div.new-account-modal-header', {}, [
-          'New Account',
+          t('newAccount'),
         ]),
 
         h('div.modal-close-x', {
@@ -30,19 +30,19 @@ class NewAccountModal extends Component {
         }),
 
         h('div.new-account-modal-content', {}, [
-          'Account Name',
+          t('accountName'),
         ]),
 
         h('div.new-account-input-wrapper', {}, [
           h('input.new-account-input', {
             value: this.state.newAccountName,
-            placeholder: 'E.g. My new account',
+            placeholder: t('sampleAccountName'),
             onChange: event => this.setState({ newAccountName: event.target.value }),
           }, []),
         ]),
 
         h('div.new-account-modal-content.after-input', {}, [
-          'or',
+          t('or'),
         ]),
 
         h('div.new-account-modal-content.after-input.pointer', {
@@ -50,13 +50,13 @@ class NewAccountModal extends Component {
             this.props.hideModal()
             this.props.showImportPage()
           },
-        }, 'Import an account'),
+        }, t('importAnAccount')),
 
         h('div.new-account-modal-content.button', {}, [
           h('button.btn-clear', {
             onClick: () => this.props.createAccount(newAccountName),
           }, [
-            'SAVE',
+            t('saveCaps'),
           ]),
         ]),
       ]),
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index ae6c6ef7b..0d8b2721f 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -200,7 +200,7 @@ ConfirmDeployContract.prototype.renderGasFee = function () {
 
   return (
     h('section.flex-row.flex-center.confirm-screen-row', [
-      h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
+      h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
       h('div.confirm-screen-section-column', [
         h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
 
@@ -239,8 +239,8 @@ ConfirmDeployContract.prototype.renderTotalPlusGas = function () {
   return (
     h('section.flex-row.flex-center.confirm-screen-total-box ', [
       h('div.confirm-screen-section-column', [
-        h('span.confirm-screen-label', [ 'Total ' ]),
-        h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+        h('span.confirm-screen-label', [ t('total') + ' ' ]),
+        h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
       ]),
 
       h('div.confirm-screen-section-column', [
@@ -274,7 +274,7 @@ ConfirmDeployContract.prototype.render = function () {
           h('button.confirm-screen-back-button', {
             onClick: () => backToAccountDetail(selectedAddress),
           }, 'BACK'),
-          h('div.confirm-screen-title', 'Confirm Contract'),
+          h('div.confirm-screen-title', t('confirmContract')),
           h('div.confirm-screen-header-tip'),
         ]),
         h('div.flex-row.flex-center.confirm-screen-identicons', [
@@ -292,7 +292,7 @@ ConfirmDeployContract.prototype.render = function () {
           h('i.fa.fa-arrow-right.fa-lg'),
           h('div.confirm-screen-account-wrapper', [
             h('i.fa.fa-file-text-o'),
-            h('span.confirm-screen-account-name', 'New Contract'),
+            h('span.confirm-screen-account-name', t('newContract')),
             h('span.confirm-screen-account-number', ' '),
           ]),
         ]),
@@ -310,7 +310,7 @@ ConfirmDeployContract.prototype.render = function () {
 
         h('div.confirm-screen-rows', [
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', fromName),
               h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@@ -318,9 +318,9 @@ ConfirmDeployContract.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
             h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', 'New Contract'),
+              h('div.confirm-screen-row-info', t('newContract')),
             ]),
           ]),
 
@@ -337,10 +337,10 @@ ConfirmDeployContract.prototype.render = function () {
         // Cancel Button
         h('div.cancel.btn-light.confirm-screen-cancel-button', {
           onClick: (event) => this.cancel(event, txMeta),
-        }, 'CANCEL'),
+        }, t('cancelCaps')),
 
         // Accept Button
-        h('button.confirm-screen-confirm-button', ['CONFIRM']),
+        h('button.confirm-screen-confirm-button', [t('confirmCaps')]),
 
       ]),
     ])
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 652300c94..7608e02ad 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -165,7 +165,7 @@ ConfirmSendEther.prototype.getData = function () {
     },
     to: {
       address: txParams.to,
-      name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient',
+      name: identities[txParams.to] ? identities[txParams.to].name : t('newRecipient'),
     },
     memo: txParams.memo || '',
     gasFeeInFIAT,
@@ -268,7 +268,7 @@ ConfirmSendEther.prototype.render = function () {
 
         h('div.confirm-screen-rows', [
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', fromName),
               h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@@ -276,7 +276,7 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', toName),
               h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
@@ -284,7 +284,7 @@ ConfirmSendEther.prototype.render = function () {
           ]),
 
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
 
@@ -295,8 +295,8 @@ ConfirmSendEther.prototype.render = function () {
 
           h('section.flex-row.flex-center.confirm-screen-total-box ', [
             h('div.confirm-screen-section-column', [
-              h('span.confirm-screen-label', [ 'Total ' ]),
-              h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+              h('span.confirm-screen-label', [ t('total') + ' ' ]),
+              h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
             ]),
 
             h('div.confirm-screen-section-column', [
@@ -396,10 +396,10 @@ ConfirmSendEther.prototype.render = function () {
             clearSend()
             this.cancel(event, txMeta)
           },
-        }, 'CANCEL'),
+        }, t('cancelCaps')),
 
         // Accept Button
-        h('button.confirm-screen-confirm-button', ['CONFIRM']),
+        h('button.confirm-screen-confirm-button', [t('confirmCaps')]),
       ]),
     ])
   )
@@ -414,7 +414,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
   if (valid && this.verifyGasParams()) {
     this.props.sendTransaction(txMeta, event)
   } else {
-    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+    this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
     this.setState({ submitting: false })
   }
 }
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index ad489c3e9..88644d57a 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -133,7 +133,7 @@ ConfirmSendToken.prototype.getAmount = function () {
       ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2)
       : null,
     token: typeof value === 'undefined'
-      ? 'Unknown'
+      ? t('unknown')
       : +sendTokenAmount.toFixed(decimals),
   }
 
@@ -204,7 +204,7 @@ ConfirmSendToken.prototype.getData = function () {
     },
     to: {
       address: value,
-      name: identities[value] ? identities[value].name : 'New Recipient',
+      name: identities[value] ? identities[value].name : t('newRecipient'),
     },
     memo: txParams.memo || '',
   }
@@ -244,7 +244,7 @@ ConfirmSendToken.prototype.renderGasFee = function () {
 
   return (
     h('section.flex-row.flex-center.confirm-screen-row', [
-      h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
+      h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
       h('div.confirm-screen-section-column', [
         h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`),
 
@@ -266,8 +266,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
     ? (
       h('section.flex-row.flex-center.confirm-screen-total-box ', [
         h('div.confirm-screen-section-column', [
-          h('span.confirm-screen-label', [ 'Total ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+          h('span.confirm-screen-label', [ t('total') + ' ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
         ]),
 
         h('div.confirm-screen-section-column', [
@@ -279,8 +279,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
     : (
       h('section.flex-row.flex-center.confirm-screen-total-box ', [
         h('div.confirm-screen-section-column', [
-          h('span.confirm-screen-label', [ 'Total ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+          h('span.confirm-screen-label', [ t('total') + ' ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
         ]),
 
         h('div.confirm-screen-section-column', [
@@ -316,7 +316,7 @@ ConfirmSendToken.prototype.render = function () {
         h('h3.flex-center.confirm-screen-header', [
           h('button.btn-clear.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
-          }, 'EDIT'),
+          }, t('editCaps')),
           h('div.confirm-screen-title', 'Confirm Transaction'),
           h('div.confirm-screen-header-tip'),
         ]),
@@ -359,7 +359,7 @@ ConfirmSendToken.prototype.render = function () {
 
         h('div.confirm-screen-rows', [
           h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', fromName),
               h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
@@ -367,7 +367,7 @@ ConfirmSendToken.prototype.render = function () {
           ]),
 
           toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
             h('div.confirm-screen-section-column', [
               h('div.confirm-screen-row-info', toName),
               h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
@@ -387,10 +387,10 @@ ConfirmSendToken.prototype.render = function () {
         // Cancel Button
         h('div.cancel.btn-light.confirm-screen-cancel-button', {
           onClick: (event) => this.cancel(event, txMeta),
-        }, 'CANCEL'),
+        }, t('cancelCaps')),
 
         // Accept Button
-        h('button.confirm-screen-confirm-button', ['CONFIRM']),
+        h('button.confirm-screen-confirm-button', [t('confirmCaps')]),
       ]),
 
 
@@ -407,7 +407,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
   if (valid && this.verifyGasParams()) {
     this.props.sendTransaction(txMeta, event)
   } else {
-    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+    this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
     this.setState({ submitting: false })
   }
 }
diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js
index 73702d0f8..f0f846027 100644
--- a/ui/app/components/pending-typed-msg.js
+++ b/ui/app/components/pending-typed-msg.js
@@ -35,10 +35,10 @@ PendingMsg.prototype.render = function () {
       h('.flex-row.flex-space-around', [
         h('button', {
           onClick: state.cancelTypedMessage,
-        }, t('cancelButton')),
+        }, t('cancelCaps')),
         h('button', {
           onClick: state.signTypedMessage,
-        }, t('signButton')),
+        }, t('signCaps')),
       ]),
     ])
 
diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
index 99d078251..a40664977 100644
--- a/ui/app/components/send-token/index.js
+++ b/ui/app/components/send-token/index.js
@@ -126,14 +126,14 @@ SendTokenScreen.prototype.validate = function () {
   const amount = Number(stringAmount)
 
   const errors = {
-    to: !to ? 'Required' : null,
-    amount: !amount ? 'Required' : null,
-    gasPrice: !gasPrice ? 'Gas Price Required' : null,
-    gasLimit: !gasLimit ? 'Gas Limit Required' : null,
+    to: !to ? t('required') : null,
+    amount: !amount ? t('required') : null,
+    gasPrice: !gasPrice ? t('gasPriceRequired') : null,
+    gasLimit: !gasLimit ? t('gasLimitRequired') : null,
   }
 
   if (to && !isValidAddress(to)) {
-    errors.to = 'Invalid address'
+    errors.to = t('invalidAddress')
   }
 
   const isValid = Object.entries(errors).every(([key, value]) => value === null)
@@ -233,11 +233,11 @@ SendTokenScreen.prototype.renderToAddressInput = function () {
       'send-screen-input-wrapper--error': errorMessage,
     }),
   }, [
-    h('div', ['To:']),
+    h('div', [t('toSpecific')]),
     h('input.large-input.send-screen-input', {
       name: 'address',
       list: 'addresses',
-      placeholder: 'Address',
+      placeholder: t('address'),
       value: to,
       onChange: e => this.setState({
         to: e.target.value,
@@ -355,8 +355,8 @@ SendTokenScreen.prototype.renderGasInput = function () {
     }),
 
     h('div.send-screen-gas-labels', {}, [
-      h('span', [ h('i.fa.fa-bolt'), 'Gas fee:']),
-      h('span', ['What\'s this?']),
+      h('span', [ h('i.fa.fa-bolt'), t('gasFeeSpecific')]),
+      h('span', [t('whatsThis')]),
     ]),
     h('div.large-input.send-screen-gas-input', [
       h(GasFeeDisplay, {
@@ -370,7 +370,7 @@ SendTokenScreen.prototype.renderGasInput = function () {
       h(
         'div.send-screen-gas-input-customize',
         { onClick: () => this.setState({ isGasTooltipOpen: !isGasTooltipOpen }) },
-        ['Customize']
+        [t('customize')]
       ),
     ]),
     h('div.send-screen-input-wrapper__error-message', [
@@ -381,7 +381,7 @@ SendTokenScreen.prototype.renderGasInput = function () {
 
 SendTokenScreen.prototype.renderMemoInput = function () {
   return h('div.send-screen-input-wrapper', [
-    h('div', {}, ['Transaction memo (optional)']),
+    h('div', {}, [t('transactionMemo')]),
     h(
       'input.large-input.send-screen-input',
       { onChange: e => this.setState({ memo: e.target.value }) }
@@ -397,10 +397,10 @@ SendTokenScreen.prototype.renderButtons = function () {
     h('button.send-token__button-next.btn-secondary', {
       className: !isValid && 'send-screen__send-button__disabled',
       onClick: () => isValid && this.submit(),
-    }, ['Next']),
+    }, [t('next')]),
     h('button.send-token__button-cancel.btn-tertiary', {
       onClick: () => backToAccountDetail(selectedAddress),
-    }, ['Cancel']),
+    }, [t('cancel')]),
   ])
 }
 
@@ -417,9 +417,9 @@ SendTokenScreen.prototype.render = function () {
         diameter: 75,
         address: selectedTokenAddress,
       }),
-      h('div.send-token__title', ['Send Tokens']),
-      h('div.send-token__description', ['Send Tokens to anyone with an Ethereum account']),
-      h('div.send-token__balance-text', ['Your Token Balance is:']),
+      h('div.send-token__title', [t('sendTokens')]),
+      h('div.send-token__description', [t('sendTokensAnywhere')]),
+      h('div.send-token__balance-text', [t('tokenBalance')]),
       h('div.send-token__token-balance', [
         h(TokenBalance, { token: selectedToken, balanceOnly: true }),
       ]),
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 0c4c3f7a9..edaa297b9 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -30,7 +30,7 @@ GasFeeDisplay.prototype.render = function () {
         convertedPrefix: '$',
         readOnly: true,
       })
-      : h('div.currency-display', 'Loading...'),
+      : h('div.currency-display', t('loading')),
 
     h('button.send-v2__sliders-icon-container', {
       onClick,
@@ -41,4 +41,3 @@ GasFeeDisplay.prototype.render = function () {
 
   ])
 }
-
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
index 46aff3499..da2a53c9e 100644
--- a/ui/app/components/send/gas-tooltip.js
+++ b/ui/app/components/send/gas-tooltip.js
@@ -81,7 +81,7 @@ GasTooltip.prototype.render = function () {
             'marginTop': '81px',
           },
         }, [
-          h('span.gas-tooltip-label', {}, ['Gas Limit']),
+          h('span.gas-tooltip-label', {}, [t('gasLimit')]),
           h('i.fa.fa-info-circle'),
         ]),
         h(InputNumber, {
@@ -97,4 +97,3 @@ GasTooltip.prototype.render = function () {
     ]),
   ])
 }
-
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index e0cdd0a58..85e7bfa0e 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -92,7 +92,7 @@ ToAutoComplete.prototype.render = function () {
   return h('div.send-v2__to-autocomplete', {}, [
 
     h('input.send-v2__to-autocomplete__input', {
-      placeholder: 'Recipient Address',
+      placeholder: t('recipientAddress'),
       className: inError ? `send-v2__error-border` : '',
       value: to,
       onChange: event => onChange(event.target.value),
@@ -111,4 +111,3 @@ ToAutoComplete.prototype.render = function () {
 
   ])
 }
-
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 459d6a1a2..8003f8b1d 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -224,10 +224,10 @@ SignatureRequest.prototype.renderFooter = function () {
   return h('div.request-signature__footer', [
     h('button.request-signature__footer__cancel-button', {
       onClick: cancel,
-    }, t('cancelButton')),
+    }, t('cancelCaps')),
     h('button.request-signature__footer__sign-button', {
       onClick: sign,
-    }, t('signButton')),
+    }, t('signCaps')),
   ])
 }
 
-- 
cgit v1.2.3


From 7da52c599784130a5f7b6737f5b017bd3a95c1ed Mon Sep 17 00:00:00 2001
From: Nick Doiron <ndoiron@mapmeld.com>
Date: Wed, 24 Jan 2018 10:10:28 -1000
Subject: separate out cross-browser i18n for extensions

---
 ui/app/components/account-menu/index.js                     | 1 +
 ui/app/components/customize-gas-modal/index.js              | 1 +
 ui/app/components/dropdowns/components/account-dropdowns.js | 1 +
 ui/app/components/dropdowns/network-dropdown.js             | 1 +
 ui/app/components/dropdowns/token-menu-dropdown.js          | 1 +
 ui/app/components/modals/account-details-modal.js           | 1 +
 ui/app/components/modals/account-modal-container.js         | 1 +
 ui/app/components/modals/buy-options-modal.js               | 1 +
 ui/app/components/modals/deposit-ether-modal.js             | 1 +
 ui/app/components/modals/edit-account-name-modal.js         | 1 +
 ui/app/components/modals/export-private-key-modal.js        | 1 +
 ui/app/components/modals/hide-token-confirmation-modal.js   | 1 +
 ui/app/components/modals/modal.js                           | 1 +
 ui/app/components/modals/new-account-modal.js               | 1 +
 ui/app/components/pending-tx/confirm-deploy-contract.js     | 1 +
 ui/app/components/pending-tx/confirm-send-ether.js          | 1 +
 ui/app/components/pending-tx/confirm-send-token.js          | 1 +
 17 files changed, 17 insertions(+)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index aec00ff6b..9c7b6b15a 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -6,6 +6,7 @@ const actions = require('../../actions')
 const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
 const Identicon = require('../identicon')
 const { formatBalance } = require('../../util')
+const t = require('../../../i18n')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
 
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index ae9ff769d..1c6036867 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
+const t = require('../../../i18n')
 const GasModalCard = require('./gas-modal-card')
 
 const ethUtil = require('ethereumjs-util')
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 76fbb8060..dfa5e5fac 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -10,6 +10,7 @@ const Identicon = require('../../identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
 const { formatBalance } = require('../../../util')
+const t = require('../../../../i18n')
 
 class AccountDropdowns extends Component {
   constructor (props) {
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 02773fb46..0e16048d5 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -6,6 +6,7 @@ const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 const NetworkDropdownIcon = require('./components/network-dropdown-icon')
+const t = require('../../../i18n')
 const R = require('ramda')
 
 // classes from nodes of the toggle element.
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index 3dfcec5a8..a4f93b505 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
+const t = require('../../../i18n')
 
 module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)
 
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 746c6de4c..17760dc1a 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -8,6 +8,7 @@ const { getSelectedIdentity } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
 const EditableLabel = require('../editable-label')
+const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
index 538edcf13..08540aa76 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -5,6 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedIdentity } = require('../../selectors')
 const Identicon = require('../identicon')
+const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 60fef7db4..7eb73c3a6 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
+const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 85f640a68..e91b43841 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -5,6 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 const ShapeshiftForm = require('../shapeshift-form')
+const t = require('../../../i18n')
 
 const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
 const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 410fac7ba..611def005 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedAccount } = require('../../selectors')
+const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 0745827cb..017177cfd 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -7,6 +7,7 @@ const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
+const t = require('../../../i18n')
 const copyToClipboard = require('copy-to-clipboard')
 
 function mapStateToProps (state) {
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index 55f1695af..98b1e2d03 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Identicon = require('../identicon')
+const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index e4e644d40..ea6ac5135 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -6,6 +6,7 @@ const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
 const isMobileView = require('../../../lib/is-mobile-view')
 const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
+const t = require('../../../i18n')
 
 // Modal Components
 const BuyOptions = require('./buy-options-modal')
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 4fdfbd745..35f4764a6 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const { connect } = require('react-redux')
 const actions = require('../../actions')
+const t = require('../../../i18n')
 
 class NewAccountModal extends Component {
   constructor (props) {
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index 0d8b2721f..e6972c541 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -9,6 +9,7 @@ const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil } = require('../../conversion-util')
+const t = require('../../../i18n')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 7608e02ad..52693b4f6 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -9,6 +9,7 @@ const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil, addCurrencies } = require('../../conversion-util')
+const t = require('../../../i18n')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 88644d57a..14523461f 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -6,6 +6,7 @@ const tokenAbi = require('human-standard-token-abi')
 const abiDecoder = require('abi-decoder')
 abiDecoder.addABI(tokenAbi)
 const actions = require('../../actions')
+const t = require('../../../i18n')
 const clone = require('clone')
 const Identicon = require('../identicon')
 const ethUtil = require('ethereumjs-util')
-- 
cgit v1.2.3


From 9c133aaab30decce16a1bf4120071d4614f99bc8 Mon Sep 17 00:00:00 2001
From: Nick Doiron <ndoiron@mapmeld.com>
Date: Wed, 24 Jan 2018 19:41:29 -1000
Subject: get t imported in all files currently using i18n

---
 ui/app/components/account-dropdowns.js            | 1 +
 ui/app/components/account-export.js               | 1 +
 ui/app/components/buy-button-subview.js           | 1 +
 ui/app/components/coinbase-form.js                | 1 +
 ui/app/components/copyButton.js                   | 1 +
 ui/app/components/copyable.js                     | 1 +
 ui/app/components/ens-input.js                    | 1 +
 ui/app/components/hex-as-decimal-input.js         | 1 +
 ui/app/components/network.js                      | 1 +
 ui/app/components/notice.js                       | 1 +
 ui/app/components/pending-msg-details.js          | 1 +
 ui/app/components/pending-msg.js                  | 1 +
 ui/app/components/pending-personal-msg-details.js | 1 +
 ui/app/components/pending-typed-msg-details.js    | 1 +
 ui/app/components/pending-typed-msg.js            | 1 +
 ui/app/components/send-token/index.js             | 1 +
 ui/app/components/send/gas-fee-display-v2.js      | 1 +
 ui/app/components/send/gas-tooltip.js             | 1 +
 ui/app/components/send/to-autocomplete.js         | 1 +
 ui/app/components/shapeshift-form.js              | 1 +
 ui/app/components/shift-list-item.js              | 1 +
 ui/app/components/signature-request.js            | 1 +
 ui/app/components/token-list.js                   | 1 +
 ui/app/components/transaction-list-item.js        | 1 +
 ui/app/components/transaction-list.js             | 1 +
 ui/app/components/tx-list-item.js                 | 1 +
 ui/app/components/tx-list.js                      | 1 +
 ui/app/components/tx-view.js                      | 1 +
 ui/app/components/wallet-view.js                  | 1 +
 29 files changed, 29 insertions(+)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 3e5805c0e..ede40d3f2 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -9,6 +9,7 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('./identicon')
 const ethUtil = require('ethereumjs-util')
 const copyToClipboard = require('copy-to-clipboard')
+const t = require('../../i18n')
 
 class AccountDropdowns extends Component {
   constructor (props) {
diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 346872a97..25f36da58 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -6,6 +6,7 @@ const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const ethUtil = require('ethereumjs-util')
 const connect = require('react-redux').connect
+const t = require('../../i18n')
 
 module.exports = connect(mapStateToProps)(ExportAccountView)
 
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 76da4fc9d..6f2c74b6d 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -9,6 +9,7 @@ const Loading = require('./loading')
 const AccountPanel = require('./account-panel')
 const RadioList = require('./custom-radio-list')
 const networkNames = require('../../../app/scripts/config.js').networkNames
+const t = require('../../i18n')
 
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js
index 6532cb3bf..e442b43d5 100644
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../actions')
+const t = require('../../i18n')
 
 module.exports = connect(mapStateToProps)(CoinbaseForm)
 
diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js
index 5d5be8feb..355f78d45 100644
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/copyButton.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const copyToClipboard = require('copy-to-clipboard')
+const t = require('../../i18n')
 
 const Tooltip = require('./tooltip')
 
diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js
index 690e44153..fca7d3863 100644
--- a/ui/app/components/copyable.js
+++ b/ui/app/components/copyable.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 
 const Tooltip = require('./tooltip')
 const copyToClipboard = require('copy-to-clipboard')
+const t = require('../../i18n')
 
 module.exports = Copyable
 
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index 3e7a23369..add67ea35 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -8,6 +8,7 @@ const ENS = require('ethjs-ens')
 const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
+const t = require('../../i18n')
 
 
 module.exports = EnsInput
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index 07432a1f2..992d8c8cd 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const extend = require('xtend')
+const t = require('../../i18n')
 
 module.exports = HexAsDecimalInput
 
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 6cb1ff53d..f3df2242a 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const classnames = require('classnames')
 const inherits = require('util').inherits
 const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
+const t = require('../../i18n')
 
 module.exports = Network
 
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index 5bda329ed..390639297 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -4,6 +4,7 @@ const h = require('react-hyperscript')
 const ReactMarkdown = require('react-markdown')
 const linker = require('extension-link-enabler')
 const findDOMNode = require('react-dom').findDOMNode
+const t = require('../../i18n')
 
 module.exports = Notice
 
diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js
index 3ea063c3c..b66657f3b 100644
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const t = require('../../i18n')
 
 const AccountPanel = require('./account-panel')
 
diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js
index 236849c18..dc406b955 100644
--- a/ui/app/components/pending-msg.js
+++ b/ui/app/components/pending-msg.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-msg-details')
+const t = require('../../i18n')
 
 module.exports = PendingMsg
 
diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js
index 30c475347..d21689f86 100644
--- a/ui/app/components/pending-personal-msg-details.js
+++ b/ui/app/components/pending-personal-msg-details.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const t = require('../../i18n')
 
 const AccountPanel = require('./account-panel')
 const BinaryRenderer = require('./binary-renderer')
diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js
index a3381174d..9708ed1d7 100644
--- a/ui/app/components/pending-typed-msg-details.js
+++ b/ui/app/components/pending-typed-msg-details.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 
 const AccountPanel = require('./account-panel')
 const TypedMessageRenderer = require('./typed-message-renderer')
+const t = require('../../i18n')
 
 module.exports = PendingMsgDetails
 
diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js
index f0f846027..3d473f47d 100644
--- a/ui/app/components/pending-typed-msg.js
+++ b/ui/app/components/pending-typed-msg.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-typed-msg-details')
+const t = require('../../i18n')
 
 module.exports = PendingMsg
 
diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
index a40664977..2ad7c9dd0 100644
--- a/ui/app/components/send-token/index.js
+++ b/ui/app/components/send-token/index.js
@@ -7,6 +7,7 @@ const inherits = require('util').inherits
 const actions = require('../../actions')
 const selectors = require('../../selectors')
 const { isValidAddress, allNull } = require('../../util')
+const t = require('../../../i18n')
 
 // const BalanceComponent = require('./balance-component')
 const Identicon = require('../identicon')
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index edaa297b9..0c6f76303 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const CurrencyDisplay = require('./currency-display')
+const t = require('../../../i18n')
 
 module.exports = GasFeeDisplay
 
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
index da2a53c9e..d925d3ed8 100644
--- a/ui/app/components/send/gas-tooltip.js
+++ b/ui/app/components/send/gas-tooltip.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const InputNumber = require('../input-number.js')
+const t = require('../../../i18n')
 
 module.exports = GasTooltip
 
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
index 85e7bfa0e..72074229e 100644
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const AccountListItem = require('./account-list-item')
+const t = require('../../../i18n')
 
 module.exports = ToAutoComplete
 
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 773ff227c..329feb38f 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -7,6 +7,7 @@ const { qrcode } = require('qrcode-npm')
 const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions')
 const { isValidAddress } = require('../util')
 const SimpleDropdown = require('./dropdowns/simple-dropdown')
+const t = require('../../i18n')
 
 function mapStateToProps (state) {
   const {
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 6e5be641f..21d41a06c 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -6,6 +6,7 @@ const vreme = new (require('vreme'))()
 const explorerLink = require('etherscan-link').createExplorerLink
 const actions = require('../actions')
 const addressSummary = require('../util').addressSummary
+const t = require('../../i18n')
 
 const CopyButton = require('./copyButton')
 const EthBalance = require('./eth-balance')
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 8003f8b1d..d0e568bca 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -9,6 +9,7 @@ const classnames = require('classnames')
 const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
 
 const actions = require('../actions')
+const t = require('../../i18n')
 const { conversionUtil } = require('../conversion-util')
 
 const {
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
index a25566e64..01529aeda 100644
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@@ -5,6 +5,7 @@ const TokenTracker = require('eth-token-tracker')
 const TokenCell = require('./token-cell.js')
 const connect = require('react-redux').connect
 const selectors = require('../selectors')
+const t = require('../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 10d4236cb..6baf60141 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -11,6 +11,7 @@ const vreme = new (require('vreme'))()
 const Tooltip = require('./tooltip')
 const numberToBN = require('number-to-bn')
 const actions = require('../actions')
+const t = require('../../i18n')
 
 const TransactionIcon = require('./transaction-list-item-icon')
 const ShiftListItem = require('./shift-list-item')
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index cb3f8097b..07f7a06ae 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 
 const TransactionListItem = require('./transaction-list-item')
+const t = require('../../i18n')
 
 module.exports = TransactionList
 
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index d53277925..7a38096b6 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -13,6 +13,7 @@ const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
 const { calcTokenAmount } = require('../token-util')
 
 const { getCurrentCurrency } = require('../selectors')
+const t = require('../../i18n')
 
 module.exports = connect(mapStateToProps)(TxListItem)
 
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 6076ab5d3..8343ec46b 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -10,6 +10,7 @@ const { formatDate } = require('../util')
 const { showConfTxPage } = require('../actions')
 const classnames = require('classnames')
 const { tokenInfoGetter } = require('../token-util')
+const t = require('../../i18n')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList)
 
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 423234d4f..adc9b8e94 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -5,6 +5,7 @@ const ethUtil = require('ethereumjs-util')
 const inherits = require('util').inherits
 const actions = require('../actions')
 const selectors = require('../selectors')
+const t = require('../../i18n')
 
 const BalanceComponent = require('./balance-component')
 const TxList = require('./tx-list')
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 3d9c01c6e..60a780fc6 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -9,6 +9,7 @@ const actions = require('../actions')
 const BalanceComponent = require('./balance-component')
 const TokenList = require('./token-list')
 const selectors = require('../selectors')
+const t = require('../../i18n')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
 
-- 
cgit v1.2.3


From abfa74f09a0119345165a32090d88a1d95df6c80 Mon Sep 17 00:00:00 2001
From: Nick Doiron <ndoiron@mapmeld.com>
Date: Mon, 29 Jan 2018 15:29:01 -0500
Subject: complete i18n across new UI

---
 ui/app/components/account-dropdowns.js                     |  6 +++---
 ui/app/components/account-export.js                        |  8 ++++----
 ui/app/components/account-menu/index.js                    |  2 +-
 ui/app/components/bn-as-decimal-input.js                   |  9 +++++----
 ui/app/components/buy-button-subview.js                    |  6 +++---
 ui/app/components/customize-gas-modal/index.js             |  8 ++++----
 .../components/dropdowns/components/account-dropdowns.js   |  8 ++++----
 ui/app/components/hex-as-decimal-input.js                  |  6 +++---
 ui/app/components/modals/account-details-modal.js          |  2 +-
 ui/app/components/modals/deposit-ether-modal.js            |  4 +++-
 ui/app/components/modals/edit-account-name-modal.js        |  4 ++--
 ui/app/components/modals/hide-token-confirmation-modal.js  |  8 ++++----
 ui/app/components/modals/new-account-modal.js              |  6 +++---
 ui/app/components/pending-msg-details.js                   |  2 +-
 ui/app/components/pending-personal-msg-details.js          |  2 +-
 ui/app/components/pending-tx/confirm-deploy-contract.js    | 12 ++++++------
 ui/app/components/pending-tx/confirm-send-ether.js         |  6 +++---
 ui/app/components/pending-tx/confirm-send-token.js         | 14 +++++++-------
 ui/app/components/pending-typed-msg-details.js             |  2 +-
 ui/app/components/pending-typed-msg.js                     |  8 ++++----
 ui/app/components/send-token/index.js                      |  6 +++---
 ui/app/components/shapeshift-form.js                       |  2 +-
 ui/app/components/shift-list-item.js                       |  6 +++---
 ui/app/components/signature-request.js                     |  8 ++++----
 ui/app/components/tx-view.js                               |  8 ++++----
 ui/app/components/wallet-view.js                           |  4 ++--
 26 files changed, 80 insertions(+), 77 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index ede40d3f2..e92da8947 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -80,7 +80,7 @@ class AccountDropdowns extends Component {
     try { // Sometimes keyrings aren't loaded yet:
       const type = keyring.type
       const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label', t('looseCaps')) : null
+      return isLoose ? h('.keyring-label.allcaps', t('loose')) : null
     } catch (e) { return }
   }
 
@@ -155,7 +155,7 @@ class AccountDropdowns extends Component {
                 fontSize: '24px',
                 marginBottom: '5px',
               },
-            }, 'Import Account'),
+            }, t('importAccount')),
           ]
         ),
       ]
@@ -205,7 +205,7 @@ class AccountDropdowns extends Component {
               actions.showQrView(selected, identity ? identity.name : '')
             },
           },
-          t('qrCode'),
+          t('showQRCode'),
         ),
         h(
           DropdownMenuItem,
diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 25f36da58..5637bc8d0 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -54,7 +54,7 @@ ExportAccountView.prototype.render = function () {
             h('p.error', warning),
             h('input#exportAccount.sizing-input', {
               type: 'password',
-              placeholder: t('confirmPasswordSmall'),
+              placeholder: t('confirmPassword').toLowerCase(),
               onKeyPress: this.onExportKeyPress.bind(this),
               style: {
                 position: 'relative',
@@ -99,7 +99,7 @@ ExportAccountView.prototype.render = function () {
         margin: '0 20px',
       },
     }, [
-      h('label', 'Your private key (click to copy):'),
+      h('label', t('copyPrivateKey') + ':'),
       h('p.error.cursor-pointer', {
         style: {
           textOverflow: 'ellipsis',
@@ -113,13 +113,13 @@ ExportAccountView.prototype.render = function () {
       }, plainKey),
       h('button', {
         onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-      }, 'Done'),
+      }, t('done')),
       h('button', {
         style: {
           marginLeft: '10px',
         },
         onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey),
-      }, 'Save as File'),
+      }, t('saveAsFile')),
     ])
   }
 }
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index 9c7b6b15a..d9cf8cdce 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -156,6 +156,6 @@ AccountMenu.prototype.indicateIfLoose = function (keyring) {
   try { // Sometimes keyrings aren't loaded yet:
     const type = keyring.type
     const isLoose = type !== 'HD Key Tree'
-    return isLoose ? h('.keyring-label', t('importedCaps')) : null
+    return isLoose ? h('.keyring-label.allcaps', t('imported')) : null
   } catch (e) { return }
 }
diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
index 22e37602e..70701b039 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const extend = require('xtend')
+const t = require('../../i18n')
 
 module.exports = BnAsDecimalInput
 
@@ -136,13 +137,13 @@ BnAsDecimalInput.prototype.constructWarning = function () {
   let message = name ? name + ' ' : ''
 
   if (min && max) {
-    message += `must be greater than or equal to  ${newMin} ${suffix} and less than or equal to ${newMax} ${suffix}.`
+    message += t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`])
   } else if (min) {
-    message += `must be greater than or equal to ${newMin} ${suffix}.`
+    message += t('greaterThanMin', [`${newMin} ${suffix}`])
   } else if (max) {
-    message += `must be less than or equal to ${newMax} ${suffix}.`
+    message += t('lessThanMax', [`${newMax} ${suffix}`])
   } else {
-    message += 'Invalid input.'
+    message += t('invalidInput')
   }
 
   return message
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 6f2c74b6d..1e277a94b 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -144,7 +144,7 @@ BuyButtonSubview.prototype.primarySubview = function () {
     case '4':
     case '42':
       const networkName = networkNames[network]
-      const label = `${networkName} Test Faucet`
+      const label = `${networkName} ${t('testFaucet')}`
       return (
         h('div.flex-column', {
           style: {
@@ -204,8 +204,8 @@ BuyButtonSubview.prototype.mainnetSubview = function () {
             'ShapeShift',
           ],
           subtext: {
-            'Coinbase': 'Crypto/FIAT (USA only)',
-            'ShapeShift': 'Crypto',
+            'Coinbase': `${t('crypto')}/${t('fiat')} (${t('usaOnly')})`,
+            'ShapeShift': t('crypto'),
           },
           onClick: this.radioHandler.bind(this),
         }),
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 1c6036867..920dfeab6 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -283,13 +283,13 @@ CustomizeGasModal.prototype.render = function () {
         }, [t('revert')]),
 
         h('div.send-v2__customize-gas__buttons', [
-          h('div.send-v2__customize-gas__cancel', {
+          h('div.send-v2__customize-gas__cancel.allcaps', {
             onClick: this.props.hideModal,
-          }, [t('cancelCaps')]),
+          }, [t('cancel')]),
 
-          h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, {
+          h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, {
             onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal),
-          }, [t('saveCaps')]),
+          }, [t('save')]),
         ]),
 
       ]),
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index dfa5e5fac..620ac8483 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -122,7 +122,7 @@ class AccountDropdowns extends Component {
                 flex: '3 3 auto',
               },
             }, [
-              h('span.account-dropdown-edit-button', {
+              h('span.account-dropdown-edit-button.allcaps', {
                 style: {
                   fontSize: '16px',
                 },
@@ -130,7 +130,7 @@ class AccountDropdowns extends Component {
                   actions.showEditAccountModal(identity)
                 },
               }, [
-                t('editCaps'),
+                t('edit'),
               ]),
             ]),
 
@@ -160,7 +160,7 @@ class AccountDropdowns extends Component {
     try { // Sometimes keyrings aren't loaded yet:
       const type = keyring.type
       const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label', t('looseCaps')) : null
+      return isLoose ? h('.keyring-label.allcaps', t('loose')) : null
     } catch (e) { return }
   }
 
@@ -303,7 +303,7 @@ class AccountDropdowns extends Component {
               menuItemStyles,
             ),
           },
-          t('accDetails'),
+          t('accountDetails'),
         ),
         h(
           DropdownMenuItem,
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index 992d8c8cd..a43d44f89 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -127,11 +127,11 @@ HexAsDecimalInput.prototype.constructWarning = function () {
   let message = name ? name + ' ' : ''
 
   if (min && max) {
-    message += `must be greater than or equal to  ${min} and less than or equal to ${max}.`
+    message += t('betweenMinAndMax', [min, max])
   } else if (min) {
-    message += `must be greater than or equal to ${min}.`
+    message += t('greaterThanMin', [min])
   } else if (max) {
-    message += `must be less than or equal to ${max}.`
+    message += t('lessThanMax', [max])
   } else {
     message += t('invalidInput')
   }
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 17760dc1a..75f989e86 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -70,7 +70,7 @@ AccountDetailsModal.prototype.render = function () {
       // Holding on redesign for Export Private Key functionality
       h('button.btn-clear.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
-      }, t('exportPrivateKeyLower')),
+      }, t('exportPrivateKey')),
 
   ])
 }
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index e91b43841..7172d05a5 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -14,7 +14,9 @@ const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
 const SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
 const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
 const FAUCET_ROW_TITLE = t('testFaucet')
-const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
+const facuetRowText = (networkName) => {
+  return t('getEtherFromFaucet', [networkName])
+}
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 611def005..6efa8d476 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -61,7 +61,7 @@ EditAccountNameModal.prototype.render = function () {
         value: this.state.inputText,
       }, []),
 
-      h('button.btn-clear.edit-account-name-modal-save-button', {
+      h('button.btn-clear.edit-account-name-modal-save-button.allcaps', {
         onClick: () => {
           if (this.state.inputText.length !== 0) {
             saveAccountLabel(identity.address, this.state.inputText)
@@ -70,7 +70,7 @@ EditAccountNameModal.prototype.render = function () {
         },
         disabled: this.state.inputText.length === 0,
       }, [
-        t('saveCaps'),
+        t('save'),
       ]),
 
     ]),
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index 98b1e2d03..33d8062c6 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -59,15 +59,15 @@ HideTokenConfirmationModal.prototype.render = function () {
       ]),
 
       h('div.hide-token-confirmation__buttons', {}, [
-        h('button.btn-cancel.hide-token-confirmation__button', {
+        h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
           onClick: () => hideModal(),
         }, [
-          t('cancelCaps'),
+          t('cancel'),
         ]),
-        h('button.btn-clear.hide-token-confirmation__button', {
+        h('button.btn-clear.hide-token-confirmation__button.allcaps', {
           onClick: () => hideToken(address),
         }, [
-          t('hideCaps'),
+          t('hide'),
         ]),
       ]),
     ]),
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 35f4764a6..298b76af4 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -12,7 +12,7 @@ class NewAccountModal extends Component {
     const newAccountNumber = numberOfExistingAccounts + 1
 
     this.state = {
-      newAccountName: `Account ${newAccountNumber}`,
+      newAccountName: `${t('account')} ${newAccountNumber}`,
     }
   }
 
@@ -53,11 +53,11 @@ class NewAccountModal extends Component {
           },
         }, t('importAnAccount')),
 
-        h('div.new-account-modal-content.button', {}, [
+        h('div.new-account-modal-content.button.allcaps', {}, [
           h('button.btn-clear', {
             onClick: () => this.props.createAccount(newAccountName),
           }, [
-            t('saveCaps'),
+            t('save'),
           ]),
         ]),
       ]),
diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js
index b66657f3b..87e66855d 100644
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.js
@@ -40,7 +40,7 @@ PendingMsgDetails.prototype.render = function () {
       // message data
       h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
         h('.flex-column.flex-space-between', [
-          h('label.font-small', t('messageCaps')),
+          h('label.font-small.allcaps', t('message')),
           h('span.font-small', msgParams.data),
         ]),
       ]),
diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js
index d21689f86..b896e9a7e 100644
--- a/ui/app/components/pending-personal-msg-details.js
+++ b/ui/app/components/pending-personal-msg-details.js
@@ -46,7 +46,7 @@ PendingMsgDetails.prototype.render = function () {
           height: '260px',
         },
       }, [
-        h('label.font-small', { style: { display: 'block' } }, t('messageCaps')),
+        h('label.font-small.allcaps', { style: { display: 'block' } }, t('message')),
         h(BinaryRenderer, {
           value: data,
           style: {
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index e6972c541..49fbe6387 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -56,7 +56,7 @@ ConfirmDeployContract.prototype.onSubmit = function (event) {
   if (valid && this.verifyGasParams()) {
     this.props.sendTransaction(txMeta, event)
   } else {
-    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+    this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
     this.setState({ submitting: false })
   }
 }
@@ -272,9 +272,9 @@ ConfirmDeployContract.prototype.render = function () {
       // Main Send token Card
       h('div.confirm-screen-wrapper.flex-column.flex-grow', [
         h('h3.flex-center.confirm-screen-header', [
-          h('button.confirm-screen-back-button', {
+          h('button.confirm-screen-back-button.allcaps', {
             onClick: () => backToAccountDetail(selectedAddress),
-          }, 'BACK'),
+          }, t('back')),
           h('div.confirm-screen-title', t('confirmContract')),
           h('div.confirm-screen-header-tip'),
         ]),
@@ -336,12 +336,12 @@ ConfirmDeployContract.prototype.render = function () {
         onSubmit: this.onSubmit,
       }, [
         // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button', {
+        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
           onClick: (event) => this.cancel(event, txMeta),
-        }, t('cancelCaps')),
+        }, t('cancel')),
 
         // Accept Button
-        h('button.confirm-screen-confirm-button', [t('confirmCaps')]),
+        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
 
       ]),
     ])
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 52693b4f6..21b9b548b 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -392,15 +392,15 @@ ConfirmSendEther.prototype.render = function () {
         onSubmit: this.onSubmit,
       }, [
         // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button', {
+        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
           onClick: (event) => {
             clearSend()
             this.cancel(event, txMeta)
           },
-        }, t('cancelCaps')),
+        }, t('cancel')),
 
         // Accept Button
-        h('button.confirm-screen-confirm-button', [t('confirmCaps')]),
+        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
       ]),
     ])
   )
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 14523461f..b1bec946a 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -286,7 +286,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
 
         h('div.confirm-screen-section-column', [
           h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`),
-          h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} Gas`),
+          h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${t('gas')}`),
         ]),
       ])
     )
@@ -315,10 +315,10 @@ ConfirmSendToken.prototype.render = function () {
       // Main Send token Card
       h('div.confirm-screen-wrapper.flex-column.flex-grow', [
         h('h3.flex-center.confirm-screen-header', [
-          h('button.btn-clear.confirm-screen-back-button', {
+          h('button.btn-clear.confirm-screen-back-button.allcaps', {
             onClick: () => editTransaction(txMeta),
-          }, t('editCaps')),
-          h('div.confirm-screen-title', 'Confirm Transaction'),
+          }, t('edit')),
+          h('div.confirm-screen-title', t('confirmTransaction')),
           h('div.confirm-screen-header-tip'),
         ]),
         h('div.flex-row.flex-center.confirm-screen-identicons', [
@@ -386,12 +386,12 @@ ConfirmSendToken.prototype.render = function () {
         onSubmit: this.onSubmit,
       }, [
         // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button', {
+        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
           onClick: (event) => this.cancel(event, txMeta),
-        }, t('cancelCaps')),
+        }, t('cancel')),
 
         // Accept Button
-        h('button.confirm-screen-confirm-button', [t('confirmCaps')]),
+        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
       ]),
 
 
diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js
index 9708ed1d7..ae0a1171e 100644
--- a/ui/app/components/pending-typed-msg-details.js
+++ b/ui/app/components/pending-typed-msg-details.js
@@ -46,7 +46,7 @@ PendingMsgDetails.prototype.render = function () {
           height: '260px',
         },
       }, [
-        h('label.font-small', { style: { display: 'block' } }, t('youSignCaps')),
+        h('label.font-small.allcaps', { style: { display: 'block' } }, t('youSign')),
         h(TypedMessageRenderer, {
           value: data,
           style: {
diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js
index 3d473f47d..ccde5e8af 100644
--- a/ui/app/components/pending-typed-msg.js
+++ b/ui/app/components/pending-typed-msg.js
@@ -34,12 +34,12 @@ PendingMsg.prototype.render = function () {
 
       // sign + cancel
       h('.flex-row.flex-space-around', [
-        h('button', {
+        h('button.allcaps', {
           onClick: state.cancelTypedMessage,
-        }, t('cancelCaps')),
-        h('button', {
+        }, t('cancel')),
+        h('button.allcaps', {
           onClick: state.signTypedMessage,
-        }, t('signCaps')),
+        }, t('sign')),
       ]),
     ])
 
diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
index 2ad7c9dd0..58743b641 100644
--- a/ui/app/components/send-token/index.js
+++ b/ui/app/components/send-token/index.js
@@ -234,7 +234,7 @@ SendTokenScreen.prototype.renderToAddressInput = function () {
       'send-screen-input-wrapper--error': errorMessage,
     }),
   }, [
-    h('div', [t('toSpecific')]),
+    h('div', [t('to') + ':']),
     h('input.large-input.send-screen-input', {
       name: 'address',
       list: 'addresses',
@@ -291,7 +291,7 @@ SendTokenScreen.prototype.renderAmountInput = function () {
     }),
   }, [
     h('div.send-screen-amount-labels', [
-      h('span', ['Amount']),
+      h('span', [t('amount')]),
       h(CurrencyToggle, {
         currentCurrency: tokenExchangeRate ? selectedCurrency : 'USD',
         currencies: tokenExchangeRate ? [ symbol, 'USD' ] : [],
@@ -356,7 +356,7 @@ SendTokenScreen.prototype.renderGasInput = function () {
     }),
 
     h('div.send-screen-gas-labels', {}, [
-      h('span', [ h('i.fa.fa-bolt'), t('gasFeeSpecific')]),
+      h('span', [ h('i.fa.fa-bolt'), t('gasFee') + ':']),
       h('span', [t('whatsThis')]),
     ]),
     h('div.large-input.send-screen-gas-input', [
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 329feb38f..104f82224 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -237,7 +237,7 @@ ShapeshiftForm.prototype.render = function () {
         className: btnClass,
         disabled: !token,
         onClick: () => this.onBuyWithShapeShift(),
-      }, [t('buyButton')]),
+      }, [t('buy')]),
 
     ])
 }
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 21d41a06c..0d8681fb7 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -81,7 +81,7 @@ ShiftListItem.prototype.renderUtilComponents = function () {
           value: this.props.depositAddress,
         }),
         h(Tooltip, {
-          title: 'QR Code',
+          title: t('qrCode'),
         }, [
           h('i.fa.fa-qrcode.pointer.pop-hover', {
             onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
@@ -141,7 +141,7 @@ ShiftListItem.prototype.renderInfo = function () {
             color: '#ABA9AA',
             width: '100%',
           },
-        }, `${props.depositType} to ETH via ShapeShift`),
+        }, t('toETHviaShapeShift', [props.depositType])),
         h('div', t('noDeposits')),
         h('div', {
           style: {
@@ -164,7 +164,7 @@ ShiftListItem.prototype.renderInfo = function () {
             color: '#ABA9AA',
             width: '100%',
           },
-        }, `${props.depositType} to ETH via ShapeShift`),
+        }, t('toETHviaShapeShift', [props.depositType])),
         h('div', t('conversionProgress')),
         h('div', {
           style: {
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index d0e568bca..7bf34e7b6 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -76,7 +76,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () {
 
   return h('div.request-signature__account', [
 
-    h('div.request-signature__account-text', [t('account')]),
+    h('div.request-signature__account-text', [t('account') + ':']),
 
     h(AccountDropdownMini, {
       selectedAccount,
@@ -155,7 +155,7 @@ SignatureRequest.prototype.msgHexToText = function (hex) {
 
 SignatureRequest.prototype.renderBody = function () {
   let rows
-  let notice = t('youSign')
+  let notice = t('youSign') + ':'
 
   const { txData } = this.props
   const { type, msgParams: { data } } = txData
@@ -225,10 +225,10 @@ SignatureRequest.prototype.renderFooter = function () {
   return h('div.request-signature__footer', [
     h('button.request-signature__footer__cancel-button', {
       onClick: cancel,
-    }, t('cancelCaps')),
+    }, t('cancel')),
     h('button.request-signature__footer__sign-button', {
       onClick: sign,
-    }, t('signCaps')),
+    }, t('sign')),
   ])
 }
 
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index adc9b8e94..d35d20a89 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -69,25 +69,25 @@ TxView.prototype.renderButtons = function () {
   return !selectedToken
     ? (
       h('div.flex-row.flex-center.hero-balance-buttons', [
-        h('button.btn-clear.hero-balance-button', {
+        h('button.btn-clear.hero-balance-button.allcaps', {
           onClick: () => showModal({
             name: 'DEPOSIT_ETHER',
           }),
-        }, t('depositButton')),
+        }, t('deposit')),
 
         h('button.btn-clear.hero-balance-button', {
           style: {
             marginLeft: '0.8em',
           },
           onClick: showSendPage,
-        }, t('sendButton')),
+        }, t('send')),
       ])
     )
     : (
       h('div.flex-row.flex-center.hero-balance-buttons', [
         h('button.btn-clear.hero-balance-button', {
           onClick: showSendTokenPage,
-        }, t('sendButton')),
+        }, t('send')),
       ])
     )
 }
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 60a780fc6..6bd2d0963 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -114,7 +114,7 @@ WalletView.prototype.render = function () {
         onClick: hideSidebar,
       }),
 
-      h('div.wallet-view__keyring-label', isLoose ? t('importedCaps') : ''),
+      h('div.wallet-view__keyring-label.allcaps', isLoose ? t('imported') : ''),
 
       h('div.flex-column.flex-center.wallet-view__name-container', {
         style: { margin: '0 auto' },
@@ -131,7 +131,7 @@ WalletView.prototype.render = function () {
           selectedIdentity.name,
         ]),
 
-        h('button.btn-clear.wallet-view__details-button', t('detailsCaps')),
+        h('button.btn-clear.wallet-view__details-button.allcaps', t('details')),
       ]),
     ]),
 
-- 
cgit v1.2.3


From 8b90b1d1b12bdae4f1fa06caec5cd5619dc83437 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 6 Feb 2018 22:03:37 -0800
Subject: Remove accessing PropTypes from main React package

---
 ui/app/components/account-dropdowns.js                      | 2 +-
 ui/app/components/dropdowns/components/account-dropdowns.js | 2 +-
 ui/app/components/dropdowns/components/dropdown.js          | 2 +-
 ui/app/components/dropdowns/simple-dropdown.js              | 2 +-
 ui/app/components/loading.js                                | 2 +-
 ui/app/components/tab-bar.js                                | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 0c34a5154..f69a6ca68 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../actions')
 const genAccountLink = require('etherscan-link').createAccountLink
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index f97ac0691..d3a549884 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../../../actions')
 const genAccountLink = require('../../../../lib/account-link.js')
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index 15d064be8..0336dbb8b 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const MenuDroppo = require('../../menu-droppo')
 const extend = require('xtend')
diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js
index 7bb48e57b..bba088ed1 100644
--- a/ui/app/components/dropdowns/simple-dropdown.js
+++ b/ui/app/components/dropdowns/simple-dropdown.js
@@ -1,5 +1,5 @@
 const { Component } = require('react')
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const classnames = require('classnames')
 const R = require('ramda')
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 9442121fe..cb6fa51fb 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -1,6 +1,6 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 
 class LoadingIndicator extends Component {
   renderMessage () {
diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js
index 0edced119..a80640116 100644
--- a/ui/app/components/tab-bar.js
+++ b/ui/app/components/tab-bar.js
@@ -1,6 +1,6 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const classnames = require('classnames')
 
 class TabBar extends Component {
-- 
cgit v1.2.3


From cd976a2765b9e442642faec8a985c049f8cb393b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 8 Feb 2018 13:48:25 -0330
Subject: Add reset account button to new UI.

---
 ui/app/components/modals/modal.js                  | 13 ++++++
 ui/app/components/modals/notification-modal.js     | 36 ++++++++++++++---
 .../notification-modals/confirm-reset-account.js   | 46 ++++++++++++++++++++++
 3 files changed, 89 insertions(+), 6 deletions(-)
 create mode 100644 ui/app/components/modals/notification-modals/confirm-reset-account.js

(limited to 'ui/app/components')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index afb2a2175..97fe38292 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -18,6 +18,7 @@ const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
 const CustomizeGasModal = require('../customize-gas-modal')
 const NotifcationModal = require('./notification-modal')
+const ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -202,6 +203,18 @@ const MODALS = {
     },
   },
 
+  CONFIRM_RESET_ACCOUNT: {
+    contents: h(ConfirmResetAccount),
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '473px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
index 239144b0c..621a974d0 100644
--- a/ui/app/components/modals/notification-modal.js
+++ b/ui/app/components/modals/notification-modal.js
@@ -9,26 +9,47 @@ class NotificationModal extends Component {
     const {
       header,
       message,
+      showCancelButton = false,
+      showConfirmButton = false,
+      hideModal,
+      onConfirm,
     } = this.props
 
+    const showButtons = showCancelButton || showConfirmButton
+
     return h('div', [
-      h('div.notification-modal-wrapper', {
+      h('div.notification-modal__wrapper', {
       }, [
 
-        h('div.notification-modal-header', {}, [
+        h('div.notification-modal__header', {}, [
           header,
         ]),
 
-        h('div.notification-modal-message-wrapper', {}, [
-          h('div.notification-modal-message', {}, [
+        h('div.notification-modal__message-wrapper', {}, [
+          h('div.notification-modal__message', {}, [
             message,
           ]),
         ]),
 
         h('div.modal-close-x', {
-          onClick: this.props.hideModal,
+          onClick: hideModal,
         }),
 
+        showButtons && h('div.notification-modal__buttons', [
+
+          showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
+            onClick: hideModal,
+          }, 'Cancel'),
+
+          showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
+            onClick: () => {
+              onConfirm()
+              hideModal()
+            },
+          }, 'Confirm'),
+
+        ]),
+
       ]),
     ])
   }
@@ -37,7 +58,10 @@ class NotificationModal extends Component {
 NotificationModal.propTypes = {
   hideModal: PropTypes.func,
   header: PropTypes.string,
-  message: PropTypes.string,
+  message: PropTypes.node,
+  showCancelButton: PropTypes.bool,
+  showConfirmButton: PropTypes.bool,
+  onConfirm: PropTypes.func,
 }
 
 const mapDispatchToProps = dispatch => {
diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js
new file mode 100644
index 000000000..e1bc91b24
--- /dev/null
+++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js
@@ -0,0 +1,46 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../../actions')
+const NotifcationModal = require('../notification-modal')
+
+class ConfirmResetAccount extends Component {
+  render () {
+    const { resetAccount } = this.props
+
+    return h(NotifcationModal, {
+      header: 'Are you sure you want to reset account?',
+      message: h('div', [
+
+        h('span', `Resetting is for developer use only. This button wipes the current account's transaction history,
+          which is used to calculate the current account nonce. `),
+
+        h('a.notification-modal__link', {
+          href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account',
+          target: '_blank',
+          onClick (event) { global.platform.openWindow({ url: event.target.href }) },
+        }, 'Read more.'),
+
+      ]),
+      showCancelButton: true,
+      showConfirmButton: true,
+      onConfirm: resetAccount,
+      
+    })
+  }
+}
+
+ConfirmResetAccount.propTypes = {
+  resetAccount: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    resetAccount: () => {
+      dispatch(actions.resetAccount())
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount)
-- 
cgit v1.2.3


From 35c762da47c4b604f44e903940245f87eb7a3d3a Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 13 Feb 2018 03:21:05 -0330
Subject: Updates the styling of confirm send ether and token screens. (#3235)

---
 ui/app/components/pending-tx/confirm-send-ether.js | 16 +++++++---------
 ui/app/components/pending-tx/confirm-send-token.js | 16 +++++++---------
 2 files changed, 14 insertions(+), 18 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 652300c94..3f8d9c28f 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -213,17 +213,15 @@ ConfirmSendEther.prototype.render = function () {
   this.inputs = []
 
   return (
-    h('div.confirm-screen-container.confirm-send-ether', {
-      style: { minWidth: '355px' },
-    }, [
+    h('div.confirm-screen-container.confirm-send-ether', [
       // Main Send token Card
-      h('div.confirm-screen-wrapper.flex-column.flex-grow', [
-        h('h3.flex-center.confirm-screen-header', [
-          h('button.btn-clear.confirm-screen-back-button', {
+      h('div.page-container', [
+        h('div.page-container__header', [
+          h('button.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
-          }, 'EDIT'),
-          h('div.confirm-screen-title', 'Confirm Transaction'),
-          h('div.confirm-screen-header-tip'),
+          }, 'Edit'),
+          h('div.page-container__title', 'Confirm'),
+          h('div.page-container__subtitle', `Please review your transaction.`),
         ]),
         h('div.flex-row.flex-center.confirm-screen-identicons', [
           h('div.confirm-screen-account-wrapper', [
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index ad489c3e9..e4b0c186a 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -308,17 +308,15 @@ ConfirmSendToken.prototype.render = function () {
   this.inputs = []
 
   return (
-    h('div.confirm-screen-container.confirm-send-token', {
-      style: { minWidth: '355px' },
-    }, [
+    h('div.confirm-screen-container.confirm-send-token', [
       // Main Send token Card
-      h('div.confirm-screen-wrapper.flex-column.flex-grow', [
-        h('h3.flex-center.confirm-screen-header', [
-          h('button.btn-clear.confirm-screen-back-button', {
+      h('div.page-container', [
+        h('div.page-container__header', [
+          h('button.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
-          }, 'EDIT'),
-          h('div.confirm-screen-title', 'Confirm Transaction'),
-          h('div.confirm-screen-header-tip'),
+          }, 'Edit'),
+          h('div.page-container__title', 'Confirm'),
+          h('div.page-container__subtitle', `Please review your transaction.`),
         ]),
         h('div.flex-row.flex-center.confirm-screen-identicons', [
           h('div.confirm-screen-account-wrapper', [
-- 
cgit v1.2.3


From a1b72e5252e15113c98180194cfa7f1640bde08e Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 20 Feb 2018 13:51:06 -0800
Subject: Try fixing notice screen synchronous state call

---
 ui/app/components/notice.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index 941ac33e6..9d2e89cb0 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -105,8 +105,7 @@ Notice.prototype.render = function () {
       h('button.primary', {
         disabled,
         onClick: () => {
-          this.setState({disclaimerDisabled: true})
-          onConfirm()
+          this.setState({disclaimerDisabled: true}, () => onConfirm())
         },
         style: {
           marginTop: '18px',
-- 
cgit v1.2.3


From ac2e92fa5424bbb1517d7443a7c40dcac92af638 Mon Sep 17 00:00:00 2001
From: Thomas <tmashuang@gmail.com>
Date: Tue, 27 Feb 2018 12:02:48 -0800
Subject: Change Loose label to Imported

---
 ui/app/components/dropdowns/components/account-dropdowns.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index d3a549884..f637ca19d 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -159,7 +159,7 @@ class AccountDropdowns extends Component {
     try { // Sometimes keyrings aren't loaded yet:
       const type = keyring.type
       const isLoose = type !== 'HD Key Tree'
-      return isLoose ? h('.keyring-label', 'LOOSE') : null
+      return isLoose ? h('.keyring-label', 'IMPORTED') : null
     } catch (e) { return }
   }
 
-- 
cgit v1.2.3


From 7aa324bdf61e83f9ed64e6b0354d88e0af76f42b Mon Sep 17 00:00:00 2001
From: Thomas <tmashuang@gmail.com>
Date: Tue, 27 Feb 2018 12:06:24 -0800
Subject: Remove committed out merge code

---
 .../components/dropdowns/components/account-dropdowns.js | 16 ----------------
 1 file changed, 16 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index f637ca19d..78b059d5b 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -134,22 +134,6 @@ class AccountDropdowns extends Component {
             ]),
 
           ]),
-// =======
-//             },
-//           ),
-//           this.indicateIfLoose(keyring),
-//           h('span', {
-//             style: {
-//               marginLeft: '20px',
-//               fontSize: '24px',
-//               maxWidth: '145px',
-//               whiteSpace: 'nowrap',
-//               overflow: 'hidden',
-//               textOverflow: 'ellipsis',
-//             },
-//           }, identity.name || ''),
-//           h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
-// >>>>>>> master:ui/app/components/account-dropdowns.js
         ]
       )
     })
-- 
cgit v1.2.3


From 2b9af0734b6127349ed4f1ed535dee858633776b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 27 Feb 2018 20:05:54 -0330
Subject: Replace 'Contract Published' with 'Contract Deployment' for clearer
 indication of contract tx state.

---
 ui/app/components/transaction-list-item.js | 2 +-
 ui/app/components/tx-list-item.js          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 4e3d2cb93..a45cd441a 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -180,7 +180,7 @@ function recipientField (txParams, transaction, isTx, isMsg) {
   } else if (txParams.to) {
     message = addressSummary(txParams.to)
   } else {
-    message = 'Contract Published'
+    message = 'Contract Deployment'
   }
 
   return h('div', {
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 7ccc5c315..1a13070c8 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -63,7 +63,7 @@ TxListItem.prototype.getAddressText = function () {
     default:
       return address
         ? `${address.slice(0, 10)}...${address.slice(-4)}`
-        : 'Contract Published'
+        : 'Contract Deployment'
   }
 }
 
-- 
cgit v1.2.3


From 78f6a4866425ca9fd7795d91ea5dacd47599c1ab Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 28 Feb 2018 13:12:06 -0330
Subject: Define event locally in onClickOutside method in account-dropdowns.js

---
 ui/app/components/account-dropdowns.js                      | 2 +-
 ui/app/components/dropdowns/components/account-dropdowns.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index f69a6ca68..1cd7a0847 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -173,7 +173,7 @@ class AccountDropdowns extends Component {
           minWidth: '180px',
         },
         isOpen: optionsMenuActive,
-        onClickOutside: () => {
+        onClickOutside: (event) => {
           const { classList } = event.target
           const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
           if (optionsMenuActive && isNotToggleElement) {
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index d3a549884..fa9ffc632 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -281,7 +281,7 @@ class AccountDropdowns extends Component {
           dropdownWrapperStyle,
         ),
         isOpen: optionsMenuActive,
-        onClickOutside: () => {
+        onClickOutside: (event) => {
           const { classList } = event.target
           const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
           if (optionsMenuActive && isNotToggleElement) {
-- 
cgit v1.2.3


From ace4f0d998d75e9df8c31641a292abc4f703582f Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Thu, 1 Mar 2018 13:11:35 -0800
Subject: Fix exception thrown when styleOverride is not present (#3364)

---
 ui/app/components/eth-balance.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 1be8c9731..c3d084bdc 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -46,7 +46,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
     incoming,
     currentCurrency,
     hideTooltip,
-    styleOveride,
+    styleOveride = {},
     showFiat = true,
   } = this.props
   const { fontSize, color, fontFamily, lineHeight } = styleOveride
-- 
cgit v1.2.3


From f22dfd4ae8031e3f7b4972a1cc8f119b99007717 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Thu, 1 Mar 2018 13:12:10 -0800
Subject: Fix network menu for custom URLs (#3366)

---
 ui/app/components/dropdowns/network-dropdown.js | 40 +++++++++++++++++--------
 1 file changed, 27 insertions(+), 13 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index dfaa6b22c..9be5cc5d1 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -84,7 +84,7 @@ NetworkDropdown.prototype.render = function () {
     style: {
       position: 'absolute',
       top: '58px',
-      minWidth: '309px',
+      width: '309px',
       zIndex: '55px',
     },
     innerStyle: {
@@ -276,11 +276,21 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
           key: `common${rpc}`,
           closeMenu: () => this.props.hideNetworkDropdown(),
           onClick: () => props.setRpcTarget(rpc),
+          style: {
+            fontFamily: 'DIN OT',
+            fontSize: '16px',
+            lineHeight: '20px',
+            padding: '12px 0',
+          },
         },
         [
-          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-          rpc,
-          rpcTarget === rpc ? h('.check', '✓') : null,
+          rpcTarget === rpc ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
+          h('span.network-name-item', {
+            style: {
+              color: rpcTarget === rpc ? '#ffffff' : '#9b9b9b',
+            },
+          }, rpc),
         ]
       )
     }
@@ -293,12 +303,6 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
 
   if (type !== 'rpc') return null
 
-  // Concatenate long URLs
-  let label = rpcTarget
-  if (rpcTarget.length > 31) {
-    label = label.substr(0, 34) + '...'
-  }
-
   switch (rpcTarget) {
 
     case 'http://localhost:8545':
@@ -311,11 +315,21 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
           key: rpcTarget,
           onClick: () => props.setRpcTarget(rpcTarget),
           closeMenu: () => this.props.hideNetworkDropdown(),
+          style: {
+            fontFamily: 'DIN OT',
+            fontSize: '16px',
+            lineHeight: '20px',
+            padding: '12px 0',
+          },
         },
         [
-          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-          label,
-          h('.check', '✓'),
+          h('i.fa.fa-check'),
+          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
+          h('span.network-name-item', {
+            style: {
+              color: '#ffffff',
+            },
+          }, rpcTarget),
         ]
       )
   }
-- 
cgit v1.2.3


From 1bd18cebd7e08edbbcf35407b962e71dcd2c3399 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Mon, 5 Mar 2018 13:33:46 -0330
Subject: Fixes shapeshift coin selection dropdown. (#3416)

---
 ui/app/components/shapeshift-form.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 2270b8236..648b05049 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -51,8 +51,7 @@ ShapeshiftForm.prototype.componentWillMount = function () {
   this.props.shapeShiftSubview()
 }
 
-ShapeshiftForm.prototype.onCoinChange = function (e) {
-  const coin = e.target.value
+ShapeshiftForm.prototype.onCoinChange = function (coin) {
   this.setState({
     depositCoin: coin,
     errorMessage: '',
@@ -133,7 +132,7 @@ ShapeshiftForm.prototype.renderMarketInfo = function () {
 }
 
 ShapeshiftForm.prototype.renderQrCode = function () {
-  const { depositAddress, isLoading } = this.state
+  const { depositAddress, isLoading, depositCoin } = this.state
   const qrImage = qrcode(4, 'M')
   qrImage.addData(depositAddress)
   qrImage.make()
@@ -141,7 +140,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
   return h('div.shapeshift-form', {}, [
 
     h('div.shapeshift-form__deposit-instruction', [
-      'Deposit your BTC to the address below:',
+      `Deposit your ${depositCoin.toUpperCase()} to the address below:`,
     ]),
 
     h('div', depositAddress),
@@ -182,7 +181,7 @@ ShapeshiftForm.prototype.render = function () {
 
               h(SimpleDropdown, {
                 selectedOption: this.state.depositCoin,
-                onSelect: this.onCoinChange,
+                onSelect: (coin) => this.onCoinChange(coin),
                 options: Object.entries(coinOptions).map(([coin]) => ({
                   value: coin.toLowerCase(),
                   displayValue: coin,
-- 
cgit v1.2.3


From 376ffb758fa6b6ea1fcfde1f2addf1c5a6070339 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 5 Mar 2018 14:23:00 -0330
Subject: Shapeshift form handles market info unavailable errors.

---
 ui/app/components/modals/deposit-ether-modal.js |  5 +++++
 ui/app/components/modals/modal.js               | 12 +++++++++++-
 ui/app/components/shapeshift-form.js            | 10 +++++++---
 3 files changed, 23 insertions(+), 4 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 532d66653..7547dbcf5 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -33,6 +33,9 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
     showAccountDetailModal: () => {
       dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
     },
@@ -119,6 +122,7 @@ DepositEtherModal.prototype.render = function () {
       h('div.deposit-ether-modal__header__close', {
         onClick: () => {
           this.setState({ buyingWithShapeshift: false })
+          this.props.hideWarning()
           this.props.hideModal()
         },
       }),
@@ -179,6 +183,7 @@ DepositEtherModal.prototype.render = function () {
 }
 
 DepositEtherModal.prototype.goToAccountDetailsModal = function () {
+  this.props.hideWarning()
   this.props.hideModal()
   this.props.showAccountDetailModal()
 }
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 97fe38292..8e9e58985 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -79,6 +79,7 @@ const MODALS = {
     contents: [
       h(DepositEtherModal, {}, []),
     ],
+    onHide: (props) => props.hideWarning(),
     mobileModalStyle: {
       width: '100%',
       height: '100%',
@@ -286,6 +287,10 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
+
   }
 }
 
@@ -308,7 +313,12 @@ Modal.prototype.render = function () {
     {
       className: 'modal',
       keyboard: false,
-      onHide: () => { this.onHide() },
+      onHide: () => {
+        if (modal.onHide) {
+          modal.onHide(this.props)
+        }
+        this.onHide()
+      },
       ref: (ref) => {
         this.modalRef = ref
       },
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 648b05049..87eb1588a 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -14,11 +14,13 @@ function mapStateToProps (state) {
     tokenExchangeRates,
     selectedAddress,
   } = state.metamask
+  const { warning } = state.appState
   
   return {
     coinOptions,
     tokenExchangeRates,
     selectedAddress,
+    warning,
   }
 }
 
@@ -163,7 +165,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
 
 
 ShapeshiftForm.prototype.render = function () {
-  const { coinOptions, btnClass } = this.props
+  const { coinOptions, btnClass, warning } = this.props
   const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state
   const coinPair = `${depositCoin}_eth`
   const { tokenExchangeRates } = this.props
@@ -206,7 +208,9 @@ ShapeshiftForm.prototype.render = function () {
 
           ]),
 
-          h('div', {
+          warning && h('div.shapeshift-form__address-input-label', warning),
+
+          !warning && h('div', {
             className: classnames('shapeshift-form__address-input-wrapper', {
               'shapeshift-form__address-input-wrapper--error': errorMessage,
             }),
@@ -227,7 +231,7 @@ ShapeshiftForm.prototype.render = function () {
             h('divshapeshift-form__address-input-error-message', [errorMessage]),
           ]),
 
-          this.renderMarketInfo(),
+          !warning && this.renderMarketInfo(),
 
       ]),
 
-- 
cgit v1.2.3


From 2420ad2477f7b688295a55c038b3473a4516dc52 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 6 Mar 2018 22:26:13 -0330
Subject: Correct merge conflict resolution errors.

---
 ui/app/components/account-menu/index.js | 7 -------
 1 file changed, 7 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index 043e3d8d1..e838e8916 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -95,13 +95,6 @@ AccountMenu.prototype.render = function () {
       icon: h('img', { src: 'images/mm-info-icon.svg' }),
       text: t('infoHelp'),
     }),
-    h(Item, {
-      onClick: showConfigPage,
-      icon: h('img', { src: 'images/settings.svg' }),
-      text: t('settings'),
-      icon: h('img.account-menu__item-icon', { src: 'images/mm-info-icon.svg' }),
-      text: t('infoHelp'),
-    }),
     h(Item, {
       onClick: showConfigPage,
       icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
-- 
cgit v1.2.3


From ca047b1ea0bd6778fc3b0c05b86ff23d0964f98d Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Wed, 7 Mar 2018 15:22:10 -0330
Subject: Update network colours for better accessibility. (#3469)

---
 ui/app/components/dropdowns/network-dropdown.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 9be5cc5d1..ff10c0758 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -114,7 +114,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#038789', // $blue-lagoon
+          backgroundColor: '#29B6AF', // $java
           isSelected: providerType === 'mainnet',
         }),
         h('span.network-name-item', {
@@ -136,7 +136,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#e91550', // $crimson
+          backgroundColor: '#ff4a8d', // $wild-strawberry
           isSelected: providerType === 'ropsten',
         }),
         h('span.network-name-item', {
@@ -158,7 +158,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#690496', // $purple
+          backgroundColor: '#7057ff', // $cornflower-blue
           isSelected: providerType === 'kovan',
         }),
         h('span.network-name-item', {
@@ -180,7 +180,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#ebb33f', // $tulip-tree
+          backgroundColor: '#f6c343', // $saffron
           isSelected: providerType === 'rinkeby',
         }),
         h('span.network-name-item', {
-- 
cgit v1.2.3


From 09dae760bc9ec5b2288d0719acbf7e2c949c8fbb Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 7 Mar 2018 22:47:29 -0330
Subject: Correct caps of Send button on main screen.

---
 ui/app/components/tx-view.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index d35d20a89..85892b93b 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -75,7 +75,7 @@ TxView.prototype.renderButtons = function () {
           }),
         }, t('deposit')),
 
-        h('button.btn-clear.hero-balance-button', {
+        h('button.btn-clear.hero-balance-button.allcaps', {
           style: {
             marginLeft: '0.8em',
           },
-- 
cgit v1.2.3


From 6cee76b3e797dd302c1bf97d7799567a366b2004 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 8 Mar 2018 16:12:25 -0330
Subject: Add html and css for responsive retry button.

---
 ui/app/components/tx-list-item.js | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'ui/app/components')

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 1a13070c8..574d10e14 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -240,6 +240,15 @@ TxListItem.prototype.render = function () {
 
         ]),
       ]),
+
+      h('div.tx-list-item-retry-container', [
+
+        h('span.tx-list-item-retry-copy', 'Taking too long?'),
+
+        h('span.tx-list-item-retry-link', 'Increase the gas on your transaction'),
+        
+      ]),
+
     ]), // holding on icon from design
   ])
 }
-- 
cgit v1.2.3


From 5433d2fe3a3f48948449258b03ae431fe81b8cf2 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 9 Mar 2018 00:19:26 -0330
Subject: Retry transaction logic added to tx-list-item, confirm-send-ether,
 customize-gas-modal, and dependents.

---
 ui/app/components/customize-gas-modal/index.js     | 18 ++++++++-
 ui/app/components/pending-tx/confirm-send-ether.js | 20 ++++++++-
 ui/app/components/tx-list-item.js                  | 47 ++++++++++++++++++----
 ui/app/components/tx-list.js                       | 13 +++---
 4 files changed, 83 insertions(+), 15 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 826d2cd4b..34a93d6c6 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -21,12 +21,14 @@ const {
   conversionUtil,
   multiplyCurrencies,
   conversionGreaterThan,
+  conversionMax,
   subtractCurrencies,
 } = require('../../conversion-util')
 
 const {
   getGasPrice,
   getGasLimit,
+  getForceGasMin,
   conversionRateSelector,
   getSendAmount,
   getSelectedToken,
@@ -44,6 +46,7 @@ function mapStateToProps (state) {
   return {
     gasPrice: getGasPrice(state),
     gasLimit: getGasLimit(state),
+    forceGasMin: getForceGasMin(state),
     conversionRate,
     amount: getSendAmount(state),
     maxModeOn: getSendMaxModeState(state),
@@ -217,7 +220,7 @@ CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
 }
 
 CustomizeGasModal.prototype.render = function () {
-  const { hideModal } = this.props
+  const { hideModal, forceGasMin } = this.props
   const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state
 
   let convertedGasPrice = conversionUtil(gasPrice, {
@@ -229,6 +232,17 @@ CustomizeGasModal.prototype.render = function () {
 
   convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}`
 
+  if (forceGasMin) {
+    const convertedMinPrice = conversionUtil(forceGasMin, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+    })
+    convertedGasPrice = conversionMax(
+      { value: convertedMinPrice, fromNumericBase: 'dec' },
+      { value: convertedGasPrice, fromNumericBase: 'dec' }
+    )
+  }
+
   const convertedGasLimit = conversionUtil(gasLimit, {
     fromNumericBase: 'hex',
     toNumericBase: 'dec',
@@ -251,7 +265,7 @@ CustomizeGasModal.prototype.render = function () {
 
         h(GasModalCard, {
           value: convertedGasPrice,
-          min: MIN_GAS_PRICE_GWEI,
+          min: forceGasMin || MIN_GAS_PRICE_GWEI,
           // max: 1000,
           step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
           onChange: value => this.convertAndSetGasPrice(value),
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 3f8d9c28f..a6e00d922 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -36,13 +36,29 @@ function mapDispatchToProps (dispatch) {
   return {
     clearSend: () => dispatch(actions.clearSend()),
     editTransaction: txMeta => {
-      const { id, txParams } = txMeta
+      const { id, txParams, lastGasPrice } = txMeta
       const {
         gas: gasLimit,
         gasPrice,
         to,
         value: amount,
       } = txParams
+
+      let forceGasMin
+      let nonce
+      if (lastGasPrice) {
+        const stripped = ethUtil.stripHexPrefix(lastGasPrice)
+        forceGasMin = ethUtil.addHexPrefix(addCurrencies(stripped, MIN_GAS_PRICE_HEX, {
+          aBase: 16,
+          bBase: 16,
+          toNumericBase: 'hex',
+          fromDenomination: 'WEI',
+          toDenomination: 'GWEI',
+        }))
+
+        nonce = txParams.nonce
+      }
+
       dispatch(actions.updateSend({
         gasLimit,
         gasPrice,
@@ -51,6 +67,8 @@ function mapDispatchToProps (dispatch) {
         amount,
         errors: { to: null, amount: null },
         editingTransactionId: id,
+        forceGasMin,
+        nonce,
       }))
       dispatch(actions.showSendPage())
     },
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 574d10e14..123f723be 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -9,18 +9,26 @@ abiDecoder.addABI(abi)
 const Identicon = require('./identicon')
 const contractMap = require('eth-contract-metadata')
 
+const actions = require('../actions')
 const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
 const { calcTokenAmount } = require('../token-util')
 
 const { getCurrentCurrency } = require('../selectors')
 
-module.exports = connect(mapStateToProps)(TxListItem)
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TxListItem)
 
 function mapStateToProps (state) {
   return {
     tokens: state.metamask.tokens,
     currentCurrency: getCurrentCurrency(state),
     tokenExchangeRates: state.metamask.tokenExchangeRates,
+    selectedAddressTxList: state.metamask.selectedAddressTxList,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
   }
 }
 
@@ -167,12 +175,32 @@ TxListItem.prototype.getSendTokenTotal = async function () {
   }
 }
 
+TxListItem.prototype.showRetryButton = function () {
+  const {
+    transactionStatus,
+    transactionTime,
+    selectedAddressTxList,
+    transactionId,
+    txParams,
+  } = this.props
+  const currentNonce = txParams.nonce
+  const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce)
+  const isLastWithNonce = currentNonceTxs[currentNonceTxs.length - 1].id === transactionId
+
+  return transactionStatus === 'submitted' && isLastWithNonce && Date.now() - transactionTime > 5000
+}
+
+TxListItem.prototype.resubmit = function () {
+  const { transactionId } = this.props
+  this.props.retryTransaction(transactionId)
+}
+
 TxListItem.prototype.render = function () {
   const {
     transactionStatus,
     transactionAmount,
     onClick,
-    transActionId,
+    transactionId,
     dateString,
     address,
     className,
@@ -181,8 +209,8 @@ TxListItem.prototype.render = function () {
   const showFiatTotal = transactionAmount !== '0x0' && fiatTotal
 
   return h(`div${className || ''}`, {
-    key: transActionId,
-    onClick: () => onClick && onClick(transActionId),
+    key: transactionId,
+    onClick: () => onClick && onClick(transactionId),
   }, [
     h(`div.flex-column.tx-list-item-wrapper`, {}, [
 
@@ -241,12 +269,17 @@ TxListItem.prototype.render = function () {
         ]),
       ]),
 
-      h('div.tx-list-item-retry-container', [
+      this.showRetryButton() && h('div.tx-list-item-retry-container', [
 
         h('span.tx-list-item-retry-copy', 'Taking too long?'),
 
-        h('span.tx-list-item-retry-link', 'Increase the gas on your transaction'),
-        
+        h('span.tx-list-item-retry-link', {
+          onClick: (event) => {
+            event.stopPropagation()
+            this.resubmit()
+          },
+        }, 'Increase the gas on your transaction'),
+
       ]),
 
     ]), // holding on icon from design
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 1729e6a6f..30f816d58 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -74,9 +74,10 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
     address: transaction.txParams.to,
     transactionStatus: transaction.status,
     transactionAmount: transaction.txParams.value,
-    transActionId: transaction.id,
+    transactionId: transaction.id,
     transactionHash: transaction.hash,
     transactionNetworkId: transaction.metamaskNetworkId,
+    transactionTime: transaction.time,
   }
 
   const {
@@ -84,29 +85,31 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
     transactionStatus,
     transactionAmount,
     dateString,
-    transActionId,
+    transactionId,
     transactionHash,
     transactionNetworkId,
+    transactionTime,
   } = props
   const { showConfTxPage } = this.props
 
   const opts = {
-    key: transActionId || transactionHash,
+    key: transactionId || transactionHash,
     txParams: transaction.txParams,
     transactionStatus,
-    transActionId,
+    transactionId,
     dateString,
     address,
     transactionAmount,
     transactionHash,
     conversionRate,
     tokenInfoGetter: this.tokenInfoGetter,
+    transactionTime,
   }
 
   const isUnapproved = transactionStatus === 'unapproved'
 
   if (isUnapproved) {
-    opts.onClick = () => showConfTxPage({id: transActionId})
+    opts.onClick = () => showConfTxPage({id: transactionId})
     opts.transactionStatus = 'Not Started'
   } else if (transactionHash) {
     opts.onClick = () => this.view(transactionHash, transactionNetworkId)
-- 
cgit v1.2.3


From 2d6b378bf8f8f0b23ef54b48118b61fb6c7deee1 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 9 Mar 2018 02:03:36 -0330
Subject: Adds inline opening of gas customization to confirm-send-ether
 screen.

---
 ui/app/components/pending-tx/confirm-send-ether.js | 48 ++++++++++++++++++----
 ui/app/components/send/gas-fee-display-v2.js       |  4 +-
 2 files changed, 42 insertions(+), 10 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index a6e00d922..422b1c6c1 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -9,6 +9,7 @@ const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil, addCurrencies } = require('../../conversion-util')
+const GasFeeDisplay = require('../send/gas-fee-display-v2')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
@@ -73,6 +74,18 @@ function mapDispatchToProps (dispatch) {
       dispatch(actions.showSendPage())
     },
     cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+    showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => {
+      const { id, txParams } = txMeta
+      const { gas: txGasLimit, gasPrice: txGasPrice } = txParams
+
+      dispatch(actions.updateSend({
+        gasLimit: sendGasLimit || txGasLimit,
+        gasPrice: sendGasPrice || txGasPrice,
+        editingTransactionId: id,
+        gasTotal: sendGasTotal,
+      }))
+      dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
+    },
   }
 }
 
@@ -157,6 +170,7 @@ ConfirmSendEther.prototype.getGasFee = function () {
   return {
     FIAT,
     ETH,
+    gasFeeInHex: txFeeBn.toString(16),
   }
 }
 
@@ -164,7 +178,7 @@ ConfirmSendEther.prototype.getData = function () {
   const { identities } = this.props
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
-  const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH } = this.getGasFee()
+  const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH, gasFeeInHex } = this.getGasFee()
   const { FIAT: amountInFIAT, ETH: amountInETH } = this.getAmount()
 
   const totalInFIAT = addCurrencies(gasFeeInFIAT, amountInFIAT, {
@@ -192,11 +206,20 @@ ConfirmSendEther.prototype.getData = function () {
     amountInETH,
     totalInFIAT,
     totalInETH,
+    gasFeeInHex,
   }
 }
 
 ConfirmSendEther.prototype.render = function () {
-  const { editTransaction, currentCurrency, clearSend } = this.props
+  const {
+    editTransaction,
+    currentCurrency,
+    clearSend,
+    conversionRate,
+    currentCurrency: convertedCurrency,
+    showCustomizeGasModal,
+    send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice },
+  } = this.props
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
@@ -212,11 +235,17 @@ ConfirmSendEther.prototype.render = function () {
     memo,
     gasFeeInFIAT,
     gasFeeInETH,
+    gasFeeInHex,
     amountInFIAT,
     totalInFIAT,
     totalInETH,
   } = this.getData()
 
+  const title = txMeta.lastGasPrice ? 'Overwrite Transaction' : 'Confirm'
+  const subtitle = txMeta.lastGasPrice
+    ? 'Increase your gas fee to attempt to overwrite and speed up your transaction'
+    : 'Please review your transaction.'
+
   // This is from the latest master
   // It handles some of the errors that we are not currently handling
   // Leaving as comments fo reference
@@ -235,11 +264,11 @@ ConfirmSendEther.prototype.render = function () {
       // Main Send token Card
       h('div.page-container', [
         h('div.page-container__header', [
-          h('button.confirm-screen-back-button', {
+          !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
           }, 'Edit'),
-          h('div.page-container__title', 'Confirm'),
-          h('div.page-container__subtitle', `Please review your transaction.`),
+          h('div.page-container__title', title),
+          h('div.page-container__subtitle', subtitle),
         ]),
         h('div.flex-row.flex-center.confirm-screen-identicons', [
           h('div.confirm-screen-account-wrapper', [
@@ -302,9 +331,12 @@ ConfirmSendEther.prototype.render = function () {
           h('section.flex-row.flex-center.confirm-screen-row', [
             h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
             h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
-
-              h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
+              h(GasFeeDisplay, {
+                gasTotal: gasTotal || gasFeeInHex,
+                conversionRate,
+                convertedCurrency,
+                onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal),
+              }),
             ]),
           ]),
 
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 0c4c3f7a9..da1bdd05e 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -32,11 +32,11 @@ GasFeeDisplay.prototype.render = function () {
       })
       : h('div.currency-display', 'Loading...'),
 
-    h('button.send-v2__sliders-icon-container', {
+    h('button.sliders-icon-container', {
       onClick,
       disabled: !gasTotal,
     }, [
-      h('i.fa.fa-sliders.send-v2__sliders-icon'),
+      h('i.fa.fa-sliders.sliders-icon'),
     ]),
 
   ])
-- 
cgit v1.2.3


From c1ff927fa0e129a828d3345b21723300d5e73ef1 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 9 Mar 2018 10:00:37 -0330
Subject: Lint fixes.

---
 ui/app/components/pending-tx/confirm-send-ether.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 422b1c6c1..ec61d66b4 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -233,8 +233,6 @@ ConfirmSendEther.prototype.render = function () {
       name: toName,
     },
     memo,
-    gasFeeInFIAT,
-    gasFeeInETH,
     gasFeeInHex,
     amountInFIAT,
     totalInFIAT,
-- 
cgit v1.2.3


From d84341f323505e3dec4b13a200e6022747fa58fc Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Fri, 9 Mar 2018 16:31:17 +0100
Subject: Add empty object default value for tokenData (#3493)

---
 ui/app/components/pending-tx/confirm-send-token.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index e4b0c186a..dd2bef3da 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -63,8 +63,8 @@ function mapDispatchToProps (dispatch, ownProps) {
     updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)),
     editTransaction: txMeta => {
       const { token: { address } } = ownProps
-      const { txParams, id } = txMeta
-      const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+      const { txParams = {}, id } = txMeta
+      const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) || {}
       const { params = [] } = tokenData
       const { value: to } = params[0] || {}
       const { value: tokenAmountInDec } = params[1] || {}
-- 
cgit v1.2.3


From a07550d2abff0916af500eda6767cf32e0849335 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 9 Mar 2018 18:50:00 +0100
Subject: Increase tap areas for menu buttons on mobile

---
 ui/app/components/tx-view.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index b25d8e0f9..ad9f9c5c0 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -100,9 +100,10 @@ TxView.prototype.render = function () {
 
     h('div.flex-row.phone-visible', {
       style: {
-        margin: '1.5em 1.2em 0',
         justifyContent: 'space-between',
         alignItems: 'center',
+        flex: '0 0 auto',
+        margin: '10px',
       },
     }, [
 
@@ -110,11 +111,10 @@ TxView.prototype.render = function () {
         style: {
           fontSize: '1.3em',
           cursor: 'pointer',
+          padding: '10px',
         },
-        onClick: () => {
-          this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
-        },
-      }, []),
+        onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
+      }),
 
       h('.identicon-wrapper.select-none', {
         style: {
-- 
cgit v1.2.3


From 08542c18e10c61b9e5862e95e7a5a18d479f2dc1 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Mon, 12 Mar 2018 19:25:12 +0100
Subject: Update deposit ether styling (#3510)

---
 ui/app/components/modals/deposit-ether-modal.js | 111 +++++++++++++-----------
 ui/app/components/modals/modal.js               |  10 ++-
 2 files changed, 68 insertions(+), 53 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 7547dbcf5..ed73bc632 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -16,7 +16,7 @@ const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift'
 const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether
 directly into your MetaMask wallet. No Account Needed.`
 const FAUCET_ROW_TITLE = 'Test Faucet'
-const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
+const faucetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
 
 function mapStateToProps (state) {
   return {
@@ -83,7 +83,7 @@ DepositEtherModal.prototype.renderRow = function ({
 
     ]),
 
-    h('div.deposit-ether-modal__buy-row__logo', [logo]),
+    h('div.deposit-ether-modal__buy-row__logo-container', [logo]),
 
       h('div.deposit-ether-modal__buy-row__description', [
 
@@ -109,17 +109,17 @@ DepositEtherModal.prototype.render = function () {
   const isTestNetwork = ['3', '4', '42'].find(n => n === network)
   const networkName = networkNames[network]
 
-  return h('div.deposit-ether-modal', {}, [
+  return h('div.page-container.page-container--full-width', {}, [
 
-    h('div.deposit-ether-modal__header', [
+    h('div.page-container__header', [
 
-      h('div.deposit-ether-modal__header__title', ['Deposit Ether']),
+      h('div.page-container__title', 'Deposit Ether'),
 
-      h('div.deposit-ether-modal__header__description', [
+      h('div.page-container__subtitle', [
         'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.',
       ]),
 
-      h('div.deposit-ether-modal__header__close', {
+      h('div.page-container__header-close', {
         onClick: () => {
           this.setState({ buyingWithShapeshift: false })
           this.props.hideWarning()
@@ -129,54 +129,67 @@ DepositEtherModal.prototype.render = function () {
 
     ]),
 
-    h('div.deposit-ether-modal__buy-rows', [
-
-      this.renderRow({
-        logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
-        title: DIRECT_DEPOSIT_ROW_TITLE,
-        text: DIRECT_DEPOSIT_ROW_TEXT,
-        buttonLabel: 'View Account',
-        onButtonClick: () => this.goToAccountDetailsModal(),
-        hide: buyingWithShapeshift,
-      }),
+    h('.page-container__content', {}, [
+
+      h('div.deposit-ether-modal__buy-rows', [
+
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'../../../images/eth_logo.svg\')',
+            },
+          }),
+          title: DIRECT_DEPOSIT_ROW_TITLE,
+          text: DIRECT_DEPOSIT_ROW_TEXT,
+          buttonLabel: 'View Account Details',
+          onButtonClick: () => this.goToAccountDetailsModal(),
+          hide: buyingWithShapeshift,
+        }),
 
-      this.renderRow({
-        logo: h('i.fa.fa-tint.fa-2x'),
-        title: FAUCET_ROW_TITLE,
-        text: facuetRowText(networkName),
-        buttonLabel: 'Get Ether',
-        onButtonClick: () => toFaucet(network),
-        hide: !isTestNetwork || buyingWithShapeshift,
-      }),
+        this.renderRow({
+          logo: h('i.fa.fa-tint.fa-3x.deposit-ether-modal__logo'),
+          title: FAUCET_ROW_TITLE,
+          text: faucetRowText(networkName),
+          buttonLabel: 'Continue to Test Faucet',
+          onButtonClick: () => toFaucet(network),
+          hide: !isTestNetwork || buyingWithShapeshift,
+        }),
 
-      this.renderRow({
-        logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', {
-          src: '../../../images/coinbase logo.png',
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'../../../images/coinbase logo.png\')',
+              height: '40px',
+            },
+          }),
+          title: COINBASE_ROW_TITLE,
+          text: COINBASE_ROW_TEXT,
+          buttonLabel: 'Continue to Coinbase',
+          onButtonClick: () => toCoinbase(address),
+          hide: isTestNetwork || buyingWithShapeshift,
         }),
-        title: COINBASE_ROW_TITLE,
-        text: COINBASE_ROW_TEXT,
-        buttonLabel: 'Continue to Coinbase',
-        onButtonClick: () => toCoinbase(address),
-        hide: isTestNetwork || buyingWithShapeshift,
-      }),
 
-      this.renderRow({
-        logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', {
-          src: '../../../images/shapeshift logo.png',
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'../../../images/shapeshift logo.png\')',
+            },
+          }),
+          title: SHAPESHIFT_ROW_TITLE,
+          text: SHAPESHIFT_ROW_TEXT,
+          buttonLabel: 'Continue to Shapeshift',
+          onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
+          hide: isTestNetwork,
+          hideButton: buyingWithShapeshift,
+          hideTitle: buyingWithShapeshift,
+          onBackClick: () => this.setState({ buyingWithShapeshift: false }),
+          showBackButton: this.state.buyingWithShapeshift,
+          className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
         }),
-        title: SHAPESHIFT_ROW_TITLE,
-        text: SHAPESHIFT_ROW_TEXT,
-        buttonLabel: 'Buy with Shapeshift',
-        onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
-        hide: isTestNetwork,
-        hideButton: buyingWithShapeshift,
-        hideTitle: buyingWithShapeshift,
-        onBackClick: () => this.setState({ buyingWithShapeshift: false }),
-        showBackButton: this.state.buyingWithShapeshift,
-        className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
-      }),
 
-      buyingWithShapeshift && h(ShapeshiftForm),
+        buyingWithShapeshift && h(ShapeshiftForm),
+
+      ]),
 
     ]),
   ])
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 8e9e58985..ffe669610 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -92,18 +92,20 @@ const MODALS = {
       display: 'flex',
     },
     laptopModalStyle: {
-      width: '900px',
-      maxWidth: '900px',
+      width: '850px',
       top: 'calc(10% + 10px)',
       left: '0',
       right: '0',
       margin: '0 auto',
       boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
-      borderRadius: '8px',
+      borderRadius: '7px',
       transform: 'none',
+      height: 'calc(80% - 20px)',
+      overflowY: 'hidden',
     },
     contentStyle: {
-      borderRadius: '8px',
+      borderRadius: '7px',
+      height: '100%',
     },
   },
 
-- 
cgit v1.2.3


From f805a2eb735ea2ae93e91df0d35c6856987fa734 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 02:31:35 -0230
Subject: Fix gas calculation and nonce / forceGasMin state setting errors;
 retry button shows on correct tx.

---
 ui/app/components/customize-gas-modal/index.js     |  6 +--
 ui/app/components/pending-tx/confirm-send-ether.js | 52 +++++++++++++---------
 ui/app/components/tx-list-item.js                  |  6 ++-
 3 files changed, 39 insertions(+), 25 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 34a93d6c6..2bac57253 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -117,9 +117,9 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
     updateSendAmount(maxAmount)
   }
 
-  updateGasPrice(gasPrice)
-  updateGasLimit(gasLimit)
-  updateGasTotal(gasTotal)
+  updateGasPrice(ethUtil.addHexPrefix(gasPrice))
+  updateGasLimit(ethUtil.addHexPrefix(gasLimit))
+  updateGasTotal(ethUtil.addHexPrefix(gasTotal))
   hideModal()
 }
 
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index ec61d66b4..b1e3a0374 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -8,7 +8,11 @@ const Identicon = require('../identicon')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
-const { conversionUtil, addCurrencies } = require('../../conversion-util')
+const {
+  conversionUtil,
+  addCurrencies,
+  multiplyCurrencies
+} = require('../../conversion-util')
 const GasFeeDisplay = require('../send/gas-fee-display-v2')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
@@ -37,7 +41,7 @@ function mapDispatchToProps (dispatch) {
   return {
     clearSend: () => dispatch(actions.clearSend()),
     editTransaction: txMeta => {
-      const { id, txParams, lastGasPrice } = txMeta
+      const { id, txParams } = txMeta
       const {
         gas: gasLimit,
         gasPrice,
@@ -45,21 +49,6 @@ function mapDispatchToProps (dispatch) {
         value: amount,
       } = txParams
 
-      let forceGasMin
-      let nonce
-      if (lastGasPrice) {
-        const stripped = ethUtil.stripHexPrefix(lastGasPrice)
-        forceGasMin = ethUtil.addHexPrefix(addCurrencies(stripped, MIN_GAS_PRICE_HEX, {
-          aBase: 16,
-          bBase: 16,
-          toNumericBase: 'hex',
-          fromDenomination: 'WEI',
-          toDenomination: 'GWEI',
-        }))
-
-        nonce = txParams.nonce
-      }
-
       dispatch(actions.updateSend({
         gasLimit,
         gasPrice,
@@ -68,21 +57,36 @@ function mapDispatchToProps (dispatch) {
         amount,
         errors: { to: null, amount: null },
         editingTransactionId: id,
-        forceGasMin,
-        nonce,
       }))
       dispatch(actions.showSendPage())
     },
     cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
     showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => {
-      const { id, txParams } = txMeta
+      const { id, txParams, lastGasPrice } = txMeta
       const { gas: txGasLimit, gasPrice: txGasPrice } = txParams
 
+      let forceGasMin
+      let nonce
+      if (lastGasPrice) {
+        const stripped = ethUtil.stripHexPrefix(lastGasPrice)
+        forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, {
+          multiplicandBase: 16,
+          multiplierBase: 10,
+          toNumericBase: 'hex',
+          fromDenomination: 'WEI',
+          toDenomination: 'GWEI',
+        }))
+
+        nonce = txParams.nonce
+      }
+
       dispatch(actions.updateSend({
         gasLimit: sendGasLimit || txGasLimit,
         gasPrice: sendGasPrice || txGasPrice,
         editingTransactionId: id,
         gasTotal: sendGasTotal,
+        forceGasMin,
+        nonce,
       }))
       dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
     },
@@ -493,6 +497,14 @@ ConfirmSendEther.prototype.gatherTxMeta = function () {
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
 
+  if (txData.lastGasPrice) {
+    const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
+    const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams
+
+    txData.txParams.gasPrice = sendGasPrice || txGasPrice
+    txData.txParams.gas = sendGasLimit || txGasLimit
+  }
+
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
 }
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 123f723be..f7d53709f 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -185,9 +185,11 @@ TxListItem.prototype.showRetryButton = function () {
   } = this.props
   const currentNonce = txParams.nonce
   const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce)
-  const isLastWithNonce = currentNonceTxs[currentNonceTxs.length - 1].id === transactionId
+  const currentStatusNonceTx = currentNonceTxs.filter(tx =>
+    tx.status !== 'rejected' && tx.status !== 'failed')
+  const isLastPassingWithNonce = currentStatusNonceTx[currentStatusNonceTx.length - 1].id === transactionId
 
-  return transactionStatus === 'submitted' && isLastWithNonce && Date.now() - transactionTime > 5000
+  return transactionStatus === 'submitted' && isLastPassingWithNonce && Date.now() - transactionTime > 30000
 }
 
 TxListItem.prototype.resubmit = function () {
-- 
cgit v1.2.3


From e6d1ce56e7b792957f7b5c3249ecf013752b87ed Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 03:11:45 -0230
Subject: Improve phrasing of copy.

---
 ui/app/components/pending-tx/confirm-send-ether.js | 2 +-
 ui/app/components/tx-list-item.js                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index b1e3a0374..8788a77f8 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -243,7 +243,7 @@ ConfirmSendEther.prototype.render = function () {
     totalInETH,
   } = this.getData()
 
-  const title = txMeta.lastGasPrice ? 'Overwrite Transaction' : 'Confirm'
+  const title = txMeta.lastGasPrice ? 'Reprice Transaction' : 'Confirm'
   const subtitle = txMeta.lastGasPrice
     ? 'Increase your gas fee to attempt to overwrite and speed up your transaction'
     : 'Please review your transaction.'
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index f7d53709f..62426252f 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -280,7 +280,7 @@ TxListItem.prototype.render = function () {
             event.stopPropagation()
             this.resubmit()
           },
-        }, 'Increase the gas on your transaction'),
+        }, 'Increase the gas price on your transaction'),
 
       ]),
 
-- 
cgit v1.2.3


From 179066fe6ba3eca002454981c5ef56df7bb142ab Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 03:26:37 -0230
Subject: Set txMeta.time to reflect time of tx approval.

---
 ui/app/components/pending-tx/confirm-send-ether.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 8788a77f8..899c2617c 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -457,7 +457,7 @@ ConfirmSendEther.prototype.render = function () {
 
 ConfirmSendEther.prototype.onSubmit = function (event) {
   event.preventDefault()
-  const txMeta = this.gatherTxMeta()
+  const txMeta = this.gatherTxMeta({ time: (new Date()).getTime() })
   const valid = this.checkValidity()
   this.setState({ valid, submitting: true })
 
@@ -492,7 +492,7 @@ ConfirmSendEther.prototype.getFormEl = function () {
 }
 
 // After a customizable state value has been updated,
-ConfirmSendEther.prototype.gatherTxMeta = function () {
+ConfirmSendEther.prototype.gatherTxMeta = function (opts) {
   const props = this.props
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
@@ -506,7 +506,7 @@ ConfirmSendEther.prototype.gatherTxMeta = function () {
   }
 
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
-  return txData
+  return Object.assign(txData, opts)
 }
 
 ConfirmSendEther.prototype.verifyGasParams = function () {
-- 
cgit v1.2.3


From b45ea44aa5eb35c5092d78bc888e884af70db7cb Mon Sep 17 00:00:00 2001
From: Thomas <tmashuang@gmail.com>
Date: Tue, 13 Mar 2018 10:28:33 -0700
Subject: Add missing opening parens to pag-container__subtitle

---
 ui/app/components/modals/deposit-ether-modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 1aa0e9247..26ff3ea03 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -115,7 +115,7 @@ DepositEtherModal.prototype.render = function () {
 
       h('div.page-container__title', [t('depositEther')]),
 
-      h'div.page-container__subtitle', [
+      h('div.page-container__subtitle', [
         t('needEtherInWallet'),
       ]),
 
-- 
cgit v1.2.3


From d6e4d2e80d05f64bb543e524c6288b8b7c33e4c1 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 21:09:04 -0230
Subject: Use new submittedTime field to correctly show retry button in old and
 new ui.

---
 ui/app/components/pending-tx/confirm-send-ether.js |  2 +-
 ui/app/components/tx-list-item.js                  | 10 +++++-----
 ui/app/components/tx-list.js                       |  6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 899c2617c..8fe58482b 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -11,7 +11,7 @@ const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const {
   conversionUtil,
   addCurrencies,
-  multiplyCurrencies
+  multiplyCurrencies,
 } = require('../../conversion-util')
 const GasFeeDisplay = require('../send/gas-fee-display-v2')
 
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 62426252f..941fcb69c 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -178,18 +178,18 @@ TxListItem.prototype.getSendTokenTotal = async function () {
 TxListItem.prototype.showRetryButton = function () {
   const {
     transactionStatus,
-    transactionTime,
+    transactionSubmittedTime,
     selectedAddressTxList,
     transactionId,
     txParams,
   } = this.props
   const currentNonce = txParams.nonce
   const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce)
-  const currentStatusNonceTx = currentNonceTxs.filter(tx =>
-    tx.status !== 'rejected' && tx.status !== 'failed')
-  const isLastPassingWithNonce = currentStatusNonceTx[currentStatusNonceTx.length - 1].id === transactionId
+  const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => transactionStatus === 'submitted')
+  const isLastSubmittedTxWithCurrentNonce =
+    currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1].id === transactionId
 
-  return transactionStatus === 'submitted' && isLastPassingWithNonce && Date.now() - transactionTime > 30000
+  return isLastSubmittedTxWithCurrentNonce && Date.now() - transactionSubmittedTime > 30000
 }
 
 TxListItem.prototype.resubmit = function () {
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 30f816d58..add70a266 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -77,7 +77,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
     transactionId: transaction.id,
     transactionHash: transaction.hash,
     transactionNetworkId: transaction.metamaskNetworkId,
-    transactionTime: transaction.time,
+    transactionSubmittedTime: transaction.transactionSubmittedTime,
   }
 
   const {
@@ -88,7 +88,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
     transactionId,
     transactionHash,
     transactionNetworkId,
-    transactionTime,
+    transactionSubmittedTime,
   } = props
   const { showConfTxPage } = this.props
 
@@ -103,7 +103,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
     transactionHash,
     conversionRate,
     tokenInfoGetter: this.tokenInfoGetter,
-    transactionTime,
+    transactionSubmittedTime,
   }
 
   const isUnapproved = transactionStatus === 'unapproved'
-- 
cgit v1.2.3


From e293b6349c522171db26c57e718c5213aa6d5cb3 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 21:11:50 -0230
Subject: Styling for dropped.

---
 ui/app/components/tx-list-item.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components')

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 941fcb69c..d2fc57b13 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -253,6 +253,7 @@ TxListItem.prototype.render = function () {
               className: classnames('tx-list-status', {
                 'tx-list-status--rejected': transactionStatus === 'rejected',
                 'tx-list-status--failed': transactionStatus === 'failed',
+                'tx-list-status--dropped': transactionStatus === 'dropped',
               }),
             },
               transactionStatus,
-- 
cgit v1.2.3


From 8c7988978f05fa57bba892efb42ae0036ce25771 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 21:32:22 -0230
Subject: Undefined check in  showRetryButton

---
 ui/app/components/tx-list-item.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index d2fc57b13..453f7e95c 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -186,10 +186,11 @@ TxListItem.prototype.showRetryButton = function () {
   const currentNonce = txParams.nonce
   const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce)
   const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => transactionStatus === 'submitted')
-  const isLastSubmittedTxWithCurrentNonce =
-    currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1].id === transactionId
+  const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1]
+  const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce
+    && lastSubmittedTxWithCurrentNonce.id === transactionId
 
-  return isLastSubmittedTxWithCurrentNonce && Date.now() - transactionSubmittedTime > 30000
+  return currentTxIsLatestWithNonce && Date.now() - submittedTime > 30000
 }
 
 TxListItem.prototype.resubmit = function () {
-- 
cgit v1.2.3


From 46ded45b8186c0b338f6cff811cd89c48ef1a5ab Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 21:38:08 -0230
Subject: Use correct var name in new-ui showRetryButton

---
 ui/app/components/tx-list-item.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 453f7e95c..ebf5db19f 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -190,7 +190,7 @@ TxListItem.prototype.showRetryButton = function () {
   const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce
     && lastSubmittedTxWithCurrentNonce.id === transactionId
 
-  return currentTxIsLatestWithNonce && Date.now() - submittedTime > 30000
+  return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000
 }
 
 TxListItem.prototype.resubmit = function () {
-- 
cgit v1.2.3


From c52253bb0eb8ab1c7c7e9c0e7002d5ada42d53d6 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 21:57:23 -0230
Subject: Use correct name for submittedTime field in tx-list.js

---
 ui/app/components/tx-list.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index add70a266..782de0266 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -77,7 +77,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
     transactionId: transaction.id,
     transactionHash: transaction.hash,
     transactionNetworkId: transaction.metamaskNetworkId,
-    transactionSubmittedTime: transaction.transactionSubmittedTime,
+    transactionSubmittedTime: transaction.submittedTime,
   }
 
   const {
-- 
cgit v1.2.3


From 0d33aed20e3f3eea68e7d0cb41fbfb0d80415000 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 23:29:47 -0230
Subject: Fix tx-list-item submitted check.

---
 ui/app/components/tx-list-item.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index ebf5db19f..b7f7c5ab4 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -185,7 +185,7 @@ TxListItem.prototype.showRetryButton = function () {
   } = this.props
   const currentNonce = txParams.nonce
   const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce)
-  const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => transactionStatus === 'submitted')
+  const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted')
   const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1]
   const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce
     && lastSubmittedTxWithCurrentNonce.id === transactionId
-- 
cgit v1.2.3


From e94a14ef8aee8a80a4d21ed8cb1d5b680296eb0b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 23:44:05 -0230
Subject: Make token confirmations compatible.

---
 ui/app/components/pending-tx/confirm-send-token.js | 85 +++++++++++++++++++---
 ui/app/components/tx-list-item.js                  | 17 ++++-
 2 files changed, 88 insertions(+), 14 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index e4b0c186a..4ce6a7bc3 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -8,6 +8,7 @@ abiDecoder.addABI(tokenAbi)
 const actions = require('../../actions')
 const clone = require('clone')
 const Identicon = require('../identicon')
+const GasFeeDisplay = require('../send/gas-fee-display-v2.js')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const {
@@ -88,6 +89,42 @@ function mapDispatchToProps (dispatch, ownProps) {
       }))
       dispatch(actions.showSendTokenPage())
     },
+    showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => {
+      const { id, txParams, lastGasPrice } = txMeta
+      const { gas: txGasLimit, gasPrice: txGasPrice } = txParams
+      const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+      const { params = [] } = tokenData
+      const { value: to } = params[0] || {}
+      const { value: tokenAmountInDec } = params[1] || {}
+      const tokenAmountInHex = conversionUtil(tokenAmountInDec, {
+        fromNumericBase: 'dec',
+        toNumericBase: 'hex',
+      })
+    
+      let forceGasMin
+      let nonce
+      if (lastGasPrice) {
+        const stripped = ethUtil.stripHexPrefix(lastGasPrice)
+        forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, {
+          multiplicandBase: 16,
+          multiplierBase: 10,
+          toNumericBase: 'hex',
+          fromDenomination: 'WEI',
+          toDenomination: 'GWEI',
+        }))
+      }
+
+      dispatch(actions.updateSend({
+        gasLimit: sendGasLimit || txGasLimit,
+        gasPrice: sendGasPrice || txGasPrice,
+        editingTransactionId: id,
+        gasTotal: sendGasTotal,
+        to,
+        amount: tokenAmountInHex,
+        forceGasMin,
+      }))
+      dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
+    },
   }
 }
 
@@ -187,6 +224,7 @@ ConfirmSendToken.prototype.getGasFee = function () {
     token: tokenExchangeRate
       ? tokenGas
       : null,
+    gasFeeInHex: gasTotal.toString(16),
   }
 }
 
@@ -239,19 +277,31 @@ ConfirmSendToken.prototype.renderHeroAmount = function () {
 }
 
 ConfirmSendToken.prototype.renderGasFee = function () {
-  const { token: { symbol }, currentCurrency } = this.props
-  const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee()
+  const {
+    token: { symbol },
+    currentCurrency: convertedCurrency,
+    conversionRate,
+    send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice },
+    showCustomizeGasModal,
+  } = this.props
+  const txMeta = this.gatherTxMeta()
+  const {
+    fiat: fiatGas,
+    token: tokenGas,
+    eth: ethGas,
+    gasFeeInHex
+  } = this.getGasFee()
 
   return (
     h('section.flex-row.flex-center.confirm-screen-row', [
       h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
       h('div.confirm-screen-section-column', [
-        h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`),
-
-        h(
-          'div.confirm-screen-row-detail',
-          tokenGas ? `${tokenGas} ${symbol}` : `${ethGas} ETH`
-        ),
+        h(GasFeeDisplay, {
+          gasTotal: gasTotal || gasFeeInHex,
+          conversionRate,
+          convertedCurrency,
+          onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal),
+        }),
       ]),
     ])
   )
@@ -307,16 +357,21 @@ ConfirmSendToken.prototype.render = function () {
 
   this.inputs = []
 
+  const title = txMeta.lastGasPrice ? 'Reprice Transaction' : 'Confirm'
+  const subtitle = txMeta.lastGasPrice
+    ? 'Increase your gas fee to attempt to overwrite and speed up your transaction'
+    : 'Please review your transaction.'
+
   return (
     h('div.confirm-screen-container.confirm-send-token', [
       // Main Send token Card
       h('div.page-container', [
         h('div.page-container__header', [
-          h('button.confirm-screen-back-button', {
+          !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
           }, 'Edit'),
-          h('div.page-container__title', 'Confirm'),
-          h('div.page-container__subtitle', `Please review your transaction.`),
+          h('div.page-container__title', title),
+          h('div.page-container__subtitle', subtitle),
         ]),
         h('div.flex-row.flex-center.confirm-screen-identicons', [
           h('div.confirm-screen-account-wrapper', [
@@ -438,6 +493,14 @@ ConfirmSendToken.prototype.gatherTxMeta = function () {
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
 
+  if (txData.lastGasPrice) {
+    const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
+    const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams
+
+    txData.txParams.gasPrice = sendGasPrice || txGasPrice
+    txData.txParams.gas = sendGasLimit || txGasLimit
+  }
+
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
 }
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index b7f7c5ab4..0b826e909 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -28,6 +28,7 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
+    setSelectedToken: tokenAddress => dispatch(actions.setSelectedToken(tokenAddress)),
     retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
   }
 }
@@ -39,6 +40,7 @@ function TxListItem () {
   this.state = {
     total: null,
     fiatTotal: null,
+    isTokenTx: null,
   }
 }
 
@@ -47,12 +49,13 @@ TxListItem.prototype.componentDidMount = async function () {
 
   const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
   const { name: txDataName } = decodedData || {}
+  const isTokenTx = txDataName === 'transfer'
 
-  const { total, fiatTotal } = txDataName === 'transfer'
+  const { total, fiatTotal } = isTokenTx
     ? await this.getSendTokenTotal()
     : this.getSendEtherTotal()
 
-  this.setState({ total, fiatTotal })
+  this.setState({ total, fiatTotal, isTokenTx  })
 }
 
 TxListItem.prototype.getAddressText = function () {
@@ -193,6 +196,10 @@ TxListItem.prototype.showRetryButton = function () {
   return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000
 }
 
+TxListItem.prototype.setSelectedToken = function (tokenAddress) {
+  this.props.setSelectedToken(tokenAddress)
+}
+
 TxListItem.prototype.resubmit = function () {
   const { transactionId } = this.props
   this.props.retryTransaction(transactionId)
@@ -207,8 +214,9 @@ TxListItem.prototype.render = function () {
     dateString,
     address,
     className,
+    txParams,
   } = this.props
-  const { total, fiatTotal } = this.state
+  const { total, fiatTotal, isTokenTx } = this.state
   const showFiatTotal = transactionAmount !== '0x0' && fiatTotal
 
   return h(`div${className || ''}`, {
@@ -280,6 +288,9 @@ TxListItem.prototype.render = function () {
         h('span.tx-list-item-retry-link', {
           onClick: (event) => {
             event.stopPropagation()
+            if (isTokenTx) {
+              this.setSelectedToken(txParams.to)
+            }
             this.resubmit()
           },
         }, 'Increase the gas price on your transaction'),
-- 
cgit v1.2.3


From c37684d7bde00adcb4b2e43db16be91978e2ef12 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 23:49:10 -0230
Subject: Remove unnecessary addition of nonce to state.

---
 ui/app/components/pending-tx/confirm-send-ether.js | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 8fe58482b..f3f7e86c5 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -76,8 +76,6 @@ function mapDispatchToProps (dispatch) {
           fromDenomination: 'WEI',
           toDenomination: 'GWEI',
         }))
-
-        nonce = txParams.nonce
       }
 
       dispatch(actions.updateSend({
@@ -86,7 +84,6 @@ function mapDispatchToProps (dispatch) {
         editingTransactionId: id,
         gasTotal: sendGasTotal,
         forceGasMin,
-        nonce,
       }))
       dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' }))
     },
-- 
cgit v1.2.3


From cc267d6c818c83b0384b569733d05efef384ac3e Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 13 Mar 2018 23:56:45 -0230
Subject: Fix more lint errors.

---
 ui/app/components/pending-tx/confirm-send-ether.js | 1 -
 ui/app/components/pending-tx/confirm-send-token.js | 9 +--------
 ui/app/components/tx-list-item.js                  | 3 +--
 3 files changed, 2 insertions(+), 11 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index f3f7e86c5..4666e047d 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -66,7 +66,6 @@ function mapDispatchToProps (dispatch) {
       const { gas: txGasLimit, gasPrice: txGasPrice } = txParams
 
       let forceGasMin
-      let nonce
       if (lastGasPrice) {
         const stripped = ethUtil.stripHexPrefix(lastGasPrice)
         forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, {
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 4ce6a7bc3..476c1d259 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -102,7 +102,6 @@ function mapDispatchToProps (dispatch, ownProps) {
       })
     
       let forceGasMin
-      let nonce
       if (lastGasPrice) {
         const stripped = ethUtil.stripHexPrefix(lastGasPrice)
         forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, {
@@ -278,19 +277,13 @@ ConfirmSendToken.prototype.renderHeroAmount = function () {
 
 ConfirmSendToken.prototype.renderGasFee = function () {
   const {
-    token: { symbol },
     currentCurrency: convertedCurrency,
     conversionRate,
     send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice },
     showCustomizeGasModal,
   } = this.props
   const txMeta = this.gatherTxMeta()
-  const {
-    fiat: fiatGas,
-    token: tokenGas,
-    eth: ethGas,
-    gasFeeInHex
-  } = this.getGasFee()
+  const { gasFeeInHex } = this.getGasFee()
 
   return (
     h('section.flex-row.flex-center.confirm-screen-row', [
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 0b826e909..4c2b77af9 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -55,7 +55,7 @@ TxListItem.prototype.componentDidMount = async function () {
     ? await this.getSendTokenTotal()
     : this.getSendEtherTotal()
 
-  this.setState({ total, fiatTotal, isTokenTx  })
+  this.setState({ total, fiatTotal, isTokenTx })
 }
 
 TxListItem.prototype.getAddressText = function () {
@@ -180,7 +180,6 @@ TxListItem.prototype.getSendTokenTotal = async function () {
 
 TxListItem.prototype.showRetryButton = function () {
   const {
-    transactionStatus,
     transactionSubmittedTime,
     selectedAddressTxList,
     transactionId,
-- 
cgit v1.2.3


From edd5c38492c76a698909cc80051584348615e795 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 14 Mar 2018 12:34:13 -0230
Subject: Fix translations whose substitutions params were not in arrays.

---
 ui/app/components/shapeshift-form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index f75d6176e..3f8c17932 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -143,7 +143,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
   return h('div.shapeshift-form', {}, [
 
     h('div.shapeshift-form__deposit-instruction', [
-      t('depositCoin', depositCoin.toUpperCase()),
+      t('depositCoin', [depositCoin.toUpperCase()]),
     ]),
 
     h('div', depositAddress),
-- 
cgit v1.2.3


From fb838da7340d460650750cb8ea5fa3fb6fe319de Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 14 Mar 2018 17:07:09 -0230
Subject: Revert 'Set txMeta.time to reflect time of tx approval.'

---
 ui/app/components/pending-tx/confirm-send-ether.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 6624a378d..9b9a4e4ea 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -454,7 +454,7 @@ ConfirmSendEther.prototype.render = function () {
 
 ConfirmSendEther.prototype.onSubmit = function (event) {
   event.preventDefault()
-  const txMeta = this.gatherTxMeta({ time: (new Date()).getTime() })
+  const txMeta = this.gatherTxMeta()
   const valid = this.checkValidity()
   this.setState({ valid, submitting: true })
 
@@ -489,7 +489,7 @@ ConfirmSendEther.prototype.getFormEl = function () {
 }
 
 // After a customizable state value has been updated,
-ConfirmSendEther.prototype.gatherTxMeta = function (opts) {
+ConfirmSendEther.prototype.gatherTxMeta = function () {
   const props = this.props
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
@@ -503,7 +503,7 @@ ConfirmSendEther.prototype.gatherTxMeta = function (opts) {
   }
 
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
-  return Object.assign(txData, opts)
+  return txData
 }
 
 ConfirmSendEther.prototype.verifyGasParams = function () {
-- 
cgit v1.2.3


From a4c6a5e92e09b70db2e9ab92a8123176de127910 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 14 Mar 2018 17:10:59 -0230
Subject: Ensure changes from customize gas modal opened from confirm screen
 are captured for non-tx transactions.

---
 ui/app/components/pending-tx/confirm-send-ether.js | 10 ++++------
 ui/app/components/pending-tx/confirm-send-token.js | 10 ++++------
 2 files changed, 8 insertions(+), 12 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 9b9a4e4ea..928149ccd 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -494,13 +494,11 @@ ConfirmSendEther.prototype.gatherTxMeta = function () {
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
 
-  if (txData.lastGasPrice) {
-    const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
-    const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams
+  const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
+  const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams
 
-    txData.txParams.gasPrice = sendGasPrice || txGasPrice
-    txData.txParams.gas = sendGasLimit || txGasLimit
-  }
+  txData.txParams.gasPrice = sendGasPrice || txGasPrice
+  txData.txParams.gas = sendGasLimit || txGasLimit
 
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index ac773b1d2..fe323ffd3 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -487,13 +487,11 @@ ConfirmSendToken.prototype.gatherTxMeta = function () {
   const state = this.state
   const txData = clone(state.txData) || clone(props.txData)
 
-  if (txData.lastGasPrice) {
-    const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
-    const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams
+  const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
+  const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams
 
-    txData.txParams.gasPrice = sendGasPrice || txGasPrice
-    txData.txParams.gas = sendGasLimit || txGasLimit
-  }
+  txData.txParams.gasPrice = sendGasPrice || txGasPrice
+  txData.txParams.gas = sendGasLimit || txGasLimit
 
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
-- 
cgit v1.2.3


From 66422cd083e86582b44d19664e6c6fc95bdb8ce5 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 14 Mar 2018 18:50:18 -0230
Subject: Force gas min has correct precision and is set when editing gas if
 max.

---
 ui/app/components/customize-gas-modal/index.js     | 7 ++++++-
 ui/app/components/pending-tx/confirm-send-ether.js | 4 +---
 ui/app/components/pending-tx/confirm-send-token.js | 4 +---
 3 files changed, 8 insertions(+), 7 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 291447bb4..d8384c19d 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -233,6 +233,7 @@ CustomizeGasModal.prototype.render = function () {
 
   convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}`
 
+  let newGasPrice = gasPrice
   if (forceGasMin) {
     const convertedMinPrice = conversionUtil(forceGasMin, {
       fromNumericBase: 'hex',
@@ -242,6 +243,10 @@ CustomizeGasModal.prototype.render = function () {
       { value: convertedMinPrice, fromNumericBase: 'dec' },
       { value: convertedGasPrice, fromNumericBase: 'dec' }
     )
+    newGasPrice = conversionMax(
+      { value: gasPrice, fromNumericBase: 'hex' },
+      { value: forceGasMin, fromNumericBase: 'hex' }
+    )
   }
 
   const convertedGasLimit = conversionUtil(gasLimit, {
@@ -302,7 +307,7 @@ CustomizeGasModal.prototype.render = function () {
           }, [t('cancel')]),
 
           h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, {
-            onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal),
+            onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
           }, [t('save')]),
         ]),
 
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 928149ccd..dca39f0a5 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -68,13 +68,11 @@ function mapDispatchToProps (dispatch) {
 
       let forceGasMin
       if (lastGasPrice) {
-        const stripped = ethUtil.stripHexPrefix(lastGasPrice)
-        forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, {
+        forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
           multiplicandBase: 16,
           multiplierBase: 10,
           toNumericBase: 'hex',
           fromDenomination: 'WEI',
-          toDenomination: 'GWEI',
         }))
       }
 
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index fe323ffd3..6035dd801 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -104,13 +104,11 @@ function mapDispatchToProps (dispatch, ownProps) {
     
       let forceGasMin
       if (lastGasPrice) {
-        const stripped = ethUtil.stripHexPrefix(lastGasPrice)
-        forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, {
+        forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
           multiplicandBase: 16,
           multiplierBase: 10,
           toNumericBase: 'hex',
           fromDenomination: 'WEI',
-          toDenomination: 'GWEI',
         }))
       }
 
-- 
cgit v1.2.3


From b0122be3c960b68620c5769ca969db60e4a45351 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 14 Mar 2018 19:03:14 -0230
Subject: Set retry gasPrice to forceGasMin on confirm screen in cases where
 gas is not edited.

---
 ui/app/components/pending-tx/confirm-send-ether.js | 19 +++++++++++++++++--
 ui/app/components/pending-tx/confirm-send-token.js | 19 +++++++++++++++++--
 2 files changed, 34 insertions(+), 4 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index dca39f0a5..a4763eab7 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -493,9 +493,24 @@ ConfirmSendEther.prototype.gatherTxMeta = function () {
   const txData = clone(state.txData) || clone(props.txData)
 
   const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
-  const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams
+  const {
+    lastGasPrice,
+    txParams: {
+      gasPrice: txGasPrice,
+      gas: txGasLimit,
+    },
+  } = txData
+
+  let forceGasMin
+  if (lastGasPrice) {
+    forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
+      multiplicandBase: 16,
+      multiplierBase: 10,
+      toNumericBase: 'hex',
+    }))
+  }
 
-  txData.txParams.gasPrice = sendGasPrice || txGasPrice
+  txData.txParams.gasPrice = sendGasPrice || forceGasMin || txGasPrice
   txData.txParams.gas = sendGasLimit || txGasLimit
 
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 6035dd801..f1142b142 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -486,9 +486,24 @@ ConfirmSendToken.prototype.gatherTxMeta = function () {
   const txData = clone(state.txData) || clone(props.txData)
 
   const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send
-  const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams
+  const {
+    lastGasPrice,
+    txParams: {
+      gasPrice: txGasPrice,
+      gas: txGasLimit,
+    },
+  } = txData
+
+  let forceGasMin
+  if (lastGasPrice) {
+    forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, {
+      multiplicandBase: 16,
+      multiplierBase: 10,
+      toNumericBase: 'hex',
+    }))
+  }
 
-  txData.txParams.gasPrice = sendGasPrice || txGasPrice
+  txData.txParams.gasPrice = sendGasPrice || forceGasMin || txGasPrice
   txData.txParams.gas = sendGasLimit || txGasLimit
 
   // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
-- 
cgit v1.2.3


From 66193c823cdbb9474cbc3ed9e1c4ab7a28b9b230 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Thu, 15 Mar 2018 09:20:22 -0700
Subject: Update Deposit Eth icon (#3569)

---
 ui/app/components/modals/deposit-ether-modal.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 26ff3ea03..23e8666af 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -128,13 +128,15 @@ DepositEtherModal.prototype.render = function () {
       }),
 
     ]),
-    
+
     h('.page-container__content', {}, [
-    
+
       h('div.deposit-ether-modal__buy-rows', [
 
         this.renderRow({
-          logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
+          logo: h('img.deposit-ether-modal__logo', {
+            src: '../../../images/deposit-eth.svg',
+          }),
           title: DIRECT_DEPOSIT_ROW_TITLE,
           text: DIRECT_DEPOSIT_ROW_TEXT,
           buttonLabel: t('viewAccount'),
@@ -164,7 +166,7 @@ DepositEtherModal.prototype.render = function () {
           onButtonClick: () => toCoinbase(address),
           hide: isTestNetwork || buyingWithShapeshift,
         }),
-        
+
         this.renderRow({
           logo: h('div.deposit-ether-modal__logo', {
             style: {
-- 
cgit v1.2.3


From a348b60735f945e3a593256bbd016dc6deee8e36 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 16 Mar 2018 13:02:07 -0230
Subject: Currency input defaults to empty string

---
 ui/app/components/currency-input.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/currency-input.js b/ui/app/components/currency-input.js
index 6f7862e51..940238fa5 100644
--- a/ui/app/components/currency-input.js
+++ b/ui/app/components/currency-input.js
@@ -8,8 +8,12 @@ inherits(CurrencyInput, Component)
 function CurrencyInput (props) {
   Component.call(this)
 
+  const sanitizedValue = sanitizeValue(props.value)
+
   this.state = {
-    value: sanitizeValue(props.value),
+    value: sanitizedValue,
+    emptyState: false,
+    focused: false,
   }
 }
 
@@ -58,9 +62,11 @@ CurrencyInput.prototype.handleChange = function (newValue) {
   if (value === '0' && newValue[newValueLastIndex] === '0') {
     parsedValue = parsedValue.slice(0, newValueLastIndex)
   }
-
   const sanitizedValue = sanitizeValue(parsedValue)
-  this.setState({ value: sanitizedValue })
+  this.setState({
+    value: sanitizedValue,
+    emptyState: newValue === '' && sanitizedValue === '0',
+  })
   onInputChange(sanitizedValue)
 }
 
@@ -86,17 +92,19 @@ CurrencyInput.prototype.render = function () {
     readOnly,
     inputRef,
   } = this.props
+  const { emptyState, focused } = this.state
 
   const inputSizeMultiplier = readOnly ? 1 : 1.2
 
   const valueToRender = this.getValueToRender()
-
   return h('input', {
     className,
-    value: valueToRender,
-    placeholder,
+    value: emptyState ? '' : valueToRender,
+    placeholder: focused ? '' : placeholder,
     size: valueToRender.length * inputSizeMultiplier,
     readOnly,
+    onFocus: () => this.setState({ focused: true, emptyState: valueToRender === '0' }),
+    onBlur: () => this.setState({ focused: false, emptyState: false }),
     onChange: e => this.handleChange(e.target.value),
     ref: inputRef,
   })
-- 
cgit v1.2.3


From 6f749e5576cb981a469d0cf969b15901bcc05cfa Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Fri, 16 Mar 2018 13:09:49 -0700
Subject: Update Confirm Contract screen (#3597)

---
 ui/app/components/modals/deposit-ether-modal.js    |   2 +-
 .../pending-tx/confirm-deploy-contract.js          | 587 +++++++++++----------
 ui/app/components/sender-to-recipient.js           |  45 ++
 3 files changed, 340 insertions(+), 294 deletions(-)
 create mode 100644 ui/app/components/sender-to-recipient.js

(limited to 'ui/app/components')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 23e8666af..b642513d7 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -109,7 +109,7 @@ DepositEtherModal.prototype.render = function () {
   const isTestNetwork = ['3', '4', '42'].find(n => n === network)
   const networkName = networkNames[network]
 
-  return h('div.page-container.page-container--full-width', {}, [
+  return h('div.page-container.page-container--full-width.page-container--full-height', {}, [
 
     h('div.page-container__header', [
 
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index 49fbe6387..e7c4c536b 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -1,349 +1,350 @@
-const Component = require('react').Component
+const { Component } = require('react')
 const { connect } = require('react-redux')
 const h = require('react-hyperscript')
-const inherits = require('util').inherits
+const PropTypes = require('prop-types')
 const actions = require('../../actions')
 const clone = require('clone')
-const Identicon = require('../identicon')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil } = require('../../conversion-util')
 const t = require('../../../i18n')
+const SenderToRecipient = require('../sender-to-recipient')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
+class ConfirmDeployContract extends Component {
+  constructor (props) {
+    super(props)
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
-
-function mapStateToProps (state) {
-  const {
-    conversionRate,
-    identities,
-    currentCurrency,
-  } = state.metamask
-  const accounts = state.metamask.accounts
-  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
-  return {
-    currentCurrency,
-    conversionRate,
-    identities,
-    selectedAddress,
+    this.state = {
+      valid: false,
+      submitting: false,
+    }
   }
-}
 
-function mapDispatchToProps (dispatch) {
-  return {
-    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
-    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+  onSubmit (event) {
+    event.preventDefault()
+    const txMeta = this.gatherTxMeta()
+    const valid = this.checkValidity()
+    this.setState({ valid, submitting: true })
+
+    if (valid && this.verifyGasParams()) {
+      this.props.sendTransaction(txMeta, event)
+    } else {
+      this.props.displayWarning('invalidGasParams')
+      this.setState({ submitting: false })
+    }
   }
-}
-
 
-inherits(ConfirmDeployContract, Component)
-function ConfirmDeployContract () {
-  Component.call(this)
-  this.state = {}
-  this.onSubmit = this.onSubmit.bind(this)
-}
+  cancel (event, txMeta) {
+    event.preventDefault()
+    this.props.cancelTransaction(txMeta)
+  }
 
-ConfirmDeployContract.prototype.onSubmit = function (event) {
-  event.preventDefault()
-  const txMeta = this.gatherTxMeta()
-  const valid = this.checkValidity()
-  this.setState({ valid, submitting: true })
-
-  if (valid && this.verifyGasParams()) {
-    this.props.sendTransaction(txMeta, event)
-  } else {
-    this.props.dispatch(actions.displayWarning(t('invalidGasParams')))
-    this.setState({ submitting: false })
+  checkValidity () {
+    const form = this.getFormEl()
+    const valid = form.checkValidity()
+    return valid
   }
-}
 
-ConfirmDeployContract.prototype.cancel = function (event, txMeta) {
-  event.preventDefault()
-  this.props.cancelTransaction(txMeta)
-}
+  getFormEl () {
+    const form = document.querySelector('form#pending-tx-form')
+    // Stub out form for unit tests:
+    if (!form) {
+      return { checkValidity () { return true } }
+    }
+    return form
+  }
 
-ConfirmDeployContract.prototype.checkValidity = function () {
-  const form = this.getFormEl()
-  const valid = form.checkValidity()
-  return valid
-}
+  // After a customizable state value has been updated,
+  gatherTxMeta () {
+    const props = this.props
+    const state = this.state
+    const txData = clone(state.txData) || clone(props.txData)
 
-ConfirmDeployContract.prototype.getFormEl = function () {
-  const form = document.querySelector('form#pending-tx-form')
-  // Stub out form for unit tests:
-  if (!form) {
-    return { checkValidity () { return true } }
+    // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
+    return txData
   }
-  return form
-}
-
-// After a customizable state value has been updated,
-ConfirmDeployContract.prototype.gatherTxMeta = function () {
-  const props = this.props
-  const state = this.state
-  const txData = clone(state.txData) || clone(props.txData)
 
-  // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
-  return txData
-}
+  verifyGasParams () {
+    // We call this in case the gas has not been modified at all
+    if (!this.state) { return true }
+    return (
+      this._notZeroOrEmptyString(this.state.gas) &&
+      this._notZeroOrEmptyString(this.state.gasPrice)
+    )
+  }
 
-ConfirmDeployContract.prototype.verifyGasParams = function () {
-  // We call this in case the gas has not been modified at all
-  if (!this.state) { return true }
-  return (
-    this._notZeroOrEmptyString(this.state.gas) &&
-    this._notZeroOrEmptyString(this.state.gasPrice)
-  )
-}
+  _notZeroOrEmptyString (obj) {
+    return obj !== '' && obj !== '0x0'
+  }
 
-ConfirmDeployContract.prototype._notZeroOrEmptyString = function (obj) {
-  return obj !== '' && obj !== '0x0'
-}
+  bnMultiplyByFraction (targetBN, numerator, denominator) {
+    const numBN = new BN(numerator)
+    const denomBN = new BN(denominator)
+    return targetBN.mul(numBN).div(denomBN)
+  }
 
-ConfirmDeployContract.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
-  const numBN = new BN(numerator)
-  const denomBN = new BN(denominator)
-  return targetBN.mul(numBN).div(denomBN)
-}
+  getData () {
+    const { identities } = this.props
+    const txMeta = this.gatherTxMeta()
+    const txParams = txMeta.txParams || {}
+
+    return {
+      from: {
+        address: txParams.from,
+        name: identities[txParams.from].name,
+      },
+      memo: txParams.memo || '',
+    }
+  }
 
-ConfirmDeployContract.prototype.getData = function () {
-  const { identities } = this.props
-  const txMeta = this.gatherTxMeta()
-  const txParams = txMeta.txParams || {}
+  getAmount () {
+    const { conversionRate, currentCurrency } = this.props
+    const txMeta = this.gatherTxMeta()
+    const txParams = txMeta.txParams || {}
+
+    const FIAT = conversionUtil(txParams.value, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      fromCurrency: 'ETH',
+      toCurrency: currentCurrency,
+      numberOfDecimals: 2,
+      fromDenomination: 'WEI',
+      conversionRate,
+    })
+    const ETH = conversionUtil(txParams.value, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      fromCurrency: 'ETH',
+      toCurrency: 'ETH',
+      fromDenomination: 'WEI',
+      conversionRate,
+      numberOfDecimals: 6,
+    })
+
+    return {
+      fiat: Number(FIAT),
+      token: Number(ETH),
+    }
 
-  return {
-    from: {
-      address: txParams.from,
-      name: identities[txParams.from].name,
-    },
-    memo: txParams.memo || '',
   }
-}
-
-ConfirmDeployContract.prototype.getAmount = function () {
-  const { conversionRate, currentCurrency } = this.props
-  const txMeta = this.gatherTxMeta()
-  const txParams = txMeta.txParams || {}
-
-  const FIAT = conversionUtil(txParams.value, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromCurrency: 'ETH',
-    toCurrency: currentCurrency,
-    numberOfDecimals: 2,
-    fromDenomination: 'WEI',
-    conversionRate,
-  })
-  const ETH = conversionUtil(txParams.value, {
-    fromNumericBase: 'hex',
-    toNumericBase: 'dec',
-    fromCurrency: 'ETH',
-    toCurrency: 'ETH',
-    fromDenomination: 'WEI',
-    conversionRate,
-    numberOfDecimals: 6,
-  })
 
-  return {
-    fiat: Number(FIAT),
-    token: Number(ETH),
+  getGasFee () {
+    const { conversionRate, currentCurrency } = this.props
+    const txMeta = this.gatherTxMeta()
+    const txParams = txMeta.txParams || {}
+
+    // Gas
+    const gas = txParams.gas
+    const gasBn = hexToBn(gas)
+
+    // Gas Price
+    const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX
+    const gasPriceBn = hexToBn(gasPrice)
+
+    const txFeeBn = gasBn.mul(gasPriceBn)
+
+    const FIAT = conversionUtil(txFeeBn, {
+      fromNumericBase: 'BN',
+      toNumericBase: 'dec',
+      fromDenomination: 'WEI',
+      fromCurrency: 'ETH',
+      toCurrency: currentCurrency,
+      numberOfDecimals: 2,
+      conversionRate,
+    })
+    const ETH = conversionUtil(txFeeBn, {
+      fromNumericBase: 'BN',
+      toNumericBase: 'dec',
+      fromDenomination: 'WEI',
+      fromCurrency: 'ETH',
+      toCurrency: 'ETH',
+      numberOfDecimals: 6,
+      conversionRate,
+    })
+
+    return {
+      fiat: Number(FIAT),
+      eth: Number(ETH),
+    }
   }
 
-}
+  renderGasFee () {
+    const { currentCurrency } = this.props
+    const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
 
-ConfirmDeployContract.prototype.getGasFee = function () {
-  const { conversionRate, currentCurrency } = this.props
-  const txMeta = this.gatherTxMeta()
-  const txParams = txMeta.txParams || {}
+    return (
+      h('section.flex-row.flex-center.confirm-screen-row', [
+        h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
+        h('div.confirm-screen-section-column', [
+          h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
 
-  // Gas
-  const gas = txParams.gas
-  const gasBn = hexToBn(gas)
+          h(
+            'div.confirm-screen-row-detail',
+            `${ethGas} ETH`
+          ),
+        ]),
+      ])
+    )
+  }
 
-  // Gas Price
-  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX
-  const gasPriceBn = hexToBn(gasPrice)
+  renderHeroAmount () {
+    const { currentCurrency } = this.props
+    const { fiat: fiatAmount } = this.getAmount()
+    const txMeta = this.gatherTxMeta()
+    const txParams = txMeta.txParams || {}
+    const { memo = '' } = txParams
+
+    return (
+      h('div.confirm-send-token__hero-amount-wrapper', [
+        h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`),
+        h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency.toUpperCase()),
+        h('div.flex-center.confirm-memo-wrapper', [
+          h('h3.confirm-screen-send-memo', memo),
+        ]),
+      ])
+    )
+  }
 
-  const txFeeBn = gasBn.mul(gasPriceBn)
+  renderTotalPlusGas () {
+    const { currentCurrency } = this.props
+    const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
+    const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
 
-  const FIAT = conversionUtil(txFeeBn, {
-    fromNumericBase: 'BN',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    fromCurrency: 'ETH',
-    toCurrency: currentCurrency,
-    numberOfDecimals: 2,
-    conversionRate,
-  })
-  const ETH = conversionUtil(txFeeBn, {
-    fromNumericBase: 'BN',
-    toNumericBase: 'dec',
-    fromDenomination: 'WEI',
-    fromCurrency: 'ETH',
-    toCurrency: 'ETH',
-    numberOfDecimals: 6,
-    conversionRate,
-  })
+    return (
+      h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
+        h('div.confirm-screen-section-column', [
+          h('span.confirm-screen-label', [ t('total') + ' ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+        ]),
 
-  return {
-    fiat: Number(FIAT),
-    eth: Number(ETH),
+        h('div.confirm-screen-section-column', [
+          h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency.toUpperCase()}`),
+          h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`),
+        ]),
+      ])
+    )
   }
-}
-
-ConfirmDeployContract.prototype.renderGasFee = function () {
-  const { currentCurrency } = this.props
-  const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
-
-  return (
-    h('section.flex-row.flex-center.confirm-screen-row', [
-      h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
-      h('div.confirm-screen-section-column', [
-        h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
-
-        h(
-          'div.confirm-screen-row-detail',
-          `${ethGas} ETH`
-        ),
-      ]),
-    ])
-  )
-}
 
-ConfirmDeployContract.prototype.renderHeroAmount = function () {
-  const { currentCurrency } = this.props
-  const { fiat: fiatAmount } = this.getAmount()
-  const txMeta = this.gatherTxMeta()
-  const txParams = txMeta.txParams || {}
-  const { memo = '' } = txParams
-
-  return (
-    h('div.confirm-send-token__hero-amount-wrapper', [
-      h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`),
-      h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency.toUpperCase()),
-      h('div.flex-center.confirm-memo-wrapper', [
-        h('h3.confirm-screen-send-memo', memo),
-      ]),
-    ])
-  )
-}
+  render () {
+    const { backToAccountDetail, selectedAddress } = this.props
+    const txMeta = this.gatherTxMeta()
 
-ConfirmDeployContract.prototype.renderTotalPlusGas = function () {
-  const { currentCurrency } = this.props
-  const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
-  const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
-
-  return (
-    h('section.flex-row.flex-center.confirm-screen-total-box ', [
-      h('div.confirm-screen-section-column', [
-        h('span.confirm-screen-label', [ t('total') + ' ' ]),
-        h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
-      ]),
-
-      h('div.confirm-screen-section-column', [
-        h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency.toUpperCase()}`),
-        h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`),
-      ]),
-    ])
-  )
-}
+    const {
+      from: {
+        address: fromAddress,
+        name: fromName,
+      },
+    } = this.getData()
 
-ConfirmDeployContract.prototype.render = function () {
-  const { backToAccountDetail, selectedAddress } = this.props
-  const txMeta = this.gatherTxMeta()
+    this.inputs = []
 
-  const {
-    from: {
-      address: fromAddress,
-      name: fromName,
-    },
-  } = this.getData()
-
-  this.inputs = []
-
-  return (
-    h('div.flex-column.flex-grow.confirm-screen-container', {
-      style: { minWidth: '355px' },
-    }, [
-      // Main Send token Card
-      h('div.confirm-screen-wrapper.flex-column.flex-grow', [
-        h('h3.flex-center.confirm-screen-header', [
-          h('button.confirm-screen-back-button.allcaps', {
+    return (
+      h('.page-container', [
+        h('.page-container__header', [
+          h('.page-container__back-button', {
             onClick: () => backToAccountDetail(selectedAddress),
           }, t('back')),
-          h('div.confirm-screen-title', t('confirmContract')),
-          h('div.confirm-screen-header-tip'),
-        ]),
-        h('div.flex-row.flex-center.confirm-screen-identicons', [
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: fromAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', fromName),
-            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
-          ]),
-          h('i.fa.fa-arrow-right.fa-lg'),
-          h('div.confirm-screen-account-wrapper', [
-            h('i.fa.fa-file-text-o'),
-            h('span.confirm-screen-account-name', t('newContract')),
-            h('span.confirm-screen-account-number', ' '),
-          ]),
+          h('.page-container__title', t('confirmContract')),
+          h('.page-container__subtitle', t('pleaseReviewTransaction')),
         ]),
+        // Main Send token Card
+        h('.page-container__content', [
+
+          h(SenderToRecipient, {
+            senderName: fromName,
+            senderAddress: fromAddress,
+          }),
+
+          // h('h3.flex-center.confirm-screen-sending-to-message', {
+          //   style: {
+          //     textAlign: 'center',
+          //     fontSize: '16px',
+          //   },
+          // }, [
+          //   `You're deploying a new contract.`,
+          // ]),
+
+          this.renderHeroAmount(),
+
+          h('div.confirm-screen-rows', [
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', fromName),
+                h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+              ]),
+            ]),
 
-        // h('h3.flex-center.confirm-screen-sending-to-message', {
-        //   style: {
-        //     textAlign: 'center',
-        //     fontSize: '16px',
-        //   },
-        // }, [
-        //   `You're deploying a new contract.`,
-        // ]),
-
-        this.renderHeroAmount(),
-
-        h('div.confirm-screen-rows', [
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', fromName),
-              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', t('newContract')),
+              ]),
             ]),
+
+            this.renderGasFee(),
+
+            this.renderTotalPlusGas(),
+
           ]),
+        ]),
 
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', t('newContract')),
-            ]),
+        h('form#pending-tx-form', {
+          onClick: event => this.onSubmit(event),
+        }, [
+          h('.page-container__footer', [
+            // Cancel Button
+            h('button.btn-cancel.page-container__footer-button.allcaps', {
+              onClick: event => this.cancel(event, txMeta),
+            }, t('cancel')),
+
+            // Accept Button
+            h('button.btn-confirm.page-container__footer-button.allcaps', {
+              onClick: event => this.onSubmit(event),
+            }, t('confirm')),
           ]),
+        ]),
+      ])
+    )
+  }
+}
 
-          this.renderGasFee(),
+ConfirmDeployContract.propTypes = {
+  sendTransaction: PropTypes.func,
+  cancelTransaction: PropTypes.func,
+  backToAccountDetail: PropTypes.func,
+  displayWarning: PropTypes.func,
+  identities: PropTypes.object,
+  conversionRate: PropTypes.number,
+  currentCurrency: PropTypes.string,
+  selectedAddress: PropTypes.string,
+}
 
-          this.renderTotalPlusGas(),
+const mapStateToProps = state => {
+  const {
+    conversionRate,
+    identities,
+    currentCurrency,
+  } = state.metamask
+  const accounts = state.metamask.accounts
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  return {
+    currentCurrency,
+    conversionRate,
+    identities,
+    selectedAddress,
+  }
+}
 
-        ]),
-      ]),
-
-      h('form#pending-tx-form', {
-        onSubmit: this.onSubmit,
-      }, [
-        // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
-          onClick: (event) => this.cancel(event, txMeta),
-        }, t('cancel')),
-
-        // Accept Button
-        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
-
-      ]),
-    ])
-  )
+const mapDispatchToProps = dispatch => {
+  return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+    displayWarning: warning => actions.displayWarning(t(warning)),
+  }
 }
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
diff --git a/ui/app/components/sender-to-recipient.js b/ui/app/components/sender-to-recipient.js
new file mode 100644
index 000000000..25b9c7d6b
--- /dev/null
+++ b/ui/app/components/sender-to-recipient.js
@@ -0,0 +1,45 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const t = require('../../i18n')
+const Identicon = require('./identicon')
+
+class SenderToRecipient extends Component {
+  render () {
+    const { senderName, senderAddress } = this.props
+
+    return (
+      h('.sender-to-recipient__container', [
+        h('.sender-to-recipient__sender', [
+          h('.sender-to-recipient__sender-icon', [
+            h(Identicon, {
+              address: senderAddress,
+              diameter: 20,
+            }),
+          ]),
+          h('.sender-to-recipient__name.sender-to-recipient__sender-name', senderName),
+        ]),
+        h('.sender-to-recipient__arrow-container', [
+          h('.sender-to-recipient__arrow-circle', [
+            h('img', {
+              height: 15,
+              width: 15,
+              src: '/images/arrow-right.svg',
+            }),
+          ]),
+        ]),
+        h('.sender-to-recipient__recipient', [
+          h('i.fa.fa-file-text-o'),
+          h('.sender-to-recipient__name.sender-to-recipient__recipient-name', t('newContract')),
+        ]),
+      ])
+    )
+  }
+}
+
+SenderToRecipient.propTypes = {
+  senderName: PropTypes.string,
+  senderAddress: PropTypes.string,
+}
+
+module.exports = SenderToRecipient
-- 
cgit v1.2.3


From 4512243290fc08f1202360ab3f5f0b2b21bb0393 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Fri, 16 Mar 2018 16:39:00 -0700
Subject: Fix styling on confirm-send-ether and confirm-send-token (#3600)

---
 .../pending-tx/confirm-deploy-contract.js          |   2 +-
 ui/app/components/pending-tx/confirm-send-ether.js | 320 +++++++++++----------
 ui/app/components/pending-tx/confirm-send-token.js | 134 ++++-----
 3 files changed, 231 insertions(+), 225 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index e7c4c536b..4810bb515 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -293,7 +293,7 @@ class ConfirmDeployContract extends Component {
         ]),
 
         h('form#pending-tx-form', {
-          onClick: event => this.onSubmit(event),
+          onSubmit: event => this.onSubmit(event),
         }, [
           h('.page-container__footer', [
             // Cancel Button
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 4d4732bdb..908df3671 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -224,181 +224,185 @@ ConfirmSendEther.prototype.render = function () {
           h('div.page-container__title', 'Confirm'),
           h('div.page-container__subtitle', `Please review your transaction.`),
         ]),
-        h('div.flex-row.flex-center.confirm-screen-identicons', [
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: fromAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', fromName),
-            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
-          ]),
-          h('i.fa.fa-arrow-right.fa-lg'),
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: txParams.to,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', toName),
-            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+        h('.page-container__content', [
+          h('div.flex-row.flex-center.confirm-screen-identicons', [
+            h('div.confirm-screen-account-wrapper', [
+              h(
+                Identicon,
+                {
+                  address: fromAddress,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', fromName),
+              // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+            ]),
+            h('i.fa.fa-arrow-right.fa-lg'),
+            h('div.confirm-screen-account-wrapper', [
+              h(
+                Identicon,
+                {
+                  address: txParams.to,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', toName),
+              // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+            ]),
           ]),
-        ]),
 
-        // h('h3.flex-center.confirm-screen-sending-to-message', {
-        //   style: {
-        //     textAlign: 'center',
-        //     fontSize: '16px',
-        //   },
-        // }, [
-        //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
-        // ]),
-
-        h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
-        h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
-        h('div.flex-center.confirm-memo-wrapper', [
-          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
-        ]),
+          // h('h3.flex-center.confirm-screen-sending-to-message', {
+          //   style: {
+          //     textAlign: 'center',
+          //     fontSize: '16px',
+          //   },
+          // }, [
+          //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+          // ]),
+
+          h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
+          h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
+          h('div.flex-center.confirm-memo-wrapper', [
+            h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
+          ]),
 
-        h('div.confirm-screen-rows', [
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', fromName),
-              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+          h('div.confirm-screen-rows', [
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', fromName),
+                h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', toName),
-              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', toName),
+                h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
 
-              h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
+                h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
+              ]),
             ]),
-          ]),
 
 
-          h('section.flex-row.flex-center.confirm-screen-total-box ', [
-            h('div.confirm-screen-section-column', [
-              h('span.confirm-screen-label', [ t('total') + ' ' ]),
-              h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
-            ]),
+            h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
+              h('div.confirm-screen-section-column', [
+                h('span.confirm-screen-label', [ t('total') + ' ' ]),
+                h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
+              ]),
 
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
-              h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
+                h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
+              ]),
             ]),
           ]),
+
+  // These are latest errors handling from master
+  // Leaving as comments as reference when we start implementing error handling
+  //         h('style', `
+  //           .conf-buttons button {
+  //             margin-left: 10px;
+  //             text-transform: uppercase;
+  //           }
+  //         `),
+
+  //         txMeta.simulationFails ?
+  //           h('.error', {
+  //             style: {
+  //               marginLeft: 50,
+  //               fontSize: '0.9em',
+  //             },
+  //           }, 'Transaction Error. Exception thrown in contract code.')
+  //         : null,
+
+  //         !isValidAddress ?
+  //           h('.error', {
+  //             style: {
+  //               marginLeft: 50,
+  //               fontSize: '0.9em',
+  //             },
+  //           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
+  //         : null,
+
+  //         insufficientBalance ?
+  //           h('span.error', {
+  //             style: {
+  //               marginLeft: 50,
+  //               fontSize: '0.9em',
+  //             },
+  //           }, 'Insufficient balance for transaction')
+  //         : null,
+
+  //         // send + cancel
+  //         h('.flex-row.flex-space-around.conf-buttons', {
+  //           style: {
+  //             display: 'flex',
+  //             justifyContent: 'flex-end',
+  //             margin: '14px 25px',
+  //           },
+  //         }, [
+  //           h('button', {
+  //             onClick: (event) => {
+  //               this.resetGasFields()
+  //               event.preventDefault()
+  //             },
+  //           }, 'Reset'),
+
+  //           // Accept Button or Buy Button
+  //           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
+  //             h('input.confirm.btn-green', {
+  //               type: 'submit',
+  //               value: 'SUBMIT',
+  //               style: { marginLeft: '10px' },
+  //               disabled: buyDisabled,
+  //             }),
+
+  //           h('button.cancel.btn-red', {
+  //             onClick: props.cancelTransaction,
+  //           }, 'Reject'),
+  //         ]),
+  //         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
+  //           style: {
+  //             display: 'flex',
+  //             justifyContent: 'flex-end',
+  //             margin: '14px 25px',
+  //           },
+  //         }, [
+  //           h('button.cancel.btn-red', {
+  //             onClick: props.cancelAllTransactions,
+  //           }, 'Reject All'),
+  //         ]) : null,
+  //       ]),
+  //     ])
+  //   )
+  // }
         ]),
 
-// These are latest errors handling from master
-// Leaving as comments as reference when we start implementing error handling
-//         h('style', `
-//           .conf-buttons button {
-//             margin-left: 10px;
-//             text-transform: uppercase;
-//           }
-//         `),
-
-//         txMeta.simulationFails ?
-//           h('.error', {
-//             style: {
-//               marginLeft: 50,
-//               fontSize: '0.9em',
-//             },
-//           }, 'Transaction Error. Exception thrown in contract code.')
-//         : null,
-
-//         !isValidAddress ?
-//           h('.error', {
-//             style: {
-//               marginLeft: 50,
-//               fontSize: '0.9em',
-//             },
-//           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
-//         : null,
-
-//         insufficientBalance ?
-//           h('span.error', {
-//             style: {
-//               marginLeft: 50,
-//               fontSize: '0.9em',
-//             },
-//           }, 'Insufficient balance for transaction')
-//         : null,
-
-//         // send + cancel
-//         h('.flex-row.flex-space-around.conf-buttons', {
-//           style: {
-//             display: 'flex',
-//             justifyContent: 'flex-end',
-//             margin: '14px 25px',
-//           },
-//         }, [
-//           h('button', {
-//             onClick: (event) => {
-//               this.resetGasFields()
-//               event.preventDefault()
-//             },
-//           }, 'Reset'),
-
-//           // Accept Button or Buy Button
-//           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
-//             h('input.confirm.btn-green', {
-//               type: 'submit',
-//               value: 'SUBMIT',
-//               style: { marginLeft: '10px' },
-//               disabled: buyDisabled,
-//             }),
-
-//           h('button.cancel.btn-red', {
-//             onClick: props.cancelTransaction,
-//           }, 'Reject'),
-//         ]),
-//         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
-//           style: {
-//             display: 'flex',
-//             justifyContent: 'flex-end',
-//             margin: '14px 25px',
-//           },
-//         }, [
-//           h('button.cancel.btn-red', {
-//             onClick: props.cancelAllTransactions,
-//           }, 'Reject All'),
-//         ]) : null,
-//       ]),
-//     ])
-//   )
-// }
-      ]),
+        h('form#pending-tx-form', {
+          onSubmit: this.onSubmit,
+        }, [
+          h('.page-container__footer', [
+            // Cancel Button
+            h('button.btn-cancel.page-container__footer-button.allcaps', {
+              onClick: (event) => {
+                clearSend()
+                this.cancel(event, txMeta)
+              },
+            }, t('cancel')),
 
-      h('form#pending-tx-form', {
-        onSubmit: this.onSubmit,
-      }, [
-        // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
-          onClick: (event) => {
-            clearSend()
-            this.cancel(event, txMeta)
-          },
-        }, t('cancel')),
-
-        // Accept Button
-        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
+            // Accept Button
+            h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
+          ]),
+        ]),
       ]),
     ])
   )
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 69afa8094..0a4182014 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -265,7 +265,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
 
   return fiatAmount && fiatGas
     ? (
-      h('section.flex-row.flex-center.confirm-screen-total-box ', [
+      h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
         h('div.confirm-screen-section-column', [
           h('span.confirm-screen-label', [ t('total') + ' ' ]),
           h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
@@ -278,7 +278,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
       ])
     )
     : (
-      h('section.flex-row.flex-center.confirm-screen-total-box ', [
+      h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
         h('div.confirm-screen-section-column', [
           h('span.confirm-screen-label', [ t('total') + ' ' ]),
           h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
@@ -319,80 +319,82 @@ ConfirmSendToken.prototype.render = function () {
           h('div.page-container__title', t('confirm')),
           h('div.page-container__subtitle', t('pleaseReviewTransaction')),
         ]),
-        h('div.flex-row.flex-center.confirm-screen-identicons', [
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: fromAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', fromName),
-            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
-          ]),
-          h('i.fa.fa-arrow-right.fa-lg'),
-          h('div.confirm-screen-account-wrapper', [
-            h(
-              Identicon,
-              {
-                address: toAddress,
-                diameter: 60,
-              },
-            ),
-            h('span.confirm-screen-account-name', toName),
-            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+        h('.page-container__content', [
+          h('div.flex-row.flex-center.confirm-screen-identicons', [
+            h('div.confirm-screen-account-wrapper', [
+              h(
+                Identicon,
+                {
+                  address: fromAddress,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', fromName),
+              // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+            ]),
+            h('i.fa.fa-arrow-right.fa-lg'),
+            h('div.confirm-screen-account-wrapper', [
+              h(
+                Identicon,
+                {
+                  address: toAddress,
+                  diameter: 60,
+                },
+              ),
+              h('span.confirm-screen-account-name', toName),
+              // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+            ]),
           ]),
-        ]),
 
-        // h('h3.flex-center.confirm-screen-sending-to-message', {
-        //   style: {
-        //     textAlign: 'center',
-        //     fontSize: '16px',
-        //   },
-        // }, [
-          // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
-        // ]),
-
-        this.renderHeroAmount(),
-
-        h('div.confirm-screen-rows', [
-          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', fromName),
-              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+          // h('h3.flex-center.confirm-screen-sending-to-message', {
+          //   style: {
+          //     textAlign: 'center',
+          //     fontSize: '16px',
+          //   },
+          // }, [
+            // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+          // ]),
+
+          this.renderHeroAmount(),
+
+          h('div.confirm-screen-rows', [
+            h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', fromName),
+                h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
-          toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
-            h('div.confirm-screen-section-column', [
-              h('div.confirm-screen-row-info', toName),
-              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+            toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
+              h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+              h('div.confirm-screen-section-column', [
+                h('div.confirm-screen-row-info', toName),
+                h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+              ]),
             ]),
-          ]),
 
-          this.renderGasFee(),
+            this.renderGasFee(),
 
-          this.renderTotalPlusGas(),
+            this.renderTotalPlusGas(),
 
-        ]),
-      ]),
-
-      h('form#pending-tx-form', {
-        onSubmit: this.onSubmit,
-      }, [
-        // Cancel Button
-        h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
-          onClick: (event) => this.cancel(event, txMeta),
-        }, t('cancel')),
+          ]),
 
-        // Accept Button
-        h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
+        ]),
+        h('form#pending-tx-form', {
+          onSubmit: this.onSubmit,
+        }, [
+          h('.page-container__footer', [
+            // Cancel Button
+            h('button.btn-cancel.page-container__footer-button.allcaps', {
+              onClick: (event) => this.cancel(event, txMeta),
+            }, t('cancel')),
+
+            // Accept Button
+            h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
+          ]),
+        ]),
       ]),
-
-
     ])
   )
 }
-- 
cgit v1.2.3


From a1db40047c2a6fdbb8d2de2abacd0484e12e128d Mon Sep 17 00:00:00 2001
From: anticlimactic <9568756+anticlimactic@users.noreply.github.com>
Date: Tue, 20 Mar 2018 02:11:24 +1100
Subject: Remove unused files from ui folder.  (#3577)

* Removed unused UI files. Fixes #3434.

* Reverted the deletion of "feature-toggle-utils.js". Reverted the deletion of the test files and modified the paths so they referred to the old-ui.
---
 ui/app/components/balance.js                       |  89 -----
 ui/app/components/binary-renderer.js               |  46 ---
 .../dropdowns/account-options-dropdown.js          |  29 --
 .../dropdowns/account-selection-dropdown.js        |  29 --
 ui/app/components/dropdowns/index.js               |   6 -
 ui/app/components/mini-account-panel.js            |  74 ----
 ui/app/components/pending-personal-msg-details.js  |  60 ---
 ui/app/components/pending-typed-msg-details.js     |  60 ---
 ui/app/components/pending-typed-msg.js             |  47 ---
 ui/app/components/range-slider.js                  |  58 ---
 ui/app/components/send-token/index.js              | 440 ---------------------
 ui/app/components/send/currency-toggle.js          |  44 ---
 ui/app/components/send/eth-fee-display.js          |  37 --
 ui/app/components/send/gas-fee-display.js          |  62 ---
 ui/app/components/send/usd-fee-display.js          |  35 --
 ui/app/components/template.js                      |  18 -
 ui/app/components/transaction-list-item-icon.js    |  68 ----
 ui/app/components/transaction-list-item.js         | 239 -----------
 ui/app/components/transaction-list.js              |  87 ----
 ui/app/components/typed-message-renderer.js        |  42 --
 ui/app/components/wallet-content-display.js        |  56 ---
 21 files changed, 1626 deletions(-)
 delete mode 100644 ui/app/components/balance.js
 delete mode 100644 ui/app/components/binary-renderer.js
 delete mode 100644 ui/app/components/dropdowns/account-options-dropdown.js
 delete mode 100644 ui/app/components/dropdowns/account-selection-dropdown.js
 delete mode 100644 ui/app/components/mini-account-panel.js
 delete mode 100644 ui/app/components/pending-personal-msg-details.js
 delete mode 100644 ui/app/components/pending-typed-msg-details.js
 delete mode 100644 ui/app/components/pending-typed-msg.js
 delete mode 100644 ui/app/components/range-slider.js
 delete mode 100644 ui/app/components/send-token/index.js
 delete mode 100644 ui/app/components/send/currency-toggle.js
 delete mode 100644 ui/app/components/send/eth-fee-display.js
 delete mode 100644 ui/app/components/send/gas-fee-display.js
 delete mode 100644 ui/app/components/send/usd-fee-display.js
 delete mode 100644 ui/app/components/template.js
 delete mode 100644 ui/app/components/transaction-list-item-icon.js
 delete mode 100644 ui/app/components/transaction-list-item.js
 delete mode 100644 ui/app/components/transaction-list.js
 delete mode 100644 ui/app/components/typed-message-renderer.js
 delete mode 100644 ui/app/components/wallet-content-display.js

(limited to 'ui/app/components')

diff --git a/ui/app/components/balance.js b/ui/app/components/balance.js
deleted file mode 100644
index 57ca84564..000000000
--- a/ui/app/components/balance.js
+++ /dev/null
@@ -1,89 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const formatBalance = require('../util').formatBalance
-const generateBalanceObject = require('../util').generateBalanceObject
-const Tooltip = require('./tooltip.js')
-const FiatValue = require('./fiat-value.js')
-
-module.exports = EthBalanceComponent
-
-inherits(EthBalanceComponent, Component)
-function EthBalanceComponent () {
-  Component.call(this)
-}
-
-EthBalanceComponent.prototype.render = function () {
-  var props = this.props
-  let { value } = props
-  var style = props.style
-  var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
-  value = value ? formatBalance(value, 6, needsParse) : '...'
-  var width = props.width
-
-  return (
-
-    h('.ether-balance.ether-balance-amount', {
-      style: style,
-    }, [
-      h('div', {
-        style: {
-          display: 'inline',
-          width: width,
-        },
-      }, this.renderBalance(value)),
-    ])
-
-  )
-}
-EthBalanceComponent.prototype.renderBalance = function (value) {
-  var props = this.props
-  if (value === 'None') return value
-  if (value === '...') return value
-  var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3)
-  var balance
-  var splitBalance = value.split(' ')
-  var ethNumber = splitBalance[0]
-  var ethSuffix = splitBalance[1]
-  const showFiat = 'showFiat' in props ? props.showFiat : true
-
-  if (props.shorten) {
-    balance = balanceObj.shortBalance
-  } else {
-    balance = balanceObj.balance
-  }
-
-  var label = balanceObj.label
-
-  return (
-    h(Tooltip, {
-      position: 'bottom',
-      title: `${ethNumber} ${ethSuffix}`,
-    }, h('div.flex-column', [
-      h('.flex-row', {
-        style: {
-          alignItems: 'flex-end',
-          lineHeight: '13px',
-          fontFamily: 'Montserrat Light',
-          textRendering: 'geometricPrecision',
-        },
-      }, [
-        h('div', {
-          style: {
-            width: '100%',
-            textAlign: 'right',
-          },
-        }, this.props.incoming ? `+${balance}` : balance),
-        h('div', {
-          style: {
-            color: ' #AEAEAE',
-            fontSize: '12px',
-            marginLeft: '5px',
-          },
-        }, label),
-      ]),
-
-      showFiat ? h(FiatValue, { value: props.value }) : null,
-    ]))
-  )
-}
diff --git a/ui/app/components/binary-renderer.js b/ui/app/components/binary-renderer.js
deleted file mode 100644
index 0b6a1f5c2..000000000
--- a/ui/app/components/binary-renderer.js
+++ /dev/null
@@ -1,46 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const ethUtil = require('ethereumjs-util')
-const extend = require('xtend')
-
-module.exports = BinaryRenderer
-
-inherits(BinaryRenderer, Component)
-function BinaryRenderer () {
-  Component.call(this)
-}
-
-BinaryRenderer.prototype.render = function () {
-  const props = this.props
-  const { value, style } = props
-  const text = this.hexToText(value)
-
-  const defaultStyle = extend({
-    width: '315px',
-    maxHeight: '210px',
-    resize: 'none',
-    border: 'none',
-    background: 'white',
-    padding: '3px',
-  }, style)
-
-  return (
-    h('textarea.font-small', {
-      readOnly: true,
-      style: defaultStyle,
-      defaultValue: text,
-    })
-  )
-}
-
-BinaryRenderer.prototype.hexToText = function (hex) {
-  try {
-    const stripped = ethUtil.stripHexPrefix(hex)
-    const buff = Buffer.from(stripped, 'hex')
-    return buff.toString('utf8')
-  } catch (e) {
-    return hex
-  }
-}
-
diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js
deleted file mode 100644
index f74c0a2d4..000000000
--- a/ui/app/components/dropdowns/account-options-dropdown.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const AccountDropdowns = require('./components/account-dropdowns')
-
-inherits(AccountOptionsDropdown, Component)
-function AccountOptionsDropdown () {
-  Component.call(this)
-}
-
-module.exports = AccountOptionsDropdown
-
-// TODO: specify default props and proptypes
-// TODO: hook up to state, connect to redux to clean up API
-// TODO: selectedAddress is not defined... should we use selected?
-AccountOptionsDropdown.prototype.render = function () {
-  const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
-
-  return h(AccountDropdowns, {
-    enableAccountOptions: true,
-    enableAccountsSelector: false,
-    selected,
-    network,
-    identities,
-    style: style || {},
-    dropdownWrapperStyle: dropdownWrapperStyle || {},
-    menuItemStyles: menuItemStyles || {},
-  }, [])
-}
diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js
deleted file mode 100644
index 2f6452b15..000000000
--- a/ui/app/components/dropdowns/account-selection-dropdown.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const AccountDropdowns = require('./components/account-dropdowns')
-
-inherits(AccountSelectionDropdown, Component)
-function AccountSelectionDropdown () {
-  Component.call(this)
-}
-
-module.exports = AccountSelectionDropdown
-
-// TODO: specify default props and proptypes
-// TODO: hook up to state, connect to redux to clean up API
-// TODO: selectedAddress is not defined... should we use selected?
-AccountSelectionDropdown.prototype.render = function () {
-  const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
-
-  return h(AccountDropdowns, {
-    enableAccountOptions: false,
-    enableAccountsSelector: true,
-    selected,
-    network,
-    identities,
-    style: style || {},
-    dropdownWrapperStyle: dropdownWrapperStyle || {},
-    menuItemStyles: menuItemStyles || {},
-  }, [])
-}
diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js
index fa66f5000..605507058 100644
--- a/ui/app/components/dropdowns/index.js
+++ b/ui/app/components/dropdowns/index.js
@@ -1,17 +1,11 @@
 // Reusable Dropdown Components
 // TODO: Refactor into separate components
 const Dropdown = require('./components/dropdown').Dropdown
-const AccountDropdowns = require('./components/account-dropdowns')
 
 // App-Specific Instances
-const AccountSelectionDropdown = require('./account-selection-dropdown')
-const AccountOptionsDropdown = require('./account-options-dropdown')
 const NetworkDropdown = require('./network-dropdown').default
 
 module.exports = {
-  AccountSelectionDropdown,
-  AccountOptionsDropdown,
   NetworkDropdown,
   Dropdown,
-  AccountDropdowns,
 }
diff --git a/ui/app/components/mini-account-panel.js b/ui/app/components/mini-account-panel.js
deleted file mode 100644
index c09cf5b7a..000000000
--- a/ui/app/components/mini-account-panel.js
+++ /dev/null
@@ -1,74 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const Identicon = require('./identicon')
-
-module.exports = AccountPanel
-
-
-inherits(AccountPanel, Component)
-function AccountPanel () {
-  Component.call(this)
-}
-
-AccountPanel.prototype.render = function () {
-  var props = this.props
-  var picOrder = props.picOrder || 'left'
-  const { imageSeed } = props
-
-  return (
-
-    h('.identity-panel.flex-row.flex-left', {
-      style: {
-        cursor: props.onClick ? 'pointer' : undefined,
-      },
-      onClick: props.onClick,
-    }, [
-
-      this.genIcon(imageSeed, picOrder),
-
-      h('div.flex-column.flex-justify-center', {
-        style: {
-          lineHeight: '15px',
-          order: 2,
-          display: 'flex',
-          alignItems: picOrder === 'left' ? 'flex-begin' : 'flex-end',
-        },
-      }, this.props.children),
-    ])
-  )
-}
-
-AccountPanel.prototype.genIcon = function (seed, picOrder) {
-  const props = this.props
-
-  // When there is no seed value, this is a contract creation.
-  // We then show the contract icon.
-  if (!seed) {
-    return h('.identicon-wrapper.flex-column.select-none', {
-      style: {
-        order: picOrder === 'left' ? 1 : 3,
-      },
-    }, [
-      h('i.fa.fa-file-text-o.fa-lg', {
-        style: {
-          fontSize: '42px',
-          transform: 'translate(0px, -16px)',
-        },
-      }),
-    ])
-  }
-
-  // If there was a seed, we return an identicon for that address.
-  return h('.identicon-wrapper.flex-column.select-none', {
-    style: {
-      order: picOrder === 'left' ? 1 : 3,
-    },
-  }, [
-    h(Identicon, {
-      address: seed,
-      imageify: props.imageifyIdenticons,
-    }),
-  ])
-}
-
diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js
deleted file mode 100644
index b896e9a7e..000000000
--- a/ui/app/components/pending-personal-msg-details.js
+++ /dev/null
@@ -1,60 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const t = require('../../i18n')
-
-const AccountPanel = require('./account-panel')
-const BinaryRenderer = require('./binary-renderer')
-
-module.exports = PendingMsgDetails
-
-inherits(PendingMsgDetails, Component)
-function PendingMsgDetails () {
-  Component.call(this)
-}
-
-PendingMsgDetails.prototype.render = function () {
-  var state = this.props
-  var msgData = state.txData
-
-  var msgParams = msgData.msgParams || {}
-  var address = msgParams.from || state.selectedAddress
-  var identity = state.identities[address] || { address: address }
-  var account = state.accounts[address] || { address: address }
-
-  var { data } = msgParams
-
-  return (
-    h('div', {
-      key: msgData.id,
-      style: {
-        margin: '10px 20px',
-      },
-    }, [
-
-      // account that will sign
-      h(AccountPanel, {
-        showFullAddress: true,
-        identity: identity,
-        account: account,
-        imageifyIdenticons: state.imageifyIdenticons,
-      }),
-
-      // message data
-      h('div', {
-        style: {
-          height: '260px',
-        },
-      }, [
-        h('label.font-small.allcaps', { style: { display: 'block' } }, t('message')),
-        h(BinaryRenderer, {
-          value: data,
-          style: {
-            height: '215px',
-          },
-        }),
-      ]),
-
-    ])
-  )
-}
diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js
deleted file mode 100644
index ae0a1171e..000000000
--- a/ui/app/components/pending-typed-msg-details.js
+++ /dev/null
@@ -1,60 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-
-const AccountPanel = require('./account-panel')
-const TypedMessageRenderer = require('./typed-message-renderer')
-const t = require('../../i18n')
-
-module.exports = PendingMsgDetails
-
-inherits(PendingMsgDetails, Component)
-function PendingMsgDetails () {
-  Component.call(this)
-}
-
-PendingMsgDetails.prototype.render = function () {
-  var state = this.props
-  var msgData = state.txData
-
-  var msgParams = msgData.msgParams || {}
-  var address = msgParams.from || state.selectedAddress
-  var identity = state.identities[address] || { address: address }
-  var account = state.accounts[address] || { address: address }
-
-  var { data } = msgParams
-
-  return (
-    h('div', {
-      key: msgData.id,
-      style: {
-        margin: '10px 20px',
-      },
-    }, [
-
-      // account that will sign
-      h(AccountPanel, {
-        showFullAddress: true,
-        identity: identity,
-        account: account,
-        imageifyIdenticons: state.imageifyIdenticons,
-      }),
-
-      // message data
-      h('div', {
-        style: {
-          height: '260px',
-        },
-      }, [
-        h('label.font-small.allcaps', { style: { display: 'block' } }, t('youSign')),
-        h(TypedMessageRenderer, {
-          value: data,
-          style: {
-            height: '215px',
-          },
-        }),
-      ]),
-
-    ])
-  )
-}
diff --git a/ui/app/components/pending-typed-msg.js b/ui/app/components/pending-typed-msg.js
deleted file mode 100644
index ccde5e8af..000000000
--- a/ui/app/components/pending-typed-msg.js
+++ /dev/null
@@ -1,47 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const PendingTxDetails = require('./pending-typed-msg-details')
-const t = require('../../i18n')
-
-module.exports = PendingMsg
-
-inherits(PendingMsg, Component)
-function PendingMsg () {
-  Component.call(this)
-}
-
-PendingMsg.prototype.render = function () {
-  var state = this.props
-  var msgData = state.txData
-
-  return (
-
-    h('div', {
-      key: msgData.id,
-    }, [
-
-      // header
-      h('h3', {
-        style: {
-          fontWeight: 'bold',
-          textAlign: 'center',
-        },
-      }, t('signMessage')),
-
-      // message details
-      h(PendingTxDetails, state),
-
-      // sign + cancel
-      h('.flex-row.flex-space-around', [
-        h('button.allcaps', {
-          onClick: state.cancelTypedMessage,
-        }, t('cancel')),
-        h('button.allcaps', {
-          onClick: state.signTypedMessage,
-        }, t('sign')),
-      ]),
-    ])
-
-  )
-}
diff --git a/ui/app/components/range-slider.js b/ui/app/components/range-slider.js
deleted file mode 100644
index 823f5eb01..000000000
--- a/ui/app/components/range-slider.js
+++ /dev/null
@@ -1,58 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-
-module.exports = RangeSlider
-
-inherits(RangeSlider, Component)
-function RangeSlider () {
-  Component.call(this)
-}
-
-RangeSlider.prototype.render = function () {
-  const state = this.state || {}
-  const props = this.props
-  const onInput = props.onInput || function () {}
-  const name = props.name
-  const {
-    min = 0,
-    max = 100,
-    increment = 1,
-    defaultValue = 50,
-    mirrorInput = false,
-  } = this.props.options
-  const {container, input, range} = props.style
-
-  return (
-    h('.flex-row', {
-      style: container,
-    }, [
-      h('input', {
-        type: 'range',
-        name: name,
-        min: min,
-        max: max,
-        step: increment,
-        style: range,
-        value: state.value || defaultValue,
-        onChange: mirrorInput ? this.mirrorInputs.bind(this, event) : onInput,
-      }),
-
-      // Mirrored input for range
-      mirrorInput ? h('input.large-input', {
-        type: 'number',
-        name: `${name}Mirror`,
-        min: min,
-        max: max,
-        value: state.value || defaultValue,
-        step: increment,
-        style: input,
-        onChange: this.mirrorInputs.bind(this, event),
-      }) : null,
-    ])
-  )
-}
-
-RangeSlider.prototype.mirrorInputs = function (event) {
-  this.setState({value: event.target.value})
-}
diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
deleted file mode 100644
index 58743b641..000000000
--- a/ui/app/components/send-token/index.js
+++ /dev/null
@@ -1,440 +0,0 @@
-const Component = require('react').Component
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const classnames = require('classnames')
-const abi = require('ethereumjs-abi')
-const inherits = require('util').inherits
-const actions = require('../../actions')
-const selectors = require('../../selectors')
-const { isValidAddress, allNull } = require('../../util')
-const t = require('../../../i18n')
-
-// const BalanceComponent = require('./balance-component')
-const Identicon = require('../identicon')
-const TokenBalance = require('../token-balance')
-const CurrencyToggle = require('../send/currency-toggle')
-const GasTooltip = require('../send/gas-tooltip')
-const GasFeeDisplay = require('../send/gas-fee-display')
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(SendTokenScreen)
-
-function mapStateToProps (state) {
-  // const sidebarOpen = state.appState.sidebarOpen
-
-  const { warning } = state.appState
-  const identities = state.metamask.identities
-  const addressBook = state.metamask.addressBook
-  const conversionRate = state.metamask.conversionRate
-  const currentBlockGasLimit = state.metamask.currentBlockGasLimit
-  const accounts = state.metamask.accounts
-  const selectedTokenAddress = state.metamask.selectedTokenAddress
-  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
-  const selectedToken = selectors.getSelectedToken(state)
-  const tokenExchangeRates = state.metamask.tokenExchangeRates
-  const pair = `${selectedToken.symbol.toLowerCase()}_eth`
-  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
-
-  return {
-    selectedAddress,
-    selectedTokenAddress,
-    identities,
-    addressBook,
-    conversionRate,
-    tokenExchangeRate,
-    currentBlockGasLimit,
-    selectedToken,
-    warning,
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
-    hideWarning: () => dispatch(actions.hideWarning()),
-    addToAddressBook: (recipient, nickname) => dispatch(
-      actions.addToAddressBook(recipient, nickname)
-    ),
-    signTx: txParams => dispatch(actions.signTx(txParams)),
-    signTokenTx: (tokenAddress, toAddress, amount, txData) => (
-      dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
-    ),
-    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
-    estimateGas: params => dispatch(actions.estimateGas(params)),
-    getGasPrice: () => dispatch(actions.getGasPrice()),
-  }
-}
-
-inherits(SendTokenScreen, Component)
-function SendTokenScreen () {
-  Component.call(this)
-  this.state = {
-    to: '',
-    amount: '0x0',
-    amountToSend: '0x0',
-    selectedCurrency: 'USD',
-    isGasTooltipOpen: false,
-    gasPrice: null,
-    gasLimit: null,
-    errors: {},
-  }
-}
-
-SendTokenScreen.prototype.componentWillMount = function () {
-  const {
-    updateTokenExchangeRate,
-    selectedToken: { symbol },
-    getGasPrice,
-    estimateGas,
-    selectedAddress,
-  } = this.props
-
-  updateTokenExchangeRate(symbol)
-
-  const data = Array.prototype.map.call(
-    abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
-    x => ('00' + x.toString(16)).slice(-2)
-  ).join('')
-
-  console.log(data)
-  Promise.all([
-    getGasPrice(),
-    estimateGas({
-      from: selectedAddress,
-      value: '0x0',
-      gas: '746a528800',
-      data,
-    }),
-  ])
-  .then(([blockGasPrice, estimatedGas]) => {
-    console.log({ blockGasPrice, estimatedGas})
-    this.setState({
-      gasPrice: blockGasPrice,
-      gasLimit: estimatedGas,
-    })
-  })
-}
-
-SendTokenScreen.prototype.validate = function () {
-  const {
-    to,
-    amount: stringAmount,
-    gasPrice: hexGasPrice,
-    gasLimit: hexGasLimit,
-  } = this.state
-
-  const gasPrice = parseInt(hexGasPrice, 16)
-  const gasLimit = parseInt(hexGasLimit, 16) / 1000000000
-  const amount = Number(stringAmount)
-
-  const errors = {
-    to: !to ? t('required') : null,
-    amount: !amount ? t('required') : null,
-    gasPrice: !gasPrice ? t('gasPriceRequired') : null,
-    gasLimit: !gasLimit ? t('gasLimitRequired') : null,
-  }
-
-  if (to && !isValidAddress(to)) {
-    errors.to = t('invalidAddress')
-  }
-
-  const isValid = Object.entries(errors).every(([key, value]) => value === null)
-  return {
-    isValid,
-    errors: isValid ? {} : errors,
-  }
-}
-
-SendTokenScreen.prototype.setErrorsFor = function (field) {
-  const { errors: previousErrors } = this.state
-
-  const {
-    isValid,
-    errors: newErrors,
-  } = this.validate()
-
-  const nextErrors = Object.assign({}, previousErrors, {
-    [field]: newErrors[field] || null,
-  })
-
-  if (!isValid) {
-    this.setState({
-      errors: nextErrors,
-      isValid,
-    })
-  }
-}
-
-SendTokenScreen.prototype.clearErrorsFor = function (field) {
-  const { errors: previousErrors } = this.state
-  const nextErrors = Object.assign({}, previousErrors, {
-    [field]: null,
-  })
-
-  this.setState({
-    errors: nextErrors,
-    isValid: allNull(nextErrors),
-  })
-}
-
-SendTokenScreen.prototype.getAmountToSend = function (amount, selectedToken) {
-  const { decimals } = selectedToken || {}
-  const multiplier = Math.pow(10, Number(decimals || 0))
-  const sendAmount = '0x' + Number(amount * multiplier).toString(16)
-  return sendAmount
-}
-
-SendTokenScreen.prototype.submit = function () {
-  const {
-    to,
-    amount,
-    gasPrice,
-    gasLimit,
-  } = this.state
-
-  const {
-    identities,
-    selectedAddress,
-    selectedTokenAddress,
-    hideWarning,
-    addToAddressBook,
-    signTokenTx,
-    selectedToken,
-  } = this.props
-
-  const { nickname = ' ' } = identities[to] || {}
-
-  hideWarning()
-  addToAddressBook(to, nickname)
-
-  const txParams = {
-    from: selectedAddress,
-    value: '0',
-    gas: gasLimit,
-    gasPrice: gasPrice,
-  }
-
-  const sendAmount = this.getAmountToSend(amount, selectedToken)
-
-  signTokenTx(selectedTokenAddress, to, sendAmount, txParams)
-}
-
-SendTokenScreen.prototype.renderToAddressInput = function () {
-  const {
-    identities,
-    addressBook,
-  } = this.props
-
-  const {
-    to,
-    errors: { to: errorMessage },
-  } = this.state
-
-  return h('div', {
-    className: classnames('send-screen-input-wrapper', {
-      'send-screen-input-wrapper--error': errorMessage,
-    }),
-  }, [
-    h('div', [t('to') + ':']),
-    h('input.large-input.send-screen-input', {
-      name: 'address',
-      list: 'addresses',
-      placeholder: t('address'),
-      value: to,
-      onChange: e => this.setState({
-        to: e.target.value,
-        errors: {},
-      }),
-      onBlur: () => {
-        this.setErrorsFor('to')
-      },
-      onFocus: event => {
-        if (to) event.target.select()
-        this.clearErrorsFor('to')
-      },
-    }),
-    h('datalist#addresses', [
-      // Corresponds to the addresses owned.
-      Object.entries(identities).map(([key, { address, name }]) => {
-        return h('option', {
-          value: address,
-          label: name,
-          key: address,
-        })
-      }),
-      addressBook.map(({ address, name }) => {
-        return h('option', {
-          value: address,
-          label: name,
-          key: address,
-        })
-      }),
-    ]),
-    h('div.send-screen-input-wrapper__error-message', [ errorMessage ]),
-  ])
-}
-
-SendTokenScreen.prototype.renderAmountInput = function () {
-  const {
-    selectedCurrency,
-    amount,
-    errors: { amount: errorMessage },
-  } = this.state
-
-  const {
-    tokenExchangeRate,
-    selectedToken: {symbol},
-  } = this.props
-
-  return h('div.send-screen-input-wrapper', {
-    className: classnames('send-screen-input-wrapper', {
-      'send-screen-input-wrapper--error': errorMessage,
-    }),
-  }, [
-    h('div.send-screen-amount-labels', [
-      h('span', [t('amount')]),
-      h(CurrencyToggle, {
-        currentCurrency: tokenExchangeRate ? selectedCurrency : 'USD',
-        currencies: tokenExchangeRate ? [ symbol, 'USD' ] : [],
-        onClick: currency => this.setState({ selectedCurrency: currency }),
-      }),
-    ]),
-    h('input.large-input.send-screen-input', {
-      placeholder: `0 ${symbol}`,
-      type: 'number',
-      value: amount,
-      onChange: e => this.setState({
-        amount: e.target.value,
-      }),
-      onBlur: () => {
-        this.setErrorsFor('amount')
-      },
-      onFocus: () => this.clearErrorsFor('amount'),
-    }),
-    h('div.send-screen-input-wrapper__error-message', [ errorMessage ]),
-  ])
-}
-
-SendTokenScreen.prototype.renderGasInput = function () {
-  const {
-    isGasTooltipOpen,
-    gasPrice,
-    gasLimit,
-    selectedCurrency,
-    errors: {
-      gasPrice: gasPriceErrorMessage,
-      gasLimit: gasLimitErrorMessage,
-    },
-  } = this.state
-
-  const {
-    conversionRate,
-    tokenExchangeRate,
-    currentBlockGasLimit,
-  } = this.props
-
-  return h('div.send-screen-input-wrapper', {
-    className: classnames('send-screen-input-wrapper', {
-      'send-screen-input-wrapper--error': gasPriceErrorMessage || gasLimitErrorMessage,
-    }),
-  }, [
-    isGasTooltipOpen && h(GasTooltip, {
-      className: 'send-tooltip',
-      gasPrice: gasPrice || '0x0',
-      gasLimit: gasLimit || '0x0',
-      onClose: () => this.setState({ isGasTooltipOpen: false }),
-      onFeeChange: ({ gasLimit, gasPrice }) => {
-        this.setState({ gasLimit, gasPrice, errors: {} })
-      },
-      onBlur: () => {
-        this.setErrorsFor('gasLimit')
-        this.setErrorsFor('gasPrice')
-      },
-      onFocus: () => {
-        this.clearErrorsFor('gasLimit')
-        this.clearErrorsFor('gasPrice')
-      },
-    }),
-
-    h('div.send-screen-gas-labels', {}, [
-      h('span', [ h('i.fa.fa-bolt'), t('gasFee') + ':']),
-      h('span', [t('whatsThis')]),
-    ]),
-    h('div.large-input.send-screen-gas-input', [
-      h(GasFeeDisplay, {
-        conversionRate,
-        tokenExchangeRate,
-        gasPrice: gasPrice || '0x0',
-        activeCurrency: selectedCurrency,
-        gas: gasLimit || '0x0',
-        blockGasLimit: currentBlockGasLimit,
-      }),
-      h(
-        'div.send-screen-gas-input-customize',
-        { onClick: () => this.setState({ isGasTooltipOpen: !isGasTooltipOpen }) },
-        [t('customize')]
-      ),
-    ]),
-    h('div.send-screen-input-wrapper__error-message', [
-      gasPriceErrorMessage || gasLimitErrorMessage,
-    ]),
-  ])
-}
-
-SendTokenScreen.prototype.renderMemoInput = function () {
-  return h('div.send-screen-input-wrapper', [
-    h('div', {}, [t('transactionMemo')]),
-    h(
-      'input.large-input.send-screen-input',
-      { onChange: e => this.setState({ memo: e.target.value }) }
-    ),
-  ])
-}
-
-SendTokenScreen.prototype.renderButtons = function () {
-  const { selectedAddress, backToAccountDetail } = this.props
-  const { isValid } = this.validate()
-
-  return h('div.send-token__button-group', [
-    h('button.send-token__button-next.btn-secondary', {
-      className: !isValid && 'send-screen__send-button__disabled',
-      onClick: () => isValid && this.submit(),
-    }, [t('next')]),
-    h('button.send-token__button-cancel.btn-tertiary', {
-      onClick: () => backToAccountDetail(selectedAddress),
-    }, [t('cancel')]),
-  ])
-}
-
-SendTokenScreen.prototype.render = function () {
-  const {
-    selectedTokenAddress,
-    selectedToken,
-    warning,
-  } = this.props
-
-  return h('div.send-token', [
-    h('div.send-token__content', [
-      h(Identicon, {
-        diameter: 75,
-        address: selectedTokenAddress,
-      }),
-      h('div.send-token__title', [t('sendTokens')]),
-      h('div.send-token__description', [t('sendTokensAnywhere')]),
-      h('div.send-token__balance-text', [t('tokenBalance')]),
-      h('div.send-token__token-balance', [
-        h(TokenBalance, { token: selectedToken, balanceOnly: true }),
-      ]),
-      h('div.send-token__token-symbol', [selectedToken.symbol]),
-      this.renderToAddressInput(),
-      this.renderAmountInput(),
-      this.renderGasInput(),
-      this.renderMemoInput(),
-      warning && h('div.send-screen-input-wrapper--error', {},
-        h('div.send-screen-input-wrapper__error-message', [
-          warning,
-        ])
-      ),
-    ]),
-    this.renderButtons(),
-  ])
-}
diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
deleted file mode 100644
index 7aaccd490..000000000
--- a/ui/app/components/send/currency-toggle.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const classnames = require('classnames')
-
-module.exports = CurrencyToggle
-
-inherits(CurrencyToggle, Component)
-function CurrencyToggle () {
-  Component.call(this)
-}
-
-const defaultCurrencies = [ 'ETH', 'USD' ]
-
-CurrencyToggle.prototype.renderToggles = function () {
-  const { onClick, activeCurrency } = this.props
-  const [currencyA, currencyB] = this.props.currencies || defaultCurrencies
-
-  return [
-    h('span', {
-      className: classnames('currency-toggle__item', {
-        'currency-toggle__item--selected': currencyA === activeCurrency,
-      }),
-      onClick: () => onClick(currencyA),
-    }, [ currencyA ]),
-    '<>',
-    h('span', {
-      className: classnames('currency-toggle__item', {
-        'currency-toggle__item--selected': currencyB === activeCurrency,
-      }),
-      onClick: () => onClick(currencyB),
-    }, [ currencyB ]),
-  ]
-}
-
-CurrencyToggle.prototype.render = function () {
-  const currencies = this.props.currencies || defaultCurrencies
-
-  return h('span.currency-toggle', currencies.length
-    ? this.renderToggles()
-    : []
-  )
-}
-
diff --git a/ui/app/components/send/eth-fee-display.js b/ui/app/components/send/eth-fee-display.js
deleted file mode 100644
index 9eda5ec62..000000000
--- a/ui/app/components/send/eth-fee-display.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const EthBalance = require('../eth-balance')
-const { getTxFeeBn } = require('../../util')
-
-module.exports = EthFeeDisplay
-
-inherits(EthFeeDisplay, Component)
-function EthFeeDisplay () {
-  Component.call(this)
-}
-
-EthFeeDisplay.prototype.render = function () {
-  const {
-    activeCurrency,
-    conversionRate,
-    gas,
-    gasPrice,
-    blockGasLimit,
-  } = this.props
-
-  return h(EthBalance, {
-    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
-    currentCurrency: activeCurrency,
-    conversionRate,
-    showFiat: false,
-    hideTooltip: true,
-    styleOveride: {
-      color: '#5d5d5d',
-      fontSize: '16px',
-      fontFamily: 'DIN OT',
-      lineHeight: '22.4px',
-    },
-  })
-}
-
diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
deleted file mode 100644
index a9a3f3f49..000000000
--- a/ui/app/components/send/gas-fee-display.js
+++ /dev/null
@@ -1,62 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const USDFeeDisplay = require('./usd-fee-display')
-const EthFeeDisplay = require('./eth-fee-display')
-const { getTxFeeBn, formatBalance, shortenBalance } = require('../../util')
-
-module.exports = GasFeeDisplay
-
-inherits(GasFeeDisplay, Component)
-function GasFeeDisplay () {
-  Component.call(this)
-}
-
-GasFeeDisplay.prototype.getTokenValue = function () {
-  const {
-    tokenExchangeRate,
-    gas,
-    gasPrice,
-    blockGasLimit,
-  } = this.props
-
-  const value = formatBalance(getTxFeeBn(gas, gasPrice, blockGasLimit), 6, true)
-  const [ethNumber] = value.split(' ')
-
-  return shortenBalance(Number(ethNumber) / tokenExchangeRate, 6)
-}
-
-GasFeeDisplay.prototype.render = function () {
-  const {
-    activeCurrency,
-    conversionRate,
-    gas,
-    gasPrice,
-    blockGasLimit,
-  } = this.props
-
-  switch (activeCurrency) {
-    case 'USD':
-      return h(USDFeeDisplay, {
-        activeCurrency,
-        conversionRate,
-        gas,
-        gasPrice,
-        blockGasLimit,
-      })
-    case 'ETH':
-      return h(EthFeeDisplay, {
-        activeCurrency,
-        conversionRate,
-        gas,
-        gasPrice,
-        blockGasLimit,
-      })
-    default:
-      return h('div.token-gas', [
-        h('div.token-gas__amount', this.getTokenValue()),
-        h('div.token-gas__symbol', activeCurrency),
-      ])
-  }
-}
-
diff --git a/ui/app/components/send/usd-fee-display.js b/ui/app/components/send/usd-fee-display.js
deleted file mode 100644
index 4cf31a493..000000000
--- a/ui/app/components/send/usd-fee-display.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const FiatValue = require('../fiat-value')
-const { getTxFeeBn } = require('../../util')
-
-module.exports = USDFeeDisplay
-
-inherits(USDFeeDisplay, Component)
-function USDFeeDisplay () {
-  Component.call(this)
-}
-
-USDFeeDisplay.prototype.render = function () {
-  const {
-    activeCurrency,
-    conversionRate,
-    gas,
-    gasPrice,
-    blockGasLimit,
-  } = this.props
-
-  return h(FiatValue, {
-    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
-    conversionRate,
-    currentCurrency: activeCurrency,
-    style: {
-      color: '#5d5d5d',
-      fontSize: '16px',
-      fontFamily: 'DIN OT',
-      lineHeight: '22.4px',
-    },
-  })
-}
-
diff --git a/ui/app/components/template.js b/ui/app/components/template.js
deleted file mode 100644
index b6ed8eaa0..000000000
--- a/ui/app/components/template.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-
-module.exports = NewComponent
-
-inherits(NewComponent, Component)
-function NewComponent () {
-  Component.call(this)
-}
-
-NewComponent.prototype.render = function () {
-  const props = this.props
-
-  return (
-    h('span', props.message)
-  )
-}
diff --git a/ui/app/components/transaction-list-item-icon.js b/ui/app/components/transaction-list-item-icon.js
deleted file mode 100644
index f442b05af..000000000
--- a/ui/app/components/transaction-list-item-icon.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const Tooltip = require('./tooltip')
-
-const Identicon = require('./identicon')
-
-module.exports = TransactionIcon
-
-inherits(TransactionIcon, Component)
-function TransactionIcon () {
-  Component.call(this)
-}
-
-TransactionIcon.prototype.render = function () {
-  const { transaction, txParams, isMsg } = this.props
-  switch (transaction.status) {
-    case 'unapproved':
-      return h(!isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg')
-
-    case 'rejected':
-      return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
-        style: {
-          width: '24px',
-        },
-      })
-
-    case 'failed':
-      return h('i.fa.fa-exclamation-triangle.fa-lg.error', {
-        style: {
-          width: '24px',
-        },
-      })
-
-    case 'submitted':
-      return h(Tooltip, {
-        title: 'Pending',
-        position: 'right',
-      }, [
-        h('i.fa.fa-ellipsis-h', {
-          style: {
-            fontSize: '27px',
-          },
-        }),
-      ])
-  }
-
-  if (isMsg) {
-    return h('i.fa.fa-certificate.fa-lg', {
-      style: {
-        width: '24px',
-      },
-    })
-  }
-
-  if (txParams.to) {
-    return h(Identicon, {
-      diameter: 24,
-      address: txParams.to || transaction.hash,
-    })
-  } else {
-    return h('i.fa.fa-file-text-o.fa-lg', {
-      style: {
-        width: '24px',
-      },
-    })
-  }
-}
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
deleted file mode 100644
index 6d6e79bd5..000000000
--- a/ui/app/components/transaction-list-item.js
+++ /dev/null
@@ -1,239 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-
-const EthBalance = require('./eth-balance')
-const addressSummary = require('../util').addressSummary
-const explorerLink = require('etherscan-link').createExplorerLink
-const CopyButton = require('./copyButton')
-const vreme = new (require('vreme'))()
-const Tooltip = require('./tooltip')
-const numberToBN = require('number-to-bn')
-const actions = require('../actions')
-const t = require('../../i18n')
-
-const TransactionIcon = require('./transaction-list-item-icon')
-const ShiftListItem = require('./shift-list-item')
-
-const mapDispatchToProps = dispatch => {
-  return {
-    retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
-  }
-}
-
-module.exports = connect(null, mapDispatchToProps)(TransactionListItem)
-
-inherits(TransactionListItem, Component)
-function TransactionListItem () {
-  Component.call(this)
-}
-
-TransactionListItem.prototype.showRetryButton = function () {
-  const { transaction = {} } = this.props
-  const { status, time } = transaction
-  return status === 'submitted' && Date.now() - time > 30000
-}
-
-TransactionListItem.prototype.render = function () {
-  const { transaction, network, conversionRate, currentCurrency } = this.props
-  const { status } = transaction
-  if (transaction.key === 'shapeshift') {
-    if (network === '1') return h(ShiftListItem, transaction)
-  }
-  var date = formatDate(transaction.time)
-
-  let isLinkable = false
-  const numericNet = parseInt(network)
-  isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 4 || numericNet === 42
-
-  var isMsg = ('msgParams' in transaction)
-  var isTx = ('txParams' in transaction)
-  var isPending = status === 'unapproved'
-  let txParams
-  if (isTx) {
-    txParams = transaction.txParams
-  } else if (isMsg) {
-    txParams = transaction.msgParams
-  }
-
-  const nonce = txParams.nonce ? numberToBN(txParams.nonce).toString(10) : ''
-
-  const isClickable = ('hash' in transaction && isLinkable) || isPending
-  return (
-    h('.transaction-list-item.flex-column', {
-      onClick: (event) => {
-        if (isPending) {
-          this.props.showTx(transaction.id)
-        }
-        event.stopPropagation()
-        if (!transaction.hash || !isLinkable) return
-        var url = explorerLink(transaction.hash, parseInt(network))
-        global.platform.openWindow({ url })
-      },
-      style: {
-        padding: '20px 0',
-        alignItems: 'center',
-      },
-    }, [
-      h(`.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
-        style: {
-          width: '100%',
-        },
-      }, [
-        h('.identicon-wrapper.flex-column.flex-center.select-none', [
-          h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
-        ]),
-
-        h(Tooltip, {
-          title: t('transactionNumber'),
-          position: 'right',
-        }, [
-          h('span', {
-            style: {
-              display: 'flex',
-              cursor: 'normal',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: '10px',
-            },
-          }, nonce),
-        ]),
-
-        h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
-          domainField(txParams),
-          h('div', date),
-          recipientField(txParams, transaction, isTx, isMsg),
-        ]),
-
-        // Places a copy button if tx is successful, else places a placeholder empty div.
-        transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
-
-        isTx ? h(EthBalance, {
-          value: txParams.value,
-          conversionRate,
-          currentCurrency,
-          width: '55px',
-          shorten: true,
-          showFiat: false,
-          style: {fontSize: '15px'},
-        }) : h('.flex-column'),
-      ]),
-
-      this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover', {
-        onClick: event => {
-          event.stopPropagation()
-          this.resubmit()
-        },
-        style: {
-          height: '22px',
-          borderRadius: '22px',
-          color: '#F9881B',
-          padding: '0 20px',
-          backgroundColor: '#FFE3C9',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          fontSize: '8px',
-          cursor: 'pointer',
-        },
-      }, [
-        h('div', {
-          style: {
-            paddingRight: '2px',
-          },
-        }, t('takesTooLong')),
-        h('div', {
-          style: {
-            textDecoration: 'underline',
-          },
-        }, t('retryWithMoreGas')),
-      ]),
-    ])
-  )
-}
-
-TransactionListItem.prototype.resubmit = function () {
-  const { transaction } = this.props
-  this.props.retryTransaction(transaction.id)
-}
-
-function domainField (txParams) {
-  return h('div', {
-    style: {
-      fontSize: 'x-small',
-      color: '#ABA9AA',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      width: '100%',
-    },
-  }, [
-    txParams.origin,
-  ])
-}
-
-function recipientField (txParams, transaction, isTx, isMsg) {
-  let message
-
-  if (isMsg) {
-    message = t('sigRequested')
-  } else if (txParams.to) {
-    message = addressSummary(txParams.to)
-  } else {
-    message = t('contractDeployment')
-  }
-
-  return h('div', {
-    style: {
-      fontSize: 'x-small',
-      color: '#ABA9AA',
-    },
-  }, [
-    message,
-    renderErrorOrWarning(transaction),
-  ])
-}
-
-function formatDate (date) {
-  return vreme.format(new Date(date), 'March 16 2014 14:30')
-}
-
-function renderErrorOrWarning (transaction) {
-  const { status } = transaction
-
-  // show rejected
-  if (status === 'rejected') {
-    return h('span.error', ' (' + t('rejected') + ')')
-  }
-  if (transaction.err || transaction.warning) {
-    const { err, warning = {} } = transaction
-    const errFirst = !!((err && warning) || err)
-
-    errFirst ? err.message : warning.message
-
-    // show error
-    if (err) {
-      const message = err.message || ''
-      return (
-          h(Tooltip, {
-            title: message,
-            position: 'bottom',
-          }, [
-            h(`span.error`, ` (` + t('failed') + `)`),
-          ])
-      )
-    }
-
-    // show warning
-    if (warning) {
-      const message = warning.message
-      return h(Tooltip, {
-        title: message,
-        position: 'bottom',
-      }, [
-        h(`span.warning`, ` (` + t('warning') + `)`),
-      ])
-    }
-  }
-}
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
deleted file mode 100644
index 07f7a06ae..000000000
--- a/ui/app/components/transaction-list.js
+++ /dev/null
@@ -1,87 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-
-const TransactionListItem = require('./transaction-list-item')
-const t = require('../../i18n')
-
-module.exports = TransactionList
-
-
-inherits(TransactionList, Component)
-function TransactionList () {
-  Component.call(this)
-}
-
-TransactionList.prototype.render = function () {
-  const { transactions, network, unapprovedMsgs, conversionRate } = this.props
-
-  var shapeShiftTxList
-  if (network === '1') {
-    shapeShiftTxList = this.props.shapeShiftTxList
-  }
-  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
-  .sort((a, b) => b.time - a.time)
-
-  return (
-
-    h('section.transaction-list.full-flex-height', {
-      style: {
-        justifyContent: 'center',
-      },
-    }, [
-
-      h('style', `
-        .transaction-list .transaction-list-item:not(:last-of-type) {
-          border-bottom: 1px solid #D4D4D4;
-        }
-        .transaction-list .transaction-list-item .ether-balance-label {
-          display: block !important;
-          font-size: small;
-        }
-      `),
-
-      h('.tx-list', {
-        style: {
-          overflowY: 'auto',
-          height: '100%',
-          padding: '0 20px',
-          textAlign: 'center',
-        },
-      }, [
-
-        txsToRender.length
-          ? txsToRender.map((transaction, i) => {
-            let key
-            switch (transaction.key) {
-              case 'shapeshift':
-                const { depositAddress, time } = transaction
-                key = `shift-tx-${depositAddress}-${time}-${i}`
-                break
-              default:
-                key = `tx-${transaction.id}-${i}`
-            }
-            return h(TransactionListItem, {
-              transaction, i, network, key,
-              conversionRate,
-              showTx: (txId) => {
-                this.props.viewPendingTx(txId)
-              },
-            })
-          })
-        : h('.flex-center.full-flex-height', {
-          style: {
-            flexDirection: 'column',
-            justifyContent: 'center',
-          },
-        }, [
-          h('p', {
-            style: {
-              marginTop: '50px',
-            },
-          }, t('noTransactionHistory')),
-        ]),
-      ]),
-    ])
-  )
-}
diff --git a/ui/app/components/typed-message-renderer.js b/ui/app/components/typed-message-renderer.js
deleted file mode 100644
index d170d63b7..000000000
--- a/ui/app/components/typed-message-renderer.js
+++ /dev/null
@@ -1,42 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const extend = require('xtend')
-
-module.exports = TypedMessageRenderer
-
-inherits(TypedMessageRenderer, Component)
-function TypedMessageRenderer () {
-  Component.call(this)
-}
-
-TypedMessageRenderer.prototype.render = function () {
-  const props = this.props
-  const { value, style } = props
-  const text = renderTypedData(value)
-
-  const defaultStyle = extend({
-    width: '315px',
-    maxHeight: '210px',
-    resize: 'none',
-    border: 'none',
-    background: 'white',
-    padding: '3px',
-    overflow: 'scroll',
-  }, style)
-
-  return (
-    h('div.font-small', {
-      style: defaultStyle,
-    }, text)
-  )
-}
-
-function renderTypedData (values) {
-  return values.map(function (value) {
-    return h('div', {}, [
-      h('strong', {style: {display: 'block', fontWeight: 'bold'}}, String(value.name) + ':'),
-      h('div', {}, value.value),
-    ])
-  })
-}
diff --git a/ui/app/components/wallet-content-display.js b/ui/app/components/wallet-content-display.js
deleted file mode 100644
index bfa061be4..000000000
--- a/ui/app/components/wallet-content-display.js
+++ /dev/null
@@ -1,56 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-
-module.exports = WalletContentDisplay
-
-inherits(WalletContentDisplay, Component)
-function WalletContentDisplay () {
-  Component.call(this)
-}
-
-WalletContentDisplay.prototype.render = function () {
-  const { title, amount, fiatValue, active, style } = this.props
-
-  // TODO: Separate component: wallet-content-account
-  return h('div.flex-column', {
-    style: {
-      marginLeft: '1.3em',
-      alignItems: 'flex-start',
-      ...style,
-    },
-  }, [
-
-    h('span', {
-      style: {
-        fontSize: '1.1em',
-      },
-    }, title),
-
-    h('span', {
-      style: {
-        fontSize: '1.8em',
-        margin: '0.4em 0em',
-      },
-    }, amount),
-
-    h('span', {
-      style: {
-        fontSize: '1.3em',
-      },
-    }, fiatValue),
-
-    active && h('div', {
-      style: {
-        position: 'absolute',
-        marginLeft: '-1.3em',
-        height: '6em',
-        width: '0.3em',
-        background: '#D8D8D8', // $alto
-      },
-    }, [
-    ]),
-  ])
-
-}
-
-- 
cgit v1.2.3


From 5cdaf270f798218bddc72bde05d8ab77267cfb94 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 20 Mar 2018 06:47:45 -0230
Subject: Don't block user from setting gas if estimating gas returns errors.
 (#3627)

---
 ui/app/components/send/gas-fee-display-v2.js | 7 +++++--
 ui/app/components/send/send-v2-container.js  | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 0c6f76303..9aaa31b1e 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -18,6 +18,7 @@ GasFeeDisplay.prototype.render = function () {
     onClick,
     primaryCurrency = 'ETH',
     convertedCurrency,
+    gasLoadingError,
   } = this.props
 
   return h('div.send-v2__gas-fee-display', [
@@ -31,11 +32,13 @@ GasFeeDisplay.prototype.render = function () {
         convertedPrefix: '$',
         readOnly: true,
       })
-      : h('div.currency-display', t('loading')),
+      : gasLoadingError
+        ? h('div..currency-display.currency-display--message', 'Set with the gas price customizer.')
+        : h('div.currency-display', t('loading')),
 
     h('button.send-v2__sliders-icon-container', {
       onClick,
-      disabled: !gasTotal,
+      disabled: !gasTotal && !gasLoadingError,
     }, [
       h('i.fa.fa-sliders.send-v2__sliders-icon'),
     ]),
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 1106902b7..d1319b6dc 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -48,6 +48,7 @@ function mapStateToProps (state) {
     primaryCurrency,
     convertedCurrency: getCurrentCurrency(state),
     data,
+    selectedAddress,
     amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate,
     tokenContract: getSelectedTokenContract(state),
     unapprovedTxs: state.metamask.unapprovedTxs,
-- 
cgit v1.2.3


From dc92b56f184100a24aaf53c3e93619514159f938 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 20 Mar 2018 09:07:23 -0230
Subject: Identify token transactions by method names token data, and not just
 whether they've been add via metamask.

---
 ui/app/components/pending-tx/confirm-send-token.js |  1 +
 ui/app/components/pending-tx/index.js              | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index 0a4182014..c347dd21e 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -86,6 +86,7 @@ function mapDispatchToProps (dispatch, ownProps) {
         amount: tokenAmountInHex,
         errors: { to: null, amount: null },
         editingTransactionId: id,
+        token: ownProps.token,
       }))
       dispatch(actions.showSendTokenPage())
     },
diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
index f4f6afb8f..9676e9c86 100644
--- a/ui/app/components/pending-tx/index.js
+++ b/ui/app/components/pending-tx/index.js
@@ -63,14 +63,17 @@ PendingTx.prototype.componentWillMount = async function () {
       isFetching: false,
     })
   }
+  const tokenData = txParams && abiDecoder.decodeMethod(txParams.data)
+  const { name: tokenMethodName } = tokenData || {}
+  const isTokenTransaction = ['transfer', 'approve', 'transferFrom']
+    .find(possibleName => tokenMethodName === possibleName)
 
-  try {
+  if (isTokenTransaction) {
     const token = util.getContractAtAddress(txParams.to)
     const results = await Promise.all([
       token.symbol(),
       token.decimals(),
     ])
-
     const [ symbol, decimals ] = results
 
     if (symbol[0] && decimals[0]) {
@@ -83,11 +86,14 @@ PendingTx.prototype.componentWillMount = async function () {
       })
     } else {
       this.setState({
-        transactionType: TX_TYPES.SEND_ETHER,
+        transactionType: TX_TYPES.SEND_TOKEN,
+        tokenAddress: txParams.to,
+        tokenSymbol: null,
+        tokenDecimals: null,
         isFetching: false,
       })
     }
-  } catch (e) {
+  } else {
     this.setState({
       transactionType: TX_TYPES.SEND_ETHER,
       isFetching: false,
-- 
cgit v1.2.3


From 7a8e0802455b8819dac12d73a4a8e245d6907dc0 Mon Sep 17 00:00:00 2001
From: Thomas <tmashuang@gmail.com>
Date: Tue, 20 Mar 2018 10:29:22 -0700
Subject: Started on Tx list i18n

---
 ui/app/components/tx-list.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 34dc837ae..b6538347c 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -40,7 +40,7 @@ TxList.prototype.render = function () {
   return h('div.flex-column', [
     h('div.flex-row.tx-list-header-wrapper', [
       h('div.flex-row.tx-list-header', [
-        h('div', 'transactions'),
+        h('div', t('transactions')),
       ]),
     ]),
     h('div.flex-column.tx-list-container', {}, [
-- 
cgit v1.2.3


From 3c1248c8169a1cb96a0ee2bc0f523fb9c765569e Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 19 Mar 2018 16:12:09 -0700
Subject: Update confirm transaction screen

---
 ui/app/components/network-display.js               |  51 ++++
 .../pending-tx/confirm-deploy-contract.js          |  10 +-
 ui/app/components/pending-tx/confirm-send-ether.js | 336 ++++++++++-----------
 ui/app/components/sender-to-recipient.js           |  29 +-
 4 files changed, 244 insertions(+), 182 deletions(-)
 create mode 100644 ui/app/components/network-display.js

(limited to 'ui/app/components')

diff --git a/ui/app/components/network-display.js b/ui/app/components/network-display.js
new file mode 100644
index 000000000..9dc31b5c7
--- /dev/null
+++ b/ui/app/components/network-display.js
@@ -0,0 +1,51 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const { connect } = require('react-redux')
+const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
+const t = require('../../i18n')
+
+const networkToColorHash = {
+  1: '#038789',
+  3: '#e91550',
+  42: '#690496',
+  4: '#ebb33f',
+}
+
+class NetworkDisplay extends Component {
+  renderNetworkIcon () {
+    const { network } = this.props
+    const networkColor = networkToColorHash[network]
+
+    return networkColor
+      ? h(NetworkDropdownIcon, { backgroundColor: networkColor })
+      : h('i.fa.fa-question-circle.fa-med', {
+          style: {
+            margin: '0 4px',
+            color: 'rgb(125, 128, 130)',
+          },
+        })
+  }
+
+  render () {
+    const { provider: { type } } = this.props
+    return h('.network-display__container', [
+      this.renderNetworkIcon(),
+      h('.network-name', t(type)),
+    ])
+  }
+}
+
+NetworkDisplay.propTypes = {
+  network: PropTypes.string,
+  provider: PropTypes.object,
+}
+
+const mapStateToProps = ({ metamask: { network, provider } }) => {
+  return {
+    network,
+    provider,
+  }
+}
+
+module.exports = connect(mapStateToProps)(NetworkDisplay)
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
index 4810bb515..b75f3a964 100644
--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -10,6 +10,7 @@ const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
 const { conversionUtil } = require('../../conversion-util')
 const t = require('../../../i18n')
 const SenderToRecipient = require('../sender-to-recipient')
+const NetworkDisplay = require('../network-display')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
@@ -244,9 +245,12 @@ class ConfirmDeployContract extends Component {
     return (
       h('.page-container', [
         h('.page-container__header', [
-          h('.page-container__back-button', {
-            onClick: () => backToAccountDetail(selectedAddress),
-          }, t('back')),
+          h('.page-container__header-row', [
+            h('span.page-container__back-button', {
+              onClick: () => backToAccountDetail(selectedAddress),
+            }, t('back')),
+            window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
+          ]),
           h('.page-container__title', t('confirmContract')),
           h('.page-container__subtitle', t('pleaseReviewTransaction')),
         ]),
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index f36def9d5..d1ce25cbf 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -4,7 +4,6 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const actions = require('../../actions')
 const clone = require('clone')
-const Identicon = require('../identicon')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
@@ -15,6 +14,8 @@ const {
 } = require('../../conversion-util')
 const GasFeeDisplay = require('../send/gas-fee-display-v2')
 const t = require('../../../i18n')
+const SenderToRecipient = require('../sender-to-recipient')
+const NetworkDisplay = require('../network-display')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 
@@ -257,196 +258,181 @@ ConfirmSendEther.prototype.render = function () {
   this.inputs = []
 
   return (
-    h('div.confirm-screen-container.confirm-send-ether', [
-      // Main Send token Card
-      h('div.page-container', [
-        h('div.page-container__header', [
-          !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
+    // Main Send token Card
+    h('.page-container', [
+      h('.page-container__header', [
+        h('.page-container__header-row', [
+          h('span.page-container__back-button', {
             onClick: () => editTransaction(txMeta),
+            style: {
+              visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden',
+            },
           }, 'Edit'),
-          h('div.page-container__title', title),
-          h('div.page-container__subtitle', subtitle),
+          window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
+        ]),
+        h('.page-container__title', title),
+        h('.page-container__subtitle', subtitle),
+      ]),
+      h('.page-container__content', [
+        h(SenderToRecipient, {
+          senderName: fromName,
+          senderAddress: fromAddress,
+          recipientName: toName,
+          recipientAddress: txParams.to,
+        }),
+
+        // h('h3.flex-center.confirm-screen-sending-to-message', {
+        //   style: {
+        //     textAlign: 'center',
+        //     fontSize: '16px',
+        //   },
+        // }, [
+        //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+        // ]),
+
+        h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
+        h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
+        h('div.flex-center.confirm-memo-wrapper', [
+          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
         ]),
-        h('.page-container__content', [
-          h('div.flex-row.flex-center.confirm-screen-identicons', [
-            h('div.confirm-screen-account-wrapper', [
-              h(
-                Identicon,
-                {
-                  address: fromAddress,
-                  diameter: 60,
-                },
-              ),
-              h('span.confirm-screen-account-name', fromName),
-              // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
-            ]),
-            h('i.fa.fa-arrow-right.fa-lg'),
-            h('div.confirm-screen-account-wrapper', [
-              h(
-                Identicon,
-                {
-                  address: txParams.to,
-                  diameter: 60,
-                },
-              ),
-              h('span.confirm-screen-account-name', toName),
-              // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
-            ]),
-          ]),
 
-          // h('h3.flex-center.confirm-screen-sending-to-message', {
-          //   style: {
-          //     textAlign: 'center',
-          //     fontSize: '16px',
-          //   },
-          // }, [
-          //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
-          // ]),
-
-          h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
-          h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
-          h('div.flex-center.confirm-memo-wrapper', [
-            h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
+        h('div.confirm-screen-rows', [
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', fromName),
+              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+            ]),
           ]),
 
-          h('div.confirm-screen-rows', [
-            h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
-              h('div.confirm-screen-section-column', [
-                h('div.confirm-screen-row-info', fromName),
-                h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
-              ]),
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', toName),
+              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
             ]),
+          ]),
 
-            h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
-              h('div.confirm-screen-section-column', [
-                h('div.confirm-screen-row-info', toName),
-                h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
-              ]),
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
+            h('div.confirm-screen-section-column', [
+              h(GasFeeDisplay, {
+                gasTotal: gasTotal || gasFeeInHex,
+                conversionRate,
+                convertedCurrency,
+                onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal),
+              }),
             ]),
+          ]),
 
-            h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
-              h('div.confirm-screen-section-column', [
-                h(GasFeeDisplay, {
-                  gasTotal: gasTotal || gasFeeInHex,
-                  conversionRate,
-                  convertedCurrency,
-                  onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal),
-                }),
-              ]),
+          h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
+            h('div.confirm-screen-section-column', [
+              h('span.confirm-screen-label', [ t('total') + ' ' ]),
+              h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
             ]),
 
-            h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
-              h('div.confirm-screen-section-column', [
-                h('span.confirm-screen-label', [ t('total') + ' ' ]),
-                h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
-              ]),
-
-              h('div.confirm-screen-section-column', [
-                h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
-                h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
-              ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
+              h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
             ]),
           ]),
-
-  // These are latest errors handling from master
-  // Leaving as comments as reference when we start implementing error handling
-  //         h('style', `
-  //           .conf-buttons button {
-  //             margin-left: 10px;
-  //             text-transform: uppercase;
-  //           }
-  //         `),
-
-  //         txMeta.simulationFails ?
-  //           h('.error', {
-  //             style: {
-  //               marginLeft: 50,
-  //               fontSize: '0.9em',
-  //             },
-  //           }, 'Transaction Error. Exception thrown in contract code.')
-  //         : null,
-
-  //         !isValidAddress ?
-  //           h('.error', {
-  //             style: {
-  //               marginLeft: 50,
-  //               fontSize: '0.9em',
-  //             },
-  //           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
-  //         : null,
-
-  //         insufficientBalance ?
-  //           h('span.error', {
-  //             style: {
-  //               marginLeft: 50,
-  //               fontSize: '0.9em',
-  //             },
-  //           }, 'Insufficient balance for transaction')
-  //         : null,
-
-  //         // send + cancel
-  //         h('.flex-row.flex-space-around.conf-buttons', {
-  //           style: {
-  //             display: 'flex',
-  //             justifyContent: 'flex-end',
-  //             margin: '14px 25px',
-  //           },
-  //         }, [
-  //           h('button', {
-  //             onClick: (event) => {
-  //               this.resetGasFields()
-  //               event.preventDefault()
-  //             },
-  //           }, 'Reset'),
-
-  //           // Accept Button or Buy Button
-  //           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
-  //             h('input.confirm.btn-green', {
-  //               type: 'submit',
-  //               value: 'SUBMIT',
-  //               style: { marginLeft: '10px' },
-  //               disabled: buyDisabled,
-  //             }),
-
-  //           h('button.cancel.btn-red', {
-  //             onClick: props.cancelTransaction,
-  //           }, 'Reject'),
-  //         ]),
-  //         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
-  //           style: {
-  //             display: 'flex',
-  //             justifyContent: 'flex-end',
-  //             margin: '14px 25px',
-  //           },
-  //         }, [
-  //           h('button.cancel.btn-red', {
-  //             onClick: props.cancelAllTransactions,
-  //           }, 'Reject All'),
-  //         ]) : null,
-  //       ]),
-  //     ])
-  //   )
-  // }
         ]),
 
-        h('form#pending-tx-form', {
-          onSubmit: this.onSubmit,
-        }, [
-          h('.page-container__footer', [
-            // Cancel Button
-            h('button.btn-cancel.page-container__footer-button.allcaps', {
-              onClick: (event) => {
-                clearSend()
-                this.cancel(event, txMeta)
-              },
-            }, t('cancel')),
-
-            // Accept Button
-            h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
-          ]),
+// These are latest errors handling from master
+// Leaving as comments as reference when we start implementing error handling
+//         h('style', `
+//           .conf-buttons button {
+//             margin-left: 10px;
+//             text-transform: uppercase;
+//           }
+//         `),
+
+//         txMeta.simulationFails ?
+//           h('.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Transaction Error. Exception thrown in contract code.')
+//         : null,
+
+//         !isValidAddress ?
+//           h('.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
+//         : null,
+
+//         insufficientBalance ?
+//           h('span.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Insufficient balance for transaction')
+//         : null,
+
+//         // send + cancel
+//         h('.flex-row.flex-space-around.conf-buttons', {
+//           style: {
+//             display: 'flex',
+//             justifyContent: 'flex-end',
+//             margin: '14px 25px',
+//           },
+//         }, [
+//           h('button', {
+//             onClick: (event) => {
+//               this.resetGasFields()
+//               event.preventDefault()
+//             },
+//           }, 'Reset'),
+
+//           // Accept Button or Buy Button
+//           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
+//             h('input.confirm.btn-green', {
+//               type: 'submit',
+//               value: 'SUBMIT',
+//               style: { marginLeft: '10px' },
+//               disabled: buyDisabled,
+//             }),
+
+//           h('button.cancel.btn-red', {
+//             onClick: props.cancelTransaction,
+//           }, 'Reject'),
+//         ]),
+//         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
+//           style: {
+//             display: 'flex',
+//             justifyContent: 'flex-end',
+//             margin: '14px 25px',
+//           },
+//         }, [
+//           h('button.cancel.btn-red', {
+//             onClick: props.cancelAllTransactions,
+//           }, 'Reject All'),
+//         ]) : null,
+//       ]),
+//     ])
+//   )
+// }
+      ]),
+
+      h('form#pending-tx-form', {
+        onSubmit: this.onSubmit,
+      }, [
+        h('.page-container__footer', [
+          // Cancel Button
+          h('button.btn-cancel.page-container__footer-button.allcaps', {
+            onClick: (event) => {
+              clearSend()
+              this.cancel(event, txMeta)
+            },
+          }, t('cancel')),
+
+          // Accept Button
+          h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
         ]),
       ]),
     ])
diff --git a/ui/app/components/sender-to-recipient.js b/ui/app/components/sender-to-recipient.js
index 25b9c7d6b..f35c353ad 100644
--- a/ui/app/components/sender-to-recipient.js
+++ b/ui/app/components/sender-to-recipient.js
@@ -5,6 +5,28 @@ const t = require('../../i18n')
 const Identicon = require('./identicon')
 
 class SenderToRecipient extends Component {
+  renderRecipientIcon () {
+    const { recipientAddress } = this.props
+    return (
+      recipientAddress
+        ? h(Identicon, { address: recipientAddress, diameter: 20 })
+        : h('i.fa.fa-file-text-o')
+    )
+  }
+
+  renderRecipient () {
+    const { recipientName } = this.props
+    return (
+      h('.sender-to-recipient__recipient', [
+        this.renderRecipientIcon(),
+        h(
+          '.sender-to-recipient__name.sender-to-recipient__recipient-name',
+          recipientName || t('newContract')
+        ),
+      ])
+    )
+  }
+
   render () {
     const { senderName, senderAddress } = this.props
 
@@ -28,10 +50,7 @@ class SenderToRecipient extends Component {
             }),
           ]),
         ]),
-        h('.sender-to-recipient__recipient', [
-          h('i.fa.fa-file-text-o'),
-          h('.sender-to-recipient__name.sender-to-recipient__recipient-name', t('newContract')),
-        ]),
+        this.renderRecipient(),
       ])
     )
   }
@@ -40,6 +59,8 @@ class SenderToRecipient extends Component {
 SenderToRecipient.propTypes = {
   senderName: PropTypes.string,
   senderAddress: PropTypes.string,
+  recipientName: PropTypes.string,
+  recipientAddress: PropTypes.string,
 }
 
 module.exports = SenderToRecipient
-- 
cgit v1.2.3


From dd19a934475cfa8cc31495b351b69a7d8d1f8d5e Mon Sep 17 00:00:00 2001
From: Thomas <tmashuang@gmail.com>
Date: Tue, 20 Mar 2018 12:06:59 -0700
Subject: Add i18n to tx status

---
 ui/app/components/tx-list-item.js | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 5ff1820a6..d104eda88 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -265,7 +265,7 @@ TxListItem.prototype.render = function () {
                 'tx-list-status--dropped': transactionStatus === 'dropped',
               }),
             },
-              transactionStatus,
+              this.txStatusIndicator(),
             ),
           ]),
         ]),
@@ -300,3 +300,28 @@ TxListItem.prototype.render = function () {
     ]), // holding on icon from design
   ])
 }
+
+TxListItem.prototype.txStatusIndicator = function () {
+  const { transactionStatus } = this.props
+
+  let name
+
+  if (transactionStatus === 'unapproved') {
+    name = t('unapproved')
+  } else if (transactionStatus === 'rejected') {
+    name = t('rejected')
+  } else if (transactionStatus === 'approved') {
+    name = t('approved')
+  } else if (transactionStatus === 'signed') {
+    name = t('signed')
+  } else if (transactionStatus === 'submitted') {
+    name = t('submitted')
+  } else if (transactionStatus === 'confirmed') {
+    name = t('confirmed')
+  } else if (transactionStatus === 'failed') {
+    name = t('failed')
+  } else if (transactionStatus === 'dropped') {
+    name = t('dropped')
+  }
+  return name
+}
-- 
cgit v1.2.3


From a69480d78d3a97310c7f39792133003b9bc058cb Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 20 Mar 2018 20:20:30 -0230
Subject: Gas inputs can be changed by up and down arrows (#3598)

* Up and down arrows can control gas inputs.

* input-number.js just uses number type.
---
 ui/app/components/currency-input.js | 2 ++
 ui/app/components/input-number.js   | 1 +
 2 files changed, 3 insertions(+)

(limited to 'ui/app/components')

diff --git a/ui/app/components/currency-input.js b/ui/app/components/currency-input.js
index 940238fa5..ece3eb43d 100644
--- a/ui/app/components/currency-input.js
+++ b/ui/app/components/currency-input.js
@@ -91,6 +91,7 @@ CurrencyInput.prototype.render = function () {
     placeholder,
     readOnly,
     inputRef,
+    type,
   } = this.props
   const { emptyState, focused } = this.state
 
@@ -99,6 +100,7 @@ CurrencyInput.prototype.render = function () {
   const valueToRender = this.getValueToRender()
   return h('input', {
     className,
+    type,
     value: emptyState ? '' : valueToRender,
     placeholder: focused ? '' : placeholder,
     size: valueToRender.length * inputSizeMultiplier,
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
index fd8c5c309..5600e35ee 100644
--- a/ui/app/components/input-number.js
+++ b/ui/app/components/input-number.js
@@ -55,6 +55,7 @@ InputNumber.prototype.render = function () {
       className: 'customize-gas-input',
       value,
       placeholder,
+      type: 'number',
       onInputChange: newValue => {
         this.setValue(newValue)
       },
-- 
cgit v1.2.3


From 3e79941658e58f5ef74cd9545c2b69136362ec76 Mon Sep 17 00:00:00 2001
From: kumavis <aaron@kumavis.me>
Date: Wed, 21 Mar 2018 13:12:59 -0700
Subject: ui - tx conf - only show special token tx conf screen for token send

---
 ui/app/components/pending-tx/index.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
index 9676e9c86..9c0453a3b 100644
--- a/ui/app/components/pending-tx/index.js
+++ b/ui/app/components/pending-tx/index.js
@@ -63,10 +63,14 @@ PendingTx.prototype.componentWillMount = async function () {
       isFetching: false,
     })
   }
-  const tokenData = txParams && abiDecoder.decodeMethod(txParams.data)
-  const { name: tokenMethodName } = tokenData || {}
-  const isTokenTransaction = ['transfer', 'approve', 'transferFrom']
-    .find(possibleName => tokenMethodName === possibleName)
+
+  // inspect tx data for supported special confirmation screens
+  let isTokenTransaction = false
+  if (txParams.data) {
+    const tokenData = abiDecoder.decodeMethod(txParams.data)
+    const { name: tokenMethodName } = tokenData || {}
+    isTokenTransaction = (tokenMethodName === 'transfer')
+  }
 
   if (isTokenTransaction) {
     const token = util.getContractAtAddress(txParams.to)
-- 
cgit v1.2.3


From cfa2592d78b31ea3c5d056bf1344cfd5d5353f16 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sun, 25 Mar 2018 22:19:42 -0700
Subject: Update button styles

---
 ui/app/components/customize-gas-modal/index.js       | 8 ++++++--
 ui/app/components/modals/account-details-modal.js    | 4 ++--
 ui/app/components/modals/deposit-ether-modal.js      | 2 +-
 ui/app/components/modals/export-private-key-modal.js | 6 +++---
 ui/app/components/shapeshift-form.js                 | 2 +-
 ui/app/components/signature-request.js               | 4 ++--
 ui/app/components/tx-view.js                         | 6 +++---
 ui/app/components/wallet-view.js                     | 2 +-
 8 files changed, 19 insertions(+), 15 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index d8384c19d..22ad98ce4 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -302,12 +302,16 @@ CustomizeGasModal.prototype.render = function () {
         }, [t('revert')]),
 
         h('div.send-v2__customize-gas__buttons', [
-          h('div.send-v2__customize-gas__cancel.allcaps', {
+          h('button.btn-secondary.send-v2__customize-gas__cancel', {
             onClick: this.props.hideModal,
+            style: {
+              marginRight: '10px',
+            },
           }, [t('cancel')]),
 
-          h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, {
+          h('button.btn-primary.send-v2__customize-gas__save', {
             onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
+            className: error && 'btn-primary--disabled',
           }, [t('save')]),
         ]),
 
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 75f989e86..927d73482 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -63,12 +63,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('button.btn-clear.account-modal__button', {
+      h('button.btn-primary.account-modal__button', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, t('etherscanView')),
 
       // Holding on redesign for Export Private Key functionality
-      h('button.btn-clear.account-modal__button', {
+      h('button.btn-primary.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
       }, t('exportPrivateKey')),
 
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index b642513d7..2de1240fc 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -94,7 +94,7 @@ DepositEtherModal.prototype.renderRow = function ({
       ]),
 
       !hideButton && h('div.deposit-ether-modal__buy-row__button', [
-        h('button.deposit-ether-modal__deposit-button', {
+        h('button.btn-primary--lg.deposit-ether-modal__deposit-button', {
           onClick: onButtonClick,
         }, [buttonLabel]),
       ]),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 017177cfd..cf42e4fa2 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -81,14 +81,14 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
 ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
   return h('div.export-private-key-buttons', {}, [
     !privateKey && this.renderButton(
-      'btn-cancel export-private-key__button export-private-key__button--cancel',
+      'btn-secondary--lg export-private-key__button export-private-key__button--cancel',
       () => hideModal(),
       'Cancel'
     ),
 
     (privateKey
-      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), t('done'))
-      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm'))
+      ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), t('done'))
+      : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm'))
     ),
 
   ])
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 3f8c17932..5729f893c 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -236,7 +236,7 @@ ShapeshiftForm.prototype.render = function () {
 
       ]),
 
-      !depositAddress && h('button.shapeshift-form__shapeshift-buy-btn', {
+      !depositAddress && h('button.btn-primary--lg.shapeshift-form__shapeshift-buy-btn', {
         className: btnClass,
         disabled: !token,
         onClick: () => this.onBuyWithShapeShift(),
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 7bf34e7b6..810a52e55 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -223,10 +223,10 @@ SignatureRequest.prototype.renderFooter = function () {
   }
 
   return h('div.request-signature__footer', [
-    h('button.request-signature__footer__cancel-button', {
+    h('button.btn-secondary--lg.request-signature__footer__cancel-button', {
       onClick: cancel,
     }, t('cancel')),
-    h('button.request-signature__footer__sign-button', {
+    h('button.btn-primary--lg', {
       onClick: sign,
     }, t('sign')),
   ])
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 96d776270..bf2065106 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -69,13 +69,13 @@ TxView.prototype.renderButtons = function () {
   return !selectedToken
     ? (
       h('div.flex-row.flex-center.hero-balance-buttons', [
-        h('button.btn-clear.hero-balance-button.allcaps', {
+        h('button.btn-primary.hero-balance-button', {
           onClick: () => showModal({
             name: 'DEPOSIT_ETHER',
           }),
         }, t('deposit')),
 
-        h('button.btn-clear.hero-balance-button.allcaps', {
+        h('button.btn-primary.hero-balance-button', {
           style: {
             marginLeft: '0.8em',
           },
@@ -85,7 +85,7 @@ TxView.prototype.renderButtons = function () {
     )
     : (
       h('div.flex-row.flex-center.hero-balance-buttons', [
-        h('button.btn-clear.hero-balance-button', {
+        h('button.btn-primary.hero-balance-button', {
           onClick: showSendTokenPage,
         }, t('send')),
       ])
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 18452205c..2c6d7f784 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -168,7 +168,7 @@ WalletView.prototype.render = function () {
 
     h(TokenList),
 
-    h('button.btn-clear.wallet-view__add-token-button', {
+    h('button.btn-primary.wallet-view__add-token-button', {
       onClick: () => {
         showAddTokenPage()
         hideSidebar()
-- 
cgit v1.2.3


From a109a774a59be78b6de40492fbf4dbe1ff518d8f Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 26 Mar 2018 11:00:54 -0230
Subject: Use ens-input component in send-v2 to allow sending to ens names.

---
 ui/app/components/ens-input.js              | 41 ++++++++---------------------
 ui/app/components/send/send-v2-container.js |  4 +--
 2 files changed, 13 insertions(+), 32 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index add67ea35..1b2d4009d 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -9,6 +9,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 const t = require('../../i18n')
+const ToAutoComplete = require('./send/to-autocomplete')
 
 
 module.exports = EnsInput
@@ -22,12 +23,14 @@ EnsInput.prototype.render = function () {
   const props = this.props
   const opts = extend(props, {
     list: 'addresses',
-    onChange: () => {
+    onChange: (recipient) => {
       const network = this.props.network
       const networkHasEnsSupport = getNetworkEnsSupport(network)
+
       if (!networkHasEnsSupport) return
 
-      const recipient = document.querySelector('input[name="address"]').value
+      props.onChange(recipient)
+
       if (recipient.match(ensRE) === null) {
         return this.setState({
           loadingEns: false,
@@ -39,34 +42,13 @@ EnsInput.prototype.render = function () {
       this.setState({
         loadingEns: true,
       })
-      this.checkName()
+      this.checkName(recipient)
     },
   })
   return h('div', {
-    style: { width: '100%' },
+    style: { width: '100%', position: 'relative' },
   }, [
-    h('input.large-input.send-screen-input', opts),
-    // The address book functionality.
-    h('datalist#addresses',
-      [
-        // Corresponds to the addresses owned.
-        Object.keys(props.identities).map((key) => {
-          const identity = props.identities[key]
-          return h('option', {
-            value: identity.address,
-            label: identity.name,
-            key: identity.address,
-          })
-        }),
-        // Corresponds to previously sent-to addresses.
-        props.addressBook.map((identity) => {
-          return h('option', {
-            value: identity.address,
-            label: identity.name,
-            key: identity.address,
-          })
-        }),
-      ]),
+    h(ToAutoComplete, { ...opts }),
     this.ensIcon(),
   ])
 }
@@ -83,8 +65,7 @@ EnsInput.prototype.componentDidMount = function () {
   }
 }
 
-EnsInput.prototype.lookupEnsName = function () {
-  const recipient = document.querySelector('input[name="address"]').value
+EnsInput.prototype.lookupEnsName = function (recipient) {
   const { ensResolution } = this.state
 
   log.info(`ENS attempting to resolve name: ${recipient}`)
@@ -130,8 +111,8 @@ EnsInput.prototype.ensIcon = function (recipient) {
     title: hoverText,
     style: {
       position: 'absolute',
-      padding: '9px',
-      transform: 'translatex(-40px)',
+      top: '16px',
+      left: '-25px',
     },
   }, this.ensIconContents(recipient))
 }
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index d1319b6dc..08c26a91f 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -69,13 +69,13 @@ function mapDispatchToProps (dispatch) {
     updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)),
     updateTx: txData => dispatch(actions.updateTransaction(txData)),
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
-    addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
+    addToAddressBook: (address, nickname) => dispatch(actions.addToAddressBook(address, nickname)),
     updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
     updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
     updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
     updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)),
     updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)),
-    updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
+    updateSendTo: (newTo, nickname) => dispatch(actions.updateSendTo(newTo, nickname)),
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
     updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
-- 
cgit v1.2.3