1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
metamask-extension/ui/index.js
Nick Doiron d589d2dec0 Right-to-left CSS (using module for conversion) (#7072)
* Create RTL stylesheets using `gulp-rtl`

* Handle RTL stylesheet special cases

Certain blocks of Sass  were set to bypass "rtlcss" using ignore
comments. Certain icons had to be flipped 180 degrees.

* Switch stylesheets when locale changes

A second stylesheet has been added to each HTML page for use with
right-to-left locales. It is disabled by default. It is enabled on
startup if a RTL locale is set, and when switching to a RTL locale.
Similarly the LTR stylesheet is disabled when a RTL locale is used.

Unfortunately there is an unpleasant flash of unstyled content when
switching between a LTR and a RTL locale. There is also a slightly
longer page load time when using a RTL locale (<1s difference). We
couldn't think of an easy way to avoid these problems.

* Set `dir="auto"` as default on `TextFields`
2019-09-03 14:47:54 -03:00

92 lines
2.6 KiB
JavaScript

const render = require('react-dom').render
const h = require('react-hyperscript')
const Root = require('./app/pages')
const actions = require('./app/store/actions')
const configureStore = require('./app/store/store')
const txHelper = require('./lib/tx-helper')
const { fetchLocale } = require('./app/helpers/utils/i18n-helper')
import switchDirection from './app/helpers/utils/switch-direction'
const log = require('loglevel')
module.exports = launchMetamaskUi
log.setLevel(global.METAMASK_DEBUG ? 'debug' : 'warn')
function launchMetamaskUi (opts, cb) {
var {backgroundConnection} = opts
actions._setBackgroundConnection(backgroundConnection)
// check if we are unlocked first
backgroundConnection.getState(function (err, metamaskState) {
if (err) return cb(err)
startApp(metamaskState, backgroundConnection, opts)
.then((store) => {
cb(null, store)
})
})
}
async function startApp (metamaskState, backgroundConnection, opts) {
// parse opts
if (!metamaskState.featureFlags) metamaskState.featureFlags = {}
const currentLocaleMessages = metamaskState.currentLocale
? await fetchLocale(metamaskState.currentLocale)
: {}
const enLocaleMessages = await fetchLocale('en')
if (metamaskState.textDirection === 'rtl') {
await switchDirection('rtl')
}
const store = configureStore({
activeTab: opts.activeTab,
// metamaskState represents the cross-tab state
metamask: metamaskState,
// appState represents the current tab's popup state
appState: {},
localeMessages: {
current: currentLocaleMessages,
en: enLocaleMessages,
},
// Which blockchain we are using:
networkVersion: opts.networkVersion,
})
// if unconfirmed txs, start on txConf page
const unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.unapprovedPersonalMsgs, metamaskState.unapprovedTypedMessages, metamaskState.network)
const numberOfUnapprivedTx = unapprovedTxsAll.length
if (numberOfUnapprivedTx > 0) {
store.dispatch(actions.showConfTxPage({
id: unapprovedTxsAll[numberOfUnapprivedTx - 1].id,
}))
}
backgroundConnection.on('update', function (metamaskState) {
store.dispatch(actions.updateMetamaskState(metamaskState))
})
// global metamask api - used by tooling
global.metamask = {
updateCurrentLocale: (code) => {
store.dispatch(actions.updateCurrentLocale(code))
},
setProviderType: (type) => {
store.dispatch(actions.setProviderType(type))
},
}
// start app
render(
h(Root, {
// inject initial state
store: store,
}
), opts.container)
return store
}