ui - use global.platform for extension interaction

app/scripts/platforms/extension.js

@@ -14,6 +14,10 @@ class ExtensionPlatform {
     extension.tabs.create({ url })
   }
 
+  getVersion () {
+    return extension.runtime.getManifest().version
+  }
+
 }
 
 module.exports = ExtensionPlatform

app/scripts/popup.js

@@ -4,9 +4,13 @@ const startPopup = require('./popup-core')
 const PortStream = require('./lib/port-stream.js')
 const isPopupOrNotification = require('./lib/is-popup-or-notification')
 const extension = require('extensionizer')
+const ExtensionPlatform = require('./platforms/extension')
 const NotificationManager = require('./lib/notification-manager')
 const notificationManager = new NotificationManager()
 
+// create platform global
+global.platform = new ExtensionPlatform()
+
 // inject css
 const css = MetaMaskUiCss()
 injectCss(css)

ui/app/components/account-info-link.js

@@ -3,7 +3,6 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const Tooltip = require('./tooltip')
 const genAccountLink = require('../../lib/account-link')
-const extension = require('extensionizer')
 
 module.exports = AccountInfoLink
 
@@ -35,7 +34,7 @@ AccountInfoLink.prototype.render = function () {
         style: {
           margin: '5px',
         },
-        onClick () { extension.tabs.create({ url }) },
+        onClick () { global.platform.openWindow({ url }) },
       }),
     ]),
   ])

ui/app/components/buy-button-subview.js

@@ -5,7 +5,6 @@ const connect = require('react-redux').connect
 const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
-const extension = require('extensionizer')
 const Loading = require('./loading')
 const TabBar = require('./tab-bar')
 
@@ -142,7 +141,7 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
 }
 
 BuyButtonSubview.prototype.navigateTo = function (url) {
-  extension.tabs.create({ url })
+  global.platform.openWindow({ url })
 }
 
 BuyButtonSubview.prototype.backButtonContext = function () {

ui/app/components/shift-list-item.js

@@ -4,7 +4,6 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const vreme = new (require('vreme'))
 const explorerLink = require('../../lib/explorer-link')
-const extension = require('extensionizer')
 const actions = require('../actions')
 const addressSummary = require('../util').addressSummary
 
@@ -172,9 +171,7 @@ ShiftListItem.prototype.renderInfo = function () {
           width: '200px',
           overflow: 'hidden',
         },
-        onClick: () => extension.tabs.create({
+        onClick: () => global.platform.openWindow({ url }),
-          url,
-        }),
       }, [
         h('div', {
           style: {

ui/app/info.js

@@ -3,7 +3,6 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('./actions')
-const extension = require('extensionizer')
 
 module.exports = connect(mapStateToProps)(InfoScreen)
 
@@ -17,13 +16,8 @@ function InfoScreen () {
 }
 
 InfoScreen.prototype.render = function () {
-  var state = this.props
+  const state = this.props
-  var manifest
+  const version = global.platform.getVersion()
-  try {
-    manifest = extension.runtime.getManifest()
-  } catch (e) {
-    manifest = { version: '2.0.0' }
-  }
 
   return (
     h('.flex-column.flex-grow', [
@@ -53,7 +47,7 @@ InfoScreen.prototype.render = function () {
               style: {
                 marginBottom: '10px',
               },
-            }, `Version: ${manifest.version}`),
+            }, `Version: ${version}`),
           ]),
 
           h('div', {
@@ -110,10 +104,12 @@ InfoScreen.prototype.render = function () {
                   onClick (event) { this.navigateTo(event.target.href) },
                 }, [
                   h('img.icon-size', {
-                    src: manifest.icons['128'],
+                    src: 'images/icon-128.png',
                     style: {
-                      filter: 'grayscale(100%)', /* IE6-9 */
+                      // IE6-9
-                      WebkitFilter: 'grayscale(100%)', /* Microsoft Edge and Firefox 35+ */
+                      filter: 'grayscale(100%)',
+                      // Microsoft Edge and Firefox 35+
+                      WebkitFilter: 'grayscale(100%)',
                     },
                   }),
                   h('div.info', 'Visit our web site'),
@@ -139,7 +135,7 @@ InfoScreen.prototype.render = function () {
                 h('a.info', {
                   target: '_blank',
                   style: { width: '85vw' },
-                  onClick () { extension.tabs.create({url: 'mailto:help@metamask.io?subject=Feedback'}) },
+                  onClick () { this.navigateTo('mailto:help@metamask.io?subject=Feedback') },
                 }, 'Email us!'),
               ]),
 
@@ -158,5 +154,5 @@ InfoScreen.prototype.render = function () {
 }
 
 InfoScreen.prototype.navigateTo = function (url) {
-  extension.tabs.create({ url })
+  global.platform.openWindow({ url })
 }