bunsenstraat
3 years ago
committed by
GitHub
commit
86189437e2
@ -1,31 +0,0 @@ |
|||||||
import { AbstractPanel } from './panel' |
|
||||||
import * as packageJson from '../../../../../package.json' |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
const yo = require('yo-yo') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.pluginsContainer { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
const profile = { |
|
||||||
name: 'hiddenPanel', |
|
||||||
displayName: 'Hidden Panel', |
|
||||||
description: '', |
|
||||||
version: packageJson.version, |
|
||||||
methods: ['addView', 'removeView'] |
|
||||||
} |
|
||||||
|
|
||||||
export class HiddenPanel extends AbstractPanel { |
|
||||||
constructor () { |
|
||||||
super(profile) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
return yo` |
|
||||||
<div class=${css.pluginsContainer}> |
|
||||||
${this.view} |
|
||||||
</div>` |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,37 @@ |
|||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
import React from 'react' |
||||||
|
import ReactDOM from 'react-dom' // eslint-disable-line
|
||||||
|
import { AbstractPanel } from './panel' |
||||||
|
import * as packageJson from '../../../../../package.json' |
||||||
|
import { RemixPluginPanel } from '@remix-ui/panel' |
||||||
|
|
||||||
|
const profile = { |
||||||
|
name: 'hiddenPanel', |
||||||
|
displayName: 'Hidden Panel', |
||||||
|
description: '', |
||||||
|
version: packageJson.version, |
||||||
|
methods: ['addView', 'removeView'] |
||||||
|
} |
||||||
|
|
||||||
|
export class HiddenPanel extends AbstractPanel { |
||||||
|
el: HTMLElement |
||||||
|
constructor () { |
||||||
|
super(profile) |
||||||
|
this.el = document.createElement('div') |
||||||
|
this.el.setAttribute('class', 'pluginsContainer') |
||||||
|
} |
||||||
|
|
||||||
|
addView (profile: any, view: any): void { |
||||||
|
super.removeView(profile) |
||||||
|
super.addView(profile, view) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
return this.el |
||||||
|
} |
||||||
|
|
||||||
|
renderComponent () { |
||||||
|
ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.el) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,38 +0,0 @@ |
|||||||
import { AbstractPanel } from './panel' |
|
||||||
import * as packageJson from '../../../../../package.json' |
|
||||||
const yo = require('yo-yo') |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.pluginsContainer { |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
overflow-y: hidden; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
const profile = { |
|
||||||
name: 'mainPanel', |
|
||||||
displayName: 'Main Panel', |
|
||||||
description: '', |
|
||||||
version: packageJson.version, |
|
||||||
methods: ['addView', 'removeView'] |
|
||||||
} |
|
||||||
|
|
||||||
export class MainPanel extends AbstractPanel { |
|
||||||
constructor () { |
|
||||||
super(profile) |
|
||||||
} |
|
||||||
|
|
||||||
focus (name) { |
|
||||||
this.emit('focusChanged', name) |
|
||||||
super.focus(name) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
return yo` |
|
||||||
<div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'> |
|
||||||
${this.view} |
|
||||||
</div>` |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,57 @@ |
|||||||
|
import React from 'react' // eslint-disable-line
|
||||||
|
import { AbstractPanel } from './panel' |
||||||
|
import ReactDOM from 'react-dom' // eslint-disable-line
|
||||||
|
import { RemixPluginPanel } from '@remix-ui/panel' |
||||||
|
import packageJson from '../../../../../package.json' |
||||||
|
|
||||||
|
const profile = { |
||||||
|
name: 'mainPanel', |
||||||
|
displayName: 'Main Panel', |
||||||
|
description: '', |
||||||
|
version: packageJson.version, |
||||||
|
methods: ['addView', 'removeView', 'showContent'] |
||||||
|
} |
||||||
|
|
||||||
|
export class MainPanel extends AbstractPanel { |
||||||
|
element: HTMLDivElement |
||||||
|
constructor (config) { |
||||||
|
super(profile) |
||||||
|
this.element = document.createElement('div') |
||||||
|
this.element.setAttribute('data-id', 'mainPanelPluginsContainer') |
||||||
|
this.element.setAttribute('style', 'height: 100%; width: 100%;') |
||||||
|
// this.config = config
|
||||||
|
} |
||||||
|
|
||||||
|
onActivation () { |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
focus (name) { |
||||||
|
this.emit('focusChanged', name) |
||||||
|
super.focus(name) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
addView (profile, view) { |
||||||
|
super.addView(profile, view) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
removeView (profile) { |
||||||
|
super.removeView(profile) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
async showContent (name) { |
||||||
|
super.showContent(name) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
return this.element |
||||||
|
} |
||||||
|
|
||||||
|
renderComponent () { |
||||||
|
ReactDOM.render(<RemixPluginPanel header={<></>} plugins={this.plugins}/>, this.element) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,111 +0,0 @@ |
|||||||
import { EventEmitter } from 'events' |
|
||||||
import { HostPlugin } from '@remixproject/engine-web' |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
const yo = require('yo-yo') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.plugins { |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
.plugItIn { |
|
||||||
display : none; |
|
||||||
height : 100%; |
|
||||||
} |
|
||||||
.plugItIn > div { |
|
||||||
overflow-y : auto; |
|
||||||
overflow-x : hidden; |
|
||||||
height : 100%; |
|
||||||
width : 100%; |
|
||||||
} |
|
||||||
.plugItIn.active { |
|
||||||
display : block; |
|
||||||
} |
|
||||||
.pluginsContainer { |
|
||||||
height : 100%; |
|
||||||
overflow-y : hidden; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
/** Abstract class used for hosting the view of a plugin */ |
|
||||||
export class AbstractPanel extends HostPlugin { |
|
||||||
constructor (profile) { |
|
||||||
super(profile) |
|
||||||
this.events = new EventEmitter() |
|
||||||
this.contents = {} |
|
||||||
this.active = undefined |
|
||||||
|
|
||||||
// View where the plugin HTMLElement leaves
|
|
||||||
this.view = yo`<div id="plugins" class="${css.plugins}"></div>` |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Add the plugin to the panel |
|
||||||
* @param {String} name the name of the plugin |
|
||||||
* @param {HTMLElement} content the HTMLContent of the plugin |
|
||||||
*/ |
|
||||||
add (view, name) { |
|
||||||
if (this.contents[name]) throw new Error(`Plugin ${name} already rendered`) |
|
||||||
view.style.height = '100%' |
|
||||||
view.style.width = '100%' |
|
||||||
view.style.border = '0' |
|
||||||
|
|
||||||
const isIframe = view.tagName === 'IFRAME' |
|
||||||
view.style.display = isIframe ? 'none' : 'block' |
|
||||||
const loading = isIframe ? yo` |
|
||||||
<div class="d-flex justify-content-center align-items-center"> |
|
||||||
<div class="spinner-border" role="status"> |
|
||||||
<span class="sr-only">Loading...</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` : ''
|
|
||||||
this.contents[name] = yo`<div class="${css.plugItIn}" >${view}${loading}</div>` |
|
||||||
|
|
||||||
if (view.tagName === 'IFRAME') { |
|
||||||
view.addEventListener('load', () => { |
|
||||||
if (this.contents[name].contains(loading)) { |
|
||||||
this.contents[name].removeChild(loading) |
|
||||||
} |
|
||||||
view.style.display = 'block' |
|
||||||
}) |
|
||||||
} |
|
||||||
this.contents[name].style.display = 'none' |
|
||||||
this.view.appendChild(this.contents[name]) |
|
||||||
} |
|
||||||
|
|
||||||
addView (profile, view) { |
|
||||||
this.add(view, profile.name) |
|
||||||
} |
|
||||||
|
|
||||||
removeView (profile) { |
|
||||||
this.remove(profile.name) |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Remove a plugin from the panel |
|
||||||
* @param {String} name The name of the plugin to remove |
|
||||||
*/ |
|
||||||
remove (name) { |
|
||||||
const el = this.contents[name] |
|
||||||
delete this.contents[name] |
|
||||||
if (el) el.parentElement.removeChild(el) |
|
||||||
if (name === this.active) this.active = undefined |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Display the content of this specific plugin |
|
||||||
* @param {String} name The name of the plugin to display the content |
|
||||||
*/ |
|
||||||
showContent (name) { |
|
||||||
if (!this.contents[name]) throw new Error(`Plugin ${name} is not yet activated`) |
|
||||||
// hiding the current view and display the `moduleName`
|
|
||||||
if (this.active) { |
|
||||||
this.contents[this.active].style.display = 'none' |
|
||||||
} |
|
||||||
this.contents[name].style.display = 'flex' |
|
||||||
this.active = name |
|
||||||
} |
|
||||||
|
|
||||||
focus (name) { |
|
||||||
this.showContent(name) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,63 @@ |
|||||||
|
import React from 'react' // eslint-disable-line
|
||||||
|
import { EventEmitter } from 'events' |
||||||
|
import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
|
||||||
|
import { PluginRecord } from 'libs/remix-ui/panel/src/lib/types' |
||||||
|
const EventManager = require('../../lib/events') |
||||||
|
|
||||||
|
export class AbstractPanel extends HostPlugin { |
||||||
|
events: EventEmitter |
||||||
|
event: any |
||||||
|
public plugins: Record<string, PluginRecord> = {} |
||||||
|
constructor (profile) { |
||||||
|
super(profile) |
||||||
|
this.events = new EventEmitter() |
||||||
|
this.event = new EventManager() |
||||||
|
} |
||||||
|
|
||||||
|
currentFocus (): string { |
||||||
|
return Object.values(this.plugins).find(plugin => { |
||||||
|
return plugin.active |
||||||
|
}).profile.name |
||||||
|
} |
||||||
|
|
||||||
|
addView (profile, view) { |
||||||
|
if (this.plugins[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`) |
||||||
|
this.plugins[profile.name] = { |
||||||
|
profile: profile, |
||||||
|
view: view, |
||||||
|
active: false, |
||||||
|
class: 'plugItIn active' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
removeView (profile) { |
||||||
|
this.emit('pluginDisabled', profile.name) |
||||||
|
this.call('menuicons', 'unlinkContent', profile) |
||||||
|
this.remove(profile.name) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove a plugin from the panel |
||||||
|
* @param {String} name The name of the plugin to remove |
||||||
|
*/ |
||||||
|
remove (name) { |
||||||
|
delete this.plugins[name] |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Display the content of this specific plugin |
||||||
|
* @param {String} name The name of the plugin to display the content |
||||||
|
*/ |
||||||
|
showContent (name) { |
||||||
|
if (!this.plugins[name]) throw new Error(`Plugin ${name} is not yet activated`) |
||||||
|
|
||||||
|
Object.values(this.plugins).forEach(plugin => { |
||||||
|
plugin.active = false |
||||||
|
}) |
||||||
|
this.plugins[name].active = true |
||||||
|
} |
||||||
|
|
||||||
|
focus (name) { |
||||||
|
this.showContent(name) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,156 +0,0 @@ |
|||||||
import { AbstractPanel } from './panel' |
|
||||||
import * as packageJson from '../../../../../package.json' |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
const yo = require('yo-yo') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.panel { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
flex: auto; |
|
||||||
} |
|
||||||
.swapitTitle { |
|
||||||
margin: 0; |
|
||||||
text-transform: uppercase; |
|
||||||
white-space: nowrap; |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
} |
|
||||||
.swapitTitle i{ |
|
||||||
padding-left: 6px; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
.swapitHeader { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
padding: 16px 24px 15px; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
.icons i { |
|
||||||
height: 80%; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.pluginsContainer { |
|
||||||
height: 100%; |
|
||||||
overflow-y: auto; |
|
||||||
} |
|
||||||
.titleInfo { |
|
||||||
padding-left: 10px; |
|
||||||
} |
|
||||||
.versionBadge { |
|
||||||
background-color: var(--light); |
|
||||||
padding: 0 7px; |
|
||||||
font-weight: bolder; |
|
||||||
margin-left: 5px; |
|
||||||
text-transform: lowercase; |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
const sidePanel = { |
|
||||||
name: 'sidePanel', |
|
||||||
displayName: 'Side Panel', |
|
||||||
description: '', |
|
||||||
version: packageJson.version, |
|
||||||
methods: ['addView', 'removeView'] |
|
||||||
} |
|
||||||
|
|
||||||
// TODO merge with vertical-icons.js
|
|
||||||
export class SidePanel extends AbstractPanel { |
|
||||||
constructor (appManager, verticalIcons) { |
|
||||||
super(sidePanel) |
|
||||||
this.appManager = appManager |
|
||||||
this.header = yo`<header></header>` |
|
||||||
this.renderHeader() |
|
||||||
this.verticalIcons = verticalIcons |
|
||||||
|
|
||||||
// Toggle content
|
|
||||||
verticalIcons.events.on('toggleContent', (name) => { |
|
||||||
if (!this.contents[name]) return |
|
||||||
if (this.active === name) { |
|
||||||
// TODO: Only keep `this.emit` (issue#2210)
|
|
||||||
this.emit('toggle', name) |
|
||||||
this.events.emit('toggle', name) |
|
||||||
return |
|
||||||
} |
|
||||||
this.showContent(name) |
|
||||||
// TODO: Only keep `this.emit` (issue#2210)
|
|
||||||
this.emit('showing', name) |
|
||||||
this.events.emit('showing', name) |
|
||||||
}) |
|
||||||
// Force opening
|
|
||||||
verticalIcons.events.on('showContent', (name) => { |
|
||||||
if (!this.contents[name]) return |
|
||||||
this.showContent(name) |
|
||||||
// TODO: Only keep `this.emit` (issue#2210)
|
|
||||||
this.emit('showing', name) |
|
||||||
this.events.emit('showing', name) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
focus (name) { |
|
||||||
this.emit('focusChanged', name) |
|
||||||
super.focus(name) |
|
||||||
} |
|
||||||
|
|
||||||
removeView (profile) { |
|
||||||
super.removeView(profile) |
|
||||||
this.emit('pluginDisabled', profile.name) |
|
||||||
this.verticalIcons.unlinkContent(profile) |
|
||||||
} |
|
||||||
|
|
||||||
addView (profile, view) { |
|
||||||
super.addView(profile, view) |
|
||||||
this.verticalIcons.linkContent(profile) |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Display content and update the header |
|
||||||
* @param {String} name The name of the plugin to display |
|
||||||
*/ |
|
||||||
async showContent (name) { |
|
||||||
super.showContent(name) |
|
||||||
this.renderHeader() |
|
||||||
this.emit('focusChanged', name) |
|
||||||
} |
|
||||||
|
|
||||||
/** The header of the side panel */ |
|
||||||
async renderHeader () { |
|
||||||
let name = ' - ' |
|
||||||
let docLink = '' |
|
||||||
let versionWarning |
|
||||||
if (this.active) { |
|
||||||
const profile = await this.appManager.getProfile(this.active) |
|
||||||
name = profile.displayName ? profile.displayName : profile.name |
|
||||||
docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : '' |
|
||||||
if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) { |
|
||||||
versionWarning = yo`<small title="Version Alpha" class="badge-light ${css.versionBadge}">alpha</small>` |
|
||||||
} |
|
||||||
// Beta
|
|
||||||
if (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) { |
|
||||||
versionWarning = yo`<small title="Version Beta" class="badge-light ${css.versionBadge}">beta</small>` |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const header = yo` |
|
||||||
<header class="${css.swapitHeader}"> |
|
||||||
<h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6> |
|
||||||
${docLink} |
|
||||||
${versionWarning} |
|
||||||
</header> |
|
||||||
` |
|
||||||
yo.update(this.header, header) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
return yo` |
|
||||||
<section class="${css.panel} plugin-manager"> |
|
||||||
${this.header} |
|
||||||
<div class="${css.pluginsContainer}"> |
|
||||||
${this.view} |
|
||||||
</div> |
|
||||||
</section>` |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,95 @@ |
|||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
import React from 'react' |
||||||
|
import ReactDOM from 'react-dom' |
||||||
|
import { AbstractPanel } from './panel' |
||||||
|
import { RemixPluginPanel } from '@remix-ui/panel' |
||||||
|
import packageJson from '../../../../../package.json' |
||||||
|
import { RemixAppManager } from '../../remixAppManager' |
||||||
|
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel' |
||||||
|
import RemixUIPanelHeader from 'libs/remix-ui/panel/src/lib/plugins/panel-header' |
||||||
|
// const csjs = require('csjs-inject')
|
||||||
|
|
||||||
|
const sidePanel = { |
||||||
|
name: 'sidePanel', |
||||||
|
displayName: 'Side Panel', |
||||||
|
description: '', |
||||||
|
version: packageJson.version, |
||||||
|
methods: ['addView', 'removeView'] |
||||||
|
} |
||||||
|
|
||||||
|
// TODO merge with vertical-icons.js
|
||||||
|
export class SidePanel extends AbstractPanel { |
||||||
|
appManager: RemixAppManager |
||||||
|
sideelement: any |
||||||
|
verticalIcons: VerticalIcons; |
||||||
|
constructor (appManager: RemixAppManager, verticalIcons: VerticalIcons) { |
||||||
|
super(sidePanel) |
||||||
|
this.appManager = appManager |
||||||
|
this.sideelement = document.createElement('section') |
||||||
|
this.sideelement.setAttribute('class', 'panel plugin-manager') |
||||||
|
this.verticalIcons = verticalIcons |
||||||
|
|
||||||
|
// Toggle content
|
||||||
|
verticalIcons.events.on('toggleContent', (name) => { |
||||||
|
if (!this.plugins[name]) return |
||||||
|
if (this.plugins[name].active) { |
||||||
|
// TODO: Only keep `this.emit` (issue#2210)
|
||||||
|
this.emit('toggle', name) |
||||||
|
this.events.emit('toggle', name) |
||||||
|
return |
||||||
|
} |
||||||
|
this.showContent(name) |
||||||
|
// TODO: Only keep `this.emit` (issue#2210)
|
||||||
|
this.emit('showing', name) |
||||||
|
this.events.emit('showing', name) |
||||||
|
}) |
||||||
|
// Force opening
|
||||||
|
verticalIcons.events.on('showContent', (name) => { |
||||||
|
if (!this.plugins[name]) return |
||||||
|
this.showContent(name) |
||||||
|
// TODO: Only keep `this.emit` (issue#2210)
|
||||||
|
this.emit('showing', name) |
||||||
|
this.events.emit('showing', name) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
onActivation () { |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
focus (name) { |
||||||
|
this.emit('focusChanged', name) |
||||||
|
super.focus(name) |
||||||
|
} |
||||||
|
|
||||||
|
removeView (profile) { |
||||||
|
super.removeView(profile) |
||||||
|
this.emit('pluginDisabled', profile.name) |
||||||
|
this.call('menuicons', 'unlinkContent', profile) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
addView (profile, view) { |
||||||
|
super.addView(profile, view) |
||||||
|
this.verticalIcons.linkContent(profile) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Display content and update the header |
||||||
|
* @param {String} name The name of the plugin to display |
||||||
|
*/ |
||||||
|
async showContent (name) { |
||||||
|
super.showContent(name) |
||||||
|
this.emit('focusChanged', name) |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
return this.sideelement |
||||||
|
} |
||||||
|
|
||||||
|
renderComponent () { |
||||||
|
ReactDOM.render(<RemixPluginPanel header={<RemixUIPanelHeader plugins={this.plugins}></RemixUIPanelHeader>} plugins={this.plugins}/>, this.sideelement) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,194 +0,0 @@ |
|||||||
'use strict' |
|
||||||
import { sourceMappingDecoder } from '@remix-project/remix-debug' |
|
||||||
import Registry from '../state/registry' |
|
||||||
const yo = require('yo-yo') |
|
||||||
|
|
||||||
const css = require('./styles/contextView-styles') |
|
||||||
|
|
||||||
/* |
|
||||||
Display information about the current focused code: |
|
||||||
- if it's a reference, display information about the declaration |
|
||||||
- jump to the declaration |
|
||||||
- number of references |
|
||||||
- rename declaration/references |
|
||||||
*/ |
|
||||||
class ContextView { |
|
||||||
constructor (opts) { |
|
||||||
this._components = {} |
|
||||||
this._components.registry = Registry.getInstance() |
|
||||||
this.contextualListener = opts.contextualListener |
|
||||||
this.editor = opts.editor |
|
||||||
this._deps = { |
|
||||||
compilersArtefacts: this._components.registry.get('compilersartefacts').api, |
|
||||||
offsetToLineColumnConverter: this._components.registry.get('offsettolinecolumnconverter').api, |
|
||||||
config: this._components.registry.get('config').api, |
|
||||||
fileManager: this._components.registry.get('filemanager').api |
|
||||||
} |
|
||||||
this._view = null |
|
||||||
this._nodes = null |
|
||||||
this._current = null |
|
||||||
this.sourceMappingDecoder = sourceMappingDecoder |
|
||||||
this.previousElement = null |
|
||||||
this.contextualListener.event.register('contextChanged', nodes => { |
|
||||||
this.show() |
|
||||||
this._nodes = nodes |
|
||||||
this.update() |
|
||||||
}) |
|
||||||
this.contextualListener.event.register('stopHighlighting', () => { |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
const view = yo` |
|
||||||
<div class="${css.contextview} ${css.contextviewcontainer} bg-light text-dark border-0"> |
|
||||||
<div class=${css.container}> |
|
||||||
${this._renderTarget()} |
|
||||||
</div> |
|
||||||
</div>` |
|
||||||
if (!this._view) { |
|
||||||
this._view = view |
|
||||||
} |
|
||||||
return view |
|
||||||
} |
|
||||||
|
|
||||||
hide () { |
|
||||||
if (this._view) { |
|
||||||
this._view.style.display = 'none' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
show () { |
|
||||||
if (this._view) { |
|
||||||
this._view.style.display = 'block' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
update () { |
|
||||||
if (this._view) { |
|
||||||
yo.update(this._view, this.render()) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
_renderTarget () { |
|
||||||
let last |
|
||||||
const previous = this._current |
|
||||||
if (this._nodes && this._nodes.length) { |
|
||||||
last = this._nodes[this._nodes.length - 1] |
|
||||||
if (isDefinition(last)) { |
|
||||||
this._current = last |
|
||||||
} else { |
|
||||||
const target = this.contextualListener.declarationOf(last) |
|
||||||
if (target) { |
|
||||||
this._current = target |
|
||||||
} else { |
|
||||||
this._current = null |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
if (!this._current || !previous || previous.id !== this._current.id || (this.previousElement && !this.previousElement.children.length)) { |
|
||||||
this.previousElement = this._render(this._current, last) |
|
||||||
} |
|
||||||
return this.previousElement |
|
||||||
} |
|
||||||
|
|
||||||
_jumpToInternal (position) { |
|
||||||
const jumpToLine = (lineColumn) => { |
|
||||||
if (lineColumn.start && lineColumn.start.line && lineColumn.start.column) { |
|
||||||
this.editor.gotoLine(lineColumn.start.line, lineColumn.end.column + 1) |
|
||||||
} |
|
||||||
} |
|
||||||
const lastCompilationResult = this._deps.compilersArtefacts.__last |
|
||||||
if (lastCompilationResult && lastCompilationResult.languageversion.indexOf('soljson') === 0 && lastCompilationResult.data) { |
|
||||||
const lineColumn = this._deps.offsetToLineColumnConverter.offsetToLineColumn( |
|
||||||
position, |
|
||||||
position.file, |
|
||||||
lastCompilationResult.getSourceCode().sources, |
|
||||||
lastCompilationResult.getAsts()) |
|
||||||
const filename = lastCompilationResult.getSourceName(position.file) |
|
||||||
// TODO: refactor with rendererAPI.errorClick
|
|
||||||
if (filename !== this._deps.config.get('currentFile')) { |
|
||||||
const provider = this._deps.fileManager.fileProviderOf(filename) |
|
||||||
if (provider) { |
|
||||||
provider.exists(filename).then(exist => { |
|
||||||
this._deps.fileManager.open(filename) |
|
||||||
jumpToLine(lineColumn) |
|
||||||
}).catch(error => { |
|
||||||
if (error) return console.log(error) |
|
||||||
}) |
|
||||||
} |
|
||||||
} else { |
|
||||||
jumpToLine(lineColumn) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
_render (node, nodeAtCursorPosition) { |
|
||||||
if (!node) return yo`<div></div>` |
|
||||||
let references = this.contextualListener.referencesOf(node) |
|
||||||
const type = node.typeDescriptions && node.typeDescriptions.typeString ? node.typeDescriptions.typeString : node.nodeType |
|
||||||
references = `${references ? references.length : '0'} reference(s)` |
|
||||||
|
|
||||||
let ref = 0 |
|
||||||
const nodes = this.contextualListener.getActiveHighlights() |
|
||||||
for (const k in nodes) { |
|
||||||
if (nodeAtCursorPosition.id === nodes[k].nodeId) { |
|
||||||
ref = k |
|
||||||
break |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// JUMP BETWEEN REFERENCES
|
|
||||||
const jump = (e) => { |
|
||||||
e.target.dataset.action === 'next' ? ref++ : ref-- |
|
||||||
if (ref < 0) ref = nodes.length - 1 |
|
||||||
if (ref >= nodes.length) ref = 0 |
|
||||||
this._jumpToInternal(nodes[ref].position) |
|
||||||
} |
|
||||||
|
|
||||||
const jumpTo = () => { |
|
||||||
if (node && node.src) { |
|
||||||
const position = this.sourceMappingDecoder.decode(node.src) |
|
||||||
if (position) { |
|
||||||
this._jumpToInternal(position) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const showGasEstimation = () => { |
|
||||||
if (node.nodeType === 'FunctionDefinition') { |
|
||||||
const result = this.contextualListener.gasEstimation(node) |
|
||||||
const executionCost = ' Execution cost: ' + result.executionCost + ' gas' |
|
||||||
const codeDepositCost = 'Code deposit cost: ' + result.codeDepositCost + ' gas' |
|
||||||
const estimatedGas = result.codeDepositCost ? `${codeDepositCost}, ${executionCost}` : `${executionCost}` |
|
||||||
return yo` |
|
||||||
<div class=${css.gasEstimation}> |
|
||||||
<i class="fas fa-gas-pump ${css.gasStationIcon}" title='Gas estimation'></i> |
|
||||||
<span>${estimatedGas}</span> |
|
||||||
</div> |
|
||||||
` |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return yo` |
|
||||||
<div class=${css.line}>${showGasEstimation()} |
|
||||||
<div title=${type} class=${css.type}>${type}</div> |
|
||||||
<div title=${node.name} class=${css.name}>${node.name}</div> |
|
||||||
<i class="fas fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i> |
|
||||||
<span class=${css.referencesnb}>${references}</span> |
|
||||||
<i data-action='previous' class="fas fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i> |
|
||||||
<i data-action='next' class="fas fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i> |
|
||||||
</div> |
|
||||||
` |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function isDefinition (node) { |
|
||||||
return node.nodeType === 'ContractDefinition' || |
|
||||||
node.nodeType === 'FunctionDefinition' || |
|
||||||
node.nodeType === 'ModifierDefinition' || |
|
||||||
node.nodeType === 'VariableDeclaration' || |
|
||||||
node.nodeType === 'StructDefinition' || |
|
||||||
node.nodeType === 'EventDefinition' |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = ContextView |
|
||||||
@ -0,0 +1,94 @@ |
|||||||
|
import { Plugin } from '@remixproject/engine' |
||||||
|
import { Profile } from '@remixproject/plugin-utils' |
||||||
|
import { EventEmitter } from 'events' |
||||||
|
import QueryParams from '../../lib/query-params' |
||||||
|
|
||||||
|
const profile: Profile = { |
||||||
|
name: 'layout', |
||||||
|
description: 'layout', |
||||||
|
methods: ['minimize'] |
||||||
|
} |
||||||
|
|
||||||
|
interface panelState { |
||||||
|
active: boolean |
||||||
|
plugin: Plugin |
||||||
|
minimized: boolean |
||||||
|
} |
||||||
|
interface panels { |
||||||
|
tabs: panelState |
||||||
|
editor: panelState |
||||||
|
main: panelState |
||||||
|
terminal: panelState |
||||||
|
} |
||||||
|
|
||||||
|
export class Layout extends Plugin { |
||||||
|
event: any |
||||||
|
panels: panels |
||||||
|
constructor () { |
||||||
|
super(profile) |
||||||
|
this.event = new EventEmitter() |
||||||
|
} |
||||||
|
|
||||||
|
async onActivation (): Promise<void> { |
||||||
|
this.on('fileManager', 'currentFileChanged', () => { |
||||||
|
this.panels.editor.active = true |
||||||
|
this.panels.main.active = false |
||||||
|
this.event.emit('change', null) |
||||||
|
}) |
||||||
|
this.on('tabs', 'openFile', () => { |
||||||
|
this.panels.editor.active = true |
||||||
|
this.panels.main.active = false |
||||||
|
this.event.emit('change', null) |
||||||
|
}) |
||||||
|
this.on('tabs', 'switchApp', (name: string) => { |
||||||
|
this.call('mainPanel', 'showContent', name) |
||||||
|
this.panels.editor.active = false |
||||||
|
this.panels.main.active = true |
||||||
|
this.event.emit('change', null) |
||||||
|
}) |
||||||
|
this.on('tabs', 'closeApp', (name: string) => { |
||||||
|
this.panels.editor.active = true |
||||||
|
this.panels.main.active = false |
||||||
|
this.event.emit('change', null) |
||||||
|
}) |
||||||
|
this.on('tabs', 'tabCountChanged', async count => { |
||||||
|
if (!count) await this.call('manager', 'activatePlugin', 'home') |
||||||
|
}) |
||||||
|
this.on('manager', 'activate', (profile: Profile) => { |
||||||
|
switch (profile.name) { |
||||||
|
case 'filePanel': |
||||||
|
this.call('menuicons', 'select', 'filePanel') |
||||||
|
break |
||||||
|
} |
||||||
|
}) |
||||||
|
document.addEventListener('keypress', e => { |
||||||
|
if (e.shiftKey && e.ctrlKey) { |
||||||
|
if (e.code === 'KeyF') { |
||||||
|
// Ctrl+Shift+F
|
||||||
|
this.call('menuicons', 'select', 'filePanel') |
||||||
|
} else if (e.code === 'KeyA') { |
||||||
|
// Ctrl+Shift+A
|
||||||
|
this.call('menuicons', 'select', 'pluginManager') |
||||||
|
} else if (e.code === 'KeyS') { |
||||||
|
// Ctrl+Shift+S
|
||||||
|
this.call('menuicons', 'select', 'settings') |
||||||
|
} |
||||||
|
e.preventDefault() |
||||||
|
} |
||||||
|
}) |
||||||
|
const queryParams = new QueryParams() |
||||||
|
const params = queryParams.get() |
||||||
|
if (params.minimizeterminal || params.embed) { |
||||||
|
this.panels.terminal.minimized = true |
||||||
|
this.event.emit('change', null) |
||||||
|
} |
||||||
|
if (params.minimizesidepanel || params.embed) { |
||||||
|
this.event.emit('minimizesidepanel') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
minimize (name: string, minimized:boolean): void { |
||||||
|
this.panels[name].minimized = minimized |
||||||
|
this.event.emit('change', null) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,204 +0,0 @@ |
|||||||
import Registry from '../state/registry' |
|
||||||
|
|
||||||
var yo = require('yo-yo') |
|
||||||
var EventManager = require('../../lib/events') |
|
||||||
|
|
||||||
var { TabProxy } = require('./tab-proxy.js') |
|
||||||
|
|
||||||
var csjs = require('csjs-inject') |
|
||||||
|
|
||||||
var css = csjs` |
|
||||||
.mainview { |
|
||||||
display : flex; |
|
||||||
flex-direction : column; |
|
||||||
height : 100%; |
|
||||||
width : 100%; |
|
||||||
}
|
|
||||||
` |
|
||||||
|
|
||||||
// @todo(#650) Extract this into two classes: MainPanel (TabsProxy + Iframe/Editor) & BottomPanel (Terminal)
|
|
||||||
export class MainView { |
|
||||||
constructor (contextualListener, editor, mainPanel, fileManager, appManager, terminal) { |
|
||||||
var self = this |
|
||||||
self.event = new EventManager() |
|
||||||
self._view = {} |
|
||||||
self._components = {} |
|
||||||
self._components.registry = Registry.getInstance() |
|
||||||
self.contextualListener = contextualListener |
|
||||||
self.editor = editor |
|
||||||
self.fileManager = fileManager |
|
||||||
self.mainPanel = mainPanel |
|
||||||
self.txListener = Registry.getInstance().get('txlistener').api |
|
||||||
self._components.terminal = terminal |
|
||||||
this.appManager = appManager |
|
||||||
this.init() |
|
||||||
} |
|
||||||
|
|
||||||
showApp (name) { |
|
||||||
this.fileManager.unselectCurrentFile() |
|
||||||
this.mainPanel.showContent(name) |
|
||||||
this._view.editor.style.display = 'none' |
|
||||||
this._view.mainPanel.style.display = 'block' |
|
||||||
} |
|
||||||
|
|
||||||
getAppPanel () { |
|
||||||
return this.mainPanel |
|
||||||
} |
|
||||||
|
|
||||||
init () { |
|
||||||
var self = this |
|
||||||
self._deps = { |
|
||||||
config: self._components.registry.get('config').api, |
|
||||||
fileManager: self._components.registry.get('filemanager').api |
|
||||||
} |
|
||||||
|
|
||||||
self.tabProxy = new TabProxy(self.fileManager, self.editor) |
|
||||||
/* |
|
||||||
We listen here on event from the tab component to display / hide the editor and mainpanel |
|
||||||
depending on the content that should be displayed |
|
||||||
*/ |
|
||||||
self.fileManager.events.on('currentFileChanged', (file) => { |
|
||||||
// we check upstream for "fileChanged"
|
|
||||||
self._view.editor.style.display = 'block' |
|
||||||
self._view.mainPanel.style.display = 'none' |
|
||||||
}) |
|
||||||
self.tabProxy.event.on('openFile', (file) => { |
|
||||||
self._view.editor.style.display = 'block' |
|
||||||
self._view.mainPanel.style.display = 'none' |
|
||||||
}) |
|
||||||
self.tabProxy.event.on('closeFile', (file) => { |
|
||||||
}) |
|
||||||
self.tabProxy.event.on('switchApp', self.showApp.bind(self)) |
|
||||||
self.tabProxy.event.on('closeApp', (name) => { |
|
||||||
self._view.editor.style.display = 'block' |
|
||||||
self._view.mainPanel.style.display = 'none' |
|
||||||
}) |
|
||||||
self.tabProxy.event.on('tabCountChanged', (count) => { |
|
||||||
if (!count) this.editor.displayEmptyReadOnlySession() |
|
||||||
}) |
|
||||||
self.data = { |
|
||||||
_layout: { |
|
||||||
top: { |
|
||||||
offset: self._terminalTopOffset(), |
|
||||||
show: true |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta)) |
|
||||||
if (self.txListener) { |
|
||||||
self._components.terminal.event.register('listenOnNetWork', (listenOnNetWork) => { |
|
||||||
self.txListener.setListenOnNetwork(listenOnNetWork) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
_terminalTopOffset () { |
|
||||||
return this._deps.config.get('terminal-top-offset') || 150 |
|
||||||
} |
|
||||||
|
|
||||||
_adjustLayout (direction, delta) { |
|
||||||
var limitUp = 0 |
|
||||||
var limitDown = 32 |
|
||||||
var containerHeight = window.innerHeight - limitUp // - menu bar containerHeight
|
|
||||||
var self = this |
|
||||||
var layout = self.data._layout[direction] |
|
||||||
if (layout) { |
|
||||||
if (delta === undefined) { |
|
||||||
layout.show = !layout.show |
|
||||||
if (layout.show) delta = layout.offset |
|
||||||
else delta = 0 |
|
||||||
} else { |
|
||||||
layout.show = true |
|
||||||
self._deps.config.set(`terminal-${direction}-offset`, delta) |
|
||||||
layout.offset = delta |
|
||||||
} |
|
||||||
} |
|
||||||
var tmp = delta - limitDown |
|
||||||
delta = tmp > 0 ? tmp : 0 |
|
||||||
if (direction === 'top') { |
|
||||||
var mainPanelHeight = containerHeight - delta |
|
||||||
mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight |
|
||||||
self._view.editor.style.height = `${mainPanelHeight}px` |
|
||||||
self._view.mainPanel.style.height = `${mainPanelHeight}px` |
|
||||||
self._view.terminal.style.height = `${delta}px` // - menu bar height
|
|
||||||
self.editor.resize((document.querySelector('#editorWrap') || {}).checked) |
|
||||||
self._components.terminal.scroll2bottom() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
minimizeTerminal () { |
|
||||||
this._adjustLayout('top') |
|
||||||
} |
|
||||||
|
|
||||||
showTerminal (offset) { |
|
||||||
this._adjustLayout('top', offset || this._terminalTopOffset()) |
|
||||||
} |
|
||||||
|
|
||||||
getTerminal () { |
|
||||||
return this._components.terminal |
|
||||||
} |
|
||||||
|
|
||||||
getEditor () { |
|
||||||
var self = this |
|
||||||
return self.editor |
|
||||||
} |
|
||||||
|
|
||||||
refresh () { |
|
||||||
var self = this |
|
||||||
self._view.tabs.onmouseenter() |
|
||||||
} |
|
||||||
|
|
||||||
log (data = {}) { |
|
||||||
var self = this |
|
||||||
var command = self._components.terminal.commands[data.type] |
|
||||||
if (typeof command === 'function') command(data.value) |
|
||||||
} |
|
||||||
|
|
||||||
logMessage (msg) { |
|
||||||
var self = this |
|
||||||
self.log({ type: 'log', value: msg }) |
|
||||||
} |
|
||||||
|
|
||||||
logHtmlMessage (msg) { |
|
||||||
var self = this |
|
||||||
self.log({ type: 'html', value: msg }) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
var self = this |
|
||||||
if (self._view.mainview) return self._view.mainview |
|
||||||
self._view.editor = self.editor.render() |
|
||||||
self._view.editor.style.display = 'none' |
|
||||||
self._view.mainPanel = self.mainPanel.render() |
|
||||||
self._view.terminal = self._components.terminal.render() |
|
||||||
|
|
||||||
self._view.mainview = yo` |
|
||||||
<div class=${css.mainview}> |
|
||||||
${self.tabProxy.renderTabsbar()} |
|
||||||
${self._view.editor} |
|
||||||
${self._view.mainPanel} |
|
||||||
<div class="${css.contextview} contextview"></div> |
|
||||||
${self._view.terminal} |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
// INIT
|
|
||||||
self._adjustLayout('top', self.data._layout.top.offset) |
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => { |
|
||||||
if (e.altKey && e.keyCode === 84) self.tabProxy.switchNextTab() // alt + t
|
|
||||||
}) |
|
||||||
|
|
||||||
return self._view.mainview |
|
||||||
} |
|
||||||
|
|
||||||
registerCommand (name, command, opts) { |
|
||||||
var self = this |
|
||||||
return self._components.terminal.registerCommand(name, command, opts) |
|
||||||
} |
|
||||||
|
|
||||||
updateTerminalFilter (filter) { |
|
||||||
this._components.terminal.updateJournal(filter) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,53 +0,0 @@ |
|||||||
import { Plugin } from '@remixproject/engine' |
|
||||||
import { Profile } from '@remixproject/plugin-utils' |
|
||||||
import { AlertModal } from 'libs/remix-ui/app/src/lib/remix-app/interface' |
|
||||||
import { ModalTypes } from 'libs/remix-ui/app/src/lib/remix-app/types' |
|
||||||
import { AppModal } from '../../../../../libs/remix-ui/app/src' |
|
||||||
|
|
||||||
const profile:Profile = { |
|
||||||
name: 'testerplugin', |
|
||||||
displayName: 'testerplugin', |
|
||||||
description: 'testerplugin', |
|
||||||
methods: [] |
|
||||||
} |
|
||||||
|
|
||||||
export class ModalPluginTester extends Plugin { |
|
||||||
constructor () { |
|
||||||
super(profile) |
|
||||||
} |
|
||||||
|
|
||||||
handleMessage (message: any): void { |
|
||||||
console.log(message) |
|
||||||
} |
|
||||||
|
|
||||||
onActivation (): void { |
|
||||||
// just a modal
|
|
||||||
let mod:AppModal = { |
|
||||||
id: 'modal1', |
|
||||||
title: 'test', |
|
||||||
message: 'test', |
|
||||||
okFn: this.handleMessage, |
|
||||||
okLabel: 'yes', |
|
||||||
cancelFn: null, |
|
||||||
cancelLabel: 'no' |
|
||||||
} |
|
||||||
// this.call('modal', 'modal', mod)
|
|
||||||
|
|
||||||
// modal with callback
|
|
||||||
mod = { ...mod, message: 'gist url', modalType: ModalTypes.prompt, defaultValue: 'prompting' } |
|
||||||
// this.call('modal', 'modal', mod)
|
|
||||||
|
|
||||||
// modal with password
|
|
||||||
mod = { ...mod, message: 'enter password to give me eth', modalType: ModalTypes.password, defaultValue: 'pass' } |
|
||||||
// this.call('modal', 'modal', mod)
|
|
||||||
|
|
||||||
const al:AlertModal = { |
|
||||||
id: 'myalert', |
|
||||||
message: 'alert message' |
|
||||||
} |
|
||||||
// this.call('modal', 'alert', al)
|
|
||||||
|
|
||||||
// set toaster
|
|
||||||
// this.call('modal', 'toast', 'toast message')
|
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,82 +0,0 @@ |
|||||||
import * as packageJson from '../../../../../package.json' |
|
||||||
import { Plugin } from '@remixproject/engine' |
|
||||||
import Web3 from 'web3' |
|
||||||
const yo = require('yo-yo') |
|
||||||
const modalDialogCustom = require('../ui/modal-dialog-custom') |
|
||||||
|
|
||||||
const profile = { |
|
||||||
name: 'hardhat-provider', |
|
||||||
displayName: 'Hardhat Provider', |
|
||||||
kind: 'provider', |
|
||||||
description: 'Hardhat provider', |
|
||||||
methods: ['sendAsync'], |
|
||||||
version: packageJson.version |
|
||||||
} |
|
||||||
|
|
||||||
export default class HardhatProvider extends Plugin { |
|
||||||
constructor (blockchain) { |
|
||||||
super(profile) |
|
||||||
this.provider = null |
|
||||||
this.blocked = false // used to block any call when trying to recover after a failed connection.
|
|
||||||
this.blockchain = blockchain |
|
||||||
} |
|
||||||
|
|
||||||
onDeactivation () { |
|
||||||
this.provider = null |
|
||||||
this.blocked = false |
|
||||||
} |
|
||||||
|
|
||||||
hardhatProviderDialogBody () { |
|
||||||
return yo` |
|
||||||
<div class=""> |
|
||||||
Note: To run Hardhat network node on your system, go to hardhat project folder and run command: |
|
||||||
<div class="border p-1">npx hardhat node</div> |
|
||||||
<br> |
|
||||||
For more info, visit: <a href="https://hardhat.org/getting-started/#connecting-a-wallet-or-dapp-to-hardhat-network" target="_blank">Hardhat Documentation</a> |
|
||||||
<br><br> |
|
||||||
Hardhat JSON-RPC Endpoint |
|
||||||
</div> |
|
||||||
` |
|
||||||
} |
|
||||||
|
|
||||||
sendAsync (data) { |
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
if (this.blocked) return reject(new Error('provider unable to connect')) |
|
||||||
// If provider is not set, allow to open modal only when provider is trying to connect
|
|
||||||
if (!this.provider) { |
|
||||||
modalDialogCustom.prompt('Hardhat node request', this.hardhatProviderDialogBody(), 'http://127.0.0.1:8545', (target) => { |
|
||||||
this.provider = new Web3.providers.HttpProvider(target) |
|
||||||
this.sendAsyncInternal(data, resolve, reject) |
|
||||||
}, () => { |
|
||||||
this.sendAsyncInternal(data, resolve, reject) |
|
||||||
}) |
|
||||||
} else { |
|
||||||
this.sendAsyncInternal(data, resolve, reject) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
sendAsyncInternal (data, resolve, reject) { |
|
||||||
if (this.provider) { |
|
||||||
// Check the case where current environment is VM on UI and it still sends RPC requests
|
|
||||||
// This will be displayed on UI tooltip as 'cannot get account list: Environment Updated !!'
|
|
||||||
if (this.blockchain.getProvider() !== 'Hardhat Provider' && data.method !== 'net_listening') return reject(new Error('Environment Updated !!')) |
|
||||||
this.provider[this.provider.sendAsync ? 'sendAsync' : 'send'](data, async (error, message) => { |
|
||||||
if (error) { |
|
||||||
this.blocked = true |
|
||||||
modalDialogCustom.alert('Hardhat Provider', `Error while connecting to the hardhat provider: ${error.message}`) |
|
||||||
await this.call('udapp', 'setEnvironmentMode', { context: 'vm', fork: 'london' }) |
|
||||||
this.provider = null |
|
||||||
setTimeout(_ => { this.blocked = false }, 1000) // we wait 1 second for letting remix to switch to vm
|
|
||||||
return reject(error) |
|
||||||
} |
|
||||||
resolve(message) |
|
||||||
}) |
|
||||||
} else { |
|
||||||
const result = data.method === 'net_listening' ? 'canceled' : [] |
|
||||||
resolve({ jsonrpc: '2.0', result: result, id: data.id }) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = HardhatProvider |
|
||||||
@ -0,0 +1,128 @@ |
|||||||
|
import * as packageJson from '../../../../../package.json' |
||||||
|
import { Plugin } from '@remixproject/engine' |
||||||
|
import { AppModal, AlertModal, ModalTypes } from '@remix-ui/app' |
||||||
|
import React from 'react' // eslint-disable-line
|
||||||
|
import { Blockchain } from '../../blockchain/blockchain' |
||||||
|
import { ethers } from 'ethers' |
||||||
|
|
||||||
|
const profile = { |
||||||
|
name: 'hardhat-provider', |
||||||
|
displayName: 'Hardhat Provider', |
||||||
|
kind: 'provider', |
||||||
|
description: 'Hardhat provider', |
||||||
|
methods: ['sendAsync'], |
||||||
|
version: packageJson.version |
||||||
|
} |
||||||
|
|
||||||
|
type JsonDataRequest = { |
||||||
|
id: number, |
||||||
|
jsonrpc: string // version
|
||||||
|
method: string, |
||||||
|
params: Array<any>, |
||||||
|
} |
||||||
|
|
||||||
|
type JsonDataResult = { |
||||||
|
id: number, |
||||||
|
jsonrpc: string // version
|
||||||
|
result: any |
||||||
|
} |
||||||
|
|
||||||
|
type RejectRequest = (error: Error) => void |
||||||
|
type SuccessRequest = (data: JsonDataResult) => void |
||||||
|
|
||||||
|
export class HardhatProvider extends Plugin { |
||||||
|
provider: ethers.providers.JsonRpcProvider |
||||||
|
blocked: boolean |
||||||
|
blockchain: Blockchain |
||||||
|
target: String |
||||||
|
|
||||||
|
constructor (blockchain) { |
||||||
|
super(profile) |
||||||
|
this.provider = null |
||||||
|
this.blocked = false // used to block any call when trying to recover after a failed connection.
|
||||||
|
this.blockchain = blockchain |
||||||
|
} |
||||||
|
|
||||||
|
onDeactivation () { |
||||||
|
this.provider = null |
||||||
|
this.blocked = false |
||||||
|
} |
||||||
|
|
||||||
|
hardhatProviderDialogBody (): JSX.Element { |
||||||
|
return (<div> Note: To run Hardhat network node on your system, go to hardhat project folder and run command: |
||||||
|
<div className="border p-1">npx hardhat node</div>
|
||||||
|
For more info, visit: <a href="https://hardhat.org/getting-started/#connecting-a-wallet-or-dapp-to-hardhat-network" target="_blank">Hardhat Documentation</a>
|
||||||
|
Hardhat JSON-RPC Endpoint |
||||||
|
</div>) |
||||||
|
} |
||||||
|
|
||||||
|
sendAsync (data: JsonDataRequest): Promise<any> { |
||||||
|
return new Promise(async (resolve, reject) => { |
||||||
|
if (this.blocked) return reject(new Error('provider unable to connect')) |
||||||
|
// If provider is not set, allow to open modal only when provider is trying to connect
|
||||||
|
if (!this.provider) { |
||||||
|
let value: string |
||||||
|
try { |
||||||
|
value = await ((): Promise<string> => { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
const modalContent: AppModal = { |
||||||
|
id: 'harrhatprovider', |
||||||
|
title: 'Hardhat node request', |
||||||
|
message: this.hardhatProviderDialogBody(), |
||||||
|
modalType: ModalTypes.prompt, |
||||||
|
okLabel: 'OK', |
||||||
|
cancelLabel: 'Cancel', |
||||||
|
okFn: (value: string) => { |
||||||
|
setTimeout(() => resolve(value), 0) |
||||||
|
}, |
||||||
|
cancelFn: () => { |
||||||
|
setTimeout(() => reject(new Error('Canceled')), 0) |
||||||
|
}, |
||||||
|
hideFn: () => { |
||||||
|
setTimeout(() => reject(new Error('Hide')), 0) |
||||||
|
}, |
||||||
|
defaultValue: 'http://127.0.0.1:8545' |
||||||
|
} |
||||||
|
this.call('modal', 'modal', modalContent) |
||||||
|
}) |
||||||
|
})() |
||||||
|
} catch (e) { |
||||||
|
// the modal has been canceled/hide
|
||||||
|
return |
||||||
|
}
|
||||||
|
this.provider = new ethers.providers.JsonRpcProvider(value) |
||||||
|
this.sendAsyncInternal(data, resolve, reject)
|
||||||
|
} else { |
||||||
|
this.sendAsyncInternal(data, resolve, reject) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
private async sendAsyncInternal (data: JsonDataRequest, resolve: SuccessRequest, reject: RejectRequest): Promise<void> { |
||||||
|
if (this.provider) { |
||||||
|
// Check the case where current environment is VM on UI and it still sends RPC requests
|
||||||
|
// This will be displayed on UI tooltip as 'cannot get account list: Environment Updated !!'
|
||||||
|
if (this.blockchain.getProvider() !== 'Hardhat Provider' && data.method !== 'net_listening') return reject(new Error('Environment Updated !!')) |
||||||
|
|
||||||
|
try { |
||||||
|
const result = await this.provider.send(data.method, data.params) |
||||||
|
resolve({ jsonrpc: '2.0', result, id: data.id }) |
||||||
|
} catch (error) { |
||||||
|
this.blocked = true |
||||||
|
const modalContent: AlertModal = { |
||||||
|
id: 'harrhatprovider', |
||||||
|
title: 'Hardhat Provider', |
||||||
|
message: `Error while connecting to the hardhat provider: ${error.message}`, |
||||||
|
} |
||||||
|
this.call('modal', 'alert', modalContent) |
||||||
|
await this.call('udapp', 'setEnvironmentMode', { context: 'vm', fork: 'london' }) |
||||||
|
this.provider = null |
||||||
|
setTimeout(_ => { this.blocked = false }, 1000) // we wait 1 second for letting remix to switch to vm
|
||||||
|
reject(error) |
||||||
|
} |
||||||
|
} else { |
||||||
|
const result = data.method === 'net_listening' ? 'canceled' : [] |
||||||
|
resolve({ jsonrpc: '2.0', result: result, id: data.id }) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1,423 +0,0 @@ |
|||||||
import publishToStorage from '../../../publishToStorage' |
|
||||||
const yo = require('yo-yo') |
|
||||||
const ethJSUtil = require('ethereumjs-util') |
|
||||||
const css = require('../styles/run-tab-styles') |
|
||||||
const modalDialogCustom = require('../../ui/modal-dialog-custom') |
|
||||||
const remixLib = require('@remix-project/remix-lib') |
|
||||||
const EventManager = remixLib.EventManager |
|
||||||
const confirmDialog = require('../../ui/confirmDialog') |
|
||||||
const modalDialog = require('../../ui/modaldialog') |
|
||||||
const MultiParamManager = require('../../ui/multiParamManager') |
|
||||||
const helper = require('../../../lib/helper') |
|
||||||
const addTooltip = require('../../ui/tooltip') |
|
||||||
const _paq = window._paq = window._paq || [] |
|
||||||
|
|
||||||
class ContractDropdownUI { |
|
||||||
constructor (blockchain, dropdownLogic, logCallback, runView) { |
|
||||||
this.blockchain = blockchain |
|
||||||
this.dropdownLogic = dropdownLogic |
|
||||||
this.logCallback = logCallback |
|
||||||
this.runView = runView |
|
||||||
this.event = new EventManager() |
|
||||||
|
|
||||||
this.listenToEvents() |
|
||||||
this.ipfsCheckedState = false |
|
||||||
this.exEnvironment = blockchain.getProvider() |
|
||||||
this.listenToContextChange() |
|
||||||
this.loadType = 'other' |
|
||||||
} |
|
||||||
|
|
||||||
listenToEvents () { |
|
||||||
this.dropdownLogic.event.register('newlyCompiled', (success, data, source, compiler, compilerFullName, file) => { |
|
||||||
if (!this.selectContractNames) return |
|
||||||
this.selectContractNames.innerHTML = '' |
|
||||||
if (success) { |
|
||||||
this.dropdownLogic.getCompiledContracts(compiler, compilerFullName).forEach((contract) => { |
|
||||||
this.selectContractNames.appendChild(yo`<option value="${contract.name}" compiler="${compilerFullName}">${contract.name} - ${contract.file}</option>`) |
|
||||||
}) |
|
||||||
} |
|
||||||
this.enableAtAddress(success) |
|
||||||
this.enableContractNames(success) |
|
||||||
this.setInputParamsPlaceHolder() |
|
||||||
|
|
||||||
if (success) { |
|
||||||
this.compFails.style.display = 'none' |
|
||||||
} else { |
|
||||||
this.compFails.style.display = 'block' |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
listenToContextChange () { |
|
||||||
this.blockchain.event.register('networkStatus', ({ error, network }) => { |
|
||||||
if (error) { |
|
||||||
console.log('can\'t detect network') |
|
||||||
return |
|
||||||
} |
|
||||||
this.exEnvironment = this.blockchain.getProvider() |
|
||||||
this.networkName = network.name |
|
||||||
this.networkId = network.id |
|
||||||
|
|
||||||
const savedConfig = window.localStorage.getItem(`ipfs/${this.exEnvironment}/${this.networkName}`) |
|
||||||
|
|
||||||
// check if an already selected option exist else use default workflow
|
|
||||||
if (savedConfig !== null) { |
|
||||||
this.setCheckedState(savedConfig) |
|
||||||
} else { |
|
||||||
this.setCheckedState(this.networkName === 'Main') |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
setCheckedState (value) { |
|
||||||
value = value === 'true' ? true : value === 'false' ? false : value |
|
||||||
this.ipfsCheckedState = value |
|
||||||
if (this.ipfsCheckbox) this.ipfsCheckbox.checked = value |
|
||||||
} |
|
||||||
|
|
||||||
toggleCheckedState () { |
|
||||||
if (this.exEnvironment === 'vm') this.networkName = 'VM' |
|
||||||
this.ipfsCheckedState = !this.ipfsCheckedState |
|
||||||
window.localStorage.setItem(`ipfs/${this.exEnvironment}/${this.networkName}`, this.ipfsCheckedState) |
|
||||||
} |
|
||||||
|
|
||||||
enableContractNames (enable) { |
|
||||||
if (enable) { |
|
||||||
if (this.selectContractNames.value === '') return |
|
||||||
this.selectContractNames.removeAttribute('disabled') |
|
||||||
this.selectContractNames.setAttribute('title', 'Select contract for Deploy or At Address.') |
|
||||||
} else { |
|
||||||
this.selectContractNames.setAttribute('disabled', true) |
|
||||||
if (this.loadType === 'sol') { |
|
||||||
this.selectContractNames.setAttribute('title', '⚠ Select and compile *.sol file to deploy or access a contract.') |
|
||||||
} else { |
|
||||||
this.selectContractNames.setAttribute('title', '⚠ Selected *.abi file allows accessing contracts, select and compile *.sol file to deploy and access one.') |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
enableAtAddress (enable) { |
|
||||||
if (enable) { |
|
||||||
const address = this.atAddressButtonInput.value |
|
||||||
if (!address || !ethJSUtil.isValidAddress(address)) { |
|
||||||
this.enableAtAddress(false) |
|
||||||
return |
|
||||||
} |
|
||||||
this.atAddress.removeAttribute('disabled') |
|
||||||
this.atAddress.setAttribute('title', 'Interact with the given contract.') |
|
||||||
} else { |
|
||||||
this.atAddress.setAttribute('disabled', true) |
|
||||||
if (this.atAddressButtonInput.value === '') { |
|
||||||
this.atAddress.setAttribute('title', '⚠ Compile *.sol file or select *.abi file & then enter the address of deployed contract.') |
|
||||||
} else { |
|
||||||
this.atAddress.setAttribute('title', '⚠ Compile *.sol file or select *.abi file.') |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="m-2 ml-3 fas fa-times-circle ${css.errorIcon}" ></i>` |
|
||||||
this.atAddress = yo`<button class="${css.atAddress} btn btn-sm btn-info" id="runAndDeployAtAdressButton" onclick=${this.loadFromAddress.bind(this)}>At Address</button>` |
|
||||||
this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="address of contract" oninput=${this.atAddressChanged.bind(this)} />` |
|
||||||
this.selectContractNames = yo`<select class="${css.contractNames} custom-select" disabled title="Please compile *.sol file to deploy or access a contract"></select>` |
|
||||||
this.abiLabel = yo`<span class="py-1">ABI file selected</span>` |
|
||||||
if (this.exEnvironment === 'vm') this.networkName = 'VM' |
|
||||||
this.enableAtAddress(false) |
|
||||||
this.abiLabel.style.display = 'none' |
|
||||||
|
|
||||||
const savedConfig = window.localStorage.getItem(`ipfs/${this.exEnvironment}/${this.networkName}`) |
|
||||||
this.ipfsCheckedState = savedConfig === 'true' ? true : false // eslint-disable-line
|
|
||||||
|
|
||||||
this.ipfsCheckbox = yo` |
|
||||||
<input |
|
||||||
id="deployAndRunPublishToIPFS" |
|
||||||
data-id="contractDropdownIpfsCheckbox" |
|
||||||
class="form-check-input custom-control-input" |
|
||||||
type="checkbox" |
|
||||||
onchange=${() => this.toggleCheckedState()} |
|
||||||
> |
|
||||||
` |
|
||||||
if (this.ipfsCheckedState) this.ipfsCheckbox.checked = true |
|
||||||
|
|
||||||
this.deployCheckBox = yo` |
|
||||||
<div class="d-flex py-1 align-items-center custom-control custom-checkbox"> |
|
||||||
${this.ipfsCheckbox} |
|
||||||
<label |
|
||||||
for="deployAndRunPublishToIPFS" |
|
||||||
data-id="contractDropdownIpfsCheckboxLabel" |
|
||||||
class="m-0 form-check-label custom-control-label ${css.checkboxAlign}" |
|
||||||
title="Publishing the source code and metadata to IPFS facilitates source code verification using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)" |
|
||||||
> |
|
||||||
Publish to IPFS |
|
||||||
</label> |
|
||||||
</div> |
|
||||||
` |
|
||||||
this.createPanel = yo`<div class="${css.deployDropdown}"></div>` |
|
||||||
this.orLabel = yo`<div class="${css.orLabel} mt-2">or</div>` |
|
||||||
|
|
||||||
const contractNamesContainer = yo` |
|
||||||
<div class="${css.container}" data-id="contractDropdownContainer"> |
|
||||||
<label class="${css.settingsLabel}">Contract</label> |
|
||||||
<div class="${css.subcontainer}"> |
|
||||||
${this.selectContractNames} ${this.compFails} |
|
||||||
${this.abiLabel} |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
${this.createPanel} |
|
||||||
${this.orLabel} |
|
||||||
<div class="${css.button} ${css.atAddressSect}"> |
|
||||||
${this.atAddress} |
|
||||||
${this.atAddressButtonInput} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this)) |
|
||||||
this.setInputParamsPlaceHolder() |
|
||||||
if (!this.contractNamesContainer) { |
|
||||||
this.contractNamesContainer = contractNamesContainer |
|
||||||
} |
|
||||||
return contractNamesContainer |
|
||||||
} |
|
||||||
|
|
||||||
atAddressChanged (event) { |
|
||||||
if (!this.atAddressButtonInput.value) { |
|
||||||
this.enableAtAddress(false) |
|
||||||
} else { |
|
||||||
if ((this.selectContractNames && !this.selectContractNames.getAttribute('disabled') && this.loadType === 'sol') || |
|
||||||
this.loadType === 'abi') { |
|
||||||
this.enableAtAddress(true) |
|
||||||
} else { |
|
||||||
this.enableAtAddress(false) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
changeCurrentFile (currentFile) { |
|
||||||
if (!this.selectContractNames) return |
|
||||||
if (/.(.abi)$/.exec(currentFile)) { |
|
||||||
this.createPanel.style.display = 'none' |
|
||||||
this.orLabel.style.display = 'none' |
|
||||||
this.compFails.style.display = 'none' |
|
||||||
this.loadType = 'abi' |
|
||||||
this.contractNamesContainer.style.display = 'block' |
|
||||||
this.abiLabel.style.display = 'block' |
|
||||||
this.abiLabel.innerHTML = currentFile |
|
||||||
this.selectContractNames.style.display = 'none' |
|
||||||
this.enableContractNames(true) |
|
||||||
this.enableAtAddress(true) |
|
||||||
} else if (/.(.sol)$/.exec(currentFile) || |
|
||||||
/.(.vy)$/.exec(currentFile) || // vyper
|
|
||||||
/.(.lex)$/.exec(currentFile) || // lexon
|
|
||||||
/.(.contract)$/.exec(currentFile)) { |
|
||||||
this.createPanel.style.display = 'block' |
|
||||||
this.orLabel.style.display = 'block' |
|
||||||
this.contractNamesContainer.style.display = 'block' |
|
||||||
this.loadType = 'sol' |
|
||||||
this.selectContractNames.style.display = 'block' |
|
||||||
this.abiLabel.style.display = 'none' |
|
||||||
if (this.selectContractNames.value === '') this.enableAtAddress(false) |
|
||||||
} else { |
|
||||||
this.loadType = 'other' |
|
||||||
this.createPanel.style.display = 'block' |
|
||||||
this.orLabel.style.display = 'block' |
|
||||||
this.contractNamesContainer.style.display = 'block' |
|
||||||
this.selectContractNames.style.display = 'block' |
|
||||||
this.abiLabel.style.display = 'none' |
|
||||||
if (this.selectContractNames.value === '') this.enableAtAddress(false) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
setInputParamsPlaceHolder () { |
|
||||||
this.createPanel.innerHTML = '' |
|
||||||
if (this.selectContractNames.selectedIndex < 0 || this.selectContractNames.children.length <= 0) { |
|
||||||
this.createPanel.innerHTML = 'No compiled contracts' |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
const selectedContract = this.getSelectedContract() |
|
||||||
const clickCallback = async (valArray, inputsValues) => { |
|
||||||
var selectedContract = this.getSelectedContract() |
|
||||||
this.createInstance(selectedContract, inputsValues) |
|
||||||
} |
|
||||||
const createConstructorInstance = new MultiParamManager( |
|
||||||
0, |
|
||||||
selectedContract.getConstructorInterface(), |
|
||||||
clickCallback, |
|
||||||
selectedContract.getConstructorInputs(), |
|
||||||
'Deploy', |
|
||||||
selectedContract.bytecodeObject, |
|
||||||
true |
|
||||||
) |
|
||||||
this.createPanel.appendChild(createConstructorInstance.render()) |
|
||||||
this.createPanel.appendChild(this.deployCheckBox) |
|
||||||
} |
|
||||||
|
|
||||||
getSelectedContract () { |
|
||||||
var contract = this.selectContractNames.children[this.selectContractNames.selectedIndex] |
|
||||||
var contractName = contract.getAttribute('value') |
|
||||||
var compilerAtributeName = contract.getAttribute('compiler') |
|
||||||
|
|
||||||
return this.dropdownLogic.getSelectedContract(contractName, compilerAtributeName) |
|
||||||
} |
|
||||||
|
|
||||||
async createInstance (selectedContract, args) { |
|
||||||
if (selectedContract.bytecodeObject.length === 0) { |
|
||||||
return modalDialogCustom.alert('This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.') |
|
||||||
} |
|
||||||
|
|
||||||
var continueCb = (error, continueTxExecution, cancelCb) => { |
|
||||||
if (error) { |
|
||||||
var msg = typeof error !== 'string' ? error.message : error |
|
||||||
modalDialog('Gas estimation failed', yo`<div>Gas estimation errored with the following message (see below).
|
|
||||||
The transaction execution will likely fail. Do you want to force sending? <br> |
|
||||||
${msg} |
|
||||||
</div>`, |
|
||||||
{ |
|
||||||
label: 'Send Transaction', |
|
||||||
fn: () => { |
|
||||||
continueTxExecution() |
|
||||||
} |
|
||||||
}, { |
|
||||||
label: 'Cancel Transaction', |
|
||||||
fn: () => { |
|
||||||
cancelCb() |
|
||||||
} |
|
||||||
}) |
|
||||||
} else { |
|
||||||
continueTxExecution() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const self = this |
|
||||||
|
|
||||||
var promptCb = (okCb, cancelCb) => { |
|
||||||
modalDialogCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb) |
|
||||||
} |
|
||||||
|
|
||||||
var statusCb = (msg) => { |
|
||||||
return this.logCallback(msg) |
|
||||||
} |
|
||||||
|
|
||||||
var finalCb = (error, contractObject, address) => { |
|
||||||
self.event.trigger('clearInstance') |
|
||||||
|
|
||||||
if (error) { |
|
||||||
return this.logCallback(error) |
|
||||||
} |
|
||||||
self.event.trigger('newContractInstanceAdded', [contractObject, address, contractObject.name]) |
|
||||||
|
|
||||||
const data = self.runView.compilersArtefacts.getCompilerAbstract(contractObject.contract.file) |
|
||||||
self.runView.compilersArtefacts.addResolvedContract(helper.addressToString(address), data) |
|
||||||
if (self.ipfsCheckedState) { |
|
||||||
_paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName + '_' + this.networkId]) |
|
||||||
publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract) |
|
||||||
} else { |
|
||||||
_paq.push(['trackEvent', 'udapp', 'DeployOnly', this.networkName + '_' + this.networkId]) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
let contractMetadata |
|
||||||
try { |
|
||||||
contractMetadata = await this.runView.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file) |
|
||||||
} catch (error) { |
|
||||||
return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`) |
|
||||||
} |
|
||||||
|
|
||||||
const compilerContracts = this.dropdownLogic.getCompilerContracts() |
|
||||||
const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog) |
|
||||||
|
|
||||||
if (selectedContract.isOverSizeLimit()) { |
|
||||||
return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
|
|
||||||
More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a> |
|
||||||
</div>`, |
|
||||||
{ |
|
||||||
label: 'Force Send', |
|
||||||
fn: () => { |
|
||||||
this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb) |
|
||||||
} |
|
||||||
}, { |
|
||||||
label: 'Cancel', |
|
||||||
fn: () => { |
|
||||||
this.logCallback(`creation of ${selectedContract.name} canceled by user.`) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb) |
|
||||||
} |
|
||||||
|
|
||||||
deployContract (selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb) { |
|
||||||
_paq.push(['trackEvent', 'udapp', 'DeployContractTo', this.networkName + '_' + this.networkId]) |
|
||||||
const { statusCb } = callbacks |
|
||||||
if (!contractMetadata || (contractMetadata && contractMetadata.autoDeployLib)) { |
|
||||||
return this.blockchain.deployContractAndLibraries(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb) |
|
||||||
} |
|
||||||
if (Object.keys(selectedContract.bytecodeLinkReferences).length) statusCb(`linking ${JSON.stringify(selectedContract.bytecodeLinkReferences, null, '\t')} using ${JSON.stringify(contractMetadata.linkReferences, null, '\t')}`) |
|
||||||
this.blockchain.deployContractWithLibrary(selectedContract, args, contractMetadata, compilerContracts, callbacks, confirmationCb) |
|
||||||
} |
|
||||||
|
|
||||||
getConfirmationCb (modalDialog, confirmDialog) { |
|
||||||
// this code is the same as in recorder.js. TODO need to be refactored out
|
|
||||||
const confirmationCb = (network, tx, gasEstimation, continueTxExecution, cancelCb) => { |
|
||||||
if (network.name !== 'Main') { |
|
||||||
return continueTxExecution(null) |
|
||||||
} |
|
||||||
const amount = this.blockchain.fromWei(tx.value, true, 'ether') |
|
||||||
const content = confirmDialog(tx, network, amount, gasEstimation, this.blockchain.determineGasFees(tx), this.blockchain.determineGasPrice.bind(this.blockchain)) |
|
||||||
|
|
||||||
modalDialog('Confirm transaction', content, |
|
||||||
{ |
|
||||||
label: 'Confirm', |
|
||||||
fn: () => { |
|
||||||
this.blockchain.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked) |
|
||||||
// TODO: check if this is check is still valid given the refactor
|
|
||||||
if (!content.gasPriceStatus) { |
|
||||||
cancelCb('Given transaction fee is not correct') |
|
||||||
} else { |
|
||||||
continueTxExecution(content.txFee) |
|
||||||
} |
|
||||||
} |
|
||||||
}, { |
|
||||||
label: 'Cancel', |
|
||||||
fn: () => { |
|
||||||
return cancelCb('Transaction canceled by user.') |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return confirmationCb |
|
||||||
} |
|
||||||
|
|
||||||
loadFromAddress () { |
|
||||||
this.event.trigger('clearInstance') |
|
||||||
|
|
||||||
let address = this.atAddressButtonInput.value |
|
||||||
if (!ethJSUtil.isValidChecksumAddress(address)) { |
|
||||||
addTooltip(yo` |
|
||||||
<span> |
|
||||||
It seems you are not using a checksumed address. |
|
||||||
<br>A checksummed address is an address that contains uppercase letters, as specified in <a href="https://eips.ethereum.org/EIPS/eip-55" target="_blank">EIP-55</a>. |
|
||||||
<br>Checksummed addresses are meant to help prevent users from sending transactions to the wrong address. |
|
||||||
</span>`) |
|
||||||
address = ethJSUtil.toChecksumAddress(address) |
|
||||||
} |
|
||||||
this.dropdownLogic.loadContractFromAddress(address, |
|
||||||
(cb) => { |
|
||||||
modalDialogCustom.confirm('At Address', `Do you really want to interact with ${address} using the current ABI definition?`, cb) |
|
||||||
}, |
|
||||||
(error, loadType, abi) => { |
|
||||||
if (error) { |
|
||||||
return modalDialogCustom.alert(error) |
|
||||||
} |
|
||||||
if (loadType === 'abi') { |
|
||||||
return this.event.trigger('newContractABIAdded', [abi, address]) |
|
||||||
} |
|
||||||
var selectedContract = this.getSelectedContract() |
|
||||||
this.event.trigger('newContractInstanceAdded', [selectedContract.object, address, this.selectContractNames.value]) |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = ContractDropdownUI |
|
||||||
@ -1,108 +0,0 @@ |
|||||||
import { CompilerAbstract } from '@remix-project/remix-solidity' |
|
||||||
const remixLib = require('@remix-project/remix-lib') |
|
||||||
const txHelper = remixLib.execution.txHelper |
|
||||||
const EventManager = remixLib.EventManager |
|
||||||
const _paq = window._paq = window._paq || [] |
|
||||||
|
|
||||||
class DropdownLogic { |
|
||||||
constructor (compilersArtefacts, config, editor, runView) { |
|
||||||
this.compilersArtefacts = compilersArtefacts |
|
||||||
this.config = config |
|
||||||
this.editor = editor |
|
||||||
this.runView = runView |
|
||||||
|
|
||||||
this.event = new EventManager() |
|
||||||
|
|
||||||
this.listenToCompilationEvents() |
|
||||||
} |
|
||||||
|
|
||||||
// TODO: can be moved up; the event in contractDropdown will have to refactored a method instead
|
|
||||||
listenToCompilationEvents () { |
|
||||||
const broadcastCompilationResult = (file, source, languageVersion, data) => { |
|
||||||
// TODO check whether the tab is configured
|
|
||||||
const compiler = new CompilerAbstract(languageVersion, data, source) |
|
||||||
this.compilersArtefacts[languageVersion] = compiler |
|
||||||
this.compilersArtefacts.__last = compiler |
|
||||||
this.event.trigger('newlyCompiled', [true, data, source, compiler, languageVersion, file]) |
|
||||||
} |
|
||||||
this.runView.on('solidity', 'compilationFinished', (file, source, languageVersion, data) => |
|
||||||
broadcastCompilationResult(file, source, languageVersion, data) |
|
||||||
) |
|
||||||
this.runView.on('vyper', 'compilationFinished', (file, source, languageVersion, data) => |
|
||||||
broadcastCompilationResult(file, source, languageVersion, data) |
|
||||||
) |
|
||||||
this.runView.on('lexon', 'compilationFinished', (file, source, languageVersion, data) => |
|
||||||
broadcastCompilationResult(file, source, languageVersion, data) |
|
||||||
) |
|
||||||
this.runView.on('yulp', 'compilationFinished', (file, source, languageVersion, data) => |
|
||||||
broadcastCompilationResult(file, source, languageVersion, data) |
|
||||||
) |
|
||||||
this.runView.on('optimism-compiler', 'compilationFinished', (file, source, languageVersion, data) => |
|
||||||
broadcastCompilationResult(file, source, languageVersion, data) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
loadContractFromAddress (address, confirmCb, cb) { |
|
||||||
if (/.(.abi)$/.exec(this.config.get('currentFile'))) { |
|
||||||
confirmCb(() => { |
|
||||||
var abi |
|
||||||
try { |
|
||||||
abi = JSON.parse(this.editor.currentContent()) |
|
||||||
} catch (e) { |
|
||||||
return cb('Failed to parse the current file as JSON ABI.') |
|
||||||
} |
|
||||||
_paq.push(['trackEvent', 'udapp', 'AtAddressLoadWithABI']) |
|
||||||
cb(null, 'abi', abi) |
|
||||||
}) |
|
||||||
} else { |
|
||||||
_paq.push(['trackEvent', 'udapp', 'AtAddressLoadWithArtifacts']) |
|
||||||
cb(null, 'instance') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
getCompiledContracts (compiler, compilerFullName) { |
|
||||||
var contracts = [] |
|
||||||
compiler.visitContracts((contract) => { |
|
||||||
contracts.push(contract) |
|
||||||
}) |
|
||||||
return contracts |
|
||||||
} |
|
||||||
|
|
||||||
getSelectedContract (contractName, compilerAtributeName) { |
|
||||||
if (!contractName) return null |
|
||||||
|
|
||||||
var compiler = this.compilersArtefacts[compilerAtributeName] |
|
||||||
if (!compiler) return null |
|
||||||
|
|
||||||
var contract = compiler.getContract(contractName) |
|
||||||
|
|
||||||
return { |
|
||||||
name: contractName, |
|
||||||
contract: contract, |
|
||||||
compiler: compiler, |
|
||||||
abi: contract.object.abi, |
|
||||||
bytecodeObject: contract.object.evm.bytecode.object, |
|
||||||
bytecodeLinkReferences: contract.object.evm.bytecode.linkReferences, |
|
||||||
object: contract.object, |
|
||||||
deployedBytecode: contract.object.evm.deployedBytecode, |
|
||||||
getConstructorInterface: () => { |
|
||||||
return txHelper.getConstructorInterface(contract.object.abi) |
|
||||||
}, |
|
||||||
getConstructorInputs: () => { |
|
||||||
var constructorInteface = txHelper.getConstructorInterface(contract.object.abi) |
|
||||||
return txHelper.inputParametersDeclarationToString(constructorInteface.inputs) |
|
||||||
}, |
|
||||||
isOverSizeLimit: () => { |
|
||||||
var deployedBytecode = contract.object.evm.deployedBytecode |
|
||||||
return (deployedBytecode && deployedBytecode.object.length / 2 > 24576) |
|
||||||
}, |
|
||||||
metadata: contract.object.metadata |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
getCompilerContracts () { |
|
||||||
return this.compilersArtefacts.__last.getData().contracts |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = DropdownLogic |
|
||||||
@ -1,160 +0,0 @@ |
|||||||
import { Plugin } from '@remixproject/engine' |
|
||||||
|
|
||||||
import * as packageJson from '../../../../../../package.json' |
|
||||||
var yo = require('yo-yo') |
|
||||||
var remixLib = require('@remix-project/remix-lib') |
|
||||||
var EventManager = remixLib.EventManager |
|
||||||
var csjs = require('csjs-inject') |
|
||||||
var css = require('../styles/run-tab-styles') |
|
||||||
|
|
||||||
var modalDialogCustom = require('../../ui/modal-dialog-custom') |
|
||||||
var modalDialog = require('../../ui/modaldialog') |
|
||||||
var confirmDialog = require('../../ui/confirmDialog') |
|
||||||
|
|
||||||
var helper = require('../../../lib/helper.js') |
|
||||||
|
|
||||||
const profile = { |
|
||||||
name: 'recorder', |
|
||||||
methods: ['runScenario'], |
|
||||||
version: packageJson.version |
|
||||||
} |
|
||||||
|
|
||||||
class RecorderUI extends Plugin { |
|
||||||
constructor (blockchain, fileManager, recorder, logCallBack, config) { |
|
||||||
super(profile) |
|
||||||
this.fileManager = fileManager |
|
||||||
this.blockchain = blockchain |
|
||||||
this.recorder = recorder |
|
||||||
this.logCallBack = logCallBack |
|
||||||
this.config = config |
|
||||||
this.event = new EventManager() |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
var css2 = csjs` |
|
||||||
.container {} |
|
||||||
.runTxs {} |
|
||||||
.recorder {} |
|
||||||
` |
|
||||||
|
|
||||||
this.runButton = yo`<i class="fas fa-play runtransaction ${css2.runTxs} ${css.icon}" title="Run Transactions" aria-hidden="true"></i>` |
|
||||||
this.recordButton = yo` |
|
||||||
<i class="fas fa-save savetransaction ${css2.recorder} ${css.icon}" |
|
||||||
onclick=${this.triggerRecordButton.bind(this)} title="Save Transactions" aria-hidden="true"> |
|
||||||
</i>` |
|
||||||
|
|
||||||
this.runButton.onclick = () => { |
|
||||||
const file = this.config.get('currentFile') |
|
||||||
if (!file) return modalDialogCustom.alert('A scenario file has to be selected') |
|
||||||
this.runScenario(file) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
runScenario (file) { |
|
||||||
if (!file) return modalDialogCustom.alert('Unable to run scenerio, no specified scenario file') |
|
||||||
var continueCb = (error, continueTxExecution, cancelCb) => { |
|
||||||
if (error) { |
|
||||||
var msg = typeof error !== 'string' ? error.message : error |
|
||||||
modalDialog('Gas estimation failed', yo`<div>Gas estimation errored with the following message (see below).
|
|
||||||
The transaction execution will likely fail. Do you want to force sending? <br> |
|
||||||
${msg} |
|
||||||
</div>`, |
|
||||||
{ |
|
||||||
label: 'Send Transaction', |
|
||||||
fn: () => { |
|
||||||
continueTxExecution() |
|
||||||
} |
|
||||||
}, { |
|
||||||
label: 'Cancel Transaction', |
|
||||||
fn: () => { |
|
||||||
cancelCb() |
|
||||||
} |
|
||||||
}) |
|
||||||
} else { |
|
||||||
continueTxExecution() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
var promptCb = (okCb, cancelCb) => { |
|
||||||
modalDialogCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb) |
|
||||||
} |
|
||||||
|
|
||||||
var alertCb = (msg) => { |
|
||||||
modalDialogCustom.alert(msg) |
|
||||||
} |
|
||||||
|
|
||||||
const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog) |
|
||||||
|
|
||||||
this.fileManager.readFile(file).then((json) => { |
|
||||||
// TODO: there is still a UI dependency to remove here, it's still too coupled at this point to remove easily
|
|
||||||
this.recorder.runScenario(json, continueCb, promptCb, alertCb, confirmationCb, this.logCallBack, (error, abi, address, contractName) => { |
|
||||||
if (error) { |
|
||||||
return modalDialogCustom.alert(error) |
|
||||||
} |
|
||||||
|
|
||||||
this.event.trigger('newScenario', [abi, address, contractName]) |
|
||||||
}) |
|
||||||
}).catch((error) => modalDialogCustom.alert(error)) |
|
||||||
} |
|
||||||
|
|
||||||
getConfirmationCb (modalDialog, confirmDialog) { |
|
||||||
// this code is the same as in contractDropdown.js. TODO need to be refactored out
|
|
||||||
const confirmationCb = (network, tx, gasEstimation, continueTxExecution, cancelCb) => { |
|
||||||
if (network.name !== 'Main') { |
|
||||||
return continueTxExecution(null) |
|
||||||
} |
|
||||||
const amount = this.blockchain.fromWei(tx.value, true, 'ether') |
|
||||||
const content = confirmDialog(tx, network, amount, gasEstimation, this.blockchain.determineGasFees(tx), this.blockchain.determineGasPrice.bind(this.blockchain)) |
|
||||||
|
|
||||||
modalDialog('Confirm transaction', content, |
|
||||||
{ |
|
||||||
label: 'Confirm', |
|
||||||
fn: () => { |
|
||||||
this.config.setUnpersistedProperty('doNotShowTransactionConfirmationAgain', content.querySelector('input#confirmsetting').checked) |
|
||||||
// TODO: check if this is check is still valid given the refactor
|
|
||||||
if (!content.gasPriceStatus) { |
|
||||||
cancelCb('Given transaction fee is not correct') |
|
||||||
} else { |
|
||||||
continueTxExecution(content.txFee) |
|
||||||
} |
|
||||||
} |
|
||||||
}, { |
|
||||||
label: 'Cancel', |
|
||||||
fn: () => { |
|
||||||
return cancelCb('Transaction canceled by user.') |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return confirmationCb |
|
||||||
} |
|
||||||
|
|
||||||
triggerRecordButton () { |
|
||||||
this.saveScenario( |
|
||||||
(path, cb) => { |
|
||||||
modalDialogCustom.prompt('Save transactions as scenario', 'Transactions will be saved in a file under ' + path, 'scenario.json', cb) |
|
||||||
}, |
|
||||||
(error) => { |
|
||||||
if (error) return modalDialogCustom.alert(error) |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
saveScenario (promptCb, cb) { |
|
||||||
var txJSON = JSON.stringify(this.recorder.getAll(), null, 2) |
|
||||||
var path = this.fileManager.currentPath() |
|
||||||
promptCb(path, input => { |
|
||||||
var fileProvider = this.fileManager.fileProviderOf(path) |
|
||||||
if (!fileProvider) return |
|
||||||
var newFile = path + '/' + input |
|
||||||
helper.createNonClashingName(newFile, fileProvider, (error, newFile) => { |
|
||||||
if (error) return cb('Failed to create file. ' + newFile + ' ' + error) |
|
||||||
if (!fileProvider.set(newFile, txJSON)) return cb('Failed to create file ' + newFile) |
|
||||||
this.fileManager.open(newFile) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = RecorderUI |
|
||||||
@ -1,449 +0,0 @@ |
|||||||
import { BN } from 'ethereumjs-util' |
|
||||||
import Registry from '../../state/registry' |
|
||||||
const $ = require('jquery') |
|
||||||
const yo = require('yo-yo') |
|
||||||
const remixLib = require('@remix-project/remix-lib') |
|
||||||
const EventManager = remixLib.EventManager |
|
||||||
const css = require('../styles/run-tab-styles') |
|
||||||
const copyToClipboard = require('../../ui/copy-to-clipboard') |
|
||||||
const modalDialogCustom = require('../../ui/modal-dialog-custom') |
|
||||||
const addTooltip = require('../../ui/tooltip') |
|
||||||
const helper = require('../../../lib/helper.js') |
|
||||||
|
|
||||||
class SettingsUI { |
|
||||||
constructor (blockchain, networkModule) { |
|
||||||
this.blockchain = blockchain |
|
||||||
this.event = new EventManager() |
|
||||||
this._components = {} |
|
||||||
|
|
||||||
this.blockchain.event.register('transactionExecuted', (error, from, to, data, lookupOnly, txResult) => { |
|
||||||
if (!lookupOnly) this.el.querySelector('#value').value = 0 |
|
||||||
if (error) return |
|
||||||
this.updateAccountBalances() |
|
||||||
}) |
|
||||||
this._components = { |
|
||||||
registry: Registry.getInstance(), |
|
||||||
networkModule: networkModule |
|
||||||
} |
|
||||||
this._components.registry = Registry.getInstance() |
|
||||||
this._deps = { |
|
||||||
config: this._components.registry.get('config').api |
|
||||||
} |
|
||||||
|
|
||||||
this._deps.config.events.on('settings/personal-mode_changed', this.onPersonalChange.bind(this)) |
|
||||||
|
|
||||||
setInterval(() => { |
|
||||||
this.updateAccountBalances() |
|
||||||
}, 1000) |
|
||||||
|
|
||||||
this.accountListCallId = 0 |
|
||||||
this.loadedAccounts = {} |
|
||||||
} |
|
||||||
|
|
||||||
updateAccountBalances () { |
|
||||||
if (!this.el) return |
|
||||||
var accounts = $(this.el.querySelector('#txorigin')).children('option') |
|
||||||
accounts.each((index, account) => { |
|
||||||
this.blockchain.getBalanceInEther(account.value, (err, balance) => { |
|
||||||
if (err) return |
|
||||||
const updated = helper.shortenAddress(account.value, balance) |
|
||||||
if (updated !== account.innerText) { // check if the balance has been updated and update UI accordingly.
|
|
||||||
account.innerText = updated |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
validateInputKey (e) { |
|
||||||
// preventing not numeric keys
|
|
||||||
// preventing 000 case
|
|
||||||
if (!helper.isNumeric(e.key) || |
|
||||||
(e.key === '0' && !parseInt(this.el.querySelector('#value').value) && this.el.querySelector('#value').value.length > 0)) { |
|
||||||
e.preventDefault() |
|
||||||
e.stopImmediatePropagation() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
validateValue () { |
|
||||||
const valueEl = this.el.querySelector('#value') |
|
||||||
if (!valueEl.value) { |
|
||||||
// assign 0 if given value is
|
|
||||||
// - empty
|
|
||||||
valueEl.value = 0 |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
let v |
|
||||||
try { |
|
||||||
v = new BN(valueEl.value, 10) |
|
||||||
valueEl.value = v.toString(10) |
|
||||||
} catch (e) { |
|
||||||
// assign 0 if given value is
|
|
||||||
// - not valid (for ex 4345-54)
|
|
||||||
// - contains only '0's (for ex 0000) copy past or edit
|
|
||||||
valueEl.value = 0 |
|
||||||
} |
|
||||||
|
|
||||||
// if giveen value is negative(possible with copy-pasting) set to 0
|
|
||||||
if (v.lt(0)) valueEl.value = 0 |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
this.netUI = yo`<span class="${css.network} badge badge-secondary"></span>` |
|
||||||
|
|
||||||
var environmentEl = yo` |
|
||||||
<div class="${css.crow}"> |
|
||||||
<label id="selectExEnv" class="${css.settingsLabel}"> |
|
||||||
Environment |
|
||||||
</label> |
|
||||||
<div class="${css.environment}"> |
|
||||||
<select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" class="form-control ${css.select} custom-select"> |
|
||||||
<option id="vm-mode-london" data-id="settingsVMLondonMode" |
|
||||||
title="Execution environment does not connect to any node, everything is local and in memory only." |
|
||||||
value="vm-london" name="executionContext" fork="london"> JavaScript VM (London) |
|
||||||
</option> |
|
||||||
<option id="vm-mode-berlin" data-id="settingsVMBerlinMode" |
|
||||||
title="Execution environment does not connect to any node, everything is local and in memory only." |
|
||||||
value="vm-berlin" name="executionContext" fork="berlin" > JavaScript VM (Berlin) |
|
||||||
</option> |
|
||||||
<option id="injected-mode" data-id="settingsInjectedMode" |
|
||||||
title="Execution environment has been provided by Metamask or similar provider." |
|
||||||
value="injected" name="executionContext"> Injected Web3 |
|
||||||
</option> |
|
||||||
<option id="web3-mode" data-id="settingsWeb3Mode" |
|
||||||
title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse! |
|
||||||
If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http." |
|
||||||
value="web3" name="executionContext"> Web3 Provider |
|
||||||
</option> |
|
||||||
</select> |
|
||||||
<a href="https://remix-ide.readthedocs.io/en/latest/run.html#run-setup" target="_blank"><i class="${css.infoDeployAction} ml-2 fas fa-info" title="check out docs to setup Environment"></i></a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
const networkEl = yo` |
|
||||||
<div class="${css.crow}"> |
|
||||||
<div class="${css.settingsLabel}"> |
|
||||||
</div> |
|
||||||
<div class="${css.environment}" data-id="settingsNetworkEnv"> |
|
||||||
${this.netUI} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
const accountEl = yo` |
|
||||||
<div class="${css.crow}"> |
|
||||||
<label class="${css.settingsLabel}"> |
|
||||||
Account |
|
||||||
<span id="remixRunPlusWraper" title="Create a new account" onload=${this.updatePlusButton.bind(this)}> |
|
||||||
<i id="remixRunPlus" class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)}"></i> |
|
||||||
</span> |
|
||||||
</label> |
|
||||||
<div class="${css.account}"> |
|
||||||
<select data-id="runTabSelectAccount" name="txorigin" class="form-control ${css.select} custom-select pr-4" id="txorigin"></select> |
|
||||||
<div style="margin-left: -5px;">${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}</div> |
|
||||||
<i id="remixRunSignMsg" data-id="settingsRemixRunSignMsg" class="mx-1 fas fa-edit ${css.icon}" aria-hidden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
const gasPriceEl = yo` |
|
||||||
<div class="${css.crow}"> |
|
||||||
<label class="${css.settingsLabel}">Gas limit</label> |
|
||||||
<input type="number" class="form-control ${css.gasNval} ${css.col2}" id="gasLimit" value="3000000"> |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
const valueEl = yo` |
|
||||||
<div class="${css.crow}"> |
|
||||||
<label class="${css.settingsLabel}" data-id="remixDRValueLabel">Value</label> |
|
||||||
<div class="${css.gasValueContainer}"> |
|
||||||
<input |
|
||||||
type="number" |
|
||||||
min="0" |
|
||||||
pattern="^[0-9]" |
|
||||||
step="1" |
|
||||||
class="form-control ${css.gasNval} ${css.col2}" |
|
||||||
id="value" |
|
||||||
data-id="dandrValue" |
|
||||||
value="0" |
|
||||||
title="Enter the value and choose the unit" |
|
||||||
onkeypress=${(e) => this.validateInputKey(e)} |
|
||||||
onchange=${() => this.validateValue()} |
|
||||||
> |
|
||||||
<select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2} custom-select" id="unit"> |
|
||||||
<option data-unit="wei">Wei</option> |
|
||||||
<option data-unit="gwei">Gwei</option> |
|
||||||
<option data-unit="finney">Finney</option> |
|
||||||
<option data-unit="ether">Ether</option> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
const el = yo` |
|
||||||
<div class="${css.settings}"> |
|
||||||
${environmentEl} |
|
||||||
${networkEl} |
|
||||||
${accountEl} |
|
||||||
${gasPriceEl} |
|
||||||
${valueEl} |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
var selectExEnv = environmentEl.querySelector('#selectExEnvOptions') |
|
||||||
this.setDropdown(selectExEnv) |
|
||||||
|
|
||||||
this.blockchain.event.register('contextChanged', (context, silent) => { |
|
||||||
this.setFinalContext() |
|
||||||
}) |
|
||||||
|
|
||||||
this.blockchain.event.register('networkStatus', ({ error, network }) => { |
|
||||||
if (error) { |
|
||||||
this.netUI.innerHTML = 'can\'t detect network ' |
|
||||||
return |
|
||||||
} |
|
||||||
const networkProvider = this._components.networkModule.getNetworkProvider.bind(this._components.networkModule) |
|
||||||
this.netUI.innerHTML = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : '' |
|
||||||
}) |
|
||||||
|
|
||||||
setInterval(() => { |
|
||||||
this.fillAccountsList() |
|
||||||
}, 1000) |
|
||||||
|
|
||||||
this.el = el |
|
||||||
|
|
||||||
this.fillAccountsList() |
|
||||||
return el |
|
||||||
} |
|
||||||
|
|
||||||
setDropdown (selectExEnv) { |
|
||||||
this.selectExEnv = selectExEnv |
|
||||||
|
|
||||||
const addProvider = (network) => { |
|
||||||
selectExEnv.appendChild(yo`<option
|
|
||||||
title="provider name: ${network.name}" |
|
||||||
value="${network.name}" |
|
||||||
name="executionContext" |
|
||||||
> |
|
||||||
${network.name} |
|
||||||
</option>`) |
|
||||||
addTooltip(yo`<span><b>${network.name}</b> provider added</span>`) |
|
||||||
} |
|
||||||
|
|
||||||
const removeProvider = (name) => { |
|
||||||
var env = selectExEnv.querySelector(`option[value="${name}"]`) |
|
||||||
if (env) { |
|
||||||
selectExEnv.removeChild(env) |
|
||||||
addTooltip(yo`<span><b>${name}</b> provider removed</span>`) |
|
||||||
} |
|
||||||
} |
|
||||||
this.blockchain.event.register('addProvider', provider => addProvider(provider)) |
|
||||||
this.blockchain.event.register('removeProvider', name => removeProvider(name)) |
|
||||||
|
|
||||||
selectExEnv.addEventListener('change', (event) => { |
|
||||||
const provider = selectExEnv.options[selectExEnv.selectedIndex] |
|
||||||
const fork = provider.getAttribute('fork') // can be undefined if connected to an external source (web3 provider / injected)
|
|
||||||
let context = provider.value |
|
||||||
context = context.startsWith('vm') ? 'vm' : context // context has to be 'vm', 'web3' or 'injected'
|
|
||||||
this.setExecutionContext({ context, fork }) |
|
||||||
}) |
|
||||||
|
|
||||||
selectExEnv.value = this._getProviderDropdownValue() |
|
||||||
} |
|
||||||
|
|
||||||
setExecutionContext (context) { |
|
||||||
this.blockchain.changeExecutionContext(context, () => { |
|
||||||
modalDialogCustom.prompt('External node request', this.web3ProviderDialogBody(), 'http://127.0.0.1:8545', (target) => { |
|
||||||
this.blockchain.setProviderFromEndpoint(target, context, (alertMsg) => { |
|
||||||
if (alertMsg) addTooltip(alertMsg) |
|
||||||
this.setFinalContext() |
|
||||||
}) |
|
||||||
}, this.setFinalContext.bind(this)) |
|
||||||
}, (alertMsg) => { |
|
||||||
addTooltip(alertMsg) |
|
||||||
}, this.setFinalContext.bind(this)) |
|
||||||
} |
|
||||||
|
|
||||||
web3ProviderDialogBody () { |
|
||||||
const thePath = '<path/to/local/folder/for/test/chain>' |
|
||||||
|
|
||||||
return yo` |
|
||||||
<div class=""> |
|
||||||
Note: To use Geth & https://remix.ethereum.org, configure it to allow requests from Remix:(see <a href="https://geth.ethereum.org/docs/rpc/server" target="_blank">Geth Docs on rpc server</a>)
|
|
||||||
<div class="border p-1">geth --http --http.corsdomain https://remix.ethereum.org</div>
|
|
||||||
<br> |
|
||||||
To run Remix & a local Geth test node, use this command: (see <a href="https://geth.ethereum.org/getting-started/dev-mode" target="_blank">Geth Docs on Dev mode</a>) |
|
||||||
<div class="border p-1">geth --http --http.corsdomain="${window.origin}" --http.api web3,eth,debug,personal,net --vmdebug --datadir ${thePath} --dev console</div> |
|
||||||
<br> |
|
||||||
<br>
|
|
||||||
<b>WARNING:</b> It is not safe to use the --http.corsdomain flag with a wildcard: <b>--http.corsdomain *</b> |
|
||||||
<br> |
|
||||||
<br>For more info: <a href="https://remix-ide.readthedocs.io/en/latest/run.html#more-about-web3-provider" target="_blank">Remix Docs on Web3 Provider</a> |
|
||||||
<br> |
|
||||||
<br>
|
|
||||||
Web3 Provider Endpoint |
|
||||||
</div> |
|
||||||
` |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* generate a value used by the env dropdown list. |
|
||||||
* @return {String} - can return 'vm-berlin, 'vm-london', 'injected' or 'web3' |
|
||||||
*/ |
|
||||||
_getProviderDropdownValue () { |
|
||||||
const provider = this.blockchain.getProvider() |
|
||||||
const fork = this.blockchain.getCurrentFork() |
|
||||||
return provider === 'vm' ? provider + '-' + fork : provider |
|
||||||
} |
|
||||||
|
|
||||||
setFinalContext () { |
|
||||||
// set the final context. Cause it is possible that this is not the one we've originaly selected
|
|
||||||
this.selectExEnv.value = this._getProviderDropdownValue() |
|
||||||
this.event.trigger('clearInstance', []) |
|
||||||
this.updatePlusButton() |
|
||||||
} |
|
||||||
|
|
||||||
updatePlusButton () { |
|
||||||
// enable/disable + button
|
|
||||||
const plusBtn = document.getElementById('remixRunPlus') |
|
||||||
const plusTitle = document.getElementById('remixRunPlusWraper') |
|
||||||
switch (this.selectExEnv.value) { |
|
||||||
case 'injected': |
|
||||||
plusBtn.classList.add(css.disableMouseEvents) |
|
||||||
plusTitle.title = "Unfortunately it's not possible to create an account using injected web3. Please create the account directly from your provider (i.e metamask or other of the same type)." |
|
||||||
|
|
||||||
break |
|
||||||
case 'vm': |
|
||||||
plusBtn.classList.remove(css.disableMouseEvents) |
|
||||||
plusTitle.title = 'Create a new account' |
|
||||||
|
|
||||||
break |
|
||||||
|
|
||||||
case 'web3': |
|
||||||
this.onPersonalChange() |
|
||||||
|
|
||||||
break |
|
||||||
default: { |
|
||||||
plusBtn.classList.add(css.disableMouseEvents) |
|
||||||
plusTitle.title = `Unfortunately it's not possible to create an account using an external wallet (${this.selectExEnv.value}).` |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
onPersonalChange () { |
|
||||||
const plusBtn = document.getElementById('remixRunPlus') |
|
||||||
const plusTitle = document.getElementById('remixRunPlusWraper') |
|
||||||
if (!this._deps.config.get('settings/personal-mode')) { |
|
||||||
plusBtn.classList.add(css.disableMouseEvents) |
|
||||||
plusTitle.title = 'Creating an account is possible only in Personal mode. Please go to Settings to enable it.' |
|
||||||
} else { |
|
||||||
plusBtn.classList.remove(css.disableMouseEvents) |
|
||||||
plusTitle.title = 'Create a new account' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
newAccount () { |
|
||||||
this.blockchain.newAccount( |
|
||||||
'', |
|
||||||
(cb) => { |
|
||||||
modalDialogCustom.promptPassphraseCreation((error, passphrase) => { |
|
||||||
if (error) { |
|
||||||
return modalDialogCustom.alert(error) |
|
||||||
} |
|
||||||
cb(passphrase) |
|
||||||
}, () => {}) |
|
||||||
}, |
|
||||||
(error, address) => { |
|
||||||
if (error) { |
|
||||||
return addTooltip('Cannot create an account: ' + error) |
|
||||||
} |
|
||||||
addTooltip(`account ${address} created`) |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
getSelectedAccount () { |
|
||||||
return this.el.querySelector('#txorigin').selectedOptions[0].value |
|
||||||
} |
|
||||||
|
|
||||||
getEnvironment () { |
|
||||||
return this.blockchain.getProvider() |
|
||||||
} |
|
||||||
|
|
||||||
signMessage () { |
|
||||||
this.blockchain.getAccounts((err, accounts) => { |
|
||||||
if (err) { |
|
||||||
return addTooltip(`Cannot get account list: ${err}`) |
|
||||||
} |
|
||||||
|
|
||||||
var signMessageDialog = { title: 'Sign a message', text: 'Enter a message to sign', inputvalue: 'Message to sign' } |
|
||||||
var $txOrigin = this.el.querySelector('#txorigin') |
|
||||||
if (!$txOrigin.selectedOptions[0] && (this.blockchain.isInjectedWeb3() || this.blockchain.isWeb3Provider())) { |
|
||||||
return addTooltip('Account list is empty, please make sure the current provider is properly connected to remix') |
|
||||||
} |
|
||||||
|
|
||||||
var account = $txOrigin.selectedOptions[0].value |
|
||||||
|
|
||||||
var promptCb = (passphrase) => { |
|
||||||
const modal = modalDialogCustom.promptMulti(signMessageDialog, (message) => { |
|
||||||
this.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => { |
|
||||||
if (err) { |
|
||||||
return addTooltip(err) |
|
||||||
} |
|
||||||
modal.hide() |
|
||||||
modalDialogCustom.alert(yo` |
|
||||||
<div> |
|
||||||
<b>hash:</b><br> |
|
||||||
<span id="remixRunSignMsgHash" data-id="settingsRemixRunSignMsgHash">${msgHash}</span> |
|
||||||
<br><b>signature:</b><br> |
|
||||||
<span id="remixRunSignMsgSignature" data-id="settingsRemixRunSignMsgSignature">${signedData}</span> |
|
||||||
</div> |
|
||||||
`)
|
|
||||||
}) |
|
||||||
}, false) |
|
||||||
} |
|
||||||
|
|
||||||
if (this.blockchain.isWeb3Provider()) { |
|
||||||
return modalDialogCustom.promptPassphrase( |
|
||||||
'Passphrase to sign a message', |
|
||||||
'Enter your passphrase for this account to sign the message', |
|
||||||
'', |
|
||||||
promptCb, |
|
||||||
false |
|
||||||
) |
|
||||||
} |
|
||||||
promptCb() |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
// TODO: unclear what's the goal of accountListCallId, feels like it can be simplified
|
|
||||||
async fillAccountsList () { |
|
||||||
this.accountListCallId++ |
|
||||||
const callid = this.accountListCallId |
|
||||||
const txOrigin = this.el.querySelector('#txorigin') |
|
||||||
let accounts = [] |
|
||||||
try { |
|
||||||
accounts = await this.blockchain.getAccounts() |
|
||||||
} catch (e) { |
|
||||||
addTooltip(`Cannot get account list: ${e}`) |
|
||||||
} |
|
||||||
if (!accounts) accounts = [] |
|
||||||
if (this.accountListCallId > callid) return |
|
||||||
this.accountListCallId++ |
|
||||||
for (const loadedaddress in this.loadedAccounts) { |
|
||||||
if (accounts.indexOf(loadedaddress) === -1) { |
|
||||||
txOrigin.removeChild(txOrigin.querySelector('option[value="' + loadedaddress + '"]')) |
|
||||||
delete this.loadedAccounts[loadedaddress] |
|
||||||
} |
|
||||||
} |
|
||||||
for (const i in accounts) { |
|
||||||
const address = accounts[i] |
|
||||||
if (!this.loadedAccounts[address]) { |
|
||||||
txOrigin.appendChild(yo`<option value="${address}" >${address}</option>`) |
|
||||||
this.loadedAccounts[address] = 1 |
|
||||||
} |
|
||||||
} |
|
||||||
txOrigin.setAttribute('value', accounts[0]) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = SettingsUI |
|
||||||
@ -1,225 +0,0 @@ |
|||||||
var csjs = require('csjs-inject') |
|
||||||
|
|
||||||
var css = csjs` |
|
||||||
.runTabView { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.runTabView::-webkit-scrollbar { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
.settings { |
|
||||||
padding: 0 24px 16px; |
|
||||||
} |
|
||||||
.crow { |
|
||||||
display: block; |
|
||||||
margin-top: 8px; |
|
||||||
} |
|
||||||
.col1 { |
|
||||||
width: 30%; |
|
||||||
float: left; |
|
||||||
align-self: center; |
|
||||||
} |
|
||||||
.settingsLabel { |
|
||||||
font-size: 11px; |
|
||||||
margin-bottom: 4px; |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
.environment { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
position: relative; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.environment a { |
|
||||||
margin-left: 7px; |
|
||||||
} |
|
||||||
.account { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.account i { |
|
||||||
margin-left: 12px; |
|
||||||
} |
|
||||||
.col2 { |
|
||||||
border-radius: 3px; |
|
||||||
} |
|
||||||
.col2_1 { |
|
||||||
width: 164px; |
|
||||||
min-width: 164px; |
|
||||||
} |
|
||||||
.col2_2 { |
|
||||||
} |
|
||||||
.select { |
|
||||||
font-weight: normal; |
|
||||||
width: 100%; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.instanceContainer { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
margin-bottom: 2%; |
|
||||||
border: none; |
|
||||||
text-align: center; |
|
||||||
padding: 0 14px 16px; |
|
||||||
} |
|
||||||
.pendingTxsContainer { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
margin-top: 2%; |
|
||||||
border: none; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
.container { |
|
||||||
padding: 0 24px 16px; |
|
||||||
} |
|
||||||
.recorderDescription { |
|
||||||
margin: 0 15px 15px 0; |
|
||||||
} |
|
||||||
.contractNames { |
|
||||||
width: 100%; |
|
||||||
border: 1px solid |
|
||||||
} |
|
||||||
.subcontainer { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
align-items: center; |
|
||||||
margin-bottom: 8px; |
|
||||||
} |
|
||||||
.subcontainer i { |
|
||||||
width: 16px; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
margin-left: 1px; |
|
||||||
} |
|
||||||
.button button{ |
|
||||||
flex: none; |
|
||||||
} |
|
||||||
.button { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-top: 13px; |
|
||||||
} |
|
||||||
.transaction { |
|
||||||
} |
|
||||||
.atAddress { |
|
||||||
margin: 0; |
|
||||||
min-width: 100px; |
|
||||||
width: 100px; |
|
||||||
height: 100%; |
|
||||||
word-break: inherit; |
|
||||||
border-top-right-radius: 0; |
|
||||||
border-bottom-right-radius: 0; |
|
||||||
border-right: 0; |
|
||||||
} |
|
||||||
.atAddressSect { |
|
||||||
margin-top: 8px; |
|
||||||
height: 32px; |
|
||||||
} |
|
||||||
.atAddressSect input { |
|
||||||
height: 32px; |
|
||||||
border-top-left-radius: 0 !important; |
|
||||||
border-bottom-left-radius: 0 !important; |
|
||||||
} |
|
||||||
.ataddressinput { |
|
||||||
padding: .25rem; |
|
||||||
} |
|
||||||
.create { |
|
||||||
} |
|
||||||
.input { |
|
||||||
font-size: 10px !important; |
|
||||||
} |
|
||||||
.noInstancesText { |
|
||||||
font-style: italic; |
|
||||||
text-align: left; |
|
||||||
padding-left: 15px; |
|
||||||
} |
|
||||||
.pendingTxsText { |
|
||||||
font-style: italic; |
|
||||||
display: flex; |
|
||||||
justify-content: space-evenly; |
|
||||||
align-items: center; |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
.item { |
|
||||||
margin-right: 1em; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.pendingContainer { |
|
||||||
display: flex; |
|
||||||
align-items: baseline; |
|
||||||
} |
|
||||||
.pending { |
|
||||||
height: 25px; |
|
||||||
text-align: center; |
|
||||||
padding-left: 10px; |
|
||||||
border-radius: 3px; |
|
||||||
margin-left: 5px; |
|
||||||
} |
|
||||||
.disableMouseEvents { |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
.icon { |
|
||||||
cursor: pointer; |
|
||||||
font-size: 12px; |
|
||||||
cursor: pointer; |
|
||||||
margin-left: 5px; |
|
||||||
} |
|
||||||
.icon:hover { |
|
||||||
font-size: 12px; |
|
||||||
color: var(--warning); |
|
||||||
} |
|
||||||
.errorIcon { |
|
||||||
color: var(--warning); |
|
||||||
margin-left: 15px; |
|
||||||
} |
|
||||||
.failDesc { |
|
||||||
color: var(--warning); |
|
||||||
padding-left: 10px; |
|
||||||
display: inline; |
|
||||||
} |
|
||||||
.network { |
|
||||||
margin-left: 8px; |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
.networkItem { |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
.transactionActions { |
|
||||||
display: flex; |
|
||||||
justify-content: space-evenly; |
|
||||||
width: 145px; |
|
||||||
} |
|
||||||
.orLabel { |
|
||||||
text-align: center; |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
.infoDeployAction { |
|
||||||
margin-left: 1px; |
|
||||||
font-size: 13px; |
|
||||||
color: var(--info); |
|
||||||
} |
|
||||||
.gasValueContainer { |
|
||||||
flex-direction: row; |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
.gasNval { |
|
||||||
width: 55%; |
|
||||||
font-size: 0.8rem; |
|
||||||
} |
|
||||||
.gasNvalUnit { |
|
||||||
width: 41%; |
|
||||||
margin-left: 10px; |
|
||||||
font-size: 0.8rem; |
|
||||||
} |
|
||||||
.deployDropdown { |
|
||||||
text-align: center; |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
.checkboxAlign { |
|
||||||
padding-top: 2px; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
module.exports = css |
|
||||||
@ -1,212 +0,0 @@ |
|||||||
'use strict' |
|
||||||
var yo = require('yo-yo') |
|
||||||
var csjs = require('csjs-inject') |
|
||||||
var css = csjs` |
|
||||||
.li_tv { |
|
||||||
list-style-type: none; |
|
||||||
-webkit-margin-before: 0px; |
|
||||||
-webkit-margin-after: 0px; |
|
||||||
-webkit-margin-start: 0px; |
|
||||||
-webkit-margin-end: 0px; |
|
||||||
-webkit-padding-start: 0px; |
|
||||||
} |
|
||||||
.ul_tv { |
|
||||||
list-style-type: none; |
|
||||||
-webkit-margin-before: 0px; |
|
||||||
-webkit-margin-after: 0px; |
|
||||||
-webkit-margin-start: 0px; |
|
||||||
-webkit-margin-end: 0px; |
|
||||||
-webkit-padding-start: 0px; |
|
||||||
} |
|
||||||
.caret_tv { |
|
||||||
width: 10px; |
|
||||||
flex-shrink: 0; |
|
||||||
padding-right: 5px; |
|
||||||
} |
|
||||||
.label_item { |
|
||||||
word-break: break-all; |
|
||||||
} |
|
||||||
.label_key { |
|
||||||
min-width: max-content; |
|
||||||
max-width: 80%; |
|
||||||
word-break: break-word; |
|
||||||
} |
|
||||||
.label_value { |
|
||||||
min-width: 10%; |
|
||||||
} |
|
||||||
.cursor_pointer { |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
var EventManager = require('../../lib/events') |
|
||||||
|
|
||||||
/** |
|
||||||
* TreeView |
|
||||||
* - extendable by specifying custom `extractData` and `formatSelf` function |
|
||||||
* - trigger `nodeClick` and `leafClick` |
|
||||||
*/ |
|
||||||
class TreeView { |
|
||||||
constructor (opts) { |
|
||||||
this.event = new EventManager() |
|
||||||
this.extractData = opts.extractData || this.extractDataDefault |
|
||||||
this.formatSelf = opts.formatSelf || this.formatSelfDefault |
|
||||||
this.loadMore = opts.loadMore |
|
||||||
this.view = null |
|
||||||
this.expandPath = [] |
|
||||||
} |
|
||||||
|
|
||||||
render (json, expand) { |
|
||||||
var view = this.renderProperties(json, expand) |
|
||||||
if (!this.view) { |
|
||||||
this.view = view |
|
||||||
} |
|
||||||
return view |
|
||||||
} |
|
||||||
|
|
||||||
update (json) { |
|
||||||
if (this.view) { |
|
||||||
yo.update(this.view, this.render(json)) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
renderObject (item, parent, key, expand, keyPath) { |
|
||||||
var data = this.extractData(item, parent, key) |
|
||||||
var children = (data.children || []).map((child, index) => { |
|
||||||
return this.renderObject(child.value, data, child.key, expand, keyPath + '/' + child.key) |
|
||||||
}) |
|
||||||
return this.formatData(key, data, children, expand, keyPath) |
|
||||||
} |
|
||||||
|
|
||||||
renderProperties (json, expand, key) { |
|
||||||
key = key || '' |
|
||||||
var children = Object.keys(json).map((innerkey) => { |
|
||||||
return this.renderObject(json[innerkey], json, innerkey, expand, innerkey) |
|
||||||
}) |
|
||||||
return yo`<ul key=${key} data-id="treeViewUl${key}" class="${css.ul_tv} ml-0 px-2">${children}</ul>` |
|
||||||
} |
|
||||||
|
|
||||||
formatData (key, data, children, expand, keyPath) { |
|
||||||
var self = this |
|
||||||
var li = yo`<li key=${keyPath} data-id="treeViewLi${keyPath}" class=${css.li_tv}></li>` |
|
||||||
var caret = yo`<div class="px-1 fas fa-caret-right caret ${css.caret_tv}"></div>` |
|
||||||
var label = yo` |
|
||||||
<div key=${keyPath} data-id="treeViewDiv${keyPath}" class="d-flex flex-row align-items-center"> |
|
||||||
${caret} |
|
||||||
<span class="w-100">${self.formatSelf(key, data, li)}</span> |
|
||||||
</div>` |
|
||||||
const expanded = self.expandPath.includes(keyPath) |
|
||||||
li.appendChild(label) |
|
||||||
if (data.children) { |
|
||||||
var list = yo`<ul key=${keyPath} data-id="treeViewUlList${keyPath}" class="pl-2 ${css.ul_tv}">${children}</ul>` |
|
||||||
list.style.display = expanded ? 'block' : 'none' |
|
||||||
caret.className = list.style.display === 'none' ? `fas fa-caret-right caret ${css.caret_tv}` : `fas fa-caret-down caret ${css.caret_tv}` |
|
||||||
caret.setAttribute('data-id', `treeViewToggle${keyPath}`) |
|
||||||
label.onclick = function () { |
|
||||||
self.expand(keyPath) |
|
||||||
if (self.isExpanded(keyPath)) { |
|
||||||
if (!self.expandPath.includes(keyPath)) self.expandPath.push(keyPath) |
|
||||||
} else { |
|
||||||
self.expandPath = self.expandPath.filter(path => !path.startsWith(keyPath)) |
|
||||||
} |
|
||||||
} |
|
||||||
label.oncontextmenu = function (event) { |
|
||||||
self.event.trigger('nodeRightClick', [keyPath, data, label, event]) |
|
||||||
} |
|
||||||
li.appendChild(list) |
|
||||||
if (data.hasNext) { |
|
||||||
list.appendChild(yo`<li><span class="w-100 text-primary ${css.cursor_pointer}" data-id="treeViewLoadMore" onclick="${() => self.loadMore(data.cursor)}">Load more</span></li>`) |
|
||||||
} |
|
||||||
} else { |
|
||||||
caret.style.visibility = 'hidden' |
|
||||||
label.oncontextmenu = function (event) { |
|
||||||
self.event.trigger('leafRightClick', [keyPath, data, label, event]) |
|
||||||
} |
|
||||||
label.onclick = function (event) { |
|
||||||
self.event.trigger('leafClick', [keyPath, data, label, event]) |
|
||||||
} |
|
||||||
} |
|
||||||
return li |
|
||||||
} |
|
||||||
|
|
||||||
isExpanded (path) { |
|
||||||
var current = this.nodeAt(path) |
|
||||||
if (current) { |
|
||||||
return current.style.display !== 'none' |
|
||||||
} |
|
||||||
return false |
|
||||||
} |
|
||||||
|
|
||||||
expand (path) { |
|
||||||
var caret = this.caretAt(path) |
|
||||||
var node = this.nodeAt(path) |
|
||||||
if (node) { |
|
||||||
node.style.display = node.style.display === 'none' ? 'block' : 'none' |
|
||||||
caret.className = node.style.display === 'none' ? `fas fa-caret-right caret ${css.caret_tv}` : `fas fa-caret-down caret ${css.caret_tv}` |
|
||||||
this.event.trigger('nodeClick', [path, node]) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
caretAt (path) { |
|
||||||
var label = this.labelAt(path) |
|
||||||
if (label) { |
|
||||||
return label.querySelector('.caret') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
itemAt (path) { |
|
||||||
return this.view.querySelector(`li[key="${path}"]`) |
|
||||||
} |
|
||||||
|
|
||||||
labelAt (path) { |
|
||||||
return this.view.querySelector(`div[key="${path}"]`) |
|
||||||
} |
|
||||||
|
|
||||||
nodeAt (path) { |
|
||||||
return this.view.querySelector(`ul[key="${path}"]`) |
|
||||||
} |
|
||||||
|
|
||||||
updateNodeFromJSON (path, jsonTree, expand) { |
|
||||||
var newTree = this.renderProperties(jsonTree, expand, path) |
|
||||||
var current = this.nodeAt(path) |
|
||||||
if (current && current.parentElement) { |
|
||||||
current.parentElement.replaceChild(newTree, current) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
formatSelfDefault (key, data) { |
|
||||||
return yo` |
|
||||||
<div class="d-flex mt-2 flex-row ${css.label_item}"> |
|
||||||
<label class="small font-weight-bold pr-1 ${css.label_key}">${key}:</label> |
|
||||||
<label class="m-0 ${css.label_value}">${data.self}</label> |
|
||||||
</div> |
|
||||||
` |
|
||||||
} |
|
||||||
|
|
||||||
extractDataDefault (item, parent, key) { |
|
||||||
var ret = {} |
|
||||||
if (item instanceof Array) { |
|
||||||
ret.children = item.map((item, index) => { |
|
||||||
return { key: index, value: item } |
|
||||||
}) |
|
||||||
ret.self = 'Array' |
|
||||||
ret.isNode = true |
|
||||||
ret.isLeaf = false |
|
||||||
} else if (item instanceof Object) { |
|
||||||
ret.children = Object.keys(item).map((key) => { |
|
||||||
return { key: key, value: item[key] } |
|
||||||
}) |
|
||||||
ret.self = 'Object' |
|
||||||
ret.isNode = true |
|
||||||
ret.isLeaf = false |
|
||||||
} else { |
|
||||||
ret.self = item |
|
||||||
ret.children = null |
|
||||||
ret.isNode = false |
|
||||||
ret.isLeaf = true |
|
||||||
} |
|
||||||
return ret |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = TreeView |
|
||||||
@ -1,212 +0,0 @@ |
|||||||
var yo = require('yo-yo') |
|
||||||
var remixLib = require('@remix-project/remix-lib') |
|
||||||
var EventManager = remixLib.EventManager |
|
||||||
var Commands = require('../../lib/commands') |
|
||||||
|
|
||||||
// -------------- styling ----------------------
|
|
||||||
var css = require('./styles/auto-complete-popup-styles') |
|
||||||
|
|
||||||
/* USAGE: |
|
||||||
|
|
||||||
var autoCompletePopup = new AutoCompletePopup({ |
|
||||||
options: [] |
|
||||||
}) |
|
||||||
autoCompletePopup.event.register('handleSelect', function (input) { }) |
|
||||||
autoCompletePopup.event.register('updateList', function () { }) |
|
||||||
|
|
||||||
*/ |
|
||||||
|
|
||||||
class AutoCompletePopup { |
|
||||||
constructor (opts = {}) { |
|
||||||
var self = this |
|
||||||
self.event = new EventManager() |
|
||||||
self.isOpen = false |
|
||||||
self.opts = opts |
|
||||||
self.data = { |
|
||||||
_options: [] |
|
||||||
} |
|
||||||
self._components = {} |
|
||||||
self._view = null |
|
||||||
self._startingElement = 0 |
|
||||||
self._elementsToShow = 4 |
|
||||||
self._selectedElement = 0 |
|
||||||
this.extraCommands = [] |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
var self = this |
|
||||||
const autoComplete = yo` |
|
||||||
<div class="${css.popup} alert alert-secondary"> |
|
||||||
<div> |
|
||||||
${self.data._options.map((item, index) => { |
|
||||||
return yo` |
|
||||||
<div data-id="autoCompletePopUpAutoCompleteItem" class="${css.autoCompleteItem} ${css.listHandlerHide} item ${self._selectedElement === index ? 'border border-primary' : ''}"> |
|
||||||
<div value=${index} onclick=${(event) => { self.handleSelect(event.srcElement.innerText) }}> |
|
||||||
${getKeyOf(item)}
|
|
||||||
</div> |
|
||||||
<div> |
|
||||||
${getValueOf(item)} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
})} |
|
||||||
</div> |
|
||||||
<div class="${css.listHandlerHide}"> |
|
||||||
<div class="${css.pageNumberAlignment}">Page ${(self._startingElement / self._elementsToShow) + 1} of ${Math.ceil(self.data._options.length / self._elementsToShow)}</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
function setUpPopUp (autoComplete) { |
|
||||||
handleOpenPopup(autoComplete) |
|
||||||
handleListSize(autoComplete) |
|
||||||
} |
|
||||||
|
|
||||||
function handleOpenPopup (autoComplete) { |
|
||||||
autoComplete.style.display = self.data._options.length > 0 ? 'block' : 'none' |
|
||||||
} |
|
||||||
|
|
||||||
function handleListSize (autoComplete) { |
|
||||||
if (self.data._options.length >= self._startingElement) { |
|
||||||
for (let i = self._startingElement; i < (self._elementsToShow + self._startingElement); i++) { |
|
||||||
const el = autoComplete.querySelectorAll('.item')[i] |
|
||||||
if (el) { |
|
||||||
el.classList.remove(css.listHandlerHide) |
|
||||||
el.classList.add(css.listHandlerShow) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
setUpPopUp(autoComplete) |
|
||||||
if (!this._view) this._view = autoComplete |
|
||||||
return autoComplete |
|
||||||
} |
|
||||||
|
|
||||||
handleSelect (text) { |
|
||||||
this.removeAutoComplete() |
|
||||||
this.event.trigger('handleSelect', [text]) |
|
||||||
} |
|
||||||
|
|
||||||
moveUp () { |
|
||||||
if (this._selectedElement === 0) return |
|
||||||
this._selectedElement-- |
|
||||||
this._startingElement = this._selectedElement > 0 ? this._selectedElement - 1 : 0 |
|
||||||
this.event.trigger('updateList') |
|
||||||
yo.update(this._view, this.render()) |
|
||||||
} |
|
||||||
|
|
||||||
moveDown () { |
|
||||||
if (this.data._options.length <= this._selectedElement + 1) return |
|
||||||
this._selectedElement++ |
|
||||||
this._startingElement = this._selectedElement - 1 |
|
||||||
this.event.trigger('updateList') |
|
||||||
yo.update(this._view, this.render()) |
|
||||||
} |
|
||||||
|
|
||||||
handleAutoComplete (event, inputString) { |
|
||||||
if (this.isOpen && (event.which === 27 || event.which === 8 || event.which === 46)) { |
|
||||||
// backspace or any key that should remove the autocompletion
|
|
||||||
this.removeAutoComplete() |
|
||||||
return true |
|
||||||
} |
|
||||||
if (this.isOpen && (event.which === 13 || event.which === 9)) { |
|
||||||
// enter and tab (validate completion)
|
|
||||||
event.preventDefault() |
|
||||||
if (this.data._options[this._selectedElement]) { |
|
||||||
this.handleSelect(getKeyOf(this.data._options[this._selectedElement])) |
|
||||||
} |
|
||||||
this.removeAutoComplete() |
|
||||||
return true |
|
||||||
} |
|
||||||
if (this.isOpen && event.which === 38) { |
|
||||||
// move up
|
|
||||||
event.preventDefault() |
|
||||||
this.isOpen = true |
|
||||||
this.moveUp() |
|
||||||
return true |
|
||||||
} |
|
||||||
if (this.isOpen && event.which === 40) { |
|
||||||
// move down
|
|
||||||
event.preventDefault() |
|
||||||
this.isOpen = true |
|
||||||
this.moveDown() |
|
||||||
return true |
|
||||||
} |
|
||||||
if (event.which === 13 || event.which === 9) { |
|
||||||
// enter || tab and autocompletion is off, just returning false
|
|
||||||
return false |
|
||||||
} |
|
||||||
const textList = inputString.split(' ') |
|
||||||
const autoCompleteInput = textList.length > 1 ? textList[textList.length - 1] : textList[0] |
|
||||||
if (inputString.length >= 2) { |
|
||||||
// more than 2 letters, start completion
|
|
||||||
this.data._options = [] |
|
||||||
Commands.allPrograms.forEach(item => { |
|
||||||
const program = getKeyOf(item) |
|
||||||
if (program.substring(0, program.length - 1).includes(autoCompleteInput.trim())) { |
|
||||||
this.data._options.push(item) |
|
||||||
} else if (autoCompleteInput.trim().includes(program) || (program === autoCompleteInput.trim())) { |
|
||||||
Commands.allCommands.forEach(item => { |
|
||||||
const command = getKeyOf(item) |
|
||||||
if (command.includes(autoCompleteInput.trim())) { |
|
||||||
this.data._options.push(item) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
}) |
|
||||||
this.extraCommands.forEach(item => { |
|
||||||
const command = getKeyOf(item) |
|
||||||
if (command.includes(autoCompleteInput.trim())) { |
|
||||||
this.data._options.push(item) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
if (this.data._options.length === 1 && event.which === 9) { |
|
||||||
// if only one option and tab is pressed, we resolve it
|
|
||||||
event.preventDefault() |
|
||||||
textList.pop() |
|
||||||
textList.push(getKeyOf(this.data._options[0])) |
|
||||||
this.handleSelect(`${textList}`.replace(/,/g, ' ')) |
|
||||||
this.removeAutoComplete() |
|
||||||
return |
|
||||||
} |
|
||||||
if (this.data._options.length) this.isOpen = true |
|
||||||
yo.update(this._view, this.render()) |
|
||||||
return true |
|
||||||
} |
|
||||||
return false |
|
||||||
} |
|
||||||
|
|
||||||
removeAutoComplete () { |
|
||||||
if (!this.isOpen) return |
|
||||||
this._view.style.display = 'none' |
|
||||||
this.isOpen = false |
|
||||||
this.data._options = [] |
|
||||||
this._startingElement = 0 |
|
||||||
this._selectedElement = 0 |
|
||||||
yo.update(this._view, this.render()) |
|
||||||
} |
|
||||||
|
|
||||||
extendAutocompletion () { |
|
||||||
// TODO: this is not using the appManager interface. Terminal should be put as module
|
|
||||||
this.opts.appManager.event.on('activate', async (profile) => { |
|
||||||
if (!profile.methods) return |
|
||||||
profile.methods.forEach((method) => { |
|
||||||
const key = `remix.call('${profile.name}', '${method}')` |
|
||||||
const keyValue = {} |
|
||||||
keyValue[key] = `call ${profile.name} - ${method}` |
|
||||||
if (this.extraCommands.includes(keyValue)) return |
|
||||||
this.extraCommands.push(keyValue) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function getKeyOf (item) { |
|
||||||
return Object.keys(item)[0] |
|
||||||
} |
|
||||||
|
|
||||||
function getValueOf (item) { |
|
||||||
return Object.values(item)[0] |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = AutoCompletePopup |
|
||||||
@ -1,70 +0,0 @@ |
|||||||
var yo = require('yo-yo') |
|
||||||
var csjs = require('csjs-inject') |
|
||||||
var EventManager = require('../../lib/events') |
|
||||||
|
|
||||||
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`<div></div>` |
|
||||||
self._view.arrow = yo`<i class="${css.arrow} fas fa-angle-down" onclick="${() => trigger(this)}"></i>` |
|
||||||
|
|
||||||
self._view.expandCollapseButton = yo` |
|
||||||
<div>${self._view.arrow}</div>` |
|
||||||
|
|
||||||
self._view.statusBar = yo`<div>${self._opts.collapsedView}</div>` |
|
||||||
self._view.cardHeader = yo` |
|
||||||
<div class="d-flex justify-content-between align-items-center" onclick=${() => trigger(self._view.arrow)}> |
|
||||||
<div class="pr-1 d-flex flex-row"> |
|
||||||
<div>${self._opts.title}</div> |
|
||||||
${self._view.statusBar} |
|
||||||
</div> |
|
||||||
<div>${self._view.expandCollapseButton}</div> |
|
||||||
</div>` |
|
||||||
|
|
||||||
function trigger (el) { |
|
||||||
var body = self._view.cardBody |
|
||||||
var status = self._view.statusBar |
|
||||||
if (el.classList) { |
|
||||||
el.classList.toggle('fa-angle-up') |
|
||||||
var arrow = el.classList.toggle('fa-angle-down') ? 'up' : 'down' |
|
||||||
self.event.trigger('expandCollapseCard', [arrow, body, status]) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// HTML
|
|
||||||
self._view.el = yo` |
|
||||||
<div class="${css.cardContainer} list-group-item border-0"> |
|
||||||
${self._view.cardHeader} |
|
||||||
${self._view.cardBody} |
|
||||||
</div>` |
|
||||||
|
|
||||||
return self._view.el |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.cardContainer { |
|
||||||
padding : 0 24px 16px; |
|
||||||
margin : 0; |
|
||||||
background : none; |
|
||||||
} |
|
||||||
.arrow { |
|
||||||
font-weight : bold; |
|
||||||
cursor : pointer; |
|
||||||
font-size : 14px; |
|
||||||
} |
|
||||||
.arrow:hover { |
|
||||||
} |
|
||||||
|
|
||||||
` |
|
||||||
@ -1,142 +0,0 @@ |
|||||||
var yo = require('yo-yo') |
|
||||||
var csjs = require('csjs-inject') |
|
||||||
const copyToClipboard = require('./copy-to-clipboard') |
|
||||||
const Web3 = require('web3') |
|
||||||
|
|
||||||
var css = csjs` |
|
||||||
#confirmsetting { |
|
||||||
z-index: 1; |
|
||||||
} |
|
||||||
.txInfoBox { |
|
||||||
} |
|
||||||
.wrapword { |
|
||||||
white-space: pre-wrap; /* Since CSS 2.1 */ |
|
||||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ |
|
||||||
white-space: -pre-wrap; /* Opera 4-6 */ |
|
||||||
white-space: -o-pre-wrap; /* Opera 7 */ |
|
||||||
word-wrap: break-word; /* Internet Explorer 5.5+ */ |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
function confirmDialog (tx, network, amount, gasEstimation, newGasPriceCb, initialParamsCb) { |
|
||||||
const onGasPriceChange = function () { |
|
||||||
var gasPrice = el.querySelector('#gasprice').value |
|
||||||
newGasPriceCb(gasPrice, (txFeeText, priceStatus) => { |
|
||||||
el.querySelector('#txfee').innerHTML = txFeeText |
|
||||||
el.gasPriceStatus = priceStatus |
|
||||||
el.txFee = { gasPrice } |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const onMaxFeeChange = function () { |
|
||||||
var maxFee = el.querySelector('#maxfee').value |
|
||||||
var confirmBtn = document.querySelector('#modal-footer-ok') |
|
||||||
var maxPriorityFee = el.querySelector('#maxpriorityfee').value |
|
||||||
if (parseInt(network.lastBlock.baseFeePerGas, 16) > Web3.utils.toWei(maxFee, 'Gwei')) { |
|
||||||
el.querySelector('#txfee').innerHTML = 'Transaction is invalid. Max fee should not be less than Base fee' |
|
||||||
el.gasPriceStatus = false |
|
||||||
confirmBtn.hidden = true |
|
||||||
return |
|
||||||
} else { |
|
||||||
el.gasPriceStatus = true |
|
||||||
confirmBtn.hidden = false |
|
||||||
} |
|
||||||
|
|
||||||
newGasPriceCb(maxFee, (txFeeText, priceStatus) => { |
|
||||||
el.querySelector('#txfee').innerHTML = txFeeText |
|
||||||
if (priceStatus) { |
|
||||||
confirmBtn.hidden = false |
|
||||||
} else { |
|
||||||
confirmBtn.hidden = true |
|
||||||
} |
|
||||||
el.gasPriceStatus = priceStatus |
|
||||||
el.txFee = { maxFee, maxPriorityFee, baseFeePerGas: network.lastBlock.baseFeePerGas } |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const el = yo` |
|
||||||
<div> |
|
||||||
<div class="text-dark">You are about to create a transaction on ${network.name} Network. Confirm the details to send the info to your provider. |
|
||||||
<br>The provider for many users is MetaMask. The provider will ask you to sign the transaction before it is sent to ${network.name} Network. |
|
||||||
</div> |
|
||||||
<div class="mt-3 ${css.txInfoBox}"> |
|
||||||
<div> |
|
||||||
<span class="text-dark mr-2">From:</span> |
|
||||||
<span>${tx.from}</span> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="text-dark mr-2">To:</span> |
|
||||||
<span>${tx.to ? tx.to : '(Contract Creation)'}</span> |
|
||||||
</div> |
|
||||||
<div class="d-flex align-items-center"> |
|
||||||
<span class="text-dark mr-2">Data:</span> |
|
||||||
<pre class="${css.wrapword} mb-0">${tx.data && tx.data.length > 50 ? tx.data.substring(0, 49) + '...' : tx.data} ${copyToClipboard(() => { return tx.data })}</pre> |
|
||||||
</div> |
|
||||||
<div class="mb-3"> |
|
||||||
<span class="text-dark mr-2">Amount:</span> |
|
||||||
<span>${amount} Ether</span> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="text-dark mr-2">Gas estimation:</span> |
|
||||||
<span>${gasEstimation}</span> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<span class="text-dark mr-2">Gas limit:</span> |
|
||||||
<span>${tx.gas}</span> |
|
||||||
</div> |
|
||||||
${ |
|
||||||
network.lastBlock.baseFeePerGas ? yo` |
|
||||||
<div class="align-items-center my-1" title="Represents the part of the tx fee that goes to the miner."> |
|
||||||
<div class='d-flex'> |
|
||||||
<span class="text-dark mr-2 text-nowrap">Max Priority fee:</span> |
|
||||||
<input class="form-control mr-1 text-right" style='height: 1.2rem; width: 6rem;' value="1" id='maxpriorityfee' /> |
|
||||||
<span title="visit https://ethgasstation.info for current gas price info.">Gwei</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="align-items-center my-1" title="Represents the maximum amount of fee that you will pay for this transaction. The minimun needs to be set to base fee."> |
|
||||||
<div class='d-flex'> |
|
||||||
<span class="text-dark mr-2 text-nowrap">Max fee (Not less than base fee ${Web3.utils.fromWei(Web3.utils.toBN(parseInt(network.lastBlock.baseFeePerGas, 16)), 'Gwei')} Gwei):</span> |
|
||||||
<input class="form-control mr-1 text-right" style='height: 1.2rem; width: 6rem;' id='maxfee' oninput=${onMaxFeeChange} /> |
|
||||||
<span>Gwei</span> |
|
||||||
<span class="text-dark ml-2"></span> |
|
||||||
</div> |
|
||||||
</div>` |
|
||||||
: yo`<div class="d-flex align-items-center my-1">
|
|
||||||
<span class="text-dark mr-2 text-nowrap">Gas price:</span> |
|
||||||
<input class="form-control mr-1 text-right" style='width: 40px; height: 28px;' id='gasprice' oninput=${onGasPriceChange} /> |
|
||||||
<span>Gwei (visit <a target='_blank' href='https://ethgasstation.info'>ethgasstation.info</a> for current gas price info.)</span> |
|
||||||
</div>` |
|
||||||
} |
|
||||||
<div class="mb-3"> |
|
||||||
<span class="text-dark mr-2">Max transaction fee:</span> |
|
||||||
<span class="text-warning" id='txfee'></span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="d-flex py-1 align-items-center custom-control custom-checkbox ${css.checkbox}"> |
|
||||||
<input class="form-check-input custom-control-input" id="confirmsetting" type="checkbox"> |
|
||||||
<label class="m-0 form-check-label custom-control-label" for="confirmsetting">Do not show this warning again.</label> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
initialParamsCb((txFeeText, gasPriceValue, gasPriceStatus) => { |
|
||||||
if (txFeeText) { |
|
||||||
el.querySelector('#txfee').innerHTML = txFeeText |
|
||||||
} |
|
||||||
if (el.querySelector('#gasprice') && gasPriceValue) { |
|
||||||
el.querySelector('#gasprice').value = gasPriceValue |
|
||||||
onGasPriceChange() |
|
||||||
} |
|
||||||
if (el.querySelector('#maxfee') && network && network.lastBlock && network.lastBlock.baseFeePerGas) { |
|
||||||
el.querySelector('#maxfee').value = Web3.utils.fromWei(Web3.utils.toBN(parseInt(network.lastBlock.baseFeePerGas, 16)), 'Gwei') |
|
||||||
onMaxFeeChange() |
|
||||||
} |
|
||||||
if (gasPriceStatus !== undefined) { |
|
||||||
el.gasPriceStatus = gasPriceStatus |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
return el |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = confirmDialog |
|
||||||
@ -1,83 +0,0 @@ |
|||||||
var yo = require('yo-yo') |
|
||||||
// -------------- copyToClipboard ----------------------
|
|
||||||
var csjs = require('csjs-inject') |
|
||||||
|
|
||||||
var css = csjs` |
|
||||||
.container |
|
||||||
{ |
|
||||||
display: none; |
|
||||||
position: fixed; |
|
||||||
border-radius: 2px; |
|
||||||
z-index: 1000; |
|
||||||
box-shadow: 0 0 4px var(--dark); |
|
||||||
} |
|
||||||
.liitem |
|
||||||
{ |
|
||||||
padding: 2px; |
|
||||||
padding-left: 6px; |
|
||||||
cursor: pointer; |
|
||||||
color: var(--text-dark); |
|
||||||
background-color: var(--light); |
|
||||||
} |
|
||||||
.liitem:hover |
|
||||||
{ |
|
||||||
background-color: var(--secondary); |
|
||||||
} |
|
||||||
#menuitems |
|
||||||
{ |
|
||||||
list-style: none; |
|
||||||
margin: 0px; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
module.exports = (event, items, linkItems) => { |
|
||||||
event.preventDefault() |
|
||||||
|
|
||||||
function hide (event, force) { |
|
||||||
if (container && container.parentElement && (force || (event.target !== container))) { |
|
||||||
container.parentElement.removeChild(container) |
|
||||||
} |
|
||||||
window.removeEventListener('click', hide) |
|
||||||
} |
|
||||||
|
|
||||||
const menu = Object.keys(items).map((item, index) => { |
|
||||||
const current = yo`<li id="menuitem${item.toLowerCase()}" class=${css.liitem}>${item}</li>` |
|
||||||
current.onclick = () => { hide(null, true); items[item]() } |
|
||||||
return current |
|
||||||
}) |
|
||||||
|
|
||||||
let menuForLinks = yo`` |
|
||||||
if (linkItems) { |
|
||||||
menuForLinks = Object.keys(linkItems).map((item, index) => { |
|
||||||
const current = yo`<li id="menuitem${item.toLowerCase()}" class=${css.liitem}><a href=${linkItems[item]} target="_blank">${item}</a></li>` |
|
||||||
current.onclick = () => { hide(null, true) } |
|
||||||
return current |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const container = yo` |
|
||||||
<div id="menuItemsContainer" class="p-1 ${css.container} bg-light shadow border"> |
|
||||||
<ul id='menuitems'>${menu} ${menuForLinks}</ul> |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
container.style.left = event.pageX + 'px' |
|
||||||
container.style.top = event.pageY + 'px' |
|
||||||
container.style.display = 'block' |
|
||||||
document.querySelector('body').appendChild(container) |
|
||||||
|
|
||||||
const menuItemsContainer = document.getElementById('menuItemsContainer') |
|
||||||
const boundary = menuItemsContainer.getBoundingClientRect() |
|
||||||
|
|
||||||
if (boundary.bottom > (window.innerHeight || document.documentElement.clientHeight)) { |
|
||||||
menuItemsContainer.style.position = 'absolute' |
|
||||||
menuItemsContainer.style.bottom = '10px' |
|
||||||
menuItemsContainer.style.top = null |
|
||||||
} |
|
||||||
|
|
||||||
setTimeout(() => { |
|
||||||
window.addEventListener('click', hide) |
|
||||||
}, 500) |
|
||||||
|
|
||||||
return { hide } |
|
||||||
} |
|
||||||
@ -1,39 +0,0 @@ |
|||||||
var yo = require('yo-yo') |
|
||||||
// -------------- copyToClipboard ----------------------
|
|
||||||
const copy = require('copy-to-clipboard') |
|
||||||
var addTooltip = require('./tooltip') |
|
||||||
// -------------- styling ----------------------
|
|
||||||
var csjs = require('csjs-inject') |
|
||||||
|
|
||||||
var css = csjs` |
|
||||||
.copyIcon { |
|
||||||
margin-left: 5px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-copy') { |
|
||||||
var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} far ${icon} p-2" data-id="copyToClipboardCopyIcon" aria-hidden="true"></i>` |
|
||||||
copyIcon.onclick = (event) => { |
|
||||||
event.stopPropagation() |
|
||||||
var copiableContent |
|
||||||
try { |
|
||||||
copiableContent = getContent() |
|
||||||
} catch (e) { |
|
||||||
addTooltip(e.message) |
|
||||||
return |
|
||||||
} |
|
||||||
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
|
|
||||||
try { |
|
||||||
if (typeof copiableContent !== 'string') { |
|
||||||
copiableContent = JSON.stringify(copiableContent, null, '\t') |
|
||||||
} |
|
||||||
} catch (e) {} |
|
||||||
copy(copiableContent) |
|
||||||
addTooltip('Copied value to clipboard.') |
|
||||||
} else { |
|
||||||
addTooltip('Cannot copy empty content!') |
|
||||||
} |
|
||||||
} |
|
||||||
return copyIcon |
|
||||||
} |
|
||||||
@ -1,131 +0,0 @@ |
|||||||
'use strict' |
|
||||||
var yo = require('yo-yo') |
|
||||||
var csjs = require('csjs-inject') |
|
||||||
|
|
||||||
var css = csjs` |
|
||||||
.containerDraggableModal { |
|
||||||
position: absolute; |
|
||||||
z-index: 1000; |
|
||||||
text-align: center; |
|
||||||
width: 500px; |
|
||||||
height: 500px; |
|
||||||
overflow-y: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.headerDraggableModal { |
|
||||||
cursor: move; |
|
||||||
z-index: 10; |
|
||||||
text-overflow: ellipsis; |
|
||||||
overflow-x: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.modalActions { |
|
||||||
float: right; |
|
||||||
} |
|
||||||
|
|
||||||
.modalAction { |
|
||||||
padding-right: 1px; |
|
||||||
padding-left: 1px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
module.exports = |
|
||||||
class DraggableContent { |
|
||||||
constructor (closeCb) { |
|
||||||
this.closeCb = closeCb |
|
||||||
this.isMaximised = false |
|
||||||
} |
|
||||||
|
|
||||||
render (title, url, content) { |
|
||||||
this.content = content |
|
||||||
var el = yo` |
|
||||||
<div class=${css.containerDraggableModal}> |
|
||||||
<div> |
|
||||||
<div class="${css.headerDraggableModal} title" title=${title}><span title="${title}" >${title}</span><span title="${url}" > - ${url}</span> |
|
||||||
<div class=${css.modalActions}> |
|
||||||
<i onclick=${() => { this.minimize() }} class="fas fa-window-minimize ${css.modalAction}"></i> |
|
||||||
<i onclick=${() => { this.maximise() }} class="fas fa-window-maximize ${css.modalAction}"></i> |
|
||||||
<i onclick=${() => { this.close() }} class="fas fa-window-close-o ${css.modalAction}"></i> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
${content} |
|
||||||
</div> ` |
|
||||||
dragElement(el) |
|
||||||
el.style.top = '20%' |
|
||||||
el.style.left = '50%' |
|
||||||
this.el = el |
|
||||||
return el |
|
||||||
} |
|
||||||
|
|
||||||
setTitle (title) { |
|
||||||
this.el.querySelector('.title span').innerHTML = title |
|
||||||
} |
|
||||||
|
|
||||||
minimize () { |
|
||||||
this.isMaximised = false |
|
||||||
this.content.style.display = 'none' |
|
||||||
this.el.style.height = 'inherit' |
|
||||||
this.el.style.width = '150px' |
|
||||||
this.el.querySelector('.title').style.width = '146px' |
|
||||||
} |
|
||||||
|
|
||||||
maximise () { |
|
||||||
this.content.style.display = 'block' |
|
||||||
var body = document.querySelector('body') |
|
||||||
this.el.style.height = this.isMaximised ? '500px' : body.offsetHeight + 'px' |
|
||||||
this.el.style.width = this.isMaximised ? '500px' : body.offsetWidth + 'px' |
|
||||||
this.isMaximised = !this.isMaximised |
|
||||||
this.el.style.top = this.isMaximised ? '0%' : '20%' |
|
||||||
this.el.style.left = this.isMaximised ? '0%' : '50%' |
|
||||||
this.el.querySelector('.title').style.width = 'inherit' |
|
||||||
} |
|
||||||
|
|
||||||
close () { |
|
||||||
if (this.closeCb) this.closeCb() |
|
||||||
if (this.el.parentElement) { |
|
||||||
this.el.parentElement.removeChild(this.el) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function dragElement (elmnt) { |
|
||||||
var pos1 = 0 |
|
||||||
var pos2 = 0 |
|
||||||
var pos3 = 0 |
|
||||||
var pos4 = 0 |
|
||||||
|
|
||||||
elmnt.querySelector('.title').onmousedown = dragMouseDown |
|
||||||
|
|
||||||
function dragMouseDown (e) { |
|
||||||
e = e || window.event |
|
||||||
if (e.button !== 0) return |
|
||||||
e.preventDefault() |
|
||||||
// get the mouse cursor position at startup:
|
|
||||||
pos3 = e.clientX |
|
||||||
pos4 = e.clientY |
|
||||||
document.onmouseup = closeDragElement |
|
||||||
// call a function whenever the cursor moves:
|
|
||||||
document.onmousemove = elementDrag |
|
||||||
} |
|
||||||
|
|
||||||
function elementDrag (e) { |
|
||||||
e = e || window.event |
|
||||||
e.preventDefault() |
|
||||||
// calculate the new cursor position:
|
|
||||||
pos1 = pos3 - e.clientX |
|
||||||
pos2 = pos4 - e.clientY |
|
||||||
pos3 = e.clientX |
|
||||||
pos4 = e.clientY |
|
||||||
// set the element's new position:
|
|
||||||
elmnt.style.top = (elmnt.offsetTop - pos2) + 'px' |
|
||||||
elmnt.style.left = (elmnt.offsetLeft - pos1) + 'px' |
|
||||||
} |
|
||||||
|
|
||||||
function closeDragElement () { |
|
||||||
/* stop moving when mouse button is released: */ |
|
||||||
document.onmouseup = null |
|
||||||
document.onmousemove = null |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,128 +0,0 @@ |
|||||||
var yo = require('yo-yo') |
|
||||||
var EventManager = require('../../lib/events') |
|
||||||
|
|
||||||
// -------------- styling ----------------------
|
|
||||||
|
|
||||||
var css = require('./styles/dropdown-styles') |
|
||||||
|
|
||||||
/* USAGE: |
|
||||||
|
|
||||||
var dropdown = new Dropdown({ |
|
||||||
options: [ |
|
||||||
'knownTransaction', |
|
||||||
'unknownTransaction', |
|
||||||
'log', |
|
||||||
'info', |
|
||||||
'error' |
|
||||||
], |
|
||||||
defaults: ['knownTransaction'] |
|
||||||
}) |
|
||||||
dropdown.event.register('deselect', function (label) { }) |
|
||||||
dropdown.event.register('select', function (label) { }) |
|
||||||
|
|
||||||
*/ |
|
||||||
class Dropdown { |
|
||||||
constructor (opts = {}) { |
|
||||||
var self = this |
|
||||||
self.event = new EventManager() |
|
||||||
self.data = { |
|
||||||
_options: opts.options || [], |
|
||||||
_dependencies: opts.dependencies || [], |
|
||||||
selected: opts.defaults || [], |
|
||||||
_elements: [] |
|
||||||
} |
|
||||||
self._view = {} |
|
||||||
self._api = opts.api |
|
||||||
self._events = opts.events |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
var self = this |
|
||||||
if (self._view.el) return self._view.el |
|
||||||
self._view.selected = yo` |
|
||||||
<div class=${css.selectbox}> |
|
||||||
<span class=${css.selected}> [${self.data.selected.length}] ${self.data.selected.join(', ')}</span> |
|
||||||
<i class="${css.icon} fas fa-caret-down"></i> |
|
||||||
</div> |
|
||||||
` |
|
||||||
self._view.el = yo` |
|
||||||
<div name="dropdown" class="${css.dropdown} form-control form-control-sm" onclick=${show}> |
|
||||||
${self._view.selected} |
|
||||||
<div class="${css.options} bg-light" style="display: none;}"> |
|
||||||
${self.data._options.map(label => { |
|
||||||
const index = self.data._elements.length |
|
||||||
var input = yo` |
|
||||||
<input |
|
||||||
data-idx=${index} |
|
||||||
onchange=${emit} |
|
||||||
type="${index === 2 ? 'checkbox' : 'radio'}" |
|
||||||
id="${label}" |
|
||||||
/> |
|
||||||
` |
|
||||||
if (self.data.selected.indexOf(label) !== -1) { |
|
||||||
input.checked = true |
|
||||||
self.event.trigger('select', [label]) |
|
||||||
} |
|
||||||
self.data._elements.push(input) |
|
||||||
return yo` |
|
||||||
<div class=${css.option}> |
|
||||||
${input} |
|
||||||
<label class="text-dark" for="${label}">${label}</label> |
|
||||||
</div> |
|
||||||
` |
|
||||||
})} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
return self._view.el |
|
||||||
function emit (event) { |
|
||||||
var input = event.currentTarget |
|
||||||
var label = input.nextSibling.innerText |
|
||||||
if (input.checked) { |
|
||||||
self.data.selected.push(label) |
|
||||||
if (event.type === 'change') { |
|
||||||
self.event.trigger('select', [label]) |
|
||||||
updateDependencies(label) |
|
||||||
} |
|
||||||
} else { |
|
||||||
var idx = self.data.selected.indexOf(label) |
|
||||||
self.data.selected.splice(idx, 1) |
|
||||||
if (event.type === 'change') { |
|
||||||
self.event.trigger('deselect', [label]) |
|
||||||
updateDependencies(label) |
|
||||||
} |
|
||||||
} |
|
||||||
self._view.selected.children[0].innerText = `[${self.data.selected.length}] ${self.data.selected.join(', ')}` |
|
||||||
} |
|
||||||
function updateDependencies (changed) { |
|
||||||
if (self.data._dependencies[changed]) { |
|
||||||
for (var dep in self.data._dependencies[changed]) { |
|
||||||
var label = self.data._dependencies[changed][dep] |
|
||||||
var el = self.data._elements[self.data._options.indexOf(label)] |
|
||||||
el.checked = !el.checked |
|
||||||
emit({ currentTarget: el, type: 'changeDependencies' }) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
function show (event) { |
|
||||||
event.stopPropagation() |
|
||||||
var options = event.currentTarget.children[1] |
|
||||||
var parent = event.target.parentElement |
|
||||||
var isOption = parent === options || parent.parentElement === options |
|
||||||
if (isOption) return |
|
||||||
if (options.style.display === 'none') { |
|
||||||
options.style.display = '' |
|
||||||
document.body.addEventListener('click', handler) |
|
||||||
} else { |
|
||||||
options.style.display = 'none' |
|
||||||
document.body.removeEventListener('click', handler) |
|
||||||
} |
|
||||||
function handler (event) { |
|
||||||
options.style.display = 'none' |
|
||||||
document.body.removeEventListener('click', handler) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = Dropdown |
|
||||||
@ -1,228 +0,0 @@ |
|||||||
'use strict' |
|
||||||
|
|
||||||
var yo = require('yo-yo') |
|
||||||
var css = require('../../universal-dapp-styles') |
|
||||||
var copyToClipboard = require('./copy-to-clipboard') |
|
||||||
var remixLib = require('@remix-project/remix-lib') |
|
||||||
var txFormat = remixLib.execution.txFormat |
|
||||||
|
|
||||||
class MultiParamManager { |
|
||||||
/** |
|
||||||
* |
|
||||||
* @param {bool} lookupOnly |
|
||||||
* @param {Object} funABI |
|
||||||
* @param {Function} clickMultiCallBack |
|
||||||
* @param {string} inputs |
|
||||||
* @param {string} title |
|
||||||
* @param {string} evmBC |
|
||||||
* |
|
||||||
*/ |
|
||||||
constructor (lookupOnly, funABI, clickCallBack, inputs, title, evmBC, isDeploy) { |
|
||||||
this.lookupOnly = lookupOnly |
|
||||||
this.funABI = funABI |
|
||||||
this.clickCallBack = clickCallBack |
|
||||||
this.inputs = inputs |
|
||||||
this.title = title |
|
||||||
this.evmBC = evmBC |
|
||||||
this.basicInputField = null |
|
||||||
this.multiFields = null |
|
||||||
this.isDeploy = isDeploy |
|
||||||
} |
|
||||||
|
|
||||||
switchMethodViewOn () { |
|
||||||
this.contractActionsContainerSingle.style.display = 'none' |
|
||||||
this.contractActionsContainerMulti.style.display = 'flex' |
|
||||||
this.makeMultiVal() |
|
||||||
} |
|
||||||
|
|
||||||
switchMethodViewOff () { |
|
||||||
this.contractActionsContainerSingle.style.display = 'flex' |
|
||||||
this.contractActionsContainerMulti.style.display = 'none' |
|
||||||
var multiValString = this.getMultiValsString() |
|
||||||
if (multiValString) this.basicInputField.value = multiValString |
|
||||||
} |
|
||||||
|
|
||||||
getValue (item, index) { |
|
||||||
var valStr = item.value.join('') |
|
||||||
return valStr |
|
||||||
} |
|
||||||
|
|
||||||
getMultiValsString () { |
|
||||||
var valArray = this.multiFields.querySelectorAll('input') |
|
||||||
var ret = '' |
|
||||||
var valArrayTest = [] |
|
||||||
|
|
||||||
for (var j = 0; j < valArray.length; j++) { |
|
||||||
if (ret !== '') ret += ',' |
|
||||||
var elVal = valArray[j].value |
|
||||||
valArrayTest.push(elVal) |
|
||||||
elVal = elVal.replace(/(^|,\s+|,)(\d+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted number by quoted number
|
|
||||||
elVal = elVal.replace(/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted hex string by quoted hex string
|
|
||||||
try { |
|
||||||
JSON.parse(elVal) |
|
||||||
} catch (e) { |
|
||||||
elVal = '"' + elVal + '"' |
|
||||||
} |
|
||||||
ret += elVal |
|
||||||
} |
|
||||||
var valStringTest = valArrayTest.join('') |
|
||||||
if (valStringTest) { |
|
||||||
return ret |
|
||||||
} else { |
|
||||||
return '' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
emptyInputs () { |
|
||||||
var valArray = this.multiFields.querySelectorAll('input') |
|
||||||
for (var k = 0; k < valArray.length; k++) { |
|
||||||
valArray[k].value = '' |
|
||||||
} |
|
||||||
this.basicInputField.value = '' |
|
||||||
} |
|
||||||
|
|
||||||
makeMultiVal () { |
|
||||||
var inputString = this.basicInputField.value |
|
||||||
if (inputString) { |
|
||||||
inputString = inputString.replace(/(^|,\s+|,)(\d+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted number by quoted number
|
|
||||||
inputString = inputString.replace(/(^|,\s+|,)(0[xX][0-9a-fA-F]+)(\s+,|,|$)/g, '$1"$2"$3') // replace non quoted hex string by quoted hex string
|
|
||||||
var inputJSON = JSON.parse('[' + inputString + ']') |
|
||||||
var multiInputs = this.multiFields.querySelectorAll('input') |
|
||||||
for (var k = 0; k < multiInputs.length; k++) { |
|
||||||
if (inputJSON[k]) { |
|
||||||
multiInputs[k].value = JSON.stringify(inputJSON[k]) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
createMultiFields () { |
|
||||||
if (this.funABI.inputs) { |
|
||||||
return yo`<div>
|
|
||||||
${this.funABI.inputs.map(function (inp) { |
|
||||||
return yo`<div class="${css.multiArg}"><label for="${inp.name}"> ${inp.name}: </label><input class="form-control" placeholder="${inp.type}" title="${inp.name}" data-id="multiParamManagerInput${inp.name}"></div>` |
|
||||||
})} |
|
||||||
</div>` |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
var title |
|
||||||
if (this.title) { |
|
||||||
title = this.title |
|
||||||
} else if (this.funABI.name) { |
|
||||||
title = this.funABI.name |
|
||||||
} else { |
|
||||||
title = this.funABI.type === 'receive' ? '(receive)' : '(fallback)' |
|
||||||
} |
|
||||||
|
|
||||||
this.basicInputField = yo`<input class="form-control" data-id="multiParamManagerBasicInputField"></input>` |
|
||||||
this.basicInputField.setAttribute('placeholder', this.inputs) |
|
||||||
this.basicInputField.setAttribute('title', this.inputs) |
|
||||||
this.basicInputField.setAttribute('data-id', this.inputs) |
|
||||||
|
|
||||||
var onClick = () => { |
|
||||||
this.clickCallBack(this.funABI.inputs, this.basicInputField.value) |
|
||||||
} |
|
||||||
const width = this.isDeploy ? '' : 'w-50' |
|
||||||
const funcButton = yo`<button onclick=${() => onClick()} class="${css.instanceButton} ${width} btn btn-sm" data-id="multiParamManagerFuncButton">${title}</button>` |
|
||||||
this.contractActionsContainerSingle = yo` |
|
||||||
<div class="${css.contractActionsContainerSingle} pt-2"> |
|
||||||
${funcButton} |
|
||||||
${this.basicInputField} |
|
||||||
<i class="fas fa-angle-down ${css.methCaret}" onclick=${() => this.switchMethodViewOn()} title=${title} ></i> |
|
||||||
</div>` |
|
||||||
|
|
||||||
this.multiFields = this.createMultiFields() |
|
||||||
|
|
||||||
var multiOnClick = () => { |
|
||||||
var valsString = this.getMultiValsString() |
|
||||||
if (valsString) { |
|
||||||
this.clickCallBack(this.funABI.inputs, valsString) |
|
||||||
} else { |
|
||||||
this.clickCallBack(this.funABI.inputs, '') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
var expandedButton = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}" data-id="multiParamManagerExpandedButton"></button>` |
|
||||||
|
|
||||||
this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" >
|
|
||||||
<div class="${css.contractActionsContainerMultiInner} text-dark" > |
|
||||||
<div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}"> |
|
||||||
<div class="${css.multiTitle} run-instance-multi-title">${title}</div> |
|
||||||
<i class='fas fa-angle-up ${css.methCaret}'></i> |
|
||||||
</div> |
|
||||||
${this.multiFields} |
|
||||||
<div class="${css.group} ${css.multiArg}" > |
|
||||||
${copyToClipboard( |
|
||||||
() => { |
|
||||||
var multiString = this.getMultiValsString() |
|
||||||
var multiJSON = JSON.parse('[' + multiString + ']') |
|
||||||
var encodeObj |
|
||||||
if (this.evmBC) { |
|
||||||
encodeObj = txFormat.encodeData(this.funABI, multiJSON, this.evmBC) |
|
||||||
} else { |
|
||||||
encodeObj = txFormat.encodeData(this.funABI, multiJSON) |
|
||||||
} |
|
||||||
if (encodeObj.error) { |
|
||||||
throw new Error(encodeObj.error) |
|
||||||
} else { |
|
||||||
return encodeObj.data |
|
||||||
} |
|
||||||
}, 'Encode values of input fields & copy to clipboard', 'fa-clipboard')} |
|
||||||
${expandedButton} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div>` |
|
||||||
|
|
||||||
var contractProperty = yo` |
|
||||||
<div class="${css.contractProperty}"> |
|
||||||
${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti} |
|
||||||
</div> |
|
||||||
` |
|
||||||
if (this.lookupOnly) { |
|
||||||
// call. stateMutability is either pure or view
|
|
||||||
expandedButton.setAttribute('title', (title + ' - call')) |
|
||||||
expandedButton.innerHTML = 'call' |
|
||||||
expandedButton.classList.add('btn-info') |
|
||||||
expandedButton.setAttribute('data-id', (title + ' - call')) |
|
||||||
funcButton.setAttribute('title', (title + ' - call')) |
|
||||||
funcButton.classList.add('btn-info') |
|
||||||
funcButton.setAttribute('data-id', (title + ' - call')) |
|
||||||
} else if (this.funABI.stateMutability === 'payable' || this.funABI.payable) { |
|
||||||
// transact. stateMutability = payable
|
|
||||||
expandedButton.setAttribute('title', (title + ' - transact (payable)')) |
|
||||||
expandedButton.innerHTML = 'transact' |
|
||||||
expandedButton.classList.add('btn-danger') |
|
||||||
expandedButton.setAttribute('data-id', (title + ' - transact (payable)')) |
|
||||||
funcButton.setAttribute('title', (title + ' - transact (payable)')) |
|
||||||
funcButton.classList.add('btn-danger') |
|
||||||
funcButton.setAttribute('data-id', (title + ' - transact (payable)')) |
|
||||||
} else { |
|
||||||
// transact. stateMutability = nonpayable
|
|
||||||
expandedButton.setAttribute('title', (title + ' - transact (not payable)')) |
|
||||||
expandedButton.innerHTML = 'transact' |
|
||||||
expandedButton.classList.add('btn-warning') |
|
||||||
expandedButton.setAttribute('data-id', (title + ' - transact (not payable)')) |
|
||||||
funcButton.classList.add('btn-warning') |
|
||||||
funcButton.setAttribute('title', (title + ' - transact (not payable)')) |
|
||||||
funcButton.setAttribute('data-id', (title + ' - transact (not payable)')) |
|
||||||
} |
|
||||||
|
|
||||||
if (this.funABI.inputs && this.funABI.inputs.length > 0) { |
|
||||||
contractProperty.classList.add(css.hasArgs) |
|
||||||
} else if (this.funABI.type === 'fallback' || this.funABI.type === 'receive') { |
|
||||||
contractProperty.classList.add(css.hasArgs) |
|
||||||
this.basicInputField.setAttribute('title', `'(${this.funABI.type}')`) // probably should pass name instead
|
|
||||||
this.contractActionsContainerSingle.querySelector('i').style.visibility = 'hidden' |
|
||||||
this.basicInputField.setAttribute('data-id', `'(${this.funABI.type}')`) |
|
||||||
} else { |
|
||||||
this.contractActionsContainerSingle.querySelector('i').style.visibility = 'hidden' |
|
||||||
this.basicInputField.style.visibility = 'hidden' |
|
||||||
} |
|
||||||
|
|
||||||
return contractProperty |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = MultiParamManager |
|
||||||
@ -1,153 +0,0 @@ |
|||||||
'use strict' |
|
||||||
|
|
||||||
var $ = require('jquery') |
|
||||||
var yo = require('yo-yo') |
|
||||||
const { default: Registry } = require('../state/registry') |
|
||||||
var css = require('./styles/renderer-styles') |
|
||||||
|
|
||||||
/** |
|
||||||
* After refactor, the renderer is only used to render error/warning |
|
||||||
* TODO: This don't need to be an object anymore. Simplify and just export the renderError function. |
|
||||||
* |
|
||||||
*/ |
|
||||||
function Renderer (service) { |
|
||||||
const self = this |
|
||||||
self.service = service |
|
||||||
self._components = {} |
|
||||||
self._components.registry = Registry.getInstance() |
|
||||||
// dependencies
|
|
||||||
self._deps = { |
|
||||||
fileManager: self._components.registry.get('filemanager').api, |
|
||||||
config: self._components.registry.get('config').api |
|
||||||
} |
|
||||||
if (document && document.head) { |
|
||||||
document.head.appendChild(css) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
Renderer.prototype._error = function (file, error) { |
|
||||||
const self = this |
|
||||||
if (file === self._deps.config.get('currentFile')) { |
|
||||||
self.service.call('editor', 'addAnnotation', error, file) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
Renderer.prototype._errorClick = function (errFile, errLine, errCol) { |
|
||||||
const self = this |
|
||||||
const editor = self._components.registry.get('editor').api |
|
||||||
if (errFile !== self._deps.config.get('currentFile')) { |
|
||||||
// TODO: refactor with this._components.contextView.jumpTo
|
|
||||||
var provider = self._deps.fileManager.fileProviderOf(errFile) |
|
||||||
if (provider) { |
|
||||||
provider.exists(errFile).then(exist => { |
|
||||||
self._deps.fileManager.open(errFile) |
|
||||||
editor.gotoLine(errLine, errCol) |
|
||||||
}).catch(error => { |
|
||||||
if (error) return console.log(error) |
|
||||||
}) |
|
||||||
} |
|
||||||
} else { |
|
||||||
editor.gotoLine(errLine, errCol) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function getPositionDetails (msg) { |
|
||||||
const result = {} |
|
||||||
|
|
||||||
// To handle some compiler warning without location like SPDX license warning etc
|
|
||||||
if (!msg.includes(':')) return { errLine: -1, errCol: -1, errFile: msg } |
|
||||||
|
|
||||||
// extract line / column
|
|
||||||
let position = msg.match(/^(.*?):([0-9]*?):([0-9]*?)?/) |
|
||||||
result.errLine = position ? parseInt(position[2]) - 1 : -1 |
|
||||||
result.errCol = position ? parseInt(position[3]) : -1 |
|
||||||
|
|
||||||
// extract file
|
|
||||||
position = msg.match(/^(https:.*?|http:.*?|.*?):/) |
|
||||||
result.errFile = position ? position[1] : '' |
|
||||||
return result |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* format msg like error or warning, |
|
||||||
* |
|
||||||
* @param {String or DOMElement} message |
|
||||||
* @param {DOMElement} container |
|
||||||
* @param {Object} options { |
|
||||||
* useSpan, |
|
||||||
* noAnnotations, |
|
||||||
* click:(Function), |
|
||||||
* type:( |
|
||||||
* warning, |
|
||||||
* error |
|
||||||
* ), |
|
||||||
* errFile, |
|
||||||
* errLine, |
|
||||||
* errCol |
|
||||||
* } |
|
||||||
*/ |
|
||||||
|
|
||||||
Renderer.prototype.error = function (message, container, opt) { |
|
||||||
if (!message) return |
|
||||||
if (container === undefined) return |
|
||||||
opt = opt || {} |
|
||||||
|
|
||||||
var text |
|
||||||
if (typeof message === 'string') { |
|
||||||
text = message |
|
||||||
message = yo`<span>${message}</span>` |
|
||||||
} else if (message.innerText) { |
|
||||||
text = message.innerText |
|
||||||
} |
|
||||||
|
|
||||||
// ^ e.g:
|
|
||||||
// browser/gm.sol: Warning: Source file does not specify required compiler version! Consider adding "pragma solidity ^0.6.12
|
|
||||||
// https://github.com/OpenZeppelin/openzeppelin-contracts/blob/release-v3.2.0/contracts/introspection/IERC1820Registry.sol:3:1: ParserError: Source file requires different compiler version (current compiler is 0.7.4+commit.3f05b770.Emscripten.clang) - note that nightly builds are considered to be strictly less than the released version
|
|
||||||
|
|
||||||
let position = getPositionDetails(text) |
|
||||||
|
|
||||||
// For compiler version 0.8.0 and upcoming versions, errors and warning will be reported in a different way
|
|
||||||
// Above method regex will return type of error as 'errFile'
|
|
||||||
// Comparison of 'errFile' with passed error type will ensure the reporter type
|
|
||||||
if (!position.errFile || (opt.errorType && opt.errorType === position.errFile)) { |
|
||||||
// Updated error reported includes '-->' before file details
|
|
||||||
const errorDetails = text.split('-->') |
|
||||||
// errorDetails[1] will have file details
|
|
||||||
if (errorDetails.length > 1) position = getPositionDetails(errorDetails[1]) |
|
||||||
} |
|
||||||
|
|
||||||
opt.errLine = position.errLine |
|
||||||
opt.errCol = position.errCol |
|
||||||
opt.errFile = position.errFile.trim() |
|
||||||
|
|
||||||
if (!opt.noAnnotations && opt.errFile) { |
|
||||||
this._error(opt.errFile, { |
|
||||||
row: opt.errLine, |
|
||||||
column: opt.errCol, |
|
||||||
text: text, |
|
||||||
type: opt.type |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
var $pre = $(opt.useSpan ? yo`<span></span>` : yo`<pre></pre>`).html(message) |
|
||||||
|
|
||||||
const classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning' |
|
||||||
var $error = $(yo`<div class="sol ${opt.type} ${classList}" data-id="${opt.errFile}"><div class="close" data-id="renderer"><i class="fas fa-times"></i></div></div>`).prepend($pre) |
|
||||||
$(container).append($error) |
|
||||||
|
|
||||||
$error.click((ev) => { |
|
||||||
if (opt.click) { |
|
||||||
opt.click(message) |
|
||||||
} else if (opt.errFile !== undefined && opt.errLine !== undefined && opt.errCol !== undefined) { |
|
||||||
this._errorClick(opt.errFile, opt.errLine, opt.errCol) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
$error.find('.close').click(function (ev) { |
|
||||||
ev.preventDefault() |
|
||||||
$error.remove() |
|
||||||
return false |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = Renderer |
|
||||||
@ -1,109 +0,0 @@ |
|||||||
const yo = require('yo-yo') |
|
||||||
const remixLib = require('@remix-project/remix-lib') |
|
||||||
const confirmDialog = require('./confirmDialog') |
|
||||||
const modalCustom = require('./modal-dialog-custom') |
|
||||||
const modalDialog = require('./modaldialog') |
|
||||||
const typeConversion = remixLib.execution.typeConversion |
|
||||||
const Web3 = require('web3') |
|
||||||
|
|
||||||
module.exports = { |
|
||||||
getCallBacksWithContext: (udappUI, blockchain) => { |
|
||||||
const callbacks = {} |
|
||||||
callbacks.confirmationCb = confirmationCb |
|
||||||
callbacks.continueCb = continueCb |
|
||||||
callbacks.promptCb = promptCb |
|
||||||
callbacks.udappUI = udappUI |
|
||||||
callbacks.blockchain = blockchain |
|
||||||
return callbacks |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const continueCb = function (error, continueTxExecution, cancelCb) { |
|
||||||
if (error) { |
|
||||||
const msg = typeof error !== 'string' ? error.message : error |
|
||||||
modalDialog( |
|
||||||
'Gas estimation failed', |
|
||||||
yo` |
|
||||||
<div>Gas estimation errored with the following message (see below). |
|
||||||
The transaction execution will likely fail. Do you want to force sending? <br>${msg}</div> |
|
||||||
`,
|
|
||||||
{ |
|
||||||
label: 'Send Transaction', |
|
||||||
fn: () => continueTxExecution() |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Cancel Transaction', |
|
||||||
fn: () => cancelCb() |
|
||||||
} |
|
||||||
) |
|
||||||
} else { |
|
||||||
continueTxExecution() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const promptCb = function (okCb, cancelCb) { |
|
||||||
modalCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb) |
|
||||||
} |
|
||||||
|
|
||||||
const confirmationCb = function (network, tx, gasEstimation, continueTxExecution, cancelCb) { |
|
||||||
const self = this |
|
||||||
if (network.name !== 'Main') { |
|
||||||
return continueTxExecution(null) |
|
||||||
} |
|
||||||
var amount = Web3.utils.fromWei(typeConversion.toInt(tx.value), 'ether') |
|
||||||
var content = confirmDialog(tx, network, amount, gasEstimation, |
|
||||||
(gasPrice, cb) => { |
|
||||||
let txFeeText, priceStatus |
|
||||||
// TODO: this try catch feels like an anti pattern, can/should be
|
|
||||||
// removed, but for now keeping the original logic
|
|
||||||
try { |
|
||||||
var fee = Web3.utils.toBN(tx.gas).mul(Web3.utils.toBN(Web3.utils.toWei(gasPrice.toString(10), 'gwei'))) |
|
||||||
txFeeText = ' ' + Web3.utils.fromWei(fee.toString(10), 'ether') + ' Ether' |
|
||||||
priceStatus = true |
|
||||||
} catch (e) { |
|
||||||
txFeeText = ' Please fix this issue before sending any transaction. ' + e.message |
|
||||||
priceStatus = false |
|
||||||
} |
|
||||||
cb(txFeeText, priceStatus) |
|
||||||
}, |
|
||||||
(cb) => { |
|
||||||
self.blockchain.web3().eth.getGasPrice((error, gasPrice) => { |
|
||||||
const warnMessage = ' Please fix this issue before sending any transaction. ' |
|
||||||
if (error) { |
|
||||||
return cb('Unable to retrieve the current network gas price.' + warnMessage + error) |
|
||||||
} |
|
||||||
try { |
|
||||||
var gasPriceValue = Web3.utils.fromWei(gasPrice.toString(10), 'gwei') |
|
||||||
cb(null, gasPriceValue) |
|
||||||
} catch (e) { |
|
||||||
cb(warnMessage + e.message, null, false) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
) |
|
||||||
modalDialog( |
|
||||||
'Confirm transaction', |
|
||||||
content, |
|
||||||
{ |
|
||||||
label: 'Confirm', |
|
||||||
fn: () => { |
|
||||||
self.blockchain.config.setUnpersistedProperty( |
|
||||||
'doNotShowTransactionConfirmationAgain', |
|
||||||
content.querySelector('input#confirmsetting').checked |
|
||||||
) |
|
||||||
// TODO: check if this is check is still valid given the refactor
|
|
||||||
if (!content.gasPriceStatus) { |
|
||||||
cancelCb('Given transaction fee is not correct') |
|
||||||
} else { |
|
||||||
continueTxExecution(content.txFee) |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Cancel', |
|
||||||
fn: () => { |
|
||||||
return cancelCb('Transaction canceled by user.') |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,52 +0,0 @@ |
|||||||
var yo = require('yo-yo') |
|
||||||
|
|
||||||
var css = yo`<style>
|
|
||||||
.sol.success, |
|
||||||
.sol.error, |
|
||||||
.sol.warning { |
|
||||||
white-space: pre-line; |
|
||||||
word-wrap: break-word; |
|
||||||
cursor: pointer; |
|
||||||
position: relative; |
|
||||||
margin: 0.5em 0 1em 0; |
|
||||||
border-radius: 5px; |
|
||||||
line-height: 20px; |
|
||||||
padding: 8px 15px; |
|
||||||
} |
|
||||||
|
|
||||||
.sol.success pre, |
|
||||||
.sol.error pre, |
|
||||||
.sol.warning pre { |
|
||||||
white-space: pre-line; |
|
||||||
overflow-y: hidden; |
|
||||||
background-color: transparent; |
|
||||||
margin: 0; |
|
||||||
font-size: 12px; |
|
||||||
border: 0 none; |
|
||||||
padding: 0; |
|
||||||
border-radius: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.sol.success .close, |
|
||||||
.sol.error .close, |
|
||||||
.sol.warning .close { |
|
||||||
white-space: pre-line; |
|
||||||
font-weight: bold; |
|
||||||
position: absolute; |
|
||||||
color: hsl(0, 0%, 0%); /* black in style-guide.js */ |
|
||||||
top: 0; |
|
||||||
right: 0; |
|
||||||
padding: 0.5em; |
|
||||||
} |
|
||||||
|
|
||||||
.sol.error { |
|
||||||
} |
|
||||||
|
|
||||||
.sol.warning { |
|
||||||
} |
|
||||||
|
|
||||||
.sol.success { |
|
||||||
/* background-color: // styles.rightPanel.message_Success_BackgroundColor; */ |
|
||||||
}</style>` |
|
||||||
|
|
||||||
module.exports = css |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
import yo from 'yo-yo' |
|
||||||
export function basicLogo () { |
|
||||||
return yo`<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
|
|
||||||
<path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z"/> |
|
||||||
<path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z"/> |
|
||||||
<path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z"/> |
|
||||||
</svg>` |
|
||||||
} |
|
||||||
@ -1,590 +0,0 @@ |
|||||||
'use strict' |
|
||||||
var yo = require('yo-yo') |
|
||||||
var copyToClipboard = require('./copy-to-clipboard') |
|
||||||
|
|
||||||
// -------------- styling ----------------------
|
|
||||||
var csjs = require('csjs-inject') |
|
||||||
var remixLib = require('@remix-project/remix-lib') |
|
||||||
|
|
||||||
var EventManager = require('../../lib/events') |
|
||||||
var helper = require('../../lib/helper') |
|
||||||
var modalDialog = require('./modal-dialog-custom') |
|
||||||
const { default: Registry } = require('../state/registry') |
|
||||||
|
|
||||||
var typeConversion = remixLib.execution.typeConversion |
|
||||||
|
|
||||||
var css = csjs` |
|
||||||
.log { |
|
||||||
display: flex; |
|
||||||
cursor: pointer; |
|
||||||
align-items: center; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.log:hover { |
|
||||||
opacity: 0.8; |
|
||||||
} |
|
||||||
.arrow { |
|
||||||
color: var(--text-info); |
|
||||||
font-size: 20px; |
|
||||||
cursor: pointer; |
|
||||||
display: flex; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
.arrow:hover { |
|
||||||
color: var(--secondary); |
|
||||||
} |
|
||||||
.txLog { |
|
||||||
} |
|
||||||
.txStatus { |
|
||||||
display: flex; |
|
||||||
font-size: 20px; |
|
||||||
margin-right: 20px; |
|
||||||
float: left; |
|
||||||
} |
|
||||||
.succeeded { |
|
||||||
color: var(--success); |
|
||||||
} |
|
||||||
.failed { |
|
||||||
color: var(--danger); |
|
||||||
} |
|
||||||
.notavailable { |
|
||||||
} |
|
||||||
.call { |
|
||||||
font-size: 7px; |
|
||||||
border-radius: 50%; |
|
||||||
min-width: 20px; |
|
||||||
min-height: 20px; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
color: var(--text-info); |
|
||||||
text-transform: uppercase; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
.txItem { |
|
||||||
color: var(--text-info); |
|
||||||
margin-right: 5px; |
|
||||||
float: left; |
|
||||||
} |
|
||||||
.txItemTitle { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
.tx { |
|
||||||
color: var(--text-info); |
|
||||||
font-weight: bold; |
|
||||||
float: left; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
.txTable, |
|
||||||
.tr, |
|
||||||
.td { |
|
||||||
border-collapse: collapse; |
|
||||||
font-size: 10px; |
|
||||||
color: var(--text-info); |
|
||||||
border: 1px solid var(--text-info); |
|
||||||
} |
|
||||||
#txTable { |
|
||||||
margin-top: 1%; |
|
||||||
margin-bottom: 5%; |
|
||||||
align-self: center; |
|
||||||
width: 85%; |
|
||||||
} |
|
||||||
.tr, .td { |
|
||||||
padding: 4px; |
|
||||||
vertical-align: baseline; |
|
||||||
} |
|
||||||
.td:first-child { |
|
||||||
min-width: 30%; |
|
||||||
width: 30%; |
|
||||||
align-items: baseline; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
.tableTitle { |
|
||||||
width: 25%; |
|
||||||
} |
|
||||||
.buttons { |
|
||||||
display: flex; |
|
||||||
margin-left: auto; |
|
||||||
} |
|
||||||
.debug { |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
.debug:hover { |
|
||||||
opacity: 0.8; |
|
||||||
}` |
|
||||||
/** |
|
||||||
* This just export a function that register to `newTransaction` and forward them to the logger. |
|
||||||
* |
|
||||||
*/ |
|
||||||
class TxLogger { |
|
||||||
constructor (terminal, blockchain) { |
|
||||||
this.event = new EventManager() |
|
||||||
this.seen = {} |
|
||||||
function filterTx (value, query) { |
|
||||||
if (value.length) { |
|
||||||
return helper.find(value, query) |
|
||||||
} |
|
||||||
return false |
|
||||||
} |
|
||||||
this.eventsDecoder = Registry.getInstance().get('eventsDecoder').api |
|
||||||
this.txListener = Registry.getInstance().get('txlistener').api |
|
||||||
this.terminal = terminal |
|
||||||
// dependencies
|
|
||||||
this._deps = { |
|
||||||
compilersArtefacts: Registry.getInstance().get('compilersartefacts').api |
|
||||||
} |
|
||||||
|
|
||||||
this.logKnownTX = this.terminal.registerCommand('knownTransaction', (args, cmds, append) => { |
|
||||||
var data = args[0] |
|
||||||
var el |
|
||||||
if (data.tx.isCall) { |
|
||||||
el = renderCall(this, data) |
|
||||||
} else { |
|
||||||
el = renderKnownTransaction(this, data, blockchain) |
|
||||||
} |
|
||||||
this.seen[data.tx.hash] = el |
|
||||||
append(el) |
|
||||||
}, { activate: true, filterFn: filterTx }) |
|
||||||
|
|
||||||
this.logUnknownTX = this.terminal.registerCommand('unknownTransaction', (args, cmds, append) => { |
|
||||||
// triggered for transaction AND call
|
|
||||||
var data = args[0] |
|
||||||
var el = renderUnknownTransaction(this, data, blockchain) |
|
||||||
append(el) |
|
||||||
}, { activate: false, filterFn: filterTx }) |
|
||||||
|
|
||||||
this.logEmptyBlock = this.terminal.registerCommand('emptyBlock', (args, cmds, append) => { |
|
||||||
var data = args[0] |
|
||||||
var el = renderEmptyBlock(this, data) |
|
||||||
append(el) |
|
||||||
}, { activate: true }) |
|
||||||
|
|
||||||
this.txListener.event.register('newBlock', (block) => { |
|
||||||
if (!block.transactions || (block.transactions && !block.transactions.length)) { |
|
||||||
this.logEmptyBlock({ block: block }) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
this.txListener.event.register('newTransaction', (tx, receipt) => { |
|
||||||
log(this, tx, receipt) |
|
||||||
}) |
|
||||||
|
|
||||||
this.txListener.event.register('newCall', (tx) => { |
|
||||||
log(this, tx, null) |
|
||||||
}) |
|
||||||
|
|
||||||
this.terminal.updateJournal({ type: 'select', value: 'unknownTransaction' }) |
|
||||||
this.terminal.updateJournal({ type: 'select', value: 'knownTransaction' }) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function debug (e, data, self) { |
|
||||||
e.stopPropagation() |
|
||||||
if (data.tx.isCall && data.tx.envMode !== 'vm') { |
|
||||||
modalDialog.alert('Cannot debug this call. Debugging calls is only possible in JavaScript VM mode.') |
|
||||||
} else { |
|
||||||
self.event.trigger('debuggingRequested', [data.tx.hash]) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function log (self, tx, receipt) { |
|
||||||
var resolvedTransaction = self.txListener.resolvedTransaction(tx.hash) |
|
||||||
if (resolvedTransaction) { |
|
||||||
var compiledContracts = null |
|
||||||
if (self._deps.compilersArtefacts.__last) { |
|
||||||
compiledContracts = self._deps.compilersArtefacts.__last.getContracts() |
|
||||||
} |
|
||||||
self.eventsDecoder.parseLogs(tx, resolvedTransaction.contractName, compiledContracts, (error, logs) => { |
|
||||||
if (!error) { |
|
||||||
self.logKnownTX({ tx: tx, receipt: receipt, resolvedData: resolvedTransaction, logs: logs }) |
|
||||||
} |
|
||||||
}) |
|
||||||
} else { |
|
||||||
// contract unknown - just displaying raw tx.
|
|
||||||
self.logUnknownTX({ tx: tx, receipt: receipt }) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function renderKnownTransaction (self, data, blockchain) { |
|
||||||
var from = data.tx.from |
|
||||||
var to = data.resolvedData.contractName + '.' + data.resolvedData.fn |
|
||||||
var obj = { from, to } |
|
||||||
var txType = 'knownTx' |
|
||||||
var tx = yo` |
|
||||||
<span id="tx${data.tx.hash}" data-id="txLogger${data.tx.hash}"> |
|
||||||
<div class="${css.log}" onclick=${e => txDetails(e, tx, data, obj)}> |
|
||||||
${checkTxStatus(data.receipt, txType)} |
|
||||||
${context(self, { from, to, data }, blockchain)} |
|
||||||
<div class=${css.buttons}> |
|
||||||
<button |
|
||||||
class="${css.debug} btn btn-primary btn-sm" |
|
||||||
data-shared="txLoggerDebugButton" |
|
||||||
data-id="txLoggerDebugButton${data.tx.hash}" |
|
||||||
onclick=${(e) => debug(e, data, self)} |
|
||||||
> |
|
||||||
Debug |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<i class="${css.arrow} fas fa-angle-down"></i> |
|
||||||
</div> |
|
||||||
</span> |
|
||||||
` |
|
||||||
return tx |
|
||||||
} |
|
||||||
|
|
||||||
function renderCall (self, data) { |
|
||||||
var to = data.resolvedData.contractName + '.' + data.resolvedData.fn |
|
||||||
var from = data.tx.from ? data.tx.from : ' - ' |
|
||||||
var input = data.tx.input ? helper.shortenHexData(data.tx.input) : '' |
|
||||||
var obj = { from, to } |
|
||||||
var txType = 'call' |
|
||||||
var tx = yo` |
|
||||||
<span id="tx${data.tx.hash}"> |
|
||||||
<div class="${css.log}" onclick=${e => txDetails(e, tx, data, obj)}> |
|
||||||
${checkTxStatus(data.tx, txType)} |
|
||||||
<span class=${css.txLog}> |
|
||||||
<span class=${css.tx}>[call]</span> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>to:</span> ${to}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>data:</span> ${input}</div> |
|
||||||
</span> |
|
||||||
<div class=${css.buttons}> |
|
||||||
<div class="${css.debug} btn btn-primary btn-sm" onclick=${(e) => debug(e, data, self)}>Debug</div> |
|
||||||
</div> |
|
||||||
<i class="${css.arrow} fas fa-angle-down"></i> |
|
||||||
</div> |
|
||||||
</span> |
|
||||||
` |
|
||||||
return tx |
|
||||||
} |
|
||||||
|
|
||||||
function renderUnknownTransaction (self, data, blockchain) { |
|
||||||
var from = data.tx.from |
|
||||||
var to = data.tx.to |
|
||||||
var obj = { from, to } |
|
||||||
var txType = 'unknown' + (data.tx.isCall ? 'Call' : 'Tx') |
|
||||||
var tx = yo` |
|
||||||
<span id="tx${data.tx.hash}"> |
|
||||||
<div class="${css.log}" onclick=${e => txDetails(e, tx, data, obj)}> |
|
||||||
${checkTxStatus(data.receipt || data.tx, txType)} |
|
||||||
${context(self, { from, to, data }, blockchain)} |
|
||||||
<div class=${css.buttons}> |
|
||||||
<div class="${css.debug} btn btn-primary btn-sm" onclick=${(e) => debug(e, data, self)}>Debug</div> |
|
||||||
</div> |
|
||||||
<i class="${css.arrow} fas fa-angle-down"></i> |
|
||||||
</div> |
|
||||||
</span> |
|
||||||
` |
|
||||||
return tx |
|
||||||
} |
|
||||||
|
|
||||||
function renderEmptyBlock (self, data) { |
|
||||||
return yo` |
|
||||||
<span class=${css.txLog}> |
|
||||||
<span class='${css.tx}'><div class=${css.txItem}>[<span class=${css.txItemTitle}>block:${data.block.number} - </span> 0 transactions]</span></span> |
|
||||||
</span>` |
|
||||||
} |
|
||||||
|
|
||||||
function checkTxStatus (tx, type) { |
|
||||||
if (tx.status === '0x1' || tx.status === true) { |
|
||||||
return yo`<i class="${css.txStatus} ${css.succeeded} fas fa-check-circle"></i>` |
|
||||||
} |
|
||||||
if (type === 'call' || type === 'unknownCall') { |
|
||||||
return yo`<i class="${css.txStatus} ${css.call}">call</i>` |
|
||||||
} else if (tx.status === '0x0' || tx.status === false) { |
|
||||||
return yo`<i class="${css.txStatus} ${css.failed} fas fa-times-circle"></i>` |
|
||||||
} else { |
|
||||||
return yo`<i class="${css.txStatus} ${css.notavailable} fas fa-circle-thin" title='Status not available' ></i>` |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function context (self, opts, blockchain) { |
|
||||||
var data = opts.data || '' |
|
||||||
var from = opts.from ? helper.shortenHexData(opts.from) : '' |
|
||||||
var to = opts.to |
|
||||||
if (data.tx.to) to = to + ' ' + helper.shortenHexData(data.tx.to) |
|
||||||
var val = data.tx.value |
|
||||||
var hash = data.tx.hash ? helper.shortenHexData(data.tx.hash) : '' |
|
||||||
var input = data.tx.input ? helper.shortenHexData(data.tx.input) : '' |
|
||||||
var logs = data.logs && data.logs.decoded && data.logs.decoded.length ? data.logs.decoded.length : 0 |
|
||||||
var block = data.receipt ? data.receipt.blockNumber : data.tx.blockNumber || '' |
|
||||||
var i = data.receipt ? data.receipt.transactionIndex : data.tx.transactionIndex |
|
||||||
var value = val ? typeConversion.toInt(val) : 0 |
|
||||||
if (blockchain.getProvider() === 'vm') { |
|
||||||
return yo` |
|
||||||
<div> |
|
||||||
<span class=${css.txLog}> |
|
||||||
<span class=${css.tx}>[vm]</span> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>to:</span> ${to}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>value:</span> ${value} wei</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>data:</span> ${input}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>logs:</span> ${logs}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>hash:</span> ${hash}</div> |
|
||||||
</span> |
|
||||||
</div>` |
|
||||||
} else if (blockchain.getProvider() !== 'vm' && data.resolvedData) { |
|
||||||
return yo` |
|
||||||
<div> |
|
||||||
<span class=${css.txLog}> |
|
||||||
<span class='${css.tx}'>[block:${block} txIndex:${i}]</span> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>to:</span> ${to}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>value:</span> ${value} wei</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>data:</span> ${input}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>logs:</span> ${logs}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>hash:</span> ${hash}</div> |
|
||||||
</span> |
|
||||||
</div>` |
|
||||||
} else { |
|
||||||
to = helper.shortenHexData(to) |
|
||||||
hash = helper.shortenHexData(data.tx.blockHash) |
|
||||||
return yo` |
|
||||||
<div> |
|
||||||
<span class=${css.txLog}> |
|
||||||
<span class='${css.tx}'>[block:${block} txIndex:${i}]</span> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>to:</span> ${to}</div> |
|
||||||
<div class=${css.txItem}><span class=${css.txItemTitle}>value:</span> ${value} wei</div> |
|
||||||
</span> |
|
||||||
</div>` |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = TxLogger |
|
||||||
|
|
||||||
// helpers
|
|
||||||
|
|
||||||
function isDescendant (parent, child) { |
|
||||||
var node = child.parentNode |
|
||||||
while (node != null) { |
|
||||||
if (node === parent) { |
|
||||||
return true |
|
||||||
} |
|
||||||
node = node.parentNode |
|
||||||
} |
|
||||||
return false |
|
||||||
} |
|
||||||
|
|
||||||
function txDetails (e, tx, data, obj) { |
|
||||||
const from = obj.from |
|
||||||
const to = obj.to |
|
||||||
const arrowUp = yo`<i class="${css.arrow} fas fa-angle-up"></i>` |
|
||||||
const arrowDown = yo`<i class="${css.arrow} fas fa-angle-down"></i>` |
|
||||||
|
|
||||||
let blockElement = e.target |
|
||||||
while (true) { // get the parent block element
|
|
||||||
if (blockElement.className.startsWith('block')) break |
|
||||||
else if (blockElement.parentElement) { |
|
||||||
blockElement = blockElement.parentElement |
|
||||||
} else break |
|
||||||
} |
|
||||||
|
|
||||||
const tables = blockElement.querySelectorAll(`#${tx.id} [class^="txTable"]`) |
|
||||||
const logs = blockElement.querySelectorAll(`#${tx.id} [class^='log']`) |
|
||||||
const arrows = blockElement.querySelectorAll(`#${tx.id} [class^='arrow']`) |
|
||||||
|
|
||||||
let table = [...tables].filter((t) => isDescendant(tx, t))[0] |
|
||||||
const log = [...logs].filter((t) => isDescendant(tx, t))[0] |
|
||||||
const arrow = [...arrows].filter((t) => isDescendant(tx, t))[0] |
|
||||||
|
|
||||||
if (table && table.parentNode) { |
|
||||||
tx.removeChild(table) |
|
||||||
log.removeChild(arrow) |
|
||||||
log.appendChild(arrowDown) |
|
||||||
} else { |
|
||||||
log.removeChild(arrow) |
|
||||||
log.appendChild(arrowUp) |
|
||||||
table = createTable({ |
|
||||||
hash: data.tx.hash, |
|
||||||
status: data.receipt ? data.receipt.status : null, |
|
||||||
isCall: data.tx.isCall, |
|
||||||
contractAddress: data.tx.contractAddress, |
|
||||||
data: data.tx, |
|
||||||
from, |
|
||||||
to, |
|
||||||
gas: data.tx.gas, |
|
||||||
input: data.tx.input, |
|
||||||
'decoded input': data.resolvedData && data.resolvedData.params ? JSON.stringify(typeConversion.stringify(data.resolvedData.params), null, '\t') : ' - ', |
|
||||||
'decoded output': data.resolvedData && data.resolvedData.decodedReturnValue ? JSON.stringify(typeConversion.stringify(data.resolvedData.decodedReturnValue), null, '\t') : ' - ', |
|
||||||
logs: data.logs, |
|
||||||
val: data.tx.value, |
|
||||||
transactionCost: data.tx.transactionCost, |
|
||||||
executionCost: data.tx.executionCost |
|
||||||
}) |
|
||||||
tx.appendChild(table) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function createTable (opts) { |
|
||||||
var table = yo`<table class="${css.txTable}" id="txTable" data-id="txLoggerTable${opts.hash}"></table>` |
|
||||||
if (!opts.isCall) { |
|
||||||
var msg = '' |
|
||||||
if (opts.status !== undefined && opts.status !== null) { |
|
||||||
if (opts.status === '0x0' || opts.status === false) { |
|
||||||
msg = ' Transaction mined but execution failed' |
|
||||||
} else if (opts.status === '0x1' || opts.status === true) { |
|
||||||
msg = ' Transaction mined and execution succeed' |
|
||||||
} |
|
||||||
} else { |
|
||||||
msg = ' Status not available at the moment' |
|
||||||
} |
|
||||||
table.appendChild(yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> status </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableStatus${opts.hash}" data-shared="pair_${opts.hash}">${opts.status}${msg}</td> |
|
||||||
</tr>`) |
|
||||||
} |
|
||||||
|
|
||||||
var transactionHash = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> transaction hash </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableHash${opts.hash}" data-shared="pair_${opts.hash}">${opts.hash} |
|
||||||
${copyToClipboard(() => opts.hash)} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
` |
|
||||||
table.appendChild(transactionHash) |
|
||||||
|
|
||||||
var contractAddress = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> contract address </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableContractAddress${opts.hash}" data-shared="pair_${opts.hash}">${opts.contractAddress} |
|
||||||
${copyToClipboard(() => opts.contractAddress)} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
` |
|
||||||
if (opts.contractAddress) table.appendChild(contractAddress) |
|
||||||
|
|
||||||
var from = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td} ${css.tableTitle}" data-shared="key_${opts.hash}"> from </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableFrom${opts.hash}" data-shared="pair_${opts.hash}">${opts.from} |
|
||||||
${copyToClipboard(() => opts.from)} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
` |
|
||||||
if (opts.from) table.appendChild(from) |
|
||||||
|
|
||||||
var toHash |
|
||||||
var data = opts.data // opts.data = data.tx
|
|
||||||
if (data.to) { |
|
||||||
toHash = opts.to + ' ' + data.to |
|
||||||
} else { |
|
||||||
toHash = opts.to |
|
||||||
} |
|
||||||
var to = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> to </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableTo${opts.hash}" data-shared="pair_${opts.hash}">${toHash} |
|
||||||
${copyToClipboard(() => data.to ? data.to : toHash)} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
` |
|
||||||
if (opts.to) table.appendChild(to) |
|
||||||
|
|
||||||
var gas = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> gas </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableGas${opts.hash}" data-shared="pair_${opts.hash}">${opts.gas} gas |
|
||||||
${copyToClipboard(() => opts.gas)} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
` |
|
||||||
if (opts.gas) table.appendChild(gas) |
|
||||||
|
|
||||||
var callWarning = '' |
|
||||||
if (opts.isCall) { |
|
||||||
callWarning = '(Cost only applies when called by a contract)' |
|
||||||
} |
|
||||||
if (opts.transactionCost) { |
|
||||||
table.appendChild(yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> transaction cost </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableTransactionCost${opts.hash}" data-shared="pair_${opts.hash}">${opts.transactionCost} gas ${callWarning} |
|
||||||
${copyToClipboard(() => opts.transactionCost)} |
|
||||||
</td> |
|
||||||
</tr>`) |
|
||||||
} |
|
||||||
|
|
||||||
if (opts.executionCost) { |
|
||||||
table.appendChild(yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> execution cost </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableExecutionHash${opts.hash}" data-shared="pair_${opts.hash}">${opts.executionCost} gas ${callWarning} |
|
||||||
${copyToClipboard(() => opts.executionCost)} |
|
||||||
</td> |
|
||||||
</tr>`) |
|
||||||
} |
|
||||||
|
|
||||||
var hash = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> hash </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableHash${opts.hash}" data-shared="pair_${opts.hash}">${opts.hash} |
|
||||||
${copyToClipboard(() => opts.hash)} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
` |
|
||||||
if (opts.hash) table.appendChild(hash) |
|
||||||
|
|
||||||
var input = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> input </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableInput${opts.hash}" data-shared="pair_${opts.hash}">${helper.shortenHexData(opts.input)} |
|
||||||
${copyToClipboard(() => opts.input)} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
` |
|
||||||
if (opts.input) table.appendChild(input) |
|
||||||
|
|
||||||
if (opts['decoded input']) { |
|
||||||
var inputDecoded = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> decoded input </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableDecodedInput${opts.hash}" data-shared="pair_${opts.hash}">${opts['decoded input']} |
|
||||||
${copyToClipboard(() => opts['decoded input'])} |
|
||||||
</td> |
|
||||||
</tr>` |
|
||||||
table.appendChild(inputDecoded) |
|
||||||
} |
|
||||||
|
|
||||||
if (opts['decoded output']) { |
|
||||||
var outputDecoded = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> decoded output </td> |
|
||||||
<td class="${css.td}" id="decodedoutput" data-id="txLoggerTableDecodedOutput${opts.hash}" data-shared="pair_${opts.hash}">${opts['decoded output']} |
|
||||||
${copyToClipboard(() => opts['decoded output'])} |
|
||||||
</td> |
|
||||||
</tr>` |
|
||||||
table.appendChild(outputDecoded) |
|
||||||
} |
|
||||||
|
|
||||||
var stringified = ' - ' |
|
||||||
if (opts.logs && opts.logs.decoded) { |
|
||||||
stringified = typeConversion.stringify(opts.logs.decoded) |
|
||||||
} |
|
||||||
var logs = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> logs </td> |
|
||||||
<td class="${css.td}" id="logs" data-id="txLoggerTableLogs${opts.hash}" data-shared="pair_${opts.hash}"> |
|
||||||
${JSON.stringify(stringified, null, '\t')} |
|
||||||
${copyToClipboard(() => JSON.stringify(stringified, null, '\t'))} |
|
||||||
${copyToClipboard(() => JSON.stringify(opts.logs.raw || '0'))} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
` |
|
||||||
if (opts.logs) table.appendChild(logs) |
|
||||||
|
|
||||||
var val = opts.val != null ? typeConversion.toInt(opts.val) : 0 |
|
||||||
val = yo` |
|
||||||
<tr class="${css.tr}"> |
|
||||||
<td class="${css.td}" data-shared="key_${opts.hash}"> value </td> |
|
||||||
<td class="${css.td}" data-id="txLoggerTableValue${opts.hash}" data-shared="pair_${opts.hash}">${val} wei |
|
||||||
${copyToClipboard(() => `${val} wei`)} |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
` |
|
||||||
if (opts.val) table.appendChild(val) |
|
||||||
|
|
||||||
return table |
|
||||||
} |
|
||||||
@ -1,272 +0,0 @@ |
|||||||
/* global */ |
|
||||||
'use strict' |
|
||||||
|
|
||||||
var $ = require('jquery') |
|
||||||
var yo = require('yo-yo') |
|
||||||
var ethJSUtil = require('ethereumjs-util') |
|
||||||
var BN = ethJSUtil.BN |
|
||||||
var helper = require('../../lib/helper') |
|
||||||
var copyToClipboard = require('./copy-to-clipboard') |
|
||||||
var css = require('../../universal-dapp-styles') |
|
||||||
var MultiParamManager = require('./multiParamManager') |
|
||||||
var remixLib = require('@remix-project/remix-lib') |
|
||||||
var txFormat = remixLib.execution.txFormat |
|
||||||
const txHelper = remixLib.execution.txHelper |
|
||||||
var TreeView = require('./TreeView') |
|
||||||
var txCallBacks = require('./sendTxCallbacks') |
|
||||||
const _paq = window._paq = window._paq || [] |
|
||||||
|
|
||||||
function UniversalDAppUI (blockchain, logCallback) { |
|
||||||
this.blockchain = blockchain |
|
||||||
this.logCallback = logCallback |
|
||||||
this.compilerData = { contractsDetails: {} } |
|
||||||
} |
|
||||||
|
|
||||||
function decodeResponseToTreeView (response, fnabi) { |
|
||||||
var treeView = new TreeView({ |
|
||||||
extractData: (item, parent, key) => { |
|
||||||
var ret = {} |
|
||||||
if (BN.isBN(item)) { |
|
||||||
ret.self = item.toString(10) |
|
||||||
ret.children = [] |
|
||||||
} else { |
|
||||||
ret = treeView.extractDataDefault(item, parent, key) |
|
||||||
} |
|
||||||
return ret |
|
||||||
} |
|
||||||
}) |
|
||||||
return treeView.render(txFormat.decodeResponse(response, fnabi)) |
|
||||||
} |
|
||||||
|
|
||||||
UniversalDAppUI.prototype.renderInstance = function (contract, address, contractName) { |
|
||||||
var noInstances = document.querySelector('[data-id="deployAndRunNoInstanceText"]') |
|
||||||
if (noInstances) { |
|
||||||
noInstances.parentNode.removeChild(noInstances) |
|
||||||
} |
|
||||||
const abi = txHelper.sortAbiFunction(contract.abi) |
|
||||||
return this.renderInstanceFromABI(abi, address, contractName, contract) |
|
||||||
} |
|
||||||
|
|
||||||
// TODO this function was named before "appendChild".
|
|
||||||
// this will render an instance: contract name, contract address, and all the public functions
|
|
||||||
// basically this has to be called for the "atAddress" (line 393) and when a contract creation succeed
|
|
||||||
// this returns a DOM element
|
|
||||||
UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName, contract) { |
|
||||||
const self = this |
|
||||||
address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex') |
|
||||||
address = ethJSUtil.toChecksumAddress(address) |
|
||||||
var instance = yo`<div class="instance run-instance border-dark ${css.instance} ${css.hidesub}" id="instance${address}" data-shared="universalDappUiInstance"></div>` |
|
||||||
const context = this.blockchain.context() |
|
||||||
|
|
||||||
var shortAddress = helper.shortenAddress(address) |
|
||||||
var title = yo` |
|
||||||
<div class="${css.title} alert alert-secondary"> |
|
||||||
<button data-id="universalDappUiTitleExpander" class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}"> |
|
||||||
<i class="fas fa-angle-right" aria-hidden="true"></i> |
|
||||||
</button> |
|
||||||
<div class="input-group ${css.nameNbuts}"> |
|
||||||
<div class="${css.titleText} input-group-prepend"> |
|
||||||
<span class="input-group-text ${css.spanTitleText}"> |
|
||||||
${contractName} at ${shortAddress} (${context}) |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div class="btn-group"> |
|
||||||
<button class="btn p-1 btn-secondary">${copyToClipboard(() => address)}</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
var close = yo` |
|
||||||
<button |
|
||||||
class="${css.udappClose} mr-1 p-1 btn btn-secondary align-items-center" |
|
||||||
data-id="universalDappUiUdappClose" |
|
||||||
onclick=${remove} |
|
||||||
title="Remove from the list" |
|
||||||
> |
|
||||||
<i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i> |
|
||||||
</button>` |
|
||||||
title.querySelector('.btn-group').appendChild(close) |
|
||||||
|
|
||||||
var contractActionsWrapper = yo` |
|
||||||
<div class="${css.cActionsWrapper}" data-id="universalDappUiContractActionWrapper"> |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
function remove () { |
|
||||||
instance.remove() |
|
||||||
// @TODO perhaps add a callack here to warn the caller that the instance has been removed
|
|
||||||
} |
|
||||||
|
|
||||||
function toggleClass (e) { |
|
||||||
$(instance).toggleClass(`${css.hidesub} bg-light`) |
|
||||||
// e.currentTarget.querySelector('i')
|
|
||||||
e.currentTarget.querySelector('i').classList.toggle('fa-angle-right') |
|
||||||
e.currentTarget.querySelector('i').classList.toggle('fa-angle-down') |
|
||||||
} |
|
||||||
|
|
||||||
instance.appendChild(title) |
|
||||||
instance.appendChild(contractActionsWrapper) |
|
||||||
|
|
||||||
$.each(contractABI, (i, funABI) => { |
|
||||||
if (funABI.type !== 'function') { |
|
||||||
return |
|
||||||
} |
|
||||||
// @todo getData cannot be used with overloaded functions
|
|
||||||
contractActionsWrapper.appendChild(this.getCallButton({ |
|
||||||
funABI: funABI, |
|
||||||
address: address, |
|
||||||
contractABI: contractABI, |
|
||||||
contractName: contractName, |
|
||||||
contract |
|
||||||
})) |
|
||||||
}) |
|
||||||
|
|
||||||
const calldataInput = yo` |
|
||||||
<input id="deployAndRunLLTxCalldata" class="${css.calldataInput} form-control" title="The Calldata to send to fallback function of the contract."> |
|
||||||
` |
|
||||||
const llIError = yo` |
|
||||||
<label id="deployAndRunLLTxError" class="text-danger my-2"></label> |
|
||||||
` |
|
||||||
// constract LLInteractions elements
|
|
||||||
const lowLevelInteracions = yo` |
|
||||||
<div class="d-flex flex-column"> |
|
||||||
<div class="d-flex flex-row justify-content-between mt-2"> |
|
||||||
<div class="py-2 border-top d-flex justify-content-start flex-grow-1"> |
|
||||||
Low level interactions |
|
||||||
</div> |
|
||||||
<a |
|
||||||
href="https://solidity.readthedocs.io/en/v0.6.2/contracts.html#receive-ether-function" |
|
||||||
title="check out docs for using 'receive'/'fallback'" |
|
||||||
target="_blank" |
|
||||||
> |
|
||||||
<i aria-hidden="true" class="fas fa-info my-2 mr-1"></i> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
<div class="d-flex flex-column align-items-start"> |
|
||||||
<label class="">CALLDATA</label> |
|
||||||
<div class="d-flex justify-content-end w-100 align-items-center"> |
|
||||||
${calldataInput} |
|
||||||
<button id="deployAndRunLLTxSendTransaction" data-id="pluginManagerSettingsDeployAndRunLLTxSendTransaction" class="${css.instanceButton} p-0 w-50 btn border-warning text-warning" title="Send data to contract." onclick=${() => sendData()}>Transact</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
${llIError} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
` |
|
||||||
|
|
||||||
function sendData () { |
|
||||||
function setLLIError (text) { |
|
||||||
llIError.innerText = text |
|
||||||
} |
|
||||||
|
|
||||||
setLLIError('') |
|
||||||
const fallback = txHelper.getFallbackInterface(contractABI) |
|
||||||
const receive = txHelper.getReceiveInterface(contractABI) |
|
||||||
const args = { |
|
||||||
funABI: fallback || receive, |
|
||||||
address: address, |
|
||||||
contractName: contractName, |
|
||||||
contractABI: contractABI |
|
||||||
} |
|
||||||
const amount = document.querySelector('#value').value |
|
||||||
if (amount !== '0') { |
|
||||||
// check for numeric and receive/fallback
|
|
||||||
if (!helper.isNumeric(amount)) { |
|
||||||
return setLLIError('Value to send should be a number') |
|
||||||
} else if (!receive && !(fallback && fallback.stateMutability === 'payable')) { |
|
||||||
return setLLIError("In order to receive Ether transfer the contract should have either 'receive' or payable 'fallback' function") |
|
||||||
} |
|
||||||
} |
|
||||||
let calldata = calldataInput.value |
|
||||||
if (calldata) { |
|
||||||
if (calldata.length < 4 && helper.is0XPrefixed(calldata)) { |
|
||||||
return setLLIError('The calldata should be a valid hexadecimal value with size of at least one byte.') |
|
||||||
} else { |
|
||||||
if (helper.is0XPrefixed(calldata)) { |
|
||||||
calldata = calldata.substr(2, calldata.length) |
|
||||||
} |
|
||||||
if (!helper.isHexadecimal(calldata)) { |
|
||||||
return setLLIError('The calldata should be a valid hexadecimal value.') |
|
||||||
} |
|
||||||
} |
|
||||||
if (!fallback) { |
|
||||||
return setLLIError("'Fallback' function is not defined") |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if (!receive && !fallback) return setLLIError('Both \'receive\' and \'fallback\' functions are not defined') |
|
||||||
|
|
||||||
// we have to put the right function ABI:
|
|
||||||
// if receive is defined and that there is no calldata => receive function is called
|
|
||||||
// if fallback is defined => fallback function is called
|
|
||||||
if (receive && !calldata) args.funABI = receive |
|
||||||
else if (fallback) args.funABI = fallback |
|
||||||
|
|
||||||
if (!args.funABI) return setLLIError('Please define a \'Fallback\' function to send calldata and a either \'Receive\' or payable \'Fallback\' to send ethers') |
|
||||||
self.runTransaction(false, args, null, calldataInput.value, null) |
|
||||||
} |
|
||||||
|
|
||||||
contractActionsWrapper.appendChild(lowLevelInteracions) |
|
||||||
return instance |
|
||||||
} |
|
||||||
|
|
||||||
// TODO this is used by renderInstance when a new instance is displayed.
|
|
||||||
// this returns a DOM element.
|
|
||||||
UniversalDAppUI.prototype.getCallButton = function (args) { |
|
||||||
const self = this |
|
||||||
var outputOverride = yo`<div class=${css.value}></div>` // show return value
|
|
||||||
const isConstant = args.funABI.constant !== undefined ? args.funABI.constant : false |
|
||||||
const lookupOnly = args.funABI.stateMutability === 'view' || args.funABI.stateMutability === 'pure' || isConstant |
|
||||||
const multiParamManager = new MultiParamManager( |
|
||||||
lookupOnly, |
|
||||||
args.funABI, |
|
||||||
(valArray, inputsValues) => self.runTransaction(lookupOnly, args, valArray, inputsValues, outputOverride), |
|
||||||
self.blockchain.getInputs(args.funABI) |
|
||||||
) |
|
||||||
|
|
||||||
const contractActionsContainer = yo`<div class="${css.contractActionsContainer}" >${multiParamManager.render()}</div>` |
|
||||||
contractActionsContainer.appendChild(outputOverride) |
|
||||||
|
|
||||||
return contractActionsContainer |
|
||||||
} |
|
||||||
|
|
||||||
UniversalDAppUI.prototype.runTransaction = function (lookupOnly, args, valArr, inputsValues, outputOverride) { |
|
||||||
const functionName = args.funABI.type === 'function' ? args.funABI.name : `(${args.funABI.type})` |
|
||||||
const logMsg = `${lookupOnly ? 'call' : 'transact'} to ${args.contractName}.${functionName}` |
|
||||||
|
|
||||||
const callbacksInContext = txCallBacks.getCallBacksWithContext(this, this.blockchain) |
|
||||||
|
|
||||||
const outputCb = (returnValue) => { |
|
||||||
if (outputOverride) { |
|
||||||
const decoded = decodeResponseToTreeView(returnValue, args.funABI) |
|
||||||
outputOverride.innerHTML = '' |
|
||||||
outputOverride.appendChild(decoded) |
|
||||||
} |
|
||||||
} |
|
||||||
let callinfo = '' |
|
||||||
if (lookupOnly) callinfo = 'call' |
|
||||||
else if (args.funABI.type === 'fallback' || args.funABI.type === 'receive') callinfo = 'lowLevelInteracions' |
|
||||||
else callinfo = 'transact' |
|
||||||
|
|
||||||
_paq.push(['trackEvent', 'udapp', callinfo, this.blockchain.getCurrentNetworkStatus().network.name]) |
|
||||||
const params = args.funABI.type !== 'fallback' ? inputsValues : '' |
|
||||||
this.blockchain.runOrCallContractMethod( |
|
||||||
args.contractName, |
|
||||||
args.contractABI, |
|
||||||
args.funABI, |
|
||||||
args.contract, |
|
||||||
inputsValues, |
|
||||||
args.address, |
|
||||||
params, |
|
||||||
lookupOnly, |
|
||||||
logMsg, |
|
||||||
this.logCallback, |
|
||||||
outputCb, |
|
||||||
callbacksInContext.confirmationCb.bind(callbacksInContext), |
|
||||||
callbacksInContext.continueCb.bind(callbacksInContext), |
|
||||||
callbacksInContext.promptCb.bind(callbacksInContext)) |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = UniversalDAppUI |
|
||||||
@ -0,0 +1,13 @@ |
|||||||
|
const transactionDetailsLinks = { |
||||||
|
Main: 'https://www.etherscan.io/tx/', |
||||||
|
Rinkeby: 'https://rinkeby.etherscan.io/tx/', |
||||||
|
Ropsten: 'https://ropsten.etherscan.io/tx/', |
||||||
|
Kovan: 'https://kovan.etherscan.io/tx/', |
||||||
|
Goerli: 'https://goerli.etherscan.io/tx/' |
||||||
|
} |
||||||
|
|
||||||
|
export function etherScanLink (network: string, hash: string): string { |
||||||
|
if (transactionDetailsLinks[network]) { |
||||||
|
return transactionDetailsLinks[network] + hash |
||||||
|
} |
||||||
|
} |
||||||
@ -1,34 +0,0 @@ |
|||||||
export class FramingService { |
|
||||||
constructor (sidePanel, verticalIcons, mainView, resizeFeature) { |
|
||||||
this.sidePanel = sidePanel |
|
||||||
this.verticalIcons = verticalIcons |
|
||||||
this.mainPanel = mainView.getAppPanel() |
|
||||||
this.mainView = mainView |
|
||||||
this.resizeFeature = resizeFeature |
|
||||||
} |
|
||||||
|
|
||||||
start (params) { |
|
||||||
this.verticalIcons.select('filePanel') |
|
||||||
|
|
||||||
document.addEventListener('keypress', (e) => { |
|
||||||
if (e.shiftKey && e.ctrlKey) { |
|
||||||
if (e.code === 'KeyF') { // Ctrl+Shift+F
|
|
||||||
this.verticalIcons.select('filePanel') |
|
||||||
} else if (e.code === 'KeyA') { // Ctrl+Shift+A
|
|
||||||
this.verticalIcons.select('pluginManager') |
|
||||||
} else if (e.code === 'KeyS') { // Ctrl+Shift+S
|
|
||||||
this.verticalIcons.select('settings') |
|
||||||
} |
|
||||||
e.preventDefault() |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
if (params.minimizeterminal) this.mainView.minimizeTerminal() |
|
||||||
if (params.minimizesidepanel) this.resizeFeature.hidePanel() |
|
||||||
} |
|
||||||
|
|
||||||
embed () { |
|
||||||
this.mainView.minimizeTerminal() |
|
||||||
this.resizeFeature.hidePanel() |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,135 +0,0 @@ |
|||||||
'use strict' |
|
||||||
import { CompilerImports } from '@remix-project/core-plugin' |
|
||||||
import Registry from '../app/state/registry' |
|
||||||
var yo = require('yo-yo') |
|
||||||
var async = require('async') |
|
||||||
var EventManager = require('../lib/events') |
|
||||||
|
|
||||||
var toolTip = require('../app/ui/tooltip') |
|
||||||
var GistHandler = require('./gist-handler') |
|
||||||
|
|
||||||
class CmdInterpreterAPI { |
|
||||||
constructor (terminal, blockchain) { |
|
||||||
const self = this |
|
||||||
self.event = new EventManager() |
|
||||||
self.blockchain = blockchain |
|
||||||
self._components = {} |
|
||||||
self._components.registry = Registry.getInstance() |
|
||||||
self._components.terminal = terminal |
|
||||||
self._components.fileImport = new CompilerImports() |
|
||||||
self._components.gistHandler = new GistHandler() |
|
||||||
self._deps = { |
|
||||||
fileManager: self._components.registry.get('filemanager').api, |
|
||||||
editor: self._components.registry.get('editor').api, |
|
||||||
compilersArtefacts: self._components.registry.get('compilersartefacts').api, |
|
||||||
offsetToLineColumnConverter: self._components.registry.get('offsettolinecolumnconverter').api |
|
||||||
} |
|
||||||
self.commandHelp = { |
|
||||||
'remix.loadgist(id)': 'Load a gist in the file explorer.', |
|
||||||
'remix.loadurl(url)': 'Load the given url in the file explorer. The url can be of type github, swarm, ipfs or raw http', |
|
||||||
'remix.execute(filepath)': 'Run the script specified by file path. If filepath is empty, script currently displayed in the editor is executed.', |
|
||||||
'remix.exeCurrent()': 'Run the script currently displayed in the editor', |
|
||||||
'remix.help()': 'Display this help message' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
log () { arguments[0] != null ? this._components.terminal.commands.html(arguments[0]) : this._components.terminal.commands.html(arguments[1]) } |
|
||||||
loadgist (id, cb) { |
|
||||||
const self = this |
|
||||||
self._components.gistHandler.loadFromGist({ gist: id }, this._deps.fileManager) |
|
||||||
if (cb) cb() |
|
||||||
} |
|
||||||
|
|
||||||
loadurl (url, cb) { |
|
||||||
const self = this |
|
||||||
self._components.fileImport.import(url, |
|
||||||
(loadingMsg) => { toolTip(loadingMsg) }, |
|
||||||
(err, content, cleanUrl, type, url) => { |
|
||||||
if (err) { |
|
||||||
toolTip(`Unable to load ${url}: ${err}`) |
|
||||||
if (cb) cb(err) |
|
||||||
} else { |
|
||||||
self._deps.fileManager.writeFile(type + '/' + cleanUrl, content) |
|
||||||
try { |
|
||||||
content = JSON.parse(content) |
|
||||||
async.eachOfSeries(content.sources, (value, file, callbackSource) => { |
|
||||||
var url = value.urls[0] // @TODO retrieve all other contents ?
|
|
||||||
self._components.fileImport.import(url, |
|
||||||
(loadingMsg) => { toolTip(loadingMsg) }, |
|
||||||
async (error, content, cleanUrl, type, url) => { |
|
||||||
if (error) { |
|
||||||
toolTip(`Cannot retrieve the content of ${url}: ${error}`) |
|
||||||
return callbackSource(`Cannot retrieve the content of ${url}: ${error}`) |
|
||||||
} else { |
|
||||||
try { |
|
||||||
await self._deps.fileManager.writeFile(type + '/' + cleanUrl, content) |
|
||||||
callbackSource() |
|
||||||
} catch (e) { |
|
||||||
callbackSource(e.message) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
}, (error) => { |
|
||||||
if (cb) cb(error) |
|
||||||
}) |
|
||||||
} catch (e) {} |
|
||||||
if (cb) cb() |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
exeCurrent (cb) { |
|
||||||
return this.execute(undefined, cb) |
|
||||||
} |
|
||||||
|
|
||||||
execute (file, cb) { |
|
||||||
const self = this |
|
||||||
|
|
||||||
function _execute (content, cb) { |
|
||||||
if (!content) { |
|
||||||
toolTip('no content to execute') |
|
||||||
if (cb) cb() |
|
||||||
return |
|
||||||
} |
|
||||||
self._components.terminal.commands.script(content) |
|
||||||
} |
|
||||||
|
|
||||||
if (typeof file === 'undefined') { |
|
||||||
var content = self._deps.editor.currentContent() |
|
||||||
_execute(content, cb) |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
var provider = self._deps.fileManager.fileProviderOf(file) |
|
||||||
|
|
||||||
if (!provider) { |
|
||||||
toolTip(`provider for path ${file} not found`) |
|
||||||
if (cb) cb() |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
provider.get(file, (error, content) => { |
|
||||||
if (error) { |
|
||||||
toolTip(error) |
|
||||||
if (cb) cb() |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
_execute(content, cb) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
help (cb) { |
|
||||||
const self = this |
|
||||||
var help = yo`<div></div>` |
|
||||||
for (var k in self.commandHelp) { |
|
||||||
help.appendChild(yo`<div>${k}: ${self.commandHelp[k]}</div>`) |
|
||||||
help.appendChild(yo`<br>`) |
|
||||||
} |
|
||||||
self._components.terminal.commands.html(help) |
|
||||||
if (cb) cb() |
|
||||||
return '' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = CmdInterpreterAPI |
|
||||||
@ -1,74 +0,0 @@ |
|||||||
'use strict' |
|
||||||
var modalDialogCustom = require('../app/ui/modal-dialog-custom') |
|
||||||
var request = require('request') |
|
||||||
|
|
||||||
// Allowing window to be overriden for testing
|
|
||||||
function GistHandler (_window) { |
|
||||||
if (_window !== undefined) { |
|
||||||
modalDialogCustom = _window |
|
||||||
} |
|
||||||
|
|
||||||
this.handleLoad = function (params, cb) { |
|
||||||
if (!cb) cb = () => {} |
|
||||||
var loadingFromGist = false |
|
||||||
var gistId |
|
||||||
if (params.gist === '') { |
|
||||||
loadingFromGist = true |
|
||||||
modalDialogCustom.prompt('Load a Gist', 'Enter the ID of the Gist or URL you would like to load.', null, (target) => { |
|
||||||
if (target !== '') { |
|
||||||
gistId = getGistId(target) |
|
||||||
if (gistId) { |
|
||||||
cb(gistId) |
|
||||||
} else { |
|
||||||
modalDialogCustom.alert('Gist load error', 'Error while loading gist. Please provide a valid Gist ID or URL.') |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
return loadingFromGist |
|
||||||
} else { |
|
||||||
gistId = params.gist |
|
||||||
loadingFromGist = !!gistId |
|
||||||
} |
|
||||||
if (loadingFromGist) { |
|
||||||
cb(gistId) |
|
||||||
} |
|
||||||
return loadingFromGist |
|
||||||
} |
|
||||||
|
|
||||||
function getGistId (str) { |
|
||||||
var idr = /[0-9A-Fa-f]{8,}/ |
|
||||||
var match = idr.exec(str) |
|
||||||
return match ? match[0] : null |
|
||||||
} |
|
||||||
|
|
||||||
this.loadFromGist = (params, fileManager) => { |
|
||||||
const self = this |
|
||||||
return self.handleLoad(params, function (gistId) { |
|
||||||
request.get({ |
|
||||||
url: `https://api.github.com/gists/${gistId}`, |
|
||||||
json: true |
|
||||||
}, async (error, response, data = {}) => { |
|
||||||
if (error || !data.files) { |
|
||||||
modalDialogCustom.alert('Gist load error', error || data.message) |
|
||||||
return |
|
||||||
} |
|
||||||
const obj = {} |
|
||||||
Object.keys(data.files).forEach((element) => { |
|
||||||
const path = element.replace(/\.\.\./g, '/') |
|
||||||
|
|
||||||
obj['/' + 'gist-' + gistId + '/' + path] = data.files[element] |
|
||||||
}) |
|
||||||
fileManager.setBatchFiles(obj, 'workspace', true, (errorLoadingFile) => { |
|
||||||
if (!errorLoadingFile) { |
|
||||||
const provider = fileManager.getProvider('workspace') |
|
||||||
provider.lastLoadedGistId = gistId |
|
||||||
} else { |
|
||||||
modalDialogCustom.alert('Gist load error', errorLoadingFile.message || errorLoadingFile) |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = GistHandler |
|
||||||
@ -1,88 +0,0 @@ |
|||||||
const yo = require('yo-yo') |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.dragbar { |
|
||||||
width : 2px; |
|
||||||
height : 100%; |
|
||||||
cursor : col-resize; |
|
||||||
z-index : 999; |
|
||||||
} |
|
||||||
.ghostbar { |
|
||||||
width : 3px; |
|
||||||
background-color : var(--primary); |
|
||||||
opacity : 0.5; |
|
||||||
position : absolute; |
|
||||||
cursor : col-resize; |
|
||||||
z-index : 9999; |
|
||||||
top : 0; |
|
||||||
bottom : 0; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export default class PanelsResize { |
|
||||||
constructor (panel) { |
|
||||||
this.panel = panel |
|
||||||
const string = panel.style.minWidth |
|
||||||
this.minWidth = string.length > 2 ? parseInt(string.substring(0, string.length - 2)) : 0 |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
this.ghostbar = yo`<div class=${css.ghostbar}></div>` |
|
||||||
|
|
||||||
const mousedown = (event) => { |
|
||||||
event.preventDefault() |
|
||||||
if (event.which === 1) { |
|
||||||
moveGhostbar(event) |
|
||||||
document.body.appendChild(this.ghostbar) |
|
||||||
document.addEventListener('mousemove', moveGhostbar) |
|
||||||
document.addEventListener('mouseup', removeGhostbar) |
|
||||||
document.addEventListener('keydown', cancelGhostbar) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const cancelGhostbar = (event) => { |
|
||||||
if (event.keyCode === 27) { |
|
||||||
document.body.removeChild(this.ghostbar) |
|
||||||
document.removeEventListener('mousemove', moveGhostbar) |
|
||||||
document.removeEventListener('mouseup', removeGhostbar) |
|
||||||
document.removeEventListener('keydown', cancelGhostbar) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const moveGhostbar = (event) => { |
|
||||||
this.ghostbar.style.left = event.x + 'px' |
|
||||||
} |
|
||||||
|
|
||||||
const removeGhostbar = (event) => { |
|
||||||
document.body.removeChild(this.ghostbar) |
|
||||||
document.removeEventListener('mousemove', moveGhostbar) |
|
||||||
document.removeEventListener('mouseup', removeGhostbar) |
|
||||||
document.removeEventListener('keydown', cancelGhostbar) |
|
||||||
this.setPosition(event) |
|
||||||
} |
|
||||||
|
|
||||||
return yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>` |
|
||||||
} |
|
||||||
|
|
||||||
calculatePanelWidth (event) { |
|
||||||
return event.x - this.panel.offsetLeft |
|
||||||
} |
|
||||||
|
|
||||||
setPosition (event) { |
|
||||||
const panelWidth = this.calculatePanelWidth(event) |
|
||||||
// close the panel if the width is less than a minWidth
|
|
||||||
if (panelWidth > this.minWidth - 10 || this.panel.style.display === 'none') { |
|
||||||
this.panel.style.width = panelWidth + 'px' |
|
||||||
this.showPanel() |
|
||||||
} else this.hidePanel() |
|
||||||
} |
|
||||||
|
|
||||||
hidePanel () { |
|
||||||
this.panel.style.display = 'none' |
|
||||||
} |
|
||||||
|
|
||||||
showPanel () { |
|
||||||
this.panel.style.display = 'flex' |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,121 +0,0 @@ |
|||||||
'use strict' |
|
||||||
|
|
||||||
const async = require('async') |
|
||||||
const IpfsClient = require('ipfs-mini') |
|
||||||
|
|
||||||
const ipfsNodes = [ |
|
||||||
new IpfsClient({ host: 'ipfs.remixproject.org', port: 443, protocol: 'https' }), |
|
||||||
new IpfsClient({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' }), |
|
||||||
new IpfsClient({ host: '127.0.0.1', port: 5001, protocol: 'http' }) |
|
||||||
] |
|
||||||
|
|
||||||
module.exports = (contract, fileManager, cb, ipfsVerifiedPublishCallBack) => { |
|
||||||
// gather list of files to publish
|
|
||||||
var sources = [] |
|
||||||
|
|
||||||
var metadata |
|
||||||
|
|
||||||
try { |
|
||||||
metadata = JSON.parse(contract.metadata) |
|
||||||
} catch (e) { |
|
||||||
return cb(e) |
|
||||||
} |
|
||||||
|
|
||||||
if (metadata === undefined) { |
|
||||||
return cb('No metadata') |
|
||||||
} |
|
||||||
|
|
||||||
async.eachSeries(Object.keys(metadata.sources), function (fileName, cb) { |
|
||||||
// find hash
|
|
||||||
let hash = null |
|
||||||
try { |
|
||||||
// we try extract the hash defined in the metadata.json
|
|
||||||
// in order to check if the hash that we get after publishing is the same as the one located in metadata.json
|
|
||||||
// if it's not the same, we throw "hash mismatch between solidity bytecode and uploaded content"
|
|
||||||
// if we don't find the hash in the metadata.json, the check is not done.
|
|
||||||
//
|
|
||||||
// TODO: refactor this with publishOnSwarm
|
|
||||||
if (metadata.sources[fileName].urls) { |
|
||||||
metadata.sources[fileName].urls.forEach(url => { |
|
||||||
if (url.includes('ipfs')) hash = url.match('dweb:/ipfs/(.+)')[1] |
|
||||||
}) |
|
||||||
} |
|
||||||
} catch (e) { |
|
||||||
return cb('Error while extracting the hash from metadata.json') |
|
||||||
} |
|
||||||
|
|
||||||
fileManager.fileProviderOf(fileName).get(fileName, (error, content) => { |
|
||||||
if (error) { |
|
||||||
console.log(error) |
|
||||||
} else { |
|
||||||
sources.push({ |
|
||||||
content: content, |
|
||||||
hash: hash, |
|
||||||
filename: fileName |
|
||||||
}) |
|
||||||
} |
|
||||||
cb() |
|
||||||
}) |
|
||||||
}, function (error) { |
|
||||||
if (error) { |
|
||||||
cb(error) |
|
||||||
} else { |
|
||||||
// publish the list of sources in order, fail if any failed
|
|
||||||
var uploaded = [] |
|
||||||
async.eachSeries(sources, function (item, cb) { |
|
||||||
ipfsVerifiedPublish(item.content, item.hash, (error, result) => { |
|
||||||
try { |
|
||||||
item.hash = result.url.match('dweb:/ipfs/(.+)')[1] |
|
||||||
} catch (e) { |
|
||||||
item.hash = '<Metadata inconsistency> - ' + item.fileName |
|
||||||
} |
|
||||||
if (!error && ipfsVerifiedPublishCallBack) ipfsVerifiedPublishCallBack(item) |
|
||||||
item.output = result |
|
||||||
uploaded.push(item) |
|
||||||
cb(error) |
|
||||||
}) |
|
||||||
}, () => { |
|
||||||
const metadataContent = JSON.stringify(metadata) |
|
||||||
ipfsVerifiedPublish(metadataContent, '', (error, result) => { |
|
||||||
try { |
|
||||||
contract.metadataHash = result.url.match('dweb:/ipfs/(.+)')[1] |
|
||||||
} catch (e) { |
|
||||||
contract.metadataHash = '<Metadata inconsistency> - metadata.json' |
|
||||||
} |
|
||||||
if (!error && ipfsVerifiedPublishCallBack) { |
|
||||||
ipfsVerifiedPublishCallBack({ |
|
||||||
content: metadataContent, |
|
||||||
hash: contract.metadataHash |
|
||||||
}) |
|
||||||
} |
|
||||||
uploaded.push({ |
|
||||||
content: contract.metadata, |
|
||||||
hash: contract.metadataHash, |
|
||||||
filename: 'metadata.json', |
|
||||||
output: result |
|
||||||
}) |
|
||||||
cb(error, uploaded) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
async function ipfsVerifiedPublish (content, expectedHash, cb) { |
|
||||||
try { |
|
||||||
const results = await severalGatewaysPush(content) |
|
||||||
if (expectedHash && results !== expectedHash) { |
|
||||||
cb(null, { message: 'hash mismatch between solidity bytecode and uploaded content.', url: 'dweb:/ipfs/' + results, hash: results }) |
|
||||||
} else { |
|
||||||
cb(null, { message: 'ok', url: 'dweb:/ipfs/' + results, hash: results }) |
|
||||||
} |
|
||||||
} catch (error) { |
|
||||||
cb(error) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function severalGatewaysPush (content) { |
|
||||||
const invert = p => new Promise((resolve, reject) => p.then(reject).catch(resolve)) // Invert res and rej
|
|
||||||
const promises = ipfsNodes.map((node) => invert(node.add(content))) |
|
||||||
return invert(Promise.all(promises)) |
|
||||||
} |
|
||||||
@ -1,109 +0,0 @@ |
|||||||
'use strict' |
|
||||||
|
|
||||||
var async = require('async') |
|
||||||
var swarmgw = require('swarmgw')() |
|
||||||
|
|
||||||
module.exports = (contract, fileManager, cb, swarmVerifiedPublishCallBack) => { |
|
||||||
// gather list of files to publish
|
|
||||||
var sources = [] |
|
||||||
|
|
||||||
var metadata |
|
||||||
try { |
|
||||||
metadata = JSON.parse(contract.metadata) |
|
||||||
} catch (e) { |
|
||||||
return cb(e) |
|
||||||
} |
|
||||||
|
|
||||||
if (metadata === undefined) { |
|
||||||
return cb('No metadata') |
|
||||||
} |
|
||||||
|
|
||||||
async.eachSeries(Object.keys(metadata.sources), function (fileName, cb) { |
|
||||||
// find hash
|
|
||||||
let hash = null |
|
||||||
try { |
|
||||||
// we try extract the hash defined in the metadata.json
|
|
||||||
// in order to check if the hash that we get after publishing is the same as the one located in metadata.json
|
|
||||||
// if it's not the same, we throw "hash mismatch between solidity bytecode and uploaded content"
|
|
||||||
// if we don't find the hash in the metadata.json, the check is not done.
|
|
||||||
//
|
|
||||||
// TODO: refactor this with publishOnIpfs
|
|
||||||
if (metadata.sources[fileName].urls) { |
|
||||||
metadata.sources[fileName].urls.forEach(url => { |
|
||||||
if (url.includes('bzz')) hash = url.match('(bzzr|bzz-raw)://(.+)')[1] |
|
||||||
}) |
|
||||||
} |
|
||||||
} catch (e) { |
|
||||||
return cb('Error while extracting the hash from metadata.json') |
|
||||||
} |
|
||||||
|
|
||||||
fileManager.fileProviderOf(fileName).get(fileName, (error, content) => { |
|
||||||
if (error) { |
|
||||||
console.log(error) |
|
||||||
} else { |
|
||||||
sources.push({ |
|
||||||
content: content, |
|
||||||
hash: hash, |
|
||||||
filename: fileName |
|
||||||
}) |
|
||||||
} |
|
||||||
cb() |
|
||||||
}) |
|
||||||
}, function (error) { |
|
||||||
if (error) { |
|
||||||
cb(error) |
|
||||||
} else { |
|
||||||
// publish the list of sources in order, fail if any failed
|
|
||||||
var uploaded = [] |
|
||||||
async.eachSeries(sources, function (item, cb) { |
|
||||||
swarmVerifiedPublish(item.content, item.hash, (error, result) => { |
|
||||||
try { |
|
||||||
item.hash = result.url.match('bzz-raw://(.+)')[1] |
|
||||||
} catch (e) { |
|
||||||
item.hash = '<Metadata inconsistency> - ' + item.fileName |
|
||||||
} |
|
||||||
if (!error && swarmVerifiedPublishCallBack) swarmVerifiedPublishCallBack(item) |
|
||||||
item.output = result |
|
||||||
uploaded.push(item) |
|
||||||
// TODO this is a fix cause Solidity metadata does not contain the right swarm hash (poc 0.3)
|
|
||||||
metadata.sources[item.filename].urls[0] = result.url |
|
||||||
cb(error) |
|
||||||
}) |
|
||||||
}, () => { |
|
||||||
const metadataContent = JSON.stringify(metadata) |
|
||||||
swarmVerifiedPublish(metadataContent, '', (error, result) => { |
|
||||||
try { |
|
||||||
contract.metadataHash = result.url.match('bzz-raw://(.+)')[1] |
|
||||||
} catch (e) { |
|
||||||
contract.metadataHash = '<Metadata inconsistency> - metadata.json' |
|
||||||
} |
|
||||||
if (!error && swarmVerifiedPublishCallBack) { |
|
||||||
swarmVerifiedPublishCallBack({ |
|
||||||
content: metadataContent, |
|
||||||
hash: contract.metadataHash |
|
||||||
}) |
|
||||||
} |
|
||||||
uploaded.push({ |
|
||||||
content: contract.metadata, |
|
||||||
hash: contract.metadataHash, |
|
||||||
filename: 'metadata.json', |
|
||||||
output: result |
|
||||||
}) |
|
||||||
cb(error, uploaded) |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function swarmVerifiedPublish (content, expectedHash, cb) { |
|
||||||
swarmgw.put(content, function (err, ret) { |
|
||||||
if (err) { |
|
||||||
cb(err) |
|
||||||
} else if (expectedHash && ret !== expectedHash) { |
|
||||||
cb(null, { message: 'hash mismatch between solidity bytecode and uploaded content.', url: 'bzz-raw://' + ret, hash: ret }) |
|
||||||
} else { |
|
||||||
cb(null, { message: 'ok', url: 'bzz-raw://' + ret, hash: ret }) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
@ -1,145 +0,0 @@ |
|||||||
'use strict' |
|
||||||
var EventManager = require('../lib/events') |
|
||||||
var modalDialog = require('../app/ui/modaldialog') |
|
||||||
var yo = require('yo-yo') |
|
||||||
|
|
||||||
class Remixd { |
|
||||||
constructor (port) { |
|
||||||
this.event = new EventManager() |
|
||||||
this.port = port |
|
||||||
this.callbacks = {} |
|
||||||
this.callid = 0 |
|
||||||
this.socket = null |
|
||||||
this.connected = false |
|
||||||
this.receiveResponse() |
|
||||||
} |
|
||||||
|
|
||||||
online () { |
|
||||||
return this.socket !== null |
|
||||||
} |
|
||||||
|
|
||||||
close () { |
|
||||||
if (this.socket) { |
|
||||||
this.socket.close() |
|
||||||
this.socket = null |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
start (cb) { |
|
||||||
if (this.socket) { |
|
||||||
try { |
|
||||||
this.socket.close() |
|
||||||
} catch (e) {} |
|
||||||
} |
|
||||||
this.event.trigger('connecting', []) |
|
||||||
this.socket = new WebSocket('ws://localhost:' + this.port, 'echo-protocol') // eslint-disable-line
|
|
||||||
|
|
||||||
this.socket.addEventListener('open', (event) => { |
|
||||||
this.connected = true |
|
||||||
this.event.trigger('connected', [event]) |
|
||||||
cb() |
|
||||||
}) |
|
||||||
|
|
||||||
this.socket.addEventListener('message', (event) => { |
|
||||||
var data = JSON.parse(event.data) |
|
||||||
if (data.type === 'reply') { |
|
||||||
if (this.callbacks[data.id]) { |
|
||||||
this.callbacks[data.id](data.error, data.result) |
|
||||||
delete this.callbacks[data.id] |
|
||||||
} |
|
||||||
this.event.trigger('replied', [data]) |
|
||||||
} else if (data.type === 'notification') { |
|
||||||
this.event.trigger('notified', [data]) |
|
||||||
} else if (data.type === 'system') { |
|
||||||
if (data.error) { |
|
||||||
this.event.trigger('system', [{ |
|
||||||
error: data.error |
|
||||||
}]) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
this.socket.addEventListener('error', (event) => { |
|
||||||
this.errored(event) |
|
||||||
cb(event) |
|
||||||
}) |
|
||||||
|
|
||||||
this.socket.addEventListener('close', (event) => { |
|
||||||
if (event.wasClean) { |
|
||||||
this.connected = false |
|
||||||
this.event.trigger('closed', [event]) |
|
||||||
} else { |
|
||||||
this.errored(event) |
|
||||||
} |
|
||||||
this.socket = null |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
async receiveResponse (requestId) { |
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
this.event.register('replied', (data) => { |
|
||||||
if (data.id === requestId) { |
|
||||||
if (data.error) reject(data.error) |
|
||||||
else resolve(data.result) |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
errored (event) { |
|
||||||
function remixdDialog () { |
|
||||||
return yo`<div>Connection to Remixd closed. Localhost connection not available anymore.</div>` |
|
||||||
} |
|
||||||
if (this.connected) { |
|
||||||
modalDialog('Lost connection to Remixd!', remixdDialog(), {}, { label: '' }) |
|
||||||
} |
|
||||||
this.connected = false |
|
||||||
this.socket = null |
|
||||||
this.event.trigger('errored', [event]) |
|
||||||
} |
|
||||||
|
|
||||||
call (service, fn, args, callback) { |
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
this.ensureSocket((error) => { |
|
||||||
if (error) { |
|
||||||
callback && typeof callback === 'function' && callback(error) |
|
||||||
reject(error) |
|
||||||
return |
|
||||||
} |
|
||||||
if (this.socket && this.socket.readyState === this.socket.OPEN) { |
|
||||||
var data = this.format(service, fn, args) |
|
||||||
this.callbacks[data.id] = callback |
|
||||||
this.socket.send(JSON.stringify(data)) |
|
||||||
resolve(data.id) |
|
||||||
} else { |
|
||||||
callback && typeof callback === 'function' && callback('Socket not ready. state:' + this.socket.readyState) |
|
||||||
reject(new Error('Socket not ready. state:' + this.socket.readyState)) |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
ensureSocket (cb) { |
|
||||||
if (this.socket) return cb(null, this.socket) |
|
||||||
this.start((error) => { |
|
||||||
if (error) { |
|
||||||
cb(error) |
|
||||||
} else { |
|
||||||
cb(null, this.socket) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
format (service, fn, args) { |
|
||||||
var data = { |
|
||||||
id: this.callid, |
|
||||||
service: service, |
|
||||||
fn: fn, |
|
||||||
args: args |
|
||||||
} |
|
||||||
this.callid++ |
|
||||||
return data |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = Remixd |
|
||||||
@ -1,64 +0,0 @@ |
|||||||
import { Storage } from '@remix-project/remix-lib' |
|
||||||
import { joinPath } from './lib/helper' |
|
||||||
import yo from 'yo-yo' |
|
||||||
const modalDialogCustom = require('./app/ui/modal-dialog-custom') |
|
||||||
/* |
|
||||||
Migrating the files to the BrowserFS storage instead or raw localstorage |
|
||||||
*/ |
|
||||||
export default (fileProvider) => { |
|
||||||
const fileStorage = new Storage('sol:') |
|
||||||
const flag = 'status' |
|
||||||
const fileStorageBrowserFS = new Storage('remix_browserFS_migration:') |
|
||||||
if (fileStorageBrowserFS.get(flag) === 'done') return |
|
||||||
fileStorage.keys().forEach((path) => { |
|
||||||
if (path !== '.remix.config') { |
|
||||||
const content = fileStorage.get(path) |
|
||||||
fileProvider.set(path, content) |
|
||||||
// TODO https://github.com/ethereum/remix-ide/issues/2377
|
|
||||||
// fileStorage.remove(path) we don't want to remove it as we are still supporting the old version
|
|
||||||
} |
|
||||||
}) |
|
||||||
fileStorageBrowserFS.set(flag, 'done') |
|
||||||
} |
|
||||||
|
|
||||||
export async function migrateToWorkspace (fileManager, filePanel) { |
|
||||||
const browserProvider = fileManager.getProvider('browser') |
|
||||||
const workspaceProvider = fileManager.getProvider('workspace') |
|
||||||
const files = await browserProvider.copyFolderToJson('/') |
|
||||||
|
|
||||||
if (Object.keys(files).length === 0) { |
|
||||||
// we don't have any root file, only .workspaces
|
|
||||||
// don't need to create a workspace
|
|
||||||
throw new Error('No file to migrate') |
|
||||||
} |
|
||||||
|
|
||||||
if (Object.keys(files).length === 1 && files['/.workspaces']) { |
|
||||||
// we don't have any root file, only .workspaces
|
|
||||||
// don't need to create a workspace
|
|
||||||
throw new Error('No file to migrate') |
|
||||||
} |
|
||||||
|
|
||||||
const workspaceName = 'workspace_migrated_' + Date.now() |
|
||||||
await filePanel.processCreateWorkspace(workspaceName) |
|
||||||
filePanel.getWorkspaces() // refresh list
|
|
||||||
const workspacePath = joinPath('browser', workspaceProvider.workspacesPath, workspaceName) |
|
||||||
await populateWorkspace(workspacePath, files, browserProvider) |
|
||||||
return workspaceName |
|
||||||
} |
|
||||||
|
|
||||||
const populateWorkspace = async (workspace, json, browserProvider) => { |
|
||||||
for (const item in json) { |
|
||||||
const isFolder = json[item].content === undefined |
|
||||||
if (isFolder && item === '/.workspaces') continue // we don't want to replicate this one.
|
|
||||||
if (isFolder) { |
|
||||||
browserProvider.createDir(joinPath(workspace, item)) |
|
||||||
await populateWorkspace(workspace, json[item].children, browserProvider) |
|
||||||
} else { |
|
||||||
await browserProvider.set(joinPath(workspace, item), json[item].content, (err) => { |
|
||||||
if (err && err.message) { |
|
||||||
modalDialogCustom.alert(yo`<div>There was an error migrating your files:${err.message} <div>Please use the ‘Download all Files' action, clear the local storage and re-import your files manually or use the 'Restore files' action.</div></div>`) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,47 +0,0 @@ |
|||||||
const yo = require('yo-yo') |
|
||||||
const publishOnSwarm = require('./lib/publishOnSwarm') |
|
||||||
const publishOnIpfs = require('./lib/publishOnIpfs') |
|
||||||
const modalDialogCustom = require('./app/ui/modal-dialog-custom') |
|
||||||
|
|
||||||
export default function publish (storage, fileProvider, fileManager, contract) { |
|
||||||
if (contract) { |
|
||||||
if (contract.metadata === undefined || contract.metadata.length === 0) { |
|
||||||
modalDialogCustom.alert('This contract may be abstract, may not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.') |
|
||||||
} else { |
|
||||||
if (storage === 'swarm') { |
|
||||||
publishOnSwarm(contract, fileManager, function (err, uploaded) { |
|
||||||
if (err) { |
|
||||||
try { |
|
||||||
err = JSON.stringify(err) |
|
||||||
} catch (e) {} |
|
||||||
console.log(`Failed to publish metadata file to swarm, please check the Swarm gateways is available ( swarm-gateways.net ) ${err}`) |
|
||||||
} else { |
|
||||||
var result = yo`<div>${uploaded.map((value) => { |
|
||||||
return yo`<div><b>${value.filename}</b> : <pre>${value.output.url}</pre></div>` |
|
||||||
})}</div>` |
|
||||||
modalDialogCustom.alert(`Published ${contract.name}'s Metadata`, yo`<span>Metadata of "${contract.name.toLowerCase()}" was published successfully.<br> <pre>${result}</pre> </span>`) |
|
||||||
} |
|
||||||
}, (item) => { // triggered each time there's a new verified publish (means hash correspond)
|
|
||||||
fileProvider.addExternal('swarm/' + item.hash, item.content) |
|
||||||
}) |
|
||||||
} else { |
|
||||||
publishOnIpfs(contract, fileManager, function (err, uploaded) { |
|
||||||
if (err) { |
|
||||||
try { |
|
||||||
err = JSON.stringify(err) |
|
||||||
} catch (e) {} |
|
||||||
modalDialogCustom.alert(yo`<span>Failed to publish metadata file to ${storage}, please check the ${storage} gateways is available.<br />
|
|
||||||
${err}</span>`) |
|
||||||
} else { |
|
||||||
var result = yo`<div>${uploaded.map((value) => { |
|
||||||
return yo`<div><b>${value.filename}</b> : <pre>${value.output.url.replace('dweb:/ipfs/', 'ipfs://')}</pre></div>` |
|
||||||
})}</div>` |
|
||||||
modalDialogCustom.alert(`Published ${contract.name}'s Metadata`, yo`<span>Metadata of "${contract.name.toLowerCase()}" was published successfully.<br> <pre>${result}</pre> </span>`) |
|
||||||
} |
|
||||||
}, (item) => { // triggered each time there's a new verified publish (means hash correspond)
|
|
||||||
fileProvider.addExternal('ipfs/' + item.hash, item.content) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,285 +0,0 @@ |
|||||||
const csjs = require('csjs-inject') |
|
||||||
|
|
||||||
var css = csjs` |
|
||||||
.instanceTitleContainer { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.calldataInput{ |
|
||||||
height: 32px; |
|
||||||
} |
|
||||||
.title { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
font-size: 11px; |
|
||||||
width: 100%; |
|
||||||
overflow: hidden; |
|
||||||
word-break: break-word; |
|
||||||
line-height: initial; |
|
||||||
overflow: visible; |
|
||||||
padding: 0 0 8px; |
|
||||||
margin: 0; |
|
||||||
background: none; |
|
||||||
border: none; |
|
||||||
} |
|
||||||
.title button { |
|
||||||
background: none; |
|
||||||
border: none; |
|
||||||
} |
|
||||||
.titleLine { |
|
||||||
display: flex; |
|
||||||
align-items: baseline; |
|
||||||
} |
|
||||||
.titleText { |
|
||||||
word-break: break-word; |
|
||||||
width: 100%; |
|
||||||
border: none; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.spanTitleText { |
|
||||||
line-height: 12px; |
|
||||||
padding: 0; |
|
||||||
font-size: 11px; |
|
||||||
width:100%; |
|
||||||
border: none; |
|
||||||
background: none; |
|
||||||
text-transform: uppercase; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.inputGroupText { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.title .copy { |
|
||||||
color: var(--primary); |
|
||||||
} |
|
||||||
.titleExpander { |
|
||||||
padding: 5px 7px; |
|
||||||
} |
|
||||||
.nameNbuts { |
|
||||||
display: contents; |
|
||||||
flex-wrap: nowrap; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.instance { |
|
||||||
display: block; |
|
||||||
flex-direction: column; |
|
||||||
margin-bottom: 12px; |
|
||||||
background: none; |
|
||||||
border-radius: 2px; |
|
||||||
} |
|
||||||
.instance.hidesub { |
|
||||||
border-bottom: 1px solid; |
|
||||||
} |
|
||||||
.instance.hidesub .title { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
.instance.hidesub .udappClose { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
.instance.hidesub > * { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
.methCaret { |
|
||||||
min-width: 12px; |
|
||||||
width: 12px; |
|
||||||
margin-left: 4px; |
|
||||||
cursor: pointer; |
|
||||||
font-size: 16px; |
|
||||||
line-height: 0.6; |
|
||||||
vertical-align: middle; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
.cActionsWrapper { |
|
||||||
border-top-left-radius: 0; |
|
||||||
border-bottom-left-radius: 0.25rem; |
|
||||||
border-top-rightt-radius: 0; |
|
||||||
border-bottom-right-radius: 0.25rem; |
|
||||||
padding: 8px 10px 7px; |
|
||||||
} |
|
||||||
.group:after { |
|
||||||
content: ""; |
|
||||||
display: table; |
|
||||||
clear: both; |
|
||||||
} |
|
||||||
.buttonsContainer { |
|
||||||
margin-top: 2%; |
|
||||||
display: flex; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.instanceButton { |
|
||||||
height: 32px; |
|
||||||
border-radius: 3px; |
|
||||||
white-space: nowrap; |
|
||||||
font-size: 11px; |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
} |
|
||||||
.closeIcon { |
|
||||||
font-size: 12px; |
|
||||||
cursor: pointer; |
|
||||||
margin-left: 5px; |
|
||||||
} |
|
||||||
.udappClose { |
|
||||||
display: flex; |
|
||||||
justify-content: flex-end; |
|
||||||
} |
|
||||||
.contractProperty { |
|
||||||
width:100%; |
|
||||||
} |
|
||||||
.contractProperty.hasArgs input { |
|
||||||
padding: .36em; |
|
||||||
border-radius: 5px; |
|
||||||
} |
|
||||||
.contractProperty .contractActionsContainerSingle input{ |
|
||||||
border-top-left-radius: 0; |
|
||||||
border-bottom-left-radius: 0; |
|
||||||
} |
|
||||||
.contractProperty button { |
|
||||||
min-width: 100px; |
|
||||||
width: 100px; |
|
||||||
margin:0; |
|
||||||
word-break: inherit; |
|
||||||
} |
|
||||||
.contractProperty button:disabled { |
|
||||||
cursor: not-allowed; |
|
||||||
background-color: white; |
|
||||||
border-color: lightgray; |
|
||||||
} |
|
||||||
.contractProperty.constant button { |
|
||||||
min-width: 100px; |
|
||||||
width: 100px; |
|
||||||
margin:0; |
|
||||||
word-break: inherit; |
|
||||||
outline: none; |
|
||||||
white-space: nowrap; |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
} |
|
||||||
.contractProperty > .value { |
|
||||||
box-sizing: border-box; |
|
||||||
float: left; |
|
||||||
align-self: center; |
|
||||||
margin-left: 4px; |
|
||||||
} |
|
||||||
.contractActionsContainer { |
|
||||||
width: 100%; |
|
||||||
margin-bottom: 8px; |
|
||||||
} |
|
||||||
.contractActionsContainerSingle { |
|
||||||
display: flex; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.contractActionsContainerSingle i { |
|
||||||
line-height: 2; |
|
||||||
} |
|
||||||
.contractActionsContainerMulti { |
|
||||||
display:none; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.contractActionsContainerMultiInner { |
|
||||||
width: 100%; |
|
||||||
padding: 16px 8px 16px 14px; |
|
||||||
border-radius: 3px; |
|
||||||
margin-bottom: 8px; |
|
||||||
} |
|
||||||
.multiHeader { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
margin-bottom: 8px; |
|
||||||
text-align: left; |
|
||||||
font-size: 10px; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
.contractActionsContainerMultiInner .multiTitle { |
|
||||||
padding-left: 10px; |
|
||||||
} |
|
||||||
.contractProperty .multiTitle { |
|
||||||
padding: 0; |
|
||||||
line-height: 16px; |
|
||||||
display: inline-block; |
|
||||||
font-size: 12px; |
|
||||||
font-weight: bold; |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
.contractProperty .contractActionsContainerMultiInner .multiArg label{ |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
.multiHeader .methCaret { |
|
||||||
float: right; |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
.contractProperty.constant .multiTitle { |
|
||||||
display: inline-block; |
|
||||||
width: 90%; |
|
||||||
/* font-size: 10px; */ |
|
||||||
height: 25px; |
|
||||||
padding-left: 20px; |
|
||||||
font-weight: bold; |
|
||||||
line-height: 25px; |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
.multiArg { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: flex-end; |
|
||||||
margin-top: 4px; |
|
||||||
} |
|
||||||
.multiArg input{ |
|
||||||
padding: 5px; |
|
||||||
} |
|
||||||
.multiArg label { |
|
||||||
width: auto; |
|
||||||
padding: 0; |
|
||||||
margin: 0 4px 0 0; |
|
||||||
font-size: 10px; |
|
||||||
line-height: 12px; |
|
||||||
text-align: right; |
|
||||||
word-break: initial; |
|
||||||
} |
|
||||||
.multiArg button { |
|
||||||
max-width: 100px; |
|
||||||
border-radius: 3px; |
|
||||||
border-width: 1px; |
|
||||||
width: inherit; |
|
||||||
} |
|
||||||
.multiHeader button { |
|
||||||
display: inline-block; |
|
||||||
width: 94%; |
|
||||||
} |
|
||||||
.hasArgs .multiArg input { |
|
||||||
border-left: 1px solid #dddddd; |
|
||||||
width: 67%; |
|
||||||
} |
|
||||||
.hasArgs input { |
|
||||||
display: block; |
|
||||||
height: 32px; |
|
||||||
border: 1px solid #dddddd; |
|
||||||
padding: .36em; |
|
||||||
border-left: none; |
|
||||||
padding: 8px 8px 8px 10px; |
|
||||||
font-size: 10px !important; |
|
||||||
} |
|
||||||
.hasArgs button { |
|
||||||
border-top-right-radius: 0; |
|
||||||
border-bottom-right-radius: 0; |
|
||||||
border-right: 0; |
|
||||||
white-space: nowrap; |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
font-size: 11px; |
|
||||||
} |
|
||||||
.hasArgs .contractActionsContainerMulti button { |
|
||||||
border-radius: 3px; |
|
||||||
} |
|
||||||
.contractActionsContainerMultiInner .multiArg i { |
|
||||||
padding-right: 10px; |
|
||||||
} |
|
||||||
.hideWarningsContainer { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-left: 2% |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
module.exports = css |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
'use strict' |
|
||||||
|
|
||||||
var test = require('tape') |
|
||||||
|
|
||||||
var Compiler = require('@remix-project/remix-solidity').Compiler |
|
||||||
|
|
||||||
test('compiler.compile smoke', function (t) { |
|
||||||
t.plan(1) |
|
||||||
|
|
||||||
var noop = function () {} |
|
||||||
var fakeImport = function (url, cb) { cb('Not implemented') } |
|
||||||
var compiler = new Compiler(fakeImport) |
|
||||||
compiler.compileJSON = noop |
|
||||||
compiler.compile({ 'test': '' }, 'test') |
|
||||||
t.ok(compiler) |
|
||||||
}) |
|
||||||
@ -1,52 +0,0 @@ |
|||||||
'use strict' |
|
||||||
var modalDialogCustom |
|
||||||
if (typeof window !== 'undefined') { |
|
||||||
modalDialogCustom = require('../app/ui/modal-dialog-custom') |
|
||||||
} |
|
||||||
// ^ this class can be load in a non browser context when running node unit testing.
|
|
||||||
// should not load UI in that case
|
|
||||||
|
|
||||||
// Allowing window to be overriden for testing
|
|
||||||
function GistHandler (_window) { |
|
||||||
if (_window !== undefined) { |
|
||||||
modalDialogCustom = _window |
|
||||||
} |
|
||||||
|
|
||||||
this.handleLoad = function (params, cb) { |
|
||||||
if (!cb) cb = () => {} |
|
||||||
var loadingFromGist = false |
|
||||||
var gistId |
|
||||||
if (params['gist'] === '') { |
|
||||||
loadingFromGist = true |
|
||||||
modalDialogCustom.prompt( |
|
||||||
'Load a Gist', |
|
||||||
'Enter the URL or ID of the Gist you would like to load.', |
|
||||||
null, |
|
||||||
target => { |
|
||||||
if (target !== '') { |
|
||||||
gistId = getGistId(target) |
|
||||||
if (gistId) { |
|
||||||
cb(gistId) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
return loadingFromGist |
|
||||||
} else { |
|
||||||
gistId = params['gist'] |
|
||||||
loadingFromGist = !!gistId |
|
||||||
} |
|
||||||
if (loadingFromGist) { |
|
||||||
cb(gistId) |
|
||||||
} |
|
||||||
return loadingFromGist |
|
||||||
} |
|
||||||
|
|
||||||
function getGistId (str) { |
|
||||||
var idr = /[0-9A-Fa-f]{8,}/ |
|
||||||
var match = idr.exec(str) |
|
||||||
return match ? match[0] : null |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = GistHandler |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
'use strict' |
|
||||||
|
|
||||||
require('./compiler-test') |
|
||||||
require('./gist-handler-test') |
|
||||||
require('./query-params-test') |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
'use strict' |
|
||||||
|
|
||||||
var test = require('tape') |
|
||||||
|
|
||||||
var QueryParams = require('../src/lib/query-params') |
|
||||||
|
|
||||||
test('queryParams.get', function (t) { |
|
||||||
t.plan(2) |
|
||||||
|
|
||||||
var fakeWindow = {location: {hash: '#wat=sup&foo=bar', search: ''}} |
|
||||||
var params = new QueryParams(fakeWindow).get() |
|
||||||
t.equal(params.wat, 'sup') |
|
||||||
t.equal(params.foo, 'bar') |
|
||||||
}) |
|
||||||
|
|
||||||
test('queryParams.update', function (t) { |
|
||||||
t.plan(1) |
|
||||||
|
|
||||||
var fakeWindow = {location: {hash: '#wat=sup', search: ''}} |
|
||||||
var qp = new QueryParams(fakeWindow) |
|
||||||
qp.update({foo: 'bar'}) |
|
||||||
t.equal(fakeWindow.location.hash, '#wat=sup&foo=bar') |
|
||||||
}) |
|
||||||
@ -0,0 +1,138 @@ |
|||||||
|
/* global fetch */ |
||||||
|
'use strict' |
||||||
|
import { Plugin } from '@remixproject/engine' |
||||||
|
|
||||||
|
interface StringByString { |
||||||
|
[key: string]: string; |
||||||
|
} |
||||||
|
|
||||||
|
const profile = { |
||||||
|
name: 'gistHandler', |
||||||
|
methods: ['load'], |
||||||
|
events: [], |
||||||
|
version: '0.0.1' |
||||||
|
} |
||||||
|
|
||||||
|
export class GistHandler extends Plugin { |
||||||
|
constructor () { |
||||||
|
super(profile) |
||||||
|
} |
||||||
|
|
||||||
|
async handleLoad (gistId: String | null, cb: Function) { |
||||||
|
if (!cb) cb = () => {} |
||||||
|
|
||||||
|
var loadingFromGist = false |
||||||
|
if (!gistId) { |
||||||
|
loadingFromGist = true |
||||||
|
let value |
||||||
|
try { |
||||||
|
value = await (() => { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandler', |
||||||
|
title: 'Load a Gist', |
||||||
|
message: 'Enter the ID of the Gist or URL you would like to load.', |
||||||
|
modalType: 'prompt', |
||||||
|
okLabel: 'OK', |
||||||
|
cancelLabel: 'Cancel', |
||||||
|
okFn: (value) => { |
||||||
|
setTimeout(() => resolve(value), 0) |
||||||
|
}, |
||||||
|
cancelFn: () => { |
||||||
|
setTimeout(() => reject(new Error('Canceled')), 0) |
||||||
|
}, |
||||||
|
hideFn: () => { |
||||||
|
setTimeout(() => reject(new Error('Hide')), 0) |
||||||
|
} |
||||||
|
} |
||||||
|
this.call('modal', 'modal', modalContent) |
||||||
|
}) |
||||||
|
})() |
||||||
|
} catch (e) { |
||||||
|
// the modal has been canceled
|
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if (value !== '') { |
||||||
|
gistId = getGistId(value) |
||||||
|
if (gistId) { |
||||||
|
cb(gistId) |
||||||
|
} else { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandler', |
||||||
|
title: 'Gist load error', |
||||||
|
message: 'Error while loading gist. Please provide a valid Gist ID or URL.' |
||||||
|
} |
||||||
|
this.call('modal', 'alert', modalContent) |
||||||
|
} |
||||||
|
} else { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandlerEmpty', |
||||||
|
title: 'Gist load error', |
||||||
|
message: 'Error while loading gist. Id cannot be empty.' |
||||||
|
} |
||||||
|
this.call('modal', 'alert', modalContent) |
||||||
|
} |
||||||
|
return loadingFromGist |
||||||
|
} else { |
||||||
|
loadingFromGist = !!gistId |
||||||
|
} |
||||||
|
if (loadingFromGist) { |
||||||
|
cb(gistId) |
||||||
|
} |
||||||
|
return loadingFromGist |
||||||
|
} |
||||||
|
|
||||||
|
load (gistId: String | null) { |
||||||
|
const self = this |
||||||
|
return self.handleLoad(gistId, async (gistId: String | null) => { |
||||||
|
let data: any |
||||||
|
try { |
||||||
|
data = await (await fetch(`https://api.github.com/gists/${gistId}`)).json() as any |
||||||
|
if (!data.files) { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandler', |
||||||
|
title: 'Gist load error', |
||||||
|
message: data.message, |
||||||
|
modalType: 'alert', |
||||||
|
okLabel: 'OK' |
||||||
|
} |
||||||
|
await this.call('modal', 'modal', modalContent) |
||||||
|
return |
||||||
|
} |
||||||
|
} catch (e: any) { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandler', |
||||||
|
title: 'Gist load error', |
||||||
|
message: e.message |
||||||
|
|
||||||
|
} |
||||||
|
await this.call('modal', 'alert', modalContent) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
const obj: StringByString = {} |
||||||
|
Object.keys(data.files).forEach((element) => { |
||||||
|
const path = element.replace(/\.\.\./g, '/') |
||||||
|
obj['/' + 'gist-' + gistId + '/' + path] = data.files[element] |
||||||
|
}) |
||||||
|
this.call('fileManager', 'setBatchFiles', obj, 'workspace', true, async (errorSavingFiles: any) => { |
||||||
|
if (errorSavingFiles) { |
||||||
|
const modalContent = { |
||||||
|
id: 'gisthandler', |
||||||
|
title: 'Gist load error', |
||||||
|
message: errorSavingFiles.message || errorSavingFiles |
||||||
|
|
||||||
|
} |
||||||
|
this.call('modal', 'alert', modalContent) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const getGistId = (str) => { |
||||||
|
var idr = /[0-9A-Fa-f]{8,}/ |
||||||
|
var match = idr.exec(str) |
||||||
|
return match ? match[0] : null |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue