diff --git a/app/scripts/lib/tx-notification.js b/app/scripts/lib/tx-notification.js
index c7f62408b..75985dee1 100644
--- a/app/scripts/lib/tx-notification.js
+++ b/app/scripts/lib/tx-notification.js
@@ -1,5 +1,5 @@
const createId = require('hat')
-const uiUtils = require('metamask-ui/app/util')
+const uiUtils = require('../../../ui/app/util')
var notificationHandlers = {}
module.exports = createTxNotification
@@ -46,4 +46,4 @@ function createTxNotification(opts){
confirm: opts.confirm,
cancel: opts.cancel,
}
-}
\ No newline at end of file
+}
diff --git a/app/scripts/popup.js b/app/scripts/popup.js
index e6dae0d81..523ecbd8f 100644
--- a/app/scripts/popup.js
+++ b/app/scripts/popup.js
@@ -4,8 +4,8 @@ const async = require('async')
const Multiplex = require('multiplex')
const Dnode = require('dnode')
const Web3 = require('web3')
-const MetaMaskUi = require('metamask-ui')
-const MetaMaskUiCss = require('metamask-ui/css')
+const MetaMaskUi = require('../../ui')
+const MetaMaskUiCss = require('../../ui/css')
const injectCss = require('inject-css')
const PortStream = require('./lib/port-stream.js')
const StreamProvider = require('./lib/stream-provider.js')
@@ -66,7 +66,7 @@ function linkDnode(stream, cb){
// setup push events
accountManager.on = eventEmitter.on.bind(eventEmitter)
cb(null, accountManager)
- })
+ })
}
function getCurrentDomain(cb){
@@ -96,4 +96,4 @@ function setupApp(err, opts){
currentDomain: opts.currentDomain,
})
-}
\ No newline at end of file
+}
diff --git a/gulpfile.js b/gulpfile.js
index 0d72c3d41..dabf49f7c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -31,7 +31,7 @@ gulp.task('copy:images', copyTask({
destination: './dist/images',
}))
gulp.task('copy:reload', copyTask({
- source: './app/scripts/',
+ source: './app/scripts/',
destination: './dist/scripts',
pattern: '/chromereload.js',
}))
@@ -93,7 +93,6 @@ function copyTask(opts){
}
}
-
function bundleTask(opts) {
var browserifyOpts = assign({}, watchify.args, {
entries: ['./app/scripts/'+opts.filename],
@@ -101,6 +100,7 @@ function bundleTask(opts) {
})
var bundler = browserify(browserifyOpts)
+ bundler.transform('brfs')
if (opts.watch) {
bundler = watchify(bundler)
bundler.on('update', performBundle) // on any dep update, runs the bundler
@@ -121,7 +121,7 @@ function bundleTask(opts) {
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
- // Add transformation tasks to the pipeline here.
+ // Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest('./dist/scripts'))
.pipe(livereload())
diff --git a/ui/.gitignore b/ui/.gitignore
new file mode 100644
index 000000000..c6b1254b5
--- /dev/null
+++ b/ui/.gitignore
@@ -0,0 +1,66 @@
+
+# Created by https://www.gitignore.io/api/osx,node
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
diff --git a/ui/README.md b/ui/README.md
new file mode 100644
index 000000000..fdac37f02
--- /dev/null
+++ b/ui/README.md
@@ -0,0 +1,14 @@
+## Installation
+
+```
+git clone git@github.com:MetaMask/metamask-ui.git
+cd metamask-ui
+npm install
+grunt dev
+```
+
+## Testing
+
+Requires `mocha` installed. Run `npm install -g mocha`.
+
+You can either run the test suite once with `npm test`, or you can reload on file changes, by running `mocha watch test/**/**`.
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
new file mode 100644
index 000000000..6ed23d482
--- /dev/null
+++ b/ui/app/account-detail.js
@@ -0,0 +1,154 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const copyToClipboard = require('copy-to-clipboard')
+const actions = require('./actions')
+const AccountPanel = require('./components/account-panel')
+
+module.exports = connect(mapStateToProps)(AccountDetailScreen)
+
+function mapStateToProps(state) {
+ var accountDetail = state.appState.accountDetail
+ return {
+ identities: state.metamask.identities,
+ accounts: state.metamask.accounts,
+ address: state.appState.currentView.context,
+ accountDetail: accountDetail,
+ }
+}
+
+inherits(AccountDetailScreen, Component)
+function AccountDetailScreen() {
+ Component.call(this)
+}
+
+
+AccountDetailScreen.prototype.render = function() {
+ var state = this.props
+ var identity = state.identities[state.address]
+ var account = state.accounts[state.address]
+ var accountDetail = state.accountDetail
+
+ return (
+
+ h('.account-detail-section.flex-column.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: this.navigateToAccounts.bind(this),
+ }),
+ h('h2.page-subtitle', 'Account Detail'),
+ ]),
+
+ // account summary, with embedded action buttons
+ h(AccountPanel, {
+ showFullAddress: true,
+ identity: identity,
+ account: account,
+ }, [
+ h('.flex-row.flex-space-around', [
+ // h('button', 'GET ETH'), DISABLED UNTIL WORKING
+
+ h('button', {
+ onClick: () => {
+ copyToClipboard(identity.address)
+ },
+ }, 'COPY ADDR'),
+
+ h('button', {
+ onClick: () => {
+ this.props.dispatch(actions.showSendPage())
+ },
+ }, 'SEND'),
+
+ h('button', {
+ onClick: () => {
+ this.requestAccountExport(identity.address)
+ },
+ }, 'EXPORT'),
+ ]),
+ ]),
+
+ this.exportedAccount(accountDetail),
+
+ // transaction table
+ /*
+ h('section.flex-column', [
+ h('span', 'your transaction history will go here.'),
+ ]),
+ */
+ ])
+ )
+}
+
+AccountDetailScreen.prototype.navigateToAccounts = function(event){
+ event.stopPropagation()
+ this.props.dispatch(actions.showAccountsPage())
+}
+
+AccountDetailScreen.prototype.exportAccount = function(address) {
+ this.props.dispatch(actions.exportAccount(address))
+}
+
+AccountDetailScreen.prototype.requestAccountExport = function() {
+ this.props.dispatch(actions.requestExportAccount())
+}
+
+AccountDetailScreen.prototype.exportedAccount = function(accountDetail) {
+ if (!accountDetail) return
+ var accountExport = accountDetail.accountExport
+
+ var notExporting = accountExport === 'none'
+ var exportRequested = accountExport === 'requested'
+ var accountExported = accountExport === 'completed'
+
+ if (notExporting) return
+
+ if (exportRequested) {
+ var warning = `Exporting your private key is very dangerous,
+ and you should only do it if you know what you're doing.`
+ var confirmation = `If you're absolutely sure, type "I understand" below and
+ hit Enter.`
+ return h('div', {}, [
+ h('p.error', warning),
+ h('p', confirmation),
+ h('input#exportAccount', {
+ onKeyPress: this.onExportKeyPress.bind(this),
+ })
+ ])
+ }
+
+ if (accountExported) {
+ return h('div.privateKey', {
+
+ }, [
+ h('label', 'Your private key (click to copy):'),
+ h('p.error.cursor-pointer', {
+ style: {
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ webkitUserSelect: 'text',
+ width: '100%',
+ },
+ onClick: function(event) {
+ copyToClipboard(accountDetail.privateKey)
+ }
+ }, accountDetail.privateKey),
+ ])
+ }
+}
+
+AccountDetailScreen.prototype.onExportKeyPress = function(event) {
+ if (event.key !== 'Enter') return
+ event.preventDefault()
+
+ var input = document.getElementById('exportAccount')
+ if (input.value === 'I understand') {
+ this.props.dispatch(actions.exportAccount(this.props.address))
+ } else {
+ input.value = ''
+ input.placeholder = 'Please retype "I understand" exactly.'
+ }
+}
diff --git a/ui/app/accounts.js b/ui/app/accounts.js
new file mode 100644
index 000000000..d35e80678
--- /dev/null
+++ b/ui/app/accounts.js
@@ -0,0 +1,116 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const extend = require('xtend')
+const actions = require('./actions')
+const AccountPanel = require('./components/account-panel')
+const valuesFor = require('./util').valuesFor
+
+module.exports = connect(mapStateToProps)(AccountsScreen)
+
+
+function mapStateToProps(state) {
+ return {
+ accounts: state.metamask.accounts,
+ identities: state.metamask.identities,
+ unconfTxs: state.metamask.unconfTxs,
+ selectedAddress: state.metamask.selectedAddress,
+ currentDomain: state.appState.currentDomain,
+ }
+}
+
+inherits(AccountsScreen, Component)
+function AccountsScreen() {
+ Component.call(this)
+}
+
+
+AccountsScreen.prototype.render = function() {
+ var state = this.props
+ var identityList = valuesFor(state.identities)
+ var unconfTxList = valuesFor(state.unconfTxs)
+ var actions = {
+ onSelect: this.onSelect.bind(this),
+ onShowDetail: this.onShowDetail.bind(this),
+ }
+ return (
+
+ h('.accounts-section.flex-column.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-column.flex-center', [
+ h('h2.page-subtitle', 'Accounts'),
+ ]),
+
+ // current domain
+ /* AUDIT
+ * Temporarily removed
+ * since accounts are currently injected
+ * regardless of the current domain.
+ */
+ h('.current-domain-panel.flex-center.font-small', [
+ h('spam', 'Selected address is visible to all sites you visit.'),
+ // h('span', state.currentDomain),
+ ]),
+
+ // identity selection
+ h('section.identity-section.flex-column', {
+ style: {
+ maxHeight: '290px',
+ overflowY: 'auto',
+ overflowX: 'hidden',
+ }
+ },
+ identityList.map(renderAccountPanel)
+ ),
+
+ unconfTxList.length ? (
+
+ h('.unconftx-link.flex-row.flex-center', {
+ onClick: this.navigateToConfTx.bind(this),
+ }, [
+ h('span', 'Unconfirmed Txs'),
+ h('i.fa.fa-arrow-right.fa-lg'),
+ ])
+
+ ) : (
+ null
+ ),
+
+
+ ])
+
+ )
+
+ function renderAccountPanel(identity){
+ var mayBeFauceting = identity.mayBeFauceting
+ var isSelected = state.selectedAddress === identity.address
+ var account = state.accounts[identity.address]
+ var isFauceting = mayBeFauceting && account.balance === '0x0'
+ var componentState = extend(actions, {
+ identity: identity,
+ account: account,
+ isSelected: isSelected,
+ isFauceting: isFauceting,
+ })
+ return h(AccountPanel, componentState)
+ }
+}
+
+AccountsScreen.prototype.navigateToConfTx = function(){
+ event.stopPropagation()
+ this.props.dispatch(actions.showConfTxPage())
+}
+
+AccountsScreen.prototype.onSelect = function(address, event){
+ event.stopPropagation()
+ // if already selected, deselect
+ if (this.props.selectedAddress === address) address = null
+ this.props.dispatch(actions.setSelectedAddress(address))
+}
+
+AccountsScreen.prototype.onShowDetail = function(address, event){
+ event.stopPropagation()
+ this.props.dispatch(actions.showAccountDetail(address))
+}
diff --git a/ui/app/actions.js b/ui/app/actions.js
new file mode 100644
index 000000000..339c28be3
--- /dev/null
+++ b/ui/app/actions.js
@@ -0,0 +1,418 @@
+var actions = {
+ // remote state
+ UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE',
+ updateMetamaskState: updateMetamaskState,
+ // intialize screen
+ CREATE_NEW_VAULT_IN_PROGRESS: 'CREATE_NEW_VAULT_IN_PROGRESS',
+ SHOW_CREATE_VAULT: 'SHOW_CREATE_VAULT',
+ SHOW_RESTORE_VAULT: 'SHOW_RESTORE_VAULT',
+ SHOW_INIT_MENU: 'SHOW_INIT_MENU',
+ SHOW_NEW_VAULT_SEED: 'SHOW_NEW_VAULT_SEED',
+ SHOW_INFO_PAGE: 'SHOW_INFO_PAGE',
+ RECOVER_FROM_SEED: 'RECOVER_FROM_SEED',
+ CLEAR_SEED_WORD_CACHE: 'CLEAR_SEED_WORD_CACHE',
+ clearSeedWordCache: clearSeedWordCache,
+ recoverFromSeed: recoverFromSeed,
+ unlockMetamask: unlockMetamask,
+ unlockFailed: unlockFailed,
+ showCreateVault: showCreateVault,
+ showRestoreVault: showRestoreVault,
+ showInitializeMenu: showInitializeMenu,
+ createNewVault: createNewVault,
+ createNewVaultInProgress: createNewVaultInProgress,
+ showNewVaultSeed: showNewVaultSeed,
+ showInfoPage: showInfoPage,
+ // unlock screen
+ UNLOCK_IN_PROGRESS: 'UNLOCK_IN_PROGRESS',
+ UNLOCK_FAILED: 'UNLOCK_FAILED',
+ UNLOCK_METAMASK: 'UNLOCK_METAMASK',
+ LOCK_METAMASK: 'LOCK_METAMASK',
+ tryUnlockMetamask: tryUnlockMetamask,
+ lockMetamask: lockMetamask,
+ unlockInProgress: unlockInProgress,
+ // error handling
+ displayWarning: displayWarning,
+ DISPLAY_WARNING: 'DISPLAY_WARNING',
+ HIDE_WARNING: 'HIDE_WARNING',
+ hideWarning: hideWarning,
+ // accounts screen
+ SET_SELECTED_ACCOUNT: 'SET_SELECTED_ACCOUNT',
+ SHOW_ACCOUNT_DETAIL: 'SHOW_ACCOUNT_DETAIL',
+ SHOW_ACCOUNTS_PAGE: 'SHOW_ACCOUNTS_PAGE',
+ SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE',
+ // account detail screen
+ SHOW_SEND_PAGE: 'SHOW_SEND_PAGE',
+ showSendPage: showSendPage,
+ REQUEST_ACCOUNT_EXPORT: 'REQUEST_ACCOUNT_EXPORT',
+ requestExportAccount: requestExportAccount,
+ EXPORT_ACCOUNT: 'EXPORT_ACCOUNT',
+ exportAccount: exportAccount,
+ SHOW_PRIVATE_KEY: 'SHOW_PRIVATE_KEY',
+ showPrivateKey: showPrivateKey,
+ // tx conf screen
+ COMPLETED_TX: 'COMPLETED_TX',
+ TRANSACTION_ERROR: 'TRANSACTION_ERROR',
+ NEXT_TX: 'NEXT_TX',
+ PREVIOUS_TX: 'PREV_TX',
+ setSelectedAddress: setSelectedAddress,
+ signTx: signTx,
+ sendTx: sendTx,
+ cancelTx: cancelTx,
+ completedTx: completedTx,
+ txError: txError,
+ nextTx: nextTx,
+ previousTx: previousTx,
+ // app messages
+ showAccountDetail: showAccountDetail,
+ BACK_TO_ACCOUNT_DETAIL: 'BACK_TO_ACCOUNT_DETAIL',
+ backToAccountDetail: backToAccountDetail,
+ showAccountsPage: showAccountsPage,
+ showConfTxPage: showConfTxPage,
+ confirmSeedWords: confirmSeedWords,
+ // config screen
+ SHOW_CONFIG_PAGE: 'SHOW_CONFIG_PAGE',
+ SET_RPC_TARGET: 'SET_RPC_TARGET',
+ USE_ETHERSCAN_PROVIDER: 'USE_ETHERSCAN_PROVIDER',
+ useEtherscanProvider: useEtherscanProvider,
+ showConfigPage: showConfigPage,
+ setRpcTarget: setRpcTarget,
+ // hacky - need a way to get a reference to account manager
+ _setAccountManager: _setAccountManager,
+ // loading overlay
+ SHOW_LOADING: 'SHOW_LOADING_INDICATION',
+ HIDE_LOADING: 'HIDE_LOADING_INDICATION',
+ showLoadingIndication: showLoadingIndication,
+ hideLoadingIndication: hideLoadingIndication,
+}
+
+module.exports = actions
+
+
+var _accountManager = null
+function _setAccountManager(accountManager){
+ _accountManager = accountManager
+}
+
+// async actions
+
+function tryUnlockMetamask(password) {
+ return (dispatch) => {
+ dispatch(this.unlockInProgress())
+ _accountManager.submitPassword(password, (err) => {
+ dispatch(this.hideLoadingIndication())
+ if (err) {
+ dispatch(this.unlockFailed())
+ } else {
+ dispatch(this.unlockMetamask())
+ dispatch(this.setSelectedAddress())
+ }
+ })
+ }
+}
+
+function createNewVault(password, entropy) {
+ return (dispatch) => {
+ dispatch(this.createNewVaultInProgress())
+ _accountManager.createNewVault(password, entropy, (err, result) => {
+ dispatch(this.showNewVaultSeed(result))
+ })
+ }
+}
+
+function recoverFromSeed(password, seed) {
+ return (dispatch) => {
+ // dispatch(this.createNewVaultInProgress())
+ dispatch(this.showLoadingIndication())
+ _accountManager.recoverFromSeed(password, seed, (err, result) => {
+ if (err) {
+ dispatch(this.hideLoadingIndication())
+ var message = err.message
+ return dispatch(this.displayWarning(err.message))
+ }
+
+ dispatch(this.unlockMetamask())
+ dispatch(this.setSelectedAddress())
+ dispatch(this.updateMetamaskState(result))
+ dispatch(this.hideLoadingIndication())
+ dispatch(this.showAccountsPage())
+ })
+ }
+}
+
+function showInfoPage() {
+ return {
+ type: this.SHOW_INFO_PAGE,
+ }
+}
+
+function setSelectedAddress(address) {
+ return (dispatch) => {
+ _accountManager.setSelectedAddress(address)
+ }
+}
+
+function signTx(txData) {
+ return (dispatch) => {
+ dispatch(this.showLoadingIndication())
+
+ web3.eth.sendTransaction(txData, (err, data) => {
+ dispatch(this.hideLoadingIndication())
+
+ if (err) return dispatch(this.displayWarning(err.message))
+ dispatch(this.hideWarning())
+ dispatch(this.showAccountsPage())
+ })
+ }
+}
+
+function sendTx(txData) {
+ return (dispatch) => {
+ _accountManager.approveTransaction(txData.id, (err) => {
+ if (err) {
+ alert(err.message)
+ dispatch(this.txError(err))
+ return console.error(err.message)
+ }
+ dispatch(this.completedTx(txData.id))
+ })
+ }
+}
+
+function completedTx(id) {
+ return {
+ type: this.COMPLETED_TX,
+ id,
+ }
+}
+
+function txError(err) {
+ return {
+ type: this.TRANSACTION_ERROR,
+ message: err.message,
+ }
+}
+
+function cancelTx(txData){
+ return (dispatch) => {
+ _accountManager.cancelTransaction(txData.id)
+ dispatch(this.showAccountsPage())
+ }
+}
+
+//
+// initialize screen
+//
+
+
+function showCreateVault() {
+ return {
+ type: this.SHOW_CREATE_VAULT,
+ }
+}
+
+function showRestoreVault() {
+ return {
+ type: this.SHOW_RESTORE_VAULT,
+ }
+}
+
+function showInitializeMenu() {
+ return {
+ type: this.SHOW_INIT_MENU,
+ }
+}
+
+function createNewVaultInProgress() {
+ return {
+ type: this.CREATE_NEW_VAULT_IN_PROGRESS,
+ }
+}
+
+function showNewVaultSeed(seed) {
+ return {
+ type: this.SHOW_NEW_VAULT_SEED,
+ value: seed,
+ }
+}
+
+//
+// unlock screen
+//
+
+function unlockInProgress() {
+ return {
+ type: this.UNLOCK_IN_PROGRESS,
+ }
+}
+
+function unlockFailed() {
+ return {
+ type: this.UNLOCK_FAILED,
+ }
+}
+
+function unlockMetamask() {
+ return {
+ type: this.UNLOCK_METAMASK,
+ }
+}
+
+function updateMetamaskState(newState) {
+ return {
+ type: this.UPDATE_METAMASK_STATE,
+ value: newState,
+ }
+}
+
+function lockMetamask() {
+ return (dispatch) => {
+ _accountManager.setLocked((err) => {
+ dispatch({
+ type: this.LOCK_METAMASK,
+ })
+ dispatch(this.hideLoadingIndication())
+ })
+ }
+}
+
+function showAccountDetail(address) {
+ return {
+ type: this.SHOW_ACCOUNT_DETAIL,
+ value: address,
+ }
+}
+
+function backToAccountDetail(address) {
+ return {
+ type: this.BACK_TO_ACCOUNT_DETAIL,
+ value: address,
+ }
+}
+function clearSeedWordCache() {
+ return {
+ type: this.CLEAR_SEED_WORD_CACHE
+ }
+}
+
+function confirmSeedWords() {
+ return (dispatch) => {
+ dispatch(this.showLoadingIndication())
+ _accountManager.clearSeedWordCache((err) => {
+ dispatch(this.clearSeedWordCache())
+ console.log('Seed word cache cleared.')
+ dispatch(this.setSelectedAddress())
+ })
+ }
+}
+
+function showAccountsPage() {
+ return {
+ type: this.SHOW_ACCOUNTS_PAGE,
+ }
+}
+
+function showConfTxPage() {
+ return {
+ type: this.SHOW_CONF_TX_PAGE,
+ }
+}
+
+function nextTx() {
+ return {
+ type: this.NEXT_TX,
+ }
+}
+
+function previousTx() {
+ return {
+ type: this.PREVIOUS_TX,
+ }
+}
+
+function showConfigPage() {
+ return {
+ type: this.SHOW_CONFIG_PAGE,
+ }
+}
+
+//
+// config
+//
+
+function setRpcTarget(newRpc) {
+ _accountManager.setRpcTarget(newRpc)
+ return {
+ type: this.SET_RPC_TARGET,
+ value: newRpc,
+ }
+}
+
+function useEtherscanProvider() {
+ _accountManager.useEtherscanProvider()
+ return {
+ type: this.USE_ETHERSCAN_PROVIDER,
+ }
+}
+
+function showLoadingIndication() {
+ return {
+ type: this.SHOW_LOADING,
+ }
+}
+
+function hideLoadingIndication() {
+ return {
+ type: this.HIDE_LOADING,
+ }
+}
+
+function displayWarning(text) {
+ return {
+ type: this.DISPLAY_WARNING,
+ value: text,
+ }
+}
+
+function hideWarning() {
+ return {
+ type: this.HIDE_WARNING,
+ }
+}
+
+function requestExportAccount() {
+ return {
+ type: this.REQUEST_ACCOUNT_EXPORT,
+ }
+}
+
+function exportAccount(address) {
+ var self = this
+
+ return function(dispatch) {
+ dispatch(self.showLoadingIndication())
+
+ _accountManager.exportAccount(address, function(err, result) {
+ dispatch(self.hideLoadingIndication())
+
+ if (err) {
+ console.error(err)
+ return dispatch(self.displayWarning('Had a problem exporting the account.'))
+ }
+
+ dispatch(self.showPrivateKey(result))
+ })
+ }
+}
+
+function showPrivateKey(key) {
+ return {
+ type: this.SHOW_PRIVATE_KEY,
+ value: key,
+ }
+}
+
+function showSendPage() {
+ return {
+ type: this.SHOW_SEND_PAGE,
+ }
+}
diff --git a/ui/app/app.js b/ui/app/app.js
new file mode 100644
index 000000000..fa375fb7f
--- /dev/null
+++ b/ui/app/app.js
@@ -0,0 +1,242 @@
+const inherits = require('util').inherits
+const React = require('react')
+const Component = require('react').Component
+const PropTypes = require('react').PropTypes
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const extend = require('xtend')
+const actions = require('./actions')
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+// init
+const InitializeMenuScreen = require('./first-time/init-menu')
+const CreateVaultScreen = require('./first-time/create-vault')
+const CreateVaultCompleteScreen = require('./first-time/create-vault-complete')
+const RestoreVaultScreen = require('./first-time/restore-vault')
+// unlock
+const UnlockScreen = require('./unlock')
+// accounts
+const AccountsScreen = require('./accounts')
+const AccountDetailScreen = require('./account-detail')
+const SendTransactionScreen = require('./send')
+const ConfirmTxScreen = require('./conf-tx')
+// other views
+const ConfigScreen = require('./config')
+const InfoScreen = require('./info')
+const LoadingIndicator = require('./loading')
+
+module.exports = connect(mapStateToProps)(App)
+
+
+inherits(App, Component)
+function App() { Component.call(this) }
+
+function mapStateToProps(state) {
+ return {
+ // state from plugin
+ isInitialized: state.metamask.isInitialized,
+ isUnlocked: state.metamask.isUnlocked,
+ currentView: state.appState.currentView,
+ activeAddress: state.appState.activeAddress,
+ transForward: state.appState.transForward,
+ seedWords: state.metamask.seedWords,
+ }
+}
+
+App.prototype.render = function() {
+ // const { selectedReddit, posts, isFetching, lastUpdated } = this.props
+ var state = this.props
+ var view = state.currentView.name
+ var transForward = state.transForward
+ var shouldHaveFooter = true
+ switch (view) {
+ case 'restoreVault':
+ shouldHaveFooter = false;
+ case 'createVault':
+ shouldHaveFooter = false;
+ case 'createVaultComplete':
+ shouldHaveFooter = false;
+ }
+
+ return (
+
+ h('.flex-column.flex-grow.full-height', {
+ style: {
+ // Windows was showing a vertical scroll bar:
+ overflowY: 'hidden',
+ }
+ },
+ [
+
+ h(LoadingIndicator),
+
+ // top row
+ h('.app-header.flex-column.flex-center', {
+ }, [
+ h('h1', 'MetaMask'),
+ ]),
+
+ // panel content
+ h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
+ style: {
+ height: '380px',
+ }
+ }, [
+ h(ReactCSSTransitionGroup, {
+ transitionName: "main",
+ transitionEnterTimeout: 300,
+ transitionLeaveTimeout: 300,
+ }, [
+ this.renderPrimary(),
+ ]),
+ ]),
+
+ // footer
+ h('.app-footer.flex-row.flex-space-around', {
+ style: {
+ display: shouldHaveFooter ? 'flex' : 'none',
+ alignItems: 'center',
+ height: '56px',
+ }
+ }, [
+
+ // settings icon
+ h('i.fa.fa-cog.fa-lg' + (view === 'config' ? '.active' : '.cursor-pointer'), {
+ style: {
+ opacity: state.isUnlocked ? '1.0' : '0.0',
+ transition: 'opacity 200ms ease-in',
+ //transform: `translateX(${state.isUnlocked ? '0px' : '-100px'})`,
+ },
+ onClick: function(ev) {
+ state.dispatch(actions.showConfigPage())
+ },
+ }),
+
+ // toggle
+ onOffToggle({
+ toggleMetamaskActive: this.toggleMetamaskActive.bind(this),
+ isUnlocked: state.isUnlocked,
+ }),
+
+ // help
+ h('i.fa.fa-question.fa-lg.cursor-pointer', {
+ style: {
+ opacity: state.isUnlocked ? '1.0' : '0.0',
+ },
+ onClick() { state.dispatch(actions.showInfoPage()) }
+ }),
+ ]),
+ ])
+ )
+}
+
+App.prototype.toggleMetamaskActive = function(){
+ 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))
+ }
+}
+
+App.prototype.renderPrimary = function(state){
+ var state = this.props
+
+ // If seed words haven't been dismissed yet, show them still.
+ /*
+ if (state.seedWords) {
+ return h(CreateVaultCompleteScreen, {key: 'createVaultComplete'})
+ }
+ */
+
+ // show initialize screen
+ if (!state.isInitialized) {
+
+ // show current view
+ switch (state.currentView.name) {
+
+ case 'createVault':
+ return h(CreateVaultScreen, {key: 'createVault'})
+
+ case 'restoreVault':
+ return h(RestoreVaultScreen, {key: 'restoreVault'})
+
+ default:
+ return h(InitializeMenuScreen, {key: 'menuScreenInit'})
+
+ }
+ }
+
+ // show unlock screen
+ if (!state.isUnlocked) {
+ return h(UnlockScreen, {key: 'locked'})
+ }
+
+ // show current view
+ switch (state.currentView.name) {
+
+ case 'createVaultComplete':
+ return h(CreateVaultCompleteScreen, {key: 'created-vault'})
+
+ case 'accounts':
+ return h(AccountsScreen, {key: 'accounts'})
+
+ case 'accountDetail':
+ return h(AccountDetailScreen, {key: 'account-detail'})
+
+ case 'sendTransaction':
+ return h(SendTransactionScreen, {key: 'send-transaction'})
+
+ case 'confTx':
+ return h(ConfirmTxScreen, {key: 'confirm-tx'})
+
+ case 'config':
+ return h(ConfigScreen, {key: 'config'})
+
+ case 'info':
+ return h(InfoScreen, {key: 'info'})
+
+ case 'createVault':
+ return h(CreateVaultScreen, {key: 'createVault'})
+
+ default:
+ return h(AccountsScreen, {key: 'accounts'})
+ }
+}
+
+function onOffToggle(state){
+ var buttonSize = '50px';
+ var lockWidth = '20px';
+ return (
+ h('.app-toggle.flex-row.flex-center.lock' + (state.isUnlocked ? '.unlocked' : '.locked'), {
+ width: buttonSize,
+ height: buttonSize,
+ }, [
+ h('div', {
+ onClick: state.toggleMetamaskActive,
+ style: {
+ width: lockWidth,
+ height: '' + parseInt(lockWidth) * 1.5 + 'px',
+ position: 'relative',
+ }
+ }, [
+ h('img.lock-top', {
+ src: 'images/lock-top.png',
+ style: {
+ width: lockWidth,
+ position: 'absolute',
+ }
+ }),
+ h('img', {
+ src: 'images/lock-base.png',
+ style: {
+ width: lockWidth,
+ position: 'absolute',
+ }
+ }),
+ ])
+ ])
+ )
+}
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
new file mode 100644
index 000000000..4e433b87d
--- /dev/null
+++ b/ui/app/components/account-panel.js
@@ -0,0 +1,93 @@
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const addressSummary = require('../util').addressSummary
+const formatBalance = require('../util').formatBalance
+
+module.exports = AccountPanel
+
+
+inherits(AccountPanel, Component)
+function AccountPanel() {
+ Component.call(this)
+}
+
+AccountPanel.prototype.render = function() {
+ var state = this.props
+ var identity = state.identity || {}
+ var account = state.account || {}
+ var isFauceting = state.isFauceting
+
+ return (
+
+ h('.identity-panel.flex-row.flex-space-between'+(state.isSelected?'.selected':''), {
+ style: {
+ flex: '1 0 auto',
+ },
+ onClick: state.onSelect && state.onSelect.bind(null, identity.address),
+ }, [
+
+ // account identicon
+ h('.identicon-wrapper.flex-column.select-none', [
+ h('.identicon', {
+ style: { backgroundImage: 'url("https://ipfs.io/ipfs/'+identity.img+'")' }
+ }),
+ h('span.font-small', identity.name),
+ ]),
+
+ // account address, balance
+ h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+ h('.flex-row.flex-space-between', [
+ h('label.font-small', 'ADDRESS'),
+ h('span.font-small', addressSummary(identity.address)),
+ ]),
+
+ balanceOrFaucetingIndication(account, isFauceting),
+
+ // outlet for inserting additional stuff
+ state.children,
+
+ ]),
+
+ // navigate to account detail
+ !state.onShowDetail ? null :
+ h('.arrow-right.cursor-pointer', {
+ onClick: state.onShowDetail && state.onShowDetail.bind(null, identity.address),
+ }, [
+ h('i.fa.fa-chevron-right.fa-lg'),
+ ]),
+ ])
+ )
+}
+
+function balanceOrFaucetingIndication(account, isFauceting) {
+
+ // Temporarily deactivating isFauceting indication
+ // because it shows fauceting for empty restored accounts.
+ if (/*isFauceting*/ false) {
+
+ return h('.flex-row.flex-space-between', [
+ h('span.font-small', {
+ }, [
+ 'Account is auto-funding,',
+ h('br'),
+ 'please wait.'
+ ]),
+ ])
+
+ } else {
+
+ return h('.flex-row.flex-space-between', [
+ h('label.font-small', 'BALANCE'),
+ h('span.font-small', {
+ style: {
+ overflowX: 'hidden',
+ maxWidth: '136px',
+ }
+ }, formatBalance(account.balance)),
+ ])
+
+ }
+}
diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js
new file mode 100644
index 000000000..e043caca1
--- /dev/null
+++ b/ui/app/components/mascot.js
@@ -0,0 +1,65 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const metamaskLogo = require('metamask-logo')
+const getCaretCoordinates = require('textarea-caret')
+const debounce = require('debounce')
+
+module.exports = Mascot
+
+
+inherits(Mascot, Component)
+function Mascot() {
+ Component.call(this)
+ this.logo = metamaskLogo({
+ followMouse: true,
+ pxNotRatio: true,
+ width: 200,
+ height: 200,
+ })
+ if (!this.logo) return
+ this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
+ this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
+}
+
+
+Mascot.prototype.render = function() {
+ // this is a bit hacky
+ // the event emitter is on `this.props`
+ // and we dont get that until render
+ this.handleAnimationEvents()
+
+ return (
+
+ h('#metamask-mascot-container')
+
+ )
+}
+
+Mascot.prototype.componentDidMount = function() {
+ if (!this.logo) return
+ var targetDivId = 'metamask-mascot-container'
+ var container = document.getElementById(targetDivId)
+ container.appendChild(this.logo.canvas)
+}
+
+Mascot.prototype.componentWillUnmount = function() {
+ if (!this.logo) return
+ this.logo.canvas.remove()
+}
+
+Mascot.prototype.handleAnimationEvents = function(){
+ if (!this.logo) return
+ // only setup listeners once
+ if (this.animations) return
+ this.animations = this.props.animationEventEmitter
+ this.animations.on('point', this.lookAt.bind(this))
+ this.animations.on('setFollowMouse', this.logo.setFollowMouse.bind(this.logo))
+}
+
+Mascot.prototype.lookAt = function(target){
+ if (!this.logo) return
+ this.unfollowMouse()
+ this.logo.lookAt(target)
+ this.refollowMouse()
+}
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
new file mode 100644
index 000000000..983070013
--- /dev/null
+++ b/ui/app/conf-tx.js
@@ -0,0 +1,140 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const copyToClipboard = require('copy-to-clipboard')
+const actions = require('./actions')
+const AccountPanel = require('./components/account-panel')
+const valuesFor = require('./util').valuesFor
+const addressSummary = require('./util').addressSummary
+const readableDate = require('./util').readableDate
+const formatBalance = require('./util').formatBalance
+const dataSize = require('./util').dataSize
+
+module.exports = connect(mapStateToProps)(ConfirmTxScreen)
+
+function mapStateToProps(state) {
+ return {
+ identities: state.metamask.identities,
+ accounts: state.metamask.accounts,
+ selectedAddress: state.metamask.selectedAddress,
+ unconfTxs: state.metamask.unconfTxs,
+ index: state.appState.currentView.context,
+ }
+}
+
+inherits(ConfirmTxScreen, Component)
+function ConfirmTxScreen() {
+ Component.call(this)
+}
+
+
+ConfirmTxScreen.prototype.render = function() {
+ var state = this.props
+ var unconfTxList = valuesFor(state.unconfTxs).sort(tx => tx.time)
+ var txData = unconfTxList[state.index] || {}
+ var txParams = txData.txParams || {}
+ var address = txParams.from || state.selectedAddress
+ var identity = state.identities[address] || { address: address }
+ var account = state.accounts[address] || { address: address }
+
+ return (
+
+ h('.unconftx-section.flex-column.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: this.navigateToAccounts.bind(this),
+ }),
+ h('h2.page-subtitle', 'Confirm Transaction'),
+ ]),
+
+ h('h3', {
+ style: {
+ alignSelf: 'center',
+ display: unconfTxList.length > 1 ? 'block' : 'none',
+ },
+ }, [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ style: {
+ display: state.index === 0 ? 'none' : 'inline-block',
+ },
+ onClick: () => state.dispatch(actions.previousTx()),
+ }),
+ ` Transaction ${state.index + 1} of ${unconfTxList.length} `,
+ h('i.fa.fa-arrow-right.fa-lg.cursor-pointer', {
+ style: {
+ display: state.index + 1 === unconfTxList.length ? 'none' : 'inline-block',
+ },
+ onClick: () => state.dispatch(actions.nextTx()),
+ }),
+ ]),
+
+ h(ReactCSSTransitionGroup, {
+ transitionName: "main",
+ transitionEnterTimeout: 300,
+ transitionLeaveTimeout: 300,
+ }, [
+
+ h('.transaction', {
+ key: txData.id,
+ }, [
+
+ // account that will sign
+ h(AccountPanel, {
+ showFullAddress: true,
+ identity: identity,
+ account: account,
+ }),
+
+ // tx data
+ h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+ h('.flex-row.flex-space-between', [
+ h('label.font-small', 'TO ADDRESS'),
+ h('span.font-small', addressSummary(txParams.to)),
+ ]),
+
+ h('.flex-row.flex-space-between', [
+ h('label.font-small', 'DATE'),
+ h('span.font-small', readableDate(txData.time)),
+ ]),
+
+ h('.flex-row.flex-space-between', [
+ h('label.font-small', 'AMOUNT'),
+ h('span.font-small', formatBalance(txParams.value)),
+ ]),
+
+ ]),
+
+ // send + cancel
+ h('.flex-row.flex-space-around', [
+ h('button', {
+ onClick: this.cancelTransaction.bind(this, txData),
+ }, 'Cancel'),
+ h('button', {
+ onClick: this.sendTransaction.bind(this, txData),
+ }, 'Send'),
+ ]),
+ ]),
+ ]),
+ ]) // No comma or semicolon can go here
+ )
+}
+
+ConfirmTxScreen.prototype.sendTransaction = function(txData, event){
+ event.stopPropagation()
+ this.props.dispatch(actions.sendTx(txData))
+}
+
+ConfirmTxScreen.prototype.cancelTransaction = function(txData, event){
+ event.stopPropagation()
+ this.props.dispatch(actions.cancelTx(txData))
+}
+
+ConfirmTxScreen.prototype.navigateToAccounts = function(event){
+ event.stopPropagation()
+ this.props.dispatch(actions.showAccountsPage())
+}
diff --git a/ui/app/config.js b/ui/app/config.js
new file mode 100644
index 000000000..33d87bcc2
--- /dev/null
+++ b/ui/app/config.js
@@ -0,0 +1,103 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('./actions')
+
+module.exports = connect(mapStateToProps)(ConfigScreen)
+
+function mapStateToProps(state) {
+ return {
+ rpc: state.metamask.rpcTarget,
+ metamask: state.metamask,
+ }
+}
+
+inherits(ConfigScreen, Component)
+function ConfigScreen() {
+ Component.call(this)
+}
+
+
+ConfigScreen.prototype.render = function() {
+ var state = this.props
+ var rpc = state.rpc
+ var metamaskState = state.metamask
+
+ return (
+ h('.flex-column.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: (event) => {
+ state.dispatch(actions.showAccountsPage())
+ }
+ }),
+ h('h2.page-subtitle', 'Configuration'),
+ ]),
+
+ // conf view
+ h('.flex-column.flex-justify-center.flex-grow.select-none', [
+ h('.flex-space-around', {
+ style: {
+ padding: '20px',
+ }
+ }, [
+
+ currentProviderDisplay(metamaskState),
+
+
+ h('div', [
+ h('input', {
+ placeholder: 'New RPC URL',
+ style: {
+ width: '100%',
+ },
+ onKeyPress(event) {
+ if (event.key === 'Enter') {
+ var element = event.target
+ var newRpc = element.value
+ state.dispatch(actions.setRpcTarget(newRpc))
+ }
+ }
+ }),
+ ]),
+
+ h('div', [
+ h('button', {
+ style: {
+ alignSelf: 'center',
+ },
+ onClick(event) {
+ event.preventDefault()
+ state.dispatch(actions.setRpcTarget('https://rpc.metamask.io/'))
+ }
+ }, 'Use Main Network')
+ ]),
+
+ h('div', [
+ h('button', {
+ style: {
+ alignSelf: 'center',
+ },
+ onClick(event) {
+ event.preventDefault()
+ state.dispatch(actions.setRpcTarget('https://testrpc.metamask.io/'))
+ }
+ }, 'Use Morden Test Network')
+ ]),
+
+ ]),
+ ]),
+ ])
+ )
+}
+
+function currentProviderDisplay(metamaskState) {
+ var rpc = metamaskState.rpcTarget
+ return h('div', [
+ h('h3', {style: { fontWeight: 'bold' }}, 'Currently using RPC'),
+ h('p', rpc)
+ ])
+}
diff --git a/ui/app/css/debug.css b/ui/app/css/debug.css
new file mode 100644
index 000000000..3e125bcd4
--- /dev/null
+++ b/ui/app/css/debug.css
@@ -0,0 +1,21 @@
+/*
+debug / dev
+*/
+
+#app-content {
+ border: 2px solid green;
+}
+
+#design-container {
+ position: absolute;
+ left: 360px;
+ top: -42px;
+ width: calc(100vw - 360px);
+ height: 100vh;
+ overflow: scroll;
+}
+
+#design-container img {
+ width: 2000px;
+ margin-right: 600px;
+}
\ No newline at end of file
diff --git a/ui/app/css/fonts.css b/ui/app/css/fonts.css
new file mode 100644
index 000000000..dd1a755fb
--- /dev/null
+++ b/ui/app/css/fonts.css
@@ -0,0 +1,2 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:300,500);
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
\ No newline at end of file
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
new file mode 100644
index 000000000..4871a650f
--- /dev/null
+++ b/ui/app/css/index.css
@@ -0,0 +1,489 @@
+/*
+faint orange (textfield shades) #FAF6F0
+light orange (button shades): #F5C26D
+dark orange (text): #F5A623
+borders/font/any gray: #4A4A4A
+*/
+
+/*
+application specific styles
+*/
+
+* {
+ box-sizing: border-box;
+}
+
+html, body {
+ /*font-family: 'Open Sans', Arial, sans-serif;*/
+ font-family: 'Roboto', 'Noto', sans-serif;
+ color: #4D4D4D;
+ font-weight: 300;
+ line-height: 1.4em;
+}
+
+#app-content {
+ overflow-x: hidden;
+ min-width: 357px;
+ width: 360px;
+ height: 500px;
+}
+
+button {
+ outline: none;
+ cursor: pointer;
+ margin: 10px;
+ padding: 6px;
+ border: none;
+ border-radius: 3px;
+ background: #F7861C;
+ font-weight: 500;
+ color: white;
+ transform-origin: center center;
+ transition: transform 50ms ease-in;
+}
+button:hover {
+ transform: scale(1.1);
+}
+button:active {
+ transform: scale(0.95);
+}
+
+button.primary {
+ margin: 10px;
+ padding: 6px;
+ border: none;
+ border-radius: 3px;
+ background: #F7861C;
+ font-weight: 500;
+ color: white;
+}
+
+input, textarea {
+ width: 300px;
+ padding: 6px;
+ border-radius: 6px;
+ border-style: solid;
+ outline: none;
+ border: 1px solid #F5A623;
+ background: #FAF6F0;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+a:hover{
+ color: #df6b0e;
+}
+
+/*
+app
+*/
+
+.active {
+ color: #909090;
+}
+
+button.btn-thin {
+ border: 1px solid;
+ border-color: #4D4D4D;
+ color: #4D4D4D;
+ background: rgb(255, 174, 41);
+ border-radius: 4px;
+ min-width: 200px;
+ margin: 12px 0;
+ padding: 6px;
+ font-size: 13px;
+}
+
+.app-header {
+ padding-top: 20px;
+}
+
+.app-header h1 {
+ font-size: 2em;
+ font-weight: 300;
+ height: 42px;
+}
+
+h2.page-subtitle {
+ font-size: 1em;
+ font-weight: 500;
+ height: 24px;
+ color: #F3C83E;
+}
+
+.app-primary {
+}
+
+.app-footer {
+ padding-bottom: 10px;
+ align-items: center;
+}
+
+.identicon {
+ height: 46px;
+ width: 46px;
+ background-size: cover;
+ border-radius: 100%;
+ border: 3px solid gray;
+}
+
+textarea.twelve-word-phrase {
+ margin-top: 20px;
+ width: 300px;
+ height: 180px;
+ font-size: 16px;
+ background: #FAF6F0;
+ resize: none;
+}
+
+/*
+app sections
+*/
+
+/* initialize */
+
+.initialize-screen hr {
+ width: 60px;
+ margin: 12px;
+ border-color: #F3C83E;
+ border-style: solid;
+}
+
+.initialize-screen input[type="password"], .initialize-screen textarea {
+ width: 300px;
+ padding: 6px;
+ border-radius: 6px;
+ border-style: solid;
+ outline: none;
+ border: 1px solid #F5A623;
+ background: #FAF6F0;
+}
+
+.initialize-screen label {
+ margin-top: 20px;
+}
+
+.initialize-screen button.create-vault {
+ margin-top: 40px;
+}
+
+.initialize-screen .warning {
+ font-size: 14px;
+ margin: 0 16px;
+}
+
+/* unlock */
+.error {
+ color: #E20202;
+}
+.lock {
+ width: 50px;
+ height: 50px;
+}
+
+.lock.locked {
+ transform: scale(1.5);
+ opacity: 0.0;
+ transition: opacity 400ms ease-in, transform 400ms ease-in;
+}
+.lock.unlocked {
+ transform: scale(1);
+ opacity: 1;
+ transition: opacity 500ms ease-out, transform 500ms ease-out, background 200ms ease-in;
+}
+
+.lock.locked .lock-top {
+ transform: scaleX(1) translateX(0);
+ transition: transform 250ms ease-in;
+}
+.lock.unlocked .lock-top {
+ transform: scaleX(-1) translateX(-12px);
+ transition: transform 250ms ease-in;
+}
+.lock.unlocked:hover {
+ border-radius: 4px;
+ background: #e5e5e5;
+ border: 1px solid #b1b1b1;
+}
+.lock.unlocked:active {
+ background: #c3c3c3;
+}
+
+.section-title .fa-arrow-left {
+ margin: -2px 8px 0px -8px;
+}
+
+.unlock-screen label {
+ color: #F3C83E;
+ font-weight: 500;
+}
+
+.unlock-screen input[type=password] {
+ width: 60%;
+ height: 22px;
+ padding: 2px;
+ border-radius: 4px;
+ border: 2px solid #F3C83E;
+ background: #FAF6F0;
+}
+
+.unlock-screen input[type=password]:focus {
+ outline: none;
+ border: 3px solid #F3C83E;
+}
+
+/* accounts */
+
+.accounts-section {
+ margin: 0 20px;
+}
+
+.current-domain-panel {
+ border: 1px solid #B7B7B7;
+}
+
+.unconftx-link {
+ margin-top: 24px;
+ cursor: pointer;
+}
+
+.unconftx-link .fa-arrow-right {
+ margin: 0px -8px 0px 8px;
+}
+
+/* identity panel */
+
+.identity-panel {
+ font-weight: 500;
+}
+
+.identity-panel .identicon-wrapper {
+ margin: 4px;
+ margin-top: 8px;
+}
+
+.identity-panel .identicon-wrapper span {
+ margin: 0 auto;
+}
+
+.identity-panel .identity-data {
+ margin: 8px 8px 8px 18px;
+}
+
+.identity-panel i {
+ margin-top: 32px;
+ margin-right: 6px;
+ color: #B9B9B9;
+}
+
+.identity-panel .arrow-right {
+ padding-left: 18px;
+ width: 42px;
+ min-width: 18px;
+ height: 100%;
+}
+
+/* accounts screen */
+
+.identity-section {
+ border: 2px solid #4D4D4D;
+ margin: 0;
+}
+
+.identity-section .identity-panel {
+ background: #E9E9E9;
+ border-bottom: 1px solid #B1B1B1;
+ cursor: pointer;
+}
+.identity-section .identity-panel:hover {
+ background: #F9F9F9;
+}
+
+.identity-section .identity-panel.selected {
+ background: white;
+ color: #F3C83E;
+}
+
+.identity-section .identity-panel.selected .identicon {
+ border-color: orange;
+}
+
+/* account detail screen */
+
+.account-detail-section {
+ margin: 0 20px;
+}
+
+/* tx confirm */
+
+.unconftx-section {
+ margin: 0 20px;
+}
+
+.unconftx-section input[type=password] {
+ height: 22px;
+ padding: 2px;
+ margin: 12px;
+ margin-bottom: 24px;
+ border-radius: 4px;
+ border: 2px solid #F3C83E;
+ background: #FAF6F0;
+}
+
+
+/*
+react toggle
+*/
+
+/* overrides */
+
+.react-toggle-track-check {
+ display: none;
+}
+.react-toggle-track-x {
+ display: none;
+}
+
+/* modified original */
+
+.react-toggle {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ background-color: transparent;
+ border: 0;
+ padding: 0;
+
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-tap-highlight-color: transparent;
+}
+
+.react-toggle-screenreader-only {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+
+.react-toggle--disabled {
+ opacity: 0.5;
+ -webkit-transition: opacity 0.25s;
+ transition: opacity 0.25s;
+}
+
+.react-toggle-track {
+ width: 50px;
+ height: 24px;
+ padding: 0;
+ border-radius: 30px;
+ background-color: #4D4D4D;
+ -webkit-transition: all 0.2s ease;
+ -moz-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+ background-color: #000000;
+}
+
+.react-toggle--checked .react-toggle-track {
+ background-color: rgb(255, 174, 41);
+}
+
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+ background-color: rgb(243, 151, 0);
+}
+
+.react-toggle-track-check {
+ position: absolute;
+ width: 14px;
+ height: 10px;
+ top: 0px;
+ bottom: 0px;
+ margin-top: auto;
+ margin-bottom: auto;
+ line-height: 0;
+ left: 8px;
+ opacity: 0;
+ -webkit-transition: opacity 0.25s ease;
+ -moz-transition: opacity 0.25s ease;
+ transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-check {
+ opacity: 1;
+ -webkit-transition: opacity 0.25s ease;
+ -moz-transition: opacity 0.25s ease;
+ transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ top: 0px;
+ bottom: 0px;
+ margin-top: auto;
+ margin-bottom: auto;
+ line-height: 0;
+ right: 10px;
+ opacity: 1;
+ -webkit-transition: opacity 0.25s ease;
+ -moz-transition: opacity 0.25s ease;
+ transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-x {
+ opacity: 0;
+}
+
+.react-toggle-thumb {
+ transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+ position: absolute;
+ top: 1px;
+ left: 1px;
+ width: 22px;
+ height: 22px;
+ border: 1px solid #4D4D4D;
+ border-radius: 50%;
+ background-color: #FAFAFA;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ -webkit-transition: all 0.25s ease;
+ -moz-transition: all 0.25s ease;
+ transition: all 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-thumb {
+ left: 27px;
+ border-color: #828282;
+}
+/*
+ .react-toggle--focus .react-toggle-thumb {
+ -webkit-box-shadow: 0px 0px 3px 2px #0099E0;
+ -moz-box-shadow: 0px 0px 3px 2px #0099E0;
+ box-shadow: 0px 0px 2px 3px #0099E0;
+ }
+
+ .react-toggle:active .react-toggle-thumb {
+ -webkit-box-shadow: 0px 0px 5px 5px #0099E0;
+ -moz-box-shadow: 0px 0px 5px 5px #0099E0;
+ box-shadow: 0px 0px 5px 5px #0099E0;
+ }
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
new file mode 100644
index 000000000..b6b26402b
--- /dev/null
+++ b/ui/app/css/lib.css
@@ -0,0 +1,143 @@
+/* lib */
+
+.full-width {
+ width: 100%;
+}
+
+.full-height {
+ height: 100%;
+}
+
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-column-bottom {
+ display: flex;
+ flex-direction: column-reverse;
+}
+
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+.flex-space-between {
+ justify-content: space-between;
+}
+
+.flex-space-around {
+ justify-content: space-around;
+}
+
+.flex-right {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+}
+
+.flex-left {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+}
+
+.flex-fixed {
+ flex: none;
+}
+
+.flex-grow {
+ flex: 1 1 auto;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.flex-center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.flex-justify-center {
+ justify-content: center;
+}
+
+.flex-align-center {
+ align-items: center;
+}
+
+.flex-self-end {
+ align-self: flex-end;
+}
+
+.flex-self-stretch {
+ align-self: stretch;
+}
+
+.flex-vertical {
+ flex-direction: column;
+}
+
+.z-bump {
+ z-index: 1;
+}
+
+.select-none {
+ cursor: default;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.cursor-pointer {
+ cursor: pointer;
+ transform-origin: center center;
+ transition: transform 50ms ease-in-out;
+}
+.cursor-pointer:hover {
+ transform: scale(1.1);
+}
+.cursor-pointer:active {
+ transform: scale(0.95);
+}
+
+.margin-bottom-sml {
+ margin-bottom: 20px;
+}
+
+.margin-bottom-med {
+ margin-bottom: 40px;
+}
+
+.margin-right-left {
+ margin: 0 20px;
+}
+
+.bold {
+ font-weight: bold;
+}
+
+.font-small {
+ font-size: 12px;
+}
+
+/* Send Screen */
+.send-screen {
+ margin: 0 20px;
+}
+.send-screen section {
+ margin: 7px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+.send-screen details {
+ width: 100%;
+}
+.send-screen section input {
+ width: 100%;
+}
diff --git a/ui/app/css/reset.css b/ui/app/css/reset.css
new file mode 100644
index 000000000..9ce89e8bc
--- /dev/null
+++ b/ui/app/css/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
\ No newline at end of file
diff --git a/ui/app/css/transitions.css b/ui/app/css/transitions.css
new file mode 100644
index 000000000..3d0bf46a1
--- /dev/null
+++ b/ui/app/css/transitions.css
@@ -0,0 +1,47 @@
+/* initial positions */
+.app-primary.from-right .main-enter {
+ transform: translateX(400px);
+ position: absolute;
+ width: 100%;
+ transition: transform 300ms ease-in-out;
+}
+.app-primary.from-left .main-enter {
+ transform: translateX(-400px);
+ position: absolute;
+ width: 100%;
+ transition: transform 300ms ease-in-out;
+}
+
+/* center position */
+.app-primary .main-enter.main-enter-active,
+.app-primary .main-leave {
+ transform: translateX(0px);
+ position: absolute;
+ width: 100%;
+ transition: transform 300ms ease-in-out;
+}
+
+/* final positions */
+.app-primary.from-left .main-leave-active {
+ transform: translateX(400px);
+ position: absolute;
+ width: 100%;
+ transition: transform 300ms ease-in-out;
+}
+.app-primary.from-right .main-leave-active {
+ transform: translateX(-400px);
+ position: absolute;
+ width: 100%;
+ transition: transform 300ms ease-in-out;
+}
+
+/* loader transitions */
+.loader-enter, .loader-leave-active {
+ opacity: 0.0;
+ transition: opacity 150 ease-in-out;
+}
+.loader-enter-active, .loader-leave {
+ opacity: 1.0;
+ transition: opacity 150 ease-in-out;
+}
+
diff --git a/ui/app/first-time/create-vault-complete.js b/ui/app/first-time/create-vault-complete.js
new file mode 100644
index 000000000..cd062effe
--- /dev/null
+++ b/ui/app/first-time/create-vault-complete.js
@@ -0,0 +1,57 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const actions = require('../actions')
+
+module.exports = connect(mapStateToProps)(CreateVaultCompleteScreen)
+
+
+inherits(CreateVaultCompleteScreen, Component)
+function CreateVaultCompleteScreen() {
+ Component.call(this)
+}
+
+function mapStateToProps(state) {
+ return {
+ seed: state.appState.currentView.context,
+ cachedSeed: state.metamask.seedWords,
+ }
+}
+
+CreateVaultCompleteScreen.prototype.render = function() {
+ var state = this.props
+ var seed = state.seed || state.cachedSeed
+
+ return (
+
+ h('.initialize-screen.flex-column.flex-center.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('h2.page-subtitle', 'Vault Created'),
+ ]),
+
+ h('span.error', { // Error for the right red
+ style: {
+ padding: '12px 20px 0px 20px',
+ textAlign: 'center',
+ }
+ }, 'These 12 words can restore all of your MetaMask accounts for this vault.\nSave them somewhere safe and secret.'),
+
+ h('textarea.twelve-word-phrase', {
+ readOnly: true,
+ value: seed,
+ }),
+
+ h('button.btn-thin', {
+ onClick: () => this.confirmSeedWords(),
+ }, 'I\'ve copied it somewhere safe.'),
+ ])
+ )
+}
+
+CreateVaultCompleteScreen.prototype.confirmSeedWords = function() {
+ this.props.dispatch(actions.confirmSeedWords())
+}
+
diff --git a/ui/app/first-time/create-vault.js b/ui/app/first-time/create-vault.js
new file mode 100644
index 000000000..d7bf9cd5d
--- /dev/null
+++ b/ui/app/first-time/create-vault.js
@@ -0,0 +1,123 @@
+const inherits = require('util').inherits
+
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const actions = require('../actions')
+
+module.exports = connect(mapStateToProps)(CreateVaultScreen)
+
+
+inherits(CreateVaultScreen, Component)
+function CreateVaultScreen() {
+ Component.call(this)
+}
+
+function mapStateToProps(state) {
+ return {
+ warning: state.appState.warning,
+ }
+}
+
+CreateVaultScreen.prototype.render = function() {
+ var state = this.props
+ return (
+
+ h('.initialize-screen.flex-column.flex-center.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: this.showInitializeMenu.bind(this),
+ }),
+ h('h2.page-subtitle', 'Create Vault'),
+ ]),
+
+ // password
+ h('label', {
+ htmlFor: 'password-box',
+ }, 'Enter Password (min 8 chars):'),
+
+ h('input', {
+ type: 'password',
+ id: 'password-box',
+ }),
+
+ // confirm password
+ h('label', {
+ htmlFor: 'password-box-confirm',
+ }, 'Confirm Password:'),
+
+ h('input', {
+ type: 'password',
+ id: 'password-box-confirm',
+ onKeyPress: this.createVaultOnEnter.bind(this),
+ }),
+
+ /* ENTROPY TEXT INPUT CURRENTLY DISABLED
+ // entropy
+ h('label', {
+ htmlFor: 'entropy-text-entry',
+ }, 'Enter random text (optional)'),
+
+ h('textarea', {
+ id: 'entropy-text-entry',
+ style: { resize: 'none' },
+ onKeyPress: this.createVaultOnEnter.bind(this),
+ }),
+ */
+
+ // submit
+ h('button.create-vault.btn-thin', {
+ onClick: this.createNewVault.bind(this),
+ }, 'OK'),
+
+ (!state.inProgress && state.warning) && (
+ h('span.in-progress-notification', state.warning)
+
+ ),
+
+ state.inProgress && (
+ h('span.in-progress-notification', 'Generating Seed...')
+ ),
+ ])
+ )
+}
+
+CreateVaultScreen.prototype.componentDidMount = function(){
+ document.getElementById('password-box').focus()
+}
+
+CreateVaultScreen.prototype.showInitializeMenu = function() {
+ this.props.dispatch(actions.showInitializeMenu())
+}
+
+// create vault
+
+CreateVaultScreen.prototype.createVaultOnEnter = function(event) {
+ if (event.key === 'Enter') {
+ event.preventDefault()
+ this.createNewVault()
+ }
+}
+
+CreateVaultScreen.prototype.createNewVault = function(){
+ var passwordBox = document.getElementById('password-box')
+ var password = passwordBox.value
+ var passwordConfirmBox = document.getElementById('password-box-confirm')
+ var passwordConfirm = passwordConfirmBox.value
+ // var entropy = document.getElementById('entropy-text-entry').value
+
+ if (password.length < 8) {
+ this.warning = 'password not long enough'
+ this.props.dispatch(actions.displayWarning(this.warning))
+ return
+ }
+ if (password !== passwordConfirm) {
+ this.warning = 'passwords dont match'
+ this.props.dispatch(actions.displayWarning(this.warning))
+ return
+ }
+
+ this.props.dispatch(actions.createNewVault(password, ''/*entropy*/))
+}
diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js
new file mode 100644
index 000000000..11b01a88b
--- /dev/null
+++ b/ui/app/first-time/init-menu.js
@@ -0,0 +1,123 @@
+const inherits = require('util').inherits
+const EventEmitter = require('events').EventEmitter
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const getCaretCoordinates = require('textarea-caret')
+const Mascot = require('../components/mascot')
+const actions = require('../actions')
+const CreateVaultScreen = require('./create-vault')
+const CreateVaultCompleteScreen = require('./create-vault-complete')
+
+module.exports = connect(mapStateToProps)(InitializeMenuScreen)
+
+inherits(InitializeMenuScreen, Component)
+function InitializeMenuScreen() {
+ Component.call(this)
+ this.animationEventEmitter = new EventEmitter()
+}
+
+function mapStateToProps(state) {
+ return {
+ // state from plugin
+ currentView: state.appState.currentView,
+ }
+}
+
+InitializeMenuScreen.prototype.render = function() {
+ var state = this.props
+
+ switch (state.currentView.name) {
+
+ case 'createVault':
+ return h(CreateVaultScreen)
+
+ case 'createVaultComplete':
+ return h(CreateVaultCompleteScreen)
+
+ case 'restoreVault':
+ return this.renderRestoreVault()
+
+ default:
+ return this.renderMenu()
+
+ }
+
+}
+
+// InitializeMenuScreen.prototype.componentDidMount = function(){
+// document.getElementById('password-box').focus()
+// }
+
+InitializeMenuScreen.prototype.renderMenu = function() {
+ var state = this.props
+ return (
+
+ h('.initialize-screen.flex-column.flex-center.flex-grow', [
+
+ h('h2.page-subtitle', 'Welcome!'),
+
+ h(Mascot, {
+ animationEventEmitter: this.animationEventEmitter,
+ }),
+
+ h('button.btn-thin', {
+ onClick: this.showCreateVault.bind(this),
+ }, 'Create New Vault'),
+
+ h('.flex-row.flex-center.flex-grow', [
+ h('hr'),
+ h('div', 'OR'),
+ h('hr'),
+ ]),
+
+ h('button.btn-thin', {
+ onClick: this.showRestoreVault.bind(this),
+ }, 'Restore Existing Vault'),
+
+ ])
+
+ )
+}
+
+InitializeMenuScreen.prototype.renderRestoreVault = function() {
+ var state = this.props
+ return (
+
+ h('.initialize-screen.flex-column.flex-center.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: this.showInitializeMenu.bind(this),
+ }),
+ h('h2.page-subtitle', 'Restore Vault'),
+ ]),
+
+
+ h('h3', 'Coming soon....'),
+ // h('textarea.twelve-word-phrase', {
+ // value: 'hey ho what the actual hello rubber duck bumbersnatch crumplezone frankenfurter',
+ // }),
+
+ ])
+
+ )
+}
+
+// InitializeMenuScreen.prototype.splitWor = function() {
+// this.props.dispatch(actions.showInitializeMenu())
+// }
+
+InitializeMenuScreen.prototype.showInitializeMenu = function() {
+ this.props.dispatch(actions.showInitializeMenu())
+}
+
+InitializeMenuScreen.prototype.showCreateVault = function() {
+ this.props.dispatch(actions.showCreateVault())
+}
+
+InitializeMenuScreen.prototype.showRestoreVault = function() {
+ this.props.dispatch(actions.showRestoreVault())
+}
+
diff --git a/ui/app/first-time/restore-vault.js b/ui/app/first-time/restore-vault.js
new file mode 100644
index 000000000..55041e8c0
--- /dev/null
+++ b/ui/app/first-time/restore-vault.js
@@ -0,0 +1,116 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const actions = require('../actions')
+
+module.exports = connect(mapStateToProps)(RestoreVaultScreen)
+
+
+inherits(RestoreVaultScreen, Component)
+function RestoreVaultScreen() {
+ Component.call(this)
+}
+
+function mapStateToProps(state) {
+ return {
+ warning: state.appState.warning,
+ }
+}
+
+
+RestoreVaultScreen.prototype.render = function() {
+ var state = this.props
+ return (
+
+ h('.initialize-screen.flex-column.flex-center.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: this.showInitializeMenu.bind(this),
+ }),
+ h('h2.page-subtitle', 'Restore Vault'),
+ ]),
+
+ // wallet seed entry
+ h('h3', 'Wallet Seed'),
+ h('textarea.twelve-word-phrase', {
+ placeholder: 'Enter your secret twelve word phrase here to restore your vault.'
+ }),
+
+ // password
+ h('label', {
+ htmlFor: 'password-box',
+ }, 'New Password (min 8 chars):'),
+
+ h('input', {
+ type: 'password',
+ id: 'password-box',
+ }),
+
+ // confirm password
+ h('label', {
+ htmlFor: 'password-box-confirm',
+ }, 'Confirm Password:'),
+
+ h('input', {
+ type: 'password',
+ id: 'password-box-confirm',
+ onKeyPress: this.onMaybeCreate.bind(this),
+ }),
+
+ (state.warning) && (
+ h('span.error.in-progress-notification', state.warning)
+ ),
+
+ // submit
+ h('button.btn-thin', {
+ onClick: this.restoreVault.bind(this),
+ }, 'I\'ve double checked the 12 word phrase.'),
+
+ ])
+
+ )
+}
+
+RestoreVaultScreen.prototype.showInitializeMenu = function() {
+ this.props.dispatch(actions.showInitializeMenu())
+}
+
+RestoreVaultScreen.prototype.onMaybeCreate = function(event) {
+ if (event.key === 'Enter') {
+ this.restoreVault()
+ }
+}
+
+RestoreVaultScreen.prototype.restoreVault = function(){
+ // check password
+ var passwordBox = document.getElementById('password-box')
+ var password = passwordBox.value
+ var passwordConfirmBox = document.getElementById('password-box-confirm')
+ var passwordConfirm = passwordConfirmBox.value
+ if (password.length < 8) {
+ this.warning = 'Password not long enough'
+
+ this.props.dispatch(actions.displayWarning(this.warning))
+ return
+ }
+ if (password !== passwordConfirm) {
+ this.warning = 'Passwords don\'t match'
+ this.props.dispatch(actions.displayWarning(this.warning))
+ return
+ }
+ // check seed
+ var seedBox = document.querySelector('textarea.twelve-word-phrase')
+ var seed = seedBox.value.trim()
+ if (seed.split(' ').length !== 12) {
+ this.warning = 'seed phrases are 12 words long'
+ this.props.dispatch(actions.displayWarning(this.warning))
+ return
+ }
+ // submit
+ this.warning = null
+ this.props.dispatch(actions.displayWarning(this.warning))
+ this.props.dispatch(actions.recoverFromSeed(password, seed))
+}
diff --git a/ui/app/img/identicon-tardigrade.png b/ui/app/img/identicon-tardigrade.png
new file mode 100644
index 000000000..1742a32b8
Binary files /dev/null and b/ui/app/img/identicon-tardigrade.png differ
diff --git a/ui/app/img/identicon-walrus.png b/ui/app/img/identicon-walrus.png
new file mode 100644
index 000000000..d58fae912
Binary files /dev/null and b/ui/app/img/identicon-walrus.png differ
diff --git a/ui/app/info.js b/ui/app/info.js
new file mode 100644
index 000000000..ae8c6efc5
--- /dev/null
+++ b/ui/app/info.js
@@ -0,0 +1,90 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('./actions')
+
+module.exports = connect(mapStateToProps)(InfoScreen)
+
+function mapStateToProps(state) {
+ return {}
+}
+
+inherits(InfoScreen, Component)
+function InfoScreen() {
+ Component.call(this)
+}
+
+InfoScreen.prototype.render = function() {
+ var state = this.props
+ var rpc = state.rpc
+
+ return (
+ h('.flex-column.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: (event) => {
+ state.dispatch(actions.showAccountsPage())
+ }
+ }),
+ h('h2.page-subtitle', 'Info'),
+ ]),
+
+ // main view
+ h('.flex-column.flex-justify-center.flex-grow.select-none', [
+ h('.flex-space-around', {
+ style: {
+ padding: '20px',
+ }
+ }, [
+
+ h('div', [
+ h('a', {
+ href: 'https://consensys.slack.com/archives/team-metamask',
+ target: '_blank',
+ onClick(event) { this.navigateTo(event.target.href) },
+ }, 'Join the conversation on Slack'),
+ ]),
+
+ h('div', [
+ h('a', {
+ href: 'https://metamask.io/',
+ target: '_blank',
+ onClick(event) { this.navigateTo(event.target.href) },
+ }, 'Visit our web site'),
+ ]),
+
+ h('div', [
+ h('a', {
+ href: 'https://twitter.com/metamask_io',
+ target: '_blank',
+ onClick(event) { this.navigateTo(event.target.href) },
+ }, 'Follow us on Twitter'),
+ ]),
+
+ h('div', [
+ h('a', {
+ href: 'mailto:hello@metamask.io?subject=Feedback',
+ target: '_blank',
+ }, 'Email us any questions or comments!'),
+ ]),
+
+ h('div', [
+ h('a', {
+ href: 'https://github.com/metamask/talk/issues',
+ target: '_blank',
+ onClick(event) { this.navigateTo(event.target.href) },
+ }, 'Start a thread on Github'),
+ ]),
+
+ ]),
+ ]),
+ ])
+ )
+}
+
+InfoScreen.prototype.navigateTo = function(url) {
+ chrome.tabs.create({ url });
+}
diff --git a/ui/app/loading.js b/ui/app/loading.js
new file mode 100644
index 000000000..47b758cb6
--- /dev/null
+++ b/ui/app/loading.js
@@ -0,0 +1,51 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('./actions')
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+
+module.exports = connect(mapStateToProps)(LoadingIndicator)
+
+function mapStateToProps(state) {
+ return {
+ isLoading: state.appState.isLoading,
+ }
+}
+
+inherits(LoadingIndicator, Component)
+function LoadingIndicator() {
+ Component.call(this)
+}
+
+LoadingIndicator.prototype.render = function() {
+ console.dir(this.props)
+ var isLoading = this.props.isLoading
+
+ return (
+ h(ReactCSSTransitionGroup, {
+ transitionName: "loader",
+ transitionEnterTimeout: 150,
+ transitionLeaveTimeout: 150,
+ }, [
+
+ isLoading ? h('div', {
+ style: {
+ position: 'absolute',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
+ width: '100%',
+ background: 'rgba(255, 255, 255, 0.5)',
+ }
+ }, [
+ h('img', {
+ src: 'images/loading.svg',
+ }),
+ ]) : null,
+
+ ])
+ )
+}
+
diff --git a/ui/app/reducers.js b/ui/app/reducers.js
new file mode 100644
index 000000000..0f2ad4c21
--- /dev/null
+++ b/ui/app/reducers.js
@@ -0,0 +1,41 @@
+const combineReducers = require('redux').combineReducers
+const actions = require('./actions')
+const extend = require('xtend')
+
+//
+// Sub-Reducers take in the complete state and return their sub-state
+//
+const reduceIdentities = require('./reducers/identities')
+const reduceMetamask = require('./reducers/metamask')
+const reduceApp = require('./reducers/app')
+
+module.exports = rootReducer
+
+function rootReducer(state, action) {
+
+ // clone
+ state = extend(state)
+
+ //
+ // Identities
+ //
+
+ state.identities = reduceIdentities(state, action)
+
+ //
+ // MetaMask
+ //
+
+ state.metamask = reduceMetamask(state, action)
+
+ //
+ // AppState
+ //
+
+ state.appState = reduceApp(state, action)
+
+
+ return state
+
+}
+
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
new file mode 100644
index 000000000..582583185
--- /dev/null
+++ b/ui/app/reducers/app.js
@@ -0,0 +1,281 @@
+const extend = require('xtend')
+const actions = require('../actions')
+
+module.exports = reduceApp
+
+function reduceApp(state, action) {
+
+ // clone and defaults
+ var defaultView = {
+ name: 'accounts',
+ detailView: null,
+ }
+
+ // confirm seed words
+ var seedConfView = {
+ name: 'createVaultComplete',
+ }
+ var seedWords = state.metamask.seedWords
+
+ var appState = extend({
+ currentView: seedWords ? seedConfView : defaultView,
+ currentDomain: 'example.com',
+ transForward: true, // Used to render transition direction
+ isLoading: false, // Used to display loading indicator
+ warning: null, // Used to display error text
+ }, state.appState)
+
+ switch (action.type) {
+
+ // intialize
+
+ case actions.SHOW_CREATE_VAULT:
+ return extend(appState, {
+ currentView: {
+ name: 'createVault',
+ },
+ transForward: true,
+ warning: null,
+ })
+
+ case actions.SHOW_RESTORE_VAULT:
+ return extend(appState, {
+ currentView: {
+ name: 'restoreVault',
+ },
+ transForward: true,
+ })
+
+ case actions.SHOW_INIT_MENU:
+ return extend(appState, {
+ currentView: defaultView,
+ transForward: false,
+ })
+
+ case actions.SHOW_CONFIG_PAGE:
+ return extend(appState, {
+ currentView: {
+ name: 'config',
+ },
+ transForward: true,
+ })
+
+ case actions.SHOW_INFO_PAGE:
+ return extend(appState, {
+ currentView: {
+ name: 'info',
+ },
+ transForward: true,
+ })
+
+ case actions.CREATE_NEW_VAULT_IN_PROGRESS:
+ return extend(appState, {
+ currentView: {
+ name: 'createVault',
+ inProgress: true,
+ },
+ transForward: true,
+ isLoading: true,
+ })
+
+ case actions.SHOW_NEW_VAULT_SEED:
+ return extend(appState, {
+ currentView: {
+ name: 'createVaultComplete',
+ context: action.value,
+ },
+ transForward: true,
+ isLoading: false,
+ })
+
+ case actions.SHOW_SEND_PAGE:
+ return extend(appState, {
+ currentView: {
+ name: 'sendTransaction',
+ context: appState.currentView.context,
+ },
+ transForward: true,
+ warning: null,
+ })
+
+ // unlock
+
+ case actions.UNLOCK_METAMASK:
+ return extend(appState, {
+ transForward: true,
+ warning: null,
+ })
+
+ case actions.LOCK_METAMASK:
+ return extend(appState, {
+ currentView: defaultView,
+ transForward: false,
+ warning: null,
+ })
+
+ // accounts
+
+ case actions.SET_SELECTED_ACCOUNT:
+ return extend(appState, {
+ activeAddress: action.value,
+ })
+
+ case actions.SHOW_ACCOUNT_DETAIL:
+ return extend(appState, {
+ currentView: {
+ name: 'accountDetail',
+ context: action.value,
+ },
+ accountDetail: {
+ accountExport: 'none',
+ privateKey: '',
+ },
+ transForward: true,
+ })
+
+ case actions.BACK_TO_ACCOUNT_DETAIL:
+ return extend(appState, {
+ currentView: {
+ name: 'accountDetail',
+ context: action.value,
+ },
+ accountDetail: {
+ accountExport: 'none',
+ privateKey: '',
+ },
+ transForward: false,
+ })
+
+ case actions.SHOW_ACCOUNTS_PAGE:
+ var seedWords = state.metamask.seedWords
+ return extend(appState, {
+ currentView: {
+ name: seedWords ? 'createVaultComplete' : 'accounts',
+ },
+ transForward: appState.currentView.name == 'locked',
+ isLoading: false,
+ warning: null,
+ })
+
+ case actions.SHOW_CONF_TX_PAGE:
+ return extend(appState, {
+ currentView: {
+ name: 'confTx',
+ context: 0,
+ },
+ transForward: true,
+ warning: null,
+ })
+
+ case actions.COMPLETED_TX:
+ var unconfTxs = Object.keys(state.metamask.unconfTxs).filter(tx => tx !== tx.id)
+ if (unconfTxs && unconfTxs.length > 0) {
+ return extend(appState, {
+ transForward: false,
+ currentView: {
+ name: 'confTx',
+ context: 0,
+ },
+ warning: null,
+ })
+ } else {
+ return extend(appState, {
+ transForward: false,
+ currentView: {
+ name: 'accounts',
+ context: 0,
+ },
+ transForward: false,
+ warning: null,
+ })
+ }
+
+ case actions.NEXT_TX:
+ return extend(appState, {
+ transForward: true,
+ currentView: {
+ name: 'confTx',
+ context: ++appState.currentView.context,
+ warning: null,
+ }
+ })
+
+ case actions.PREVIOUS_TX:
+ return extend(appState, {
+ transForward: false,
+ currentView: {
+ name: 'confTx',
+ context: --appState.currentView.context,
+ warning: null,
+ }
+ })
+
+ case actions.TRANSACTION_ERROR:
+ return extend(appState, {
+ currentView: {
+ name: 'confTx',
+ errorMessage: 'There was a problem submitting this transaction.',
+ },
+ })
+
+ case actions.UNLOCK_FAILED:
+ return extend(appState, {
+ warning: 'Incorrect password. Try again.'
+ })
+
+ case actions.SHOW_LOADING:
+ return extend(appState, {
+ isLoading: true,
+ })
+
+ case actions.HIDE_LOADING:
+ return extend(appState, {
+ isLoading: false,
+ })
+
+ case actions.CLEAR_SEED_WORD_CACHE:
+ return extend(appState, {
+ transForward: true,
+ currentView: {
+ name: 'accounts',
+ },
+ isLoading: false,
+ })
+
+ case actions.DISPLAY_WARNING:
+ return extend(appState, {
+ warning: action.value,
+ })
+
+ case actions.HIDE_WARNING:
+ return extend(appState, {
+ warning: undefined,
+ })
+
+ case actions.REQUEST_ACCOUNT_EXPORT:
+ return extend(appState, {
+ accountDetail: {
+ accountExport: 'requested',
+ },
+ })
+
+ case actions.EXPORT_ACCOUNT:
+ return extend(appState, {
+ accountDetail: {
+ accountExport: 'completed',
+ },
+ })
+
+ case actions.SHOW_PRIVATE_KEY:
+ return extend(appState, {
+ accountDetail: {
+ accountExport: 'completed',
+ privateKey: action.value,
+ },
+ })
+
+ default:
+ return appState
+
+ }
+}
diff --git a/ui/app/reducers/identities.js b/ui/app/reducers/identities.js
new file mode 100644
index 000000000..95ecd23f9
--- /dev/null
+++ b/ui/app/reducers/identities.js
@@ -0,0 +1,18 @@
+const extend = require('xtend')
+const actions = require('../actions')
+
+module.exports = reduceIdentities
+
+function reduceIdentities(state, action) {
+
+ // clone + defaults
+ var idState = extend({
+
+ }, state.identities)
+
+ switch (action.type) {
+ default:
+ return idState
+ }
+
+}
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
new file mode 100644
index 000000000..43bb3f761
--- /dev/null
+++ b/ui/app/reducers/metamask.js
@@ -0,0 +1,73 @@
+const extend = require('xtend')
+const actions = require('../actions')
+
+module.exports = reduceMetamask
+
+function reduceMetamask(state, action) {
+
+ // clone + defaults
+ var metamaskState = extend({
+ isInitialized: false,
+ isUnlocked: false,
+ currentDomain: 'example.com',
+ rpcTarget: 'https://rawtestrpc.metamask.io/',
+ identities: {},
+ unconfTxs: {},
+ }, state.metamask)
+
+ switch (action.type) {
+
+ case actions.SHOW_ACCOUNTS_PAGE:
+ var state = extend(metamaskState)
+ delete state.seedWords
+ return state
+
+ case actions.UPDATE_METAMASK_STATE:
+ return extend(metamaskState, action.value)
+
+ case actions.UNLOCK_METAMASK:
+ return extend(metamaskState, {
+ isUnlocked: true,
+ isInitialized: true,
+ })
+
+ case actions.LOCK_METAMASK:
+ return extend(metamaskState, {
+ isUnlocked: false,
+ })
+
+ case actions.SET_RPC_TARGET:
+ return extend(metamaskState, {
+ rpcTarget: action.value,
+ })
+
+ case actions.COMPLETED_TX:
+ var stringId = String(action.id)
+ var newState = extend(metamaskState, {
+ unconfTxs: {}
+ })
+ for (var id in metamaskState.unconfTxs) {
+ if (id !== stringId) {
+ newState.unconfTxs[id] = metamaskState.unconfTxs[id]
+ }
+ }
+ return newState
+
+ case actions.CLEAR_SEED_WORD_CACHE:
+ var newState = extend(metamaskState, {
+ isInitialized: true,
+ })
+ delete newState.seedWords
+ return newState
+
+ case actions.CREATE_NEW_VAULT_IN_PROGRESS:
+ return extend(metamaskState, {
+ isUnlocked: true,
+ isInitialized: true,
+ })
+
+ default:
+ return metamaskState
+
+ }
+}
diff --git a/ui/app/root.js b/ui/app/root.js
new file mode 100644
index 000000000..9fedf625f
--- /dev/null
+++ b/ui/app/root.js
@@ -0,0 +1,24 @@
+const inherits = require('util').inherits
+const React = require('react')
+const Component = require('react').Component
+const Provider = require('react-redux').Provider
+const h = require('react-hyperscript')
+const App = require('./app')
+
+module.exports = Root
+
+
+inherits(Root, Component)
+function Root() { Component.call(this) }
+
+Root.prototype.render = function() {
+ return (
+
+ h(Provider, {
+ store: this.props.store,
+ }, [
+ h(App)
+ ])
+
+ )
+}
diff --git a/ui/app/send.js b/ui/app/send.js
new file mode 100644
index 000000000..3cb56cb6e
--- /dev/null
+++ b/ui/app/send.js
@@ -0,0 +1,139 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('./actions')
+const util = require('./util')
+const numericBalance = require('./util').numericBalance
+const AccountPanel = require('./components/account-panel')
+const ethUtil = require('ethereumjs-util')
+
+module.exports = connect(mapStateToProps)(SendTransactionScreen)
+
+function mapStateToProps(state) {
+ var result = {
+ address: state.appState.currentView.context,
+ accounts: state.metamask.accounts,
+ identities: state.metamask.identities,
+ warning: state.appState.warning,
+ }
+
+ result.account = result.accounts[result.address]
+ result.identity = result.identities[result.address]
+ result.balance = result.account ? numericBalance(result.account.balance) : null
+
+ return result
+}
+
+inherits(SendTransactionScreen, Component)
+function SendTransactionScreen() {
+ Component.call(this)
+}
+
+SendTransactionScreen.prototype.render = function() {
+ var state = this.props
+ var account = state.account
+ var identity = state.identity
+
+ return (
+ h('.send-screen.flex-column.flex-grow', [
+
+ // subtitle and nav
+ h('.section-title.flex-row.flex-center', [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: this.back.bind(this),
+ }),
+ h('h2.page-subtitle', 'Send Transaction'),
+ ]),
+
+ h(AccountPanel, {
+ showFullAddress: true,
+ identity: identity,
+ account: account,
+ }),
+
+ h('section.recipient', [
+ h('input.address', {
+ placeholder: 'Recipient Address',
+ })
+ ]),
+
+ h('section.ammount', [
+ h('input.ether', {
+ placeholder: 'Amount',
+ type: 'number',
+ style: { marginRight: '6px' }
+ }),
+ h('select.currency', {
+ name: 'currency',
+ }, [
+ h('option', { value: 'ether' }, 'Ether (1e18 wei)'),
+ h('option', { value: 'wei' }, 'Wei'),
+ ]),
+ ]),
+
+ h('section.data', [
+ h('details', [
+ h('summary', {
+ style: {cursor: 'pointer'},
+ }, 'Advanced'),
+ h('textarea.txData', {
+ type: 'textarea',
+ placeholder: 'Transaction data (optional)',
+ style: {
+ height: '100px',
+ width: '100%',
+ resize: 'none',
+ }
+ })
+ ])
+ ]),
+
+ h('section', {
+ }, [
+ h('button', {
+ onClick: this.onSubmit.bind(this),
+ }, 'Send')
+ ]),
+
+ state.warning ? h('span.error', state.warning) : null,
+ ])
+ )
+}
+
+SendTransactionScreen.prototype.back = function() {
+ var address = this.props.address
+ this.props.dispatch(actions.backToAccountDetail(address))
+}
+
+SendTransactionScreen.prototype.onSubmit = function(event) {
+ var recipient = document.querySelector('input.address').value
+ var amount = new ethUtil.BN(document.querySelector('input.ether').value, 10)
+ var currency = document.querySelector('select.currency').value
+ var txData = document.querySelector('textarea.txData').value
+
+ var value = util.normalizeToWei(amount, currency)
+ var balance = this.props.balance
+
+ if (value.gt(balance)) {
+ var message = 'Insufficient funds.'
+ return this.props.dispatch(actions.displayWarning(message))
+ }
+ if (recipient.length !== 42) {
+ var message = 'Recipient address is the incorrect length.'
+ return this.props.dispatch(actions.displayWarning(message))
+ }
+
+ this.props.dispatch(actions.hideWarning())
+ this.props.dispatch(actions.showLoadingIndication())
+
+ var txParams = {
+ to: recipient,
+ from: this.props.address,
+ value: '0x' + value.toString(16),
+ }
+ if (txData) txParams.data = txData
+
+ this.props.dispatch(actions.signTx(txParams))
+}
+
diff --git a/ui/app/settings.js b/ui/app/settings.js
new file mode 100644
index 000000000..9a11ef680
--- /dev/null
+++ b/ui/app/settings.js
@@ -0,0 +1,69 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const copyToClipboard = require('copy-to-clipboard')
+const actions = require('./actions')
+const AccountPanel = require('./components/account-panel')
+
+module.exports = connect(mapStateToProps)(AppSettingsPage)
+
+function mapStateToProps(state) {
+ return {
+ identities: state.metamask.identities,
+ address: state.appState.currentView.context,
+ }
+}
+
+inherits(AppSettingsPage, Component)
+function AppSettingsPage() {
+ Component.call(this)
+}
+
+
+AppSettingsPage.prototype.render = function() {
+ var state = this.props
+ var identity = state.identities[state.address]
+ return (
+
+ h('.account-detail-section.flex-column.flex-grow', [
+
+ // subtitle and nav
+ h('.flex-row.flex-center', [
+ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+ onClick: this.navigateToAccounts.bind(this),
+ }),
+ h('h2.page-subtitle', 'Settings'),
+ ]),
+
+ h('label', {
+ htmlFor: 'settings-rpc-endpoint',
+ }, 'RPC Endpoint:'),
+ h('input', {
+ // value: '//testrpc.metamask.io',
+ type: 'url',
+ id: 'settings-rpc-endpoint',
+ onKeyPress: this.onKeyPress.bind(this),
+ }),
+
+ ])
+
+ )
+}
+
+AppSettingsPage.prototype.componentDidMount = function(){
+ document.querySelector('input').focus()
+}
+
+AppSettingsPage.prototype.onKeyPress = function(event) {
+ // get submit event
+ if (event.key === 'Enter') {
+ // this.submitPassword(event)
+ }
+}
+
+
+AppSettingsPage.prototype.navigateToAccounts = function(event){
+ event.stopPropagation()
+ this.props.dispatch(actions.showAccountsPage())
+}
diff --git a/ui/app/store.js b/ui/app/store.js
new file mode 100644
index 000000000..a738f1a12
--- /dev/null
+++ b/ui/app/store.js
@@ -0,0 +1,19 @@
+const createStore = require('redux').createStore
+const applyMiddleware = require('redux').applyMiddleware
+const thunkMiddleware = require('redux-thunk')
+const createLogger = require('redux-logger')
+const rootReducer = require('./reducers')
+
+module.exports = configureStore
+
+
+const loggerMiddleware = createLogger()
+
+const createStoreWithMiddleware = applyMiddleware(
+ thunkMiddleware,
+ loggerMiddleware
+)(createStore)
+
+function configureStore(initialState) {
+ return createStoreWithMiddleware(rootReducer, initialState)
+}
diff --git a/ui/app/template.js b/ui/app/template.js
new file mode 100644
index 000000000..3c2d902b5
--- /dev/null
+++ b/ui/app/template.js
@@ -0,0 +1,31 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('./actions')
+
+module.exports = connect(mapStateToProps)(COMPONENTNAME)
+
+function mapStateToProps(state) {
+ return {}
+}
+
+inherits(COMPONENTNAME, Component)
+function COMPONENTNAME() {
+ Component.call(this)
+}
+
+COMPONENTNAME.prototype.render = function() {
+ var state = this.props
+ var rpc = state.rpc
+
+ return (
+ h('div', {
+ style: {
+ display: 'none',
+ }
+ }, [
+ ])
+ )
+}
+
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
new file mode 100644
index 000000000..8aac1b1ff
--- /dev/null
+++ b/ui/app/unlock.js
@@ -0,0 +1,101 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('./actions')
+const Mascot = require('./components/mascot')
+const getCaretCoordinates = require('textarea-caret')
+const EventEmitter = require('events').EventEmitter
+
+module.exports = connect(mapStateToProps)(UnlockScreen)
+
+
+inherits(UnlockScreen, Component)
+function UnlockScreen() {
+ Component.call(this)
+ this.animationEventEmitter = new EventEmitter()
+}
+
+function mapStateToProps(state) {
+ return {
+ warning: state.appState.warning,
+ }
+}
+
+UnlockScreen.prototype.render = function() {
+ const state = this.props
+ const warning = state.warning
+ return (
+
+ h('.unlock-screen.flex-column.flex-center.flex-grow', [
+
+ h('h2.page-subtitle', 'Welcome!'),
+
+ h(Mascot, {
+ animationEventEmitter: this.animationEventEmitter,
+ }),
+
+ h('label', {
+ htmlFor: 'password-box',
+ }, 'Enter Password:'),
+
+ h('input', {
+ type: 'password',
+ id: 'password-box',
+ onKeyPress: this.onKeyPress.bind(this),
+ onInput: this.inputChanged.bind(this),
+ }),
+
+ h('.error', {
+ style: {
+ display: warning ? 'block' : 'none',
+ }
+ }, warning),
+
+ h('button.primary.cursor-pointer', {
+ onClick: this.onSubmit.bind(this),
+ }, 'Unlock'),
+
+ ])
+
+ )
+}
+
+UnlockScreen.prototype.componentDidMount = function(){
+ document.getElementById('password-box').focus()
+}
+
+UnlockScreen.prototype.onSubmit = function(event) {
+ const input = document.getElementById('password-box')
+ const password = input.value
+ this.props.dispatch(actions.tryUnlockMetamask(password))
+}
+
+UnlockScreen.prototype.onKeyPress = function(event) {
+ if (event.key === 'Enter') {
+ this.submitPassword(event)
+ }
+}
+
+UnlockScreen.prototype.submitPassword = function(event){
+ var element = event.target
+ var password = element.value
+ // reset input
+ element.value = ''
+ this.props.dispatch(actions.tryUnlockMetamask(password))
+}
+
+UnlockScreen.prototype.inputChanged = function(event){
+ // tell mascot to look at page action
+ var element = event.target
+ var boundingRect = element.getBoundingClientRect()
+ var coordinates = getCaretCoordinates(element, element.selectionEnd)
+ this.animationEventEmitter.emit('point', {
+ x: boundingRect.left + coordinates.left - element.scrollLeft,
+ y: boundingRect.top + coordinates.top - element.scrollTop,
+ })
+}
+
+UnlockScreen.prototype.emitAnim = function(name, a, b, c){
+ this.animationEventEmitter.emit(name, a, b, c)
+}
diff --git a/ui/app/util.js b/ui/app/util.js
new file mode 100644
index 000000000..4c31e54f4
--- /dev/null
+++ b/ui/app/util.js
@@ -0,0 +1,102 @@
+const ethUtil = require('ethereumjs-util')
+
+var valueTable = {
+ wei: '1000000000000000000',
+ kwei: '1000000000000000',
+ mwei: '1000000000000',
+ gwei: '1000000000',
+ szabo: '1000000',
+ finney:'1000',
+ ether: '1',
+ kether:'0.001',
+ mether:'0.000001',
+ gether:'0.000000001',
+ tether:'0.000000000001',
+}
+var bnTable = {}
+for (var currency in valueTable) {
+ bnTable[currency] = new ethUtil.BN(valueTable[currency], 10)
+}
+
+module.exports = {
+ valuesFor: valuesFor,
+ addressSummary: addressSummary,
+ numericBalance: numericBalance,
+ formatBalance: formatBalance,
+ dataSize: dataSize,
+ readableDate: readableDate,
+ ethToWei: ethToWei,
+ weiToEth: weiToEth,
+ normalizeToWei: normalizeToWei,
+ valueTable: valueTable,
+ bnTable: bnTable,
+}
+
+
+function valuesFor(obj) {
+ if (!obj) return []
+ return Object.keys(obj)
+ .map(function(key){ return obj[key] })
+}
+
+function addressSummary(address) {
+ return address ? address.slice(0,2+8)+'...'+address.slice(-4) : '...'
+}
+
+// Takes wei Hex, returns wei BN, even if input is null
+function numericBalance(balance) {
+ if (!balance) return new ethUtil.BN(0, 16)
+ var stripped = ethUtil.stripHexPrefix(balance)
+ return new ethUtil.BN(stripped, 16)
+}
+
+// Takes eth BN, returns BN wei
+function ethToWei(bn) {
+ var eth = new ethUtil.BN('1000000000000000000')
+ var wei = bn.mul(eth)
+ return wei
+}
+
+// Takes BN in Wei, returns BN in eth
+function weiToEth(bn) {
+ var diff = new ethUtil.BN('1000000000000000000')
+ var eth = bn.div(diff)
+ return eth
+}
+
+function formatBalance(balance) {
+ if (!balance) return 'None'
+ var wei = numericBalance(balance)
+ var eth = weiToEth(wei)
+ return eth.toString(10) + ' ETH'
+}
+
+function dataSize(data) {
+ var size = data ? ethUtil.stripHexPrefix(data).length : 0
+ return size+' bytes'
+}
+
+// Takes a BN and an ethereum currency name,
+// returns a BN in wei
+function normalizeToWei(amount, currency) {
+ try {
+ var ether = amount.div(bnTable[currency])
+ var wei = ether.mul(bnTable.wei)
+ return wei
+ } catch (e) {}
+ return amount
+}
+
+function readableDate(ms) {
+ var date = new Date(ms)
+ var month = date.getMonth()
+ var day = date.getDate()
+ var year = date.getFullYear()
+ var hours = date.getHours()
+ var minutes = "0" + date.getMinutes()
+ var seconds = "0" + date.getSeconds()
+
+ var date = `${month}/${day}/${year}`
+ var time = `${hours}:${minutes.substr(-2)}:${seconds.substr(-2)}`
+ return `${date} ${time}`
+}
diff --git a/ui/css.js b/ui/css.js
new file mode 100644
index 000000000..b7bc7d363
--- /dev/null
+++ b/ui/css.js
@@ -0,0 +1,26 @@
+const fs = require('fs')
+
+module.exports = bundleCss
+
+var cssFiles = {
+ 'fonts.css': fs.readFileSync(__dirname+'/app/css/fonts.css', 'utf8'),
+ 'reset.css': fs.readFileSync(__dirname+'/app/css/reset.css', 'utf8'),
+ 'lib.css': fs.readFileSync(__dirname+'/app/css/lib.css', 'utf8'),
+ 'index.css': fs.readFileSync(__dirname+'/app/css/index.css', 'utf8'),
+ 'transitions.css': fs.readFileSync(__dirname+'/app/css/transitions.css', 'utf8'),
+}
+
+function bundleCss() {
+ var cssBundle = Object.keys(cssFiles).reduce(function(bundle, fileName){
+ var fileContent = cssFiles[fileName]
+ var output = String()
+
+ output += '/*========== '+fileName+' ==========*/\n\n'
+ output += fileContent
+ output += '\n\n'
+
+ return bundle+output
+ }, String())
+
+ return cssBundle
+}
diff --git a/ui/design/1st_time_use.png b/ui/design/1st_time_use.png
new file mode 100644
index 000000000..c18ced5e2
Binary files /dev/null and b/ui/design/1st_time_use.png differ
diff --git a/ui/design/metamask_wfs_jan_13.pdf b/ui/design/metamask_wfs_jan_13.pdf
new file mode 100644
index 000000000..c77c9274a
Binary files /dev/null and b/ui/design/metamask_wfs_jan_13.pdf differ
diff --git a/ui/design/metamask_wfs_jan_13.png b/ui/design/metamask_wfs_jan_13.png
new file mode 100644
index 000000000..d71d7bdb4
Binary files /dev/null and b/ui/design/metamask_wfs_jan_13.png differ
diff --git a/ui/design/metamask_wfs_jan_18.pdf b/ui/design/metamask_wfs_jan_18.pdf
new file mode 100644
index 000000000..592ba8532
Binary files /dev/null and b/ui/design/metamask_wfs_jan_18.pdf differ
diff --git a/ui/example.js b/ui/example.js
new file mode 100644
index 000000000..b32da4be4
--- /dev/null
+++ b/ui/example.js
@@ -0,0 +1,123 @@
+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 unconfTxs = {}
+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()
+ unconfTxs[id] = {
+ id: id,
+ txParams: txParams,
+ time: time,
+ }
+}
+
+var isUnlocked = false
+var selectedAddress = null
+
+function getState(){
+ return {
+ isUnlocked: isUnlocked,
+ identities: isUnlocked ? identities : {},
+ unconfTxs: isUnlocked ? unconfTxs : {},
+ selectedAddress: selectedAddress,
+ }
+}
+
+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.setSelectedAddress = function(address, cb){
+ selectedAddress = 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)
+
+var app = 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
+}
\ No newline at end of file
diff --git a/ui/index.html b/ui/index.html
new file mode 100644
index 000000000..ba8a8baac
--- /dev/null
+++ b/ui/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+ MetaMask
+
+
+
+
+
+
+
+
+
+
+
+
+
+