diff --git a/src/app.js b/src/app.js
index ffe04d296a..f033514446 100644
--- a/src/app.js
+++ b/src/app.js
@@ -523,7 +523,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
editor: self._components.editor,
config: self._api.config,
txListener: txlistener,
- contextview: self._components.contextView
+ contextview: self._components.contextView,
+ udapp: () => { return udapp }
}
})
this._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index ac93a5c0ab..4762ffa41c 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -28,6 +28,7 @@ class EditorPanel {
terminal: new Terminal({
api: {
cmdInterpreter: self._api.cmdInterpreter,
+ udapp: self._api.udapp,
getPosition (event) {
var limitUp = 36
var limitDown = 20
diff --git a/src/app/panels/styles/terminal-styles.js b/src/app/panels/styles/terminal-styles.js
index d0dda05a41..5b700a727c 100644
--- a/src/app/panels/styles/terminal-styles.js
+++ b/src/app/panels/styles/terminal-styles.js
@@ -27,20 +27,20 @@ var css = csjs`
display : flex;
align-items : center;
width : 100%;
- padding : 5px;
}
.clear {
- margin-left : 10px;
- margin-right : 10px;
+ margin-right : 20px;
width : 10px;
cursor : pointer;
color : ${styles.terminal.icon_Color_TogglePanel};
+ display : flex;
}
.clear:hover {
color : ${styles.terminal.icon_HoverColor_Menu};
}
.toggleTerminal {
- margin-right : 10px;
+ margin-right : 20px;
+ margin-left : 20px;
font-size : 14px;
font-weight : bold;
cursor : pointer;
@@ -56,6 +56,7 @@ var css = csjs`
height : 100%;
overflow-y : auto;
font-family : monospace;
+ margin : 0px;
}
.terminal_bg {
display : flex;
@@ -137,9 +138,21 @@ var css = csjs`
align-items : center;
justify-content : center;
}
- .listen {
- min-width : 120px;
- display : flex;
+ .listen {}
+ .verticalLine {
+ border-left : 1px solid ${styles.colors.veryLightGrey};
+ height : 65%;
+ margin-right : 30px; }
+ .pendingTx {
+ border : 1px solid ${styles.terminal.icon_HoverColor_Menu};
+ border-radius: 50%;
+ margin-right: 30px;
+ min-width: 13px;
+ height: 13px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 10px;
}
.dragbarHorizontal {
position : absolute;
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index 70716208e8..e28111eae4 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -105,23 +105,40 @@ class Terminal {
${self._view.input}
`
- self._view.icon = yo``
- self._view.dragbar = yo``
+ self._view.icon = yo`
+ `
+ self._view.dragbar = yo`
+ `
self._view.dropdown = self._components.dropdown.render()
+ self._view.pendingTxCount = yo`${self._view.pendingTxCount}
`
self._view.bar = yo`
${self._view.dragbar}
`
+ setInterval(() => {
+ updatePendingTxs(self._api, self._view.pendingTxCount)
+ }, 5000)
+
function listenOnNetwork (ev) {
self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
}
@@ -563,5 +580,10 @@ function domTerminalFeatures (self, scopedCommands) {
}
function blockify (el) { return yo`${el}
` }
+// PENDING TX
+function updatePendingTxs (api, el) {
+ var count = Object.keys(api.udapp().pendingTransactions()).length
+ el.innerText = count
+}
module.exports = Terminal
diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 785c97318e..376959d826 100644
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@@ -1,76 +1,116 @@
'use strict'
var $ = require('jquery')
var yo = require('yo-yo')
-var helper = require('../../lib/helper.js')
var remixLib = require('remix-lib')
+var ethJSUtil = require('ethereumjs-util')
+var csjs = require('csjs-inject')
var txExecution = remixLib.execution.txExecution
var txFormat = remixLib.execution.txFormat
var txHelper = remixLib.execution.txHelper
+var EventManager = remixLib.EventManager
+var helper = require('../../lib/helper.js')
var executionContext = require('../../execution-context')
var modalDialogCustom = require('../ui/modal-dialog-custom')
var copyToClipboard = require('../ui/copy-to-clipboard')
+var Card = require('../ui/card')
var Recorder = require('../../recorder')
-var EventManager = remixLib.EventManager
var addTooltip = require('../ui/tooltip')
-var ethJSUtil = require('ethereumjs-util')
-var MultiParamManager = require('../../multiParamManager')
-
-var csjs = require('csjs-inject')
var css = require('./styles/run-tab-styles')
+var MultiParamManager = require('../../multiParamManager')
-var instanceContainer = yo``
-
-var instanceContainerTitle = yo`
- UDapps of deployed contracts
`
-var noInstancesText = yo`
- Currently you have no contract instances.
`
+function runTab (appAPI = {}, appEvents = {}, opts = {}) {
+ /* -------------------------
+ VARIABLES
+ --------------------------- */
+ var self = this
+ var event = new EventManager()
+ self._view = {}
+ self.data = {
+ count: 0,
+ text: `All transactions (deployed contracts and function executions)
+ in this environment can be saved and replayed in
+ another environment. i.e. Transactions created in
+ Javascript VM can be replayed in the Ropsten network.`
+ }
-var pendingTxsText = yo`0 pending transactions`
+ self._view.recorderCount = yo`0`
+ self._view.instanceContainer = yo``
+ self._view.clearInstanceElement = yo`
+ clearInstanceList(self)}
+ title="Clear instances list and reset recorder" aria-hidden="true">
+ `
+ self._view.instanceContainerTitle = yo`
+
+ UI for Deployed Contracts
+ ${self._view.clearInstanceElement}
+
`
+ self._view.noInstancesText = yo`
+
+ Currently you have no contract instances to interact with.
+
`
-function runTab (appAPI = {}, appEvents = {}, opts = {}) {
var container = yo``
- var event = new EventManager()
- var clearInstanceElement = yo`
- { event.trigger('clearInstance', []) }}
- title="Clear Instances List" aria-hidden="true">
- `
+ var recorderInterface = makeRecorder(event, appAPI, appEvents, opts, self)
- clearInstanceElement.addEventListener('click', () => {
- event.trigger('clearInstance', [])
- })
- var recorderInterface = makeRecorder(event, appAPI, appEvents, opts)
- var pendingTxsContainer = yo`
-
-
- ${pendingTxsText}
-
+ self._view.collapsedView = yo`
+
+
${self._view.recorderCount}
+
+
+ ${self.data.text}
+
+
${recorderInterface.recordButton}
${recorderInterface.runButton}
- ${clearInstanceElement}
-
-
-
+
${settings(container, appAPI, appEvents, opts)}
- ${contractDropdown(event, appAPI, appEvents, opts, instanceContainer)}
- ${pendingTxsContainer}
- ${instanceContainer}
+ ${contractDropdown(event, appAPI, appEvents, opts, self)}
+ ${recorderCard.render()}
+ ${self._view.instanceContainer}
`
container.appendChild(el)
- // PENDING transactions
- function updatePendingTxs (container, appAPI) {
- var pendingCount = Object.keys(opts.udapp.pendingTransactions()).length
- pendingTxsText.innerText = pendingCount + ' pending transactions'
- }
+ /* -------------------------
+ HELPER FUNCTIONS
+ --------------------------- */
// DROPDOWN
var selectExEnv = el.querySelector('#selectExEnvOptions')
+ function clearInstanceList (self) {
+ event.trigger('clearInstance', [])
+ self._view.recorderCount.innerText = 0
+ }
+
function setFinalContext () {
// set the final context. Cause it is possible that this is not the one we've originaly selected
selectExEnv.value = executionContext.getProvider()
@@ -95,20 +135,23 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) {
modalDialogCustom.alert(alertMsg)
}, setFinalContext)
})
+
selectExEnv.value = executionContext.getProvider()
executionContext.event.register('contextChanged', (context, silent) => {
setFinalContext()
})
+
fillAccountsList(appAPI, opts, el)
setInterval(() => {
updateAccountBalances(container, appAPI)
- updatePendingTxs(container, appAPI)
}, 10000)
event.register('clearInstance', () => {
+ var instanceContainer = self._view.instanceContainer
+ var instanceContainerTitle = self._view.instanceContainerTitle
instanceContainer.innerHTML = '' // clear the instances list
instanceContainer.appendChild(instanceContainerTitle)
- instanceContainer.appendChild(noInstancesText)
+ instanceContainer.appendChild(self._view.noInstancesText)
})
return { render () { return container } }
}
@@ -141,9 +184,9 @@ function updateAccountBalances (container, appAPI) {
}
/* ------------------------------------------------
- RECORDER
+ RECORDER
------------------------------------------------ */
-function makeRecorder (events, appAPI, appEvents, opts) {
+function makeRecorder (events, appAPI, appEvents, opts, self) {
var recorder = new Recorder(opts.compiler, {
events: {
udapp: appEvents.udapp,
@@ -152,23 +195,26 @@ function makeRecorder (events, appAPI, appEvents, opts) {
},
api: appAPI
})
+ recorder.event.register('newTxRecorded', (count) => {
+ self.data.count = count
+ self._view.recorderCount.innerText = count
+ })
var css2 = csjs`
- .container,
- .runTxs,
- .recorder {
- }
+ .container {}
+ .runTxs {}
+ .recorder {}
`
+ var runButton = yo``
var recordButton = yo`
`
- var runButton = yo``
function triggerRecordButton () {
var txJSON = JSON.stringify(recorder.getAll(), null, 2)
var path = appAPI.currentPath()
- modalDialogCustom.prompt(null, 'save ran transactions to file (e.g. `scenario.json`). The file is going to be saved under ' + path, 'scenario.json', input => {
+ modalDialogCustom.prompt(null, 'Transactions will be saved in a file under ' + path, 'scenario.json', input => {
var fileProvider = appAPI.fileProviderOf(path)
if (fileProvider) {
var newFile = path + input
@@ -183,6 +229,7 @@ function makeRecorder (events, appAPI, appEvents, opts) {
}
})
}
+
runButton.onclick = () => {
var currentFile = appAPI.config.get('currentFile')
appAPI.fileProviderOf(currentFile).get(currentFile, (error, json) => {
@@ -201,9 +248,10 @@ function makeRecorder (events, appAPI, appEvents, opts) {
return modalDialogCustom.alert('Invalid Scenario File, please try again')
}
if (txArray.length) {
+ var noInstancesText = self._view.noInstancesText
if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
- recorder.run(txArray, accounts, options, abis, linkReferences, opts.udapp, (abi, address, contractName) => {
- instanceContainer.appendChild(opts.udappUI.renderInstanceFromABI(abi, address, contractName))
+ recorder.run(txArray, accounts, options, abis, linkReferences, (abi, address, contractName) => {
+ self._view.instanceContainer.appendChild(opts.udappUI.renderInstanceFromABI(abi, address, contractName))
})
}
} else {
@@ -212,15 +260,18 @@ function makeRecorder (events, appAPI, appEvents, opts) {
}
})
}
+
return { recordButton, runButton }
}
/* ------------------------------------------------
CONTRACT (deploy or access deployed)
------------------------------------------------ */
-function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
+function contractDropdown (events, appAPI, appEvents, opts, self) {
+ var instanceContainer = self._view.instanceContainer
+ var instanceContainerTitle = self._view.instanceContainerTitle
instanceContainer.appendChild(instanceContainerTitle)
- instanceContainer.appendChild(noInstancesText)
+ instanceContainer.appendChild(self._view.noInstancesText)
var compFails = yo``
appEvents.compiler.register('compilationFinished', function (success, data, source) {
getContractNames(success, data)
@@ -234,7 +285,6 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
})
var atAddressButtonInput = yo``
-
var selectContractNames = yo``
function getSelectedContract () {
@@ -248,6 +298,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
return null
}
appAPI.getSelectedContract = getSelectedContract
+
var createPanel = yo``
var el = yo`
@@ -281,7 +332,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
selectContractNames.addEventListener('change', setInputParamsPlaceHolder)
- // ADD BUTTONS AT ADDRESS AND CREATE
+ // DEPLOY INSTANCE
function createInstance (args) {
var selectedContract = getSelectedContract()
@@ -304,7 +355,7 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
return
}
}
- if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
+ self._view.noInstancesText.style.display = 'none'
var address = isVM ? txResult.result.createdAddress : txResult.result.contractAddress
instanceContainer.appendChild(opts.udappUI.renderInstance(selectedContract.contract.object, address, selectContractNames.value))
} else {
@@ -322,8 +373,9 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
})
}
+ // ACCESS DEPLOYED INSTANCE
function loadFromAddress (appAPI) {
- if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
+ self._view.noInstancesText.style.display = 'none'
var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
var address = atAddressButtonInput.value
if (!ethJSUtil.isValidAddress(address)) {
@@ -365,12 +417,11 @@ function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
return el
}
-
/* ------------------------------------------------
section SETTINGS: Environment, Account, Gas, Value
------------------------------------------------ */
function settings (container, appAPI, appEvents, opts) {
- // SETTINGS HTML
+ // VARIABLES
var net = yo``
const updateNetwork = () => {
executionContext.detectNetwork((err, { id, name } = {}) => {
@@ -382,86 +433,86 @@ function settings (container, appAPI, appEvents, opts) {
}
})
}
- setInterval(updateNetwork, 5000)
- function newAccount () {
- opts.udapp.newAccount('', (error, address) => {
- if (!error) {
- container.querySelector('#txorigin').appendChild(yo``)
- addTooltip(`account ${address} created`)
- } else {
- addTooltip('Cannot create an account: ' + error)
- }
- })
- }
-
var environmentEl = yo`
-
-
- Environment
-
-
- ${net}
-
-
-
-
+
+ Environment
+
+
+ ${net}
+
+
+
+
-
Account
-
- ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
-
-
+
Account
+
+ ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
+
+
-
Value
-
-
-
+
Value
+
+
+
- ${environmentEl}
- ${accountEl}
- ${gasPriceEl}
- ${valueEl}
-
-`
-
- // EVENTS
+
+ ${environmentEl}
+ ${accountEl}
+ ${gasPriceEl}
+ ${valueEl}
+
+ `
+ // HELPER FUNCTIONS AND EVENTS
appEvents.udapp.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => {
if (error) return
if (!lookupOnly) el.querySelector('#value').value = '0'
updateAccountBalances(container, appAPI)
})
+ setInterval(updateNetwork, 5000)
+ function newAccount () {
+ appAPI.newAccount('', (error, address) => {
+ if (!error) {
+ container.querySelector('#txorigin').appendChild(yo``)
+ addTooltip(`account ${address} created`)
+ } else {
+ addTooltip('Cannot create an account: ' + error)
+ }
+ })
+ }
+
return el
}
diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
index ed15a35130..fa680d9d94 100644
--- a/src/app/tabs/styles/run-tab-styles.js
+++ b/src/app/tabs/styles/run-tab-styles.js
@@ -9,8 +9,11 @@ var css = csjs`
flex-direction: column;
}
.instanceContainerTitle {
- font-size: 20px;
font-weight: bold;
+ margin-bottom: 5%;
+ font-size: 12px;
+ display: flex;
+ justify-content: space-between;
}
.settings {
${styles.rightPanel.runTab.box_RunTab}
@@ -58,11 +61,13 @@ var css = csjs`
width: 250px;
}
.instanceContainer {
+ ${styles.rightPanel.runTab.box_Instance}
display: flex;
flex-direction: column;
- margin-top: 2%;
+ margin-bottom: 2%;
border: none;
text-align: center;
+ padding: 10px 0px 15px 15px;
}
.pendingTxsContainer {
${styles.rightPanel.runTab.box_Instance}
@@ -74,8 +79,16 @@ var css = csjs`
}
.container {
${styles.rightPanel.runTab.box_RunTab}
- margin-top: 2%;
+ margin-bottom: 2%;
}
+ .recorderCollapsedView,
+ .recorderExpandedView {
+ display: flex;
+ flex-direction: column;
+ }
+ .recorderDescription {
+ margin: 0 15px 15px 0;
+ }
.contractNames {
${styles.rightPanel.runTab.dropdown_RunTab}
width: 100%;
@@ -109,6 +122,7 @@ var css = csjs`
.noInstancesText {
${styles.rightPanel.runTab.box_Instance}
font-style: italic;
+ text-align: left;
}
.pendingTxsText {
${styles.rightPanel.runTab.borderBox_Instance}
@@ -180,14 +194,14 @@ var css = csjs`
.networkItem {
margin-right: 5px;
}
- .clearinstance {}
+ .clearinstance {
+ margin-right: 15px;
+ }
.transactionActions {
display: flex;
- width: 70px;
- justify-content: space-between;
- border: 1px solid ${styles.rightPanel.runTab.additionalText_Color};
- padding: 5px;
- border-radius: 3px;
+ justify-content: space-evenly;
+ ${styles.rightPanel.runTab.box_Info_RunTab};
+ width: 145px;
}
`
diff --git a/src/app/ui/card.js b/src/app/ui/card.js
new file mode 100644
index 0000000000..c4b9a481a0
--- /dev/null
+++ b/src/app/ui/card.js
@@ -0,0 +1,93 @@
+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles-guide/theme-chooser')
+var styles = styleGuide.chooser()
+var remixLib = require('remix-lib')
+var EventManager = remixLib.EventManager
+
+module.exports = class Card {
+ constructor (api, events, opts) {
+ const self = this
+ self._api = api
+ self._events = events
+ self._opts = opts
+ self._view = {}
+ self.event = new EventManager()
+ }
+ render () {
+ const self = this
+ if (self._view.el) return self._view.el
+
+ self._view.cardBody = yo``
+ self._view.arrow = yo` trigger(ev.target)}>`
+
+ self._view.expandCollapseButton = yo`
+ ${self._view.arrow}
`
+
+ self._view.statusBar = yo`${self._opts.collapsedView}
`
+
+ self._view.cardHeader = yo`
+ `
+
+ function trigger (el) {
+ var body = self._view.cardBody
+ var status = self._view.statusBar
+ el.classList.toggle('fa-angle-down')
+ var arrow = el.classList.toggle('fa-angle-up') ? 'down' : 'up'
+ self.event.trigger('expandCollapseCard', [arrow, body, status])
+ }
+
+ // HTML
+ self._view.el = yo`
+
+ ${self._view.cardHeader}
+ ${self._view.cardBody}
+
`
+
+ return self._view.el
+ }
+
+}
+
+const css = csjs`
+ .cardContainer {
+ ${styles.remix.solidBox};
+ margin-bottom : 2%;
+ }
+ .cardHeader {
+ display : flex;
+ justify-content : space-between;
+ }
+ .statusBar {}
+ .cardBody {}
+ .cardTitles {
+ display : flex;
+ flex-direction : row;
+ align-items : center;
+ }
+ .cardTitle {
+ font-size : 13px;
+ font-weight : bold;
+ color : ${styles.appProperties.mainText_Color};
+ margin-right : 5px;
+ }
+ .expandCollapseButton {}
+ .arrow {
+ margin-right : 15px;
+ color : ${styles.appProperties.icon_Color};
+ font-weight : bold;
+ cursor : pointer;
+ font-size : 14px;
+ }
+ .arrow:hover {
+ color : ${styles.appProperties.icon_HoverColor};
+ }
+
+`
diff --git a/src/app/ui/styles-guide/style-guide.js b/src/app/ui/styles-guide/style-guide.js
index 05e4ddf171..3f161d3c69 100644
--- a/src/app/ui/styles-guide/style-guide.js
+++ b/src/app/ui/styles-guide/style-guide.js
@@ -390,7 +390,12 @@ function styleGuide () {
tooltip_CopyToClipboard_Color: appProperties.tooltip_Color,
icon_Color_CopyToClipboard: appProperties.icon_Color,
- icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor
+ icon_HoverColor_CopyToClipboard: appProperties.icon_HoverColor,
+
+ solidBox: appProperties.uiElements.solidBorderBox({
+ BackgroundColor: appProperties.solidBox_BackgroundColor,
+ Color: appProperties.solidBox_TextColor
+ })
},
/* ------------------------------------------------------
@@ -569,6 +574,12 @@ function styleGuide () {
Color: appProperties.solidBox_TextColor
}),
+ box_Info_RunTab: appProperties.uiElements.dottedBorderBox({
+ BackgroundColor: appProperties.solidBorderBox_BackgroundColor,
+ BorderColor: appProperties.solidBorderBox_BorderColor,
+ Color: appProperties.solidBorderBox_TextColor
+ }),
+
dropdown_RunTab: appProperties.uiElements.dropdown({
BackgroundColor: appProperties.dropdown_BackgroundColor,
BorderColor: appProperties.dropdown_BorderColor,
diff --git a/src/app/ui/styles/dropdown-styles.js b/src/app/ui/styles/dropdown-styles.js
index 1a84d46cad..a36bac36b1 100644
--- a/src/app/ui/styles/dropdown-styles.js
+++ b/src/app/ui/styles/dropdown-styles.js
@@ -10,6 +10,7 @@ var css = csjs`
display : flex;
flex-direction : column;
margin-right : 10px;
+ width : auto;
}
.selectbox {
display : flex;
diff --git a/src/recorder.js b/src/recorder.js
index 265e4c1db7..630d7152f0 100644
--- a/src/recorder.js
+++ b/src/recorder.js
@@ -131,6 +131,7 @@ class Recorder {
append (timestamp, record) {
var self = this
self.data.journal.push({ timestamp, record })
+ self.event.trigger('newTxRecorded', [self.data.journal.length])
}
/**
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index 97a05941ca..10df4ae302 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -10,7 +10,7 @@ var css = csjs`
.title {
${styles.rightPanel.runTab.titlebox_RunTab}
display: flex;
- justify-content: end;
+ justify-content: space-between;
align-items: center;
font-size: 11px;
height: 30px;
@@ -35,11 +35,9 @@ var css = csjs`
color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard};
}
.instance {
- ${styles.rightPanel.runTab.box_Instance};
- margin-bottom: 10px;
- padding: 10px 15px 15px 15px;
- position: relative;
- overflow: visible;
+ min-width: 310px;
+ display: flex;
+ flex-direction: column;
}
.instance .title:before {
content: "\\25BE";
@@ -81,6 +79,7 @@ var css = csjs`
.closeIcon {
font-size: 12px;
cursor: pointer;
+ margin-left: 5px;
}
.udappClose {
display: flex;
@@ -211,7 +210,7 @@ var css = csjs`
margin-right: 5%;
font-size: 10px;
border-width: 1px;
- width: inherit;
+ width: inherit;
}
.multiHeader button {
display: inline-block;
diff --git a/src/universal-dapp-ui.js b/src/universal-dapp-ui.js
index 43894d9611..010cd85670 100644
--- a/src/universal-dapp-ui.js
+++ b/src/universal-dapp-ui.js
@@ -34,9 +34,8 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
var self = this
-
address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
- var instance = yo``
+ var instance = yo``
var context = self.udapp.context()
var shortAddress = helper.shortenAddress(address)
@@ -48,7 +47,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
if (self.udapp.removable_instances) {
var close = yo`
`
- instance.appendChild(close)
+ title.appendChild(close)
}
function remove () {
@@ -57,7 +56,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
instanceContainer.appendChild(noInstancesText)
instance.remove()
}
-
+
function toggleClass () {
$(instance).toggleClass(`${css.hidesub}`)
}