Fixes brave/brave-browser#4773 - adds BAT token by default to accounts

.babelrc

@@ -18,6 +18,13 @@
   "plugins": [
     "transform-runtime",
     "transform-async-to-generator",
-    "transform-class-properties"
+    "transform-class-properties",
+    [
+    "babel-plugin-root-import",
+      {
+        "braveSuffix": "./",
+        "bravePrefix": "~"
+      }
+    ]
   ]
 }

brave/app/scripts/controllers/preferences.js

@@ -0,0 +1,16 @@
+const PreferencesController = require('../../../../app/scripts/controllers/preferences')
+
+module.exports = class BravePreferencesController extends PreferencesController {
+  constructor (opts = {}) {
+    if (opts.initState === undefined) {
+      opts['initState'] = {}
+    }
+    opts.initState.batTokenAdded = false
+    super(opts)
+  }
+
+  setBatTokenAdded () {
+    this.store.updateState({ batTokenAdded: true })
+    return Promise.resolve(true)    
+  }
+}

brave/app/scripts/metamask-controller.js

@@ -0,0 +1,14 @@
+const MetamaskController = require('../../../app/scripts/metamask-controller')
+const nodeify = require('../../../app/scripts/lib/nodeify')
+
+module.exports = class BraveController extends MetamaskController {
+  constructor (opts) {
+    super(opts)
+  }
+
+  getApi () {
+    const api = super.getApi()
+    api.setBatTokenAdded = nodeify(this.preferencesController.setBatTokenAdded, this.preferencesController)
+    return api
+  }
+}

brave/gulp.js

@@ -0,0 +1,92 @@
+const gulp = require('gulp')
+const replace = require('gulp-replace')
+
+/*
+ * Brave
+ */
+
+const overrideDirs = [
+  'ui/app/**/*',
+  'app/scripts/**/*'
+]
+
+const bravePrefix = '~/brave/'
+
+//ToDo(ryamml) - Add root import support for .scss files
+const braveStyleRelative = '../../../../brave/'
+
+/*
+ * ToDo(ryanml) - Write a method to convert simple paths to a Regex obj
+ * then a simple mapping can be created for these replacements.
+ * Ex (psuedo-ish):
+ * const replacements = [
+ *   {
+ *     target: 'actions',
+ *     replace: 'ui/app/store/actions'
+ *   }
+ * ]
+ *
+ * replacements.map((item) => {
+ *   .pipe(
+ *     replace(convertToRegex(item.target), fmtPath(item.replace))
+ *   )
+ * })
+ */
+module.exports = function () {
+  return gulp.src(overrideDirs)
+    .pipe(
+      replace(
+        /\'(.*)\/home\'/gm,
+        `'${bravePrefix}ui/app/pages/home'`
+      )
+    )
+    .pipe(
+      replace(
+        /\'\.\/routes\'/gm,
+        `'${bravePrefix}ui/app/pages/routes'`
+      )
+    )
+    .pipe(
+      replace(
+        /\'(.*)\/actions\'/gm,
+        `'${bravePrefix}ui/app/store/actions'`
+      )
+    )
+    .pipe(
+      replace(
+        /\'(.*)\/preferences\'/gm,
+        `'${bravePrefix}app/scripts/controllers/preferences'`
+      )
+    )
+    .pipe(
+      replace(
+        /\'(.*)\/metamask-controller\'/gm,
+        `'${bravePrefix}app/scripts/metamask-controller'`
+      )
+    )
+    .pipe(
+      replace(
+        /\'(.*)\/metamask\/metamask\'/gm,
+        `'${bravePrefix}ui/app/ducks/metamask/metamask'`
+      )
+    )
+    .pipe(
+      replace(
+        /\'(.*)\/components\/menu\'/gm,
+        `'${bravePrefix}ui/app/components/app/dropdowns/components/menu'`
+      )
+    )
+    .pipe(
+      replace(
+        /\'(.*)\/token-menu-dropdown\.js\'/gm,
+        `'${bravePrefix}ui/app/components/app/dropdowns/token-menu-dropdown'`
+      )
+    )
+    .pipe(
+      replace(
+        /\@import \'ui-migration-annoucement\/index\'\;/gm,
+        `@import 'ui-migration-annoucement/index'; @import '${braveStyleRelative}ui/app/components/app/header/index';`
+      )
+    )
+    .pipe(gulp.dest(file => file.base))
+}

brave/ui/app/components/app/dropdowns/components/menu.js

@@ -0,0 +1,30 @@
+const h = require('react-hyperscript')
+
+import { Menu, Item, Divider, CloseArea } from '../../../../../../../ui/app/components/app/dropdowns/components/menu'
+
+Item.prototype.render = function () {
+  const {
+    icon,
+    children,
+    text,
+    className = '',
+    onClick,
+    isShowing
+  } = this.props
+
+  if (isShowing === false) {
+    return h('noscript')
+  }
+
+  const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}`
+  const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null
+  const textComponent = text ? h('div.menu__item__text', text) : null
+
+  return children
+    ? h('div', { className: itemClassName, onClick }, children)
+    : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ]
+        .filter(d => Boolean(d))
+    )    
+}
+
+module.exports = { Menu, Item, Divider, CloseArea }

brave/ui/app/components/app/dropdowns/token-menu-dropdown.js

@@ -0,0 +1,74 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const genAccountLink = require('etherscan-link').createAccountLink
+const { Menu, Item, CloseArea } = require('./components/menu')
+
+import actions from '../../../store/actions'
+
+function mapStateToProps(state) {
+  return {
+    network: state.metamask.network,
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    showHideTokenConfirmationModal: (token) => {
+      dispatch(actions.showModal({
+        name: 'HIDE_TOKEN_CONFIRMATION',
+        token
+      }))
+    },
+  }
+}
+
+BraveTokenMenuDropdown.contextTypes = {
+  t: PropTypes.func,
+}
+
+inherits(BraveTokenMenuDropdown, Component)
+function BraveTokenMenuDropdown () {
+  Component.call(this)
+
+  this.onClose = this.onClose.bind(this)
+}
+
+BraveTokenMenuDropdown.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+BraveTokenMenuDropdown.prototype.render = function() {
+  const { showHideTokenConfirmationModal } = this.props
+
+  return h(Menu, { className: 'token-menu-dropdown', isShowing: true }, [
+    h(CloseArea, {
+      onClick: this.onClose,
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        showHideTokenConfirmationModal(this.props.token)
+        this.props.onClose()
+      },
+      isShowing: (this.props.token.symbol !== 'BAT'),
+      text: 'Hide Tokens',
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        const url = genAccountLink(this.props.token.address, this.props.network)
+        global.platform.openWindow({
+          url
+        })
+        this.props.onClose()
+      },
+      text: 'View on Etherscan',
+    }),
+  ])
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(BraveTokenMenuDropdown)

brave/ui/app/components/app/header/header.component.js

@@ -0,0 +1,87 @@
+import React, { PureComponent } from 'react'
+
+export default class BraveHeader extends PureComponent {
+
+  openChromePage (route) {
+    if (!route) {
+      return
+    }
+
+    chrome.tabs.update({
+      url: `chrome://${route}`
+    })
+  }
+
+  render () {
+    return (
+      <div className="br-toolbar fonts-loaded">
+        <ul className="nav-items" role="navigation" aria-label="Category navigation">
+          <li className="nav-items_list-item" title="Settings">
+            <span onClick={() => { this.openChromePage('settings') }} className="nav-item">
+              <span className="nav-item_icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+                  <path fillRule="evenodd" d="M10 15.884c-.068 0-.136 0-.204-.003l-.928 1.413c-.24.365-.692.538-1.112.417a8.124 8.124 0 0 1-3.389-1.938.998.998 0 0 1-.194-1.175l.77-1.505a5.904 5.904 0 0 1-.197-.34l-1.705-.09a1 1 0 0 1-.922-.749 7.946 7.946 0 0 1-.244-1.946c0-.655.083-1.306.245-1.947a.998.998 0 0 1 .918-.747l1.708-.09c.062-.115.128-.229.198-.34L4.173 5.34a.998.998 0 0 1 .195-1.176 8.121 8.121 0 0 1 3.386-1.937c.422-.121.875.052 1.114.416l.928 1.414a5.872 5.872 0 0 1 .408 0l.928-1.414c.24-.364.691-.537 1.113-.416a8.126 8.126 0 0 1 3.388 1.938 1 1 0 0 1 .194 1.175l-.77 1.505c.069.111.135.225.197.34l1.705.09a1 1 0 0 1 .922.748c.16.64.244 1.29.244 1.946a7.95 7.95 0 0 1-.245 1.948.998.998 0 0 1-.918.746l-1.708.09a5.948 5.948 0 0 1-.198.34l.773 1.508a1 1 0 0 1-.197 1.174 8.124 8.124 0 0 1-3.386 1.937 1.005 1.005 0 0 1-1.114-.417l-.928-1.413a5.872 5.872 0 0 1-.204.003zm-2.087.545l1.022-1.557a.637.637 0 0 1 .592-.284 5.031 5.031 0 0 0 .946 0 .637.637 0 0 1 .592.284l1.022 1.557a6.85 6.85 0 0 0 2.513-1.435l-.849-1.655a.637.637 0 0 1 .051-.664c.183-.253.34-.52.468-.803a.637.637 0 0 1 .546-.371l1.877-.1c.105-.473.159-.952.159-1.433 0-.48-.054-.96-.159-1.433l-1.877-.1a.637.637 0 0 1-.546-.37 4.68 4.68 0 0 0-.468-.803.637.637 0 0 1-.05-.664l.848-1.656a6.853 6.853 0 0 0-2.513-1.434l-1.022 1.557a.637.637 0 0 1-.592.284 5.031 5.031 0 0 0-.946 0 .637.637 0 0 1-.592-.284L7.913 3.508A6.849 6.849 0 0 0 5.4 4.942l.849 1.656c.109.213.09.47-.051.664-.185.254-.341.522-.468.801a.637.637 0 0 1-.546.373l-1.877.1a6.635 6.635 0 0 0-.159 1.432c0 .481.054.96.159 1.433l1.877.1a.637.637 0 0 1 .546.372c.127.28.283.547.468.802.14.194.16.45.05.664L5.4 14.994a6.851 6.851 0 0 0 2.513 1.435zm.4-6.46a1.687 1.687 0 1 0 3.374 0 1.687 1.687 0 0 0-3.374 0zm-1.274 0a2.96 2.96 0 1 1 5.922 0 2.96 2.96 0 0 1-5.922 0z"></path>
+                </svg>
+              </span>
+              <span className="nav-item_text">Settings</span>
+            </span>
+          </li>
+          <li className="nav-items_list-item" title="Brave Rewards">
+            <span onClick={() => { this.openChromePage('rewards') }} className="nav-item">
+              <span className="nav-item_icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+                  <path fillRule="evenodd" d="M13.595 12.065l-2.974-4.73V4.755l5.325 8.877-2.35-1.568zM7.063 13.11h5.846l1.897 1.265H4.85l2.214-1.265zm2.308-5.775l-2.96 4.708-2.15 1.228 5.11-8.515v2.579zm.625 1.355l1.994 3.17H8.002l1.994-3.17zm8.036 5.988l-7.5-12.5c-.02-.032-.046-.058-.071-.086a.616.616 0 0 0-.465-.217.617.617 0 0 0-.465.217c-.025.027-.052.053-.07.086l-7.5 12.5a.641.641 0 0 0-.067.156l-.002.011a.619.619 0 0 0-.008.256.606.606 0 0 0 .068.207l.001.002c.01.018.025.031.037.048.02.028.04.059.064.083.024.024.051.042.078.062.018.012.033.027.051.038.03.017.06.027.092.038.02.008.038.019.059.024a.652.652 0 0 0 .143.02l.019.002h15a.624.624 0 0 0 .536-.947z"></path>
+                </svg>
+              </span>
+              <span className="nav-item_text">Brave Rewards</span>
+            </span>
+          </li>
+          <li className="nav-items_list-item" title="Wallets">
+              <span onClick={() => { this.openChromePage('wallet') }} className="nav-item -selected">
+                <span className="nav-item_icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+                    <path fillRule="evenodd" d="M10 15.884c-.068 0-.136 0-.204-.003l-.928 1.413c-.24.365-.692.538-1.112.417a8.124 8.124 0 0 1-3.389-1.938.998.998 0 0 1-.194-1.175l.77-1.505a5.904 5.904 0 0 1-.197-.34l-1.705-.09a1 1 0 0 1-.922-.749 7.946 7.946 0 0 1-.244-1.946c0-.655.083-1.306.245-1.947a.998.998 0 0 1 .918-.747l1.708-.09c.062-.115.128-.229.198-.34L4.173 5.34a.998.998 0 0 1 .195-1.176 8.121 8.121 0 0 1 3.386-1.937c.422-.121.875.052 1.114.416l.928 1.414a5.872 5.872 0 0 1 .408 0l.928-1.414c.24-.364.691-.537 1.113-.416a8.126 8.126 0 0 1 3.388 1.938 1 1 0 0 1 .194 1.175l-.77 1.505c.069.111.135.225.197.34l1.705.09a1 1 0 0 1 .922.748c.16.64.244 1.29.244 1.946a7.95 7.95 0 0 1-.245 1.948.998.998 0 0 1-.918.746l-1.708.09a5.948 5.948 0 0 1-.198.34l.773 1.508a1 1 0 0 1-.197 1.174 8.124 8.124 0 0 1-3.386 1.937 1.005 1.005 0 0 1-1.114-.417l-.928-1.413a5.872 5.872 0 0 1-.204.003zm-2.087.545l1.022-1.557a.637.637 0 0 1 .592-.284 5.031 5.031 0 0 0 .946 0 .637.637 0 0 1 .592.284l1.022 1.557a6.85 6.85 0 0 0 2.513-1.435l-.849-1.655a.637.637 0 0 1 .051-.664c.183-.253.34-.52.468-.803a.637.637 0 0 1 .546-.371l1.877-.1c.105-.473.159-.952.159-1.433 0-.48-.054-.96-.159-1.433l-1.877-.1a.637.637 0 0 1-.546-.37 4.68 4.68 0 0 0-.468-.803.637.637 0 0 1-.05-.664l.848-1.656a6.853 6.853 0 0 0-2.513-1.434l-1.022 1.557a.637.637 0 0 1-.592.284 5.031 5.031 0 0 0-.946 0 .637.637 0 0 1-.592-.284L7.913 3.508A6.849 6.849 0 0 0 5.4 4.942l.849 1.656c.109.213.09.47-.051.664-.185.254-.341.522-.468.801a.637.637 0 0 1-.546.373l-1.877.1a6.635 6.635 0 0 0-.159 1.432c0 .481.054.96.159 1.433l1.877.1a.637.637 0 0 1 .546.372c.127.28.283.547.468.802.14.194.16.45.05.664L5.4 14.994a6.851 6.851 0 0 0 2.513 1.435zm.4-6.46a1.687 1.687 0 1 0 3.374 0 1.687 1.687 0 0 0-3.374 0zm-1.274 0a2.96 2.96 0 1 1 5.922 0 2.96 2.96 0 0 1-5.922 0z"></path>
+                  </svg>
+                </span>
+                <span className="nav-item_text">Wallets</span>
+              </span>
+            </li>
+          <li className="nav-items_list-item" title="History">
+            <span onClick={() => { this.openChromePage('history') }} className="nav-item">
+              <span className="nav-item_icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+                  <path fillRule="nonzero" d="M11.083 10h3.292a.625.625 0 1 1 0 1.25h-3.292a1.25 1.25 0 1 1-1.708-1.708V6.875a.625.625 0 1 1 1.25 0v2.667c.19.11.348.268.458.458zM5.28 5h1.594a.625.625 0 1 1 0 1.25H3.75a.625.625 0 0 1-.625-.625V2.5a.625.625 0 1 1 1.25 0v1.636A8.125 8.125 0 1 1 1.875 10a.625.625 0 1 1 1.25 0 6.875 6.875 0 1 0 2.156-5z"></path>
+                </svg>
+              </span>
+              <span className="nav-item_text">History</span>
+            </span>
+          </li>
+          <li className="nav-items_list-item" title="Bookmarks">
+            <span onClick={() => { this.openChromePage('bookmarks') }} className="nav-item">
+              <span className="nav-item_icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+                  <path fillRule="evenodd" d="M16.342 14.56a6.226 6.226 0 0 0 .035 2.315h.498a.625.625 0 1 1 0 1.25h-.976a.62.62 0 0 1-.028 0H5.035c-1.398 0-2.535-1.116-2.535-2.5V3.846c0-1.1.943-1.97 2.084-1.97h11.151c.626 0 1.14.5 1.14 1.127v10.123a.625.625 0 1 1 0 1.25H16.7a.624.624 0 0 1-.358.185zm-1.237-.185H5.035c-.713 0-1.285.562-1.285 1.25 0 .689.572 1.25 1.285 1.25h10.07c-.14-.83-.14-1.67 0-2.5zM3.75 13.469a2.552 2.552 0 0 1 1.285-.344h10.59v-10h-2.5V8.75a.625.625 0 0 1-1.021.483L10 7.508 7.896 9.233a.625.625 0 0 1-1.021-.483V3.125H4.584c-.472 0-.834.334-.834.72v9.624zM8.125 3.125v4.304l1.479-1.213c.23-.19.562-.19.792 0l1.479 1.213V3.125h-3.75z"></path>
+                </svg>
+              </span>
+              <span className="nav-item_text">Bookmarks</span>
+            </span>
+          </li>
+          <li className="nav-items_list-item" title="Downloads">
+            <span onClick={() => { this.openChromePage('downloads') }} className="nav-item">
+              <span className="nav-item_icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+                  <path fillRule="evenodd" d="M9.557 13.562a.619.619 0 0 0 .443.183.631.631 0 0 0 .443-.183l3.123-3.117a.624.624 0 1 0-.882-.884l-2.059 2.053v-8.49a.624.624 0 1 0-1.25 0v8.49L7.316 9.561a.624.624 0 1 0-.882.884l3.123 3.117zm7.943-1.06v3.749c0 .688-.56 1.249-1.25 1.249H3.75c-.69 0-1.25-.561-1.25-1.25v-3.748a.624.624 0 1 1 1.25 0v3.749h12.5v-3.749a.624.624 0 1 1 1.25 0z"></path>
+                </svg>
+              </span>
+              <span className="nav-item_text">Downloads</span>
+            </span>
+          </li>
+        </ul>
+        <div className="toolbar-extra">
+          <slot></slot>
+        </div>
+      </div>
+    )    
+  }
+}
+

brave/ui/app/components/app/header/index.js

@@ -0,0 +1 @@
+export { default } from './header.component'