Gas limit
diff --git a/src/app/ui/copy-to-clipboard.js b/src/app/ui/copy-to-clipboard.js
new file mode 100644
index 0000000000..435f956489
--- /dev/null
+++ b/src/app/ui/copy-to-clipboard.js
@@ -0,0 +1,32 @@
+var yo = require('yo-yo')
+// -------------- copyToClipboard ----------------------
+const copy = require('clipboard-copy')
+var addTooltip = require('./tooltip')
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.styleGuide
+var styles = styleGuide()
+
+var css = csjs`
+ .copyIcon {
+ margin-left: 5px;
+ cursor: pointer;
+ }
+`
+
+module.exports = function copyToClipboard (getContent) {
+ var copyIcon = yo`
`
+ copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard
+ copyIcon.onmouseenter = function (event) { copyIcon.style.color = styles.remix.icon_HoverColor_CopyToClipboard }
+ copyIcon.onmouseleave = function (event) { copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard }
+ copyIcon.onclick = (event) => {
+ event.stopPropagation()
+ var copiableContent = getContent()
+ if (copiableContent) { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
+ copy(copiableContent)
+ addTooltip(event)
+ }
+ }
+ return copyIcon
+}
diff --git a/src/app/ui/tooltip.js b/src/app/ui/tooltip.js
new file mode 100644
index 0000000000..dcba10aba9
--- /dev/null
+++ b/src/app/ui/tooltip.js
@@ -0,0 +1,52 @@
+var yo = require('yo-yo')
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.styleGuide
+var styles = styleGuide()
+
+var css = csjs`
+ .tooltip {
+ visibility: hidden;
+ width: 100px;
+ background-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor};
+ color: ${styles.remix.tooltip_CopyToClipboard_Color};
+ font-weight: bold;
+ font-size: 12px;
+ text-transform: initial;
+ text-align: center;
+ border-radius: 3px;
+ padding: 5px 0;
+ position: absolute;
+ z-index: 1;
+ bottom: 160%;
+ left: 100%;
+ margin-left: -60px;
+ opacity: 0;
+ transition: opacity 1s;
+ }
+ .tooltip::after {
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor} transparent transparent transparent;
+ }
+`
+
+module.exports = function addTooltip (event) {
+ var icon = event.target
+ icon.style.position = 'relative'
+ var tooltip = yo`
Copied!
`
+ icon.appendChild(tooltip)
+ var copiedToolbox = event.target.children[0]
+ copiedToolbox.style.visibility = 'visible'
+ copiedToolbox.style.opacity = 1
+ setTimeout(function () {
+ copiedToolbox.style.visibility = 'hidden'
+ copiedToolbox.style.opacity = 0
+ }, 1000)
+}
diff --git a/src/universal-dapp.js b/src/universal-dapp.js
index a19f4b7234..a3753b78c7 100644
--- a/src/universal-dapp.js
+++ b/src/universal-dapp.js
@@ -15,9 +15,7 @@ var txHelper = require('./app/execution/txHelper')
var txExecution = require('./app/execution/txExecution')
var helper = require('./lib/helper')
var executionContext = require('./execution-context')
-
-// copy to copyToClipboard
-const copy = require('clipboard-copy')
+var copyToClipboard = require('./app/ui/copy-to-clipboard')
// -------------- styling ----------------------
var csjs = require('csjs-inject')
@@ -42,6 +40,7 @@ var css = csjs`
overflow: hidden;
word-break: break-word;
line-height: initial;
+ overflow: visible;
}
.titleLine {
display: flex;
@@ -71,14 +70,6 @@ var css = csjs`
.instance.hidesub .titleLine {
display: flex;
}
- .copy {
- cursor: pointer;
- margin-left: 3%;
- color: ${styles.rightPanel.runTab.icon_Color_Instance_CopyToClipboard};
- }
- .copy:hover{
- color: ${styles.rightPanel.runTab.icon_HoverColor_Instance_CopyToClipboard};
- }
.buttonsContainer {
margin-top: 2%;
display: flex;
@@ -299,28 +290,20 @@ UniversalDApp.prototype.renderInstance = function (contract, address, contractNa
address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
var shortAddress = helper.shortenAddress(address)
- var title = yo`
-
-
-
${contractName} at ${shortAddress} (${context})
-
-
-
- `
+ var title = yo`
+
${contractName} at ${shortAddress} (${context})
+ ${copyToClipboard(() => address)}
+
`
+
if (self.removable_instances) {
var close = yo`
`
- title.querySelector(`.${css.title}`).appendChild(close)
+ instance.append(close)
}
function toggleClass () {
instance.classList.toggle(`${css.hidesub}`)
}
- function copyToClipboard (event) {
- event.stopPropagation()
- copy(address)
- }
-
var abi = txHelper.sortAbiFunction(contract)
instance.appendChild(title)