From 0e28e8fa3dff1b97751d34c0d76d069a0b1f4298 Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 14 Mar 2018 00:15:19 +1100 Subject: Moved mock-dev.js and ui-dev.js to development folder. --- development/mock-dev.js | 145 ++++++++++++++++++++++++++++++++++++++++++++++++ development/ui-dev.js | 97 ++++++++++++++++++++++++++++++++ 2 files changed, 242 insertions(+) create mode 100644 development/mock-dev.js create mode 100644 development/ui-dev.js (limited to 'development') 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) +} diff --git a/development/ui-dev.js b/development/ui-dev.js new file mode 100644 index 000000000..cac433909 --- /dev/null +++ b/development/ui-dev.js @@ -0,0 +1,97 @@ +/* UI DEV + * + * This is a utility module. + * It initializes a minimalist browserifiable project + * that contains the Metamask UI, with a mocked state. + * + * Includes a state menu for switching between different + * mocked states, along with query param support, + * so those states are preserved when live-reloading. + * + * This is a convenient way to develop on the UI + * without having to re-enter your password + * every time the plugin rebuilds. + * + * To use, run `npm run ui`. + */ + +const render = require('react-dom').render +const h = require('react-hyperscript') +const Root = require('../ui/app/root') +const configureStore = require('./uiStore') +const states = require('./states') +const Selector = require('./selector') + +// logger +const log = require('loglevel') +window.log = log +log.setDefaultLevel(1) + +// 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) + +// CSS +const MetaMaskUiCss = require('../ui/css') +const injectCss = require('inject-css') + + +function updateQueryParams(newView) { + queryString.view = newView + const params = qs.stringify(queryString) + window.location.href = window.location.href.split('#')[0] + `#${params}` +} + +const actions = { + _setBackgroundConnection(){}, + update: function(stateName) { + selectedView = stateName + updateQueryParams(stateName) + const newState = states[selectedView] + return { + type: 'GLOBAL_FORCE_UPDATE', + value: newState, + } + }, +} + +var css = MetaMaskUiCss() +injectCss(css) + +// parse opts +var store = configureStore(states[selectedView]) + +// 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(Selector, { actions, selectedKey: selectedView, states, store }), + + h('#app-content', { + style: { + height: '500px', + width: '360px', + boxShadow: 'grey 0px 2px 9px', + margin: '20px', + }, + }, [ + h(Root, { + store: store, + }), + ]), + + ] + ), container) +} + -- cgit v1.2.3