The UI-即上图左下角metamask-ui部分，即其图形化界面
The MetaMask UI is essentially just a website that can be configured by passing it the API and state subscriptions from above. Anyone could make a UI that consumes these, effectively reskinning MetaMask.
MetaMask UI本质上只是一个网站，可以通过从上面传递API和状态订阅来配置它。任何人都可以创建一个使用这些的UI，有效地重新设计MetaMask
You can see this in action in our file ui/index.js. There you can see an argument being passed in named accountManager, which is essentially a MetaMask controller (forgive its really outdated parameter name!). With access to that object, the UI is able to initialize a whole React/Redux app that relies on this API for its account/blockchain-related/persistent states.
你可以从文件ui/index.js中看见它的实现。在这里，您可以看到一个参数在accountManager中传递，accountManager本质上是一个MetaMask控制器(该参数名称已经过时!)通过对该对象的访问，UI能够初始化整个依赖于该API实现其帐户/区块链相关/持久状态的React/Redux应用程序。
metamask-extension/ui/index.js
const render = require('react-dom').render
const h = require('react-hyperscript') const Root = require('./app/root') const actions = require('./app/actions') const configureStore = require('./app/store') const txHelper = require('./lib/tx-helper') const { fetchLocale } = require('./i18n-helper') const log = require('loglevel') module.exports = launchMetamaskUi log.setLevel(global.METAMASK_DEBUG ? 'debug' : 'warn') function launchMetamaskUi (opts, cb) { var accountManager = opts.accountManager//accountManager就是一个metamask控制器，所以metamask-controller.js中的函数其都能调用，UI一般就调用getApi ()和getState（）两个函数 actions._setBackgroundConnection(accountManager)//设置后台的连接信息 // check if we are unlocked first accountManager.getState(function (err, metamaskState) {//返回一个javascript对象，表示当前的MetaMask状态 if (err) return cb(err) startApp(metamaskState, accountManager, opts) .then((store) => { cb(null, store) }) }) }
//打开APP async function startApp (metamaskState, accountManager, opts) { // parse opts if (!metamaskState.featureFlags) metamaskState.featureFlags = {} const currentLocaleMessages = metamaskState.currentLocale ? await fetchLocale(metamaskState.currentLocale)//得到`./_locales/${metamaskState.currentLocale}/messages.json`文件，因为选择的语言不同 : {} const enLocaleMessages = await fetchLocale('en')//这个选择的是英语 const store = configureStore({//配置metamask环境信息，如中间件等 // 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,//配置actions中showConfTxPage的值，tx里的详细信息可以看本博客metamask源码学习-background.js，其的代码注释中有写，如id... })) } accountManager.on('update', function (metamaskState) {//如果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，使用react框架来启动该metamask app render( h(Root, { // inject initial state store: store,//这里的内容就是上面进行相应设置后的状态信息，这个store有的详细内容的解释看本博客metamask源码学习-background.js，其的代码注释中有写本博客metamask源码学习-background.js，其的代码注释中有写
} ), opts.container) return store }
metamask-extension/app/scripts/metamask-controller.js
//=============================================================================
// EXPOSED TO THE UI SUBSYSTEM
//============================================================================= /** * The metamask-state of the various controllers是得到多种控制器的状态, made available to the UI * * @returns {Object} status */ getState () { const wallet = this.configManager.getWallet() const vault = this.keyringController.store.getState().vault const isInitialized = (!!wallet || !!vault)//就是只要两者wallet和vault中有一个有值，那么就说明初始化过了 return { ...{ isInitialized }, ...this.memStore.getFlatState(), ...this.configManager.getConfig(), ...{ lostAccounts: this.configManager.getLostAccounts(), seedWords: this.configManager.getSeedWords(), forgottenPassword: this.configManager.getPasswordForgotten(), }, } }
!!()。 比如：a默认是undefined，!a是true，!!a则是false，所以b的值是false，而不再是undefined。这样写可以方便后续判断使用。 所以，!!(a)的作用是将a强制转换为布尔型（boolean）。
metamask-extension/ui/i18n-helper.js
async function fetchLocale (localeName) {//得到`./_locales/${metamaskState.currentLocale}/messages.json`文件
try {
const response = await fetch(`./_locales/${localeName}/messages.json`) return await response.json() } catch (error) { log.error(`failed to fetch ${localeName} locale because of ${error}`) return {} } }
metamask-extension/ui/app/util.js
扫描二维码关注公众号，回复：
3412646 查看本文章
function valuesFor (obj) {//通过keys()得到obj对象中的键值，因为这里面的键值并不是简单的1，2；然后再根据获得的键值去得到obj中对应的值，并再组合起来成新的obj对象，即map()
if (!obj) return []
return Object.keys(obj) .map(function (key) { return obj[key] }) }
举例：
var obj = {'a':'123','b':'345'}; console.log(Object.keys(obj)); //['a','b']
metamask-extension/ui/lib/tx-helper.js
const valuesFor = require('../app/util').valuesFor
const log = require('loglevel') module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, typedMessages, network) { log.debug('tx-helper called with params:') log.debug({ unapprovedTxs, unapprovedMsgs, personalMsgs, typedMessages, network })
//就是network不为0时，那么就得到unapprovedTxs中满足metamaskNetworkId === network条件的所有没被赞同的Txs；如果为0，则得到所有没被赞同的Txs const txValues = network ? valuesFor(unapprovedTxs).filter(txMeta => txMeta.metamaskNetworkId === network) : valuesFor(unapprovedTxs) log.debug(`tx helper found ${txValues.length} unapproved txs`) const msgValues = valuesFor(unapprovedMsgs)//得到没有签名的信息 log.debug(`tx helper found ${msgValues.length} unsigned messages`) let allValues = txValues.concat(msgValues) const personalValues = valuesFor(personalMsgs)//得到没有签名的个人信息 log.debug(`tx helper found ${personalValues.length} unsigned personal messages`) allValues = allValues.concat(personalValues) const typedValues = valuesFor(typedMessages)//得到没有签名的typed信息 log.debug(`tx helper found ${typedValues.length} unsigned typed messages`) allValues = allValues.concat(typedValues) //并全部串联起来放在allValues中
allValues = allValues.sort((a, b) => {//一个个去对比，按照每个信息的时间由小到大去排序，如果想要有大到小，就写成a.time < b.time return a.time > b.time }) return allValues }