diff options
Diffstat (limited to 'development/mock-dev.js')
-rw-r--r-- | development/mock-dev.js | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/development/mock-dev.js b/development/mock-dev.js new file mode 100644 index 000000000..a1fb3a86d --- /dev/null +++ b/development/mock-dev.js @@ -0,0 +1,145 @@ +/* MOCK DEV + * + * This is a utility module. + * It initializes a minimalist browserifiable project + * that contains the Metamask UI, with a local background process. + * + * Includes a state reset button for restoring to initial state. + * + * This is a convenient way to develop and test the plugin + * without having to re-open the plugin or even re-build it. + * + * To use, run `npm run mock`. + */ + +const extend = require('xtend') +const render = require('react-dom').render +const h = require('react-hyperscript') +const Root = require('../ui/app/root') +const configureStore = require('../ui/app/store') +const actions = require('../ui/app/actions') +const states = require('./states') +const backGroundConnectionModifiers = require('./backGroundConnectionModifiers') +const Selector = require('./selector') +const MetamaskController = require('../app/scripts/metamask-controller') +const firstTimeState = require('../app/scripts/first-time-state') +const ExtensionPlatform = require('../app/scripts/platforms/extension') +const extension = require('./mockExtension') +const noop = function () {} + +const log = require('loglevel') +window.log = log +log.setLevel('debug') + +// +// Query String +// + +const qs = require('qs') +let queryString = qs.parse(window.location.href.split('#')[1]) +let selectedView = queryString.view || 'first time' +const firstState = states[selectedView] +updateQueryParams(selectedView) + +function updateQueryParams(newView) { + queryString.view = newView + const params = qs.stringify(queryString) + window.location.href = window.location.href.split('#')[0] + `#${params}` +} + +// +// CSS +// + +const MetaMaskUiCss = require('../ui/css') +const injectCss = require('inject-css') + +// +// MetaMask Controller +// + +const controller = new MetamaskController({ + // User confirmation callbacks: + showUnconfirmedMessage: noop, + unlockAccountMessage: noop, + showUnapprovedTx: noop, + platform: {}, + // initial state + initState: firstTimeState, +}) +global.metamaskController = controller +global.platform = new ExtensionPlatform + +// +// User Interface +// + +actions._setBackgroundConnection(controller.getApi()) +actions.update = function(stateName) { + selectedView = stateName + updateQueryParams(stateName) + const newState = states[selectedView] + return { + type: 'GLOBAL_FORCE_UPDATE', + value: newState, + } +} + +function modifyBackgroundConnection(backgroundConnectionModifier) { + const modifiedBackgroundConnection = Object.assign({}, controller.getApi(), backgroundConnectionModifier) + actions._setBackgroundConnection(modifiedBackgroundConnection) +} + +var css = MetaMaskUiCss() +injectCss(css) + +// parse opts +var store = configureStore(firstState) + +// start app +startApp() + +function startApp(){ + const body = document.body + const container = document.createElement('div') + container.id = 'test-container' + body.appendChild(container) + + render( + h('.super-dev-container', [ + + h('button', { + onClick: (ev) => { + ev.preventDefault() + store.dispatch(actions.update('terms')) + }, + style: { + margin: '19px 19px 0px 19px', + }, + }, 'Reset State'), + + h(Selector, { + actions, + selectedKey: selectedView, + states, + store, + modifyBackgroundConnection, + backGroundConnectionModifiers, + }), + + h('#app-content', { + style: { + height: '500px', + width: '360px', + boxShadow: 'grey 0px 2px 9px', + margin: '20px', + }, + }, [ + h(Root, { + store: store, + }), + ]), + + ] + ), container) +} |