diff --git a/brave/app/images/bch-large.png b/brave/app/images/bch-large.png
new file mode 100644
index 000000000..92a86222c
Binary files /dev/null and b/brave/app/images/bch-large.png differ
diff --git a/brave/app/images/bch-small.png b/brave/app/images/bch-small.png
new file mode 100644
index 000000000..92a86222c
Binary files /dev/null and b/brave/app/images/bch-small.png differ
diff --git a/brave/app/images/btc-large.png b/brave/app/images/btc-large.png
new file mode 100644
index 000000000..5e6a58a3d
Binary files /dev/null and b/brave/app/images/btc-large.png differ
diff --git a/brave/app/images/btc-small.png b/brave/app/images/btc-small.png
new file mode 100644
index 000000000..5e6a58a3d
Binary files /dev/null and b/brave/app/images/btc-small.png differ
diff --git a/brave/app/images/dash-large.png b/brave/app/images/dash-large.png
new file mode 100644
index 000000000..541c28990
Binary files /dev/null and b/brave/app/images/dash-large.png differ
diff --git a/brave/app/images/dash-small.png b/brave/app/images/dash-small.png
new file mode 100644
index 000000000..541c28990
Binary files /dev/null and b/brave/app/images/dash-small.png differ
diff --git a/brave/app/images/ltc-large.png b/brave/app/images/ltc-large.png
new file mode 100644
index 000000000..5a57f7102
Binary files /dev/null and b/brave/app/images/ltc-large.png differ
diff --git a/brave/app/images/ltc-small.png b/brave/app/images/ltc-small.png
new file mode 100644
index 000000000..5a57f7102
Binary files /dev/null and b/brave/app/images/ltc-small.png differ
diff --git a/brave/app/images/trx-large.png b/brave/app/images/trx-large.png
new file mode 100644
index 000000000..20d2656b7
Binary files /dev/null and b/brave/app/images/trx-large.png differ
diff --git a/brave/app/images/trx-small.png b/brave/app/images/trx-small.png
new file mode 100644
index 000000000..7e5340f60
Binary files /dev/null and b/brave/app/images/trx-small.png differ
diff --git a/brave/app/images/xlm-large.png b/brave/app/images/xlm-large.png
new file mode 100644
index 000000000..38de9c6ce
Binary files /dev/null and b/brave/app/images/xlm-large.png differ
diff --git a/brave/app/images/xlm-small.png b/brave/app/images/xlm-small.png
new file mode 100644
index 000000000..38de9c6ce
Binary files /dev/null and b/brave/app/images/xlm-small.png differ
diff --git a/brave/app/images/xrp-large.png b/brave/app/images/xrp-large.png
new file mode 100644
index 000000000..8a9dce219
Binary files /dev/null and b/brave/app/images/xrp-large.png differ
diff --git a/brave/app/images/xrp-small.png b/brave/app/images/xrp-small.png
new file mode 100644
index 000000000..8a9dce219
Binary files /dev/null and b/brave/app/images/xrp-small.png differ
diff --git a/brave/app/images/zec-large.png b/brave/app/images/zec-large.png
new file mode 100644
index 000000000..83554a5d6
Binary files /dev/null and b/brave/app/images/zec-large.png differ
diff --git a/brave/app/images/zec-small.png b/brave/app/images/zec-small.png
new file mode 100644
index 000000000..83554a5d6
Binary files /dev/null and b/brave/app/images/zec-small.png differ
diff --git a/brave/app/scripts/controllers/bitgo.js b/brave/app/scripts/controllers/bitgo.js
new file mode 100644
index 000000000..ec69e6dbc
--- /dev/null
+++ b/brave/app/scripts/controllers/bitgo.js
@@ -0,0 +1,193 @@
+const ObservableStore = require('obs-store')
+const bgUtil = require('brave-bitgo-client').util
+
+const supportedCoins = {
+ btc: 'Bitcoin',
+ bch: 'Bitcoin Cash',
+ btg: 'Bitcoin Gold',
+ bsv: 'Bitcoin SV',
+ zec: 'ZCash',
+ xlm: 'Stellar',
+ xrp: 'Ripple',
+ ltc: 'Litecoin',
+ dash: 'Dash',
+ algo: 'Algorand',
+ trx: 'Tron',
+ eos: 'Eos'
+}
+
+const uint8ToArrayBuf = (array) => {
+ return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
+}
+
+const promiseGetSeed = (key) => {
+ return new Promise((resolve) => {
+ if (window.chrome && window.chrome.braveWallet) {
+ window.chrome.braveWallet.getBitGoSeed(key, resolve)
+ } else {
+ // polyfill
+ const seed = new Uint8Array(32)
+ window.crypto.getRandomValues(seed)
+ resolve(uint8ToArrayBuf(seed))
+ }
+ })
+}
+
+class BitGoController {
+ constructor (opts = {}) {
+ const initState = opts.initState || {}
+ this.proxyOrigin = opts.isProduction
+ ? 'https://bitgo-proxy.brave.com/'
+ : 'http://localhost:3000/'
+ this.store = new ObservableStore(initState)
+ this.keyringController = opts.keyringController
+ this.braveServiceKey = opts.projectId
+ }
+
+ request (path, opts) {
+ const url = `${this.proxyOrigin}${path}`
+ const headers = new window.Headers()
+ headers.append('x-brave-key', this.braveServiceKey)
+ const req = new window.Request(url, Object.assign({ headers }, opts))
+ return window.fetch(req)
+ }
+
+ async unlockAndSetKey (password) {
+ this.password = password
+ await this.keyringController.submitPassword(this.password)
+ this.encryptionKey = await this.keyringController._getSubkey('ethwallet-encryptor')
+ }
+
+ async createWallet (coin) {
+ if (!supportedCoins[coin]) {
+ throw new Error(`Coin type ${coin} is not supported.`)
+ }
+ const seed = await promiseGetSeed(uint8ToArrayBuf(this.encryptionKey))
+ const userKeychain = bgUtil.createKeychain(coin, seed)
+ const backupKeychain = bgUtil.createKeychain(coin, seed)
+ const req = {
+ coin,
+ userPub: userKeychain.pub,
+ backupPub: backupKeychain.pub
+ }
+ const response = await this.request('create-wallet', {
+ method: 'POST',
+ body: JSON.stringify(req)
+ })
+ if (!response.ok) {
+ return
+ }
+ const resp = await response.json()
+ if (!resp.error) {
+ const state = this.store().getState()
+ const bitgoWallets = state.bitgoWallets || {}
+ bitgoWallets[resp.id] = Object.assign(req, resp)
+ this.store.updateState({
+ bitgoWallets
+ })
+ }
+ return resp
+ }
+
+ async getBalance (id) {
+ const bitgoWallets = this.store().getState().bitgoWallets
+ const bitgoWallet = bitgoWallets[id]
+ if (!bitgoWallet) {
+ return
+ }
+ const response = await this.request('get-balance', {
+ method: 'GET',
+ body: JSON.stringify({
+ id,
+ coin: bitgoWallet.coin
+ })
+ })
+ if (!response.ok) {
+ return
+ }
+ const resp = await response.json()
+ if (!resp.error) {
+ Object.assign(bitgoWallet, resp)
+ this.store.updateState({
+ bitgoWallets
+ })
+ }
+ return resp
+ }
+
+ async getTransfers (id) {
+ const bitgoWallets = this.store().getState().bitgoWallets
+ const bitgoWallet = bitgoWallets[id]
+ if (!bitgoWallet) {
+ return
+ }
+ const response = await this.request('get-transaction-history', {
+ method: 'GET',
+ body: JSON.stringify({
+ id,
+ coin: bitgoWallet.coin
+ })
+ })
+ if (!response.ok) {
+ return
+ }
+ const resp = await response.json()
+ if (!resp.error) {
+ bitgoWallet.transfers = response.transfers
+ this.store.updateState({
+ bitgoWallets
+ })
+ }
+ return resp
+ }
+
+ async sendTx (id, amount, destinationAddress) {
+ const bitgoWallets = this.store().getState().bitgoWallets
+ const bitgoWallet = bitgoWallets[id]
+ if (!bitgoWallet) {
+ return
+ }
+ const coin = bitgoWallet.coin
+ const response = await this.request('get-tx-prebuild', {
+ method: 'GET',
+ body: JSON.stringify({
+ id,
+ coin
+ })
+ })
+ if (!response.ok) {
+ return
+ }
+ const resp = await response.json()
+ if (!resp.error) {
+ const seed = await promiseGetSeed(uint8ToArrayBuf(this.encryptionKey))
+ const userKeychain = bgUtil.createKeychain(coin, seed)
+ const backupKeychain = bgUtil.createKeychain(coin, seed)
+ const halfSigned = await bgUtil.signTransaction(coin,
+ userKeychain, backupKeychain, bitgoWallet.bitgoPub,
+ resp, destinationAddress, amount, {
+ chain: bitgoWallet.chain,
+ index: bitgoWallet.index,
+ coinSpecific: {}
+ })
+ const sendResponse = await this.request('send-tx', {
+ method: 'POST',
+ body: JSON.stringify({
+ id,
+ coin,
+ halfSigned
+ })
+ })
+ if (!sendResponse.ok) {
+ return
+ }
+ const sendResp = await sendResponse.json()
+ return sendResp
+ }
+ }
+}
+
+module.exports = {
+ BitGoController,
+ supportedCoins
+}
diff --git a/brave/app/scripts/metamask-controller.js b/brave/app/scripts/metamask-controller.js
index 2a7a9644c..6748fb2e8 100644
--- a/brave/app/scripts/metamask-controller.js
+++ b/brave/app/scripts/metamask-controller.js
@@ -1,13 +1,40 @@
const MetamaskController = require('../../../app/scripts/metamask-controller')
+const { BitGoController } = require('./controllers/bitgo')
const nodeify = require('../../../app/scripts/lib/nodeify')
module.exports = class BraveController extends MetamaskController {
+ constructor (opts) {
+ super(opts)
+
+ chrome.braveWallet.getProjectID((projectId) => {
+ this.bitGoController = new BitGoController({
+ ...this.opts,
+ projectId: projectId,
+ keyringController: this.keyringController
+ })
+
+ if (this.keyringController.password) {
+ this.bitGoController.unlockAndSetKey(this.keyringController.password)
+ }
+ })
+ }
+
getApi () {
const api = super.getApi()
+
+ // Brave modifications
api.setBatTokenAdded = nodeify(this.preferencesController.setBatTokenAdded, this.preferencesController)
api.setHardwareConnect = nodeify(this.preferencesController.setHardwareConnect, this.preferencesController)
api.setRewardsDisclosureAccepted = nodeify(this.preferencesController.setRewardsDisclosureAccepted, this.preferencesController)
+
+ // BitGo
+ api.createBitGoWallet = nodeify(this.bitGoController.createWallet, this.bitGoController)
+ api.getBitGoWalletBalance = nodeify(this.bitGoController.getBalance, this.bitGoController)
+ api.getBitGoWalletTransfers = nodeify(this.bitGoController.getTransfers, this.bitGoController)
+ api.sendBitGoTransaction = nodeify(this.bitGoController.sendTx, this.bitGoController)
+ api.unlockAndSetKey = nodeify(this.bitGoController.unlockAndSetKey, this.bitGoController)
+
return api
}
}
diff --git a/brave/gulpfile.js/brave-replace-paths.js b/brave/gulpfile.js/brave-replace-paths.js
index 65bf1e558..cff84251c 100644
--- a/brave/gulpfile.js/brave-replace-paths.js
+++ b/brave/gulpfile.js/brave-replace-paths.js
@@ -249,6 +249,12 @@ const createBraveReplacePathsTask = () => {
`'${bravePrefix}ui/app/pages/unlock-page/unlock-page.container'`
)
)
+ .pipe(
+ replace(
+ /\'(.*)\/app-header\'/gm,
+ `'${bravePrefix}ui/app/components/app/app-header'`
+ )
+ )
.pipe(gulp.dest(file => file.base))
})
}
diff --git a/brave/ui/app/components/app/app-header/app-header.component.js b/brave/ui/app/components/app/app-header/app-header.component.js
new file mode 100644
index 000000000..150fac1ac
--- /dev/null
+++ b/brave/ui/app/components/app/app-header/app-header.component.js
@@ -0,0 +1,224 @@
+const NetworkIndicator = require('../../../../../../ui/app/components/app/network')
+
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+ DEFAULT_ROUTE,
+ CONNECT_HARDWARE_ROUTE,
+ NEW_ACCOUNT_ROUTE,
+ IMPORT_ACCOUNT_ROUTE,
+ BRAVE_CONNECT_WALLETS_ROUTE
+} from '../../../../../../ui/app/helpers/constants/routes'
+import { Item } from '../dropdowns/components/menu'
+import AppHeader from '../../../../../../ui/app/components/app/app-header/app-header.component'
+
+import ImportIcon from '../dropdowns/assets/import-icon'
+import PlusIcon from '../dropdowns/assets/plus-icon'
+import BitGoLogoIcon from '../dropdowns/assets/bitgo-logo'
+import BraveAccountItems from '../dropdowns/components/account-items.component'
+import BraveDropdownHeader from '../dropdowns/brave-dropdown-header.component'
+import BraveDropdownItems from '../dropdowns/brave-dropdown-items.component'
+
+module.exports = class BraveAppHeader extends AppHeader {
+ constructor(props) {
+ super(props)
+ }
+
+ state = {
+ activeDropdown: ''
+ }
+
+ get styles () {
+ return {
+ connectItem: {
+ margin: '0 auto',
+ padding: '5px 10px'
+ },
+ connectImg: {
+ width: '95px'
+ }
+ }
+ }
+
+ handleClick = (index) => {
+ if (this.props.isUnlocked) {
+ this.setState({ activeDropdown: index })
+ }
+ }
+
+ handleMouseLeave = (selector, { target }) => {
+ const dropdownItems = document.querySelector(selector)
+ if (dropdownItems && !dropdownItems.contains(target)) {
+ this.setState({ activeDropdown: '' })
+ }
+ }
+
+ onCreateAccount = () => {
+ this.setState({ activeDropdown: '' })
+ this.props.history.push(NEW_ACCOUNT_ROUTE)
+ }
+
+ onImportAccount = () => {
+ this.setState({ activeDropdown: '' })
+ this.props.history.push(IMPORT_ACCOUNT_ROUTE)
+ }
+
+ onHardwareConnect = () => {
+ this.setState({ activeDropdown: '' })
+ this.props.history.push(CONNECT_HARDWARE_ROUTE)
+ }
+
+ get itemStyle () {
+ return {
+ fontWeight: 'bold',
+ color: 'rgb(59, 62, 79)',
+ borderTop: '1px solid #dedede'
+ }
+ }
+
+ get browserItems () {
+ return [
+ {
+ markup: (
+ {}} style={this.styles.connectItem}>
+
+ ),
+ onClick: () => {}
+ },
+ {
+ markup: (
+
+
+
+
+
+
+
+
+
+
{ history.push(DEFAULT_ROUTE) }}
+ onMouseEnter={this.handleClick.bind(this, 'browser')}
+ onMouseLeave={this.handleMouseLeave.bind(this, 'brave-browser-menu')}
+ active={this.state.activeDropdown === 'browser'}
+ />
+ {
+ isBitGoView
+ ? {}}
+ onMouseEnter={() => {}}
+ onMouseLeave={() => {}}
+ active={true}
+ />
+ : null
+ }
+ {
+ this.setState({ activeDropdown: '' })
+ history.push(BRAVE_CONNECT_WALLETS_ROUTE)
+ }}
+ onMouseEnter={this.handleClick.bind(this, 'connect')}
+ onMouseLeave={this.handleMouseLeave.bind(this, 'brave-connect-menu')}
+ active={this.state.activeDropdown === 'connect' || isConnectWallets}
+ />
+
+ {!hideNetworkIndicator && (
+
+ this.handleNetworkIndicatorClick(event)}
+ disabled={disabled}
+ />
+
+ )}
+ {this.renderAccountMenu()}
+
+
+
+
+ ),
+ subText: 'Use BitGo to purchase and manage non-Ethereum assets within Brave Crypto Wallets.'
+ }
+ break
case 'browser':
walletText = {
title: t('newLocalWallet'),
@@ -79,7 +90,7 @@ module.exports = class ConnectWallet extends PureComponent {
onRestore,
} = this.props
const { t } = this.context
- const innerText = type === 'browser' ? t('create') : t('connect')
+ const innerText = type === 'browser' ? t('create') : 'Create Wallet'
const hwButtonStyle = type !== 'browser' ? { marginRight: '-15px' } : {}
return (
diff --git a/brave/ui/app/components/app/connect-wallet/index.scss b/brave/ui/app/components/app/connect-wallet/index.scss
index 150ad7af7..c208ef090 100644
--- a/brave/ui/app/components/app/connect-wallet/index.scss
+++ b/brave/ui/app/components/app/connect-wallet/index.scss
@@ -36,15 +36,46 @@
font-weight: bold;
color: rgb(59, 62, 79);
cursor: pointer;
+ width: 120px;
}
.restore {
cursor: pointer;
font-size: 14px;
font-weight: bold;
+ margin-left: 65px;
+ margin-top: 7px;
+ display: block;
}
.hardware-img {
width: 100px;
}
-}
\ No newline at end of file
+}
+
+.app-header {
+
+ &--back-drop {
+
+ &::after {
+ height: 0px;
+ background: inherit;
+ }
+ }
+
+ @media screen and (min-width: 576px) {
+ height: 75px;
+ justify-content: center;
+
+ &--back-drop {
+ &::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 0px;
+ background: inherit;
+ bottom: -32px;
+ }
+ }
+ }
+}
diff --git a/brave/ui/app/components/app/dropdowns/assets/bitgo-logo.js b/brave/ui/app/components/app/dropdowns/assets/bitgo-logo.js
new file mode 100644
index 000000000..9d316e3c2
--- /dev/null
+++ b/brave/ui/app/components/app/dropdowns/assets/bitgo-logo.js
@@ -0,0 +1,18 @@
+import React, { PureComponent } from 'react'
+
+module.exports = class BitGoLogoIcon extends PureComponent {
+ render () {
+ return (
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/brave/ui/app/components/app/dropdowns/assets/carat-down.js b/brave/ui/app/components/app/dropdowns/assets/carat-down.js
new file mode 100644
index 000000000..97f749a97
--- /dev/null
+++ b/brave/ui/app/components/app/dropdowns/assets/carat-down.js
@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react'
+
+module.exports = class CaratDownIcon extends PureComponent {
+ render () {
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/brave/ui/app/components/app/dropdowns/assets/import-icon.js b/brave/ui/app/components/app/dropdowns/assets/import-icon.js
new file mode 100644
index 000000000..752b20476
--- /dev/null
+++ b/brave/ui/app/components/app/dropdowns/assets/import-icon.js
@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react'
+
+module.exports = class ImportIcon extends PureComponent {
+ render () {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/brave/ui/app/components/app/dropdowns/assets/plus-icon.js b/brave/ui/app/components/app/dropdowns/assets/plus-icon.js
new file mode 100644
index 000000000..b52533db5
--- /dev/null
+++ b/brave/ui/app/components/app/dropdowns/assets/plus-icon.js
@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react'
+
+module.exports = class PlusIcon extends PureComponent {
+ render () {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/brave/ui/app/components/app/dropdowns/assets/styles.js b/brave/ui/app/components/app/dropdowns/assets/styles.js
new file mode 100644
index 000000000..d420df605
--- /dev/null
+++ b/brave/ui/app/components/app/dropdowns/assets/styles.js
@@ -0,0 +1,74 @@
+module.exports = {
+ container: {
+ general: {
+ marginRight: '7px',
+ padding: '6px 9px 3px 9px',
+ borderRadius: '8px',
+ background: '#5E6175'
+ },
+ active: {
+ cursor: 'pointer',
+ background: 'rgb(94, 97, 117)'
+ },
+ inactive: {
+ background: 'inherit'
+ }
+ },
+
+ title: {
+ general: {
+ fontSize: '14px',
+ fontWeight: '500',
+ letterSpacing: '0.5px'
+ },
+ active: {
+ color: 'white'
+ },
+ inactive: {}
+ },
+
+ dropdownContainer: {
+ background: '#fff',
+ minWidth: '275px',
+ position: 'absolute',
+ top: '15px',
+ borderRadius: '5px',
+ boxShadow: 'grey 0px 0px 2px 1px'
+ },
+
+ dropdownItem: {
+ borderBottom: '1px solid #dedede'
+ },
+
+ caratContainer: {
+ display: 'inline-block',
+ padding: '5px',
+ position: 'relative',
+ top: '-1px'
+ },
+
+ plusContainer: {
+ display: 'inline-block',
+ padding: '5px',
+ position: 'relative',
+ top: '2px'
+ },
+
+ leftPadding: {
+ width: '7px',
+ display: 'inline-block'
+ },
+
+ menu: {
+ position: 'absolute',
+ top: '65px',
+ width: '309px',
+ zIndex: '55px',
+ background: '#fff'
+ },
+
+ innerMenu: {
+ padding: '18px 8px',
+ background: '#fff'
+ }
+}
\ No newline at end of file
diff --git a/brave/ui/app/components/app/dropdowns/brave-dropdown-header.component.js b/brave/ui/app/components/app/dropdowns/brave-dropdown-header.component.js
new file mode 100644
index 000000000..0e3ea5121
--- /dev/null
+++ b/brave/ui/app/components/app/dropdowns/brave-dropdown-header.component.js
@@ -0,0 +1,58 @@
+import React, { PureComponent } from 'react'
+
+import styles from './assets/styles'
+import PlusIcon from './assets/plus-icon'
+import CaratDownIcon from './assets/carat-down'
+
+module.exports = class BraveDropdownHeader extends PureComponent {
+
+ render () {
+ const {
+ active,
+ isConnect,
+ title,
+ type,
+ onClick,
+ onMouseEnter,
+ onMouseLeave
+ } = this.props
+
+ const activeKey = active ? 'active' : 'inactive'
+
+ return (
+
+
+ {
+ isConnect
+ ?
+ :
+ }
+ {title}
+
+
+
+
+ {items.map((item, inc) => {
+ const style = item.style || {}
+ const onClick = item.onClick || (() => {})
+
+ return (
+ {}}
+ style={{
+ ...style,
+ textAlign: 'center'
+ }}
+ >
+ {item.markup}
+
+ )
+ })}
+
+ )
+ }
+}
diff --git a/brave/ui/app/components/app/dropdowns/components/account-items.component.js b/brave/ui/app/components/app/dropdowns/components/account-items.component.js
new file mode 100644
index 000000000..2f799aada
--- /dev/null
+++ b/brave/ui/app/components/app/dropdowns/components/account-items.component.js
@@ -0,0 +1,117 @@
+import React, { PureComponent } from 'react'
+
+import Tooltip from '../../../../../../../ui/app/components/ui/tooltip'
+import Identicon from '../../../../../../../ui/app/components/ui/identicon'
+
+import UserPreferencedCurrencyDisplay from '../../../../../../../ui/app/components/app/user-preferenced-currency-display'
+import { PRIMARY } from '../../../../../../../ui/app/helpers/constants/common'
+
+export default class BraveAccountItems extends PureComponent {
+
+ renderAccountItems = () => {
+ const {
+ identities,
+ accounts,
+ keyrings,
+ showAccountDetail,
+ } = this.props
+
+ const accountOrder = keyrings.reduce((list, keyring) => list.concat(keyring.accounts), [])
+
+ return accountOrder.filter(address => !!identities[address]).map(address => {
+ const identity = identities[address]
+
+ const balanceValue = accounts[address] ? accounts[address].balance : ''
+ const simpleAddress = identity.address.substring(2).toLowerCase()
+
+ const keyring = keyrings.find(kr => {
+ return kr.accounts.includes(simpleAddress) || kr.accounts.includes(identity.address)
+ })
+
+ return (
+ {
+ showAccountDetail(identity.address)
+ }}
+ key={identity.address}
+ >
+
+
+
+ { identity.name || '' }
+
+
+
+ { this.renderKeyringType(keyring) }
+ { this.renderRemoveAccount(keyring, identity) }
+
{this.renderAccountItems()}
+ )
+ }
+
+ renderRemoveAccount (keyring, identity) {
+ const { t } = this.context
+ const { type } = keyring
+ const isRemovable = type !== 'HD Key Tree'
+
+ return isRemovable && (
+
+ this.removeAccount(e, identity)}
+ />
+
+ )
+ }
+
+ removeAccount (e, identity) {
+ e.preventDefault()
+ e.stopPropagation()
+ const { showRemoveAccountConfirmationModal } = this.props
+ showRemoveAccountConfirmationModal(identity)
+ }
+
+ renderKeyringType (keyring) {
+ const { t } = this.context
+
+ if (!keyring) {
+ return null
+ }
+
+ const { type } = keyring
+ let label
+
+ switch (type) {
+ case 'Trezor Hardware':
+ case 'Ledger Hardware':
+ label = t('hardware')
+ break
+ case 'Simple Key Pair':
+ label = t('imported')
+ break
+ }
+
+ return label && (
+
+ { label }
+
+ )
+ }
+}
diff --git a/brave/ui/app/components/app/dropdowns/components/brave-wallet-dropdown/assets/carat-down.js b/brave/ui/app/components/app/dropdowns/components/brave-wallet-dropdown/assets/carat-down.js
new file mode 100644
index 000000000..02f14cf1c
--- /dev/null
+++ b/brave/ui/app/components/app/dropdowns/components/brave-wallet-dropdown/assets/carat-down.js
@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react'
+
+module.exports = class CaratDownIcon extends PureComponent {
+ render () {
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/brave/ui/app/components/app/dropdowns/components/brave-wallet-dropdown/assets/plus.js b/brave/ui/app/components/app/dropdowns/components/brave-wallet-dropdown/assets/plus.js
new file mode 100644
index 000000000..eb7c68296
--- /dev/null
+++ b/brave/ui/app/components/app/dropdowns/components/brave-wallet-dropdown/assets/plus.js
@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react'
+
+module.exports = class PlusIcon extends PureComponent {
+ render () {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/brave/ui/app/components/app/dropdowns/components/brave-wallet-dropdown/styles.js b/brave/ui/app/components/app/dropdowns/components/brave-wallet-dropdown/styles.js
new file mode 100644
index 000000000..bcf933e47
--- /dev/null
+++ b/brave/ui/app/components/app/dropdowns/components/brave-wallet-dropdown/styles.js
@@ -0,0 +1,59 @@
+module.exports = {
+ container: {
+ general: {
+ marginRight: '5px',
+ padding: '5px 9px',
+ borderRadius: '8px'
+ },
+ active: {
+ background: 'rgb(94, 97, 117)'
+ },
+ inactive: {
+ background: 'inherit'
+ }
+ },
+
+ title: {
+ general: {
+ fontSize: '14px',
+ fontWeight: '500',
+ letterSpacing: '0.5px'
+ },
+ active: {
+ color: 'white'
+ },
+ inactive: {}
+ },
+
+ dropdownContainer: {
+ background: '#fff',
+ minWidth: '275px',
+ position: 'absolute',
+ top: '15px',
+ borderRadius: '5px',
+ boxShadow: 'grey 0px 0px 2px 1px'
+ },
+
+ dropdownItem: {
+ borderBottom: '1px solid #dedede'
+ },
+
+ caratContainer: {
+ display: 'inline-block',
+ padding: '5px',
+ position: 'relative',
+ top: '-1px'
+ },
+
+ plusContainer: {
+ display: 'inline-block',
+ padding: '5px',
+ position: 'relative',
+ top: '2px'
+ },
+
+ leftPadding: {
+ width: '7px',
+ display: 'inline-block'
+ }
+}
\ No newline at end of file
diff --git a/brave/ui/app/components/app/provider-page-container/index.scss b/brave/ui/app/components/app/provider-page-container/index.scss
index 80cf1965b..2298454ce 100644
--- a/brave/ui/app/components/app/provider-page-container/index.scss
+++ b/brave/ui/app/components/app/provider-page-container/index.scss
@@ -5,3 +5,7 @@
display: none;
}
}
+
+div.app-header {
+ background: inherit;
+}
\ No newline at end of file
diff --git a/brave/ui/app/ducks/metamask/metamask.js b/brave/ui/app/ducks/metamask/metamask.js
index d46fa303e..737bfa457 100644
--- a/brave/ui/app/ducks/metamask/metamask.js
+++ b/brave/ui/app/ducks/metamask/metamask.js
@@ -8,11 +8,43 @@ module.exports = function (state, action) {
newState.batTokenAdded = newState.batTokenAdded || false
newState.rewardsDisclosureAccepted = newState.rewardsDisclosureAccepted || false
+ // BitGo
+ newState.bitGoBalances = newState.bitGoBalances || {}
+ newState.bitGoTransfers = newState.bitGoTransfers || {}
+ newState.bitGoCreatedWallets = newState.bitGoCreatedWallets || []
+
switch (action.type) {
case actions.SET_BAT_TOKEN_ADDED:
return extend(newState, {
batTokenAdded: action.value,
})
+ case actions.SET_BITGO_BALANCE:
+ const updatedBitGoBalances = {
+ ...newState.bitGoBalances
+ }
+
+ updatedBitGoBalances[action.coin] = action.balance
+
+ return extend(newState, {
+ bitGoBalances: updatedBitGoBalances
+ })
+ case actions.SET_BITGO_TRANSFERS:
+ const updatedBitGoTransfers = {
+ ...newState.bitGoTransfers
+ }
+
+ updatedBitGoTransfers[action.coin] = action.transfers
+
+ return extend(newState, {
+ bitGoTransfers: updatedBitGoTransfers
+ })
+
+ case actions.SET_BITGO_WALLET_CREATED:
+ const updatedBitGoCreatedWallets = newState.bitGoCreatedWallets.push(action.coin)
+
+ return extend(newState, {
+ bitGoCreatedWallets: updatedBitGoCreatedWallets
+ })
default:
return newState
}
diff --git a/brave/ui/app/helpers/constants/routes.js b/brave/ui/app/helpers/constants/routes.js
index 3f47d3574..9e860bb8f 100644
--- a/brave/ui/app/helpers/constants/routes.js
+++ b/brave/ui/app/helpers/constants/routes.js
@@ -1,5 +1,7 @@
const Routes = require('../../../../../ui/app/helpers/constants/routes')
Routes.INITIALIZE_SELECT_ACTION_ROUTE = Routes.INITIALIZE_WELCOME_ROUTE
+Routes.BRAVE_CONNECT_WALLETS_ROUTE = '/connect-wallets'
+Routes.BRAVE_BITGO_WALLET_INDEX = '/bitgo-account-view'
module.exports = Routes
diff --git a/brave/ui/app/pages/connect-accounts/connect-accounts.component.js b/brave/ui/app/pages/connect-accounts/connect-accounts.component.js
new file mode 100644
index 000000000..524225c23
--- /dev/null
+++ b/brave/ui/app/pages/connect-accounts/connect-accounts.component.js
@@ -0,0 +1,175 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import BitGoLogoIcon from '../../components/app/dropdowns/assets/bitgo-logo'
+import ConnectWallet from '../../components/app/connect-wallet'
+import CloseIcon from '../first-time-flow/welcome-modal/assets/close-icon'
+import CloseIconDark from '../first-time-flow/welcome-modal/assets/close-icon-dark'
+import {
+ BRAVE_CONNECT_WALLETS_ROUTE,
+ INITIALIZE_CREATE_PASSWORD_ROUTE,
+ BRAVE_BITGO_WALLET_INDEX
+} from '../../helpers/constants/routes'
+const { supportedCoins } = require('../../../../app/scripts/controllers/bitgo')
+
+module.exports = class BraveConnectAccounts extends PureComponent {
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ static propTypes = {
+ history: PropTypes.object,
+ createBitGoWallet: PropTypes.func,
+ bitGoCreatedWallets: PropTypes.array,
+ }
+
+ constructor (props) {
+ super(props)
+
+ const checkedAssets = {}
+ const { bitGoCreatedWallets } = this.props
+ this.bitGoCreateableAssets = {}
+
+ for (let coin in supportedCoins) {
+ if (!bitGoCreatedWallets.includes(coin)) {
+ this.bitGoCreateableAssets[coin] = supportedCoins[coin]
+ }
+ }
+
+ Object.keys(this.bitGoCreateableAssets).map((key) => {
+ checkedAssets[key] = false
+ })
+
+ this.state = {
+ checkedAssets,
+ showBitGoModal: false
+ }
+ }
+
+ onCreate = () => {
+ this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE)
+ }
+
+ onConnectFinish = () => {
+ this.props.history.push(BRAVE_CONNECT_WALLETS_ROUTE)
+ }
+
+ onCreateBitGoWallets = () => {
+ const { checkedAssets } = this.state
+
+ for (let coin in checkedAssets) {
+ if (checkedAssets[coin]) {
+ this.props.createBitGoWallet(coin)
+ }
+ }
+
+ this.props.history.push(BRAVE_BITGO_WALLET_INDEX)
+ }
+
+ onConnectBitGoWallets = () => {
+ this.setState({ showBitGoModal: !this.state.showBitGoModal })
+ }
+
+ checkAsset = (asset) => {
+ const { checkedAssets } = this.state
+ checkedAssets[asset] = !checkedAssets[asset]
+ this.setState({ checkedAssets })
+ }
+
+ getCryptoImage = (asset) => {
+ // temporary
+ if (asset === 'bsv' || asset === 'btg' || asset === 'eos' || asset === 'algo') {
+ asset = 'btc'
+ }
+
+ return (
+
+
+
+
+
+
+ {'Select all crypto assets you would like to interact with.'}
+
+
{'A new wallet will be generated for each coin checked. Two of three private keys are stored on BitGo. The third key will be stored securely on Brave.'}
+
+ {Object.keys(this.bitGoCreateableAssets).map((key) => {
+ const isChecked = checkedAssets[key]
+
+ return (
+
+
+
+
+
+ {this.getCryptoImage(key)}
+
+
+ {this.bitGoCreateableAssets[key]}
+
+
+
+ )
+ })}
+
+
+
+
+ {'Create Wallets'}
+
+
+
+
+ {
+ showBitGoModal
+ ? this.renderBitGoModal()
+ : null
+ }
+
+
+ {'Wallets'}
+
+
+
+
+
+ {bitGoCreatedWallets.map((asset) => {
+ const balance = bitGoBalances[asset] || '0.00'
+ const activeClass = this.state.currentAsset === asset ? 'active' : ''
+
+ return (
+
+
+ {this.getCryptoIcon(asset)}
+
+
{`${balance} ${asset.toUpperCase()}`}
+
+ )
+ })}
+
+
+
+
+ Total Value
+ $0.00
+
+
+ {this.renderAssetList()}
+
+
+ {this.renderTransactions()}
+
+
+ 
+ 
+ )
+ }
+
+ renderBitGoModal () {
+ const { checkedAssets } = this.state
+
+ return (
+ 
+ )
+ }
+
+ renderAssetList = () => {
+ const {
+ bitGoBalances,
+ bitGoCreatedWallets,
+ } = this.props
+
+ return (
+