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 ++++++++++++++++++++++++++++++++ mock-dev.js | 145 ------------------------------------------------ package.json | 6 +- ui-dev.js | 97 -------------------------------- 5 files changed, 245 insertions(+), 245 deletions(-) create mode 100644 development/mock-dev.js create mode 100644 development/ui-dev.js delete mode 100644 mock-dev.js delete mode 100644 ui-dev.js 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) +} + diff --git a/mock-dev.js b/mock-dev.js deleted file mode 100644 index 6627c1153..000000000 --- a/mock-dev.js +++ /dev/null @@ -1,145 +0,0 @@ -/* 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('./development/states') -const backGroundConnectionModifiers = require('./development/backGroundConnectionModifiers') -const Selector = require('./development/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('./development/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/package.json b/package.json index c5d9d3c45..8921cc1b4 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,8 @@ "scripts": { "start": "npm run dev", "dev": "gulp dev --debug", - "ui": "npm run test:flat:build:states && beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", - "mock": "beefy mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", + "ui": "npm run test:flat:build:states && beefy development/ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", + "mock": "beefy development/mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", "watch": "mocha watch --recursive \"test/unit/**/*.js\"", "mascara": "gulp build && METAMASK_DEBUG=true node ./mascara/example/server", "dist": "npm run dist:clear && npm install && gulp dist", @@ -23,7 +23,7 @@ "test:flat:build": "npm run test:flat:build:ui && npm run test:flat:build:tests", "test:flat:build:tests": "node test/integration/index.js", "test:flat:build:states": "node development/genStates.js", - "test:flat:build:ui": "npm run test:flat:build:states && browserify ./mock-dev.js -o ./development/bundle.js", + "test:flat:build:ui": "npm run test:flat:build:states && browserify ./development/mock-dev.js -o ./development/bundle.js", "test:mascara": "npm run test:mascara:build && karma start test/mascara.conf.js", "test:mascara:build": "mkdir -p dist/mascara && npm run test:mascara:build:ui && npm run test:mascara:build:background && npm run test:mascara:build:tests", "test:mascara:build:ui": "browserify mascara/test/test-ui.js -o dist/mascara/ui.js", diff --git a/ui-dev.js b/ui-dev.js deleted file mode 100644 index 620d81667..000000000 --- a/ui-dev.js +++ /dev/null @@ -1,97 +0,0 @@ -/* 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('./development/uiStore') -const states = require('./development/states') -const Selector = require('./development/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