aboutsummaryrefslogtreecommitdiffstats
path: root/development
diff options
context:
space:
mode:
authorkumavis <kumavis@users.noreply.github.com>2018-03-14 01:40:19 +0800
committerGitHub <noreply@github.com>2018-03-14 01:40:19 +0800
commit50e21fa9d300078703bf56ab16ec315d0030d0af (patch)
tree01279fbbdb1c1f3472712e86c73765dac26b4e27 /development
parent6857e5eb272637841ae61098caa185cd3d9bbd49 (diff)
parent0e28e8fa3dff1b97751d34c0d76d069a0b1f4298 (diff)
downloadtangerine-wallet-browser-50e21fa9d300078703bf56ab16ec315d0030d0af.tar.gz
tangerine-wallet-browser-50e21fa9d300078703bf56ab16ec315d0030d0af.tar.zst
tangerine-wallet-browser-50e21fa9d300078703bf56ab16ec315d0030d0af.zip
Merge pull request #3525 from anticlimactic/move-dev-files
Moved mock-dev.js and ui-dev.js to development folder.
Diffstat (limited to 'development')
-rw-r--r--development/mock-dev.js145
-rw-r--r--development/ui-dev.js97
2 files changed, 242 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)
+}
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)
+}
+