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

Merge master.

This commit is contained in:
Kevin Serrano 2016-08-15 10:50:53 -07:00
parent cb0c1f25ba 271e3c4fdf
commit 6895d330ff
31 changed files with 1309 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -2,7 +2,11 @@
## Current Master
- Integrate ShapeShift
- Add a for for Coinbase to specify amount to buy
- Fix various typos.
- Make dapp-metamask connection more reliable
- Remove Ethereum Classic from provider menu.
## 2.7.3 2016-07-29

1
app/scripts/background.js
View File

@ -13,6 +13,7 @@ const extension = require('./lib/extension')
const STORAGE_KEY = 'metamask-config'
const controller = new MetamaskController({
// User confirmation callbacks:
showUnconfirmedMessage,

5
app/scripts/config.js
View File

@ -1,14 +1,13 @@
const MAINET_RPC_URL = 'https://mainnet.infura.io/'
const TESTNET_RPC_URL = 'https://morden.infura.io/'
const DEFAULT_RPC_URL = TESTNET_RPC_URL
const CLASSIC_RPC_URL = 'https://mainnet-nf.infura.io/'
global.METAMASK_DEBUG = false
module.exports = {
network: {
default: DEFAULT_RPC_URL,
mainnet: MAINET_RPC_URL,
testnet: TESTNET_RPC_URL,
classic: CLASSIC_RPC_URL,
},
}

2
app/scripts/contentscript.js
View File

@ -1,4 +1,4 @@
const LocalMessageDuplexStream = require('./lib/local-message-stream.js')
const LocalMessageDuplexStream = require('post-message-stream')
const PortStream = require('./lib/port-stream.js')
const ObjectMultiplex = require('./lib/obj-multiplex')
const extension = require('./lib/extension')

2
app/scripts/inpage.js
View File

@ -1,7 +1,7 @@
/*global Web3*/
cleanContextForImports()
require('web3/dist/web3.min.js')
const LocalMessageDuplexStream = require('./lib/local-message-stream.js')
const LocalMessageDuplexStream = require('post-message-stream')
const setupDappAutoReload = require('./lib/auto-reload.js')
const MetamaskInpageProvider = require('./lib/inpage-provider.js')
restoreContextAfterImports()

2
app/scripts/lib/auto-reload.js
View File

@ -1,5 +1,5 @@
const once = require('once')
const ensnare = require('./ensnare.js')
const ensnare = require('ensnare')
module.exports = setupDappAutoReload

12
app/scripts/lib/config-manager.js
View File

@ -5,7 +5,6 @@ const rp = require('request-promise')
const TESTNET_RPC = MetamaskConfig.network.testnet
const MAINNET_RPC = MetamaskConfig.network.mainnet
const CLASSIC_RPC = MetamaskConfig.network.classic
/* The config-manager is a convenience object
* wrapping a pojo-migrator.
@ -146,9 +145,6 @@ ConfigManager.prototype.getCurrentRpcAddress = function () {
case 'testnet':
return TESTNET_RPC
case 'classic':
return CLASSIC_RPC
default:
return provider && provider.rpcTarget ? provider.rpcTarget : TESTNET_RPC
}
@ -320,9 +316,13 @@ ConfigManager.prototype.getConversionDate = function () {
return ('conversionDate' in data) && data.conversionDate
}
ConfigManager.prototype.setShouldntShowWarning = function (confirmed) {
ConfigManager.prototype.setShouldntShowWarning = function () {
var data = this.getData()
data.isEthConfirmed = confirmed
if (data.isEthConfirmed) {
data.isEthConfirmed = !data.isEthConfirmed
} else {
data.isEthConfirmed = true
}
this.setData(data)
}

24
app/scripts/lib/ensnare.js
View File

@ -1,24 +0,0 @@
module.exports = ensnare
// creates a proxy object that calls cb everytime the obj's properties/fns are accessed
function ensnare (obj, cb) {
var proxy = {}
Object.keys(obj).forEach(function (key) {
var val = obj[key]
switch (typeof val) {
case 'function':
proxy[key] = function () {
cb()
val.apply(obj, arguments)
}
return
default:
Object.defineProperty(proxy, key, {
get: function () { cb(); return obj[key] },
set: function (val) { cb(); obj[key] = val; return val },
})
return
}
})
return proxy
}

9
app/scripts/lib/idStore.js
View File

@ -156,8 +156,9 @@ IdentityStore.prototype.getNetwork = function (err) {
this._currentState.network = 'loading'
return this._didUpdate()
}
console.log('web3.getNetwork returned ' + network)
if (global.METAMASK_DEBUG) {
console.log('web3.getNetwork returned ' + network)
}
this._currentState.network = network
this._didUpdate()
})
@ -478,7 +479,9 @@ IdentityStore.prototype._restoreFromSeed = function (password, seed, derivedKey)
keyStore.generateNewAddress(derivedKey, 3)
configManager.setWallet(keyStore.serialize())
console.log('restored from seed. saved to keystore')
if (global.METAMASK_DEBUG) {
console.log('restored from seed. saved to keystore')
}
return keyStore
}

47
app/scripts/lib/inpage-provider.js
View File

@ -1,9 +1,7 @@
const HttpProvider = require('web3/lib/web3/httpprovider')
const Streams = require('mississippi')
const ObjectMultiplex = require('./obj-multiplex')
const StreamProvider = require('web3-stream-provider')
const RemoteStore = require('./remote-store.js').RemoteStore
const MetamaskConfig = require('../config.js')
module.exports = MetamaskInpageProvider
@ -27,13 +25,6 @@ function MetamaskInpageProvider (connectionStream) {
})
self.publicConfigStore = publicConfigStore
// connect to sync provider
self.syncProvider = createSyncProvider(publicConfigStore.get('provider'))
// subscribe to publicConfig to update the syncProvider on change
publicConfigStore.subscribe(function (state) {
self.syncProvider = createSyncProvider(state.provider)
})
// connect to async provider
var asyncProvider = new StreamProvider()
Streams.pipe(asyncProvider, multiStream.createStream('provider'), asyncProvider, function (err) {
@ -48,9 +39,9 @@ function MetamaskInpageProvider (connectionStream) {
MetamaskInpageProvider.prototype.send = function (payload) {
const self = this
let selectedAddress
var result = null
let result = null
switch (payload.method) {
case 'eth_accounts':
@ -65,9 +56,10 @@ MetamaskInpageProvider.prototype.send = function (payload) {
result = selectedAddress || '0x0000000000000000000000000000000000000000'
break
// fallback to normal rpc
// throw not-supported Error
default:
return self.syncProvider.send(payload)
var message = 'The MetaMask Web3 object does not support synchronous methods. See https://github.com/MetaMask/faq/blob/master/DEVELOPERS.md#all-async---think-of-metamask-as-a-light-client for details.'
throw new Error(message)
}
@ -89,35 +81,6 @@ MetamaskInpageProvider.prototype.isConnected = function () {
// util
function createSyncProvider (providerConfig) {
providerConfig = providerConfig || {}
let syncProviderUrl
if (providerConfig.rpcTarget) {
syncProviderUrl = providerConfig.rpcTarget
} else {
switch (providerConfig.type) {
case 'testnet':
syncProviderUrl = MetamaskConfig.network.testnet
break
case 'mainnet':
syncProviderUrl = MetamaskConfig.network.mainnet
break
default:
syncProviderUrl = MetamaskConfig.network.default
}
}
const provider = new HttpProvider(syncProviderUrl)
// Stubbing out the send method to throw on sync methods:
provider.send = function() {
var message = 'The MetaMask Web3 object does not support synchronous methods. See https://github.com/MetaMask/faq#all-async---think-of-metamask-as-a-light-client for details.'
throw new Error(message)
}
return provider
}
function remoteStoreWithLocalStorageCache (storageKey) {
// read local cache
var initState = JSON.parse(localStorage[storageKey] || '{}')

56
app/scripts/lib/local-message-stream.js
View File

@ -1,56 +0,0 @@
const Duplex = require('readable-stream').Duplex
const inherits = require('util').inherits
module.exports = LocalMessageDuplexStream
inherits(LocalMessageDuplexStream, Duplex)
function LocalMessageDuplexStream (opts) {
Duplex.call(this, {
objectMode: true,
})
// this._origin = opts.origin
this._name = opts.name
this._target = opts.target
// console.log('LocalMessageDuplexStream ('+this._name+') - initialized...')
window.addEventListener('message', this._onMessage.bind(this), false)
}
// private
LocalMessageDuplexStream.prototype._onMessage = function (event) {
var msg = event.data
// console.log('LocalMessageDuplexStream ('+this._name+') - heard message...', event)
// validate message
if (event.origin !== location.origin) return // console.log('LocalMessageDuplexStream ('+this._name+') - rejected - (event.origin !== location.origin) ')
if (typeof msg !== 'object') return // console.log('LocalMessageDuplexStream ('+this._name+') - rejected - (typeof msg !== "object") ')
if (msg.target !== this._name) return // console.log('LocalMessageDuplexStream ('+this._name+') - rejected - (msg.target !== this._name) ', msg.target, this._name)
if (!msg.data) return // console.log('LocalMessageDuplexStream ('+this._name+') - rejected - (!msg.data) ')
// console.log('LocalMessageDuplexStream ('+this._name+') - accepted', msg.data)
// forward message
try {
this.push(msg.data)
} catch (err) {
this.emit('error', err)
}
}
// stream plumbing
LocalMessageDuplexStream.prototype._read = noop
LocalMessageDuplexStream.prototype._write = function (data, encoding, cb) {
// console.log('LocalMessageDuplexStream ('+this._name+') - sending message...')
var message = {
target: this._target,
data: data,
}
window.postMessage(message, location.origin)
cb()
}
// util
function noop () {}

10
app/scripts/metamask-controller.js
View File

@ -99,7 +99,9 @@ module.exports = class MetamaskController {
function logger (err, request, response) {
if (err) return console.error(err)
if (!request.isMetamaskInternal) {
console.log(`RPC (${originDomain}):`, request, '->', response)
if (global.METAMASK_DEBUG) {
console.log(`RPC (${originDomain}):`, request, '->', response)
}
if (response.error) {
console.error('Error in RPC response:\n', response.error)
}
@ -223,7 +225,9 @@ module.exports = class MetamaskController {
// Log blocks
processBlock (block) {
console.log(`BLOCK CHANGED: #${block.number.toString('hex')} 0x${block.hash.toString('hex')}`)
if (global.METAMASK_DEBUG) {
console.log(`BLOCK CHANGED: #${block.number.toString('hex')} 0x${block.hash.toString('hex')}`)
}
this.verifyNetwork()
}
@ -274,7 +278,7 @@ module.exports = class MetamaskController {
agreeToEthWarning (cb) {
try {
this.configManager.setShouldntShowWarning(true)
this.configManager.setShouldntShowWarning()
cb()
} catch (e) {
cb(e)

2
development/states.js
View File

File diff suppressed because one or more lines are too long

189
development/states/custom-rpc.json Normal file
View File

File diff suppressed because one or more lines are too long

0
development/states/pending_crash.json → development/states/pending-crash.json
View File

3
mock-dev.js
View File

@ -19,6 +19,7 @@ const Root = require('./ui/app/root')
const configureStore = require('./ui/app/store')
const actions = require('./ui/app/actions')
const states = require('./development/states')
const Selector = require('./development/selector')
const MetamaskController = require('./app/scripts/metamask-controller')
const extension = require('./development/mockExtension')
@ -139,6 +140,8 @@ render(
},
}, 'Reset State'),
h(Selector, { actions, selectedKey: selectedView, states, store }),
h('.mock-app-root', {
style: {
height: '500px',

5
package.json
View File

@ -35,6 +35,7 @@
"debounce": "^1.0.0",
"dnode": "^1.2.2",
"end-of-stream": "^1.1.0",
"ensnare": "^1.0.0",
"eth-bin-to-ops": "^1.0.0",
"eth-lightwallet": "^2.3.3",
"eth-query": "^1.0.3",
@ -53,6 +54,7 @@
"once": "^1.3.3",
"pojo-migrator": "^2.1.0",
"polyfill-crypto.getrandomvalues": "^1.0.0",
"post-message-stream": "^1.0.0",
"pumpify": "^1.3.4",
"react": "^15.0.2",
"react-addons-css-transition-group": "^15.0.2",
@ -73,7 +75,7 @@
"vreme": "^3.0.2",
"web3": "ethereum/web3.js#0.16.0",
"web3-provider-engine": "^7.8.3",
"web3-stream-provider": "^2.0.5",
"web3-stream-provider": "^2.0.6",
"xtend": "^4.0.1"
},
"devDependencies": {
@ -107,6 +109,7 @@
"qunit": "^0.9.1",
"sinon": "^1.17.3",
"tape": "^4.5.1",
"testem": "^1.10.3",
"uglifyify": "^3.0.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",

24
ui/app/account-detail.js
View File

@ -15,7 +15,7 @@ const ExportAccountView = require('./components/account-export')
const ethUtil = require('ethereumjs-util')
const EditableLabel = require('./components/editable-label')
const Tooltip = require('./components/tooltip')
const BuyButtonSubview = require('./components/buy-button-subview')
module.exports = connect(mapStateToProps)(AccountDetailScreen)
function mapStateToProps (state) {
@ -173,14 +173,19 @@ AccountDetailScreen.prototype.render = function () {
}),
h('button', {
onClick: () => props.dispatch(actions.buyEth(selected)),
onClick: () => props.dispatch(actions.buyEthView(selected)),
style: {
marginBottom: '20px',
marginRight: '8px',
position: 'absolute',
left: '219px',
},
}, 'BUY'),
}, props.accountDetail.subview === 'buyForm' ? [h('i.fa.fa-arrow-left', {
style: {
width: '22.641px',
height: '14px',
},
})] : 'BUY'),
h('button', {
onClick: () => props.dispatch(actions.showSendPage()),
@ -221,6 +226,8 @@ AccountDetailScreen.prototype.subview = function () {
case 'export':
var state = extend({key: 'export'}, this.props)
return h(ExportAccountView, state)
case 'buyForm':
return h(BuyButtonSubview, extend({key: 'buyForm'}, this.props))
default:
return this.transactionList()
}
@ -251,3 +258,14 @@ AccountDetailScreen.prototype.transactionList = function () {
AccountDetailScreen.prototype.requestAccountExport = function () {
this.props.dispatch(actions.requestExportAccount())
}
AccountDetailScreen.prototype.buyButtonDeligator = function () {
var props = this.props
if (this.props.accountDetail.subview === 'buyForm') {
props.dispatch(actions.backToAccountDetail(props.address))
} else {
props.dispatch(actions.buyEthView())
}
}

161
ui/app/actions.js
View File

@ -115,6 +115,26 @@ var actions = {
// buy Eth with coinbase
BUY_ETH: 'BUY_ETH',
buyEth: buyEth,
buyEthView: buyEthView,
BUY_ETH_VIEW: 'BUY_ETH_VIEW',
UPDATE_COINBASE_AMOUNT: 'UPDATE_COIBASE_AMOUNT',
updateCoinBaseAmount: updateCoinBaseAmount,
UPDATE_BUY_ADDRESS: 'UPDATE_BUY_ADDRESS',
updateBuyAddress: updateBuyAddress,
COINBASE_SUBVIEW: 'COINBASE_SUBVIEW',
coinBaseSubview: coinBaseSubview,
SHAPESHIFT_SUBVIEW: 'SHAPESHIFT_SUBVIEW',
shapeShiftSubview: shapeShiftSubview,
PAIR_UPDATE: 'PAIR_UPDATE',
pairUpdate: pairUpdate,
coinShiftRquest: coinShiftRquest,
SHOW_SUB_LOADING_INDICATION: 'SHOW_SUB_LOADING_INDICATION',
showSubLoadingIndication: showSubLoadingIndication,
HIDE_SUB_LOADING_INDICATION: 'HIDE_SUB_LOADING_INDICATION',
hideSubLoadingIndication: hideSubLoadingIndication,
// QR STUFF:
SHOW_QR: 'SHOW_QR',
getQr: getQr,
}
module.exports = actions
@ -520,6 +540,18 @@ function hideLoadingIndication () {
}
}
function showSubLoadingIndication () {
return {
type: actions.SHOW_SUB_LOADING_INDICATION,
}
}
function hideSubLoadingIndication () {
return {
type: actions.HIDE_SUB_LOADING_INDICATION,
}
}
function showWarning (text) {
return this.displayWarning(text)
}
@ -618,3 +650,132 @@ function buyEth (address, amount) {
})
}
}
function buyEthView (address) {
return {
type: actions.BUY_ETH_VIEW,
value: address,
}
}
function updateCoinBaseAmount (value) {
return {
type: actions.UPDATE_COINBASE_AMOUNT,
value,
}
}
function updateBuyAddress (value) {
return {
type: actions.UPDATE_BUY_ADDRESS,
value,
}
}
function coinBaseSubview () {
return {
type: actions.COINBASE_SUBVIEW,
}
}
function pairUpdate (coin) {
return (dispatch) => {
dispatch(actions.showSubLoadingIndication())
dispatch(actions.hideWarning())
shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
dispatch(actions.hideSubLoadingIndication())
dispatch({
type: actions.PAIR_UPDATE,
value: {
marketinfo: mktResponse,
},
})
})
}
}
function shapeShiftSubview (network) {
var pair = 'btc_eth'
return (dispatch) => {
dispatch(actions.showSubLoadingIndication())
shapeShiftRequest('marketinfo', {pair}, (mktResponse) => {
shapeShiftRequest('getcoins', {}, (response) => {
dispatch(actions.hideSubLoadingIndication())
if (mktResponse.error) return dispatch(actions.showWarning(mktResponse.error))
dispatch({
type: actions.SHAPESHIFT_SUBVIEW,
value: {
marketinfo: mktResponse,
coinOptions: response,
},
})
})
})
}
}
function coinShiftRquest (data, marketData) {
return (dispatch) => {
dispatch(actions.showLoadingIndication())
shapeShiftRequest('shift', { method: 'POST', data}, (response) => {
if (response.error) return dispatch(actions.showWarning(response.error))
var message = `
Deposit your ${response.depositType} to the address bellow:`
dispatch(actions.getQr(response.deposit, '125x125', [message].concat(marketData)))
})
}
}
function getQr (data, size, message) {
return (dispatch) => {
qrRequest(data, size, (response) => {
dispatch(actions.hideLoadingIndication())
if (response.error) return dispatch(actions.showWarning(response.error))
dispatch({
type: actions.SHOW_QR,
value: {
qr: response,
message: message,
data: data,
},
})
})
}
}
function shapeShiftRequest (query, options, cb) {
var queryResponse, method
!options ? options = {} : null
options.method ? method = options.method : method = 'GET'
var requestListner = function (request) {
queryResponse = JSON.parse(this.responseText)
cb ? cb(queryResponse) : null
return queryResponse
}
var shapShiftReq = new XMLHttpRequest()
shapShiftReq.addEventListener('load', requestListner)
shapShiftReq.open(method, `https://shapeshift.io/${query}/${options.pair ? options.pair : ''}`, true)
if (options.method === 'POST') {
var jsonObj = JSON.stringify(options.data)
shapShiftReq.setRequestHeader('Content-Type', 'application/json')
return shapShiftReq.send(jsonObj)
} else {
return shapShiftReq.send()
}
}
function qrRequest (data, size, cb) {
var requestListner = function (request) {
cb ? cb(this.responseText) : null
return this.responseText
}
var qrReq = new XMLHttpRequest()
qrReq.addEventListener('load', requestListner)
qrReq.open('GET', `https://api.qrserver.com/v1/create-qr-code/?size=${size}&format=svg&data=${data}`, true)
qrReq.send()
}

13
ui/app/app.js
View File

@ -28,7 +28,7 @@ const DropMenuItem = require('./components/drop-menu-item')
const NetworkIndicator = require('./components/network')
const Tooltip = require('./components/tooltip')
const EthStoreWarning = require('./eth-store-warning')
const BuyView = require('./components/buy-button-subview')
module.exports = connect(mapStateToProps)(App)
inherits(App, Component)
@ -225,15 +225,6 @@ App.prototype.renderNetworkDropdown = function () {
provider: props.provider,
}),
h(DropMenuItem, {
label: 'Ethereum Classic Network',
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
action: () => props.dispatch(actions.setProviderType('classic')),
icon: h('.menu-icon.hollow-diamond'),
activeNetworkRender: props.network,
provider: props.provider,
}),
h(DropMenuItem, {
label: 'Morden Test Network',
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
@ -366,6 +357,8 @@ App.prototype.renderPrimary = function () {
case 'createVault':
return h(CreateVaultScreen, {key: 'createVault'})
case 'buyEth':
return h(BuyView, {key: 'buyEthView'})
default:
return h(AccountDetailScreen, {key: 'account-detail'})

123
ui/app/components/buy-button-subview.js Normal file
View File

@ -0,0 +1,123 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../actions')
const CoinbaseForm = require('./coinbase-form')
const ShapeshiftForm = require('./shapeshift-form')
const extension = require('../../../app/scripts/lib/extension')
module.exports = connect(mapStateToProps)(BuyButtonSubview)
function mapStateToProps (state) {
return {
selectedAccount: state.selectedAccount,
warning: state.appState.warning,
buyView: state.appState.buyView,
network: state.metamask.network,
provider: state.metamask.provider,
}
}
inherits(BuyButtonSubview, Component)
function BuyButtonSubview () {
Component.call(this)
}
BuyButtonSubview.prototype.render = function () {
const props = this.props
const currentForm = props.buyView.formView
return (
h('.buy-eth-section', [
// back button
h('.flex-row', {
style: {
alignItems: 'center',
justifyContent: 'center',
},
}, [
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
onClick: () => props.dispatch(actions.backToAccountDetail(props.selectedAccount)),
style: {
position: 'absolute',
left: '10px',
},
}),
h('h2.page-subtitle', 'Buy Eth'),
]),
h('h3.flex-row.text-transform-uppercase', {
style: {
background: '#EBEBEB',
color: '#AEAEAE',
paddingTop: '4px',
justifyContent: 'space-around',
},
}, [
h(currentForm.coinbase ? '.activeForm' : '.inactiveForm', {
onClick: () => props.dispatch(actions.coinBaseSubview()),
}, 'Coinbase'),
h('a', {
onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'),
}, [
h('i.fa.fa-question-circle', {
style: {
position: 'relative',
right: '33px',
},
}),
]),
h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm', {
onClick: () => props.dispatch(actions.shapeShiftSubview(props.provider.type)),
}, 'Shapeshift'),
h('a', {
href: 'https://github.com/MetaMask/faq/blob/master/COINBASE.md',
onClick: (event) => this.navigateTo('https://info.shapeshift.io/about'),
}, [
h('i.fa.fa-question-circle', {
style: {
position: 'relative',
right: '28px',
},
}),
]),
]),
this.formVersionSubview(),
])
)
}
BuyButtonSubview.prototype.formVersionSubview = function () {
if (this.props.network === '1') {
if (this.props.buyView.formView.coinbase) {
return h(CoinbaseForm, this.props)
} else if (this.props.buyView.formView.shapeshift) {
return h(ShapeshiftForm, this.props)
}
} else {
return h('div.flex-column', {
style: {
alignItems: 'center',
margin: '50px',
},
}, [
h('h3.text-transform-uppercase', {
style: {
width: '225px',
},
}, 'In order to access this feature please switch too the Main Network'),
h('h3.text-transform-uppercase', 'or:'),
this.props.network === '2' ? h('button.text-transform-uppercase', {
onClick: () => this.props.dispatch(actions.buyEth()),
style: {
marginTop: '15px',
},
}, 'Go To Test Faucet') : null,
])
}
}
BuyButtonSubview.prototype.navigateTo = function (url) {
extension.tabs.create({ url })
}

162
ui/app/components/coinbase-form.js Normal file
View File

@ -0,0 +1,162 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../actions')
const isValidAddress = require('../util').isValidAddress
module.exports = connect(mapStateToProps)(CoinbaseForm)
function mapStateToProps(state) {
return {
selectedAccount: state.selectedAccount,
warning: state.appState.warning,
}
}
inherits(CoinbaseForm, Component)
function CoinbaseForm() {
Component.call(this)
}
CoinbaseForm.prototype.render = function () {
var props = this.props
var amount = props.buyView.amount
var address = props.buyView.buyAddress
return h('.flex-column', {
style: {
// margin: '10px',
padding: '25px',
},
}, [
h('.flex-column', {
style: {
alignItems: 'flex-start',
},
}, [
h('.flex-row', [
h('div', 'Address:'),
h('.ellip-address', address),
]),
h('.flex-row', [
h('div', 'Amount: $'),
h('.input-container', [
h('input.buy-inputs', {
style: {
width: '3em',
boxSizing: 'border-box',
},
defaultValue: amount,
onChange: this.handleAmount.bind(this),
}),
h('i.fa.fa-pencil-square-o.edit-text', {
style: {
fontSize: '12px',
color: '#F7861C',
position: 'relative',
bottom: '5px',
right: '11px',
},
}),
]),
]),
]),
h('.info-gray', {
style: {
fontSize: '10px',
fontFamily: 'Montserrat Light',
margin: '15px',
lineHeight: '13px',
},
},
`there is a USD$ 5 a day max and a USD$ 50
dollar limit per the life time of an account without a
coinbase account. A fee of 3.75% will be aplied to debit/credit cards.`),
!props.warning ? h('div', {
style: {
width: '340px',
height: '22px',
},
}) : props.warning && h('span.error.flex-center', props.warning),
h('.flex-row', {
style: {
justifyContent: 'space-around',
margin: '33px',
},
}, [
h('button', {
onClick: this.toCoinbase.bind(this),
}, 'Continue to Coinbase'),
h('button', {
onClick: () => props.dispatch(actions.backTobuyView(props.accounts.address)),
}, 'Cancel'),
]),
])
}
CoinbaseForm.prototype.handleAmount = function (event) {
this.props.dispatch(actions.updateCoinBaseAmount(event.target.value))
}
CoinbaseForm.prototype.handleAddress = function (event) {
this.props.dispatch(actions.updateBuyAddress(event.target.value))
}
CoinbaseForm.prototype.toCoinbase = function () {
var props = this.props
var amount = props.buyView.amount
var address = props.buyView.buyAddress
var message
if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) {
props.dispatch(actions.buyEth(address, props.buyView.amount))
} else if (!isValidAmountforCoinBase(amount).valid) {
message = isValidAmountforCoinBase(amount).message
return props.dispatch(actions.showWarning(message))
} else {
message = 'Receiving address is invalid.'
return props.dispatch(actions.showWarning(message))
}
}
CoinbaseForm.prototype.renderLoading = function () {
return h('img', {
style: {
width: '27px',
marginRight: '-27px',
},
src: 'images/loading.svg',
})
}
function isValidAmountforCoinBase(amount) {
amount = parseFloat(amount)
if (amount) {
if (amount <= 5 && amount > 0) {
return {
valid: true,
}
} else if (amount > 5) {
return {
valid: false,
message: 'The amount can not be greater then $5',
}
} else {
return {
valid: false,
message: 'Can not buy amounts less then $0',
}
}
} else {
return {
valid: false,
message: 'The amount entered is not a number',
}
}
}

3
ui/app/components/drop-menu-item.js
View File

@ -41,9 +41,6 @@ DropMenuItem.prototype.activeNetworkRender = function () {
case 'Main Ethereum Network':
if (providerType === 'mainnet') return h('.check', '✓')
break
case 'Ethereum Classic Network':
if (providerType === 'classic') return h('.check', '✓')
break
case 'Morden Test Network':
if (activeNetwork === '2') return h('.check', '✓')
break

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

@ -23,7 +23,7 @@ Network.prototype.render = function () {
if (networkNumber === 'loading') {
return h('img', {
return h('img.network-indicator', {
title: 'Attempting to connect to blockchain.',
onClick: (event) => this.props.onClick(event),
style: {
@ -36,9 +36,6 @@ Network.prototype.render = function () {
} else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network'
iconName = 'ethereum-network'
} else if (providerName === 'classic') {
hoverText = 'Ethereum Classic Network'
iconName = 'classic-network'
} else if (parseInt(networkNumber) === 2) {
hoverText = 'Morden Test Network'
iconName = 'morden-test-network'
@ -66,15 +63,6 @@ Network.prototype.render = function () {
}},
'Etherum Main Net'),
])
case 'classic-network':
return h('.network-indicator', [
h('.menu-icon.hollow-diamond'),
h('.network-name', {
style: {
color: '#039396',
}},
'Etherum Classic'),
])
case 'morden-test-network':
return h('.network-indicator', [
h('.menu-icon.red-dot'),

60
ui/app/components/qr-code.js Normal file
View File

@ -0,0 +1,60 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const CopyButton = require('./copyButton')
module.exports = connect(mapStateToProps)(QrCodeView)
function mapStateToProps (state) {
return {
Qr: state.appState.Qr,
buyView: state.appState.buyView,
}
}
inherits(QrCodeView, Component)
function QrCodeView () {
Component.call(this)
}
QrCodeView.prototype.render = function () {
var props = this.props
var Qr = props.Qr
return h('.main-container.flex-column', {
style: {
justifyContent: 'center',
padding: '45px',
alignItems: 'center',
},
}, [
Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('h3', Qr.message),
h('#qr-container.flex-column', {
key: 'qr',
style: {
marginTop: '25px',
marginBottom: '15px',
},
dangerouslySetInnerHTML: {
__html: Qr.image,
},
}),
h('.flex-row', [
h('h3.ellip-address', {
style: {
width: '247px',
},
}, Qr.data),
h(CopyButton, {
value: Qr.data,
}),
]),
])
}
QrCodeView.prototype.renderMultiMessage = function () {
var Qr = this.props.Qr
var multiMessage = Qr.message.map((message) => h('.qr-message', message))
return multiMessage
}

311
ui/app/components/shapeshift-form.js Normal file
View File

@ -0,0 +1,311 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
const actions = require('../actions')
const Qr = require('./qr-code')
const isValidAddress = require('../util').isValidAddress
module.exports = connect(mapStateToProps)(ShapeshiftForm)
function mapStateToProps(state) {
return {
selectedAccount: state.selectedAccount,
warning: state.appState.warning,
isSubLoading: state.appState.isSubLoading,
qrRequested: state.appState.qrRequested,
}
}
inherits(ShapeshiftForm, Component)
function ShapeshiftForm () {
Component.call(this)
}
ShapeshiftForm.prototype.render = function () {
return h(ReactCSSTransitionGroup, {
className: 'css-transition-group',
transitionName: 'main',
transitionEnterTimeout: 300,
transitionLeaveTimeout: 300,
}, [
this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain(),
])
}
ShapeshiftForm.prototype.renderMain = function () {
const marketinfo = this.props.buyView.formView.marketinfo
const coinOptions = this.props.buyView.formView.coinOptions
var coin = marketinfo.pair.split('_')[0].toUpperCase()
return h('.flex-column', {
style: {
// marginTop: '10px',
padding: '25px',
width: '100%',
alignItems: 'center',
},
}, [
h('.flex-row', {
style: {
justifyContent: 'center',
alignItems: 'baseline',
},
}, [
h('img', {
src: coinOptions[coin].image,
width: '25px',
height: '25px',
style: {
marginRight: '5px',
},
}),
h('.input-container', [
h('input#fromCoin.buy-inputs.ex-coins', {
type: 'text',
list: 'coinList',
style: {
boxSizing: 'border-box',
},
onChange: this.handleLiveInput.bind(this),
defaultValue: 'BTC',
}),
this.renderCoinList(),
h('i.fa.fa-pencil-square-o.edit-text', {
style: {
fontSize: '12px',
color: '#F7861C',
position: 'relative',
bottom: '48px',
left: '106px',
},
}),
]),
h('.icon-control', [
h('i.fa.fa-refresh.fa-4.orange', {
style: {
position: 'relative',
bottom: '5px',
left: '5px',
color: '#F7861C',
},
onClick: this.updateCoin.bind(this),
}),
h('i.fa.fa-chevron-right.fa-4.orange', {
style: {
position: 'relative',
bottom: '26px',
left: '10px',
color: '#F7861C',
},
onClick: this.updateCoin.bind(this),
}),
]),
h('#toCoin.ex-coins', marketinfo.pair.split('_')[1].toUpperCase()),
h('img', {
src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image,
width: '25px',
height: '25px',
style: {
marginLeft: '5px',
},
}),
]),
this.props.isSubLoading ? this.renderLoading() : null,
h('.flex-column', {
style: {
width: '235px',
alignItems: 'flex-start',
},
}, [
this.props.warning ? this.props.warning && h('span.error.flex-center', {
style: {
textAlign: 'center',
width: '229px',
height: '82px',
},
},
this.props.warning) : this.renderInfo(),
]),
h('.flex-row', {
style: {
padding: '10px',
paddingBottom: '2px',
width: '100%',
},
}, [
h('div', 'Receiving address:'),
h('.ellip-address', this.props.buyView.buyAddress),
]),
h(this.activeToggle('.input-container'), {
style: {
padding: '10px',
paddingTop: '0px',
width: '100%',
},
}, [
h('div', `${coin} Address:`),
h('input#fromCoinAddress.buy-inputs', {
type: 'text',
placeholder: `Your ${coin} Refund Address`,
style: {
boxSizing: 'border-box',
width: '278px',
height: '20px',
padding: ' 5px ',
},
}),
h('i.fa.fa-pencil-square-o.edit-text', {
style: {
fontSize: '12px',
color: '#F7861C',
position: 'relative',
bottom: '5px',
right: '11px',
},
}),
h('.flex-row', {
style: {
justifyContent: 'flex-end',
},
}, [
h('button', {
onClick: this.shift.bind(this),
style: {
marginTop: '10px',
},
},
'Submit'),
]),
]),
])
}
ShapeshiftForm.prototype.shift = function () {
var props = this.props
var withdrawal = this.props.buyView.buyAddress
var returnAddress = document.getElementById('fromCoinAddress').value
var pair = this.props.buyView.formView.marketinfo.pair
var data = {
'withdrawal': withdrawal,
'pair': pair,
'returnAddress': returnAddress,
}
var message = [
`Deposit Limit: ${props.buyView.formView.marketinfo.limit}`,
`Deposit Minimum:${props.buyView.formView.marketinfo.minimum}`,
]
if (isValidAddress(withdrawal)) {
this.props.dispatch(actions.coinShiftRquest(data, message))
}
}
ShapeshiftForm.prototype.renderCoinList = function () {
var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => {
return h('option', {
value: item,
}, item)
})
return h('datalist#coinList', {
onClick: (event) => {
event.preventDefault()
},
}, list)
}
ShapeshiftForm.prototype.updateCoin = function (event) {
event.preventDefault()
const props = this.props
var coinOptions = this.props.buyView.formView.coinOptions
var coin = document.getElementById('fromCoin').value
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
var message = 'Not a valid coin'
return props.dispatch(actions.showWarning(message))
} else {
return props.dispatch(actions.pairUpdate(coin))
}
}
ShapeshiftForm.prototype.handleLiveInput = function () {
const props = this.props
var coinOptions = this.props.buyView.formView.coinOptions
var coin = document.getElementById('fromCoin').value
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
return null
} else {
return props.dispatch(actions.pairUpdate(coin))
}
}
ShapeshiftForm.prototype.renderInfo = function () {
const marketinfo = this.props.buyView.formView.marketinfo
const coinOptions = this.props.buyView.formView.coinOptions
var coin = marketinfo.pair.split('_')[0].toUpperCase()
return h('span', {
style: {
marginTop: '15px',
marginBottom: '15px',
},
}, [
h('h3.flex-row.text-transform-uppercase', {
style: {
color: '#AEAEAE',
paddingTop: '4px',
justifyContent: 'space-around',
textAlign: 'center',
fontSize: '14px',
},
}, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`),
h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]),
h('.marketinfo', ['Exchange Rate: ', `${marketinfo.rate}`]),
h('.marketinfo', ['Limit: ', `${marketinfo.limit}`]),
h('.marketinfo', ['Minimum : ', `${marketinfo.minimum}`]),
])
}
ShapeshiftForm.prototype.handleAddress = function (event) {
this.props.dispatch(actions.updateBuyAddress(event.target.value))
}
ShapeshiftForm.prototype.activeToggle = function (elementType) {
if (!this.props.buyView.formView.response || this.props.warning) return elementType
return `${elementType}.inactive`
}
ShapeshiftForm.prototype.renderLoading = function () {
return h('span', {
style: {
position: 'absolute',
left: '70px',
bottom: '194px',
background: 'transparent',
width: '229px',
height: '82px',
display: 'flex',
justifyContent: 'center',
},
}, [
h('img', {
style: {
width: '60px',
},
src: 'images/loading.svg',
}),
])
}

121
ui/app/css/index.css
View File

@ -471,3 +471,124 @@ input.large-input {
.eth-warning{
transition: opacity 400ms ease-in, transform 400ms ease-in;
}
.buy-subview{
transition: opacity 400ms ease-in, transform 400ms ease-in;
}
.input-container:hover .edit-text{
visibility: visible;
}
.buy-inputs{
font-family: 'Montserrat Light';
font-size: 13px;
height: 20px;
background: transparent;
box-sizing: border-box;
border: solid;
border-color: transparent;
border-width: 0.5px;
border-radius: 2px;
}
.input-container:hover .buy-inputs{
box-sizing: inherit;
border: solid;
border-color: #F7861C;
border-width: 0.5px;
border-radius: 2px;
}
.buy-inputs:focus{
border: solid;
border-color: #F7861C;
border-width: 0.5px;
border-radius: 2px;
}
.activeForm {
background: #F7F7F7;
border: none;
border-radius: 8px 8px 0px 0px;
width: 50%;
text-align: center;
padding-bottom: 4px;
}
.inactiveForm {
border: none;
border-radius: 8px 8px 0px 0px;
width: 50%;
text-align: center;
padding-bottom: 4px;
}
.ex-coins {
font-family: 'Montserrat Regular';
text-transform: uppercase;
text-align: center;
font-size: 33px;
width: 118px;
height: 42px;
padding: 1px;
color: #4D4D4D;
}
.marketinfo{
font-family: 'Montserrat light';
color: #AEAEAE;
font-size: 12px;
line-height: 14px;
}
#fromCoin::-webkit-calendar-picker-indicator {
display: none;
}
#coinList {
width: 400px;
height: 500px;
overflow: scroll;
}
.icon-control .fa-refresh{
visibility: hidden;
}
.icon-control:hover .fa-refresh{
visibility: visible;
}
.icon-control:hover .fa-chevron-right{
visibility: hidden;
}
.inactive {
color: #AEAEAE;
}
.inactive button{
background: #AEAEAE;
color: white;
}
.ellip-address {
overflow: hidden;
text-overflow: ellipsis;
width: 5em;
font-size: 14px;
font-family: "Montserrat Light";
margin-left: 5px;
}
.qr-message {
font-size: 12px;
color: #F7861C;
}
div.message-container > div:first-child {
font-size: 15px;
color: #4D4D4D;
}

7
ui/app/eth-store-warning.js
View File

@ -35,9 +35,10 @@ EthStoreWarning.prototype.render = function () {
margin: '10px 10px 10px 10px',
},
},
`MetaMask is currently in beta -
exercise caution while handling
and storing your ether.
`The MetaMask team would like to
remind you that MetaMask is currently in beta - so
don't store large
amounts of ether in MetaMask.
`),
h('i.fa.fa-exclamation-triangle.fa-4', {

104
ui/app/reducers/app.js
View File

@ -317,6 +317,15 @@ function reduceApp (state, action) {
isLoading: false,
})
case actions.SHOW_SUB_LOADING_INDICATION:
return extend(appState, {
isSubLoading: true,
})
case actions.HIDE_SUB_LOADING_INDICATION:
return extend(appState, {
isSubLoading: false,
})
case actions.CLEAR_SEED_WORD_CACHE:
return extend(appState, {
transForward: true,
@ -369,15 +378,102 @@ function reduceApp (state, action) {
},
})
case actions.SHOW_ETH_WARNING:
case actions.BUY_ETH_VIEW:
return extend(appState, {
transForward: true,
currentView: {
name: 'accountDetail',
name: 'buyEth',
context: appState.currentView.context,
},
accountDetail: {
subview: 'buy-eth-warning',
buyView: {
subview: 'buyForm',
amount: '5.00',
buyAddress: action.value,
formView: {
coinbase: true,
shapeshift: false,
},
},
})
case actions.UPDATE_BUY_ADDRESS:
return extend(appState, {
buyView: {
subview: 'buyForm',
formView: {
coinbase: appState.buyView.formView.coinbase,
shapeshift: appState.buyView.formView.shapeshift,
},
buyAddress: action.value,
amount: appState.buyView.amount,
},
})
case actions.UPDATE_COINBASE_AMOUNT:
return extend(appState, {
buyView: {
subview: 'buyForm',
formView: {
coinbase: true,
shapeshift: false,
},
buyAddress: appState.buyView.buyAddress,
amount: action.value,
},
})
case actions.COINBASE_SUBVIEW:
return extend(appState, {
buyView: {
subview: 'buyForm',
formView: {
coinbase: true,
shapeshift: false,
},
buyAddress: appState.buyView.buyAddress,
amount: appState.buyView.amount,
},
})
case actions.SHAPESHIFT_SUBVIEW:
return extend(appState, {
buyView: {
subview: 'buyForm',
formView: {
coinbase: false,
shapeshift: true,
marketinfo: action.value.marketinfo,
coinOptions: action.value.coinOptions,
},
buyAddress: appState.buyView.buyAddress,
amount: appState.buyView.amount,
},
})
case actions.PAIR_UPDATE:
return extend(appState, {
buyView: {
subview: 'buyForm',
formView: {
coinbase: false,
shapeshift: true,
marketinfo: action.value.marketinfo,
coinOptions: appState.buyView.formView.coinOptions,
},
buyAddress: appState.buyView.buyAddress,
amount: appState.buyView.amount,
warning: null,
},
})
case actions.SHOW_QR:
return extend(appState, {
qrRequested: true,
transForward: true,
Qr: {
message: action.value.message,
image: action.value.qr,
data: action.value.data,
},
})
default:

3
ui/app/reducers/metamask.js
View File

@ -10,6 +10,7 @@ function reduceMetamask (state, action) {
var metamaskState = extend({
isInitialized: false,
isUnlocked: false,
isEthConfirmed: false,
currentDomain: 'example.com',
rpcTarget: 'https://rawtestrpc.metamask.io/',
identities: {},
@ -36,7 +37,7 @@ function reduceMetamask (state, action) {
case actions.AGREE_TO_ETH_WARNING:
return extend(metamaskState, {
isEthConfirmed: true,
isEthConfirmed: !metamaskState.isEthConfirmed,
})
case actions.UNLOCK_METAMASK:

15
ui/app/store.js
View File

@ -1,17 +1,20 @@
const createStore = require('redux').createStore
const applyMiddleware = require('redux').applyMiddleware
const thunkMiddleware = require('redux-thunk')
const createLogger = require('redux-logger')
const rootReducer = require('./reducers')
const createLogger = require('redux-logger')
global.METAMASK_DEBUG = false
module.exports = configureStore
const loggerMiddleware = createLogger()
const loggerMiddleware = createLogger({
predicate: () => global.METAMASK_DEBUG,
})
const createStoreWithMiddleware = applyMiddleware(
thunkMiddleware,
loggerMiddleware
)(createStore)
const middlewares = [thunkMiddleware, loggerMiddleware]
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore)
function configureStore (initialState) {
return createStoreWithMiddleware(rootReducer, initialState)