poanetwork
/
nifty-wallet
mirror of https://github.com/poanetwork/nifty-wallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

1st part of refactoring: remove unused styles and components

This commit is contained in:
Victor Baranov 2019-09-02 12:46:00 +03:00
parent 7fad9fcc00
commit 36b863438f
40 changed files with 9 additions and 3656 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/scripts/ui.js
View File

@ -1,6 +1,5 @@
const injectCss = require('inject-css')
const OldMetaMaskUiCss = require('../../old-ui/css')
const NewMetaMaskUiCss = require('../../ui/css')
const startPopup = require('./popup-core')
const PortStream = require('extension-port-stream')
const { getEnvironmentType } = require('./lib/util')
@ -45,25 +44,17 @@ async function start () {
// const { isMascara, identities = {}, featureFlags = {} } = store.getState().metamask
// const firstTime = Object.keys(identities).length === 0
const { isMascara, featureFlags = {} } = store.getState().metamask
let betaUIState = featureFlags.betaUI
// Code commented out until we begin auto adding users to NewUI
// const useBetaCss = isMascara || firstTime || betaUIState
const useBetaCss = isMascara || betaUIState
let css = useBetaCss ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
let css = OldMetaMaskUiCss()
let deleteInjectedCss = injectCss(css)
let newBetaUIState
store.subscribe(() => {
const state = store.getState()
newBetaUIState = state.metamask.featureFlags.betaUI
if (newBetaUIState !== betaUIState) {
deleteInjectedCss()
betaUIState = newBetaUIState
css = betaUIState ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
deleteInjectedCss = injectCss(css)
}
deleteInjectedCss()
css = OldMetaMaskUiCss()
deleteInjectedCss = injectCss(css)
})
})

87
ui/app/accounts/new-account/index.js
View File

@ -1,87 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const PropTypes = require('prop-types')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../../actions')
const { getCurrentViewContext } = require('../../selectors')
const classnames = require('classnames')
const NewAccountCreateForm = require('./create-form')
const NewAccountImportForm = require('../import')
function mapStateToProps (state) {
return {
displayedForm: getCurrentViewContext(state),
}
}
function mapDispatchToProps (dispatch) {
return {
displayForm: form => dispatch(actions.setNewAccountForm(form)),
showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
showExportPrivateKeyModal: () => {
dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
},
hideModal: () => dispatch(actions.hideModal()),
setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
}
}
inherits(AccountDetailsModal, Component)
function AccountDetailsModal (props) {
Component.call(this)
this.state = {
displayedForm: props.displayedForm,
}
}
AccountDetailsModal.contextTypes = {
t: PropTypes.func,
}
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
AccountDetailsModal.prototype.render = function () {
const { displayedForm, displayForm } = this.props
return h('div.new-account', {}, [
h('div.new-account__header', [
h('div.new-account__title', this.context.t('newAccount')),
h('div.new-account__tabs', [
h('div.new-account__tabs__tab', {
className: classnames('new-account__tabs__tab', {
'new-account__tabs__selected': displayedForm === 'CREATE',
'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE',
}),
onClick: () => displayForm('CREATE'),
}, this.context.t('createDen')),
h('div.new-account__tabs__tab', {
className: classnames('new-account__tabs__tab', {
'new-account__tabs__selected': displayedForm === 'IMPORT',
'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT',
}),
onClick: () => displayForm('IMPORT'),
}, this.context.t('import')),
]),
]),
h('div.new-account__form', [
displayedForm === 'CREATE'
? h(NewAccountCreateForm)
: h(NewAccountImportForm),
]),
])
}

365
ui/app/app.js
View File

@ -1,365 +0,0 @@
const { Component } = require('react')
const PropTypes = require('prop-types')
const connect = require('react-redux').connect
const { Route, Switch, withRouter } = require('react-router-dom')
const { compose } = require('recompose')
const h = require('react-hyperscript')
const actions = require('./actions')
const classnames = require('classnames')
const log = require('loglevel')
const { getMetaMaskAccounts } = require('./selectors')
// init
const InitializeScreen = require('../../mascara/src/app/first-time').default
// accounts
const SendTransactionScreen = require('./components/send/send.container')
const ConfirmTransaction = require('./components/pages/confirm-transaction')
// slideout menu
const Sidebar = require('./components/sidebars').default
// other views
import Home from './components/pages/home'
import Settings from './components/pages/settings'
const Authenticated = require('./components/pages/authenticated')
const Initialized = require('./components/pages/initialized')
const RestoreVaultPage = require('./components/pages/keychains/restore-vault').default
const RevealSeedConfirmation = require('./components/pages/keychains/reveal-seed')
const AddTokenPage = require('./components/pages/add-token')
const ConfirmAddTokenPage = require('./components/pages/confirm-add-token')
const ConfirmAddSuggestedTokenPage = require('./components/pages/confirm-add-suggested-token')
const CreateAccountPage = require('./components/pages/create-account')
const NoticeScreen = require('./components/pages/notice')
const Loading = require('./components/loading-screen')
const NetworkDropdown = require('./components/dropdowns/network-dropdown')
const AccountMenu = require('./components/account-menu')
// Global Modals
const Modal = require('./components/modals/index').Modal
// Global Alert
const Alert = require('./components/alert')
import AppHeader from './components/app-header'
import UnlockPage from './components/pages/unlock-page'
// Routes
const {
DEFAULT_ROUTE,
UNLOCK_ROUTE,
SETTINGS_ROUTE,
REVEAL_SEED_ROUTE,
RESTORE_VAULT_ROUTE,
ADD_TOKEN_ROUTE,
CONFIRM_ADD_TOKEN_ROUTE,
CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
NEW_ACCOUNT_ROUTE,
SEND_ROUTE,
CONFIRM_TRANSACTION_ROUTE,
INITIALIZE_ROUTE,
NOTICE_ROUTE,
} = require('./routes')
class App extends Component {
componentWillMount () {
const { currentCurrency, setCurrentCurrencyToUSD } = this.props
if (!currentCurrency) {
setCurrentCurrencyToUSD()
}
}
renderRoutes () {
const exact = true
return (
h(Switch, [
h(Route, { path: INITIALIZE_ROUTE, component: InitializeScreen }),
h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }),
h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }),
h(Authenticated, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedConfirmation }),
h(Authenticated, { path: SETTINGS_ROUTE, component: Settings }),
h(Authenticated, { path: NOTICE_ROUTE, exact, component: NoticeScreen }),
h(Authenticated, {
path: `${CONFIRM_TRANSACTION_ROUTE}/:id?`,
component: ConfirmTransaction,
}),
h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen }),
h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
h(Authenticated, { path: CONFIRM_ADD_TOKEN_ROUTE, exact, component: ConfirmAddTokenPage }),
h(Authenticated, { path: CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE, exact, component: ConfirmAddSuggestedTokenPage }),
h(Authenticated, { path: NEW_ACCOUNT_ROUTE, component: CreateAccountPage }),
h(Authenticated, { path: DEFAULT_ROUTE, exact, component: Home }),
])
)
}
render () {
const {
isLoading,
alertMessage,
loadingMessage,
network,
isMouseUser,
provider,
frequentRpcList,
currentView,
setMouseUserState,
sidebar,
} = this.props
const isLoadingNetwork = network === 'loading' && currentView.name !== 'config'
const loadMessage = loadingMessage || isLoadingNetwork ?
this.getConnectingLabel(loadingMessage) : null
log.debug('Main ui render function')
return (
h('.flex-column.full-height', {
className: classnames({ 'mouse-user-styles': isMouseUser }),
style: {
overflowX: 'hidden',
position: 'relative',
alignItems: 'center',
},
tabIndex: '0',
onClick: () => setMouseUserState(true),
onKeyDown: (e) => {
if (e.keyCode === 9) {
setMouseUserState(false)
}
},
}, [
// global modal
h(Modal, {}, []),
// global alert
h(Alert, {visible: this.props.alertOpen, msg: alertMessage}),
h(AppHeader),
// sidebar
h(Sidebar, {
sidebarOpen: sidebar.isOpen,
hideSidebar: this.props.hideSidebar,
transitionName: sidebar.transitionName,
type: sidebar.type,
}),
// network dropdown
h(NetworkDropdown, {
provider,
frequentRpcList,
}, []),
h(AccountMenu),
h('div.main-container-wrapper', [
(isLoading || isLoadingNetwork) && h(Loading, {
loadingMessage: loadMessage,
}),
// content
this.renderRoutes(),
]),
])
)
}
toggleMetamaskActive () {
if (!this.props.isUnlocked) {
// currently inactive: redirect to password box
var passwordBox = document.querySelector('input[type=password]')
if (!passwordBox) return
passwordBox.focus()
} else {
// currently active: deactivate
this.props.dispatch(actions.lockMetamask(false))
}
}
getConnectingLabel = function (loadingMessage) {
if (loadingMessage) {
return loadingMessage
}
const { provider } = this.props
const providerName = provider.type
let name
if (providerName === 'mainnet') {
name = this.context.t('connectingToMainnet')
} else if (providerName === 'ropsten') {
name = this.context.t('connectingToRopsten')
} else if (providerName === 'kovan') {
name = this.context.t('connectingToKovan')
} else if (providerName === 'rinkeby') {
name = this.context.t('connectingToRinkeby')
} else if (providerName === 'poa') {
name = this.context.t('connectingToPOA')
} else {
name = this.context.t('connectingToUnknown')
}
return name
}
getNetworkName () {
const { provider } = this.props
const providerName = provider.type
let name
if (providerName === 'mainnet') {
name = this.context.t('mainnet')
} else if (providerName === 'ropsten') {
name = this.context.t('ropsten')
} else if (providerName === 'kovan') {
name = this.context.t('kovan')
} else if (providerName === 'rinkeby') {
name = this.context.t('rinkeby')
} else if (providerName === 'poa') {
name = this.context.t('poa')
} else {
name = this.context.t('unknownNetwork')
}
return name
}
}
App.propTypes = {
currentCurrency: PropTypes.string,
setCurrentCurrencyToUSD: PropTypes.func,
isLoading: PropTypes.bool,
loadingMessage: PropTypes.string,
alertMessage: PropTypes.string,
network: PropTypes.string,
provider: PropTypes.object,
frequentRpcList: PropTypes.array,
currentView: PropTypes.object,
sidebar: PropTypes.object,
alertOpen: PropTypes.bool,
hideSidebar: PropTypes.func,
isMascara: PropTypes.bool,
isOnboarding: PropTypes.bool,
isUnlocked: PropTypes.bool,
networkDropdownOpen: PropTypes.bool,
showNetworkDropdown: PropTypes.func,
hideNetworkDropdown: PropTypes.func,
history: PropTypes.object,
location: PropTypes.object,
dispatch: PropTypes.func,
toggleAccountMenu: PropTypes.func,
selectedAddress: PropTypes.string,
noActiveNotices: PropTypes.bool,
lostAccounts: PropTypes.array,
isInitialized: PropTypes.bool,
forgottenPassword: PropTypes.bool,
activeAddress: PropTypes.string,
unapprovedTxs: PropTypes.object,
seedWords: PropTypes.string,
unapprovedMsgCount: PropTypes.number,
unapprovedPersonalMsgCount: PropTypes.number,
unapprovedTypedMessagesCount: PropTypes.number,
welcomeScreenSeen: PropTypes.bool,
isPopup: PropTypes.bool,
betaUI: PropTypes.bool,
isMouseUser: PropTypes.bool,
setMouseUserState: PropTypes.func,
t: PropTypes.func,
}
function mapStateToProps (state) {
const { appState, metamask } = state
const {
networkDropdownOpen,
sidebar,
alertOpen,
alertMessage,
isLoading,
loadingMessage,
} = appState
const accounts = getMetaMaskAccounts(state)
const {
identities,
address,
keyrings,
isInitialized,
noActiveNotices,
seedWords,
unapprovedTxs,
nextUnreadNotice,
lostAccounts,
unapprovedMsgCount,
unapprovedPersonalMsgCount,
unapprovedTypedMessagesCount,
} = metamask
const selected = address || Object.keys(accounts)[0]
return {
// state from plugin
networkDropdownOpen,
sidebar,
alertOpen,
alertMessage,
isLoading,
loadingMessage,
noActiveNotices,
isInitialized,
isUnlocked: state.metamask.isUnlocked,
selectedAddress: state.metamask.selectedAddress,
currentView: state.appState.currentView,
activeAddress: state.appState.activeAddress,
transForward: state.appState.transForward,
isMascara: state.metamask.isMascara,
isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
isPopup: state.metamask.isPopup,
seedWords: state.metamask.seedWords,
unapprovedTxs,
unapprovedMsgs: state.metamask.unapprovedMsgs,
unapprovedMsgCount,
unapprovedPersonalMsgCount,
unapprovedTypedMessagesCount,
menuOpen: state.appState.menuOpen,
network: state.metamask.network,
provider: state.metamask.provider,
forgottenPassword: state.appState.forgottenPassword,
nextUnreadNotice,
lostAccounts,
frequentRpcList: state.metamask.frequentRpcList || [],
currentCurrency: state.metamask.currentCurrency,
isMouseUser: state.appState.isMouseUser,
betaUI: state.metamask.featureFlags.betaUI,
isRevealingSeedWords: state.metamask.isRevealingSeedWords,
Qr: state.appState.Qr,
welcomeScreenSeen: state.metamask.welcomeScreenSeen,
// state needed to get account dropdown temporarily rendering from app bar
identities,
selected,
keyrings,
}
}
function mapDispatchToProps (dispatch, ownProps) {
return {
dispatch,
hideSidebar: () => dispatch(actions.hideSidebar()),
showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)),
}
}
App.contextTypes = {
t: PropTypes.func,
}
module.exports = compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
)(App)

249
ui/app/components/account-menu/index.js
View File

@ -1,249 +0,0 @@
const inherits = require('util').inherits
const Component = require('react').Component
const connect = require('react-redux').connect
const { compose } = require('recompose')
const { withRouter } = require('react-router-dom')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const actions = require('../../actions')
const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
const Identicon = require('../identicon')
const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums')
const { getEnvironmentType } = require('../../../../app/scripts/lib/util')
const Tooltip = require('../tooltip')
import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
import { PRIMARY } from '../../constants/common'
import { getMetaMaskAccounts } from '../../selectors'
const {
SETTINGS_ROUTE,
INFO_ROUTE,
NEW_ACCOUNT_ROUTE,
IMPORT_ACCOUNT_ROUTE,
CONNECT_HARDWARE_ROUTE,
DEFAULT_ROUTE,
} = require('../../routes')
module.exports = compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
)(AccountMenu)
AccountMenu.contextTypes = {
t: PropTypes.func,
}
inherits(AccountMenu, Component)
function AccountMenu () { Component.call(this) }
function mapStateToProps (state) {
return {
selectedAddress: state.metamask.selectedAddress,
isAccountMenuOpen: state.metamask.isAccountMenuOpen,
keyrings: state.metamask.keyrings,
identities: state.metamask.identities,
accounts: getMetaMaskAccounts(state),
}
}
function mapDispatchToProps (dispatch) {
return {
toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
showAccountDetail: address => {
dispatch(actions.showAccountDetail(address))
dispatch(actions.hideSidebar())
dispatch(actions.toggleAccountMenu())
},
lockMetamask: () => {
dispatch(actions.lockMetamask())
dispatch(actions.hideWarning())
dispatch(actions.hideSidebar())
dispatch(actions.toggleAccountMenu())
},
showConfigPage: () => {
dispatch(actions.showConfigPage())
dispatch(actions.hideSidebar())
dispatch(actions.toggleAccountMenu())
},
showInfoPage: () => {
dispatch(actions.showInfoPage())
dispatch(actions.hideSidebar())
dispatch(actions.toggleAccountMenu())
},
showRemoveAccountConfirmationModal: (identity) => {
return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
},
}
}
AccountMenu.prototype.render = function () {
const {
isAccountMenuOpen,
toggleAccountMenu,
lockMetamask,
history,
} = this.props
return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [
h(CloseArea, { onClick: toggleAccountMenu }),
h(Item, {
className: 'account-menu__header',
}, [
this.context.t('myAccounts'),
h('button.account-menu__logout-button', {
onClick: () => {
lockMetamask()
history.push(DEFAULT_ROUTE)
},
}, this.context.t('logout')),
]),
h(Divider),
h('div.account-menu__accounts', this.renderAccounts()),
h(Divider),
h(Item, {
onClick: () => {
toggleAccountMenu()
history.push(NEW_ACCOUNT_ROUTE)
},
icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
text: this.context.t('createAccount'),
}),
h(Item, {
onClick: () => {
toggleAccountMenu()
history.push(IMPORT_ACCOUNT_ROUTE)
},
icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
text: this.context.t('importAccount'),
}),
h(Item, {
onClick: () => {
toggleAccountMenu()
if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE)
} else {
history.push(CONNECT_HARDWARE_ROUTE)
}
},
icon: h('img.account-menu__item-icon', { src: 'images/connect-icon.svg' }),
text: this.context.t('connectHardwareWallet'),
}),
h(Divider),
h(Item, {
onClick: () => {
toggleAccountMenu()
history.push(INFO_ROUTE)
},
icon: h('img', { src: 'images/mm-info-icon.svg' }),
text: this.context.t('infoHelp'),
}),
h(Item, {
onClick: () => {
toggleAccountMenu()
history.push(SETTINGS_ROUTE)
},
icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
text: this.context.t('settings'),
}),
])
}
AccountMenu.prototype.renderAccounts = function () {
const {
identities,
accounts,
selectedAddress,
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 isSelected = identity.address === selectedAddress
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 h(
'div.account-menu__account.menu__item--clickable',
{ onClick: () => showAccountDetail(identity.address) },
[
h('div.account-menu__check-mark', [
isSelected ? h('div.account-menu__check-mark-icon') : null,
]),
h(
Identicon,
{
address: identity.address,
diameter: 24,
},
),
h('div.account-menu__account-info', [
h('div.account-menu__name', identity.name || ''),
h(UserPreferencedCurrencyDisplay, {
className: 'account-menu__balance',
value: balanceValue,
type: PRIMARY,
}),
]),
this.renderKeyringType(keyring),
this.renderRemoveAccount(keyring, identity),
],
)
})
}
AccountMenu.prototype.renderRemoveAccount = function (keyring, identity) {
// Any account that's not from the HD wallet Keyring can be removed
const type = keyring.type
const isRemovable = type !== 'HD Key Tree'
if (isRemovable) {
return h(Tooltip, {
title: this.context.t('removeAccount'),
position: 'bottom',
}, [
h('a.remove-account-icon', {
onClick: (e) => this.removeAccount(e, identity),
}, ''),
])
}
return null
}
AccountMenu.prototype.removeAccount = function (e, identity) {
e.preventDefault()
e.stopPropagation()
const { showRemoveAccountConfirmationModal } = this.props
showRemoveAccountConfirmationModal(identity)
}
AccountMenu.prototype.renderKeyringType = function (keyring) {
try { // Sometimes keyrings aren't loaded yet:
const type = keyring.type
let label
switch (type) {
case 'Trezor Hardware':
case 'Ledger Hardware':
label = this.context.t('hardware')
break
case 'Simple Key Pair':
label = this.context.t('imported')
break
default:
label = ''
}
return label !== '' ? h('.keyring-label.allcaps', label) : null
} catch (e) { return }
}

34
ui/app/components/add-token-button/add-token-button.component.js
View File

@ -1,34 +0,0 @@
import PropTypes from 'prop-types'
import React, {PureComponent} from 'react'
export default class AddTokenButton extends PureComponent {
static contextTypes = {
t: PropTypes.func.isRequired,
}
static defaultProps = {
onClick: () => {},
}
static propTypes = {
onClick: PropTypes.func,
}
render () {
const { t } = this.context
const { onClick } = this.props
return (
<div className="add-token-button">
<h1 className="add-token-button__help-header">{t('missingYourTokens')}</h1>
<p className="add-token-button__help-desc">{t('clickToAdd', [t('addToken')])}</p>
<div
className="add-token-button__button"
onClick={onClick}
>
{t('addToken')}
</div>
</div>
)
}
}

1
ui/app/components/add-token-button/index.js
View File

@ -1 +0,0 @@
export { default } from './add-token-button.component'

26
ui/app/components/add-token-button/index.scss
View File

@ -1,26 +0,0 @@
.add-token-button {
display: flex;
flex-direction: column;
color: lighten($scorpion, 25%);
width: 185px;
margin: 36px auto;
text-align: center;
&__help-header {
font-weight: bold;
font-size: 1rem;
}
&__help-desc {
font-size: 0.75rem;
margin-top: 1rem;
}
&__button {
font-size: 0.75rem;
margin: 1rem;
text-transform: uppercase;
color: $curious-blue;
cursor: pointer;
}
}

62
ui/app/components/alert/index.js
View File

@ -1,62 +0,0 @@
const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
class Alert extends Component {
constructor (props) {
super(props)
this.state = {
visble: false,
msg: false,
className: '',
}
}
componentWillReceiveProps (nextProps) {
if (!this.props.visible && nextProps.visible) {
this.animateIn(nextProps)
} else if (this.props.visible && !nextProps.visible) {
this.animateOut(nextProps)
}
}
animateIn (props) {
this.setState({
msg: props.msg,
visible: true,
className: '.visible',
})
}
animateOut (props) {
this.setState({
msg: null,
className: '.hidden',
})
setTimeout(_ => {
this.setState({visible: false})
}, 500)
}
render () {
if (this.state.visible) {
return (
h(`div.global-alert${this.state.className}`, {},
h('a.msg', {}, this.state.msg)
)
)
}
return null
}
}
Alert.propTypes = {
visible: PropTypes.bool.isRequired,
msg: PropTypes.string,
}
module.exports = Alert

136
ui/app/components/app-header/app-header.component.js
View File

@ -1,136 +0,0 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { matchPath } from 'react-router-dom'
const {
ENVIRONMENT_TYPE_NOTIFICATION,
ENVIRONMENT_TYPE_POPUP,
} = require('../../../../app/scripts/lib/enums')
const { DEFAULT_ROUTE, INITIALIZE_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('../../routes')
const Identicon = require('../identicon')
const NetworkIndicator = require('../network')
export default class AppHeader extends PureComponent {
static propTypes = {
history: PropTypes.object,
location: PropTypes.object,
network: PropTypes.string,
provider: PropTypes.object,
networkDropdownOpen: PropTypes.bool,
showNetworkDropdown: PropTypes.func,
hideNetworkDropdown: PropTypes.func,
toggleAccountMenu: PropTypes.func,
selectedAddress: PropTypes.string,
isUnlocked: PropTypes.bool,
}
static contextTypes = {
t: PropTypes.func,
}
handleNetworkIndicatorClick (event) {
event.preventDefault()
event.stopPropagation()
const { networkDropdownOpen, showNetworkDropdown, hideNetworkDropdown } = this.props
return networkDropdownOpen === false
? showNetworkDropdown()
: hideNetworkDropdown()
}
isConfirming () {
const { location } = this.props
return Boolean(matchPath(location.pathname, {
path: CONFIRM_TRANSACTION_ROUTE, exact: false,
}))
}
renderAccountMenu () {
const { isUnlocked, toggleAccountMenu, selectedAddress } = this.props
return isUnlocked && (
<div
className={classnames('account-menu__icon', {
'account-menu__icon--disabled': this.isConfirming(),
})}
onClick={() => this.isConfirming() || toggleAccountMenu()}
>
<Identicon
address={selectedAddress}
diameter={32}
/>
</div>
)
}
hideAppHeader () {
const { location } = this.props
const isInitializing = Boolean(matchPath(location.pathname, {
path: INITIALIZE_ROUTE, exact: false,
}))
if (isInitializing) {
return true
}
if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
return true
}
if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_POPUP && this.isConfirming()) {
return true
}
}
render () {
const {
network,
provider,
history,
isUnlocked,
} = this.props
if (this.hideAppHeader()) {
return null
}
return (
<div
className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
<div className="app-header__contents">
<div
className="app-header__logo-container"
onClick={() => history.push(DEFAULT_ROUTE)}
>
<img
className="app-header__metafox-logo app-header__metafox-logo--horizontal"
src="/images/logo/metamask-logo-horizontal-beta.svg"
height={30}
/>
<img
className="app-header__metafox-logo app-header__metafox-logo--icon"
src="/images/logo/metamask-fox.svg"
height={42}
width={42}
/>
</div>
<div className="app-header__account-menu-container">
<div className="app-header__network-component-wrapper">
<NetworkIndicator
network={network}
provider={provider}
onClick={event => this.handleNetworkIndicatorClick(event)}
disabled={this.isConfirming()}
/>
</div>
{ this.renderAccountMenu() }
</div>
</div>
</div>
)
}
}

38
ui/app/components/app-header/app-header.container.js
View File

@ -1,38 +0,0 @@
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { compose } from 'recompose'
import AppHeader from './app-header.component'
const actions = require('../../actions')
const mapStateToProps = state => {
const { appState, metamask } = state
const { networkDropdownOpen } = appState
const {
network,
provider,
selectedAddress,
isUnlocked,
} = metamask
return {
networkDropdownOpen,
network,
provider,
selectedAddress,
isUnlocked,
}
}
const mapDispatchToProps = dispatch => {
return {
showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
}
}
export default compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
)(AppHeader)

1
ui/app/components/app-header/index.js
View File

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

90
ui/app/components/app-header/index.scss
View File

@ -1,90 +0,0 @@
.app-header {
align-items: center;
background: $gallery;
position: relative;
z-index: $header-z-index;
display: flex;
flex-flow: column nowrap;
width: 100%;
flex: 0 0 auto;
@media screen and (max-width: 575px) {
padding: 12px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
z-index: $mobile-header-z-index;
}
@media screen and (min-width: 576px) {
height: 75px;
justify-content: center;
&--back-drop {
&::after {
content: '';
position: absolute;
width: 100%;
height: 32px;
background: $gallery;
bottom: -32px;
}
}
}
&__metafox-logo {
cursor: pointer;
&--icon {
@media screen and (min-width: $break-large) {
display: none;
}
}
&--horizontal {
@media screen and (max-width: $break-small) {
display: none;
}
}
}
&__contents {
display: flex;
justify-content: space-between;
flex-flow: row nowrap;
width: 100%;
@media screen and (max-width: 575px) {
height: 100%;
}
@media screen and (min-width: 576px) {
width: 85vw;
}
@media screen and (min-width: 769px) {
width: 80vw;
}
@media screen and (min-width: 1281px) {
width: 62vw;
}
}
&__logo-container {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
}
&__account-menu-container {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
&__network-component-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
}

120
ui/app/components/currency-input/currency-input.component.js
View File

@ -1,120 +0,0 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import UnitInput from '../unit-input'
import CurrencyDisplay from '../currency-display'
import { getValueFromWeiHex, getWeiHexFromDecimalValue } from '../../helpers/conversions.util'
import { ETH } from '../../constants/common'
/**
* Component that allows user to enter currency values as a number, and props receive a converted
* hex value in WEI. props.value, used as a default or forced value, should be a hex value, which
* gets converted into a decimal value depending on the currency (ETH or Fiat).
*/
export default class CurrencyInput extends PureComponent {
static propTypes = {
conversionRate: PropTypes.number,
currentCurrency: PropTypes.string,
onChange: PropTypes.func,
onBlur: PropTypes.func,
suffix: PropTypes.string,
useFiat: PropTypes.bool,
value: PropTypes.string,
}
constructor (props) {
super(props)
const { value: hexValue } = props
const decimalValue = hexValue ? this.getDecimalValue(props) : 0
this.state = {
decimalValue,
hexValue,
}
}
componentDidUpdate (prevProps) {
const { value: prevPropsHexValue } = prevProps
const { value: propsHexValue } = this.props
const { hexValue: stateHexValue } = this.state
if (prevPropsHexValue !== propsHexValue && propsHexValue !== stateHexValue) {
const decimalValue = this.getDecimalValue(this.props)
this.setState({ hexValue: propsHexValue, decimalValue })
}
}
getDecimalValue (props) {
const { value: hexValue, useFiat, currentCurrency, conversionRate } = props
const decimalValueString = useFiat
? getValueFromWeiHex({
value: hexValue, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
})
: getValueFromWeiHex({
value: hexValue, toCurrency: ETH, numberOfDecimals: 6,
})
return Number(decimalValueString) || 0
}
handleChange = decimalValue => {
const { useFiat, currentCurrency: fromCurrency, conversionRate, onChange } = this.props
const hexValue = useFiat
? getWeiHexFromDecimalValue({
value: decimalValue, fromCurrency, conversionRate, invertConversionRate: true,
})
: getWeiHexFromDecimalValue({
value: decimalValue, fromCurrency: ETH, fromDenomination: ETH, conversionRate,
})
this.setState({ hexValue, decimalValue })
onChange(hexValue)
}
handleBlur = () => {
this.props.onBlur(this.state.hexValue)
}
renderConversionComponent () {
const { useFiat, currentCurrency } = this.props
const { hexValue } = this.state
let currency, numberOfDecimals
if (useFiat) {
// Display ETH
currency = ETH
numberOfDecimals = 6
} else {
// Display Fiat
currency = currentCurrency
numberOfDecimals = 2
}
return (
<CurrencyDisplay
className="currency-input__conversion-component"
currency={currency}
value={hexValue}
numberOfDecimals={numberOfDecimals}
/>
)
}
render () {
const { suffix, ...restProps } = this.props
const { decimalValue } = this.state
return (
<UnitInput
{...restProps}
suffix={suffix}
onChange={this.handleChange}
onBlur={this.handleBlur}
value={decimalValue}
>
{ this.renderConversionComponent() }
</UnitInput>
)
}
}

27
ui/app/components/currency-input/currency-input.container.js
View File

@ -1,27 +0,0 @@
import { connect } from 'react-redux'
import CurrencyInput from './currency-input.component'
import { ETH } from '../../constants/common'
const mapStateToProps = state => {
const { metamask: { currentCurrency, conversionRate } } = state
return {
currentCurrency,
conversionRate,
}
}
const mergeProps = (stateProps, dispatchProps, ownProps) => {
const { currentCurrency } = stateProps
const { useFiat } = ownProps
const suffix = useFiat ? currentCurrency.toUpperCase() : ETH
return {
...stateProps,
...dispatchProps,
...ownProps,
suffix,
}
}
export default connect(mapStateToProps, null, mergeProps)(CurrencyInput)

1
ui/app/components/currency-input/index.js
View File

@ -1 +0,0 @@
export { default } from './currency-input.container'

7
ui/app/components/currency-input/index.scss
View File

@ -1,7 +0,0 @@
.currency-input {
&__conversion-component {
font-size: 12px;
line-height: 12px;
padding-left: 1px;
}
}

239
ui/app/components/currency-input/tests/currency-input.component.test.js
View File

@ -1,239 +0,0 @@
import React from 'react'
import assert from 'assert'
import { shallow, mount } from 'enzyme'
import sinon from 'sinon'
import { Provider } from 'react-redux'
import configureMockStore from 'redux-mock-store'
import CurrencyInput from '../currency-input.component'
import UnitInput from '../../unit-input'
import CurrencyDisplay from '../../currency-display'
describe('CurrencyInput Component', () => {
describe('rendering', () => {
it('should render properly without a suffix', () => {
const wrapper = shallow(
<CurrencyInput />
)
assert.ok(wrapper)
assert.equal(wrapper.find(UnitInput).length, 1)
})
it('should render properly with a suffix', () => {
const mockStore = {
metamask: {
currentCurrency: 'usd',
conversionRate: 231.06,
},
}
const store = configureMockStore()(mockStore)
const wrapper = mount(
<Provider store={store}>
<CurrencyInput
suffix="ETH"
/>
</Provider>
)
assert.ok(wrapper)
assert.equal(wrapper.find('.unit-input__suffix').length, 1)
assert.equal(wrapper.find('.unit-input__suffix').text(), 'ETH')
assert.equal(wrapper.find(CurrencyDisplay).length, 1)
})
it('should render properly with an ETH value', () => {
const mockStore = {
metamask: {
currentCurrency: 'usd',
conversionRate: 231.06,
},
}
const store = configureMockStore()(mockStore)
const wrapper = mount(
<Provider store={store}>
<CurrencyInput
value="de0b6b3a7640000"
suffix="ETH"
currentCurrency="usd"
conversionRate={231.06}
/>
</Provider>
)
assert.ok(wrapper)
const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
assert.equal(currencyInputInstance.state.decimalValue, 1)
assert.equal(currencyInputInstance.state.hexValue, 'de0b6b3a7640000')
assert.equal(wrapper.find('.unit-input__suffix').length, 1)
assert.equal(wrapper.find('.unit-input__suffix').text(), 'ETH')
assert.equal(wrapper.find('.unit-input__input').props().value, '1')
assert.equal(wrapper.find('.currency-display-component').text(), '$231.06 USD')
})
it('should render properly with a fiat value', () => {
const mockStore = {
metamask: {
currentCurrency: 'usd',
conversionRate: 231.06,
},
}
const store = configureMockStore()(mockStore)
const wrapper = mount(
<Provider store={store}>
<CurrencyInput
value="f602f2234d0ea"
suffix="USD"
useFiat
currentCurrency="usd"
conversionRate={231.06}
/>
</Provider>
)
assert.ok(wrapper)
const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
assert.equal(currencyInputInstance.state.decimalValue, 1)
assert.equal(currencyInputInstance.state.hexValue, 'f602f2234d0ea')
assert.equal(wrapper.find('.unit-input__suffix').length, 1)
assert.equal(wrapper.find('.unit-input__suffix').text(), 'USD')
assert.equal(wrapper.find('.unit-input__input').props().value, '1')
assert.equal(wrapper.find('.currency-display-component').text(), '0.004328 ETH')
})
})
describe('handling actions', () => {
const handleChangeSpy = sinon.spy()
const handleBlurSpy = sinon.spy()
afterEach(() => {
handleChangeSpy.resetHistory()
handleBlurSpy.resetHistory()
})
it('should call onChange and onBlur on input changes with the hex value for ETH', () => {
const mockStore = {
metamask: {
currentCurrency: 'usd',
conversionRate: 231.06,
},
}
const store = configureMockStore()(mockStore)
const wrapper = mount(
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
suffix="ETH"
currentCurrency="usd"
conversionRate={231.06}
/>
</Provider>
)
assert.ok(wrapper)
assert.equal(handleChangeSpy.callCount, 0)
assert.equal(handleBlurSpy.callCount, 0)
const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
assert.equal(currencyInputInstance.state.decimalValue, 0)
assert.equal(currencyInputInstance.state.hexValue, undefined)
assert.equal(wrapper.find('.currency-display-component').text(), '$0.00 USD')
const input = wrapper.find('input')
assert.equal(input.props().value, 0)
input.simulate('change', { target: { value: 1 } })
assert.equal(handleChangeSpy.callCount, 1)
assert.ok(handleChangeSpy.calledWith('de0b6b3a7640000'))
assert.equal(wrapper.find('.currency-display-component').text(), '$231.06 USD')
assert.equal(currencyInputInstance.state.decimalValue, 1)
assert.equal(currencyInputInstance.state.hexValue, 'de0b6b3a7640000')
assert.equal(handleBlurSpy.callCount, 0)
input.simulate('blur')
assert.equal(handleBlurSpy.callCount, 1)
assert.ok(handleBlurSpy.calledWith('de0b6b3a7640000'))
})
it('should call onChange and onBlur on input changes with the hex value for fiat', () => {
const mockStore = {
metamask: {
currentCurrency: 'usd',
conversionRate: 231.06,
},
}
const store = configureMockStore()(mockStore)
const wrapper = mount(
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
suffix="USD"
currentCurrency="usd"
conversionRate={231.06}
useFiat
/>
</Provider>
)
assert.ok(wrapper)
assert.equal(handleChangeSpy.callCount, 0)
assert.equal(handleBlurSpy.callCount, 0)
const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
assert.equal(currencyInputInstance.state.decimalValue, 0)
assert.equal(currencyInputInstance.state.hexValue, undefined)
assert.equal(wrapper.find('.currency-display-component').text(), '0 ETH')
const input = wrapper.find('input')
assert.equal(input.props().value, 0)
input.simulate('change', { target: { value: 1 } })
assert.equal(handleChangeSpy.callCount, 1)
assert.ok(handleChangeSpy.calledWith('f602f2234d0ea'))
assert.equal(wrapper.find('.currency-display-component').text(), '0.004328 ETH')
assert.equal(currencyInputInstance.state.decimalValue, 1)
assert.equal(currencyInputInstance.state.hexValue, 'f602f2234d0ea')
assert.equal(handleBlurSpy.callCount, 0)
input.simulate('blur')
assert.equal(handleBlurSpy.callCount, 1)
assert.ok(handleBlurSpy.calledWith('f602f2234d0ea'))
})
it('should change the state and pass in a new decimalValue when props.value changes', () => {
const mockStore = {
metamask: {
currentCurrency: 'usd',
conversionRate: 231.06,
},
}
const store = configureMockStore()(mockStore)
const wrapper = shallow(
<Provider store={store}>
<CurrencyInput
onChange={handleChangeSpy}
onBlur={handleBlurSpy}
suffix="USD"
currentCurrency="usd"
conversionRate={231.06}
useFiat
/>
</Provider>
)
assert.ok(wrapper)
const currencyInputInstance = wrapper.find(CurrencyInput).dive()
assert.equal(currencyInputInstance.state('decimalValue'), 0)
assert.equal(currencyInputInstance.state('hexValue'), undefined)
assert.equal(currencyInputInstance.find(UnitInput).props().value, 0)
currencyInputInstance.setProps({ value: '1ec05e43e72400' })
currencyInputInstance.update()
assert.equal(currencyInputInstance.state('decimalValue'), 2)
assert.equal(currencyInputInstance.state('hexValue'), '1ec05e43e72400')
assert.equal(currencyInputInstance.find(UnitInput).props().value, 2)
})
})
})

55
ui/app/components/currency-input/tests/currency-input.container.test.js
View File

@ -1,55 +0,0 @@
import assert from 'assert'
import proxyquire from 'proxyquire'
let mapStateToProps, mergeProps
proxyquire('../currency-input.container.js', {
'react-redux': {
connect: (ms, md, mp) => {
mapStateToProps = ms
mergeProps = mp
return () => ({})
},
},
})
describe('CurrencyInput container', () => {
describe('mapStateToProps()', () => {
it('should return the correct props', () => {
const mockState = {
metamask: {
conversionRate: 280.45,
currentCurrency: 'usd',
},
}
assert.deepEqual(mapStateToProps(mockState), {
conversionRate: 280.45,
currentCurrency: 'usd',
})
})
})
describe('mergeProps()', () => {
it('should return the correct props', () => {
const mockStateProps = {
conversionRate: 280.45,
currentCurrency: 'usd',
}
const mockDispatchProps = {}
assert.deepEqual(mergeProps(mockStateProps, mockDispatchProps, { useFiat: true }), {
conversionRate: 280.45,
currentCurrency: 'usd',
useFiat: true,
suffix: 'USD',
})
assert.deepEqual(mergeProps(mockStateProps, mockDispatchProps, {}), {
conversionRate: 280.45,
currentCurrency: 'usd',
suffix: 'ETH',
})
})
})
})

59
ui/app/components/index.scss
View File

@ -1,59 +0,0 @@
@import './app-header/index';
@import './add-token-button/index';
@import './button-group/index';
@import './card/index';
@import './confirm-page-container/index';
@import './currency-input/index';
@import './currency-display/index';
@import './error-message/index';
@import './export-text-container/index';
@import './info-box/index';
@import './menu-bar/index';
@import './modal/index';
@import './modals/index';
@import './network-display/index';
@import './page-container/index';
@import './pages/index';
@import './selected-account/index';
@import './sender-to-recipient/index';
@import './tabs/index';
@import './transaction-activity-log/index';
@import './transaction-breakdown/index';
@import './transaction-view/index';
@import './transaction-view-balance/index';
@import './transaction-list/index';
@import './transaction-list-item/index';
@import './transaction-list-item-details/index';
@import './transaction-status/index';
@import './app-header/index';
@import './sidebars/index';
@import './unit-input/index';

1
ui/app/components/menu-bar/index.js
View File

@ -1 +0,0 @@
export { default } from './menu-bar.container'

23
ui/app/components/menu-bar/index.scss
View File

@ -1,23 +0,0 @@
.menu-bar {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex: 0 0 auto;
margin-bottom: 16px;
padding: 5px;
border-bottom: 1px solid #e5e5e5;
&__sidebar-button {
font-size: 1.25rem;
cursor: pointer;
padding: 10px;
}
&__open-in-browser {
cursor: pointer;
display: flex;
justify-content: center;
padding: 10px;
}
}

63
ui/app/components/menu-bar/menu-bar.component.js
View File

@ -1,63 +0,0 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Tooltip from '../tooltip'
import SelectedAccount from '../selected-account'
import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js'
export default class MenuBar extends PureComponent {
static contextTypes = {
t: PropTypes.func,
}
static propTypes = {
hideSidebar: PropTypes.func,
isMascara: PropTypes.bool,
sidebarOpen: PropTypes.bool,
showSidebar: PropTypes.func,
}
state = { accountDetailsMenuOpen: false }
render () {
const { t } = this.context
const { isMascara, sidebarOpen, hideSidebar, showSidebar } = this.props
const { accountDetailsMenuOpen } = this.state
return (
<div className="menu-bar">
<Tooltip
title={t('menu')}
position="bottom"
>
<div
className="fa fa-bars menu-bar__sidebar-button"
onClick={() => sidebarOpen ? hideSidebar() : showSidebar()}
/>
</Tooltip>
<SelectedAccount />
{
!isMascara && (
<Tooltip
title={t('accountOptions')}
position="bottom"
>
<div
className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
onClick={() => this.setState({ accountDetailsMenuOpen: true })}
>
</div>
</Tooltip>
)
}
{
accountDetailsMenuOpen && (
<AccountDetailsDropdown
className="menu-bar__account-details-dropdown"
onClose={() => this.setState({ accountDetailsMenuOpen: false })}
/>
)
}
</div>
)
}
}

26
ui/app/components/menu-bar/menu-bar.container.js
View File

@ -1,26 +0,0 @@
import { connect } from 'react-redux'
import MenuBar from './menu-bar.component'
import { showSidebar, hideSidebar } from '../../actions'
const mapStateToProps = state => {
const { appState: { sidebar: { isOpen }, isMascara } } = state
return {
sidebarOpen: isOpen,
isMascara,
}
}
const mapDispatchToProps = dispatch => {
return {
showSidebar: () => {
dispatch(showSidebar({
transitionName: 'sidebar-right',
type: 'wallet-view',
}))
},
hideSidebar: () => dispatch(hideSidebar()),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MenuBar)

154
ui/app/components/network.js
View File

@ -1,154 +0,0 @@
const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const classnames = require('classnames')
const inherits = require('util').inherits
const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
Network.contextTypes = {
t: PropTypes.func,
}
module.exports = connect()(Network)
inherits(Network, Component)
function Network () {
Component.call(this)
}
Network.prototype.render = function () {
const props = this.props
const context = this.context
const networkNumber = props.network
let providerName
try {
providerName = props.provider.type
} catch (e) {
providerName = null
}
let iconName, hoverText
if (networkNumber === 'loading') {
return h('span.pointer.network-indicator', {
style: {
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
},
onClick: (event) => this.props.onClick(event),
}, [
h('img', {
title: context.t('attemptingConnect'),
style: {
width: '27px',
},
src: 'images/loading.svg',
}),
])
} else if (providerName === 'mainnet') {
hoverText = context.t('mainnet')
iconName = 'ethereum-network'
} else if (providerName === 'ropsten') {
hoverText = context.t('ropsten')
iconName = 'ropsten-test-network'
} else if (parseInt(networkNumber) === 3) {
hoverText = context.t('ropsten')
iconName = 'ropsten-test-network'
} else if (providerName === 'kovan') {
hoverText = context.t('kovan')
iconName = 'kovan-test-network'
} else if (providerName === 'rinkeby') {
hoverText = context.t('rinkeby')
iconName = 'rinkeby-test-network'
} else if (providerName === 'poa') {
hoverText = context.t('poa')
iconName = 'poa-network'
} else {
hoverText = context.t('unknownNetwork')
iconName = 'unknown-private-network'
}
return (
h('div.network-component.pointer', {
className: classnames({
'network-component--disabled': this.props.disabled,
'ethereum-network': providerName === 'mainnet',
'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
'kovan-test-network': providerName === 'kovan',
'rinkeby-test-network': providerName === 'rinkeby',
'poa-network': providerName === 'poa',
}),
title: hoverText,
onClick: (event) => {
if (!this.props.disabled) {
this.props.onClick(event)
}
},
}, [
(function () {
switch (iconName) {
case 'ethereum-network':
return h('.network-indicator', [
h(NetworkDropdownIcon, {
backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2',
}),
h('.network-name', context.t('mainnet')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
case 'ropsten-test-network':
return h('.network-indicator', [
h(NetworkDropdownIcon, {
backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50',
}),
h('.network-name', context.t('ropsten')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
case 'kovan-test-network':
return h('.network-indicator', [
h(NetworkDropdownIcon, {
backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3',
}),
h('.network-name', context.t('kovan')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
case 'rinkeby-test-network':
return h('.network-indicator', [
h(NetworkDropdownIcon, {
backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e',
}),
h('.network-name', context.t('rinkeby')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
case 'poa-network':
return h('.network-indicator', [
h(NetworkDropdownIcon, {
backgroundColor: '#5c34a2', // $tulip-tree
nonSelectBackgroundColor: '#5c34a2',
}),
h('.network-name', context.t('poa')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
default:
return h('.network-indicator', [
h('i.fa.fa-question-circle.fa-lg', {
style: {
margin: '10px',
color: 'rgb(125, 128, 130)',
},
}),
h('.network-name', context.t('privateNetwork')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'),
])
}
})(),
])
)
}

1
ui/app/components/pages/settings/index.js
View File

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

80
ui/app/components/pages/settings/index.scss
View File

@ -1,80 +0,0 @@
@import './info-tab/index';
@import './settings-tab/index';
.settings-page {
position: relative;
background: $white;
display: flex;
flex-flow: column nowrap;
&__header {
padding: 25px 25px 0;
}
&__close-button::after {
content: '\00D7';
font-size: 40px;
color: $dusty-gray;
position: absolute;
top: 25px;
right: 30px;
cursor: pointer;
}
&__content {
padding: 25px;
height: auto;
overflow: auto;
}
&__content-row {
display: flex;
flex-direction: row;
padding: 10px 0 20px;
@media screen and (max-width: 575px) {
flex-direction: column;
padding: 10px 0;
}
}
&__content-item {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding: 0 5px;
min-height: 71px;
@media screen and (max-width: 575px) {
height: initial;
padding: 5px 0;
}
&--without-height {
height: initial;
}
}
&__content-label {
text-transform: capitalize;
}
&__content-description {
font-size: 14px;
color: $dusty-gray;
padding-top: 5px;
}
&__content-item-col {
max-width: 300px;
display: flex;
flex-direction: column;
@media screen and (max-width: 575px) {
max-width: 100%;
width: 100%;
}
}
}

1
ui/app/components/pages/settings/info-tab/index.js
View File

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

56
ui/app/components/pages/settings/info-tab/index.scss
View File

@ -1,56 +0,0 @@
.info-tab {
&__logo-wrapper {
height: 80px;
margin-bottom: 20px;
}
&__logo {
max-height: 100%;
max-width: 100%;
}
&__item {
padding: 10px 0;
}
&__link-header {
padding-bottom: 15px;
@media screen and (max-width: 575px) {
padding-bottom: 5px;
}
}
&__link-item {
padding: 15px 0;
@media screen and (max-width: 575px) {
padding: 5px 0;
}
}
&__link-text {
color: $curious-blue;
}
&__version-number {
padding-top: 5px;
font-size: 13px;
color: $dusty-gray;
}
&__separator {
margin: 15px 0;
width: 80px;
border-color: $alto;
border: none;
height: 1px;
background-color: $alto;
color: $alto;
}
&__about {
color: $dusty-gray;
margin-bottom: 15px;
}
}

136
ui/app/components/pages/settings/info-tab/info-tab.component.js
View File

@ -1,136 +0,0 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
export default class InfoTab extends PureComponent {
state = {
version: global.platform.getVersion(),
}
static propTypes = {
tab: PropTypes.string,
metamask: PropTypes.object,
setCurrentCurrency: PropTypes.func,
setRpcTarget: PropTypes.func,
displayWarning: PropTypes.func,
revealSeedConfirmation: PropTypes.func,
warning: PropTypes.string,
location: PropTypes.object,
history: PropTypes.object,
}
static contextTypes = {
t: PropTypes.func,
}
renderInfoLinks () {
const { t } = this.context
return (
<div className="settings-page__content-item settings-page__content-item--without-height">
<div className="info-tab__link-header">
{ t('links') }
</div>
<div className="info-tab__link-item">
<a
href="https://metamask.io/privacy.html"
target="_blank"
rel="noopener noreferrer"
>
<span className="info-tab__link-text">
{ t('privacyMsg') }
</span>
</a>
</div>
<div className="info-tab__link-item">
<a
href="https://metamask.io/terms.html"
target="_blank"
rel="noopener noreferrer"
>
<span className="info-tab__link-text">
{ t('terms') }
</span>
</a>
</div>
<div className="info-tab__link-item">
<a
href="https://metamask.io/attributions.html"
target="_blank"
rel="noopener noreferrer"
>
<span className="info-tab__link-text">
{ t('attributions') }
</span>
</a>
</div>
<hr className="info-tab__separator" />
<div className="info-tab__link-item">
<a
href="https://support.metamask.io"
target="_blank"
rel="noopener noreferrer"
>
<span className="info-tab__link-text">
{ t('supportCenter') }
</span>
</a>
</div>
<div className="info-tab__link-item">
<a
href="https://metamask.io/"
target="_blank"
rel="noopener noreferrer"
>
<span className="info-tab__link-text">
{ t('visitWebSite') }
</span>
</a>
</div>
<div className="info-tab__link-item">
<a
href="mailto:help@metamask.io?subject=Feedback"
target="_blank"
rel="noopener noreferrer"
>
<span className="info-tab__link-text">
{ t('emailUs') }
</span>
</a>
</div>
</div>
)
}
render () {
const { t } = this.context
return (
<div className="settings-page__content">
<div className="settings-page__content-row">
<div className="settings-page__content-item settings-page__content-item--without-height">
<div className="info-tab__logo-wrapper">
<img
src="images/info-logo.png"
className="info-tab__logo"
/>
</div>
<div className="info-tab__item">
<div className="info-tab__version-header">
{ t('metamaskVersion') }
</div>
<div className="info-tab__version-number">
{ this.state.version }
</div>
</div>
<div className="info-tab__item">
<div className="info-tab__about">
{ t('builtInCalifornia') }
</div>
</div>
</div>
{ this.renderInfoLinks() }
</div>
</div>
)
}
}

1
ui/app/components/pages/settings/settings-tab/index.js
View File

@ -1 +0,0 @@
export { default } from './settings-tab.container'

69
ui/app/components/pages/settings/settings-tab/index.scss
View File

@ -1,69 +0,0 @@
.settings-tab {
&__error {
padding-bottom: 20px;
text-align: center;
color: $crimson;
}
&__rpc-save-button {
align-self: flex-end;
padding: 5px;
text-transform: uppercase;
color: $dusty-gray;
cursor: pointer;
}
&__rpc-save-button {
align-self: flex-end;
padding: 5px;
text-transform: uppercase;
color: $dusty-gray;
cursor: pointer;
}
&__button--red {
border-color: lighten($monzo, 10%);
color: $monzo;
&:active {
background: lighten($monzo, 55%);
border-color: $monzo;
}
&:hover {
border-color: $monzo;
}
}
&__button--orange {
border-color: lighten($ecstasy, 20%);
color: $ecstasy;
&:active {
background: lighten($ecstasy, 40%);
border-color: $ecstasy;
}
&:hover {
border-color: $ecstasy;
}
}
&__radio-buttons {
display: flex;
align-items: center;
}
&__radio-button {
display: flex;
align-items: center;
&:not(:last-child) {
margin-right: 16px;
}
}
&__radio-label {
padding-left: 4px;
}
}

413
ui/app/components/pages/settings/settings-tab/settings-tab.component.js
View File

@ -1,413 +0,0 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import infuraCurrencies from '../../../../infura-conversion.json'
import validUrl from 'valid-url'
import { exportAsFile } from '../../../../util'
import SimpleDropdown from '../../../dropdowns/simple-dropdown'
import ToggleButton from 'react-toggle-button'
import { REVEAL_SEED_ROUTE } from '../../../../routes'
import locales from '../../../../../../app/_locales/index.json'
import TextField from '../../../text-field'
import Button from '../../../button'
const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
})
const infuraCurrencyOptions = sortedCurrencies.map(({ quote: { code, name } }) => {
return {
displayValue: `${code.toUpperCase()} - ${name}`,
key: code,
value: code,
}
})
const localeOptions = locales.map(locale => {
return {
displayValue: `${locale.name}`,
key: locale.code,
value: locale.code,
}
})
export default class SettingsTab extends PureComponent {
static contextTypes = {
t: PropTypes.func,
}
static propTypes = {
metamask: PropTypes.object,
setUseBlockie: PropTypes.func,
setHexDataFeatureFlag: PropTypes.func,
setCurrentCurrency: PropTypes.func,
setRpcTarget: PropTypes.func,
delRpcTarget: PropTypes.func,
displayWarning: PropTypes.func,
revealSeedConfirmation: PropTypes.func,
setFeatureFlagToBeta: PropTypes.func,
showResetAccountConfirmationModal: PropTypes.func,
warning: PropTypes.string,
history: PropTypes.object,
isMascara: PropTypes.bool,
updateCurrentLocale: PropTypes.func,
currentLocale: PropTypes.string,
useBlockie: PropTypes.bool,
sendHexData: PropTypes.bool,
currentCurrency: PropTypes.string,
conversionDate: PropTypes.number,
useETHAsPrimaryCurrency: PropTypes.bool,
setUseETHAsPrimaryCurrencyPreference: PropTypes.func,
}
state = {
newRpc: '',
}
renderCurrentConversion () {
const { t } = this.context
const { currentCurrency, conversionDate, setCurrentCurrency } = this.props
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{ t('currentConversion') }</span>
<span className="settings-page__content-description">
{ t('updatedWithDate', [Date(conversionDate)]) }
</span>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<SimpleDropdown
placeholder={t('selectCurrency')}
options={infuraCurrencyOptions}
selectedOption={currentCurrency}
onSelect={newCurrency => setCurrentCurrency(newCurrency)}
/>
</div>
</div>
</div>
)
}
renderCurrentLocale () {
const { t } = this.context
const { updateCurrentLocale, currentLocale } = this.props
const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span className="settings-page__content-label">
{ t('currentLanguage') }
</span>
<span className="settings-page__content-description">
{ currentLocaleName }
</span>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<SimpleDropdown
placeholder={t('selectLocale')}
options={localeOptions}
selectedOption={currentLocale}
onSelect={async newLocale => updateCurrentLocale(newLocale)}
/>
</div>
</div>
</div>
)
}
renderNewRpcUrl () {
const { t } = this.context
const { newRpc } = this.state
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{ t('newRPC') }</span>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<TextField
type="text"
id="new-rpc"
placeholder={t('newRPC')}
value={newRpc}
onChange={e => this.setState({ newRpc: e.target.value })}
onKeyPress={e => {
if (e.key === 'Enter') {
this.validateRpc(newRpc)
}
}}
fullWidth
margin="none"
/>
<div
className="settings-tab__rpc-save-button"
onClick={e => {
e.preventDefault()
this.validateRpc(newRpc)
}}
>
{ t('save') }
</div>
</div>
</div>
</div>
)
}
validateRpc (newRpc) {
const { setRpcTarget, displayWarning } = this.props
if (validUrl.isWebUri(newRpc)) {
setRpcTarget(newRpc)
} else {
const appendedRpc = `http://${newRpc}`
if (validUrl.isWebUri(appendedRpc)) {
displayWarning(this.context.t('uriErrorMsg'))
} else {
displayWarning(this.context.t('invalidRPC'))
}
}
}
renderStateLogs () {
const { t } = this.context
const { displayWarning } = this.props
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{ t('stateLogs') }</span>
<span className="settings-page__content-description">
{ t('stateLogsDescription') }
</span>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="primary"
large
onClick={() => {
window.logStateString((err, result) => {
if (err) {
displayWarning(t('stateLogError'))
} else {
exportAsFile('MetaMask State Logs.json', result)
}
})
}}
>
{ t('downloadStateLogs') }
</Button>
</div>
</div>
</div>
)
}
renderSeedWords () {
const { t } = this.context
const { history } = this.props
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{ t('revealSeedWords') }</span>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="secondary"
large
onClick={event => {
event.preventDefault()
history.push(REVEAL_SEED_ROUTE)
}}
>
{ t('revealSeedWords') }
</Button>
</div>
</div>
</div>
)
}
renderOldUI () {
const { t } = this.context
const { setFeatureFlagToBeta } = this.props
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{ t('useOldUI') }</span>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="secondary"
large
className="settings-tab__button--orange"
onClick={event => {
event.preventDefault()
setFeatureFlagToBeta()
}}
>
{ t('useOldUI') }
</Button>
</div>
</div>
</div>
)
}
renderResetAccount () {
const { t } = this.context
const { showResetAccountConfirmationModal } = this.props
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{ t('resetAccount') }</span>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<Button
type="secondary"
large
className="settings-tab__button--orange"
onClick={event => {
event.preventDefault()
showResetAccountConfirmationModal()
}}
>
{ t('resetAccount') }
</Button>
</div>
</div>
</div>
)
}
renderBlockieOptIn () {
const { useBlockie, setUseBlockie } = this.props
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{ this.context.t('blockiesIdenticon') }</span>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={useBlockie}
onToggle={value => setUseBlockie(!value)}
activeLabel=""
inactiveLabel=""
/>
</div>
</div>
</div>
)
}
renderHexDataOptIn () {
const { t } = this.context
const { sendHexData, setHexDataFeatureFlag } = this.props
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{ t('showHexData') }</span>
<div className="settings-page__content-description">
{ t('showHexDataDescription') }
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={sendHexData}
onToggle={value => setHexDataFeatureFlag(!value)}
activeLabel=""
inactiveLabel=""
/>
</div>
</div>
</div>
)
}
renderUseEthAsPrimaryCurrency () {
const { t } = this.context
const { useETHAsPrimaryCurrency, setUseETHAsPrimaryCurrencyPreference } = this.props
return (
<div className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{ t('primaryCurrencySetting') }</span>
<div className="settings-page__content-description">
{ t('primaryCurrencySettingDescription') }
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<div className="settings-tab__radio-buttons">
<div className="settings-tab__radio-button">
<input
type="radio"
id="eth-primary-currency"
onChange={() => setUseETHAsPrimaryCurrencyPreference(true)}
checked={Boolean(useETHAsPrimaryCurrency)}
/>
<label
htmlFor="eth-primary-currency"
className="settings-tab__radio-label"
>
{ t('eth') }
</label>
</div>
<div className="settings-tab__radio-button">
<input
type="radio"
id="fiat-primary-currency"
onChange={() => setUseETHAsPrimaryCurrencyPreference(false)}
checked={!useETHAsPrimaryCurrency}
/>
<label
htmlFor="fiat-primary-currency"
className="settings-tab__radio-label"
>
{ t('fiat') }
</label>
</div>
</div>
</div>
</div>
</div>
)
}
render () {
const { warning, isMascara } = this.props
return (
<div className="settings-page__content">
{ warning && <div className="settings-tab__error">{ warning }</div> }
{ this.renderCurrentConversion() }
{ this.renderUseEthAsPrimaryCurrency() }
{ this.renderCurrentLocale() }
{ this.renderNewRpcUrl() }
{ this.renderStateLogs() }
{ this.renderSeedWords() }
{ !isMascara && this.renderOldUI() }
{ this.renderResetAccount() }
{ this.renderBlockieOptIn() }
{ this.renderHexDataOptIn() }
</div>
)
}
}

66
ui/app/components/pages/settings/settings-tab/settings-tab.container.js
View File

@ -1,66 +0,0 @@
import SettingsTab from './settings-tab.component'
import { compose } from 'recompose'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import {
setCurrentCurrency,
setRpcTarget,
displayWarning,
revealSeedConfirmation,
setUseBlockie,
updateCurrentLocale,
setFeatureFlag,
showModal,
setUseETHAsPrimaryCurrencyPreference,
} from '../../../../actions'
import { preferencesSelector } from '../../../../selectors'
const mapStateToProps = state => {
const { appState: { warning }, metamask } = state
const {
currentCurrency,
conversionDate,
useBlockie,
featureFlags: { sendHexData } = {},
provider = {},
isMascara,
currentLocale,
} = metamask
const { useETHAsPrimaryCurrency } = preferencesSelector(state)
return {
warning,
isMascara,
currentLocale,
currentCurrency,
conversionDate,
useBlockie,
sendHexData,
provider,
useETHAsPrimaryCurrency,
}
}
const mapDispatchToProps = dispatch => {
return {
setCurrentCurrency: currency => dispatch(setCurrentCurrency(currency)),
setRpcTarget: newRpc => dispatch(setRpcTarget(newRpc)),
displayWarning: warning => dispatch(displayWarning(warning)),
revealSeedConfirmation: () => dispatch(revealSeedConfirmation()),
setUseBlockie: value => dispatch(setUseBlockie(value)),
updateCurrentLocale: key => dispatch(updateCurrentLocale(key)),
setFeatureFlagToBeta: () => {
return dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
},
setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),
setUseETHAsPrimaryCurrencyPreference: value => {
return dispatch(setUseETHAsPrimaryCurrencyPreference(value))
},
}
}
export default compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
)(SettingsTab)

54
ui/app/components/pages/settings/settings.component.js
View File

@ -1,54 +0,0 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Switch, Route, matchPath } from 'react-router-dom'
import TabBar from '../../tab-bar'
import SettingsTab from './settings-tab'
import InfoTab from './info-tab'
import { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } from '../../../routes'
export default class SettingsPage extends PureComponent {
static propTypes = {
location: PropTypes.object,
history: PropTypes.object,
t: PropTypes.func,
}
static contextTypes = {
t: PropTypes.func,
}
render () {
const { history, location } = this.props
return (
<div className="main-container settings-page">
<div className="settings-page__header">
<div
className="settings-page__close-button"
onClick={() => history.push(DEFAULT_ROUTE)}
/>
<TabBar
tabs={[
{ content: this.context.t('settings'), key: SETTINGS_ROUTE },
{ content: this.context.t('info'), key: INFO_ROUTE },
]}
isActive={key => matchPath(location.pathname, { path: key, exact: true })}
onSelect={key => history.push(key)}
/>
</div>
<Switch>
<Route
exact
path={INFO_ROUTE}
component={InfoTab}
/>
<Route
exact
path={SETTINGS_ROUTE}
component={SettingsTab}
/>
</Switch>
</div>
)
}
}

307
ui/app/components/signature-request.js
View File

@ -1,307 +0,0 @@
const Component = require('react').Component
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const inherits = require('util').inherits
const Identicon = require('./identicon')
const connect = require('react-redux').connect
const ethUtil = require('ethereumjs-util')
const classnames = require('classnames')
const { compose } = require('recompose')
const { withRouter } = require('react-router-dom')
const { ObjectInspector } = require('react-inspector')
const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
const actions = require('../actions')
const { conversionUtil } = require('../conversion-util')
const {
getSelectedAccount,
getCurrentAccountWithSendEtherInfo,
getSelectedAddress,
accountsWithSendEtherInfoSelector,
conversionRateSelector,
} = require('../selectors.js')
import { clearConfirmTransaction } from '../ducks/confirm-transaction.duck'
import Button from './button'
const { DEFAULT_ROUTE } = require('../routes')
function mapStateToProps (state) {
return {
balance: getSelectedAccount(state).balance,
selectedAccount: getCurrentAccountWithSendEtherInfo(state),
selectedAddress: getSelectedAddress(state),
requester: null,
requesterAddress: null,
accounts: accountsWithSendEtherInfoSelector(state),
conversionRate: conversionRateSelector(state),
}
}
function mapDispatchToProps (dispatch) {
return {
goHome: () => dispatch(actions.goHome()),
clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
}
}
SignatureRequest.contextTypes = {
t: PropTypes.func,
}
module.exports = compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
)(SignatureRequest)
inherits(SignatureRequest, Component)
function SignatureRequest (props) {
Component.call(this)
this.state = {
selectedAccount: props.selectedAccount,
accountDropdownOpen: false,
}
}
SignatureRequest.prototype.renderHeader = function () {
return h('div.request-signature__header', [
h('div.request-signature__header-background'),
h('div.request-signature__header__text', this.context.t('sigRequest')),
h('div.request-signature__header__tip-container', [
h('div.request-signature__header__tip'),
]),
])
}
SignatureRequest.prototype.renderAccountDropdown = function () {
const {
selectedAccount,
accountDropdownOpen,
} = this.state
const {
accounts,
} = this.props
return h('div.request-signature__account', [
h('div.request-signature__account-text', [this.context.t('account') + ':']),
h(AccountDropdownMini, {
selectedAccount,
accounts,
onSelect: selectedAccount => this.setState({ selectedAccount }),
dropdownOpen: accountDropdownOpen,
openDropdown: () => this.setState({ accountDropdownOpen: true }),
closeDropdown: () => this.setState({ accountDropdownOpen: false }),
}),
])
}
SignatureRequest.prototype.renderBalance = function () {
const { balance, conversionRate } = this.props
const balanceInEther = conversionUtil(balance, {
fromNumericBase: 'hex',
toNumericBase: 'dec',
fromDenomination: 'WEI',
numberOfDecimals: 6,
conversionRate,
})
return h('div.request-signature__balance', [
h('div.request-signature__balance-text', `${this.context.t('balance')}:`),
h('div.request-signature__balance-value', `${balanceInEther} ETH`),
])
}
SignatureRequest.prototype.renderAccountInfo = function () {
return h('div.request-signature__account-info', [
this.renderAccountDropdown(),
this.renderRequestIcon(),
this.renderBalance(),
])
}
SignatureRequest.prototype.renderRequestIcon = function () {
const { requesterAddress } = this.props
return h('div.request-signature__request-icon', [
h(Identicon, {
diameter: 40,
address: requesterAddress,
}),
])
}
SignatureRequest.prototype.renderRequestInfo = function () {
return h('div.request-signature__request-info', [
h('div.request-signature__headline', [
this.context.t('yourSigRequested'),
]),
])
}
SignatureRequest.prototype.msgHexToText = function (hex) {
try {
const stripped = ethUtil.stripHexPrefix(hex)
const buff = Buffer.from(stripped, 'hex')
return buff.toString('utf8')
} catch (e) {
return hex
}
}
// eslint-disable-next-line react/display-name
SignatureRequest.prototype.renderTypedDataV3 = function (data) {
const { domain, message } = JSON.parse(data)
return [
h('div.request-signature__typed-container', [
domain ? h('div', [
h('h1', 'Domain'),
h(ObjectInspector, { data: domain, expandLevel: 1, name: 'domain' }),
]) : '',
message ? h('div', [
h('h1', 'Message'),
h(ObjectInspector, { data: message, expandLevel: 1, name: 'message' }),
]) : '',
]),
]
}
SignatureRequest.prototype.renderBody = function () {
let rows
let notice = this.context.t('youSign') + ':'
const { txData } = this.props
const { type, msgParams: { data, version } } = txData
if (type === 'personal_sign') {
rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }]
} else if (type === 'eth_signTypedData') {
rows = data
} else if (type === 'eth_sign') {
rows = [{ name: this.context.t('message'), value: data }]
notice = [this.context.t('signNotice'),
h('span.request-signature__help-link', {
onClick: () => {
global.platform.openWindow({
url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
})
},
}, this.context.t('learnMore'))]
}
return h('div.request-signature__body', {}, [
this.renderAccountInfo(),
this.renderRequestInfo(),
h('div.request-signature__notice', {
className: classnames({
'request-signature__notice': type === 'personal_sign' || type === 'eth_signTypedData',
'request-signature__warning': type === 'eth_sign',
}),
}, [notice]),
h('div.request-signature__rows', type === 'eth_signTypedData' && version === 'V3' ?
this.renderTypedDataV3(data) :
rows.map(({ name, value }) => {
if (typeof value === 'boolean') {
value = value.toString()
}
return h('div.request-signature__row', [
h('div.request-signature__row-title', [`${name}:`]),
h('div.request-signature__row-value', value),
])
}),
),
])
}
SignatureRequest.prototype.renderFooter = function () {
const {
signPersonalMessage,
signTypedMessage,
cancelPersonalMessage,
cancelTypedMessage,
signMessage,
cancelMessage,
} = this.props
const { txData } = this.props
const { type } = txData
let cancel
let sign
if (type === 'personal_sign') {
cancel = cancelPersonalMessage
sign = signPersonalMessage
} else if (type === 'eth_signTypedData') {
cancel = cancelTypedMessage
sign = signTypedMessage
} else if (type === 'eth_sign') {
cancel = cancelMessage
sign = signMessage
}
return h('div.request-signature__footer', [
h(Button, {
type: 'default',
large: true,
className: 'request-signature__footer__cancel-button',
onClick: event => {
cancel(event).then(() => {
this.props.clearConfirmTransaction()
this.props.history.push(DEFAULT_ROUTE)
})
},
}, this.context.t('cancel')),
h(Button, {
type: 'primary',
large: true,
onClick: event => {
sign(event).then(() => {
this.props.clearConfirmTransaction()
this.props.history.push(DEFAULT_ROUTE)
})
},
}, this.context.t('sign')),
])
}
SignatureRequest.prototype.render = function () {
return (
h('div.request-signature__container', [
this.renderHeader(),
this.renderBody(),
this.renderFooter(),
])
)
}

230
ui/app/components/wallet-view.js
View File

@ -1,230 +0,0 @@
const Component = require('react').Component
const PropTypes = require('prop-types')
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const { withRouter } = require('react-router-dom')
const { compose } = require('recompose')
const inherits = require('util').inherits
const classnames = require('classnames')
const { checksumAddress } = require('../util')
const Identicon = require('./identicon')
// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
const Tooltip = require('./tooltip-v2.js').default
const copyToClipboard = require('copy-to-clipboard')
const actions = require('../actions')
const BalanceComponent = require('./balance-component')
const TokenList = require('./token-list')
const selectors = require('../selectors')
const { ADD_TOKEN_ROUTE } = require('../routes')
import AddTokenButton from './add-token-button'
module.exports = compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
)(WalletView)
WalletView.contextTypes = {
t: PropTypes.func,
}
WalletView.defaultProps = {
responsiveDisplayClassname: '',
}
function mapStateToProps (state) {
return {
network: state.metamask.network,
sidebarOpen: state.appState.sidebar.isOpen,
identities: state.metamask.identities,
accounts: selectors.getMetaMaskAccounts(state),
tokens: state.metamask.tokens,
keyrings: state.metamask.keyrings,
selectedAddress: selectors.getSelectedAddress(state),
selectedAccount: selectors.getSelectedAccount(state),
selectedTokenAddress: state.metamask.selectedTokenAddress,
}
}
function mapDispatchToProps (dispatch) {
return {
showSendPage: () => dispatch(actions.showSendPage()),
hideSidebar: () => dispatch(actions.hideSidebar()),
unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
showAccountDetailModal: () => {
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
},
showAddTokenPage: () => dispatch(actions.showAddTokenPage()),
}
}
inherits(WalletView, Component)
function WalletView () {
Component.call(this)
this.state = {
hasCopied: false,
copyToClipboardPressed: false,
}
}
WalletView.prototype.renderWalletBalance = function () {
const {
selectedTokenAddress,
selectedAccount,
unsetSelectedToken,
hideSidebar,
sidebarOpen,
} = this.props
const selectedClass = selectedTokenAddress
? ''
: 'wallet-balance-wrapper--active'
const className = `flex-column wallet-balance-wrapper ${selectedClass}`
return h('div', { className }, [
h('div.wallet-balance',
{
onClick: () => {
unsetSelectedToken()
selectedTokenAddress && sidebarOpen && hideSidebar()
},
},
[
h(BalanceComponent, {
balanceValue: selectedAccount ? selectedAccount.balance : '',
style: {},
}),
]
),
])
}
WalletView.prototype.renderAddToken = function () {
const {
sidebarOpen,
hideSidebar,
history,
} = this.props
return h(AddTokenButton, {
onClick () {
history.push(ADD_TOKEN_ROUTE)
if (sidebarOpen) {
hideSidebar()
}
},
})
}
WalletView.prototype.render = function () {
const {
responsiveDisplayClassname,
selectedAddress,
keyrings,
showAccountDetailModal,
hideSidebar,
identities,
} = this.props
// temporary logs + fake extra wallets
const checksummedAddress = checksumAddress(selectedAddress)
if (!selectedAddress) {
throw new Error('selectedAddress should not be ' + String(selectedAddress))
}
const keyring = keyrings.find((kr) => {
return kr.accounts.includes(selectedAddress)
})
let label = ''
let type
if (keyring) {
type = keyring.type
if (type !== 'HD Key Tree') {
if (type.toLowerCase().search('hardware') !== -1) {
label = this.context.t('hardware')
} else {
label = this.context.t('imported')
}
}
}
return h('div.wallet-view.flex-column', {
style: {},
className: responsiveDisplayClassname,
}, [
// TODO: Separate component: wallet account details
h('div.flex-column.wallet-view-account-details', {
style: {},
}, [
h('div.wallet-view__sidebar-close', {
onClick: hideSidebar,
}),
h('div.wallet-view__keyring-label.allcaps', label),
h('div.flex-column.flex-center.wallet-view__name-container', {
style: { margin: '0 auto' },
onClick: showAccountDetailModal,
}, [
h(Identicon, {
diameter: 54,
address: checksummedAddress,
}),
h('span.account-name', {
style: {},
}, [
identities[selectedAddress].name,
]),
h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')),
]),
]),
h(Tooltip, {
position: 'bottom',
title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'),
wrapperClassName: 'wallet-view__tooltip',
}, [
h('button.wallet-view__address', {
className: classnames({
'wallet-view__address__pressed': this.state.copyToClipboardPressed,
}),
onClick: () => {
copyToClipboard(checksummedAddress)
this.setState({ hasCopied: true })
setTimeout(() => this.setState({ hasCopied: false }), 3000)
},
onMouseDown: () => {
this.setState({ copyToClipboardPressed: true })
},
onMouseUp: () => {
this.setState({ copyToClipboardPressed: false })
},
}, [
`${checksummedAddress.slice(0, 6)}...${checksummedAddress.slice(-4)}`,
h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
]),
]),
this.renderWalletBalance(),
h(TokenList),
this.renderAddToken(),
])
}
// TODO: Extra wallets, for dev testing. Remove when PRing to master.
// const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [
// h('div.wallet-balance', {}, [
// h(BalanceComponent, {
// balanceValue: selectedAccount.balance,
// style: {},
// }),
// ]),
// ])

207
ui/app/first-time/init-menu.js
View File

@ -1,207 +0,0 @@
const { EventEmitter } = require('events')
const { Component } = require('react')
const PropTypes = require('prop-types')
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const actions = require('../actions')
const Tooltip = require('../components/tooltip')
const { RESTORE_VAULT_ROUTE, DEFAULT_ROUTE } = require('../routes')
const { getEnvironmentType } = require('../../../app/scripts/lib/util')
const { ENVIRONMENT_TYPE_POPUP } = require('../../../app/scripts/lib/enums')
class InitializeMenuScreen extends Component {
constructor (props) {
super(props)
this.animationEventEmitter = new EventEmitter()
this.state = {
warning: null,
}
}
componentWillMount () {
const { isInitialized, isUnlocked, history } = this.props
if (isInitialized || isUnlocked) {
history.push(DEFAULT_ROUTE)
}
}
componentDidMount () {
document.getElementById('password-box').focus()
}
render () {
const { warning } = this.state
return (
h('.initialize-screen.flex-column.flex-center', [
h('h1', {
style: {
fontSize: '1.3em',
textTransform: 'uppercase',
color: '#7F8082',
marginBottom: 10,
},
}, this.context.t('appName')),
h('div', [
h('h3', {
style: {
fontSize: '0.8em',
color: '#7F8082',
display: 'inline',
},
}, this.context.t('encryptNewDen')),
h(Tooltip, {
title: this.context.t('denExplainer'),
}, [
h('i.fa.fa-question-circle.pointer', {
style: {
fontSize: '18px',
position: 'relative',
color: 'rgb(247, 134, 28)',
top: '2px',
marginLeft: '4px',
},
}),
]),
]),
h('span.error.in-progress-notification', warning),
// password
h('input.large-input.letter-spacey', {
type: 'password',
id: 'password-box',
placeholder: this.context.t('newPassword'),
onInput: this.inputChanged.bind(this),
style: {
width: 260,
marginTop: 12,
},
}),
// confirm password
h('input.large-input.letter-spacey', {
type: 'password',
id: 'password-box-confirm',
placeholder: this.context.t('confirmPassword'),
onKeyPress: this.createVaultOnEnter.bind(this),
onInput: this.inputChanged.bind(this),
style: {
width: 260,
marginTop: 16,
},
}),
h('button.primary', {
onClick: this.createNewVaultAndKeychain.bind(this),
style: {
margin: 12,
},
}, this.context.t('createDen')),
h('.flex-row.flex-center.flex-grow', [
h('p.pointer', {
onClick: () => this.showRestoreVault(),
style: {
fontSize: '0.8em',
color: 'rgb(247, 134, 28)',
textDecoration: 'underline',
},
}, this.context.t('importDen')),
]),
h('.flex-row.flex-center.flex-grow', [
h('p.pointer', {
onClick: this.showOldUI.bind(this),
style: {
fontSize: '0.8em',
color: '#aeaeae',
textDecoration: 'underline',
marginTop: '32px',
},
}, this.context.t('classicInterface')),
]),
])
)
}
createVaultOnEnter (event) {
if (event.key === 'Enter') {
event.preventDefault()
this.createNewVaultAndKeychain()
}
}
createNewVaultAndKeychain () {
const { history } = this.props
var passwordBox = document.getElementById('password-box')
var password = passwordBox.value
var passwordConfirmBox = document.getElementById('password-box-confirm')
var passwordConfirm = passwordConfirmBox.value
this.setState({ warning: null })
if (password.length < 8) {
this.setState({ warning: this.context.t('passwordShort') })
return
}
if (password !== passwordConfirm) {
this.setState({ warning: this.context.t('passwordMismatch') })
return
}
this.props.createNewVaultAndKeychain(password)
.then(() => history.push(DEFAULT_ROUTE))
}
showRestoreVault () {
this.props.markPasswordForgotten()
if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
global.platform.openExtensionInBrowser()
}
this.props.history.push(RESTORE_VAULT_ROUTE)
}
showOldUI () {
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
}
}
InitializeMenuScreen.propTypes = {
history: PropTypes.object,
isInitialized: PropTypes.bool,
isUnlocked: PropTypes.bool,
createNewVaultAndKeychain: PropTypes.func,
markPasswordForgotten: PropTypes.func,
dispatch: PropTypes.func,
}
InitializeMenuScreen.contextTypes = {
t: PropTypes.func,
}
const mapStateToProps = state => {
const { metamask: { isInitialized, isUnlocked } } = state
return {
isInitialized,
isUnlocked,
}
}
const mapDispatchToProps = dispatch => {
return {
createNewVaultAndKeychain: password => dispatch(actions.createNewVaultAndKeychain(password)),
markPasswordForgotten: () => dispatch(actions.markPasswordForgotten()),
}
}
module.exports = connect(mapStateToProps, mapDispatchToProps)(InitializeMenuScreen)

20
ui/app/select-app.js
View File

@ -3,7 +3,6 @@ const Component = require('react').Component
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const { HashRouter } = require('react-router-dom')
const App = require('./app')
const OldApp = require('../../old-ui/app/app')
const { autoAddToBetaUI } = require('./selectors')
const { setFeatureFlag } = require('./actions')
@ -11,7 +10,6 @@ const I18nProvider = require('./i18n-provider')
function mapStateToProps (state) {
return {
betaUI: state.metamask.featureFlags.betaUI,
autoAdd: autoAddToBetaUI(state),
isUnlocked: state.metamask.isUnlocked,
isMascara: state.metamask.isMascara,
@ -60,17 +58,9 @@ SelectedApp.prototype.render = function () {
// const { betaUI, isMascara, firstTime } = this.props
// const Selected = betaUI || isMascara || firstTime ? App : OldApp
const { betaUI, isMascara } = this.props
return betaUI || isMascara
? h(HashRouter, {
hashType: 'noslash',
}, [
h(I18nProvider, [ h(App) ]),
])
: h(HashRouter, {
hashType: 'noslash',
}, [
h(I18nProvider, [ h(OldApp) ]),
])
return h(HashRouter, {
hashType: 'noslash',
}, [
h(I18nProvider, [ h(OldApp) ]),
])
}

123
ui/example.js
View File

@ -1,123 +0,0 @@
const injectCss = require('inject-css')
const MetaMaskUi = require('./index.js')
const MetaMaskUiCss = require('./css.js')
const EventEmitter = require('events').EventEmitter
// account management
var identities = {
'0x1113462427bcc9133bb46e88bcbe39cd7ef0e111': {
name: 'Walrus',
img: 'QmW6hcwYzXrNkuHrpvo58YeZvbZxUddv69ATSHY3BHpPdd',
address: '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111',
balance: 220,
txCount: 4,
},
'0x222462427bcc9133bb46e88bcbe39cd7ef0e7222': {
name: 'Tardus',
img: 'QmQYaRdrf2EhRhJWaHnts8Meu1mZiXrNib5W1P6cYmXWRL',
address: '0x222462427bcc9133bb46e88bcbe39cd7ef0e7222',
balance: 10.005,
txCount: 16,
},
'0x333462427bcc9133bb46e88bcbe39cd7ef0e7333': {
name: 'Gambler',
img: 'QmW6hcwYzXrNkuHrpvo58YeZvbZxUddv69ATSHY3BHpPdd',
address: '0x333462427bcc9133bb46e88bcbe39cd7ef0e7333',
balance: 0.000001,
txCount: 1,
},
}
var unapprovedTxs = {}
addUnconfTx({
from: '0x222462427bcc9133bb46e88bcbe39cd7ef0e7222',
to: '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111',
value: '0x123',
})
addUnconfTx({
from: '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111',
to: '0x333462427bcc9133bb46e88bcbe39cd7ef0e7333',
value: '0x0000',
data: '0x000462427bcc9133bb46e88bcbe39cd7ef0e7000',
})
function addUnconfTx (txParams) {
var time = (new Date()).getTime()
var id = createRandomId()
unapprovedTxs[id] = {
id: id,
txParams: txParams,
time: time,
}
}
var isUnlocked = false
var selectedAccount = null
function getState () {
return {
isUnlocked: isUnlocked,
identities: isUnlocked ? identities : {},
unapprovedTxs: isUnlocked ? unapprovedTxs : {},
selectedAccount: selectedAccount,
}
}
var accountManager = new EventEmitter()
accountManager.getState = function (cb) {
cb(null, getState())
}
accountManager.setLocked = function () {
isUnlocked = false
this._didUpdate()
}
accountManager.submitPassword = function (password, cb) {
if (password === 'test') {
isUnlocked = true
cb(null, getState())
this._didUpdate()
} else {
cb(new Error('Bad password -- try "test"'))
}
}
accountManager.setSelectedAccount = function (address, cb) {
selectedAccount = address
cb(null, getState())
this._didUpdate()
}
accountManager.signTransaction = function (txParams, cb) {
alert('signing tx....')
}
accountManager._didUpdate = function () {
this.emit('update', getState())
}
// start app
var container = document.getElementById('app-content')
var css = MetaMaskUiCss()
injectCss(css)
MetaMaskUi({
container: container,
accountManager: accountManager,
})
// util
function createRandomId () {
// 13 time digits
var datePart = new Date().getTime() * Math.pow(10, 3)
// 3 random digits
var extraPart = Math.floor(Math.random() * Math.pow(10, 3))
// 16 digits
return datePart + extraPart
}

20
ui/index.html
View File

@ -1,20 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nifty Wallet</title>
</head>
<body>
<!-- app content -->
<div id="app-content"></div>
<script src="./bundle.js" type="text/javascript" charset="utf-8"></script>
<!-- design reference -->
<link rel="stylesheet" type="text/css" href="./app/css/debug.css">
<div id="design-container">
<img id="design-img" src="./design/metamask_wfs_jan_13.png">
</div>
</body>
</html>