Merge pull request #4779 from whymarrh/tx-view-tooltips

Add Tooltips to Balance View in Extension

2 files changed, 30 insertions, 13 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 897f16f04..35e28c087 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -515,6 +515,9 @@
   "mainnet": {
     "message": "Main Ethereum Network"
   },
+  "menu": {
+    "message": "Menu"
+  },
   "message": {
     "message": "Message"
   },
@@ -596,6 +599,9 @@
   "oldUIMessage": {
     "message": "You have returned to the old UI. You can switch back to the New UI through the option in the top right dropdown menu."
   },
+  "openInTab": {
+    "message": "Open in tab"
+  },
   "or": {
     "message": "or",
     "description": "choice between creating or importing a new account"
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 014497fcd..654090da6 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -11,6 +11,7 @@ const { SEND_ROUTE } = require('../routes')
 const { checksumAddress: toChecksumAddress } = require('../util')
 
 const BalanceComponent = require('./balance-component')
+const Tooltip = require('./tooltip')
 const TxList = require('./tx-list')
 const SelectedAccount = require('./selected-account')
 
@@ -103,7 +104,8 @@ TxView.prototype.renderButtons = function () {
 }
 
 TxView.prototype.render = function () {
-  const { isMascara } = this.props
+  const { hideSidebar, isMascara, showSidebar, sidebarOpen } = this.props
+  const { t } = this.context
 
   return h('div.tx-view.flex-column', {
     style: {},
@@ -120,21 +122,30 @@ TxView.prototype.render = function () {
       },
     }, [
 
-      h('div.fa.fa-bars', {
-        style: {
-          fontSize: '1.3em',
-          cursor: 'pointer',
-          padding: '10px',
-        },
-        onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
-      }),
+      h(Tooltip, {
+        title: t('menu'),
+        position: 'bottom',
+      }, [
+        h('div.fa.fa-bars', {
+          style: {
+            fontSize: '1.3em',
+            cursor: 'pointer',
+            padding: '10px',
+          },
+          onClick: () => sidebarOpen ? hideSidebar() : showSidebar(),
+        }),
+      ]),
 
       h(SelectedAccount),
 
-      !isMascara && h('div.open-in-browser', {
-        onClick: () => global.platform.openExtensionInBrowser(),
-      }, [h('img', { src: 'images/popout.svg' })]),
-
+      !isMascara && h(Tooltip, {
+        title: t('openInTab'),
+        position: 'bottom',
+      }, [
+        h('div.open-in-browser', {
+          onClick: () => global.platform.openExtensionInBrowser(),
+        }, [h('img', { src: 'images/popout.svg' })]),
+      ]),
     ]),
 
     this.renderHeroBalance(),