diff options
Diffstat (limited to 'development')
| -rw-r--r-- | development/genStates.js | 31 | ||||
| -rw-r--r-- | development/mock-dev.js | 145 | ||||
| -rw-r--r-- | development/ui-dev.js | 97 |
3 files changed, 259 insertions, 14 deletions
diff --git a/development/genStates.js b/development/genStates.js index 39a672ee0..d92e2bc2e 100644 --- a/development/genStates.js +++ b/development/genStates.js @@ -1,18 +1,21 @@ const fs = require('fs') const path = require('path') +const { promisify } = require('util') -const statesPath = path.join(__dirname, 'states') -const stateNames = fs.readdirSync(statesPath) +start().catch(console.error) -const states = stateNames.reduce((result, stateFileName) => { - const statePath = path.join(__dirname, 'states', stateFileName) - const stateFile = fs.readFileSync(statePath).toString() - const state = JSON.parse(stateFile) - result[stateFileName.split('.')[0].replace(/-/g, ' ', 'g')] = state - return result -}, {}) - -const result = `module.exports = ${JSON.stringify(states)}` - -const statesJsonPath = path.join(__dirname, 'states.js') -fs.writeFileSync(statesJsonPath, result) +async function start () { + const statesPath = path.join(__dirname, 'states') + const stateFilesNames = await promisify(fs.readdir)(statesPath) + const states = {} + await Promise.all(stateFilesNames.map(async (stateFileName) => { + const stateFilePath = path.join(__dirname, 'states', stateFileName) + const stateFileContent = await promisify(fs.readFile)(stateFilePath, 'utf8') + const state = JSON.parse(stateFileContent) + const stateName = stateFileName.split('.')[0].replace(/-/g, ' ', 'g') + states[stateName] = state + })) + const generatedFileContent = `module.exports = ${JSON.stringify(states)}` + const generatedFilePath = path.join(__dirname, 'states.js') + await promisify(fs.writeFile)(generatedFilePath, generatedFileContent) +} 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) +} + |