mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-24 02:58:09 +01:00
05080d1c50
The state object had been changed, but our mock states for tx approval were using the old keys. Rather than try to muck about and figure out each and every change, I've re-generated a UI dev state for tx approval, which should help @zanibas on his current project. We can continue adding new dev states as needed from here. If anyone catches a state that doesn't render correctly, it's worth checking if a new snapshot doesn't solve things. Debugged by adding new debugging loggers, and I've left them in place for easier future debugging.
91 lines
2.1 KiB
JavaScript
91 lines
2.1 KiB
JavaScript
/* 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)
|
|
|
|
const container = document.querySelector('#app-content')
|
|
|
|
// parse opts
|
|
var store = configureStore(states[selectedView])
|
|
|
|
// start app
|
|
render(
|
|
h('.super-dev-container', [
|
|
|
|
h(Selector, { actions, selectedKey: selectedView, states, store }),
|
|
|
|
h('.mock-app-root', {
|
|
style: {
|
|
height: '500px',
|
|
width: '360px',
|
|
boxShadow: 'grey 0px 2px 9px',
|
|
margin: '20px',
|
|
},
|
|
}, [
|
|
h(Root, {
|
|
store: store,
|
|
}),
|
|
]),
|
|
|
|
]
|
|
), container)
|
|
|