'use strict'
var $ = require('jquery')
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var async = require('async')
var request = require('request')
var remixLib = require('remix-lib')
var remixTests = require('remix-tests')
var EventManager = remixLib.EventManager
var registry = require('./global/registry')
var UniversalDApp = require('./universal-dapp.js')
var UniversalDAppUI = require('./universal-dapp-ui.js')
var Remixd = require('./lib/remixd')
var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
var QueryParams = require('./lib/query-params')
var GistHandler = require('./lib/gist-handler')
var helper = require('./lib/helper')
var Storage = remixLib.Storage
var Browserfiles = require('./app/files/browser-files')
var BrowserfilesTree = require('./app/files/browser-files-tree')
var chromeCloudStorageSync = require('./app/files/chromeCloudStorageSync')
var SharedFolder = require('./app/files/shared-folder')
var Config = require('./config')
var Renderer = require('./app/ui/renderer')
var Compiler = require('remix-solidity').Compiler
var executionContext = require('./execution-context')
var FilePanel = require('./app/panels/file-panel')
var EditorPanel = require('./app/panels/editor-panel')
var RighthandPanel = require('./app/panels/righthand-panel')
var examples = require('./app/editor/example-contracts')
var modalDialogCustom = require('./app/ui/modal-dialog-custom')
var TxLogger = require('./app/execution/txLogger')
var Txlistener = remixLib.execution.txListener
var EventsDecoder = remixLib.execution.EventsDecoder
var CompilerImport = require('./app/compiler/compiler-imports')
var FileManager = require('./app/files/fileManager')
var BasicReadOnlyExplorer = require('./app/files/basicReadOnlyExplorer')
var NotPersistedExplorer = require('./app/files/NotPersistedExplorer')
var toolTip = require('./app/ui/tooltip')
var TransactionReceiptResolver = require('./transactionReceiptResolver')
var styleGuide = require('./app/ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
margin : 0;
padding : 0;
font-size : 12px;
color : ${styles.leftPanel.text_Primary};
font-weight : normal;
}
pre {
overflow-x: auto;
}
.browsersolidity {
position : relative;
width : 100vw;
height : 100vh;
overflow : hidden;
}
.centerpanel {
background-color : ${styles.colors.transparent};
display : flex;
flex-direction : column;
position : absolute;
top : 0;
bottom : 0;
overflow : hidden;
}
.leftpanel {
background-color : ${styles.leftPanel.backgroundColor_Panel};
display : flex;
flex-direction : column;
position : absolute;
top : 0;
bottom : 0;
left : 0;
overflow : hidden;
}
.rightpanel {
background-color : ${styles.rightPanel.backgroundColor_Panel};
display : flex;
flex-direction : column;
position : absolute;
top : 0;
right : 0;
bottom : 0;
overflow : hidden;
}
.highlightcode {
position:absolute;
z-index:20;
background-color: ${styles.editor.backgroundColor_DebuggerMode};
}
.highlightcode_fullLine {
position:absolute;
z-index:20;
background-color: ${styles.editor.backgroundColor_DebuggerMode};
opacity: 0.5;
}
`
class App {
constructor (api = {}, events = {}, opts = {}) {
var self = this
this.event = new EventManager()
self._components = {}
registry.put({api: self, name: 'app'})
var fileStorage = new Storage('sol:')
registry.put({api: fileStorage, name: 'fileStorage'})
var configStorage = new Storage('config:')
registry.put({api: configStorage, name: 'configStorage'})
self._components.config = new Config(fileStorage)
registry.put({api: self._components.config, name: 'config'})
executionContext.init(self._components.config)
executionContext.listenOnLastBlock()
self._components.compilerImport = new CompilerImport()
registry.put({api: self._components.compilerImport, name: 'compilerimport'})
self._components.gistHandler = new GistHandler()
self._components.filesProviders = {}
self._components.filesProviders['browser'] = new Browserfiles(fileStorage)
self._components.filesProviders['config'] = new BrowserfilesTree('config', configStorage)
self._components.filesProviders['config'].init()
registry.put({api: self._components.filesProviders['browser'], name: 'fileproviders/browser'})
registry.put({api: self._components.filesProviders['config'], name: 'fileproviders/config'})
var remixd = new Remixd()
registry.put({api: remixd, name: 'remixd'})
remixd.event.register('system', (message) => {
if (message.error) toolTip(message.error)
})
self._components.filesProviders['localhost'] = new SharedFolder(remixd)
self._components.filesProviders['swarm'] = new BasicReadOnlyExplorer('swarm')
self._components.filesProviders['github'] = new BasicReadOnlyExplorer('github')
self._components.filesProviders['gist'] = new NotPersistedExplorer('gist')
self._components.filesProviders['ipfs'] = new BasicReadOnlyExplorer('ipfs')
self._components.filesProviders['https'] = new BasicReadOnlyExplorer('https')
self._components.filesProviders['http'] = new BasicReadOnlyExplorer('http')
registry.put({api: self._components.filesProviders['localhost'], name: 'fileproviders/localhost'})
registry.put({api: self._components.filesProviders['swarm'], name: 'fileproviders/swarm'})
registry.put({api: self._components.filesProviders['github'], name: 'fileproviders/github'})
registry.put({api: self._components.filesProviders['gist'], name: 'fileproviders/gist'})
registry.put({api: self._components.filesProviders['ipfs'], name: 'fileproviders/ipfs'})
registry.put({api: self._components.filesProviders, name: 'fileproviders'})
self._view = {}
self.data = {
_layout: {
right: {
offset: self._components.config.get('right-offset') || 400,
show: true
}, // @TODO: adapt sizes proportionally to browser window size
left: {
offset: self._components.config.get('left-offset') || 200,
show: true
}
}
}
}
_adjustLayout (direction, delta) {
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 {
self._components.config.set(`${direction}-offset`, delta)
layout.offset = delta
}
}
if (direction === 'left') {
self._view.leftpanel.style.width = delta + 'px'
self._view.centerpanel.style.left = delta + 'px'
}
if (direction === 'right') {
self._view.rightpanel.style.width = delta + 'px'
self._view.centerpanel.style.right = delta + 'px'
}
}
init () {
var self = this
run.apply(self)
}
render () {
var self = this
if (self._view.el) return self._view.el
self._view.leftpanel = yo`
${''}
`
self._view.centerpanel = yo`
${''}
`
self._view.rightpanel = yo`
${''}
`
self._view.el = yo`
${self._view.leftpanel}
${self._view.centerpanel}
${self._view.rightpanel}
`
// INIT
self._adjustLayout('left', self.data._layout.left.offset)
self._adjustLayout('right', self.data._layout.right.offset)
return self._view.el
}
runCompiler () {
const self = this
if (self._components.righthandpanel.debugger().isActive) return
self._components.fileManager.saveCurrentFile()
self._components.editorpanel.getEditor().clearAnnotations()
var currentFile = self._components.config.get('currentFile')
if (currentFile) {
if (/.(.sol)$/.exec(currentFile)) {
// only compile *.sol file.
var target = currentFile
var sources = {}
var provider = self._components.fileManager.fileProviderOf(currentFile)
if (provider) {
provider.get(target, (error, content) => {
if (error) {
console.log(error)
} else {
sources[target] = { content }
self._components.compiler.compile(sources, target)
}
})
} else {
console.log('cannot compile ' + currentFile + '. Does not belong to any explorer')
}
}
}
}
startdebugging (txHash) {
const self = this
self.event.trigger('debuggingRequested', [])
self._components.righthandpanel.debugger().debug(txHash)
}
loadFromGist (params) {
const self = this
return self._components.gistHandler.handleLoad(params, function (gistId) {
request.get({
url: `https://api.github.com/gists/${gistId}`,
json: true
}, (error, response, data = {}) => {
if (error || !data.files) {
modalDialogCustom.alert(`Gist load error: ${error || data.message}`)
return
}
self.loadFiles(data.files, 'gist', (errorLoadingFile) => {
if (!errorLoadingFile) self._components.filesProviders['gist'].id = gistId
})
})
})
}
loadFiles (filesSet, fileProvider, callback) {
const self = this
if (!fileProvider) fileProvider = 'browser'
async.each(Object.keys(filesSet), (file, callback) => {
helper.createNonClashingName(file, self._components.filesProviders[fileProvider],
(error, name) => {
if (error) {
modalDialogCustom.alert('Unexpected error loading the file ' + error)
} else if (helper.checkSpecialChars(name)) {
modalDialogCustom.alert('Special characters are not allowed')
} else {
self._components.filesProviders[fileProvider].set(name, filesSet[file].content)
}
callback()
})
}, (error) => {
if (!error) self._components.fileManager.switchFile()
if (callback) callback(error)
})
}
importExternal (url, cb) {
const self = this
self._components.compilerImport.import(url,
(loadingMsg) => {
toolTip(loadingMsg)
},
(error, content, cleanUrl, type, url) => {
if (!error) {
if (self._components.filesProviders[type]) {
self._components.filesProviders[type].addReadOnly(cleanUrl, content, url)
}
cb(null, content)
} else {
cb(error)
}
})
}
importFileCb (url, filecb) {
const self = this
if (url.indexOf('/remix_tests.sol') !== -1) {
return filecb(null, remixTests.assertLibCode)
}
var provider = self._components.fileManager.fileProviderOf(url)
if (provider) {
if (provider.type === 'localhost' && !provider.isConnected()) {
return filecb(`file provider ${provider.type} not available while trying to resolve ${url}`)
}
provider.exists(url, (error, exist) => {
if (error) return filecb(error)
if (exist) {
return provider.get(url, filecb)
} else {
self.importExternal(url, filecb)
}
})
} else if (self._components.compilerImport.isRelativeImport(url)) {
// try to resolve localhost modules (aka truffle imports)
var splitted = /([^/]+)\/(.*)$/g.exec(url)
async.tryEach([
(cb) => { self.importFileCb('localhost/installed_contracts/' + url, cb) },
(cb) => { if (!splitted) { cb('url not parseable' + url) } else { self.importFileCb('localhost/installed_contracts/' + splitted[1] + '/contracts/' + splitted[2], cb) } },
(cb) => { self.importFileCb('localhost/node_modules/' + url, cb) },
(cb) => { if (!splitted) { cb('url not parseable' + url) } else { self.importFileCb('localhost/node_modules/' + splitted[1] + '/contracts/' + splitted[2], cb) } }],
(error, result) => { filecb(error, result) }
)
} else {
self.importExternal(url, filecb)
}
}
}
module.exports = App
function run () {
var self = this
if (window.location.hostname === 'yann300.github.io') {
modalDialogCustom.alert('This UNSTABLE ALPHA branch of Remix has been moved to http://ethereum.github.io/remix-live-alpha.')
} else if (window.location.hostname === 'remix-alpha.ethereum.org' ||
(window.location.hostname === 'ethereum.github.io' && window.location.pathname.indexOf('/remix-live-alpha') === 0)) {
modalDialogCustom.alert(`This instance of the Remix IDE is an UNSTABLE ALPHA branch.\n
Please only use it if you know what you are doing, otherwise visit the stable version at http://remix.ethereum.org.`)
} else if (window.location.protocol.indexOf('http') === 0 &&
window.location.hostname !== 'remix.ethereum.org' &&
window.location.hostname !== 'localhost' &&
window.location.hostname !== '127.0.0.1') {
modalDialogCustom.alert(`The Remix IDE has moved to http://remix.ethereum.org.\n
This instance of Remix you are visiting WILL NOT BE UPDATED.\n
Please make a backup of your contracts and start using http://remix.ethereum.org`)
}
if (window.location.protocol.indexOf('https') === 0) {
toolTip('You are using an `https` connection. Please switch to `http` if you are using Remix against an `http Web3 provider` or allow Mixed Content in your browser.')
}
// Oops! Accidentally trigger refresh or bookmark.
window.onbeforeunload = function () {
return 'Are you sure you want to leave?'
}
// Run the compiler instead of trying to save the website
$(window).keydown(function (e) {
// ctrl+s or command+s
if ((e.metaKey || e.ctrlKey) && e.keyCode === 83) {
e.preventDefault()
self.runCompiler()
}
})
registry.put({api: msg => self._components.editorpanel.logHtmlMessage(msg), name: 'logCallback'})
// ----------------- Compiler -----------------
self._components.compiler = new Compiler((url, cb) => self.importFileCb(url, cb))
registry.put({api: self._components.compiler, name: 'compiler'})
var offsetToLineColumnConverter = new OffsetToLineColumnConverter(self._components.compiler.event)
registry.put({api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter'})
// ----------------- UniversalDApp -----------------
var udapp = new UniversalDApp({
removable: false,
removable_instances: true
})
registry.put({api: udapp, name: 'udapp'})
var udappUI = new UniversalDAppUI(udapp)
registry.put({api: udappUI, name: 'udappUI'})
// ----------------- Tx listener -----------------
var transactionReceiptResolver = new TransactionReceiptResolver()
var txlistener = new Txlistener({
api: {
contracts: function () {
if (self._components.compiler.lastCompilationResult && self._components.compiler.lastCompilationResult.data) {
return self._components.compiler.lastCompilationResult.data.contracts
}
return null
},
resolveReceipt: function (tx, cb) {
transactionReceiptResolver.resolve(tx, cb)
}
},
event: {
udapp: udapp.event
}})
registry.put({api: txlistener, name: 'txlistener'})
var eventsDecoder = new EventsDecoder({
api: {
resolveReceipt: function (tx, cb) {
transactionReceiptResolver.resolve(tx, cb)
}
}
})
registry.put({api: eventsDecoder, name: 'eventsdecoder'})
txlistener.startListening()
// TODO: There are still a lot of dep between editorpanel and filemanager
// ----------------- editor panel ----------------------
self._components.editorpanel = new EditorPanel()
registry.put({ api: self._components.editorpanel, name: 'editorpanel' })
// ----------------- file manager ----------------------------
self._components.fileManager = new FileManager()
var fileManager = self._components.fileManager
registry.put({api: fileManager, name: 'filemanager'})
self._components.editorpanel.init()
self._components.fileManager.init()
self._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction))
self._view.centerpanel.appendChild(self._components.editorpanel.render())
// The event listener needs to be registered as early as possible, because the
// parent will send the message upon the "load" event.
var filesToLoad = null
var loadFilesCallback = function (files) { filesToLoad = files } // will be replaced later
window.addEventListener('message', function (ev) {
if (typeof ev.data === typeof [] && ev.data[0] === 'loadFiles') {
loadFilesCallback(ev.data[1])
}
}, false)
// Replace early callback with instant response
loadFilesCallback = function (files) {
self.loadFiles(files)
}
// Run if we did receive an event from remote instance while starting up
if (filesToLoad !== null) {
self.loadFiles(filesToLoad)
}
// ---------------- FilePanel --------------------
self._components.filePanel = new FilePanel()
self._view.leftpanel.appendChild(self._components.filePanel.render())
self._components.filePanel.event.register('resize', delta => self._adjustLayout('left', delta))
registry.put({api: self._components.filePanel, name: 'filepanel'})
// ----------------- Renderer -----------------
var renderer = new Renderer()
registry.put({api: renderer, name: 'renderer'})
// ---------------- Righthand-panel --------------------
self._components.righthandpanel = new RighthandPanel()
self._view.rightpanel.appendChild(self._components.righthandpanel.render())
self._components.righthandpanel.init()
self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta))
var txLogger = new TxLogger() // eslint-disable-line
executionContext.event.register('contextChanged', this, function (context) {
self.runCompiler()
})
// rerun the compiler when the environement changed
executionContext.event.register('web3EndpointChanged', this, function (context) {
self.runCompiler()
})
var queryParams = new QueryParams()
// check init query parameters from the URL once the compiler is loaded
self._components.compiler.event.register('compilerLoaded', this, function (version) {
self.runCompiler()
if (queryParams.get().context) {
let context = queryParams.get().context
let endPointUrl = queryParams.get().endPointUrl
executionContext.setContext(context, endPointUrl,
() => {
modalDialogCustom.confirm(null, 'Are you sure you want to connect to an ethereum node?', () => {
if (!endPointUrl) {
endPointUrl = 'http://localhost:8545'
}
modalDialogCustom.prompt(null, 'Web3 Provider Endpoint', endPointUrl, (target) => {
executionContext.setProviderFromEndpoint(target, context)
}, () => {})
}, () => {})
},
(alertMsg) => {
modalDialogCustom.alert(alertMsg)
})
}
if (queryParams.get().debugtx) {
self.startdebugging(queryParams.get().debugtx)
}
if (queryParams.get().pluginurl) {
var title = queryParams.get().plugintitle
var url = queryParams.get().pluginurl
modalDialogCustom.confirm(null, `Remix is going to load the extension "${title}" located at ${queryParams.get().pluginurl}. Are you sure to load this external extension?`, () => {
self._components.righthandpanel.loadPlugin({title, url})
})
}
})
// chrome app
window.syncStorage = chromeCloudStorageSync
chromeCloudStorageSync()
var loadingFromGist = self.loadFromGist(queryParams.get())
if (!loadingFromGist) {
// insert ballot contract if there are no files to show
self._components.filesProviders['browser'].resolveDirectory('browser', (error, filesList) => {
if (error) console.error(error)
if (Object.keys(filesList).length === 0) {
if (!self._components.filesProviders['browser'].set(examples.ballot.name, examples.ballot.content)) {
modalDialogCustom.alert('Failed to store example contract in browser. Remix will not work properly. Please ensure Remix has access to LocalStorage. Safari in Private mode is known not to work.')
} else {
self._components.filesProviders['browser'].set(examples.ballot_test.name, examples.ballot_test.content)
}
}
})
}
// Open last opened file
var previouslyOpenedFile = self._components.config.get('currentFile')
if (previouslyOpenedFile) {
self._components.filesProviders['browser'].get(previouslyOpenedFile, (error, content) => {
if (!error && content) {
fileManager.switchFile(previouslyOpenedFile)
} else {
fileManager.switchFile()
}
})
} else {
fileManager.switchFile()
}
}