Fix merge conflicts

2024-12-23 09:52:26 +01:00 · 2018-03-30 16:18:48 -07:00 · 2018-03-30 16:18:48 -07:00 · ba23843f91
commit ba23843f91
parent bdc4a6964a 8e0f39353d
101 changed files with 1771 additions and 941 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -98,6 +98,32 @@ jobs:
          key: build-cache-{{ .Revision }}
          paths:
            - dist
+      - store_artifacts:
+          path: dist/mascara
+          destination: builds/mascara
+      - store_artifacts:
+          path: builds
+          destination: builds
+      - run:
+          name: build:announce
+          command: |
+            CIRCLE_PR_NUMBER="${CIRCLE_PR_NUMBER:-${CIRCLE_PULL_REQUEST##*/}}"
+            SHORT_SHA1=$(echo $CIRCLE_SHA1 | cut -c 1-7)
+            BUILD_LINK_BASE="https://$CIRCLE_BUILD_NUM-42009758-gh.circle-artifacts.com/0/builds"
+            VERSION=$(node -p 'require("./dist/chrome/manifest.json").version')
+            MASCARA="$BUILD_LINK_BASE/mascara/home.html"
+            CHROME="$BUILD_LINK_BASE/metamask-chrome-$VERSION.zip"
+            FIREFOX="$BUILD_LINK_BASE/metamask-firefox-$VERSION.zip"
+            OPERA="$BUILD_LINK_BASE/metamask-opera-$VERSION.zip"
+            EDGE="$BUILD_LINK_BASE/metamask-edge-$VERSION.zip"
+            COMMENT_MAIN="Builds ready [$SHORT_SHA1]: [mascara][mascara], [chrome][chrome], [firefox][firefox], [edge][edge], [opera][opera]"
+            COMMENT_LINKS="[mascara]:$MASCARA\n[chrome]:$CHROME\n[firefox]:$FIREFOX\n[opera]:$OPERA\n[edge]:$EDGE\n"
+            COMMENT_BODY="$COMMENT_MAIN\n\n$COMMENT_LINKS"
+            JSON_PAYLOAD="{\"body\":\"$COMMENT_BODY\"}"
+            POST_COMMENT_URI="https://api.github.com/repos/metamask/metamask-extension/issues/$CIRCLE_PR_NUMBER/comments"
+            echo "Announcement:\n$COMMENT_BODY"
+            echo "Posting to $POST_COMMENT_URI"
+            curl -d "$JSON_PAYLOAD" -H "Authorization: token $GITHUB_COMMENT_TOKEN" $POST_COMMENT_URI

  prep-scss:
    docker:
@ -141,6 +167,9 @@ jobs:
      - run:
          name: Test
          command: npm run test:e2e
+      - store_artifacts:
+          path: test-artifacts
+          destination: test-artifacts

  test-unit:
    docker:
--- a/.gitignore
+++ b/.gitignore
@ -28,6 +28,8 @@ test/background.js
 test/bundle.js
 test/test-bundle.js

+test-artifacts
+
 #ignore css output and sourcemaps
 ui/app/css/output/

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,6 +3,8 @@
 ## Current Master

 - Fix bug where the "Reset account" feature would not clear the network cache.
+- Increase maximum gas limit, to allow very gas heavy transactions, since block gas limits have been stable.
+- Allow user to select language on settings page

 ## 4.4.0 Mon Mar 26 2018

--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@ -14,9 +14,15 @@
  "address": {
    "message": "Adresse"
  },
+  "addCustomToken": {
+    "message": "Eigenen Token hinzufügen"
+  },
  "addToken": {
    "message": "Token hinzufügen"
  },
+  "addTokens": {
+    "message": "Token hinzufügen"
+  },
  "amount": {
    "message": "Betrag"
  },
@ -31,9 +37,15 @@
    "message": "MetaMask",
    "description": "Der Name der Erweiterung"
  },
+  "approved": {
+    "message": "Genehmigt"
+  },
  "attemptingConnect": {
    "message": "Versuch mit der Blockchain zu verbinden."
  },
+  "attributions": {
+    "message": "Was wir verwenden"
+  },
  "available": {
    "message": "Verfügbar"
  },
@ -43,6 +55,9 @@
  "balance": {
    "message": "Guthaben:"
  },
+  "balances": {
+    "message": "Deine Guthaben"
+  },
  "balanceIsInsufficientGas": {
    "message": "Guthaben unzureichend für den aktuellen gesamten Gasbetrag"
  },
@ -69,7 +84,7 @@
    "message": "Auf Coinbase kaufen"
  },
  "buyCoinbaseExplainer": {
-    "message": "Coinbase ist die weltweit bekannteste Möglichkeit bitcoin, ethereum und litecoin zu kaufen und verkaufen."
+    "message": "Coinbase ist die weltweit bekannteste Art und Weise um bitcoin, ethereum und litecoin zu kaufen und verkaufen."
  },
    "ok": {
    "message": "Ok"
@ -105,7 +120,7 @@
    "message": "Zu Coinbase fortfahren"
  },
  "contractDeployment": {
-    "message": "Smart Contract ausführen"
+    "message": "Smart Contract Ausführung"
  },
  "conversionProgress": {
    "message": "Umtausch in Arbeit"
@ -148,7 +163,7 @@
    "description": "Börsentyp (Kryptowährungen)"
  },
  "currentConversion": {
-    "message": "Aktueller Umtausch"
+    "message": "Aktuelle Tauschwährung"
  },
  "currentNetwork": {
    "message": "Aktuelles Netzwerk"
@ -185,7 +200,7 @@
    "description": "Teilt dem Benutzer mit welchen Token er beim Einzahlen mit Shapeshift ausgewählt hat"
  },
  "depositEth": {
-    "message": "Eth einzahlen"
+    "message": "Eth kaufen"
  },
  "depositEther": {
    "message": "Ether einzahlen"
@ -274,7 +289,7 @@
    "message": "Folge uns auf Twitter"
  },
  "from": {
-    "message": "von"
+    "message": "Von"
  },
  "fromToSame": {
    "message": "Ziel- und Ursprungsadresse dürfen nicht identisch sein"
@ -347,14 +362,14 @@
    "message": "Es erlaubt dir ether & Token zu halten und dient dir als Verbindung zu dezentralisierten Applikationen."
  },
  "import": {
-    "message": "Import",
+    "message": "Importieren",
    "description": "Button um den Account aus einer ausgewählten Datei zu importieren"
  },
  "importAccount": {
    "message": "Account importieren"
  },
  "importAccountMsg": {
-    "message":" Importierte Accounts werden nicht mit der Seed Wörterfolge  deines ursprünglichen MetaMask Accounts verknüpft. Erfahre mehr über importierte Accounts."
+    "message":" Importierte Accounts werden nicht mit der Seed-Wörterfolge  deines ursprünglichen MetaMask Accounts verknüpft. Erfahre mehr über importierte Accounts."
  },
  "importAnAccount": {
    "message": "Einen Account importieren"
@ -369,7 +384,7 @@
  "infoHelp": {
    "message": "Info & Hilfe"
  },
-  "insufficientFunds": {
+  "insufficientFunds": { 
    "message": "Nicht genügend Guthaben."
  },
  "insufficientTokens": {
@ -441,10 +456,10 @@
    "message": "Frei"
  },
  "loweCaseWords": {
-    "message": "Die Wörter der Seed Wörterfolgen sind alle kleingeschrieben"
+    "message": "Die Wörter der Seed-Wörterfolgen sind alle kleingeschrieben"
  },
  "mainnet": {
-    "message": "Ethereum Hauptnetzwerk (Main Net)"
+    "message": "Ethereum Main Net"
  },
  "message": {
    "message": "Nachricht"
@ -541,7 +556,7 @@
    "description": "Für den Import eine Accounts mit Hilfe eines Private Keys"
  },
  "pasteSeed": {
-    "message": "Füge deine Seed Wörterfolge hier ein!"
+    "message": "Füge deine Seed-Wörterfolge hier ein!"
  },
  "personalAddressDetected": {
    "message": "Personalisierte Adresse identifiziert. Bitte füge die Token Contract Adresse ein."
@ -557,7 +572,7 @@
    "description": "Wähle diesen Dateityp um damit einen Account zu importieren"
  },
  "privateKeyWarning": {
-    "message": "Warnung: Niemals jemanden deinen Private Key mitteilen. Jeder der im Besitz deines Private Keys ist, kann jegliches Guthaben deines Accounts stehlen."
+    "message": "Warnung: Niemals jemanden deinen Private Key mitteilen. Jeder der im Besitz deines Private Keys ist, kann jegliches Guthaben deines Accounts stehlen."  
  },
  "privateNetwork": {
    "message": "Privates Netzwerk"
@ -566,7 +581,7 @@
    "message": "QR Code anzeigen"
  },
  "readdToken": {
-    "message": "Du kannst  diesen Token zukünftig wieder hinzufügen indem du in den Menüpunkt \"Token hinzufügen\" in den Einstellungen deines Accounts gehst."
+    "message": "Du kannst diesen Token immer erneut hinzufügen, indem du in den Menüpunkt \"Token hinzufügen\" in den Einstellungen deines Accounts gehst."
  },
  "readMore": {
    "message": "Hier mehr erfahren."
@ -590,7 +605,7 @@
    "message": "Account zurücksetzten"
  },
  "restoreFromSeed": {
-    "message": "Mit Hilfe der Seed Wörterfolge wiederherstellen."
+    "message": "Mit Hilfe der Seed-Wörterfolge wiederherstellen."
  },
  "restoreVault": {
    "message": "Vault wiederherstellen"
@ -605,13 +620,13 @@
    "message": "Wallet Seed"
  },
  "revealSeedWords": {
-    "message": "Seed Wörterfolge anzeigen"
+    "message": "Seed-Wörterfolge anzeigen"
  },
  "revealSeedWordsWarning": {
-    "message": "Bitte niemals deine Seed Wörterfolge an einem öffentlichen Ort kenntlich machen. Mit diesen Wörtern können alle deine Accounts gestohlen werden."
+    "message": "Bitte niemals deine Seed-Wörterfolge an einem öffentlichen Ort kenntlich machen. Mit diesen Wörtern können alle deine Accounts gestohlen werden."
  },
  "revert": {
-    "message": "Zurück gehen"
+    "message": "Rückgängig machen"
  },
  "rinkeby": {
    "message": "Rinkeby Testnetzwerk"
@ -623,7 +638,7 @@
    "message": "Aktueller RPC"
  },
  "connectingToMainnet": {
-    "message": "Verbinde zum Ethereum Hauptnetzwerk (Main Net)"
+    "message": "Verbinde zum Ethereum Main Net"
  },
  "connectingToRopsten": {
    "message": " Verbinde zum Ropsten Testnetzwerk"
@ -649,7 +664,7 @@
    "description": "Prozess des Exportieren eines Accounts"
  },
  "saveSeedAsFile": {
-    "message": "Seed Wörterfolge als Datei speichern"
+    "message": "Seed-Wörterfolge als Datei speichern"
  },
  "search": {
    "message": "Suche"
@ -661,7 +676,7 @@
    "message": "Neues Passwort (min. 8 Zeichen)"
  },
  "seedPhraseReq": {
-    "message": "Seed Wörterfolgen bestehen aus 12 Wörtern"
+    "message": "Seed-Wörterfolgen bestehen aus 12 Wörtern"
  },
  "select": {
    "message": "Auswählen"
@ -685,7 +700,7 @@
    "message": "Token senden"
  },
  "onlySendToEtherAddress": {
-    "message": "ETH nur zu einer Ethereum Adresse senden."
+    "message": "ETH unbedingt nur zu einer Ethereum Adresse senden."
  },
  "sendTokensAnywhere": {
    "message": "Token zu einer beliebigen Person mit einem Ethereumaccount senden"
@ -742,7 +757,7 @@
    "message": "Einreichen"
  },
  "submitted": {
-    "message": "Eingereicht"
+    "message": "Abgeschickt"
  },
  "supportCenter": {
    "message": "Gehe zu unserem Support Center"
@ -782,7 +797,7 @@
    "message": "Tokensymbol"
  },
  "tokenWarning1": {
-    "message": "Behalte die Token die du mit deinem MetaMask Account gekauft hast im Auge. Wenn du Token mit einem anderen Account gekauft hast, werden diese hier nicht angezeigt."
+    "message": "Behalte die Token die du mit deinem MetaMask Account gekauft hast im Blick. Wenn du Token mit einem anderen Account gekauft hast, werden diese hier nicht angezeigt."
  },
  "total": {
    "message": "Gesamt"
@ -853,7 +868,7 @@
    "message": " Account einsehen"
  },
  "visitWebSite": {
-    "message": "Gehe zu unsere Webseite"
+    "message": "Gehe zu unserer Webseite"
  },
  "warning": {
    "message": "Warnung"
--- a/app/_locales/nl/messages.json
+++ b/app/_locales/nl/messages.json
@ -299,7 +299,7 @@
    "message": "De gaslimiet moet minstens 21000 zijn"
  },
  "generatingSeed": {
-    "message": "Zaad produceren ..."
+    "message": "Back-up woorden produceren ..."
  },
  "gasPrice": {
    "message": "Gasprijs (GWEI)"
@ -432,7 +432,7 @@
    "message": "Los"
  },
  "loweCaseWords": {
-    "message": "zaadwoorden hebben alleen kleine letters"
+    "message": "back-up woorden hebben alleen kleine letters"
  },
  "mainnet": {
    "message": "belangrijkste ethereum-netwerk"
@ -532,7 +532,7 @@
    "description": "Voor het importeren van een account vanaf een privésleutel"
  },
  "pasteSeed": {
-    "message": "Plak je zaadzin hier!"
+    "message": "Plak je back-up woorden hier!"
  },
  "personalAddressDetected": {
    "message": "Persoonlijk adres gedetecteerd. Voer het tokencontractadres in."
@ -581,7 +581,7 @@
    "message": "Account opnieuw instellen"
  },
  "restoreFromSeed": {
-    "message": "Herstel van zaaduitdrukking"
+    "message": "Herstel vanuit back-up woorden"
  },
  "required": {
    "message": "Verplicht"
@ -590,10 +590,10 @@
    "message": "Probeer hier opnieuw met een hogere gasprijs"
  },
  "revealSeedWords": {
-    "message": "Onthul zaadwoorden"
+    "message": "Onthul back-up woorden"
  },
  "revealSeedWordsWarning": {
-    "message": "Herstel je zaadwoorden niet op een openbare plaats! Deze woorden kunnen worden gebruikt om al uw accounts te stelen."
+    "message": "Zorg dat je back-up woorden niet op een openbare plaats bekijkt! Deze woorden kunnen worden gebruikt om al uw accounts opnieuw te genereren (en dus uw account te stelen)."
  },
  "revert": {
    "message": "terugkeren"
@ -616,7 +616,7 @@
    "description": "Account export proces"
  },
  "saveSeedAsFile": {
-    "message": "Bewaar zaadwoorden als bestand"
+    "message": "Bewaar back-up woorden als bestand"
  },
  "search": {
    "message": "Zoeken"
@ -625,7 +625,7 @@
    "message": "Voer hier je geheime twaalfwoordfrase in om je kluis te herstellen."
  },
  "seedPhraseReq": {
-    "message": "zaadzinnen zijn 12 woorden lang"
+    "message": "Back-up woorden zijn 12 woorden lang"
  },
  "select": {
    "message": "kiezen"
--- a/app/home.html
+++ b/app/home.html
@ -3,10 +3,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
-    <title>MetaMask Plugin</title>
+    <title>MetaMask</title>
  </head>
  <body>
    <div id="app-content"></div>
-    <script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
 </html>
--- a/app/manifest.json
+++ b/app/manifest.json
@ -27,8 +27,8 @@
  "default_locale": "en",
  "background": {
    "scripts": [
-      "scripts/chromereload.js",
-      "scripts/background.js"
+      "chromereload.js",
+      "background.js"
    ],
    "persistent": true
  },
@ -48,7 +48,7 @@
        "https://*/*"
      ],
      "js": [
-        "scripts/contentscript.js"
+        "contentscript.js"
      ],
      "run_at": "document_start",
      "all_frames": true
@ -62,11 +62,11 @@
    "https://*.infura.io/"
  ],
  "web_accessible_resources": [
-    "scripts/inpage.js"
+    "inpage.js"
  ],
  "externally_connectable": {
    "matches": [
      "https://metamask.io/*"
    ]
  }
-}
+}
--- a/app/notification.html
+++ b/app/notification.html
@ -11,6 +11,6 @@
  </head>
  <body class="notification" style="height:600px;">
    <div id="app-content"></div>
-    <script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
 </html>
--- a/app/popup.html
+++ b/app/popup.html
@ -3,10 +3,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
-    <title>MetaMask Plugin</title>
+    <title>MetaMask</title>
  </head>
  <body style="width:357px; height:600px;">
    <div id="app-content"></div>
-    <script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
 </html>
--- a/app/scripts/contentscript.js
+++ b/app/scripts/contentscript.js
@ -7,8 +7,8 @@ const ObjectMultiplex = require('obj-multiplex')
 const extension = require('extensionizer')
 const PortStream = require('./lib/port-stream.js')

-const inpageContent = fs.readFileSync(path.join(__dirname, '..', '..', 'dist', 'chrome', 'scripts', 'inpage.js')).toString()
-const inpageSuffix = '//# sourceURL=' + extension.extension.getURL('scripts/inpage.js') + '\n'
+const inpageContent = fs.readFileSync(path.join(__dirname, '..', '..', 'dist', 'chrome', 'inpage.js')).toString()
+const inpageSuffix = '//# sourceURL=' + extension.extension.getURL('inpage.js') + '\n'
 const inpageBundle = inpageContent + inpageSuffix

 // Eventually this streaming injection could be replaced with:
@ -96,7 +96,7 @@ function logStreamDisconnectWarning (remoteLabel, err) {
 }

 function shouldInjectWeb3 () {
-  return doctypeCheck() && suffixCheck() 
+  return doctypeCheck() && suffixCheck()
    && documentElementCheck() && !blacklistedDomainCheck()
 }

--- a/app/scripts/lib/nonce-tracker.js
+++ b/app/scripts/lib/nonce-tracker.js
@ -31,14 +31,13 @@ class NonceTracker {
    const networkNonceResult = await this._getNetworkNextNonce(address)
    const highestLocallyConfirmed = this._getHighestLocallyConfirmed(address)
    const nextNetworkNonce = networkNonceResult.nonce
-    const highestLocalNonce = highestLocallyConfirmed
-    const highestSuggested = Math.max(nextNetworkNonce, highestLocalNonce)
+    const highestSuggested = Math.max(nextNetworkNonce, highestLocallyConfirmed)

    const pendingTxs = this.getPendingTransactions(address)
    const localNonceResult = this._getHighestContinuousFrom(pendingTxs, highestSuggested) || 0

    nonceDetails.params = {
-      highestLocalNonce,
+      highestLocallyConfirmed,
      highestSuggested,
      nextNetworkNonce,
    }
--- a/app/scripts/popup.js
+++ b/app/scripts/popup.js
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,37 +1,51 @@
-var watchify = require('watchify')
-var browserify = require('browserify')
-var disc = require('disc')
-var gulp = require('gulp')
-var source = require('vinyl-source-stream')
-var buffer = require('vinyl-buffer')
-var gutil = require('gulp-util')
-var watch = require('gulp-watch')
-var sourcemaps = require('gulp-sourcemaps')
-var jsoneditor = require('gulp-json-editor')
-var zip = require('gulp-zip')
-var assign = require('lodash.assign')
-var livereload = require('gulp-livereload')
-var del = require('del')
-var eslint = require('gulp-eslint')
-var fs = require('fs')
-var path = require('path')
-var manifest = require('./app/manifest.json')
-var gulpif = require('gulp-if')
-var replace = require('gulp-replace')
-var mkdirp = require('mkdirp')
-var asyncEach = require('async/each')
-var exec = require('child_process').exec
-var sass = require('gulp-sass')
-var autoprefixer = require('gulp-autoprefixer')
-var gulpStylelint = require('gulp-stylelint')
-var stylefmt = require('gulp-stylefmt')
-var uglify = require('gulp-uglify-es').default
-var babel = require('gulp-babel')
+const watchify = require('watchify')
+const browserify = require('browserify')
+const disc = require('disc')
+const gulp = require('gulp')
+const source = require('vinyl-source-stream')
+const buffer = require('vinyl-buffer')
+const gutil = require('gulp-util')
+const watch = require('gulp-watch')
+const sourcemaps = require('gulp-sourcemaps')
+const jsoneditor = require('gulp-json-editor')
+const zip = require('gulp-zip')
+const assign = require('lodash.assign')
+const livereload = require('gulp-livereload')
+const del = require('del')
+const eslint = require('gulp-eslint')
+const fs = require('fs')
+const path = require('path')
+const manifest = require('./app/manifest.json')
+const gulpif = require('gulp-if')
+const replace = require('gulp-replace')
+const mkdirp = require('mkdirp')
+const asyncEach = require('async/each')
+const exec = require('child_process').exec
+const sass = require('gulp-sass')
+const autoprefixer = require('gulp-autoprefixer')
+const gulpStylelint = require('gulp-stylelint')
+const stylefmt = require('gulp-stylefmt')
+const uglify = require('gulp-uglify-es').default
+const babel = require('gulp-babel')
+const debug = require('gulp-debug')
+const pify = require('pify')
+const endOfStream = pify(require('end-of-stream'))

+const disableDebugTools = gutil.env.disableDebugTools
+const debugMode = gutil.env.debug

-var disableDebugTools = gutil.env.disableDebugTools
-var debug = gutil.env.debug
-
+const browserPlatforms = [
+  'firefox',
+  'chrome',
+  'edge',
+  'opera',
+]
+const commonPlatforms = [
+  // browser webapp
+  'mascara',
+  // browser extensions
+  ...browserPlatforms
+]

 // browser reload

@ -41,65 +55,98 @@ gulp.task('dev:reload', function() {
  })
 })

+// copy universal

-// copy static
+const copyTaskNames = []
+const copyDevTaskNames = []

-gulp.task('copy:locales', copyTask({
+createCopyTasks('locales', {
  source: './app/_locales/',
-  destinations: [
-    './dist/firefox/_locales',
-    './dist/chrome/_locales',
-    './dist/edge/_locales',
-    './dist/opera/_locales',
-  ]
-}))
-gulp.task('copy:images', copyTask({
+  destinations: commonPlatforms.map(platform => `./dist/${platform}/_locales`),
+})
+createCopyTasks('images', {
  source: './app/images/',
-  destinations: [
-    './dist/firefox/images',
-    './dist/chrome/images',
-    './dist/edge/images',
-    './dist/opera/images',
-  ],
-}))
-gulp.task('copy:contractImages', copyTask({
+  destinations: commonPlatforms.map(platform => `./dist/${platform}/images`),
+})
+createCopyTasks('contractImages', {
  source: './node_modules/eth-contract-metadata/images/',
-  destinations: [
-    './dist/firefox/images/contract',
-    './dist/chrome/images/contract',
-    './dist/edge/images/contract',
-    './dist/opera/images/contract',
-  ],
-}))
-gulp.task('copy:fonts', copyTask({
+  destinations: commonPlatforms.map(platform => `./dist/${platform}/images/contract`),
+})
+createCopyTasks('fonts', {
  source: './app/fonts/',
-  destinations: [
-    './dist/firefox/fonts',
-    './dist/chrome/fonts',
-    './dist/edge/fonts',
-    './dist/opera/fonts',
-  ],
-}))
-gulp.task('copy:reload', copyTask({
+  destinations: commonPlatforms.map(platform => `./dist/${platform}/fonts`),
+})
+createCopyTasks('reload', {
+  devOnly: true,
  source: './app/scripts/',
-  destinations: [
-    './dist/firefox/scripts',
-    './dist/chrome/scripts',
-    './dist/edge/scripts',
-    './dist/opera/scripts',
-  ],
  pattern: '/chromereload.js',
-}))
-gulp.task('copy:root', copyTask({
+  destinations: commonPlatforms.map(platform => `./dist/${platform}`),
+})
+createCopyTasks('html', {
  source: './app/',
-  destinations: [
-    './dist/firefox',
-    './dist/chrome',
-    './dist/edge',
-    './dist/opera',
-  ],
-  pattern: '/*',
-}))
+  pattern: '/*.html',
+  destinations: commonPlatforms.map(platform => `./dist/${platform}`),
+})
+
+// copy extension
+
+createCopyTasks('manifest', {
+  source: './app/',
+  pattern: '/*.json',
+  destinations: browserPlatforms.map(platform => `./dist/${platform}`),
+})
+
+// copy mascara
+
+createCopyTasks('html:mascara', {
+  source: './mascara/',
+  pattern: 'proxy/index.html',
+  destinations: [`./dist/mascara/`],
+})
+
+function createCopyTasks(label, opts) {
+  if (!opts.devOnly) {
+    const copyTaskName = `copy:${label}`
+    copyTask(copyTaskName, opts)
+    copyTaskNames.push(copyTaskName)
+  }
+  const copyDevTaskName = `dev:copy:${label}`
+  copyTask(copyDevTaskName, Object.assign({ devMode: true }, opts))
+  copyDevTaskNames.push(copyDevTaskName)
+}
+
+function copyTask(taskName, opts){
+  const source = opts.source
+  const destination = opts.destination
+  const destinations = opts.destinations || [destination]
+  const pattern = opts.pattern || '/**/*'
+  const devMode = opts.devMode
+
+  return gulp.task(taskName, function () {
+    if (devMode) {
+      watch(source + pattern, (event) => {
+        livereload.changed(event.path)
+        performCopy()
+      })
+    }
+
+    return performCopy()
+  })
+
+  function performCopy() {
+    // stream from source
+    let stream = gulp.src(source + pattern, { base: source })
+
+    // copy to destinations
+    destinations.forEach(function(destination) {
+      stream = stream.pipe(gulp.dest(destination))
+    })
+
+    return stream
+  }
+}
+
+// manifest tinkering

 gulp.task('manifest:chrome', function() {
  return gulp.src('./dist/chrome/manifest.json')
@ -134,7 +181,7 @@ gulp.task('manifest:production', function() {
  ],{base: './dist/'})

  // Exclude chromereload script in production:
-  .pipe(gulpif(!debug,jsoneditor(function(json) {
+  .pipe(gulpif(!debugMode,jsoneditor(function(json) {
    json.background.scripts = json.background.scripts.filter((script) => {
      return !script.includes('chromereload')
    })
@ -144,36 +191,22 @@ gulp.task('manifest:production', function() {
  .pipe(gulp.dest('./dist/', { overwrite: true }))
 })

-const staticFiles = [
-  'locales',
-  'images',
-  'fonts',
-  'root'
-]
+gulp.task('copy',
+  gulp.series(
+    gulp.parallel(...copyTaskNames),
+    'manifest:production',
+    'manifest:chrome',
+    'manifest:opera'
+  )
+)

-var copyStrings = staticFiles.map(staticFile => `copy:${staticFile}`)
-copyStrings.push('copy:contractImages')
-
-if (debug) {
-  copyStrings.push('copy:reload')
-}
-
-gulp.task('copy', gulp.series(gulp.parallel(...copyStrings), 'manifest:production', 'manifest:chrome', 'manifest:opera'))
-gulp.task('copy:watch', function(){
-  gulp.watch(['./app/{_locales,images}/*', './app/scripts/chromereload.js', './app/*.{html,json}'], gulp.series('copy'))
-})
-
-// record deps
-
-gulp.task('deps', function (cb) {
-  exec('npm ls', (err, stdoutOutput, stderrOutput) => {
-    if (err) return cb(err)
-    const browsers = ['firefox','chrome','edge','opera']
-    asyncEach(browsers, (target, done) => {
-      fs.writeFile(`./dist/${target}/deps.txt`, stdoutOutput, done)
-    }, cb)
-  })
-})
+gulp.task('dev:copy',
+  gulp.series(
+    gulp.parallel(...copyDevTaskNames),
+    'manifest:chrome',
+    'manifest:opera'
+  )
+)

 // lint js

@ -196,41 +229,49 @@ gulp.task('lint:fix', function () {
    .pipe(eslint.failAfterError())
 });

-/*
-gulp.task('default', ['lint'], function () {
-    // This will only run if the lint task is successful...
-});
-*/
-
-// build js
-
-const jsFiles = [
-  'inpage',
-  'contentscript',
-  'background',
-  'popup',
-]
-
 // scss compilation and autoprefixing tasks

-gulp.task('build:scss', function () {
-  return gulp.src('ui/app/css/index.scss')
-    .pipe(sourcemaps.init())
-    .pipe(sass().on('error', sass.logError))
-    .pipe(sourcemaps.write())
-    .pipe(autoprefixer())
-    .pipe(gulp.dest('ui/app/css/output'))
-})
-gulp.task('watch:scss', function() {
-  gulp.watch(['ui/app/css/**/*.scss'], gulp.series(['build:scss']))
-})
+gulp.task('build:scss', createScssBuildTask({
+  src: 'ui/app/css/index.scss',
+  dest: 'ui/app/css/output',
+  devMode: false,
+}))
+
+gulp.task('dev:scss', createScssBuildTask({
+  src: 'ui/app/css/index.scss',
+  dest: 'ui/app/css/output',
+  devMode: true,
+  pattern: 'ui/app/css/**/*.scss',
+}))
+
+function createScssBuildTask({ src, dest, devMode, pattern }) {
+  return function () {
+    if (devMode) {
+      watch(pattern, async (event) => {
+        const stream = buildScss()
+        await endOfStream(stream)
+        livereload.changed(event.path)
+      })
+    }
+    return buildScss()
+  }
+
+  function buildScss() {
+    return gulp.src(src)
+      .pipe(sourcemaps.init())
+      .pipe(sass().on('error', sass.logError))
+      .pipe(sourcemaps.write())
+      .pipe(autoprefixer())
+      .pipe(gulp.dest(dest))
+  }
+}

 gulp.task('lint-scss', function() {
  return gulp
    .src('ui/app/css/itcss/**/*.scss')
    .pipe(gulpStylelint({
      reporters: [
-        {formatter: 'string', console: true}
+        { formatter: 'string', console: true }
      ],
      fix: true,
    }));
@ -242,46 +283,82 @@ gulp.task('fmt-scss', function () {
    .pipe(gulp.dest('ui/app/css/itcss'));
 });

+// build js
+
+const buildJsFiles = [
+  'inpage',
+  'contentscript',
+  'background',
+  'ui',
+]
+
 // bundle tasks
+createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'dev:extension:js', devMode: true })
+createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'build:extension:js'  })
+createTasksForBuildJsMascara({ taskPrefix: 'build:mascara:js' })
+createTasksForBuildJsMascara({ taskPrefix: 'dev:mascara:js', devMode: true })

-var jsDevStrings = jsFiles.map(jsFile => `dev:js:${jsFile}`)
-var jsBuildStrings = jsFiles.map(jsFile => `build:js:${jsFile}`)
+function createTasksForBuildJsExtension({ buildJsFiles, taskPrefix, devMode, bundleTaskOpts = {} }) {
+  // inpage must be built before all other scripts:
+  const rootDir = './app/scripts'
+  const nonInpageFiles = buildJsFiles.filter(file => file !== 'inpage')
+  const buildPhase1 = ['inpage']
+  const buildPhase2 = nonInpageFiles
+  const destinations = browserPlatforms.map(platform => `./dist/${platform}`)
+  bundleTaskOpts = Object.assign({
+    buildSourceMaps: true,
+    sourceMapDir: devMode ? './' : '../sourcemaps',
+    minifyBuild: !devMode,
+    buildWithFullPaths: devMode,
+    watch: devMode,
+  }, bundleTaskOpts)
+  createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1, buildPhase2 })
+}

-jsFiles.forEach((jsFile) => {
-  gulp.task(`dev:js:${jsFile}`,   bundleTask({
-    watch: true,
-    label: jsFile,
-    filename: `${jsFile}.js`,
-    isBuild: false
-  }))
-  gulp.task(`build:js:${jsFile}`, bundleTask({
-    watch: false,
-    label: jsFile,
-    filename: `${jsFile}.js`,
-    isBuild: true
-  }))
-})
+function createTasksForBuildJsMascara({ taskPrefix, devMode, bundleTaskOpts = {} }) {
+  // inpage must be built before all other scripts:
+  const rootDir = './mascara/src/'
+  const buildPhase1 = ['ui', 'proxy', 'background', 'metamascara']
+  const destinations = ['./dist/mascara']
+  bundleTaskOpts = Object.assign({
+    buildSourceMaps: true,
+    sourceMapDir: './',
+    minifyBuild: !devMode,
+    buildWithFullPaths: devMode,
+    watch: devMode,
+  }, bundleTaskOpts)
+  createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 })
+}

-// inpage must be built before all other scripts:
-const firstDevString = jsDevStrings.shift()
-gulp.task('dev:js', gulp.series(firstDevString, gulp.parallel(...jsDevStrings)))
+function createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 = [], buildPhase2 = [] }) {
+  // bundle task for each file
+  const jsFiles = [].concat(buildPhase1, buildPhase2)
+  jsFiles.forEach((jsFile) => {
+    gulp.task(`${taskPrefix}:${jsFile}`, bundleTask(Object.assign({
+      label: jsFile,
+      filename: `${jsFile}.js`,
+      filepath: `${rootDir}/${jsFile}.js`,
+      destinations,
+    }, bundleTaskOpts)))
+  })
+  // compose into larger task
+  const subtasks = []
+  subtasks.push(gulp.parallel(buildPhase1.map(file => `${taskPrefix}:${file}`)))
+  if (buildPhase2.length) subtasks.push(gulp.parallel(buildPhase2.map(file => `${taskPrefix}:${file}`)))

-// inpage must be built before all other scripts:
-const firstBuildString = jsBuildStrings.shift()
-gulp.task('build:js',  gulp.series(firstBuildString, gulp.parallel(...jsBuildStrings)))
+  gulp.task(taskPrefix, gulp.series(subtasks))
+}

 // disc bundle analyzer tasks

-jsFiles.forEach((jsFile) => {
-  gulp.task(`disc:${jsFile}`,   discTask({ label: jsFile, filename: `${jsFile}.js` }))
+buildJsFiles.forEach((jsFile) => {
+  gulp.task(`disc:${jsFile}`, discTask({ label: jsFile, filename: `${jsFile}.js` }))
 })

-gulp.task('disc', gulp.parallel(jsFiles.map(jsFile => `disc:${jsFile}`)))
-
+gulp.task('disc', gulp.parallel(buildJsFiles.map(jsFile => `disc:${jsFile}`)))

 // clean dist

-
 gulp.task('clean', function clean() {
  return del(['./dist/*'])
 })
@ -293,40 +370,95 @@ gulp.task('zip:edge', zipTask('edge'))
 gulp.task('zip:opera', zipTask('opera'))
 gulp.task('zip', gulp.parallel('zip:chrome', 'zip:firefox', 'zip:edge', 'zip:opera'))

-// set env var for production
+// set env for production
 gulp.task('apply-prod-environment', function(done) {
-    process.env.NODE_ENV = 'production'
-    done()
+  process.env.NODE_ENV = 'production'
+  done()
 });

 // high level tasks

-gulp.task('dev', gulp.series('build:scss', 'dev:js', 'copy', gulp.parallel('watch:scss', 'copy:watch', 'dev:reload')))
+gulp.task('dev',
+  gulp.series(
+    'clean',
+    'dev:scss',
+    gulp.parallel(
+      'dev:extension:js',
+      'dev:mascara:js',
+      'dev:copy',
+      'dev:reload'
+    )
+  )
+)

-gulp.task('build', gulp.series('clean', 'build:scss', gulp.parallel('build:js', 'copy')))
-gulp.task('dist', gulp.series('apply-prod-environment', 'build', 'zip'))
+gulp.task('dev:extension',
+  gulp.series(
+    'clean',
+    'dev:scss',
+    gulp.parallel(
+      'dev:extension:js',
+      'dev:copy',
+      'dev:reload'
+    )
+  )
+)
+
+gulp.task('dev:mascara',
+  gulp.series(
+    'clean',
+    'dev:scss',
+    gulp.parallel(
+      'dev:mascara:js',
+      'dev:copy',
+      'dev:reload'
+    )
+  )
+)
+
+gulp.task('build',
+  gulp.series(
+    'clean',
+    'build:scss',
+    gulp.parallel(
+      'build:extension:js',
+      'build:mascara:js',
+      'copy'
+    )
+  )
+)
+
+gulp.task('build:extension',
+  gulp.series(
+    'clean',
+    'build:scss',
+    gulp.parallel(
+      'build:extension:js',
+      'copy'
+    )
+  )
+)
+
+gulp.task('build:mascara',
+  gulp.series(
+    'clean',
+    'build:scss',
+    gulp.parallel(
+      'build:mascara:js',
+      'copy'
+    )
+  )
+)
+
+gulp.task('dist',
+  gulp.series(
+    'apply-prod-environment',
+    'build',
+    'zip'
+  )
+)

 // task generators

-function copyTask(opts){
-  var source = opts.source
-  var destination = opts.destination
-  var destinations = opts.destinations || [ destination ]
-  var pattern = opts.pattern || '/**/*'
-
-  return performCopy
-
-  function performCopy(){
-    let stream = gulp.src(source + pattern, { base: source })
-    destinations.forEach(function(destination) {
-      stream = stream.pipe(gulp.dest(destination))
-    })
-    stream.pipe(gulpif(debug,livereload()))
-
-    return stream
-  }
-}
-
 function zipTask(target) {
  return () => {
    return gulp.src(`dist/${target}/**`)
@ -337,10 +469,10 @@ function zipTask(target) {

 function generateBundler(opts, performBundle) {
  const browserifyOpts = assign({}, watchify.args, {
-    entries: ['./app/scripts/'+opts.filename],
+    entries: [opts.filepath],
    plugin: 'browserify-derequire',
-    debug: true,
-    fullPaths: debug,
+    debug: opts.buildSourceMaps,
+    fullPaths: opts.buildWithFullPaths,
  })

  let bundler = browserify(browserifyOpts)
@ -348,13 +480,21 @@ function generateBundler(opts, performBundle) {
  if (opts.watch) {
    bundler = watchify(bundler)
    // on any file update, re-runs the bundler
-    bundler.on('update', performBundle)
+    bundler.on('update', async (ids) => {
+      const stream = performBundle()
+      await endOfStream(stream)
+      livereload.changed(`${ids}`)
+    })
  }

  return bundler
 }

 function discTask(opts) {
+  opts = Object.assign({
+    buildWithFullPaths: true,
+  }, opts)
+
  const bundler = generateBundler(opts, performBundle)
  // output build logs to terminal
  bundler.on('log', gutil.log)
@ -363,9 +503,9 @@ function discTask(opts) {

  function performBundle(){
    // start "disc" build
-    let discDir = path.join(__dirname, 'disc')
+    const discDir = path.join(__dirname, 'disc')
    mkdirp.sync(discDir)
-    let discPath = path.join(discDir, `${opts.label}.html`)
+    const discPath = path.join(discDir, `${opts.label}.html`)

    return (
      bundler.bundle()
@ -384,43 +524,58 @@ function bundleTask(opts) {
  return performBundle

  function performBundle(){
-    return (
+    let buildStream = bundler.bundle()

-      bundler.bundle()
+    // handle errors
+    buildStream.on('error', (err) => {
+      beep()
+      if (opts.watch) {
+        console.warn(err.stack)
+      } else {
+        throw err
+      }
+    })

-      // handle errors
-      .on('error', (err) => {
-        beep()
-        if (opts.watch) {
-          console.warn(err.stack)
-        } else {
-          throw err
-        }
-      })
+    // process bundles
+    buildStream = buildStream
      // convert bundle stream to gulp vinyl stream
      .pipe(source(opts.filename))
      // inject variables into bundle
-      .pipe(replace('\'GULP_METAMASK_DEBUG\'', debug))
+      .pipe(replace('\'GULP_METAMASK_DEBUG\'', debugMode))
      // buffer file contents (?)
      .pipe(buffer())
-      // sourcemaps
-      // loads map from browserify file
-      .pipe(sourcemaps.init({ loadMaps: true }))
-      // Minification
-      .pipe(gulpif(opts.isBuild, uglify({
-        mangle: {  reserved: [ 'MetamaskInpageProvider' ] },
-      })))
-      // writes .map file
-      .pipe(sourcemaps.write(debug ? './' : '../../sourcemaps'))
-      // write completed bundles
-      .pipe(gulp.dest('./dist/firefox/scripts'))
-      .pipe(gulp.dest('./dist/chrome/scripts'))
-      .pipe(gulp.dest('./dist/edge/scripts'))
-      .pipe(gulp.dest('./dist/opera/scripts'))
-      // finally, trigger live reload
-      .pipe(gulpif(debug, livereload()))

-    )
+
+    // Initialize Source Maps
+    if (opts.buildSourceMaps) {
+      buildStream = buildStream
+        // loads map from browserify file
+        .pipe(sourcemaps.init({ loadMaps: true }))
+    }
+
+    // Minification
+    if (opts.minifyBuild) {
+      buildStream = buildStream
+        .pipe(uglify({
+          mangle: {
+            reserved: [ 'MetamaskInpageProvider' ]
+          },
+        }))
+    }
+
+    // Finalize Source Maps (writes .map file)
+    if (opts.buildSourceMaps) {
+      buildStream = buildStream
+        .pipe(sourcemaps.write(opts.sourceMapDir))
+    }
+
+    // write completed bundles
+    opts.destinations.forEach((dest) => {
+      buildStream = buildStream.pipe(gulp.dest(dest))
+    })
+
+    return buildStream
+
  }
 }

--- a/mascara/proxy/index.html
+++ b/mascara/proxy/index.html
@ -17,4 +17,4 @@
  Hello! I am the MetaMask iframe.
  <script src="./proxy.js"></script>
 </body>
-</html>
+</html>
--- a/mascara/server/index.js
+++ b/mascara/server/index.js
@ -1,7 +1,5 @@
 const path = require('path')
 const express = require('express')
-const createBundle = require('./util').createBundle
-const serveBundle = require('./util').serveBundle
 const compression = require('compression')

 module.exports = createMetamascaraServer
@ -9,27 +7,14 @@ module.exports = createMetamascaraServer

 function createMetamascaraServer () {

-  // start bundlers
-  const metamascaraBundle = createBundle(path.join(__dirname, '/../src/mascara.js'))
-  const proxyBundle = createBundle(path.join(__dirname, '/../src/proxy.js'))
-  const uiBundle = createBundle(path.join(__dirname, '/../src/ui.js'))
-  const backgroundBuild = createBundle(path.join(__dirname, '/../src/background.js'))
-
-  // serve bundles
+  // setup server
  const server = express()
  server.use(compression())

-  // ui window
-  serveBundle(server, '/ui.js', uiBundle)
+  // serve assets
  server.use(express.static(path.join(__dirname, '/../ui/'), { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') }))
-  server.use(express.static(path.join(__dirname, '/../../dist/chrome')))
-  // metamascara
-  serveBundle(server, '/metamascara.js', metamascaraBundle)
-  // proxy
-  serveBundle(server, '/proxy/proxy.js', proxyBundle)
-  server.use('/proxy/', express.static(path.join(__dirname, '/../proxy')))
-  // background
-  serveBundle(server, '/background.js', backgroundBuild)
+  server.use(express.static(path.join(__dirname, '/../../dist/mascara')))
+  server.use(express.static(path.join(__dirname, '/../proxy')))

  return server

--- a/mascara/src/background.js
+++ b/mascara/src/background.js
@ -30,15 +30,19 @@ global.addEventListener('activate', function (event) {

 log.debug('inside:open')

-
-// // state persistence
+// state persistence
 const dbController = new DbController({
  key: STORAGE_KEY,
 })
-loadStateFromPersistence()
-.then((initState) => setupController(initState))
-.then(() => log.debug('MetaMask initialization complete.'))
-.catch((err) => console.error('WHILE SETTING UP:', err))
+
+start().catch(log.error)
+
+async function start() {
+  log.debug('MetaMask initializing...')
+  const initState = await loadStateFromPersistence()
+  await setupController(initState)
+  log.debug('MetaMask initialization complete.')
+}

 //
 // State and Persistence
--- a/mascara/src/metamascara.js
+++ b/mascara/src/metamascara.js
--- a/mascara/src/proxy.js
+++ b/mascara/src/proxy.js
@ -1,13 +1,13 @@
 const createParentStream = require('iframe-stream').ParentStream
-const SWcontroller = require('client-sw-ready-event/lib/sw-client.js')
+const SwController = require('sw-controller')
 const SwStream = require('sw-stream/lib/sw-stream.js')

-const intervalDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
-const background = new SWcontroller({
-  fileName: '/background.js',
-  letBeIdle: false,
-  wakeUpInterval: 30000,
-  intervalDelay,
+const keepAliveDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
+const background = new SwController({
+  fileName: './scripts/background.js',
+  keepAlive: true,
+  keepAliveInterval: 30000,
+  keepAliveDelay,
 })

 const pageStream = createParentStream()
--- a/mascara/src/ui.js
+++ b/mascara/src/ui.js
@ -1,6 +1,6 @@
 const injectCss = require('inject-css')
-const SWcontroller = require('client-sw-ready-event/lib/sw-client.js')
-const SwStream = require('sw-stream/lib/sw-stream.js')
+const SwController = require('sw-controller')
+const SwStream = require('sw-stream')
 const MetaMaskUiCss = require('../../ui/css')
 const MetamascaraPlatform = require('../../app/scripts/platforms/window')
 const startPopup = require('../../app/scripts/popup-core')
@ -8,27 +8,44 @@ const startPopup = require('../../app/scripts/popup-core')
 // create platform global
 global.platform = new MetamascaraPlatform()

-
 var css = MetaMaskUiCss()
 injectCss(css)
 const container = document.getElementById('app-content')

-var name = 'popup'
+const name = 'popup'
 window.METAMASK_UI_TYPE = name
 window.METAMASK_PLATFORM_TYPE = 'mascara'

-const intervalDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
+const keepAliveDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000

-const background = new SWcontroller({
-  fileName: '/background.js',
-  letBeIdle: false,
-  intervalDelay,
-  wakeUpInterval: 20000,
+const swController = new SwController({
+  fileName: './background.js',
+  keepAlive: true,
+  keepAliveDelay,
+  keepAliveInterval: 20000,
 })
+
+swController.once('updatefound', windowReload)
+swController.once('ready', async () => {
+  try {
+    swController.removeListener('updatefound', windowReload)
+    console.log('swController ready')
+    await timeout(1000)
+    console.log('connecting to app')
+    await connectApp()
+    console.log('app connected')
+  } catch (err) {
+    console.error(err)
+  }
+})
+
+console.log('starting service worker')
+swController.startWorker()
+
 // Setup listener for when the service worker is read
-const connectApp = function (readSw) {
+function connectApp() {
  const connectionStream = SwStream({
-    serviceWorker: background.controller,
+    serviceWorker: swController.getWorker(),
    context: name,
  })
  return new Promise((resolve, reject) => {
@ -43,19 +60,6 @@ const connectApp = function (readSw) {
    })
  })
 }
-background.on('ready', async (sw) => {
-  try {
-    background.removeListener('updatefound', connectApp)
-    await timeout(1000)
-    await connectApp(sw)
-    console.log('hello from cb ready event!')
-  } catch (e) {
-    console.error(e)
-  }
-})
-background.on('updatefound', windowReload)
-
-background.startWorker()

 function windowReload () {
  if (window.METAMASK_SKIP_RELOAD) return
--- a/mascara/ui/index.html
+++ b/mascara/ui/index.html
@ -7,6 +7,6 @@
  </head>
  <body>
    <div id="app-content"></div>
-    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./scripts/ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
-</html>
+</html>
--- a/old-ui/app/app.js
+++ b/old-ui/app/app.js
@ -171,7 +171,7 @@ App.prototype.renderAppBar = function () {
          h('img', {
            height: 24,
            width: 24,
-            src: '/images/icon-128.png',
+            src: './images/icon-128.png',
          }),

          h(NetworkIndicator, {
--- a/old-ui/app/components/pending-tx.js
+++ b/old-ui/app/components/pending-tx.js
@ -62,8 +62,8 @@ PendingTx.prototype.render = function () {
  const gasBn = hexToBn(gas)
  // default to 8MM gas limit
  const gasLimit = new BN(parseInt(blockGasLimit) || '8000000')
-  const safeGasLimitBN = this.bnMultiplyByFraction(gasLimit, 19, 20)
-  const saferGasLimitBN = this.bnMultiplyByFraction(gasLimit, 18, 20)
+  const safeGasLimitBN = this.bnMultiplyByFraction(gasLimit, 99, 100)
+  const saferGasLimitBN = this.bnMultiplyByFraction(gasLimit, 98, 100)
  const safeGasLimit = safeGasLimitBN.toString(10)

  // Gas Price
@ -311,7 +311,7 @@ PendingTx.prototype.render = function () {
              style: {
                fontSize: '0.9em',
              },
-            }, 'Gas limit set dangerously high. Approving this transaction is likely to fail.')
+            }, 'Gas limit set dangerously high. Approving this transaction is liable to fail.')
          : null,
        ]),

--- a/package-lock.json
+++ b/package-lock.json
@ -3125,11 +3125,6 @@
      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
    },
-    "client-sw-ready-event": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/client-sw-ready-event/-/client-sw-ready-event-3.4.0.tgz",
-      "integrity": "sha1-/0hkYXaQVed0hXDxrvECuGdbZtA="
-    },
    "cliui": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@ -8192,6 +8187,11 @@
      "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
      "dev": true
    },
+    "get-own-enumerable-property-symbols": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-2.0.1.tgz",
+      "integrity": "sha512-TtY/sbOemiMKPRUDDanGCSgBYe7Mf0vbRsWnBZ+9yghpZ1MvcpSpuZFjHdEeY/LZjZy0vdLjS77L6HosisFiug=="
+    },
    "get-stdin": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-3.0.2.tgz",
@ -8628,6 +8628,52 @@
        }
      }
    },
+    "gulp-debug": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/gulp-debug/-/gulp-debug-3.2.0.tgz",
+      "integrity": "sha512-2LZzP+ydczqz1rhqq/NYxvVvYTmOa0IgBl2B1sQTdkQgku9ayOUM/KHuGPjF4QA5aO1VcG+Sskw7iCcRUqHKkA==",
+      "requires": {
+        "chalk": "2.3.2",
+        "fancy-log": "1.3.2",
+        "plur": "2.1.2",
+        "stringify-object": "3.2.2",
+        "through2": "2.0.3",
+        "tildify": "1.2.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "1.9.1"
+          }
+        },
+        "chalk": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
+          "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.3.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "supports-color": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
+          "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
    "gulp-eslint": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/gulp-eslint/-/gulp-eslint-4.0.0.tgz",
@ -9204,7 +9250,7 @@
      "dev": true,
      "requires": {
        "anymatch": "1.3.2",
-        "chokidar": "2.0.1",
+        "chokidar": "2.0.3",
        "glob-parent": "3.1.0",
        "gulp-util": "3.0.8",
        "object-assign": "4.1.1",
@ -9228,9 +9274,9 @@
          "dev": true
        },
        "braces": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.0.tgz",
-          "integrity": "sha512-P4O8UQRdGiMLWSizsApmXVQDBS6KCt7dSexgLKBmH5Hr1CZq7vsnscFh8oR1sP1ab1Zj0uCHCEzZeV6SfUf3rA==",
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.1.tgz",
+          "integrity": "sha512-SO5lYHA3vO6gz66erVvedSCkp7AKWdv6VcQ2N4ysXfPxdAlxAMMAdwegGGcv1Bqwm7naF1hNdk5d6AAIEHV2nQ==",
          "dev": true,
          "requires": {
            "arr-flatten": "1.1.0",
@ -9239,22 +9285,43 @@
            "extend-shallow": "2.0.1",
            "fill-range": "4.0.0",
            "isobject": "3.0.1",
+            "kind-of": "6.0.2",
            "repeat-element": "1.1.2",
            "snapdragon": "0.8.1",
            "snapdragon-node": "2.1.1",
            "split-string": "3.1.0",
-            "to-regex": "3.0.1"
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "dev": true,
+              "requires": {
+                "is-descriptor": "1.0.2"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
          }
        },
        "chokidar": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.1.tgz",
-          "integrity": "sha512-rv5iP8ENhpqvDWr677rAXcB+SMoPQ1urd4ch79+PhM4lQwbATdJUQK69t0lJIKNB+VXpqxt5V1gvqs59XEPKnw==",
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.3.tgz",
+          "integrity": "sha512-zW8iXYZtXMx4kux/nuZVXjkLP+CyIK5Al5FHnj1OgTKGZfp4Oy6/ymtMSKFv3GD8DviEmUPmJg9eFdJ/JzudMg==",
          "dev": true,
          "requires": {
            "anymatch": "2.0.0",
            "async-each": "1.0.1",
-            "braces": "2.3.0",
+            "braces": "2.3.1",
            "fsevents": "1.1.3",
            "glob-parent": "3.1.0",
            "inherits": "2.0.3",
@ -9263,7 +9330,7 @@
            "normalize-path": "2.1.1",
            "path-is-absolute": "1.0.1",
            "readdirp": "2.1.0",
-            "upath": "1.0.0"
+            "upath": "1.0.4"
          },
          "dependencies": {
            "anymatch": {
@ -9272,12 +9339,22 @@
              "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
              "dev": true,
              "requires": {
-                "micromatch": "3.1.5",
+                "micromatch": "3.1.10",
                "normalize-path": "2.1.1"
              }
            }
          }
        },
+        "define-property": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+          "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "1.0.2",
+            "isobject": "3.0.1"
+          }
+        },
        "expand-brackets": {
          "version": "2.1.4",
          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@ -9290,7 +9367,7 @@
            "posix-character-classes": "0.1.1",
            "regex-not": "1.0.0",
            "snapdragon": "0.8.1",
-            "to-regex": "3.0.1"
+            "to-regex": "3.0.2"
          },
          "dependencies": {
            "define-property": {
@ -9301,6 +9378,53 @@
              "requires": {
                "is-descriptor": "0.1.6"
              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            },
+            "is-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+              "dev": true,
+              "requires": {
+                "is-accessor-descriptor": "0.1.6",
+                "is-data-descriptor": "0.1.4",
+                "kind-of": "5.1.0"
+              }
+            },
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+              "dev": true
+            }
+          }
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "dev": true,
+          "requires": {
+            "assign-symbols": "1.0.0",
+            "is-extendable": "1.0.1"
+          },
+          "dependencies": {
+            "is-extendable": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+              "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+              "dev": true,
+              "requires": {
+                "is-plain-object": "2.0.4"
+              }
            }
          }
        },
@ -9317,7 +9441,27 @@
            "fragment-cache": "0.2.1",
            "regex-not": "1.0.0",
            "snapdragon": "0.8.1",
-            "to-regex": "3.0.1"
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "dev": true,
+              "requires": {
+                "is-descriptor": "1.0.2"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
          }
        },
        "fill-range": {
@ -9330,6 +9474,17 @@
            "is-number": "3.0.0",
            "repeat-string": "1.6.1",
            "to-regex-range": "2.1.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
          }
        },
        "glob-parent": {
@ -9393,25 +9548,6 @@
            }
          }
        },
-        "is-descriptor": {
-          "version": "0.1.6",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
-          "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "0.1.6",
-            "is-data-descriptor": "0.1.4",
-            "kind-of": "5.1.0"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-              "dev": true
-            }
-          }
-        },
        "is-extglob": {
          "version": "2.1.1",
          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@ -9460,24 +9596,48 @@
          "dev": true
        },
        "micromatch": {
-          "version": "3.1.5",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.5.tgz",
-          "integrity": "sha512-ykttrLPQrz1PUJcXjwsTUjGoPJ64StIGNE2lGVD1c9CuguJ+L7/navsE8IcDNndOoCMvYV0qc/exfVbMHkUhvA==",
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
          "dev": true,
          "requires": {
            "arr-diff": "4.0.0",
            "array-unique": "0.3.2",
-            "braces": "2.3.0",
-            "define-property": "1.0.0",
-            "extend-shallow": "2.0.1",
+            "braces": "2.3.1",
+            "define-property": "2.0.2",
+            "extend-shallow": "3.0.2",
            "extglob": "2.0.4",
            "fragment-cache": "0.2.1",
            "kind-of": "6.0.2",
-            "nanomatch": "1.2.7",
+            "nanomatch": "1.2.9",
            "object.pick": "1.3.0",
            "regex-not": "1.0.0",
            "snapdragon": "0.8.1",
-            "to-regex": "3.0.1"
+            "to-regex": "3.0.2"
+          }
+        },
+        "to-regex": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+          "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
+          "dev": true,
+          "requires": {
+            "define-property": "2.0.2",
+            "extend-shallow": "3.0.2",
+            "regex-not": "1.0.2",
+            "safe-regex": "1.1.0"
+          },
+          "dependencies": {
+            "regex-not": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+              "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+              "dev": true,
+              "requires": {
+                "extend-shallow": "3.0.2",
+                "safe-regex": "1.1.0"
+              }
+            }
          }
        }
      }
@ -10374,8 +10534,7 @@
    "irregular-plurals": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-1.4.0.tgz",
-      "integrity": "sha1-LKmwM2UREYVUEvFr5dd8YqRYp2Y=",
-      "dev": true
+      "integrity": "sha1-LKmwM2UREYVUEvFr5dd8YqRYp2Y="
    },
    "is-absolute": {
      "version": "1.0.0",
@ -10603,23 +10762,25 @@
      "integrity": "sha1-8mWrian0RQNO9q/xWo8AsA9VF5k=",
      "dev": true
    },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
+    },
    "is-odd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-odd/-/is-odd-1.0.0.tgz",
-      "integrity": "sha1-O4qTLrAos3dcObsJ6RdnrM22kIg=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-odd/-/is-odd-2.0.0.tgz",
+      "integrity": "sha512-OTiixgpZAT1M4NHgS5IguFp/Vz2VI3U7Goh4/HA1adtwyLtSBrxYlcSYkhpAE07s4fKEcjrFxyvtQBND4vFQyQ==",
      "dev": true,
      "requires": {
-        "is-number": "3.0.0"
+        "is-number": "4.0.0"
      },
      "dependencies": {
        "is-number": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
-          "requires": {
-            "kind-of": "3.2.2"
-          }
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
+          "dev": true
        }
      }
    },
@ -10695,8 +10856,7 @@
    "is-regexp": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
-      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
-      "dev": true
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk="
    },
    "is-relative": {
      "version": "1.0.0",
@ -13589,18 +13749,19 @@
      "integrity": "sha1-7XFfP+neArV6XmJS2QqWZ14fCFo="
    },
    "nanomatch": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.7.tgz",
-      "integrity": "sha512-/5ldsnyurvEw7wNpxLFgjVvBLMta43niEYOy0CJ4ntcYSbx6bugRUTQeFb4BR/WanEL1o3aQgHuVLHQaB6tOqg==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.9.tgz",
+      "integrity": "sha512-n8R9bS8yQ6eSXaV6jHUpKzD8gLsin02w1HSFiegwrs9E098Ylhw5jdyKPaYqvHknHaSCKTPp7C8dGCQ0q9koXA==",
      "dev": true,
      "requires": {
        "arr-diff": "4.0.0",
        "array-unique": "0.3.2",
-        "define-property": "1.0.0",
-        "extend-shallow": "2.0.1",
+        "define-property": "2.0.2",
+        "extend-shallow": "3.0.2",
        "fragment-cache": "0.2.1",
-        "is-odd": "1.0.0",
-        "kind-of": "5.1.0",
+        "is-odd": "2.0.0",
+        "is-windows": "1.0.2",
+        "kind-of": "6.0.2",
        "object.pick": "1.3.0",
        "regex-not": "1.0.0",
        "snapdragon": "0.8.1",
@ -13619,10 +13780,45 @@
          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
          "dev": true
        },
+        "define-property": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+          "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "1.0.2",
+            "isobject": "3.0.1"
+          }
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "dev": true,
+          "requires": {
+            "assign-symbols": "1.0.0",
+            "is-extendable": "1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "dev": true,
+          "requires": {
+            "is-plain-object": "2.0.4"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        },
        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
          "dev": true
        }
      }
@ -16675,7 +16871,6 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/plur/-/plur-2.1.2.tgz",
      "integrity": "sha1-dIJFLBoPUI4+NE6uwxLJHCncZVo=",
-      "dev": true,
      "requires": {
        "irregular-plurals": "1.4.0"
      }
@ -18334,6 +18529,15 @@
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
    },
+    "safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "dev": true,
+      "requires": {
+        "ret": "0.1.15"
+      }
+    },
    "samsam": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.3.0.tgz",
@ -19727,6 +19931,16 @@
        "safe-buffer": "5.1.1"
      }
    },
+    "stringify-object": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.2.2.tgz",
+      "integrity": "sha512-O696NF21oLiDy8PhpWu8AEqoZHw++QW6mUv0UvKZe8gWSdSvMXkiLufK7OmnP27Dro4GU5kb9U7JIO0mBuCRQg==",
+      "requires": {
+        "get-own-enumerable-property-symbols": "2.0.1",
+        "is-obj": "1.0.1",
+        "is-regexp": "1.0.0"
+      }
+    },
    "stringstream": {
      "version": "0.0.5",
      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@ -20333,6 +20547,27 @@
      "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
      "dev": true
    },
+    "sw-controller": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sw-controller/-/sw-controller-1.0.3.tgz",
+      "integrity": "sha512-q+rS4v7kj1MPDxFRyl8GAICw/BbQzewd5HhVDNIPLnyvKtcpxi26fVXReUeUMRl4CRL/fX56PvKKqxtKhAaMpg==",
+      "requires": {
+        "babel-preset-es2015": "6.24.1",
+        "babel-runtime": "6.26.0",
+        "babelify": "7.3.0"
+      },
+      "dependencies": {
+        "babelify": {
+          "version": "7.3.0",
+          "resolved": "https://registry.npmjs.org/babelify/-/babelify-7.3.0.tgz",
+          "integrity": "sha1-qlau3nBn/XvVSWZu4W3ChQh+iOU=",
+          "requires": {
+            "babel-core": "6.26.0",
+            "object-assign": "4.1.1"
+          }
+        }
+      }
+    },
    "sw-stream": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/sw-stream/-/sw-stream-2.0.2.tgz",
@ -20797,6 +21032,14 @@
      "dev": true,
      "optional": true
    },
+    "tildify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tildify/-/tildify-1.2.0.tgz",
+      "integrity": "sha1-3OwD9V3Km3qj5bBPIYF+tW5jWIo=",
+      "requires": {
+        "os-homedir": "1.0.2"
+      }
+    },
    "time-stamp": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
@ -21244,12 +21487,6 @@
      "integrity": "sha1-YaajIBBiKvoHljvzJSA88SI51gQ=",
      "dev": true
    },
-    "underscore.string": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
-      "integrity": "sha1-ccCL9rQosRM/N+ePo6Icgvcymw0=",
-      "dev": true
-    },
    "undertaker": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.2.0.tgz",
@ -21410,22 +21647,10 @@
      }
    },
    "upath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.0.0.tgz",
-      "integrity": "sha1-tHBrlGHKhHOt+JEz0jVonKF/NlY=",
-      "dev": true,
-      "requires": {
-        "lodash": "3.10.1",
-        "underscore.string": "2.3.3"
-      },
-      "dependencies": {
-        "lodash": {
-          "version": "3.10.1",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
-          "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
-          "dev": true
-        }
-      }
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.0.4.tgz",
+      "integrity": "sha512-d4SJySNBXDaQp+DPrziv3xGS6w3d2Xt69FijJr86zMPBy23JEloMCEOUBBzuN7xCtjLCnmB9tI/z7SBCahHBOw==",
+      "dev": true
    },
    "urix": {
      "version": "0.1.0",
@ -21713,9 +21938,9 @@
      },
      "dependencies": {
        "clone": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.3.tgz",
-          "integrity": "sha1-KY1+IjFmD0DAA8LtMUDezz9TCF8=",
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+          "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
          "dev": true
        },
        "clone-stats": {
@ -21742,7 +21967,7 @@
          "integrity": "sha1-XIgDbPVl5d8FVYv8kR+GVt8hiIQ=",
          "dev": true,
          "requires": {
-            "clone": "1.0.3",
+            "clone": "1.0.4",
            "clone-stats": "0.0.1",
            "replace-ext": "0.0.1"
          }
--- a/package.json
+++ b/package.json
@ -4,14 +4,9 @@
  "public": false,
  "private": true,
  "scripts": {
-    "start": "npm run dev",
-    "dev": "gulp dev --debug",
-    "ui": "npm run test:flat:build:states && beefy development/ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
-    "mock": "beefy development/mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
-    "watch": "mocha watch --recursive \"test/unit/**/*.js\"",
-    "mascara": "gulp build && cross-env METAMASK_DEBUG=true node ./mascara/example/server",
-    "dist": "npm run dist:clear && npm install && gulp dist",
-    "dist:clear": "rm -rf node_modules/eth-contract-metadata && rm -rf node_modules/eth-phishing-detect",
+    "start": "gulp dev:extension",
+    "mascara": "gulp dev:mascara & cross-env METAMASK_DEBUG=true node ./mascara/example/server",
+    "dist": "gulp dist",
    "test": "npm run test:unit && npm run test:integration && npm run lint",
    "test:unit": "cross-env METAMASK_ENV=test mocha --exit --require babel-core/register --require test/helper.js --recursive \"test/unit/**/*.js\"",
    "test:single": "cross-env METAMASK_ENV=test mocha --require test/helper.js",
@ -41,6 +36,9 @@
    "sentry:upload:maps": "sentry-cli releases --org 'metamask' --project 'metamask' files $RELEASE upload-sourcemaps ./dist/sourcemaps/ --url-prefix 'sourcemaps' --rewrite",
    "lint": "gulp lint",
    "lint:fix": "gulp lint:fix",
+    "ui": "npm run test:flat:build:states && beefy development/ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
+    "mock": "beefy development/mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
+    "watch": "mocha watch --recursive \"test/unit/**/*.js\"",
    "disc": "gulp disc --debug",
    "announce": "node development/announcer.js",
    "version:bump": "node development/run-version-bump.js",
@ -78,7 +76,6 @@
    "browserify-derequire": "^0.9.4",
    "browserify-unibabel": "^3.0.0",
    "classnames": "^2.2.5",
-    "client-sw-ready-event": "^3.3.0",
    "clone": "^2.1.1",
    "copy-to-clipboard": "^3.0.8",
    "debounce": "^1.0.0",
@ -118,6 +115,7 @@
    "fuse.js": "^3.2.0",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-autoprefixer": "^5.0.0",
+    "gulp-debug": "^3.2.0",
    "gulp-eslint": "^4.0.0",
    "gulp-sass": "^3.1.0",
    "hat": "0.0.3",
@ -182,7 +180,8 @@
    "semaphore": "^1.0.5",
    "semver": "^5.4.1",
    "shallow-copy": "0.0.1",
-    "sw-stream": "^2.0.0",
+    "sw-controller": "^1.0.3",
+    "sw-stream": "^2.0.2",
    "textarea-caret": "^3.0.1",
    "through2": "^2.0.3",
    "valid-url": "^1.0.9",
@ -260,8 +259,8 @@
    "react-addons-test-utils": "^15.5.1",
    "react-test-renderer": "^15.6.2",
    "react-testutils-additions": "^15.2.0",
-    "selenium-webdriver": "^3.5.0",
    "redux-test-utils": "^0.2.2",
+    "selenium-webdriver": "^3.5.0",
    "sinon": "^5.0.0",
    "stylelint-config-standard": "^18.2.0",
    "tape": "^4.5.1",
--- a/test/e2e/metamask.spec.js
+++ b/test/e2e/metamask.spec.js
@ -1,5 +1,8 @@
+const fs = require('fs')
+const mkdirp = require('mkdirp')
 const path = require('path')
 const assert = require('assert')
+const pify = require('pify')
 const webdriver = require('selenium-webdriver')
 const By = webdriver.By
 const { delay, buildWebDriver } = require('./func')
@ -14,12 +17,18 @@ describe('Metamask popup page', function () {
    const extPath = path.resolve('dist/chrome')
    driver = buildWebDriver(extPath)
    await driver.get('chrome://extensions-frame')
-    const elems = await driver.findElements(By.className('extension-list-item-wrapper'))
+    const elems = await driver.findElements(By.css('.extension-list-item-wrapper'))
    const extensionId = await elems[1].getAttribute('id')
    await driver.get(`chrome-extension://${extensionId}/popup.html`)
    await delay(500)
  })

+  afterEach(async function () {
+    if (this.currentTest.state === 'failed') {
+      await verboseReportOnFailure(this.currentTest)
+    }
+  })
+
  after(async function () {
    await driver.quit()
  })
@ -33,36 +42,31 @@ describe('Metamask popup page', function () {

    it('should match title', async () => {
      const title = await driver.getTitle()
-      assert.equal(title, 'MetaMask Plugin', 'title matches MetaMask Plugin')
+      assert.equal(title, 'MetaMask', 'title matches MetaMask')
    })

    it('should show privacy notice', async () => {
-      const privacy = await driver.findElement(By.className(
-        'terms-header'
-      )).getText()
+      const privacy = await driver.findElement(By.css('.terms-header')).getText()
      assert.equal(privacy, 'PRIVACY NOTICE', 'shows privacy notice')
-      driver.findElement(By.css(
-        'button'
-      )).click()
+      driver.findElement(By.css('button')).click()
+      await delay(300)
    })

    it('should show terms of use', async () => {
      await delay(300)
-      const terms = await driver.findElement(By.className(
-        'terms-header'
-      )).getText()
+      const terms = await driver.findElement(By.css('.terms-header')).getText()
      assert.equal(terms, 'TERMS OF USE', 'shows terms of use')
+      await delay(300)
    })

    it('should be unable to continue without scolling throught the terms of use', async () => {
-      const button = await driver.findElement(By.css(
-        'button'
-      )).isEnabled()
+      const button = await driver.findElement(By.css('button')).isEnabled()
      assert.equal(button, false, 'disabled continue button')
      const element = driver.findElement(By.linkText(
        'Attributions'
      ))
      await driver.executeScript('arguments[0].scrollIntoView(true)', element)
+      await delay(300)
    })

    it('should be able to continue when scrolled to the bottom of terms of use', async () => {
@ -71,10 +75,10 @@ describe('Metamask popup page', function () {
      await delay(500)
      assert.equal(buttonEnabled, true, 'enabled continue button')
      await button.click()
+      await delay(300)
    })

    it('should accept password with length of eight', async () => {
-      await delay(300)
      const passwordBox = await driver.findElement(By.id('password-box'))
      const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm'))
      const button = driver.findElement(By.css('button'))
@ -87,16 +91,16 @@ describe('Metamask popup page', function () {

    it('should show value was created and seed phrase', async () => {
      await delay(700)
-      this.seedPhase = await driver.findElement(By.className('twelve-word-phrase')).getText()
+      this.seedPhase = await driver.findElement(By.css('.twelve-word-phrase')).getText()
      const continueAfterSeedPhrase = await driver.findElement(By.css('button'))
      await continueAfterSeedPhrase.click()
+      await delay(300)
    })

    it('should show lock account', async () => {
-      await delay(300)
-      await driver.findElement(By.className('sandwich-expando')).click()
+      await driver.findElement(By.css('.sandwich-expando')).click()
      await delay(500)
-      await driver.findElement(By.xpath('//*[@id="app-content"]/div/div[3]/span/div/li[2]')).click()
+      await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)')).click()
    })

    it('should accept account password after lock', async () => {
@ -106,17 +110,30 @@ describe('Metamask popup page', function () {
      await delay(500)
    })

-    it('should show QR code', async () => {
+    it('should show QR code option', async () => {
      await delay(300)
-      await driver.findElement(By.className('fa-ellipsis-h')).click()
-      await driver.findElement(By.xpath('//*[@id="app-content"]/div/div[4]/div/div/div[1]/flex-column/div[1]/div/span/i/div/div/li[2]')).click()
+      await driver.findElement(By.css('.fa-ellipsis-h')).click()
+      await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(1) > flex-column > div.name-label > div > span > i > div > div > li:nth-child(3)')).click()
      await delay(300)
    })

    it('should show the account address', async () => {
-      this.accountAddress = await driver.findElement(By.className('ellip-address')).getText()
-      await driver.findElement(By.className('fa-arrow-left')).click()
+      this.accountAddress = await driver.findElement(By.css('.ellip-address')).getText()
+      await driver.findElement(By.css('.fa-arrow-left')).click()
      await delay(500)
    })
  })
+
+  async function verboseReportOnFailure(test) {
+    const artifactDir = `./test-artifacts/${test.title}`
+    const filepathBase = `${artifactDir}/test-failure`
+    await pify(mkdirp)(artifactDir)
+    // capture screenshot
+    const screenshot = await driver.takeScreenshot()
+    await pify(fs.writeFile)(`${filepathBase}-screenshot.png`, screenshot, { encoding: 'base64' })
+    // capture dom source
+    const htmlSource = await driver.getPageSource()
+    await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource)
+  }
+
 })
--- a/test/unit/nonce-tracker-test.js
+++ b/test/unit/nonce-tracker-test.js
@ -33,6 +33,42 @@ describe('Nonce Tracker', function () {
      })
    })

+    describe('sentry issue 476304902', function () {
+      beforeEach(function () {
+        const txGen = new MockTxGen()
+        pendingTxs = txGen.generate({ status: 'submitted' }, {
+          fromNonce: 3,
+          count: 29,
+        })
+        nonceTracker = generateNonceTrackerWith(pendingTxs, [], '0x3')
+      })
+
+      it('should return 9', async function () {
+        this.timeout(15000)
+        const nonceLock = await nonceTracker.getNonceLock('0x7d3517b0d011698406d6e0aed8453f0be2697926')
+        assert.equal(nonceLock.nextNonce, '32', `nonce should be 32 got ${nonceLock.nextNonce}`)
+        await nonceLock.releaseLock()
+      })
+    })
+
+    describe('issue 3670', function () {
+      beforeEach(function () {
+        const txGen = new MockTxGen()
+        pendingTxs = txGen.generate({ status: 'submitted' }, {
+          fromNonce: 6,
+          count: 3,
+        })
+        nonceTracker = generateNonceTrackerWith(pendingTxs, [], '0x6')
+      })
+
+      it('should return 9', async function () {
+        this.timeout(15000)
+        const nonceLock = await nonceTracker.getNonceLock('0x7d3517b0d011698406d6e0aed8453f0be2697926')
+        assert.equal(nonceLock.nextNonce, '9', `nonce should be 9 got ${nonceLock.nextNonce}`)
+        await nonceLock.releaseLock()
+      })
+    })
+
    describe('with no previous txs', function () {
      beforeEach(function () {
        nonceTracker = generateNonceTrackerWith([], [])
--- a/ui/app/accounts/new-account/index.js
+++ b/ui/app/accounts/new-account/index.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getCurrentViewContext } = require('../../selectors')
 const classnames = require('classnames')
@ -36,8 +37,13 @@ function AccountDetailsModal (props) {
  }
 }

+AccountDetailsModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)

+
 AccountDetailsModal.prototype.render = function () {
  const { displayedForm, displayForm } = this.props

@ -45,7 +51,7 @@ AccountDetailsModal.prototype.render = function () {

    h('div.new-account__header', [

-      h('div.new-account__title', this.props.t('newAccount')),
+      h('div.new-account__title', this.context.t('newAccount')),

      h('div.new-account__tabs', [

@ -55,7 +61,7 @@ AccountDetailsModal.prototype.render = function () {
            'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE',
          }),
          onClick: () => displayForm('CREATE'),
-        }, this.props.t('createDen')),
+        }, this.context.t('createDen')),

        h('div.new-account__tabs__tab', {
          className: classnames('new-account__tabs__tab', {
@ -63,7 +69,7 @@ AccountDetailsModal.prototype.render = function () {
            'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT',
          }),
          onClick: () => displayForm('IMPORT'),
-        }, this.props.t('import')),
+        }, this.context.t('import')),

      ]),

--- a/ui/app/app.js
+++ b/ui/app/app.js
@ -1,9 +1,10 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
-const connect = require('./metamask-connect')
+const connect = require('react-redux').connect
 const { Route, Switch, Redirect, withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const actions = require('./actions')
 const classnames = require('classnames')

@ -296,8 +297,8 @@ class App extends Component {

              // metamask name
              h('.flex-row', [
-                h('h1', this.props.t('appName')),
-                h('div.beta-label', this.props.t('beta')),
+                h('h1', this.context.t('appName')),
+                h('div.beta-label', this.context.t('beta')),
              ]),

            ]),
@ -322,7 +323,7 @@ class App extends Component {

              ]),

-              isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [
+              isUnlocked && h('div.account-menu__icon', { onClick: this.context.toggleAccountMenu }, [
                h(Identicon, {
                  address: this.props.selectedAddress,
                  diameter: 32,
@ -575,15 +576,15 @@ class App extends Component {
    let name

    if (providerName === 'mainnet') {
-      name = this.props.t('connectingToMainnet')
+      name = this.context.t('connectingToMainnet')
    } else if (providerName === 'ropsten') {
-      name = this.props.t('connectingToRopsten')
+      name = this.context.t('connectingToRopsten')
    } else if (providerName === 'kovan') {
-      name = this.props.t('connectingToRopsten')
+      name = this.context.t('connectingToRopsten')
    } else if (providerName === 'rinkeby') {
-      name = this.props.t('connectingToRinkeby')
+      name = this.context.t('connectingToRinkeby')
    } else {
-      name = this.props.t('connectingToUnknown')
+      name = this.context.t('connectingToUnknown')
    }

    return name
@ -596,15 +597,15 @@ class App extends Component {
    let name

    if (providerName === 'mainnet') {
-      name = this.props.t('mainnet')
+      name = this.context.t('mainnet')
    } else if (providerName === 'ropsten') {
-      name = this.props.t('ropsten')
+      name = this.context.t('ropsten')
    } else if (providerName === 'kovan') {
-      name = this.props.t('kovan')
+      name = this.context.t('kovan')
    } else if (providerName === 'rinkeby') {
-      name = this.props.t('rinkeby')
+      name = this.context.t('rinkeby')
    } else {
-      name = this.props.t('unknownNetwork')
+      name = this.context.t('unknownNetwork')
    }

    return name
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../actions')
 const genAccountLink = require('etherscan-link').createAccountLink
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const Dropdown = require('./dropdown').Dropdown
 const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('./identicon')
@ -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.allcaps', this.props.t('loose')) : null
+      return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
    } catch (e) { return }
  }

@ -129,7 +129,7 @@ class AccountDropdowns extends Component {
                diameter: 32,
              },
            ),
-            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.props.t('createAccount')),
+            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, this.context.t('createAccount')),
          ],
        ),
        h(
@ -154,7 +154,7 @@ class AccountDropdowns extends Component {
                fontSize: '24px',
                marginBottom: '5px',
              },
-            }, this.props.t('importAccount')),
+            }, this.context.t('importAccount')),
          ]
        ),
      ]
@ -192,7 +192,7 @@ class AccountDropdowns extends Component {
              global.platform.openWindow({ url })
            },
          },
-          this.props.t('etherscanView'),
+          this.context.t('etherscanView'),
        ),
        h(
          DropdownMenuItem,
@ -204,7 +204,7 @@ class AccountDropdowns extends Component {
              actions.showQrView(selected, identity ? identity.name : '')
            },
          },
-          this.props.t('showQRCode'),
+          this.context.t('showQRCode'),
        ),
        h(
          DropdownMenuItem,
@ -216,7 +216,7 @@ class AccountDropdowns extends Component {
              copyToClipboard(checkSumAddress)
            },
          },
-          this.props.t('copyAddress'),
+          this.context.t('copyAddress'),
        ),
        h(
          DropdownMenuItem,
@ -226,7 +226,7 @@ class AccountDropdowns extends Component {
              actions.requestAccountExport()
            },
          },
-          this.props.t('exportPrivateKey'),
+          this.context.t('exportPrivateKey'),
        ),
      ]
    )
@ -316,6 +316,10 @@ const mapDispatchToProps = (dispatch) => {
  }
 }

+AccountDropdowns.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = {
  AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns),
 }
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@ -1,14 +1,20 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const inherits = require('util').inherits
 const exportAsFile = require('../util').exportAsFile
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const ethUtil = require('ethereumjs-util')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+ExportAccountView.contextTypes = {
+  t: PropTypes.func,
+}

 module.exports = connect(mapStateToProps)(ExportAccountView)

+
 inherits(ExportAccountView, Component)
 function ExportAccountView () {
  Component.call(this)
@ -35,7 +41,7 @@ ExportAccountView.prototype.render = function () {
  if (notExporting) return h('div')

  if (exportRequested) {
-    const warning = this.props.t('exportPrivateKeyWarning')
+    const warning = this.context.t('exportPrivateKeyWarning')
    return (
      h('div', {
        style: {
@ -53,7 +59,7 @@ ExportAccountView.prototype.render = function () {
            h('p.error', warning),
            h('input#exportAccount.sizing-input', {
              type: 'password',
-              placeholder: this.props.t('confirmPassword').toLowerCase(),
+              placeholder: this.context.t('confirmPassword').toLowerCase(),
              onKeyPress: this.onExportKeyPress.bind(this),
              style: {
                position: 'relative',
@ -74,10 +80,10 @@ ExportAccountView.prototype.render = function () {
                style: {
                  marginRight: '10px',
                },
-              }, this.props.t('submit')),
+              }, this.context.t('submit')),
              h('button', {
                onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-              }, this.props.t('cancel')),
+              }, this.context.t('cancel')),
            ]),
          (this.props.warning) && (
          h('span.error', {
@ -98,7 +104,7 @@ ExportAccountView.prototype.render = function () {
        margin: '0 20px',
      },
    }, [
-      h('label', this.props.t('copyPrivateKey') + ':'),
+      h('label', this.context.t('copyPrivateKey') + ':'),
      h('p.error.cursor-pointer', {
        style: {
          textOverflow: 'ellipsis',
@ -112,13 +118,13 @@ ExportAccountView.prototype.render = function () {
      }, plainKey),
      h('button', {
        onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-      }, this.props.t('done')),
+      }, this.context.t('done')),
      h('button', {
        style: {
          marginLeft: '10px',
        },
        onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey),
-      }, this.props.t('saveAsFile')),
+      }, this.context.t('saveAsFile')),
    ])
  }
 }
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@ -1,8 +1,9 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const { compose } = require('recompose')
 const { withRouter } = require('react-router-dom')
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../../actions')
 const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
@ -21,6 +22,10 @@ module.exports = compose(
  connect(mapStateToProps, mapDispatchToProps)
 )(AccountMenu)

+AccountMenu.contextTypes = {
+  t: PropTypes.func,
+}
+
 inherits(AccountMenu, Component)
 function AccountMenu () { Component.call(this) }

@ -74,13 +79,13 @@ AccountMenu.prototype.render = function () {
    h(Item, {
      className: 'account-menu__header',
    }, [
-      this.props.t('myAccounts'),
+      this.context.t('myAccounts'),
      h('button.account-menu__logout-button', {
        onClick: () => {
          lockMetamask()
          history.push(DEFAULT_ROUTE)
        },
-      }, this.props.t('logout')),
+      }, this.context.t('logout')),
    ]),
    h(Divider),
    h('div.account-menu__accounts', this.renderAccounts()),
@ -91,7 +96,7 @@ AccountMenu.prototype.render = function () {
        history.push(NEW_ACCOUNT_ROUTE)
      },
      icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
-      text: this.props.t('createAccount'),
+      text: this.context.t('createAccount'),
    }),
    h(Item, {
      onClick: () => {
@ -99,7 +104,7 @@ AccountMenu.prototype.render = function () {
        history.push(IMPORT_ACCOUNT_ROUTE)
      },
      icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
-      text: this.props.t('importAccount'),
+      text: this.context.t('importAccount'),
    }),
    h(Divider),
    h(Item, {
@ -108,7 +113,7 @@ AccountMenu.prototype.render = function () {
        history.push(INFO_ROUTE)
      },
      icon: h('img', { src: 'images/mm-info-icon.svg' }),
-      text: this.props.t('infoHelp'),
+      text: this.context.t('infoHelp'),
    }),
    h(Item, {
      onClick: () => {
@ -116,7 +121,7 @@ AccountMenu.prototype.render = function () {
        history.push(SETTINGS_ROUTE)
      },
      icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
-      text: this.props.t('settings'),
+      text: this.context.t('settings'),
    }),
  ])
 }
@ -174,6 +179,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.allcaps', this.props.t('imported')) : null
+    return isLoose ? h('.keyring-label.allcaps', this.context.t('imported')) : null
  } catch (e) { return }
 }
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@ -1,5 +1,5 @@
 const Component = require('react').Component
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenBalance = require('./token-balance')
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@ -1,13 +1,19 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const extend = require('xtend')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+BnAsDecimalInput.contextTypes = {
+  t: PropTypes.func,
+}

 module.exports = connect()(BnAsDecimalInput)

+
 inherits(BnAsDecimalInput, Component)
 function BnAsDecimalInput () {
  this.state = { invalid: null }
@ -137,13 +143,13 @@ BnAsDecimalInput.prototype.constructWarning = function () {
  let message = name ? name + ' ' : ''

  if (min && max) {
-    message += this.props.t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`])
+    message += this.context.t('betweenMinAndMax', [`${newMin} ${suffix}`, `${newMax} ${suffix}`])
  } else if (min) {
-    message += this.props.t('greaterThanMin', [`${newMin} ${suffix}`])
+    message += this.context.t('greaterThanMin', [`${newMin} ${suffix}`])
  } else if (max) {
-    message += this.props.t('lessThanMax', [`${newMax} ${suffix}`])
+    message += this.context.t('lessThanMax', [`${newMax} ${suffix}`])
  } else {
-    message += this.props.t('invalidInput')
+    message += this.context.t('invalidInput')
  }

  return message
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
@ -10,8 +11,13 @@ const AccountPanel = require('./account-panel')
 const RadioList = require('./custom-radio-list')
 const networkNames = require('../../../app/scripts/config.js').networkNames

+BuyButtonSubview.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(BuyButtonSubview)

+
 function mapStateToProps (state) {
  return {
    identity: state.appState.identity,
@ -76,7 +82,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
            paddingTop: '4px',
            paddingBottom: '4px',
          },
-        }, this.props.t('depositEth')),
+        }, this.context.t('depositEth')),
      ]),

      // loading indication
@ -118,7 +124,7 @@ BuyButtonSubview.prototype.headerSubview = function () {
            paddingTop: '4px',
            paddingBottom: '4px',
          },
-        }, this.props.t('selectService')),
+        }, this.context.t('selectService')),
      ]),

    ])
@ -143,7 +149,7 @@ BuyButtonSubview.prototype.primarySubview = function () {
    case '4':
    case '42':
      const networkName = networkNames[network]
-      const label = `${networkName} ${this.props.t('testFaucet')}`
+      const label = `${networkName} ${this.context.t('testFaucet')}`
      return (
        h('div.flex-column', {
          style: {
@ -164,14 +170,14 @@ BuyButtonSubview.prototype.primarySubview = function () {
              style: {
                marginTop: '15px',
              },
-            }, this.props.t('borrowDharma'))
+            }, this.context.t('borrowDharma'))
          ) : null,
      ])
    )

    default:
      return (
-        h('h2.error', this.props.t('unknownNetworkId'))
+        h('h2.error', this.context.t('unknownNetworkId'))
      )

  }
@ -203,8 +209,8 @@ BuyButtonSubview.prototype.mainnetSubview = function () {
            'ShapeShift',
          ],
          subtext: {
-            'Coinbase': `${this.props.t('crypto')}/${this.props.t('fiat')} (${this.props.t('usaOnly')})`,
-            'ShapeShift': this.props.t('crypto'),
+            'Coinbase': `${this.context.t('crypto')}/${this.context.t('fiat')} (${this.context.t('usaOnly')})`,
+            'ShapeShift': this.context.t('crypto'),
          },
          onClick: this.radioHandler.bind(this),
        }),
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.js
@ -1,11 +1,17 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../actions')

+CoinbaseForm.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(CoinbaseForm)

+
 function mapStateToProps (state) {
  return {
    warning: state.appState.warning,
@ -37,11 +43,11 @@ CoinbaseForm.prototype.render = function () {
    }, [
      h('button.btn-green', {
        onClick: this.toCoinbase.bind(this),
-      }, this.props.t('continueToCoinbase')),
+      }, this.context.t('continueToCoinbase')),

      h('button.btn-red', {
        onClick: () => props.dispatch(actions.goHome()),
-      }, this.props.t('cancel')),
+      }, this.context.t('cancel')),
    ]),
  ])
 }
--- a/ui/app/components/copyButton.js
+++ b/ui/app/components/copyButton.js
@ -1,13 +1,19 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const copyToClipboard = require('copy-to-clipboard')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect

 const Tooltip = require('./tooltip')

+CopyButton.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect()(CopyButton)

+
 inherits(CopyButton, Component)
 function CopyButton () {
  Component.call(this)
@ -23,7 +29,7 @@ CopyButton.prototype.render = function () {
  const value = props.value
  const copied = state.copied

-  const message = copied ? this.props.t('copiedButton') : props.title || this.props.t('copyButton')
+  const message = copied ? this.context.t('copiedButton') : props.title || this.context.t('copyButton')

  return h('.copy-button', {
    style: {
--- a/ui/app/components/copyable.js
+++ b/ui/app/components/copyable.js
@ -1,13 +1,19 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits

 const Tooltip = require('./tooltip')
 const copyToClipboard = require('copy-to-clipboard')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+Copyable.contextTypes = {
+  t: PropTypes.func,
+}

 module.exports = connect()(Copyable)

+
 inherits(Copyable, Component)
 function Copyable () {
  Component.call(this)
@ -23,7 +29,7 @@ Copyable.prototype.render = function () {
  const { copied } = state

  return h(Tooltip, {
-    title: copied ? this.props.t('copiedExclamation') : this.props.t('copy'),
+    title: copied ? this.context.t('copiedExclamation') : this.context.t('copy'),
    position: 'bottom',
  }, h('span', {
    style: {
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const GasModalCard = require('./gas-modal-card')

@ -94,8 +95,13 @@ function CustomizeGasModal (props) {
  this.state = getOriginalState(props)
 }

+CustomizeGasModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)

+
 CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
  const {
    updateGasPrice,
@ -149,7 +155,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
  })

  if (!balanceIsSufficient) {
-    error = this.props.t('balanceIsInsufficientGas')
+    error = this.context.t('balanceIsInsufficientGas')
  }

  const gasLimitTooLow = gasLimit && conversionGreaterThan(
@ -165,7 +171,7 @@ CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
  )

  if (gasLimitTooLow) {
-    error = this.props.t('gasLimitTooLow')
+    error = this.context.t('gasLimitTooLow')
  }

  this.setState({ error })
@ -258,7 +264,7 @@ CustomizeGasModal.prototype.render = function () {
    }, [
      h('div.send-v2__customize-gas__header', {}, [

-        h('div.send-v2__customize-gas__title', this.props.t('customGas')),
+        h('div.send-v2__customize-gas__title', this.context.t('customGas')),

        h('div.send-v2__customize-gas__close', {
          onClick: hideModal,
@ -274,8 +280,8 @@ CustomizeGasModal.prototype.render = function () {
          // max: 1000,
          step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
          onChange: value => this.convertAndSetGasPrice(value),
-          title: this.props.t('gasPrice'),
-          copy: this.props.t('gasPriceCalculation'),
+          title: this.context.t('gasPrice'),
+          copy: this.context.t('gasPriceCalculation'),
        }),

        h(GasModalCard, {
@ -284,8 +290,8 @@ CustomizeGasModal.prototype.render = function () {
          // max: 100000,
          step: 1,
          onChange: value => this.convertAndSetGasLimit(value),
-          title: this.props.t('gasLimit'),
-          copy: this.props.t('gasLimitCalculation'),
+          title: this.context.t('gasLimit'),
+          copy: this.context.t('gasLimitCalculation'),
        }),

      ]),
@ -298,7 +304,7 @@ CustomizeGasModal.prototype.render = function () {

        h('div.send-v2__customize-gas__revert', {
          onClick: () => this.revert(),
-        }, [this.props.t('revert')]),
+        }, [this.context.t('revert')]),

        h('div.send-v2__customize-gas__buttons', [
          h('button.btn-secondary.send-v2__customize-gas__cancel', {
@ -306,12 +312,12 @@ CustomizeGasModal.prototype.render = function () {
            style: {
              marginRight: '10px',
            },
-          }, [this.props.t('cancel')]),
+          }, [this.context.t('cancel')]),

          h('button.btn-primary.send-v2__customize-gas__save', {
            onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
            className: error && 'btn-primary--disabled',
-          }, [this.props.t('save')]),
+          }, [this.context.t('save')]),
        ]),

      ]),
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../../../actions')
 const genAccountLink = require('../../../../lib/account-link.js')
-const connect = require('../../../metamask-connect')
+const connect = require('react-redux').connect
 const Dropdown = require('./dropdown').Dropdown
 const DropdownMenuItem = require('./dropdown').DropdownMenuItem
 const Identicon = require('../../identicon')
@ -130,7 +130,7 @@ class AccountDropdowns extends Component {
                  actions.showEditAccountModal(identity)
                },
              }, [
-                this.props.t('edit'),
+                this.context.t('edit'),
              ]),
            ]),

@ -144,7 +144,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.allcaps', this.props.t('loose')) : null
+      return isLoose ? h('.keyring-label.allcaps', this.context.t('loose')) : null
    } catch (e) { return }
  }

@ -202,7 +202,7 @@ class AccountDropdowns extends Component {
                fontSize: '16px',
                lineHeight: '23px',
              },
-            }, this.props.t('createAccount')),
+            }, this.context.t('createAccount')),
          ],
        ),
        h(
@ -236,7 +236,7 @@ class AccountDropdowns extends Component {
                fontSize: '16px',
                lineHeight: '23px',
              },
-            }, this.props.t('importAccount')),
+            }, this.context.t('importAccount')),
          ]
        ),
      ]
@ -287,7 +287,7 @@ class AccountDropdowns extends Component {
              menuItemStyles,
            ),
          },
-          this.props.t('accountDetails'),
+          this.context.t('accountDetails'),
        ),
        h(
          DropdownMenuItem,
@ -303,7 +303,7 @@ class AccountDropdowns extends Component {
              menuItemStyles,
            ),
          },
-          this.props.t('etherscanView'),
+          this.context.t('etherscanView'),
        ),
        h(
          DropdownMenuItem,
@ -319,7 +319,7 @@ class AccountDropdowns extends Component {
              menuItemStyles,
            ),
          },
-          this.props.t('copyAddress'),
+          this.context.t('copyAddress'),
        ),
        h(
          DropdownMenuItem,
@ -331,7 +331,7 @@ class AccountDropdowns extends Component {
              menuItemStyles,
            ),
          },
-          this.props.t('exportPrivateKey'),
+          this.context.t('exportPrivateKey'),
        ),
        h(
          DropdownMenuItem,
@ -346,7 +346,7 @@ class AccountDropdowns extends Component {
              menuItemStyles,
            ),
          },
-          this.props.t('addToken'),
+          this.context.t('addToken'),
        ),

      ]
@ -464,4 +464,9 @@ function mapStateToProps (state) {
  }
 }

+AccountDropdowns.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns)
+
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Dropdown = require('./components/dropdown').Dropdown
 const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
@ -54,8 +55,13 @@ function NetworkDropdown () {
  Component.call(this)
 }

+NetworkDropdown.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)

+
 // TODO: specify default props and proptypes
 NetworkDropdown.prototype.render = function () {
  const props = this.props
@ -94,13 +100,13 @@ NetworkDropdown.prototype.render = function () {
  }, [

    h('div.network-dropdown-header', {}, [
-      h('div.network-dropdown-title', {}, this.props.t('networks')),
+      h('div.network-dropdown-title', {}, this.context.t('networks')),

      h('div.network-dropdown-divider'),

      h('div.network-dropdown-content',
        {},
-        this.props.t('defaultNetwork')
+        this.context.t('defaultNetwork')
      ),
    ]),

@ -122,7 +128,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
          },
-        }, this.props.t('mainnet')),
+        }, this.context.t('mainnet')),
      ]
    ),

@ -144,7 +150,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
          },
-        }, this.props.t('ropsten')),
+        }, this.context.t('ropsten')),
      ]
    ),

@ -166,7 +172,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
          },
-        }, this.props.t('kovan')),
+        }, this.context.t('kovan')),
      ]
    ),

@ -188,7 +194,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
          },
-        }, this.props.t('rinkeby')),
+        }, this.context.t('rinkeby')),
      ]
    ),

@ -210,7 +216,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
          },
-        }, this.props.t('localhost')),
+        }, this.context.t('localhost')),
      ]
    ),

@ -234,7 +240,7 @@ NetworkDropdown.prototype.render = function () {
          style: {
            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
          },
-        }, this.props.t('customRPC')),
+        }, this.context.t('customRPC')),
      ]
    ),

@ -249,15 +255,15 @@ NetworkDropdown.prototype.getNetworkName = function () {
  let name

  if (providerName === 'mainnet') {
-    name = this.props.t('mainnet')
+    name = this.context.t('mainnet')
  } else if (providerName === 'ropsten') {
-    name = this.props.t('ropsten')
+    name = this.context.t('ropsten')
  } else if (providerName === 'kovan') {
-    name = this.props.t('kovan')
+    name = this.context.t('kovan')
  } else if (providerName === 'rinkeby') {
-    name = this.props.t('rinkeby')
+    name = this.context.t('rinkeby')
  } else {
-    name = this.props.t('unknownNetwork')
+    name = this.context.t('unknownNetwork')
  }

  return name
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@ -1,12 +1,18 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')


+TokenMenuDropdown.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)

+
 function mapDispatchToProps (dispatch) {
  return {
    showHideTokenConfirmationModal: (token) => {
@ -44,7 +50,7 @@ TokenMenuDropdown.prototype.render = function () {
            showHideTokenConfirmationModal(this.props.token)
            this.props.onClose()
          },
-        }, this.props.t('hideToken')),
+        }, this.context.t('hideToken')),

      ]),
    ]),
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@ -1,4 +1,5 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const extend = require('xtend')
@ -8,11 +9,16 @@ const ENS = require('ethjs-ens')
 const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const ToAutoComplete = require('./send/to-autocomplete')

+EnsInput.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect()(EnsInput)

+
 inherits(EnsInput, Component)
 function EnsInput () {
  Component.call(this)
@ -70,13 +76,13 @@ EnsInput.prototype.lookupEnsName = function (recipient) {
  log.info(`ENS attempting to resolve name: ${recipient}`)
  this.ens.lookup(recipient.trim())
  .then((address) => {
-    if (address === ZERO_ADDRESS) throw new Error(this.props.t('noAddressForName'))
+    if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName'))
    if (address !== ensResolution) {
      this.setState({
        loadingEns: false,
        ensResolution: address,
        nickname: recipient.trim(),
-        hoverText: address + '\n' + this.props.t('clickCopy'),
+        hoverText: address + '\n' + this.context.t('clickCopy'),
        ensFailure: false,
      })
    }
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@ -1,13 +1,19 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const extend = require('xtend')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+HexAsDecimalInput.contextTypes = {
+  t: PropTypes.func,
+}

 module.exports = connect()(HexAsDecimalInput)

+
 inherits(HexAsDecimalInput, Component)
 function HexAsDecimalInput () {
  this.state = { invalid: null }
@ -127,13 +133,13 @@ HexAsDecimalInput.prototype.constructWarning = function () {
  let message = name ? name + ' ' : ''

  if (min && max) {
-    message += this.props.t('betweenMinAndMax', [min, max])
+    message += this.context.t('betweenMinAndMax', [min, max])
  } else if (min) {
-    message += this.props.t('greaterThanMin', [min])
+    message += this.context.t('greaterThanMin', [min])
  } else if (max) {
-    message += this.props.t('lessThanMax', [max])
+    message += this.context.t('lessThanMax', [max])
  } else {
-    message += this.props.t('invalidInput')
+    message += this.context.t('invalidInput')
  }

  return message
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const isNode = require('detect-node')
 const findDOMNode = require('react-dom').findDOMNode
 const jazzicon = require('jazzicon')
@ -47,7 +47,7 @@ IdenticonComponent.prototype.render = function () {
    )
    : (
      h('img.balance-icon', {
-        src: '../images/eth_logo.svg',
+        src: './images/eth_logo.svg',
        style: {
          height: diameter,
          width: diameter,
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
@ -33,8 +34,13 @@ function AccountDetailsModal () {
  Component.call(this)
 }

+AccountDetailsModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)

+
 // Not yet pixel perfect todos:
  // fonts of qr-header

@ -64,12 +70,12 @@ AccountDetailsModal.prototype.render = function () {

      h('button.btn-primary.account-modal__button', {
        onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
-      }, this.props.t('etherscanView')),
+      }, this.context.t('etherscanView')),

      // Holding on redesign for Export Private Key functionality
      h('button.btn-primary.account-modal__button', {
        onClick: () => showExportPrivateKeyModal(),
-      }, this.props.t('exportPrivateKey')),
+      }, this.context.t('exportPrivateKey')),

  ])
 }
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedIdentity } = require('../../selectors')
 const Identicon = require('../identicon')
@ -25,8 +26,13 @@ function AccountModalContainer () {
  Component.call(this)
 }

+AccountModalContainer.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)

+
 AccountModalContainer.prototype.render = function () {
  const {
    selectedIdentity,
@ -59,7 +65,7 @@ AccountModalContainer.prototype.render = function () {

        h('i.fa.fa-angle-left.fa-lg'),

-        h('span.account-modal-back__text', ' ' + this.props.t('back')),
+        h('span.account-modal-back__text', ' ' + this.context.t('back')),

      ]),

--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames

@ -32,8 +33,13 @@ function BuyOptions () {
  Component.call(this)
 }

+BuyOptions.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)

+
 BuyOptions.prototype.renderModalContentOption = function (title, header, onClick) {
  return h('div.buy-modal-content-option', {
    onClick,
@ -56,15 +62,15 @@ BuyOptions.prototype.render = function () {
      }, [
        h('div.buy-modal-content-title', {
          style: {},
-        }, this.props.t('transfers')),
-        h('div', {}, this.props.t('howToDeposit')),
+        }, this.context.t('transfers')),
+        h('div', {}, this.context.t('howToDeposit')),
      ]),

      h('div.buy-modal-content-options.flex-column.flex-center', {}, [

        isTestNetwork
-          ? this.renderModalContentOption(networkName, this.props.t('testFaucet'), () => toFaucet(network))
-          : this.renderModalContentOption('Coinbase', this.props.t('depositFiat'), () => toCoinbase(address)),
+          ? this.renderModalContentOption(networkName, this.context.t('testFaucet'), () => toFaucet(network))
+          : this.renderModalContentOption('Coinbase', this.context.t('depositFiat'), () => toCoinbase(address)),

        // h('div.buy-modal-content-option', {}, [
        //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
@ -72,8 +78,8 @@ BuyOptions.prototype.render = function () {
        // ]),,

        this.renderModalContentOption(
-          this.props.t('directDeposit'),
-          this.props.t('depositFromAccount'),
+          this.context.t('directDeposit'),
+          this.context.t('depositFromAccount'),
          () => this.goToAccountDetailsModal()
        ),

@ -84,7 +90,7 @@ BuyOptions.prototype.render = function () {
          background: 'white',
        },
        onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, this.props.t('cancel'))),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, this.context.t('cancel'))),
    ]),
  ])
 }
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 const ShapeshiftForm = require('../shapeshift-form')
@ -40,27 +41,32 @@ function mapDispatchToProps (dispatch) {
 }

 inherits(DepositEtherModal, Component)
-function DepositEtherModal (props) {
+function DepositEtherModal (props, context) {
  Component.call(this)

  // need to set after i18n locale has loaded
-  DIRECT_DEPOSIT_ROW_TITLE = props.t('directDepositEther')
-  DIRECT_DEPOSIT_ROW_TEXT = props.t('directDepositEtherExplainer')
-  COINBASE_ROW_TITLE = props.t('buyCoinbase')
-  COINBASE_ROW_TEXT = props.t('buyCoinbaseExplainer')
-  SHAPESHIFT_ROW_TITLE = props.t('depositShapeShift')
-  SHAPESHIFT_ROW_TEXT = props.t('depositShapeShiftExplainer')
-  FAUCET_ROW_TITLE = props.t('testFaucet')
+  DIRECT_DEPOSIT_ROW_TITLE = context.t('directDepositEther')
+  DIRECT_DEPOSIT_ROW_TEXT = context.t('directDepositEtherExplainer')
+  COINBASE_ROW_TITLE = context.t('buyCoinbase')
+  COINBASE_ROW_TEXT = context.t('buyCoinbaseExplainer')
+  SHAPESHIFT_ROW_TITLE = context.t('depositShapeShift')
+  SHAPESHIFT_ROW_TEXT = context.t('depositShapeShiftExplainer')
+  FAUCET_ROW_TITLE = context.t('testFaucet')

  this.state = {
    buyingWithShapeshift: false,
  }
 }

+DepositEtherModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal)

+
 DepositEtherModal.prototype.facuetRowText = function (networkName) {
-  return this.props.t('getEtherFromFaucet', [networkName])
+  return this.context.t('getEtherFromFaucet', [networkName])
 }

 DepositEtherModal.prototype.renderRow = function ({
@ -122,10 +128,10 @@ DepositEtherModal.prototype.render = function () {

    h('div.page-container__header', [

-      h('div.page-container__title', [this.props.t('depositEther')]),
+      h('div.page-container__title', [this.context.t('depositEther')]),

      h('div.page-container__subtitle', [
-        this.props.t('needEtherInWallet'),
+        this.context.t('needEtherInWallet'),
      ]),

      h('div.page-container__header-close', {
@ -144,11 +150,11 @@ DepositEtherModal.prototype.render = function () {

        this.renderRow({
          logo: h('img.deposit-ether-modal__logo', {
-            src: '../../../images/deposit-eth.svg',
+            src: './images/deposit-eth.svg',
          }),
          title: DIRECT_DEPOSIT_ROW_TITLE,
          text: DIRECT_DEPOSIT_ROW_TEXT,
-          buttonLabel: this.props.t('viewAccount'),
+          buttonLabel: this.context.t('viewAccount'),
          onButtonClick: () => this.goToAccountDetailsModal(),
          hide: buyingWithShapeshift,
        }),
@ -157,7 +163,7 @@ DepositEtherModal.prototype.render = function () {
          logo: h('i.fa.fa-tint.fa-2x'),
          title: FAUCET_ROW_TITLE,
          text: this.facuetRowText(networkName),
-          buttonLabel: this.props.t('getEther'),
+          buttonLabel: this.context.t('getEther'),
          onButtonClick: () => toFaucet(network),
          hide: !isTestNetwork || buyingWithShapeshift,
        }),
@ -165,13 +171,13 @@ DepositEtherModal.prototype.render = function () {
        this.renderRow({
          logo: h('div.deposit-ether-modal__logo', {
            style: {
-              backgroundImage: 'url(\'../../../images/coinbase logo.png\')',
+              backgroundImage: 'url(\'./images/coinbase logo.png\')',
              height: '40px',
            },
          }),
          title: COINBASE_ROW_TITLE,
          text: COINBASE_ROW_TEXT,
-          buttonLabel: this.props.t('continueToCoinbase'),
+          buttonLabel: this.context.t('continueToCoinbase'),
          onButtonClick: () => toCoinbase(address),
          hide: isTestNetwork || buyingWithShapeshift,
        }),
@ -179,12 +185,12 @@ DepositEtherModal.prototype.render = function () {
        this.renderRow({
          logo: h('div.deposit-ether-modal__logo', {
            style: {
-              backgroundImage: 'url(\'../../../images/shapeshift logo.png\')',
+              backgroundImage: 'url(\'./images/shapeshift logo.png\')',
            },
          }),
          title: SHAPESHIFT_ROW_TITLE,
          text: SHAPESHIFT_ROW_TEXT,
-          buttonLabel: this.props.t('shapeshiftBuy'),
+          buttonLabel: this.context.t('shapeshiftBuy'),
          onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
          hide: isTestNetwork,
          hideButton: buyingWithShapeshift,
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedAccount } = require('../../selectors')

@ -32,8 +33,13 @@ function EditAccountNameModal (props) {
  }
 }

+EditAccountNameModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)

+
 EditAccountNameModal.prototype.render = function () {
  const { hideModal, saveAccountLabel, identity } = this.props

@ -50,7 +56,7 @@ EditAccountNameModal.prototype.render = function () {
      ]),

      h('div.edit-account-name-modal-title', {
-      }, [this.props.t('editAccountName')]),
+      }, [this.context.t('editAccountName')]),

      h('input.edit-account-name-modal-input', {
        placeholder: identity.name,
@ -69,7 +75,7 @@ EditAccountNameModal.prototype.render = function () {
        },
        disabled: this.state.inputText.length === 0,
      }, [
-        this.props.t('save'),
+        this.context.t('save'),
      ]),

    ]),
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const ethUtil = require('ethereumjs-util')
 const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
@ -37,8 +38,13 @@ function ExportPrivateKeyModal () {
  }
 }

+ExportPrivateKeyModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal)

+
 ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) {
  const { exportAccount } = this.props

@ -48,8 +54,8 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo

 ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
  return h('span.private-key-password-label', privateKey
-    ? this.props.t('copyPrivateKey')
-    : this.props.t('typePassword')
+    ? this.context.t('copyPrivateKey')
+    : this.context.t('typePassword')
  )
 }

@ -86,8 +92,8 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
    ),

    (privateKey
-      ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), this.props.t('done'))
-      : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.props.t('confirm'))
+      ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), this.context.t('done'))
+      : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm'))
    ),

  ])
@ -120,7 +126,7 @@ ExportPrivateKeyModal.prototype.render = function () {

      h('div.account-modal-divider'),

-      h('span.modal-body-title', this.props.t('showPrivateKeys')),
+      h('span.modal-body-title', this.context.t('showPrivateKeys')),

      h('div.private-key-password', {}, [
        this.renderPasswordLabel(privateKey),
@ -130,7 +136,7 @@ ExportPrivateKeyModal.prototype.render = function () {
        !warning ? null : h('span.private-key-password-error', warning),
      ]),

-      h('div.private-key-password-warning', this.props.t('privateKeyWarning')),
+      h('div.private-key-password-warning', this.context.t('privateKeyWarning')),

      this.renderButtons(privateKey, this.state.password, address, hideModal),

--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Identicon = require('../identicon')

@ -31,8 +32,13 @@ function HideTokenConfirmationModal () {
  this.state = {}
 }

+HideTokenConfirmationModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal)

+
 HideTokenConfirmationModal.prototype.render = function () {
  const { token, network, hideToken, hideModal } = this.props
  const { symbol, address } = token
@ -41,7 +47,7 @@ HideTokenConfirmationModal.prototype.render = function () {
    h('div.hide-token-confirmation__container', {
    }, [
      h('div.hide-token-confirmation__title', {}, [
-        this.props.t('hideTokenPrompt'),
+        this.context.t('hideTokenPrompt'),
      ]),

      h(Identicon, {
@ -54,19 +60,19 @@ HideTokenConfirmationModal.prototype.render = function () {
      h('div.hide-token-confirmation__symbol', {}, symbol),

      h('div.hide-token-confirmation__copy', {}, [
-        this.props.t('readdToken'),
+        this.context.t('readdToken'),
      ]),

      h('div.hide-token-confirmation__buttons', {}, [
        h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
          onClick: () => hideModal(),
        }, [
-          this.props.t('cancel'),
+          this.context.t('cancel'),
        ]),
        h('button.btn-clear.hide-token-confirmation__button.allcaps', {
          onClick: () => hideToken(address),
        }, [
-          this.props.t('hide'),
+          this.context.t('hide'),
        ]),
      ]),
    ]),
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@ -1,7 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')

 class NewAccountModal extends Component {
@ -11,7 +11,7 @@ class NewAccountModal extends Component {
    const newAccountNumber = numberOfExistingAccounts + 1

    this.state = {
-      newAccountName: `${props.t('account')} ${newAccountNumber}`,
+      newAccountName: `${this.context.t('account')} ${newAccountNumber}`,
    }
  }

@ -22,7 +22,7 @@ class NewAccountModal extends Component {
      h('div.new-account-modal-wrapper', {
      }, [
        h('div.new-account-modal-header', {}, [
-          this.props.t('newAccount'),
+          this.context.t('newAccount'),
        ]),

        h('div.modal-close-x', {
@ -30,19 +30,19 @@ class NewAccountModal extends Component {
        }),

        h('div.new-account-modal-content', {}, [
-          this.props.t('accountName'),
+          this.context.t('accountName'),
        ]),

        h('div.new-account-input-wrapper', {}, [
          h('input.new-account-input', {
            value: this.state.newAccountName,
-            placeholder: this.props.t('sampleAccountName'),
+            placeholder: this.context.t('sampleAccountName'),
            onChange: event => this.setState({ newAccountName: event.target.value }),
          }, []),
        ]),

        h('div.new-account-modal-content.after-input', {}, [
-          this.props.t('or'),
+          this.context.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()
          },
-        }, this.props.t('importAnAccount')),
+        }, this.context.t('importAnAccount')),

        h('div.new-account-modal-content.button.allcaps', {}, [
          h('button.btn-clear', {
            onClick: () => this.props.createAccount(newAccountName),
          }, [
-            this.props.t('save'),
+            this.context.t('save'),
          ]),
        ]),
      ]),
@ -104,4 +104,9 @@ const mapDispatchToProps = dispatch => {
  }
 }

+NewAccountModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
+
--- a/ui/app/components/modals/notification-modal.js
+++ b/ui/app/components/modals/notification-modal.js
@ -1,7 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')

 class NotificationModal extends Component {
@ -22,12 +22,12 @@ class NotificationModal extends Component {
      }, [

        h('div.notification-modal__header', {}, [
-          this.props.t(header),
+          this.context.t(header),
        ]),

        h('div.notification-modal__message-wrapper', {}, [
          h('div.notification-modal__message', {}, [
-            this.props.t(message),
+            this.context.t(message),
          ]),
        ]),

@ -73,4 +73,9 @@ const mapDispatchToProps = dispatch => {
  }
 }

+NotificationModal.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(null, mapDispatchToProps)(NotificationModal)
+
--- a/ui/app/components/modals/notification-modals/confirm-reset-account.js
+++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js
@ -1,7 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../../actions')
 const NotifcationModal = require('../notification-modal')

--- a/ui/app/components/modals/shapeshift-deposit-tx-modal.js
+++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const QrView = require('../qr-code')
 const AccountModalContainer = require('./account-modal-container')
--- a/ui/app/components/network-display.js
+++ b/ui/app/components/network-display.js
@ -1,7 +1,7 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')

 const networkToColorHash = {
@ -30,7 +30,7 @@ class NetworkDisplay extends Component {
    const { provider: { type } } = this.props
    return h('.network-display__container', [
      this.renderNetworkIcon(),
-      h('.network-name', this.props.t(type)),
+      h('.network-name', this.context.t(type)),
    ])
  }
 }
@ -48,4 +48,9 @@ const mapStateToProps = ({ metamask: { network, provider } }) => {
  }
 }

+NetworkDisplay.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(NetworkDisplay)
+
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@ -1,12 +1,18 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const classnames = require('classnames')
 const inherits = require('util').inherits
 const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')

+Network.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect()(Network)

+
 inherits(Network, Component)

 function Network () {
@ -15,6 +21,7 @@ function Network () {

 Network.prototype.render = function () {
  const props = this.props
+  const context = this.context
  const networkNumber = props.network
  let providerName
  try {
@ -34,7 +41,7 @@ Network.prototype.render = function () {
      onClick: (event) => this.props.onClick(event),
    }, [
      h('img', {
-        title: props.t('attemptingConnect'),
+        title: context.t('attemptingConnect'),
        style: {
          width: '27px',
        },
@ -42,22 +49,22 @@ Network.prototype.render = function () {
      }),
    ])
  } else if (providerName === 'mainnet') {
-    hoverText = props.t('mainnet')
+    hoverText = context.t('mainnet')
    iconName = 'ethereum-network'
  } else if (providerName === 'ropsten') {
-    hoverText = props.t('ropsten')
+    hoverText = context.t('ropsten')
    iconName = 'ropsten-test-network'
  } else if (parseInt(networkNumber) === 3) {
-    hoverText = props.t('ropsten')
+    hoverText = context.t('ropsten')
    iconName = 'ropsten-test-network'
  } else if (providerName === 'kovan') {
-    hoverText = props.t('kovan')
+    hoverText = context.t('kovan')
    iconName = 'kovan-test-network'
  } else if (providerName === 'rinkeby') {
-    hoverText = props.t('rinkeby')
+    hoverText = context.t('rinkeby')
    iconName = 'rinkeby-test-network'
  } else {
-    hoverText = props.t('unknownNetwork')
+    hoverText = context.t('unknownNetwork')
    iconName = 'unknown-private-network'
  }

@ -85,7 +92,7 @@ Network.prototype.render = function () {
                backgroundColor: '#038789', // $blue-lagoon
                nonSelectBackgroundColor: '#15afb2',
              }),
-              h('.network-name', props.t('mainnet')),
+              h('.network-name', context.t('mainnet')),
              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
            ])
          case 'ropsten-test-network':
@ -94,7 +101,7 @@ Network.prototype.render = function () {
                backgroundColor: '#e91550', // $crimson
                nonSelectBackgroundColor: '#ec2c50',
              }),
-              h('.network-name', props.t('ropsten')),
+              h('.network-name', context.t('ropsten')),
              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
            ])
          case 'kovan-test-network':
@ -103,7 +110,7 @@ Network.prototype.render = function () {
                backgroundColor: '#690496', // $purple
                nonSelectBackgroundColor: '#b039f3',
              }),
-              h('.network-name', props.t('kovan')),
+              h('.network-name', context.t('kovan')),
              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
            ])
          case 'rinkeby-test-network':
@ -112,7 +119,7 @@ Network.prototype.render = function () {
                backgroundColor: '#ebb33f', // $tulip-tree
                nonSelectBackgroundColor: '#ecb23e',
              }),
-              h('.network-name', props.t('rinkeby')),
+              h('.network-name', context.t('rinkeby')),
              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
            ])
          default:
@ -124,7 +131,7 @@ Network.prototype.render = function () {
                },
              }),

-              h('.network-name', props.t('privateNetwork')),
+              h('.network-name', context.t('privateNetwork')),
              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
            ])
        }
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@ -1,13 +1,19 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const ReactMarkdown = require('react-markdown')
 const linker = require('extension-link-enabler')
 const findDOMNode = require('react-dom').findDOMNode
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+Notice.contextTypes = {
+  t: PropTypes.func,
+}

 module.exports = connect()(Notice)

+
 inherits(Notice, Component)
 function Notice () {
  Component.call(this)
@ -111,7 +117,7 @@ Notice.prototype.render = function () {
        style: {
          marginTop: '18px',
        },
-      }, this.props.t('accept')),
+      }, this.context.t('accept')),
    ])
  )
 }
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@ -2,7 +2,8 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const classnames = require('classnames')
 const h = require('react-hyperscript')
-const connect = require('../../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const R = require('ramda')
 const Fuse = require('fuse.js')
 const contractMap = require('eth-contract-metadata')
@ -30,8 +31,13 @@ const { DEFAULT_ROUTE } = require('../../routes')

 const emptyAddr = '0x0000000000000000000000000000000000000000'

+AddTokenScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AddTokenScreen)

+
 function mapStateToProps (state) {
  const { identities, tokens } = state.metamask
  return {
@ -139,7 +145,7 @@ AddTokenScreen.prototype.validate = function () {
  if (customAddress) {
    const validAddress = ethUtil.isValidAddress(customAddress)
    if (!validAddress) {
-      errors.customAddress = this.props.t('invalidAddress')
+      errors.customAddress = this.context.t('invalidAddress')
    }

    const validDecimals = customDecimals !== null
@ -147,23 +153,23 @@ AddTokenScreen.prototype.validate = function () {
      && customDecimals >= 0
      && customDecimals < 36
    if (!validDecimals) {
-      errors.customDecimals = this.props.t('decimalsMustZerotoTen')
+      errors.customDecimals = this.context.t('decimalsMustZerotoTen')
    }

    const symbolLen = customSymbol.trim().length
    const validSymbol = symbolLen > 0 && symbolLen < 10
    if (!validSymbol) {
-      errors.customSymbol = this.props.t('symbolBetweenZeroTen')
+      errors.customSymbol = this.context.t('symbolBetweenZeroTen')
    }

    const ownAddress = identitiesList.includes(standardAddress)
    if (ownAddress) {
-      errors.customAddress = this.props.t('personalAddressDetected')
+      errors.customAddress = this.context.t('personalAddressDetected')
    }

    const tokenAlreadyAdded = this.checkExistingAddresses(customAddress)
    if (tokenAlreadyAdded) {
-      errors.customAddress = this.props.t('tokenAlreadyAdded')
+      errors.customAddress = this.context.t('tokenAlreadyAdded')
    }
  } else if (
    Object.entries(selectedTokens)
@ -171,7 +177,7 @@ AddTokenScreen.prototype.validate = function () {
        isEmpty && !isSelected
      ), true)
  ) {
-    errors.tokenSelector = this.props.t('mustSelectOne')
+    errors.tokenSelector = this.context.t('mustSelectOne')
  }

  return {
@ -201,7 +207,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
          'add-token__add-custom-field--error': errors.customAddress,
        }),
      }, [
-        h('div.add-token__add-custom-label', this.props.t('tokenAddress')),
+        h('div.add-token__add-custom-label', this.context.t('tokenAddress')),
        h('input.add-token__add-custom-input', {
          type: 'text',
          onChange: this.tokenAddressDidChange,
@ -214,7 +220,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
          'add-token__add-custom-field--error': errors.customSymbol,
        }),
      }, [
-        h('div.add-token__add-custom-label', this.props.t('tokenSymbol')),
+        h('div.add-token__add-custom-label', this.context.t('tokenSymbol')),
        h('input.add-token__add-custom-input', {
          type: 'text',
          onChange: this.tokenSymbolDidChange,
@ -228,7 +234,7 @@ AddTokenScreen.prototype.renderCustomForm = function () {
          'add-token__add-custom-field--error': errors.customDecimals,
        }),
      }, [
-        h('div.add-token__add-custom-label', this.props.t('decimal')),
+        h('div.add-token__add-custom-label', this.context.t('decimal')),
        h('input.add-token__add-custom-input', {
          type: 'number',
          onChange: this.tokenDecimalsDidChange,
@ -250,7 +256,7 @@ AddTokenScreen.prototype.renderTokenList = function () {
  const results = [...addressSearchResult, ...fuseSearchResult]

  return h('div', [
-      results.length > 0 && h('div.add-token__token-icons-title', this.props.t('popularTokens')),
+      results.length > 0 && h('div.add-token__token-icons-title', this.context.t('popularTokens')),
      h('div.add-token__token-icons-container', Array(6).fill(undefined)
        .map((_, i) => {
          const { logo, symbol, name, address } = results[i] || {}
@ -305,10 +311,10 @@ AddTokenScreen.prototype.renderConfirmation = function () {
    h('div.add-token', [
      h('div.add-token__wrapper', [
        h('div.add-token__title-container.add-token__confirmation-title', [
-          h('div.add-token__description', this.props.t('likeToAddTokens')),
+          h('div.add-token__description', this.context.t('likeToAddTokens')),
        ]),
        h('div.add-token__content-container.add-token__confirmation-content', [
-          h('div.add-token__description.add-token__confirmation-description', this.props.t('balances')),
+          h('div.add-token__description.add-token__confirmation-description', this.context.t('balances')),
          h('div.add-token__confirmation-token-list',
            Object.entries(tokens)
              .map(([ address, token ]) => (
@ -327,10 +333,10 @@ AddTokenScreen.prototype.renderConfirmation = function () {
      h('div.add-token__buttons', [
        h('button.btn-secondary--lg.add-token__cancel-button', {
          onClick: () => this.setState({ isShowingConfirmation: false }),
-        }, this.props.t('back')),
+        }, this.context.t('back')),
        h('button.btn-primary--lg', {
          onClick: () => addTokens(tokens).then(() => history.push(DEFAULT_ROUTE)),
-        }, this.props.t('addTokens')),
+        }, this.context.t('addTokens')),
      ]),
    ])
  )
@ -350,14 +356,14 @@ AddTokenScreen.prototype.renderTabs = function () {
      h('div.add-token__content-container', [
        h('div.add-token__info-box', [
          h('div.add-token__info-box__close'),
-          h('div.add-token__info-box__title', this.props.t('whatsThis')),
-          h('div.add-token__info-box__copy', this.props.t('keepTrackTokens')),
-          h('div.add-token__info-box__copy--blue', this.props.t('learnMore')),
+          h('div.add-token__info-box__title', this.context.t('whatsThis')),
+          h('div.add-token__info-box__copy', this.context.t('keepTrackTokens')),
+          h('div.add-token__info-box__copy--blue', this.context.t('learnMore')),
        ]),
        h('div.add-token__input-container', [
          h('input.add-token__input', {
            type: 'text',
-            placeholder: this.props.t('searchTokens'),
+            placeholder: this.context.t('searchTokens'),
            onChange: e => this.setState({ searchQuery: e.target.value }),
          }),
          h('div.add-token__search-input-error-message', errors.tokenSelector),
@ -381,9 +387,9 @@ AddTokenScreen.prototype.render = function () {
        onClick: () => history.goBack(),
      }, [
        h('i.fa.fa-angle-left.fa-lg'),
-        h('span', this.props.t('cancel')),
+        h('span', this.context.t('cancel')),
      ]),
-      h('div.add-token__header__title', this.props.t('addTokens')),
+      h('div.add-token__header__title', this.context.t('addTokens')),
      !isShowingConfirmation && h('div.add-token__header__tabs', [

        h('div.add-token__header__tabs__tab', {
@ -392,7 +398,7 @@ AddTokenScreen.prototype.render = function () {
            'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'SEARCH',
          }),
          onClick: () => this.displayTab('SEARCH'),
-        }, this.props.t('search')),
+        }, this.context.t('search')),

        h('div.add-token__header__tabs__tab', {
          className: classnames('add-token__header__tabs__tab', {
@ -400,7 +406,7 @@ AddTokenScreen.prototype.render = function () {
            'add-token__header__tabs__unselected cursor-pointer': displayedTab !== 'CUSTOM_TOKEN',
          }),
          onClick: () => this.displayTab('CUSTOM_TOKEN'),
-        }, this.props.t('customToken')),
+        }, this.context.t('customToken')),

      ]),
    ]),
@ -412,10 +418,10 @@ AddTokenScreen.prototype.render = function () {
    !isShowingConfirmation && h('div.add-token__buttons', [
      h('button.btn-secondary--lg.add-token__cancel-button', {
        onClick: () => history.goBack(),
-      }, this.props.t('cancel')),
+      }, this.context.t('cancel')),
      h('button.btn-primary--lg.add-token__confirm-button', {
        onClick: this.onNext,
-      }, this.props.t('next')),
+      }, this.context.t('next')),
    ]),
  ])
 }
--- a/ui/app/components/pages/create-account/import-account/index.js
+++ b/ui/app/components/pages/create-account/import-account/index.js
@ -1,7 +1,8 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('../../../../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 import Select from 'react-select'

 // Subviews
@ -9,8 +10,13 @@ const JsonImportView = require('./json.js')
 const PrivateKeyImportView = require('./private-key.js')


+AccountImportSubview.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect()(AccountImportSubview)

+
 inherits(AccountImportSubview, Component)
 function AccountImportSubview () {
  Component.call(this)
@ -18,8 +24,8 @@ function AccountImportSubview () {

 AccountImportSubview.prototype.getMenuItemTexts = function () {
  return [
-    this.props.t('privateKey'),
-    this.props.t('jsonFile'),
+    this.context.t('privateKey'),
+    this.context.t('jsonFile'),
  ]
 }

@ -32,7 +38,7 @@ AccountImportSubview.prototype.render = function () {
    h('div.new-account-import-form', [

      h('.new-account-import-disclaimer', [
-        h('span', this.props.t('importAccountMsg')),
+        h('span', this.context.t('importAccountMsg')),
        h('span', {
          style: {
            cursor: 'pointer',
@ -43,12 +49,12 @@ AccountImportSubview.prototype.render = function () {
              url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts',
            })
          },
-        }, this.props.t('here')),
+        }, this.context.t('here')),
      ]),

      h('div.new-account-import-form__select-section', [

-        h('div.new-account-import-form__select-label', this.props.t('selectType')),
+        h('div.new-account-import-form__select-label', this.context.t('selectType')),

        h(Select, {
          className: 'new-account-import-form__select',
@ -80,9 +86,9 @@ AccountImportSubview.prototype.renderImportView = function () {
  const current = type || menuItems[0]

  switch (current) {
-    case this.props.t('privateKey'):
+    case this.context.t('privateKey'):
      return h(PrivateKeyImportView)
-    case this.props.t('jsonFile'):
+    case this.context.t('jsonFile'):
      return h(JsonImportView)
    default:
      return h(JsonImportView)
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@ -3,7 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
-const connect = require('../../../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../../../actions')
 const FileInput = require('react-simple-file-input').default
 const { DEFAULT_ROUTE } = require('../../../../routes')
@ -25,11 +25,11 @@ class JsonImportSubview extends Component {
    return (
      h('div.new-account-import-form__json', [

-        h('p', this.props.t('usedByClients')),
+        h('p', this.context.t('usedByClients')),
        h('a.warning', {
          href: HELP_LINK,
          target: '_blank',
-        }, this.props.t('fileImportFail')),
+        }, this.context.t('fileImportFail')),

        h(FileInput, {
          readAs: 'text',
@ -44,7 +44,7 @@ class JsonImportSubview extends Component {

        h('input.new-account-import-form__input-password', {
          type: 'password',
-          placeholder: this.props.t('enterPassword'),
+          placeholder: this.context.t('enterPassword'),
          id: 'json-password-box',
          onKeyPress: this.createKeyringOnEnter.bind(this),
        }),
@ -54,13 +54,13 @@ class JsonImportSubview extends Component {
          h('button.btn-secondary.new-account-create-form__button', {
            onClick: () => this.props.history.push(DEFAULT_ROUTE),
          }, [
-            this.props.t('cancel'),
+            this.context.t('cancel'),
          ]),

          h('button.btn-primary.new-account-create-form__button', {
            onClick: () => this.createNewKeychain(),
          }, [
-            this.props.t('import'),
+            this.context.t('import'),
          ]),

        ]),
@ -85,14 +85,14 @@ class JsonImportSubview extends Component {
    const state = this.state

    if (!state) {
-      const message = this.props.t('validFileImport')
+      const message = this.context.t('validFileImport')
      return this.props.displayWarning(message)
    }

    const { fileContents } = state

    if (!fileContents) {
-      const message = this.props.t('needImportFile')
+      const message = this.context.t('needImportFile')
      return this.props.displayWarning(message)
    }

@ -100,7 +100,7 @@ class JsonImportSubview extends Component {
    const password = passwordInput.value

    if (!password) {
-      const message = this.props.t('needImportPassword')
+      const message = this.context.t('needImportPassword')
      return this.props.displayWarning(message)
    }

@ -131,6 +131,10 @@ const mapDispatchToProps = dispatch => {
  }
 }

+JsonImportSubview.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@ -3,15 +3,21 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
-const connect = require('../../../../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const actions = require('../../../../actions')
 const { DEFAULT_ROUTE } = require('../../../../routes')

+PrivateKeyImportView.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
 )(PrivateKeyImportView)

+
 function mapStateToProps (state) {
  return {
    error: state.appState.warning,
@ -38,7 +44,7 @@ PrivateKeyImportView.prototype.render = function () {
  return (
    h('div.new-account-import-form__private-key', [

-      h('span.new-account-create-form__instruction', this.props.t('pastePrivateKey')),
+      h('span.new-account-create-form__instruction', this.context.t('pastePrivateKey')),

      h('div.new-account-import-form__private-key-password-container', [

@ -55,13 +61,13 @@ PrivateKeyImportView.prototype.render = function () {
        h('button.btn-secondary--lg.new-account-create-form__button', {
          onClick: () => this.props.history.push(DEFAULT_ROUTE),
        }, [
-          this.props.t('cancel'),
+          this.context.t('cancel'),
        ]),

        h('button.btn-primary--lg.new-account-create-form__button', {
          onClick: () => this.createNewKeychain(),
        }, [
-          this.props.t('import'),
+          this.context.t('import'),
        ]),

      ]),
--- a/ui/app/components/pages/create-account/import-account/seed.js
+++ b/ui/app/components/pages/create-account/import-account/seed.js
@ -1,10 +1,16 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('../../../../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
+
+SeedImportSubview.contextTypes = {
+  t: PropTypes.func,
+}

 module.exports = connect(mapStateToProps)(SeedImportSubview)

+
 function mapStateToProps (state) {
  return {}
 }
@ -20,10 +26,10 @@ SeedImportSubview.prototype.render = function () {
      style: {
      },
    }, [
-      this.props.t('pasteSeed'),
+      this.context.t('pasteSeed'),
      h('textarea'),
      h('br'),
-      h('button', this.props.t('submit')),
+      h('button', this.context.t('submit')),
    ])
  )
 }
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@ -1,12 +1,12 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')

 class NewAccountCreateForm extends Component {
-  constructor (props) {
+  constructor (props, context) {
    super(props)

    const { numberOfExistingAccounts = 0 } = props
@ -14,7 +14,7 @@ class NewAccountCreateForm extends Component {

    this.state = {
      newAccountName: '',
-      defaultAccountName: this.props.t('newAccountNumberName', [newAccountNumber]),
+      defaultAccountName: context.t('newAccountNumberName', [newAccountNumber]),
    }
  }

@ -25,7 +25,7 @@ class NewAccountCreateForm extends Component {
    return h('div.new-account-create-form', [

      h('div.new-account-create-form__input-label', {}, [
-        this.props.t('accountName'),
+        this.context.t('accountName'),
      ]),

      h('div.new-account-create-form__input-wrapper', {}, [
@ -41,7 +41,7 @@ class NewAccountCreateForm extends Component {
        h('button.btn-secondary--lg.new-account-create-form__button', {
          onClick: () => history.push(DEFAULT_ROUTE),
        }, [
-          this.props.t('cancel'),
+          this.context.t('cancel'),
        ]),

        h('button.btn-primary--lg.new-account-create-form__button', {
@ -50,7 +50,7 @@ class NewAccountCreateForm extends Component {
              .then(() => history.push(DEFAULT_ROUTE))
          },
        }, [
-          this.props.t('create'),
+          this.context.t('create'),
        ]),

      ]),
@ -95,4 +95,9 @@ const mapDispatchToProps = dispatch => {
  }
 }

+NewAccountCreateForm.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm)
+
--- a/ui/app/components/pages/settings/info.js
+++ b/ui/app/components/pages/settings/info.js
@ -1,7 +1,6 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../../../metamask-connect')

 class Info extends Component {
  renderLogo () {
@ -15,13 +14,13 @@ class Info extends Component {
  renderInfoLinks () {
    return (
      h('div.settings__content-item.settings__content-item--without-height', [
-        h('div.settings__info-link-header', this.props.t('links')),
+        h('div.settings__info-link-header', this.context.t('links')),
        h('div.settings__info-link-item', [
          h('a', {
            href: 'https://metamask.io/privacy.html',
            target: '_blank',
          }, [
-            h('span.settings__info-link', this.props.t('privacyMsg')),
+            h('span.settings__info-link', this.context.t('privacyMsg')),
          ]),
        ]),
        h('div.settings__info-link-item', [
@ -29,7 +28,7 @@ class Info extends Component {
            href: 'https://metamask.io/terms.html',
            target: '_blank',
          }, [
-            h('span.settings__info-link', this.props.t('terms')),
+            h('span.settings__info-link', this.context.t('terms')),
          ]),
        ]),
        h('div.settings__info-link-item', [
@ -37,7 +36,7 @@ class Info extends Component {
            href: 'https://metamask.io/attributions.html',
            target: '_blank',
          }, [
-            h('span.settings__info-link', this.props.t('attributions')),
+            h('span.settings__info-link', this.context.t('attributions')),
          ]),
        ]),
        h('hr.settings__info-separator'),
@ -46,7 +45,7 @@ class Info extends Component {
            href: 'https://support.metamask.io',
            target: '_blank',
          }, [
-            h('span.settings__info-link', this.props.t('supportCenter')),
+            h('span.settings__info-link', this.context.t('supportCenter')),
          ]),
        ]),
        h('div.settings__info-link-item', [
@ -54,7 +53,7 @@ class Info extends Component {
            href: 'https://metamask.io/',
            target: '_blank',
          }, [
-            h('span.settings__info-link', this.props.t('visitWebSite')),
+            h('span.settings__info-link', this.context.t('visitWebSite')),
          ]),
        ]),
        h('div.settings__info-link-item', [
@ -62,7 +61,7 @@ class Info extends Component {
            target: '_blank',
            href: 'mailto:help@metamask.io?subject=Feedback',
          }, [
-            h('span.settings__info-link', this.props.t('emailUs')),
+            h('span.settings__info-link', this.context.t('emailUs')),
          ]),
        ]),
      ])
@ -82,7 +81,7 @@ class Info extends Component {
            h('div.settings__info-item', [
              h(
                'div.settings__info-about',
-                this.props.t('builtInCalifornia')
+                this.context.t('builtInCalifornia')
              ),
            ]),
          ]),
@ -106,4 +105,8 @@ Info.propTypes = {
  t: PropTypes.func,
 }

-module.exports = connect()(Info)
+Info.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = Info
--- a/ui/app/components/pages/settings/settings.js
+++ b/ui/app/components/pages/settings/settings.js
@ -3,7 +3,7 @@ const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../../actions')
 const infuraCurrencies = require('../../../infura-conversion.json')
 const validUrl = require('valid-url')
@ -52,7 +52,7 @@ class Settings extends Component {

    return h('div.settings__content-row', [
      h('div.settings__content-item', [
-        h('span', this.props.t('blockiesIdenticon')),
+        h('span', this.context.t('blockiesIdenticon')),
      ]),
      h('div.settings__content-item', [
        h('div.settings__content-item-col', [
@ -72,13 +72,13 @@ class Settings extends Component {

    return h('div.settings__content-row', [
      h('div.settings__content-item', [
-        h('span', this.props.t('currentConversion')),
+        h('span', this.context.t('currentConversion')),
        h('span.settings__content-description', `Updated ${Date(conversionDate)}`),
      ]),
      h('div.settings__content-item', [
        h('div.settings__content-item-col', [
          h(SimpleDropdown, {
-            placeholder: this.props.t('selectCurrency'),
+            placeholder: this.context.t('selectCurrency'),
            options: getInfuraCurrencyOptions(),
            selectedOption: currentCurrency,
            onSelect: newCurrency => setCurrentCurrency(newCurrency),
@ -91,11 +91,12 @@ class Settings extends Component {
  renderCurrentLocale () {
    const { updateCurrentLocale, currentLocale } = this.props
    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
+    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''

    return h('div.settings__content-row', [
      h('div.settings__content-item', [
        h('span', 'Current Language'),
-        h('span.settings__content-description', `${currentLocaleMeta.name}`),
+        h('span.settings__content-description', `${currentLocaleName}`),
      ]),
      h('div.settings__content-item', [
        h('div.settings__content-item-col', [
@ -119,31 +120,31 @@ class Settings extends Component {
    switch (provider.type) {

      case 'mainnet':
-        title = this.props.t('currentNetwork')
-        value = this.props.t('mainnet')
+        title = this.context.t('currentNetwork')
+        value = this.context.t('mainnet')
        color = '#038789'
        break

      case 'ropsten':
-        title = this.props.t('currentNetwork')
-        value = this.props.t('ropsten')
+        title = this.context.t('currentNetwork')
+        value = this.context.t('ropsten')
        color = '#e91550'
        break

      case 'kovan':
-        title = this.props.t('currentNetwork')
-        value = this.props.t('kovan')
+        title = this.context.t('currentNetwork')
+        value = this.context.t('kovan')
        color = '#690496'
        break

      case 'rinkeby':
-        title = this.props.t('currentNetwork')
-        value = this.props.t('rinkeby')
+        title = this.context.t('currentNetwork')
+        value = this.context.t('rinkeby')
        color = '#ebb33f'
        break

      default:
-        title = this.props.t('currentRpc')
+        title = this.context.t('currentRpc')
        value = provider.rpcTarget
    }

@ -164,12 +165,12 @@ class Settings extends Component {
    return (
      h('div.settings__content-row', [
        h('div.settings__content-item', [
-          h('span', this.props.t('newRPC')),
+          h('span', this.context.t('newRPC')),
        ]),
        h('div.settings__content-item', [
          h('div.settings__content-item-col', [
            h('input.settings__input', {
-              placeholder: this.props.t('newRPC'),
+              placeholder: this.context.t('newRPC'),
              onChange: event => this.setState({ newRpc: event.target.value }),
              onKeyPress: event => {
                if (event.key === 'Enter') {
@ -182,7 +183,7 @@ class Settings extends Component {
                event.preventDefault()
                this.validateRpc(this.state.newRpc)
              },
-            }, this.props.t('save')),
+            }, this.context.t('save')),
          ]),
        ]),
      ])
@ -198,9 +199,9 @@ class Settings extends Component {
      const appendedRpc = `http://${newRpc}`

      if (validUrl.isWebUri(appendedRpc)) {
-        displayWarning(this.props.t('uriErrorMsg'))
+        displayWarning(this.context.t('uriErrorMsg'))
      } else {
-        displayWarning(this.props.t('invalidRPC'))
+        displayWarning(this.context.t('invalidRPC'))
      }
    }
  }
@ -209,10 +210,10 @@ class Settings extends Component {
    return (
      h('div.settings__content-row', [
        h('div.settings__content-item', [
-          h('div', this.props.t('stateLogs')),
+          h('div', this.context.t('stateLogs')),
          h(
            'div.settings__content-description',
-            this.props.t('stateLogsDescription')
+            this.context.t('stateLogsDescription')
          ),
        ]),
        h('div.settings__content-item', [
@ -221,13 +222,13 @@ class Settings extends Component {
              onClick (event) {
                window.logStateString((err, result) => {
                  if (err) {
-                    this.state.dispatch(actions.displayWarning(this.props.t('stateLogError')))
+                    this.state.dispatch(actions.displayWarning(this.context.t('stateLogError')))
                  } else {
                    exportAsFile('MetaMask State Logs.json', result)
                  }
                })
              },
-            }, this.props.t('downloadStateLogs')),
+            }, this.context.t('downloadStateLogs')),
          ]),
        ]),
      ])
@ -239,7 +240,7 @@ class Settings extends Component {

    return (
      h('div.settings__content-row', [
-        h('div.settings__content-item', this.props.t('revealSeedWords')),
+        h('div.settings__content-item', this.context.t('revealSeedWords')),
        h('div.settings__content-item', [
          h('div.settings__content-item-col', [
            h('button.btn-primary--lg.settings__button--red', {
@ -247,7 +248,7 @@ class Settings extends Component {
                event.preventDefault()
                history.push(REVEAL_SEED_ROUTE)
              },
-            }, this.props.t('revealSeedWords')),
+            }, this.context.t('revealSeedWords')),
          ]),
        ]),
      ])
@ -259,7 +260,7 @@ class Settings extends Component {

    return (
      h('div.settings__content-row', [
-        h('div.settings__content-item', this.props.t('useOldUI')),
+        h('div.settings__content-item', this.context.t('useOldUI')),
        h('div.settings__content-item', [
          h('div.settings__content-item-col', [
            h('button.btn-primary--lg.settings__button--orange', {
@ -267,7 +268,7 @@ class Settings extends Component {
                event.preventDefault()
                setFeatureFlagToBeta()
              },
-            }, this.props.t('useOldUI')),
+            }, this.context.t('useOldUI')),
          ]),
        ]),
      ])
@ -278,7 +279,7 @@ class Settings extends Component {
    const { showResetAccountConfirmationModal } = this.props

    return h('div.settings__content-row', [
-      h('div.settings__content-item', this.props.t('resetAccount')),
+      h('div.settings__content-item', this.context.t('resetAccount')),
      h('div.settings__content-item', [
        h('div.settings__content-item-col', [
          h('button.btn-primary--lg.settings__button--orange', {
@ -286,7 +287,7 @@ class Settings extends Component {
              event.preventDefault()
              showResetAccountConfirmationModal()
            },
-          }, this.props.t('resetAccount')),
+          }, this.context.t('resetAccount')),
        ]),
      ]),
    ])
@ -356,6 +357,10 @@ const mapDispatchToProps = dispatch => {
  }
 }

+Settings.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.js
@ -1,12 +1,18 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect

 const AccountPanel = require('./account-panel')

+PendingMsgDetails.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect()(PendingMsgDetails)

+
 inherits(PendingMsgDetails, Component)
 function PendingMsgDetails () {
  Component.call(this)
@ -40,7 +46,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.allcaps', this.props.t('message')),
+          h('label.font-small.allcaps', this.context.t('message')),
          h('span.font-small', msgParams.data),
        ]),
      ]),
--- a/ui/app/components/pending-msg.js
+++ b/ui/app/components/pending-msg.js
@ -1,11 +1,17 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-msg-details')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
+
+PendingMsg.contextTypes = {
+  t: PropTypes.func,
+}

 module.exports = connect()(PendingMsg)

+
 inherits(PendingMsg, Component)
 function PendingMsg () {
  Component.call(this)
@ -30,14 +36,14 @@ PendingMsg.prototype.render = function () {
          fontWeight: 'bold',
          textAlign: 'center',
        },
-      }, this.props.t('signMessage')),
+      }, this.context.t('signMessage')),

      h('.error', {
        style: {
          margin: '10px',
        },
      }, [
-        this.props.t('signNotice'),
+        this.context.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)' },
@ -46,7 +52,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 })
          },
-        }, this.props.t('readMore')),
+        }, this.context.t('readMore')),
      ]),

      // message details
@ -56,10 +62,10 @@ PendingMsg.prototype.render = function () {
      h('.flex-row.flex-space-around', [
        h('button', {
          onClick: state.cancelMessage,
-        }, this.props.t('cancel')),
+        }, this.context.t('cancel')),
        h('button', {
          onClick: state.signMessage,
-        }, this.props.t('sign')),
+        }, this.context.t('sign')),
      ]),
    ])

--- a/ui/app/components/pending-tx/confirm-deploy-contract.js
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@ -1,5 +1,5 @@
 const { Component } = require('react')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
 const actions = require('../../actions')
@ -32,7 +32,7 @@ class ConfirmDeployContract extends Component {
    if (valid && this.verifyGasParams()) {
      this.props.sendTransaction(txMeta, event)
    } else {
-      this.props.displayWarning(this.props.t('invalidGasParams'))
+      this.props.displayWarning(this.context.t('invalidGasParams'))
      this.setState({ submitting: false })
    }
  }
@ -177,7 +177,7 @@ class ConfirmDeployContract extends Component {

    return (
      h('section.flex-row.flex-center.confirm-screen-row', [
-        h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('gasFee') ]),
+        h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]),
        h('div.confirm-screen-section-column', [
          h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),

@ -216,8 +216,8 @@ class ConfirmDeployContract extends Component {
    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', [ this.props.t('total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]),
+          h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]),
        ]),

        h('div.confirm-screen-section-column', [
@ -247,11 +247,11 @@ class ConfirmDeployContract extends Component {
          h('.page-container__header-row', [
            h('span.page-container__back-button', {
              onClick: () => backToAccountDetail(selectedAddress),
-            }, this.props.t('back')),
+            }, this.context.t('back')),
            window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
          ]),
-          h('.page-container__title', this.props.t('confirmContract')),
-          h('.page-container__subtitle', this.props.t('pleaseReviewTransaction')),
+          h('.page-container__title', this.context.t('confirmContract')),
+          h('.page-container__subtitle', this.context.t('pleaseReviewTransaction')),
        ]),
        // Main Send token Card
        h('.page-container__content', [
@ -274,7 +274,7 @@ class ConfirmDeployContract extends Component {

          h('div.confirm-screen-rows', [
            h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('from') ]),
+              h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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)}`),
@ -282,9 +282,9 @@ class ConfirmDeployContract extends Component {
            ]),

            h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('to') ]),
+              h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('to') ]),
              h('div.confirm-screen-section-column', [
-                h('div.confirm-screen-row-info', this.props.t('newContract')),
+                h('div.confirm-screen-row-info', this.context.t('newContract')),
              ]),
            ]),

@ -302,12 +302,12 @@ class ConfirmDeployContract extends Component {
            // Cancel Button
            h('button.btn-cancel.page-container__footer-button.allcaps', {
              onClick: event => this.cancel(event, txMeta),
-            }, this.props.t('cancel')),
+            }, this.context.t('cancel')),

            // Accept Button
            h('button.btn-confirm.page-container__footer-button.allcaps', {
              onClick: event => this.onSubmit(event),
-            }, this.props.t('confirm')),
+            }, this.context.t('confirm')),
          ]),
        ]),
      ])
@ -351,4 +351,8 @@ const mapDispatchToProps = dispatch => {
  }
 }

-module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
+ConfirmDeployContract.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
-const connect = require('../../metamask-connect')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const actions = require('../../actions')
@ -21,11 +22,16 @@ const NetworkDisplay = require('../network-display')
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes')

+ConfirmSendEther.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
 )(ConfirmSendEther)

+
 function mapStateToProps (state) {
  const {
    conversionRate,
@ -201,7 +207,7 @@ ConfirmSendEther.prototype.getData = function () {
    },
    to: {
      address: txParams.to,
-      name: identities[txParams.to] ? identities[txParams.to].name : this.props.t('newRecipient'),
+      name: identities[txParams.to] ? identities[txParams.to].name : this.context.t('newRecipient'),
    },
    memo: txParams.memo || '',
    gasFeeInFIAT,
@ -308,7 +314,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', [ this.props.t('from') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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)}`),
@ -316,7 +322,7 @@ ConfirmSendEther.prototype.render = function () {
          ]),

          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('to') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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)}`),
@ -324,7 +330,7 @@ ConfirmSendEther.prototype.render = function () {
          ]),

          h('section.flex-row.flex-center.confirm-screen-row', [
-            h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('gasFee') ]),
+            h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]),
            h('div.confirm-screen-section-column', [
              h(GasFeeDisplay, {
                gasTotal: gasTotal || gasFeeInHex,
@ -337,8 +343,8 @@ ConfirmSendEther.prototype.render = function () {

          h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
            h('div.confirm-screen-section-column', [
-              h('span.confirm-screen-label', [ this.props.t('total') + ' ' ]),
-              h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]),
+              h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]),
+              h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]),
            ]),

            h('div.confirm-screen-section-column', [
@ -439,10 +445,10 @@ ConfirmSendEther.prototype.render = function () {
              clearSend()
              this.cancel(event, txMeta)
            },
-          }, this.props.t('cancel')),
+          }, this.context.t('cancel')),

          // Accept Button
-          h('button.btn-confirm.page-container__footer-button.allcaps', [this.props.t('confirm')]),
+          h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
        ]),
      ]),
    ])
@ -458,7 +464,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) {
  if (valid && this.verifyGasParams()) {
    this.props.sendTransaction(txMeta, event)
  } else {
-    this.props.dispatch(actions.displayWarning(this.props.t('invalidGasParams')))
+    this.props.dispatch(actions.displayWarning(this.context.t('invalidGasParams')))
    this.setState({ submitting: false })
  }
 }
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@ -1,7 +1,8 @@
 const Component = require('react').Component
-const connect = require('../../metamask-connect')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const tokenAbi = require('human-standard-token-abi')
@ -31,11 +32,16 @@ const {
 } = require('../../selectors')
 const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes')

+ConfirmSendToken.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
 )(ConfirmSendToken)

+
 function mapStateToProps (state, ownProps) {
  const { token: { symbol }, txData } = ownProps
  const { txParams } = txData || {}
@ -180,7 +186,7 @@ ConfirmSendToken.prototype.getAmount = function () {
      ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2)
      : null,
    token: typeof value === 'undefined'
-      ? this.props.t('unknown')
+      ? this.context.t('unknown')
      : +sendTokenAmount.toFixed(decimals),
  }

@ -252,7 +258,7 @@ ConfirmSendToken.prototype.getData = function () {
    },
    to: {
      address: value,
-      name: identities[value] ? identities[value].name : this.props.t('newRecipient'),
+      name: identities[value] ? identities[value].name : this.context.t('newRecipient'),
    },
    memo: txParams.memo || '',
  }
@ -298,7 +304,7 @@ ConfirmSendToken.prototype.renderGasFee = function () {

  return (
    h('section.flex-row.flex-center.confirm-screen-row', [
-      h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('gasFee') ]),
+      h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.t('gasFee') ]),
      h('div.confirm-screen-section-column', [
        h(GasFeeDisplay, {
          gasTotal: gasTotal || gasFeeInHex,
@ -320,8 +326,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
    ? (
      h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
        h('div.confirm-screen-section-column', [
-          h('span.confirm-screen-label', [ this.props.t('total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]),
+          h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]),
        ]),

        h('div.confirm-screen-section-column', [
@ -333,13 +339,13 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
    : (
      h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
        h('div.confirm-screen-section-column', [
-          h('span.confirm-screen-label', [ this.props.t('total') + ' ' ]),
-          h('div.confirm-screen-total-box__subtitle', [ this.props.t('amountPlusGas') ]),
+          h('span.confirm-screen-label', [ this.context.t('total') + ' ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ this.context.t('amountPlusGas') ]),
        ]),

        h('div.confirm-screen-section-column', [
          h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`),
-          h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.props.t('gas')}`),
+          h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} ${this.context.t('gas')}`),
        ]),
      ])
    )
@ -362,10 +368,10 @@ ConfirmSendToken.prototype.render = function () {
  this.inputs = []

  const isTxReprice = Boolean(txMeta.lastGasPrice)
-  const title = isTxReprice ? this.props.t('reprice_title') : this.props.t('confirm')
+  const title = isTxReprice ? this.context.t('reprice_title') : this.context.t('confirm')
  const subtitle = isTxReprice
-    ? this.props.t('reprice_subtitle')
-    : this.props.t('pleaseReviewTransaction')
+    ? this.context.t('reprice_subtitle')
+    : this.context.t('pleaseReviewTransaction')

  return (
    h('div.confirm-screen-container.confirm-send-token', [
@ -374,7 +380,7 @@ ConfirmSendToken.prototype.render = function () {
        h('div.page-container__header', [
          !txMeta.lastGasPrice && h('button.confirm-screen-back-button', {
            onClick: () => editTransaction(txMeta),
-          }, this.props.t('edit')),
+          }, this.context.t('edit')),
          h('div.page-container__title', title),
          h('div.page-container__subtitle', subtitle),
        ]),
@ -418,7 +424,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', [ this.props.t('from') ]),
+              h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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)}`),
@ -426,7 +432,7 @@ ConfirmSendToken.prototype.render = function () {
            ]),

            toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
-              h('span.confirm-screen-label.confirm-screen-section-column', [ this.props.t('to') ]),
+              h('span.confirm-screen-label.confirm-screen-section-column', [ this.context.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)}`),
@ -448,10 +454,10 @@ ConfirmSendToken.prototype.render = function () {
            // Cancel Button
            h('button.btn-cancel.page-container__footer-button.allcaps', {
              onClick: (event) => this.cancel(event, txMeta),
-            }, this.props.t('cancel')),
+            }, this.context.t('cancel')),

            // Accept Button
-            h('button.btn-confirm.page-container__footer-button.allcaps', [this.props.t('confirm')]),
+            h('button.btn-confirm.page-container__footer-button.allcaps', [this.context.t('confirm')]),
          ]),
        ]),
      ]),
@ -468,7 +474,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) {
  if (valid && this.verifyGasParams()) {
    this.props.sendTransaction(txMeta, event)
  } else {
-    this.props.dispatch(actions.displayWarning(this.props.t('invalidGasParams')))
+    this.props.dispatch(actions.displayWarning(this.context.t('invalidGasParams')))
    this.setState({ submitting: false })
  }
 }
--- a/ui/app/components/pending-tx/index.js
+++ b/ui/app/components/pending-tx/index.js
@ -1,5 +1,5 @@
 const Component = require('react').Component
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const clone = require('clone')
 const abi = require('human-standard-token-abi')
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const qrCode = require('qrcode-npm').qrcode
 const inherits = require('util').inherits
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const isHexPrefixed = require('ethereumjs-util').isHexPrefixed
 const ReadOnlyInput = require('./readonly-input')

--- a/ui/app/components/send/account-list-item.js
+++ b/ui/app/components/send/account-list-item.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const Identicon = require('../identicon')
 const CurrencyDisplay = require('./currency-display')
 const { conversionRateSelector, getCurrentCurrency } = require('../../selectors')
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@ -1,11 +1,17 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const CurrencyDisplay = require('./currency-display')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
+
+GasFeeDisplay.contextTypes = {
+  t: PropTypes.func,
+}

 module.exports = connect()(GasFeeDisplay)

+
 inherits(GasFeeDisplay, Component)
 function GasFeeDisplay () {
  Component.call(this)
@ -33,8 +39,8 @@ GasFeeDisplay.prototype.render = function () {
        readOnly: true,
      })
      : gasLoadingError
-        ? h('div.currency-display.currency-display--message', this.props.t('setGasPrice'))
-        : h('div.currency-display', this.props.t('loading')),
+        ? h('div.currency-display.currency-display--message', this.context.t('setGasPrice'))
+        : h('div.currency-display', this.context.t('loading')),

    h('button.sliders-icon-container', {
      onClick,
--- a/ui/app/components/send/gas-tooltip.js
+++ b/ui/app/components/send/gas-tooltip.js
@ -1,11 +1,17 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const InputNumber = require('../input-number.js')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
+
+GasTooltip.contextTypes = {
+  t: PropTypes.func,
+}

 module.exports = connect()(GasTooltip)

+
 inherits(GasTooltip, Component)
 function GasTooltip () {
  Component.call(this)
@ -82,7 +88,7 @@ GasTooltip.prototype.render = function () {
            'marginTop': '81px',
          },
        }, [
-          h('span.gas-tooltip-label', {}, [this.props.t('gasLimit')]),
+          h('span.gas-tooltip-label', {}, [this.context.t('gasLimit')]),
          h('i.fa.fa-info-circle'),
        ]),
        h(InputNumber, {
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@ -1,4 +1,4 @@
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('../../actions')
 const abi = require('ethereumjs-abi')
 const SendEther = require('../../send-v2')
--- a/ui/app/components/send/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete.js
@ -1,11 +1,17 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const AccountListItem = require('./account-list-item')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
+
+ToAutoComplete.contextTypes = {
+  t: PropTypes.func,
+}

 module.exports = connect()(ToAutoComplete)

+
 inherits(ToAutoComplete, Component)
 function ToAutoComplete () {
  Component.call(this)
@ -93,7 +99,7 @@ ToAutoComplete.prototype.render = function () {
  return h('div.send-v2__to-autocomplete', {}, [

    h('input.send-v2__to-autocomplete__input', {
-      placeholder: this.props.t('recipientAddress'),
+      placeholder: this.context.t('recipientAddress'),
      className: inError ? `send-v2__error-border` : '',
      value: to,
      onChange: event => onChange(event.target.value),
--- a/ui/app/components/sender-to-recipient.js
+++ b/ui/app/components/sender-to-recipient.js
@ -1,6 +1,6 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const PropTypes = require('prop-types')
 const Identicon = require('./identicon')

@ -21,7 +21,7 @@ class SenderToRecipient extends Component {
        this.renderRecipientIcon(),
        h(
          '.sender-to-recipient__name.sender-to-recipient__recipient-name',
-          recipientName || this.props.t('newContract')
+          recipientName || this.context.t('newContract')
        ),
      ])
    )
@ -46,7 +46,7 @@ class SenderToRecipient extends Component {
            h('img', {
              height: 15,
              width: 15,
-              src: '/images/arrow-right.svg',
+              src: './images/arrow-right.svg',
            }),
          ]),
        ]),
@ -64,4 +64,9 @@ SenderToRecipient.propTypes = {
  t: PropTypes.func,
 }

+SenderToRecipient.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect()(SenderToRecipient)
+
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@ -1,7 +1,8 @@
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const PropTypes = require('prop-types')
 const Component = require('react').Component
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const classnames = require('classnames')
 const { qrcode } = require('qrcode-npm')
 const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions')
@ -32,8 +33,13 @@ function mapDispatchToProps (dispatch) {
  }
 }

+ShapeshiftForm.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm)

+
 inherits(ShapeshiftForm, Component)
 function ShapeshiftForm () {
  Component.call(this)
@ -93,7 +99,7 @@ ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
      }))
      .catch(() => this.setState({
        showQrCode: false,
-        errorMessage: this.props.t('invalidRequest'),
+        errorMessage: this.context.t('invalidRequest'),
        isLoading: false,
      }))
  }
@ -125,10 +131,10 @@ ShapeshiftForm.prototype.renderMarketInfo = function () {

  return h('div.shapeshift-form__metadata', {}, [

-    this.renderMetadata(this.props.t('status'), limit ? this.props.t('available') : this.props.t('unavailable')),
-    this.renderMetadata(this.props.t('limit'), limit),
-    this.renderMetadata(this.props.t('exchangeRate'), rate),
-    this.renderMetadata(this.props.t('min'), minimum),
+    this.renderMetadata(this.context.t('status'), limit ? this.context.t('available') : this.context.t('unavailable')),
+    this.renderMetadata(this.context.t('limit'), limit),
+    this.renderMetadata(this.context.t('exchangeRate'), rate),
+    this.renderMetadata(this.context.t('min'), minimum),

  ])
 }
@ -142,7 +148,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
  return h('div.shapeshift-form', {}, [

    h('div.shapeshift-form__deposit-instruction', [
-      this.props.t('depositCoin', [depositCoin.toUpperCase()]),
+      this.context.t('depositCoin', [depositCoin.toUpperCase()]),
    ]),

    h('div', depositAddress),
@ -179,7 +185,7 @@ ShapeshiftForm.prototype.render = function () {

            h('div.shapeshift-form__selector', [

-              h('div.shapeshift-form__selector-label', this.props.t('deposit')),
+              h('div.shapeshift-form__selector-label', this.context.t('deposit')),

              h(SimpleDropdown, {
                selectedOption: this.state.depositCoin,
@ -199,7 +205,7 @@ ShapeshiftForm.prototype.render = function () {
            h('div.shapeshift-form__selector', [

              h('div.shapeshift-form__selector-label', [
-                this.props.t('receive'),
+                this.context.t('receive'),
              ]),

              h('div.shapeshift-form__selector-input', ['ETH']),
@ -217,7 +223,7 @@ ShapeshiftForm.prototype.render = function () {
          }, [

            h('div.shapeshift-form__address-input-label', [
-              this.props.t('refundAddress'),
+              this.context.t('refundAddress'),
            ]),

            h('input.shapeshift-form__address-input', {
@ -239,7 +245,7 @@ ShapeshiftForm.prototype.render = function () {
        className: btnClass,
        disabled: !token,
        onClick: () => this.onBuyWithShapeShift(),
-      }, [this.props.t('buy')]),
+      }, [this.context.t('buy')]),

    ])
 }
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@ -1,7 +1,8 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const vreme = new (require('vreme'))()
 const explorerLink = require('etherscan-link').createExplorerLink
 const actions = require('../actions')
@ -12,8 +13,13 @@ const EthBalance = require('./eth-balance')
 const Tooltip = require('./tooltip')


+ShiftListItem.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(ShiftListItem)

+
 function mapStateToProps (state) {
  return {
    selectedAddress: state.metamask.selectedAddress,
@ -75,7 +81,7 @@ ShiftListItem.prototype.renderUtilComponents = function () {
          value: this.props.depositAddress,
        }),
        h(Tooltip, {
-          title: this.props.t('qrCode'),
+          title: this.context.t('qrCode'),
        }, [
          h('i.fa.fa-qrcode.pointer.pop-hover', {
            onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
@ -135,8 +141,8 @@ ShiftListItem.prototype.renderInfo = function () {
            color: '#ABA9AA',
            width: '100%',
          },
-        }, this.props.t('toETHviaShapeShift', [props.depositType])),
-        h('div', this.props.t('noDeposits')),
+        }, this.context.t('toETHviaShapeShift', [props.depositType])),
+        h('div', this.context.t('noDeposits')),
        h('div', {
          style: {
            fontSize: 'x-small',
@ -158,8 +164,8 @@ ShiftListItem.prototype.renderInfo = function () {
            color: '#ABA9AA',
            width: '100%',
          },
-        }, this.props.t('toETHviaShapeShift', [props.depositType])),
-        h('div', this.props.t('conversionProgress')),
+        }, this.context.t('toETHviaShapeShift', [props.depositType])),
+        h('div', this.context.t('conversionProgress')),
        h('div', {
          style: {
            fontSize: 'x-small',
@ -184,7 +190,7 @@ ShiftListItem.prototype.renderInfo = function () {
            color: '#ABA9AA',
            width: '100%',
          },
-        }, this.props.t('fromShapeShift')),
+        }, this.context.t('fromShapeShift')),
        h('div', formatDate(props.time)),
        h('div', {
          style: {
@ -196,7 +202,7 @@ ShiftListItem.prototype.renderInfo = function () {
      ])

    case 'failed':
-      return h('span.error', '(' + this.props.t('failed') + ')')
+      return h('span.error', '(' + this.context.t('failed') + ')')
    default:
      return ''
  }
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@ -1,8 +1,9 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Identicon = require('./identicon')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const ethUtil = require('ethereumjs-util')
 const classnames = require('classnames')
 const { compose } = require('recompose')
@ -41,11 +42,16 @@ function mapDispatchToProps (dispatch) {
  }
 }

+SignatureRequest.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
 )(SignatureRequest)

+
 inherits(SignatureRequest, Component)
 function SignatureRequest (props) {
  Component.call(this)
@ -61,7 +67,7 @@ SignatureRequest.prototype.renderHeader = function () {

    h('div.request-signature__header-background'),

-    h('div.request-signature__header__text', this.props.t('sigRequest')),
+    h('div.request-signature__header__text', this.context.t('sigRequest')),

    h('div.request-signature__header__tip-container', [
      h('div.request-signature__header__tip'),
@ -82,7 +88,7 @@ SignatureRequest.prototype.renderAccountDropdown = function () {

  return h('div.request-signature__account', [

-    h('div.request-signature__account-text', [this.props.t('account') + ':']),
+    h('div.request-signature__account-text', [this.context.t('account') + ':']),

    h(AccountDropdownMini, {
      selectedAccount,
@ -109,7 +115,7 @@ SignatureRequest.prototype.renderBalance = function () {

  return h('div.request-signature__balance', [

-    h('div.request-signature__balance-text', [this.props.t('balance')]),
+    h('div.request-signature__balance-text', [this.context.t('balance')]),

    h('div.request-signature__balance-value', `${balanceInEther} ETH`),

@ -143,7 +149,7 @@ SignatureRequest.prototype.renderRequestInfo = function () {
  return h('div.request-signature__request-info', [

    h('div.request-signature__headline', [
-      this.props.t('yourSigRequested'),
+      this.context.t('yourSigRequested'),
    ]),

  ])
@ -161,18 +167,18 @@ SignatureRequest.prototype.msgHexToText = function (hex) {

 SignatureRequest.prototype.renderBody = function () {
  let rows
-  let notice = this.props.t('youSign') + ':'
+  let notice = this.context.t('youSign') + ':'

  const { txData } = this.props
  const { type, msgParams: { data } } = txData

  if (type === 'personal_sign') {
-    rows = [{ name: this.props.t('message'), value: this.msgHexToText(data) }]
+    rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }]
  } else if (type === 'eth_signTypedData') {
    rows = data
  } else if (type === 'eth_sign') {
-    rows = [{ name: this.props.t('message'), value: data }]
-    notice = this.props.t('signNotice')
+    rows = [{ name: this.context.t('message'), value: data }]
+    notice = this.context.t('signNotice')
  }

  return h('div.request-signature__body', {}, [
@ -233,12 +239,12 @@ SignatureRequest.prototype.renderFooter = function () {
      onClick: event => {
        cancel(event).then(() => this.props.history.push(DEFAULT_ROUTE))
      },
-    }, this.props.t('cancel')),
+    }, this.context.t('cancel')),
    h('button.btn-primary--lg', {
      onClick: event => {
        sign(event).then(() => this.props.history.push(DEFAULT_ROUTE))
      },
-    }, this.props.t('sign')),
+    }, this.context.t('sign')),
  ])
 }

--- a/ui/app/components/token-balance.js
+++ b/ui/app/components/token-balance.js
@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenTracker = require('eth-token-tracker')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const selectors = require('../selectors')

 function mapStateToProps (state) {
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const Identicon = require('./identicon')
 const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
 const selectors = require('../selectors')
--- a/ui/app/components/token-list.js
+++ b/ui/app/components/token-list.js
@ -1,9 +1,10 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenTracker = require('eth-token-tracker')
 const TokenCell = require('./token-cell.js')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const selectors = require('../selectors')

 function mapStateToProps (state) {
@ -24,8 +25,13 @@ for (const address in contracts) {
  }
 }

+TokenList.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(TokenList)

+
 inherits(TokenList, Component)
 function TokenList () {
  this.state = {
@ -42,7 +48,7 @@ TokenList.prototype.render = function () {
  const { tokens, isLoading, error } = state

  if (isLoading) {
-    return this.message(this.props.t('loadingTokens'))
+    return this.message(this.context.t('loadingTokens'))
  }

  if (error) {
@ -52,7 +58,7 @@ TokenList.prototype.render = function () {
        padding: '80px',
      },
    }, [
-      this.props.t('troubleTokenBalances'),
+      this.context.t('troubleTokenBalances'),
      h('span.hotFix', {
        style: {
          color: 'rgba(247, 134, 28, 1)',
@ -63,7 +69,7 @@ TokenList.prototype.render = function () {
          url: `https://ethplorer.io/address/${userAddress}`,
        })
        },
-      }, this.props.t('here')),
+      }, this.context.t('here')),
    ])
  }

--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@ -1,6 +1,7 @@
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('../metamask-connect')
+const connect = require('react-redux').connect
 const inherits = require('util').inherits
 const classnames = require('classnames')
 const abi = require('human-standard-token-abi')
@ -15,8 +16,13 @@ const { calcTokenAmount } = require('../token-util')

 const { getCurrentCurrency } = require('../selectors')

+TxListItem.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps, mapDispatchToProps)(TxListItem)

+
 function mapStateToProps (state) {
  return {
    tokens: state.metamask.tokens,
@ -74,7 +80,7 @@ TxListItem.prototype.getAddressText = function () {
    default:
      return address
        ? `${address.slice(0, 10)}...${address.slice(-4)}`
-        : this.props.t('contractDeployment')
+        : this.context.t('contractDeployment')
  }
 }

@ -306,21 +312,21 @@ TxListItem.prototype.txStatusIndicator = function () {
  let name

  if (transactionStatus === 'unapproved') {
-    name = this.props.t('unapproved')
+    name = this.context.t('unapproved')
  } else if (transactionStatus === 'rejected') {
-    name = this.props.t('rejected')
+    name = this.context.t('rejected')
  } else if (transactionStatus === 'approved') {
-    name = this.props.t('approved')
+    name = this.context.t('approved')
  } else if (transactionStatus === 'signed') {
-    name = this.props.t('signed')
+    name = this.context.t('signed')
  } else if (transactionStatus === 'submitted') {
-    name = this.props.t('submitted')
+    name = this.context.t('submitted')
  } else if (transactionStatus === 'confirmed') {
-    name = this.props.t('confirmed')
+    name = this.context.t('confirmed')
  } else if (transactionStatus === 'failed') {
-    name = this.props.t('failed')
+    name = this.context.t('failed')
  } else if (transactionStatus === 'dropped') {
-    name = this.props.t('dropped')
+    name = this.context.t('dropped')
  }
  return name
 }
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@ -1,5 +1,6 @@
 const Component = require('react').Component
-const connect = require('../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
@ -19,6 +20,10 @@ module.exports = compose(
  connect(mapStateToProps, mapDispatchToProps)
 )(TxList)

+TxList.contextTypes = {
+  t: PropTypes.func,
+}
+
 function mapStateToProps (state) {
  return {
    txsToRender: selectors.transactionsSelector(state),
@ -45,7 +50,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', this.props.t('transactions')),
+        h('div', this.context.t('transactions')),
      ]),
    ]),
    h('div.flex-column.tx-list-container', {}, [
@ -62,7 +67,7 @@ TxList.prototype.renderTransaction = function () {
    : [h(
        'div.tx-list-item.tx-list-item--empty',
        { key: 'tx-list-none' },
-        [ this.props.t('noTransactions') ],
+        [ this.context.t('noTransactions') ],
      )]
 }

@ -116,7 +121,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa

  if (isUnapproved) {
    opts.onClick = () => history.push(CONFIRM_TRANSACTION_ROUTE)
-    opts.transactionStatus = this.props.t('notStarted')
+    opts.transactionStatus = this.context.t('notStarted')
  } else if (transactionHash) {
    opts.onClick = () => this.view(transactionHash, transactionNetworkId)
  }
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@ -1,5 +1,6 @@
 const Component = require('react').Component
-const connect = require('../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const ethUtil = require('ethereumjs-util')
 const inherits = require('util').inherits
@ -18,6 +19,10 @@ module.exports = compose(
  connect(mapStateToProps, mapDispatchToProps)
 )(TxView)

+TxView.contextTypes = {
+  t: PropTypes.func,
+}
+
 function mapStateToProps (state) {
  const sidebarOpen = state.appState.sidebarOpen
  const isMascara = state.appState.isMascara
@ -78,21 +83,21 @@ TxView.prototype.renderButtons = function () {
          onClick: () => showModal({
            name: 'DEPOSIT_ETHER',
          }),
-        }, this.props.t('deposit')),
+        }, this.context.t('deposit')),

        h('button.btn-primary.hero-balance-button', {
          style: {
            marginLeft: '0.8em',
          },
          onClick: () => history.push(SEND_ROUTE),
-        }, this.props.t('send')),
+        }, this.context.t('send')),
      ])
    )
    : (
      h('div.flex-row.flex-center.hero-balance-buttons', [
        h('button.btn-primary.hero-balance-button', {
          onClick: () => history.push(SEND_ROUTE),
-        }, this.props.t('send')),
+        }, this.context.t('send')),
      ])
    )
 }
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@ -1,5 +1,6 @@
 const Component = require('react').Component
-const connect = require('../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
@ -20,6 +21,10 @@ module.exports = compose(
  connect(mapStateToProps, mapDispatchToProps)
 )(WalletView)

+WalletView.contextTypes = {
+  t: PropTypes.func,
+}
+
 function mapStateToProps (state) {

  return {
@ -122,7 +127,7 @@ WalletView.prototype.render = function () {
        onClick: hideSidebar,
      }),

-      h('div.wallet-view__keyring-label.allcaps', isLoose ? this.props.t('imported') : ''),
+      h('div.wallet-view__keyring-label.allcaps', isLoose ? this.context.t('imported') : ''),

      h('div.flex-column.flex-center.wallet-view__name-container', {
        style: { margin: '0 auto' },
@ -139,13 +144,13 @@ WalletView.prototype.render = function () {
          selectedIdentity.name,
        ]),

-        h('button.btn-clear.wallet-view__details-button.allcaps', this.props.t('details')),
+        h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')),
      ]),
    ]),

    h(Tooltip, {
      position: 'bottom',
-      title: this.state.hasCopied ? this.props.t('copiedExclamation') : this.props.t('copyToClipboard'),
+      title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'),
      wrapperClassName: 'wallet-view__tooltip',
    }, [
      h('button.wallet-view__address', {
@ -175,7 +180,7 @@ WalletView.prototype.render = function () {

    h('button.btn-primary.wallet-view__add-token-button', {
      onClick: () => history.push(ADD_TOKEN_ROUTE),
-    }, this.props.t('addToken')),
+    }, this.context.t('addToken')),
  ])
 }

--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@ -1,7 +1,7 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('./metamask-connect')
+const connect = require('react-redux').connect
 const { withRouter, Redirect } = require('react-router-dom')
 const { compose } = require('recompose')
 const actions = require('./actions')
--- a/ui/app/css/itcss/settings/typography.scss
+++ b/ui/app/css/itcss/settings/typography.scss
@ -1,4 +1,4 @@
-@import url('/fonts/Font_Awesome/font-awesome.min.css');
+@import url('./fonts/Font_Awesome/font-awesome.min.css');

@font-face {
  font-family: 'Roboto';
@ -338,8 +338,8 @@

@font-face {
  font-family: 'Montserrat Regular';
-  src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Regular.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-size: 'small';
@ -347,59 +347,59 @@

@font-face {
  font-family: 'Montserrat Bold';
-  src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Bold.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'Montserrat Light';
-  src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Light.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'Montserrat UltraLight';
-  src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'DIN OT';
-  src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
+  src: url('./fonts/DIN_OT/DINOT-2.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'DIN OT Light';
-  src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
+  src: url('./fonts/DIN_OT/DINOT-2.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
 }

@font-face {
  font-family: 'DIN NEXT';
-  src: url('/fonts/DIN Next/DIN Next W01 Regular.otf') format('opentype');
+  src: url('./fonts/DIN Next/DIN Next W01 Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'DIN NEXT Light';
-  src: url('/fonts/DIN Next/DIN Next W10 Light.otf') format('opentype');
+  src: url('./fonts/DIN Next/DIN Next W10 Light.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'Lato';
-  src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype');
+  src: url('./fonts/Lato/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
 }
--- a/ui/app/first-time/init-menu.js
+++ b/ui/app/first-time/init-menu.js
@ -1,6 +1,7 @@
 const { EventEmitter } = require('events')
 const { Component } = require('react')
-const connect = require('../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
 const Mascot = require('../components/mascot')
@ -49,7 +50,7 @@ class InitializeMenuScreen extends Component {
            color: '#7F8082',
            marginBottom: 10,
          },
-        }, this.props.t('appName')),
+        }, this.context.t('appName')),

        h('div', [
          h('h3', {
@ -58,10 +59,10 @@ class InitializeMenuScreen extends Component {
              color: '#7F8082',
              display: 'inline',
            },
-          }, this.props.t('encryptNewDen')),
+          }, this.context.t('encryptNewDen')),

          h(Tooltip, {
-            title: this.props.t('denExplainer'),
+            title: this.context.t('denExplainer'),
          }, [
            h('i.fa.fa-question-circle.pointer', {
              style: {
@ -81,7 +82,7 @@ class InitializeMenuScreen extends Component {
        h('input.large-input.letter-spacey', {
          type: 'password',
          id: 'password-box',
-          placeholder: this.props.t('newPassword'),
+          placeholder: this.context.t('newPassword'),
          onInput: this.inputChanged.bind(this),
          style: {
            width: 260,
@ -93,7 +94,7 @@ class InitializeMenuScreen extends Component {
        h('input.large-input.letter-spacey', {
          type: 'password',
          id: 'password-box-confirm',
-          placeholder: this.props.t('confirmPassword'),
+          placeholder: this.context.t('confirmPassword'),
          onKeyPress: this.createVaultOnEnter.bind(this),
          onInput: this.inputChanged.bind(this),
          style: {
@ -108,7 +109,7 @@ class InitializeMenuScreen extends Component {
          style: {
            margin: 12,
          },
-        }, this.props.t('createDen')),
+        }, this.context.t('createDen')),

        h('.flex-row.flex-center.flex-grow', [
          h('p.pointer', {
@ -118,7 +119,7 @@ class InitializeMenuScreen extends Component {
              color: 'rgb(247, 134, 28)',
              textDecoration: 'underline',
            },
-          }, this.props.t('importDen')),
+          }, this.context.t('importDen')),
        ]),

        h('.flex-row.flex-center.flex-grow', [
@ -154,12 +155,12 @@ class InitializeMenuScreen extends Component {
    this.setState({ warning: null })

    if (password.length < 8) {
-      this.setState({ warning: this.props.t('passwordShort') })
+      this.setState({ warning: this.context.t('passwordShort') })
      return
    }

    if (password !== passwordConfirm) {
-      this.setState({ warning: this.props.t('passwordMismatch') })
+      this.setState({ warning: this.context.t('passwordMismatch') })
      return
    }

@ -202,6 +203,10 @@ InitializeMenuScreen.propTypes = {
  dispatch: PropTypes.func,
 }

+InitializeMenuScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
 const mapStateToProps = state => {
  const { metamask: { isInitialized, isUnlocked } } = state

--- a/ui/app/i18n-provider.js
+++ b/ui/app/i18n-provider.js
@ -0,0 +1,36 @@
+const { Component } = require('react')
+const connect = require('react-redux').connect
+const PropTypes = require('prop-types')
+const t = require('../i18n-helper').getMessage
+
+class I18nProvider extends Component {
+  getChildContext() {
+    const { localeMessages } = this.props
+    return {
+      t: t.bind(null, localeMessages),
+    }
+  }
+
+  render() {
+    return this.props.children
+  }
+}
+
+I18nProvider.propTypes = {
+  localeMessages: PropTypes.object,
+  children: PropTypes.object,
+}
+
+I18nProvider.childContextTypes = {
+  t: PropTypes.func,
+}
+
+const mapStateToProps = state => {
+  const { localeMessages } = state
+  return {
+    localeMessages,
+  }
+}
+
+module.exports = connect(mapStateToProps)(I18nProvider)
+
--- a/ui/app/keychains/hd/create-vault-complete.js
+++ b/ui/app/keychains/hd/create-vault-complete.js
@ -1,6 +1,6 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('../../actions')
 const exportAsFile = require('../../util').exportAsFile
--- a/ui/app/keychains/hd/recover-seed/confirmation.js
+++ b/ui/app/keychains/hd/recover-seed/confirmation.js
@ -1,12 +1,17 @@
 const inherits = require('util').inherits
-
 const Component = require('react').Component
-const connect = require('../../../metamask-connect')
+const PropTypes = require('prop-types')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('../../../actions')

+RevealSeedConfirmation.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(RevealSeedConfirmation)

+
 inherits(RevealSeedConfirmation, Component)
 function RevealSeedConfirmation () {
  Component.call(this)
@ -49,13 +54,13 @@ RevealSeedConfirmation.prototype.render = function () {
        },
      }, [

-        h('h4', this.props.t('revealSeedWordsWarning')),
+        h('h4', this.context.t('revealSeedWordsWarning')),

        // confirmation
        h('input.large-input.letter-spacey', {
          type: 'password',
          id: 'password-box',
-          placeholder: this.props.t('enterPasswordConfirm'),
+          placeholder: this.context.t('enterPasswordConfirm'),
          onKeyPress: this.checkConfirmation.bind(this),
          style: {
            width: 260,
@ -91,7 +96,7 @@ RevealSeedConfirmation.prototype.render = function () {
        ),

        props.inProgress && (
-          h('span.in-progress-notification', this.props.t('generatingSeed'))
+          h('span.in-progress-notification', this.context.t('generatingSeed'))
        ),
      ]),
    ])
--- a/ui/app/keychains/hd/restore-vault.js
+++ b/ui/app/keychains/hd/restore-vault.js
@ -1,11 +1,17 @@
 const inherits = require('util').inherits
+const PropTypes = require('prop-types')
 const PersistentForm = require('../../../lib/persistent-form')
-const connect = require('../../metamask-connect')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('../../actions')

+RestoreVaultScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(RestoreVaultScreen)

+
 inherits(RestoreVaultScreen, PersistentForm)
 function RestoreVaultScreen () {
  PersistentForm.call(this)
@ -36,23 +42,23 @@ RestoreVaultScreen.prototype.render = function () {
          padding: 6,
        },
      }, [
-        this.props.t('restoreVault'),
+        this.context.t('restoreVault'),
      ]),

      // wallet seed entry
-      h('h3', this.props.t('walletSeed')),
+      h('h3', this.context.t('walletSeed')),
      h('textarea.twelve-word-phrase.letter-spacey', {
        dataset: {
          persistentFormId: 'wallet-seed',
        },
-        placeholder: this.props.t('secretPhrase'),
+        placeholder: this.context.t('secretPhrase'),
      }),

      // password
      h('input.large-input.letter-spacey', {
        type: 'password',
        id: 'password-box',
-        placeholder: this.props.t('newPassword8Chars'),
+        placeholder: this.context.t('newPassword8Chars'),
        dataset: {
          persistentFormId: 'password',
        },
@ -66,7 +72,7 @@ RestoreVaultScreen.prototype.render = function () {
      h('input.large-input.letter-spacey', {
        type: 'password',
        id: 'password-box-confirm',
-        placeholder: this.props.t('confirmPassword'),
+        placeholder: this.context.t('confirmPassword'),
        onKeyPress: this.createOnEnter.bind(this),
        dataset: {
          persistentFormId: 'password-confirmation',
@ -96,7 +102,7 @@ RestoreVaultScreen.prototype.render = function () {
          style: {
            textTransform: 'uppercase',
          },
-        }, this.props.t('cancel')),
+        }, this.context.t('cancel')),

        // submit
        h('button.primary', {
@ -104,7 +110,7 @@ RestoreVaultScreen.prototype.render = function () {
          style: {
            textTransform: 'uppercase',
          },
-        }, this.props.t('ok')),
+        }, this.context.t('ok')),
      ]),
    ])
  )
@ -135,13 +141,13 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
  var passwordConfirmBox = document.getElementById('password-box-confirm')
  var passwordConfirm = passwordConfirmBox.value
  if (password.length < 8) {
-    this.warning = this.props.t('passwordNotLongEnough')
+    this.warning = this.context.t('passwordNotLongEnough')

    this.props.dispatch(actions.displayWarning(this.warning))
    return
  }
  if (password !== passwordConfirm) {
-    this.warning = this.props.t('passwordsDontMatch')
+    this.warning = this.context.t('passwordsDontMatch')
    this.props.dispatch(actions.displayWarning(this.warning))
    return
  }
@ -151,18 +157,18 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {

  // true if the string has more than a space between words.
  if (seed.split('  ').length > 1) {
-    this.warning = this.props.t('spaceBetween')
+    this.warning = this.context.t('spaceBetween')
    this.props.dispatch(actions.displayWarning(this.warning))
    return
  }
  // true if seed contains a character that is not between a-z or a space
  if (!seed.match(/^[a-z ]+$/)) {
-    this.warning = this.props.t('loweCaseWords')
+    this.warning = this.context.t('loweCaseWords')
      this.props.dispatch(actions.displayWarning(this.warning))
    return
  }
  if (seed.split(' ').length !== 12) {
-    this.warning = this.props.t('seedPhraseReq')
+    this.warning = this.context.t('seedPhraseReq')
    this.props.dispatch(actions.displayWarning(this.warning))
    return
  }
--- a/ui/app/new-keychain.js
+++ b/ui/app/new-keychain.js
@ -1,7 +1,7 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('./metamask-connect')
+const connect = require('react-redux').connect

 module.exports = connect(mapStateToProps)(NewKeychain)

--- a/ui/app/select-app.js
+++ b/ui/app/select-app.js
@ -1,6 +1,6 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const connect = require('./metamask-connect')
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const { HashRouter } = require('react-router-dom')
 const App = require('./app')
@ -8,6 +8,7 @@ const OldApp = require('../../old-ui/app/app')
 const { autoAddToBetaUI } = require('./selectors')
 const { setFeatureFlag, setNetworkEndpoints } = require('./actions')
 const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
+const I18nProvider = require('./i18n-provider')

 function mapStateToProps (state) {
  return {
@ -68,7 +69,7 @@ SelectedApp.prototype.render = function () {
  ? h(HashRouter, {
      hashType: 'noslash',
    }, [
-      h(App),
+      h(I18nProvider, [ h(App) ]),
    ])
  : h(OldApp)
 }
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@ -1,4 +1,5 @@
 const { inherits } = require('util')
+const PropTypes = require('prop-types')
 const PersistentForm = require('../lib/persistent-form')
 const h = require('react-hyperscript')

@ -30,6 +31,10 @@ const {
 const { isValidAddress } = require('./util')
 const { CONFIRM_TRANSACTION_ROUTE } = require('./routes')

+SendTransactionScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = SendTransactionScreen

 inherits(SendTransactionScreen, PersistentForm)
@ -189,9 +194,9 @@ SendTransactionScreen.prototype.renderHeader = function () {

  return h('div.page-container__header', [

-    h('div.page-container__title', selectedToken ? this.props.t('sendTokens') : this.props.t('sendETH')),
+    h('div.page-container__title', selectedToken ? this.context.t('sendTokens') : this.context.t('sendETH')),

-    h('div.page-container__subtitle', this.props.t('onlySendToEtherAddress')),
+    h('div.page-container__subtitle', this.context.t('onlySendToEtherAddress')),

    h('div.page-container__header-close', {
      onClick: () => {
@ -262,11 +267,11 @@ SendTransactionScreen.prototype.handleToChange = function (to, nickname = '') {
  let toError = null

  if (!to) {
-    toError = this.props.t('required')
+    toError = this.context.t('required')
  } else if (!isValidAddress(to)) {
-    toError = this.props.t('invalidAddressRecipient')
+    toError = this.context.t('invalidAddressRecipient')
  } else if (to === from) {
-    toError = this.props.t('fromToSame')
+    toError = this.context.t('fromToSame')
  }

  updateSendTo(to, nickname)
@ -282,9 +287,9 @@ SendTransactionScreen.prototype.renderToRow = function () {

    h('div.send-v2__form-label', [

-      this.props.t('to'),
+      this.context.t('to'),

-      this.renderErrorMessage(this.props.t('to')),
+      this.renderErrorMessage(this.context.t('to')),

    ]),

@ -385,11 +390,11 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
  )

  if (conversionRate && !sufficientBalance) {
-    amountError = this.props.t('insufficientFunds')
+    amountError = this.context.t('insufficientFunds')
  } else if (verifyTokenBalance && !sufficientTokens) {
-    amountError = this.props.t('insufficientTokens')
+    amountError = this.context.t('insufficientTokens')
  } else if (amountLessThanZero) {
-    amountError = this.props.t('negativeETH')
+    amountError = this.context.t('negativeETH')
  }

  updateSendErrors({ amount: amountError })
@ -419,7 +424,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
          setMaxModeTo(true)
          this.setAmountToMax()
        },
-      }, [ !maxModeOn ? this.props.t('max') : '' ]),
+      }, [ !maxModeOn ? this.context.t('max') : '' ]),
    ]),

    h('div.send-v2__form-field', [
@ -448,7 +453,7 @@ SendTransactionScreen.prototype.renderGasRow = function () {

  return h('div.send-v2__form-row', [

-    h('div.send-v2__form-label', h('gasFee')),
+    h('div.send-v2__form-label', this.context.t('gasFee')),

    h('div.send-v2__form-field', [

@ -518,11 +523,11 @@ SendTransactionScreen.prototype.renderFooter = function () {
        clearSend()
        history.goBack()
      },
-    }, this.props.t('cancel')),
+    }, this.context.t('cancel')),
    h('button.btn-primary--lg.page-container__footer-button', {
      disabled: !noErrors || !gasTotal || missingTokenBalance,
      onClick: event => this.onSubmit(event),
-    }, this.props.t('next')),
+    }, this.context.t('next')),
  ])
 }

--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@ -1,7 +1,8 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('./metamask-connect')
+const connect = require('react-redux').connect
 const actions = require('./actions')
 const getCaretCoordinates = require('textarea-caret')
 const EventEmitter = require('events').EventEmitter
@ -10,8 +11,13 @@ const environmentType = require('../../app/scripts/lib/environment-type')

 const Mascot = require('./components/mascot')

+UnlockScreen.contextTypes = {
+  t: PropTypes.func,
+}
+
 module.exports = connect(mapStateToProps)(UnlockScreen)

+
 inherits(UnlockScreen, Component)
 function UnlockScreen () {
  Component.call(this)
@ -40,7 +46,7 @@ UnlockScreen.prototype.render = function () {
          textTransform: 'uppercase',
          color: '#7F8082',
        },
-      }, this.props.t('appName')),
+      }, this.context.t('appName')),

      h('input.large-input', {
        type: 'password',
@ -66,7 +72,7 @@ UnlockScreen.prototype.render = function () {
        style: {
          margin: 10,
        },
-      }, this.props.t('login')),
+      }, this.context.t('login')),

      h('p.pointer', {
        onClick: () => {
@ -80,7 +86,7 @@ UnlockScreen.prototype.render = function () {
          color: 'rgb(247, 134, 28)',
          textDecoration: 'underline',
        },
-      }, this.props.t('restoreFromSeed')),
+      }, this.context.t('restoreFromSeed')),

      h('p.pointer', {
        onClick: () => {
@ -93,7 +99,7 @@ UnlockScreen.prototype.render = function () {
          textDecoration: 'underline',
          marginTop: '32px',
        },
-      }, this.props.t('classicInterface')),
+      }, this.context.t('classicInterface')),
    ])
  )
 }
--- a/Show More
+++ b/Show More