1 files changed, 25 insertions, 20 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 7daa3a4dd..02a807dbb 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -3,7 +3,7 @@ const extend = require('xtend')
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const copyToClipboard = require('copy-to-clipboard')
+const CopyButton = require('./components/copyButton')
 const actions = require('./actions')
 const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const valuesFor = require('./util').valuesFor
@@ -14,6 +14,7 @@ const TransactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 const ethUtil = require('ethereumjs-util')
 const EditableLabel = require('./components/editable-label')
+const Tooltip = require('./components/tooltip')
 
 module.exports = connect(mapStateToProps)(AccountDetailScreen)
 
@@ -105,28 +106,32 @@ AccountDetailScreen.prototype.render = function () {
             },
           }, ethUtil.toChecksumAddress(selected)),
 
-          h('img.cursor-pointer.color-orange', {
-            src: 'images/copy.svg',
-            title: 'Copy Address',
-            onClick: () => copyToClipboard(ethUtil.toChecksumAddress(selected)),
-            style: {
-              margin: '0px 5px',
-            },
+          h(CopyButton, {
+            value: ethUtil.toChecksumAddress(selected),
           }),
 
-          h('img.cursor-pointer.color-orange', {
-            src: 'images/key-32.png',
+          h(Tooltip, {
             title: 'Export Private Key',
-            onClick: () => this.requestAccountExport(selected),
-            style: {
-              margin: '0px 5px',
-              width: '20px',
-              height: '20px',
-              position: 'relative',
-              top: '3px',
-              right: '4px',
-            },
-          }),
+          }, [
+            h('div', {
+              style: {
+                margin: '5px',
+              },
+            }, [
+              h('img.cursor-pointer.color-orange', {
+                src: 'images/key-32.png',
+                onClick: () => this.requestAccountExport(selected),
+                style: {
+                  margin: '0px 5px',
+                  width: '20px',
+                  height: '20px',
+                  position: 'relative',
+                  top: '3px',
+                  right: '4px',
+                },
+              }),
+            ]),
+          ]),
 
         ]),