m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Remove unused files from ui folder. (#3577)

Browse Source 
* Removed unused UI files. Fixes #3434.

* Reverted the deletion of "feature-toggle-utils.js". Reverted the deletion of the test files and modified the paths so they referred to the old-ui.
This commit is contained in:
anticlimactic 2018-03-20 02:11:24 +11:00 committed by Dan J Miller
parent 9b38a77f46
commit a1db40047c
30 changed files with 3 additions and 2510 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/unit/components/binary-renderer-test.js
View File

@ -1,5 +1,5 @@
var assert = require('assert') var assert = require('assert')
var BinaryRenderer = require('../../../ui/app/components/binary-renderer') var BinaryRenderer = require('../../../old-ui/app/components/binary-renderer')
describe('BinaryRenderer', function () { describe('BinaryRenderer', function () {
let binaryRenderer let binaryRenderer

2
test/unit/components/bn-as-decimal-input-test.js
View File

@ -6,7 +6,7 @@ const ReactTestUtils = require('react-addons-test-utils')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const BN = ethUtil.BN const BN = ethUtil.BN
var BnInput = require('../../../ui/app/components/bn-as-decimal-input') var BnInput = require('../../../old-ui/app/components/bn-as-decimal-input')
describe('BnInput', function () { describe('BnInput', function () {
it('can tolerate a gas decimal number at a high precision', function (done) { it('can tolerate a gas decimal number at a high precision', function (done) {

2
test/unit/nameForAccount_test.js
View File

@ -2,7 +2,7 @@ var assert = require('assert')
var sinon = require('sinon') var sinon = require('sinon')
var path = require('path') var path = require('path')
var contractNamer = require(path.join(__dirname, '..', '..', 'ui', 'lib', 'contract-namer.js')) var contractNamer = require(path.join(__dirname, '..', '..', 'old-ui', 'lib', 'contract-namer.js'))
describe('contractNamer', function () { describe('contractNamer', function () {
beforeEach(function () { beforeEach(function () {

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

@ -1,117 +0,0 @@
const inherits = require('util').inherits
const extend = require('xtend')
const Component = require('react').Component
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('./actions')
const valuesFor = require('./util').valuesFor
const TransactionList = require('./components/transaction-list')
const ExportAccountView = require('./components/account-export')
const TabBar = require('./components/tab-bar')
const TokenList = require('./components/token-list')
module.exports = connect(mapStateToProps)(AccountDetailScreen)
function mapStateToProps (state) {
return {
metamask: state.metamask,
identities: state.metamask.identities,
accounts: state.metamask.accounts,
address: state.metamask.selectedAddress,
accountDetail: state.appState.accountDetail,
network: state.metamask.network,
unapprovedMsgs: valuesFor(state.metamask.unapprovedMsgs),
shapeShiftTxList: state.metamask.shapeShiftTxList,
transactions: state.metamask.selectedAddressTxList || [],
conversionRate: state.metamask.conversionRate,
currentCurrency: state.metamask.currentCurrency,
currentAccountTab: state.metamask.currentAccountTab,
tokens: state.metamask.tokens,
computedBalances: state.metamask.computedBalances,
}
}
inherits(AccountDetailScreen, Component)
function AccountDetailScreen () {
Component.call(this)
}
// Note: This component is no longer used. Leaving the file for reference:
// - structuring routing for add token
// - state required for TxList
// Delete file when those features are complete
AccountDetailScreen.prototype.render = function () {}
AccountDetailScreen.prototype.subview = function () {
var subview
try {
subview = this.props.accountDetail.subview
} catch (e) {
subview = null
}
switch (subview) {
case 'transactions':
return this.tabSections()
case 'export':
var state = extend({key: 'export'}, this.props)
return h(ExportAccountView, state)
default:
return this.tabSections()
}
}
AccountDetailScreen.prototype.tabSections = function () {
const { currentAccountTab } = this.props
return h('section.tabSection.full-flex-height.grow-tenx', [
h(TabBar, {
tabs: [
{ content: 'Sent', key: 'history' },
{ content: 'Tokens', key: 'tokens' },
],
defaultTab: currentAccountTab || 'history',
tabSelected: (key) => {
this.props.dispatch(actions.setCurrentAccountTab(key))
},
}),
this.tabSwitchView(),
])
}
AccountDetailScreen.prototype.tabSwitchView = function () {
const props = this.props
const { address, network } = props
const { currentAccountTab, tokens } = this.props
switch (currentAccountTab) {
case 'tokens':
return h(TokenList, {
userAddress: address,
network,
tokens,
addToken: () => this.props.dispatch(actions.showAddTokenPage()),
})
default:
return this.transactionList()
}
}
AccountDetailScreen.prototype.transactionList = function () {
const {transactions, unapprovedMsgs, address,
network, shapeShiftTxList, conversionRate } = this.props
return h(TransactionList, {
transactions: transactions.sort((a, b) => b.time - a.time),
network,
unapprovedMsgs,
conversionRate,
address,
shapeShiftTxList,
viewPendingTx: (txId) => {
this.props.dispatch(actions.viewPendingTx(txId))
},
})
}

89
ui/app/components/balance.js
View File

@ -1,89 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const formatBalance = require('../util').formatBalance
const generateBalanceObject = require('../util').generateBalanceObject
const Tooltip = require('./tooltip.js')
const FiatValue = require('./fiat-value.js')
module.exports = EthBalanceComponent
inherits(EthBalanceComponent, Component)
function EthBalanceComponent () {
Component.call(this)
}
EthBalanceComponent.prototype.render = function () {
var props = this.props
let { value } = props
var style = props.style
var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
value = value ? formatBalance(value, 6, needsParse) : '...'
var width = props.width
return (
h('.ether-balance.ether-balance-amount', {
style: style,
}, [
h('div', {
style: {
display: 'inline',
width: width,
},
}, this.renderBalance(value)),
])
)
}
EthBalanceComponent.prototype.renderBalance = function (value) {
var props = this.props
if (value === 'None') return value
if (value === '...') return value
var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3)
var balance
var splitBalance = value.split(' ')
var ethNumber = splitBalance[0]
var ethSuffix = splitBalance[1]
const showFiat = 'showFiat' in props ? props.showFiat : true
if (props.shorten) {
balance = balanceObj.shortBalance
} else {
balance = balanceObj.balance
}
var label = balanceObj.label
return (
h(Tooltip, {
position: 'bottom',
title: `${ethNumber} ${ethSuffix}`,
}, h('div.flex-column', [
h('.flex-row', {
style: {
alignItems: 'flex-end',
lineHeight: '13px',
fontFamily: 'Montserrat Light',
textRendering: 'geometricPrecision',
},
}, [
h('div', {
style: {
width: '100%',
textAlign: 'right',
},
}, this.props.incoming ? `+${balance}` : balance),
h('div', {
style: {
color: ' #AEAEAE',
fontSize: '12px',
marginLeft: '5px',
},
}, label),
]),
showFiat ? h(FiatValue, { value: props.value }) : null,
]))
)
}

46
ui/app/components/binary-renderer.js
View File

@ -1,46 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const ethUtil = require('ethereumjs-util')
const extend = require('xtend')
module.exports = BinaryRenderer
inherits(BinaryRenderer, Component)
function BinaryRenderer () {
Component.call(this)
}
BinaryRenderer.prototype.render = function () {
const props = this.props
const { value, style } = props
const text = this.hexToText(value)
const defaultStyle = extend({
width: '315px',
maxHeight: '210px',
resize: 'none',
border: 'none',
background: 'white',
padding: '3px',
}, style)
return (
h('textarea.font-small', {
readOnly: true,
style: defaultStyle,
defaultValue: text,
})
)
}
BinaryRenderer.prototype.hexToText = function (hex) {
try {
const stripped = ethUtil.stripHexPrefix(hex)
const buff = Buffer.from(stripped, 'hex')
return buff.toString('utf8')
} catch (e) {
return hex
}
}

29
ui/app/components/dropdowns/account-options-dropdown.js
View File

@ -1,29 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const AccountDropdowns = require('./components/account-dropdowns')
inherits(AccountOptionsDropdown, Component)
function AccountOptionsDropdown () {
Component.call(this)
}
module.exports = AccountOptionsDropdown
// TODO: specify default props and proptypes
// TODO: hook up to state, connect to redux to clean up API
// TODO: selectedAddress is not defined... should we use selected?
AccountOptionsDropdown.prototype.render = function () {
const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
return h(AccountDropdowns, {
enableAccountOptions: true,
enableAccountsSelector: false,
selected,
network,
identities,
style: style || {},
dropdownWrapperStyle: dropdownWrapperStyle || {},
menuItemStyles: menuItemStyles || {},
}, [])
}

29
ui/app/components/dropdowns/account-selection-dropdown.js
View File

@ -1,29 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const AccountDropdowns = require('./components/account-dropdowns')
inherits(AccountSelectionDropdown, Component)
function AccountSelectionDropdown () {
Component.call(this)
}
module.exports = AccountSelectionDropdown
// TODO: specify default props and proptypes
// TODO: hook up to state, connect to redux to clean up API
// TODO: selectedAddress is not defined... should we use selected?
AccountSelectionDropdown.prototype.render = function () {
const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
return h(AccountDropdowns, {
enableAccountOptions: false,
enableAccountsSelector: true,
selected,
network,
identities,
style: style || {},
dropdownWrapperStyle: dropdownWrapperStyle || {},
menuItemStyles: menuItemStyles || {},
}, [])
}

6
ui/app/components/dropdowns/index.js
View File

@ -1,17 +1,11 @@
// Reusable Dropdown Components // Reusable Dropdown Components
// TODO: Refactor into separate components // TODO: Refactor into separate components
const Dropdown = require('./components/dropdown').Dropdown const Dropdown = require('./components/dropdown').Dropdown
const AccountDropdowns = require('./components/account-dropdowns')
// App-Specific Instances // App-Specific Instances
const AccountSelectionDropdown = require('./account-selection-dropdown')
const AccountOptionsDropdown = require('./account-options-dropdown')
const NetworkDropdown = require('./network-dropdown').default const NetworkDropdown = require('./network-dropdown').default
module.exports = { module.exports = {
AccountSelectionDropdown,
AccountOptionsDropdown,
NetworkDropdown, NetworkDropdown,
Dropdown, Dropdown,
AccountDropdowns,
} }

74
ui/app/components/mini-account-panel.js
View File

@ -1,74 +0,0 @@
const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
const Identicon = require('./identicon')
module.exports = AccountPanel
inherits(AccountPanel, Component)
function AccountPanel () {
Component.call(this)
}
AccountPanel.prototype.render = function () {
var props = this.props
var picOrder = props.picOrder || 'left'
const { imageSeed } = props
return (
h('.identity-panel.flex-row.flex-left', {
style: {
cursor: props.onClick ? 'pointer' : undefined,
},
onClick: props.onClick,
}, [
this.genIcon(imageSeed, picOrder),
h('div.flex-column.flex-justify-center', {
style: {
lineHeight: '15px',
order: 2,
display: 'flex',
alignItems: picOrder === 'left' ? 'flex-begin' : 'flex-end',
},
}, this.props.children),
])
)
}
AccountPanel.prototype.genIcon = function (seed, picOrder) {
const props = this.props
// When there is no seed value, this is a contract creation.
// We then show the contract icon.
if (!seed) {
return h('.identicon-wrapper.flex-column.select-none', {
style: {
order: picOrder === 'left' ? 1 : 3,
},
}, [
h('i.fa.fa-file-text-o.fa-lg', {
style: {
fontSize: '42px',
transform: 'translate(0px, -16px)',
},
}),
])
}
// If there was a seed, we return an identicon for that address.
return h('.identicon-wrapper.flex-column.select-none', {
style: {
order: picOrder === 'left' ? 1 : 3,
},
}, [
h(Identicon, {
address: seed,
imageify: props.imageifyIdenticons,
}),
])
}

60
ui/app/components/pending-personal-msg-details.js
View File

@ -1,60 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const t = require('../../i18n')
const AccountPanel = require('./account-panel')
const BinaryRenderer = require('./binary-renderer')
module.exports = PendingMsgDetails
inherits(PendingMsgDetails, Component)
function PendingMsgDetails () {
Component.call(this)
}
PendingMsgDetails.prototype.render = function () {
var state = this.props
var msgData = state.txData
var msgParams = msgData.msgParams || {}
var address = msgParams.from || state.selectedAddress
var identity = state.identities[address] || { address: address }
var account = state.accounts[address] || { address: address }
var { data } = msgParams
return (
h('div', {
key: msgData.id,
style: {
margin: '10px 20px',
},
}, [
// account that will sign
h(AccountPanel, {
showFullAddress: true,
identity: identity,
account: account,
imageifyIdenticons: state.imageifyIdenticons,
}),
// message data
h('div', {
style: {
height: '260px',
},
}, [
h('label.font-small.allcaps', { style: { display: 'block' } }, t('message')),
h(BinaryRenderer, {
value: data,
style: {
height: '215px',
},
}),
]),
])
)
}

60
ui/app/components/pending-typed-msg-details.js
View File

@ -1,60 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const AccountPanel = require('./account-panel')
const TypedMessageRenderer = require('./typed-message-renderer')
const t = require('../../i18n')
module.exports = PendingMsgDetails
inherits(PendingMsgDetails, Component)
function PendingMsgDetails () {
Component.call(this)
}
PendingMsgDetails.prototype.render = function () {
var state = this.props
var msgData = state.txData
var msgParams = msgData.msgParams || {}
var address = msgParams.from || state.selectedAddress
var identity = state.identities[address] || { address: address }
var account = state.accounts[address] || { address: address }
var { data } = msgParams
return (
h('div', {
key: msgData.id,
style: {
margin: '10px 20px',
},
}, [
// account that will sign
h(AccountPanel, {
showFullAddress: true,
identity: identity,
account: account,
imageifyIdenticons: state.imageifyIdenticons,
}),
// message data
h('div', {
style: {
height: '260px',
},
}, [
h('label.font-small.allcaps', { style: { display: 'block' } }, t('youSign')),
h(TypedMessageRenderer, {
value: data,
style: {
height: '215px',
},
}),
]),
])
)
}

47
ui/app/components/pending-typed-msg.js
View File

@ -1,47 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const PendingTxDetails = require('./pending-typed-msg-details')
const t = require('../../i18n')
module.exports = PendingMsg
inherits(PendingMsg, Component)
function PendingMsg () {
Component.call(this)
}
PendingMsg.prototype.render = function () {
var state = this.props
var msgData = state.txData
return (
h('div', {
key: msgData.id,
}, [
// header
h('h3', {
style: {
fontWeight: 'bold',
textAlign: 'center',
},
}, t('signMessage')),
// message details
h(PendingTxDetails, state),
// sign + cancel
h('.flex-row.flex-space-around', [
h('button.allcaps', {
onClick: state.cancelTypedMessage,
}, t('cancel')),
h('button.allcaps', {
onClick: state.signTypedMessage,
}, t('sign')),
]),
])
)
}

58
ui/app/components/range-slider.js
View File

@ -1,58 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
module.exports = RangeSlider
inherits(RangeSlider, Component)
function RangeSlider () {
Component.call(this)
}
RangeSlider.prototype.render = function () {
const state = this.state || {}
const props = this.props
const onInput = props.onInput || function () {}
const name = props.name
const {
min = 0,
max = 100,
increment = 1,
defaultValue = 50,
mirrorInput = false,
} = this.props.options
const {container, input, range} = props.style
return (
h('.flex-row', {
style: container,
}, [
h('input', {
type: 'range',
name: name,
min: min,
max: max,
step: increment,
style: range,
value: state.value || defaultValue,
onChange: mirrorInput ? this.mirrorInputs.bind(this, event) : onInput,
}),
// Mirrored input for range
mirrorInput ? h('input.large-input', {
type: 'number',
name: `${name}Mirror`,
min: min,
max: max,
value: state.value || defaultValue,
step: increment,
style: input,
onChange: this.mirrorInputs.bind(this, event),
}) : null,
])
)
}
RangeSlider.prototype.mirrorInputs = function (event) {
this.setState({value: event.target.value})
}

440
ui/app/components/send-token/index.js
View File

@ -1,440 +0,0 @@
const Component = require('react').Component
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const classnames = require('classnames')
const abi = require('ethereumjs-abi')
const inherits = require('util').inherits
const actions = require('../../actions')
const selectors = require('../../selectors')
const { isValidAddress, allNull } = require('../../util')
const t = require('../../../i18n')
// const BalanceComponent = require('./balance-component')
const Identicon = require('../identicon')
const TokenBalance = require('../token-balance')
const CurrencyToggle = require('../send/currency-toggle')
const GasTooltip = require('../send/gas-tooltip')
const GasFeeDisplay = require('../send/gas-fee-display')
module.exports = connect(mapStateToProps, mapDispatchToProps)(SendTokenScreen)
function mapStateToProps (state) {
// const sidebarOpen = state.appState.sidebarOpen
const { warning } = state.appState
const identities = state.metamask.identities
const addressBook = state.metamask.addressBook
const conversionRate = state.metamask.conversionRate
const currentBlockGasLimit = state.metamask.currentBlockGasLimit
const accounts = state.metamask.accounts
const selectedTokenAddress = state.metamask.selectedTokenAddress
const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
const selectedToken = selectors.getSelectedToken(state)
const tokenExchangeRates = state.metamask.tokenExchangeRates
const pair = `${selectedToken.symbol.toLowerCase()}_eth`
const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
return {
selectedAddress,
selectedTokenAddress,
identities,
addressBook,
conversionRate,
tokenExchangeRate,
currentBlockGasLimit,
selectedToken,
warning,
}
}
function mapDispatchToProps (dispatch) {
return {
backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
hideWarning: () => dispatch(actions.hideWarning()),
addToAddressBook: (recipient, nickname) => dispatch(
actions.addToAddressBook(recipient, nickname)
),
signTx: txParams => dispatch(actions.signTx(txParams)),
signTokenTx: (tokenAddress, toAddress, amount, txData) => (
dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
),
updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
estimateGas: params => dispatch(actions.estimateGas(params)),
getGasPrice: () => dispatch(actions.getGasPrice()),
}
}
inherits(SendTokenScreen, Component)
function SendTokenScreen () {
Component.call(this)
this.state = {
to: '',
amount: '0x0',
amountToSend: '0x0',
selectedCurrency: 'USD',
isGasTooltipOpen: false,
gasPrice: null,
gasLimit: null,
errors: {},
}
}
SendTokenScreen.prototype.componentWillMount = function () {
const {
updateTokenExchangeRate,
selectedToken: { symbol },
getGasPrice,
estimateGas,
selectedAddress,
} = this.props
updateTokenExchangeRate(symbol)
const data = Array.prototype.map.call(
abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
x => ('00' + x.toString(16)).slice(-2)
).join('')
console.log(data)
Promise.all([
getGasPrice(),
estimateGas({
from: selectedAddress,
value: '0x0',
gas: '746a528800',
data,
}),
])
.then(([blockGasPrice, estimatedGas]) => {
console.log({ blockGasPrice, estimatedGas})
this.setState({
gasPrice: blockGasPrice,
gasLimit: estimatedGas,
})
})
}
SendTokenScreen.prototype.validate = function () {
const {
to,
amount: stringAmount,
gasPrice: hexGasPrice,
gasLimit: hexGasLimit,
} = this.state
const gasPrice = parseInt(hexGasPrice, 16)
const gasLimit = parseInt(hexGasLimit, 16) / 1000000000
const amount = Number(stringAmount)
const errors = {
to: !to ? t('required') : null,
amount: !amount ? t('required') : null,
gasPrice: !gasPrice ? t('gasPriceRequired') : null,
gasLimit: !gasLimit ? t('gasLimitRequired') : null,
}
if (to && !isValidAddress(to)) {
errors.to = t('invalidAddress')
}
const isValid = Object.entries(errors).every(([key, value]) => value === null)
return {
isValid,
errors: isValid ? {} : errors,
}
}
SendTokenScreen.prototype.setErrorsFor = function (field) {
const { errors: previousErrors } = this.state
const {
isValid,
errors: newErrors,
} = this.validate()
const nextErrors = Object.assign({}, previousErrors, {
[field]: newErrors[field] || null,
})
if (!isValid) {
this.setState({
errors: nextErrors,
isValid,
})
}
}
SendTokenScreen.prototype.clearErrorsFor = function (field) {
const { errors: previousErrors } = this.state
const nextErrors = Object.assign({}, previousErrors, {
[field]: null,
})
this.setState({
errors: nextErrors,
isValid: allNull(nextErrors),
})
}
SendTokenScreen.prototype.getAmountToSend = function (amount, selectedToken) {
const { decimals } = selectedToken || {}
const multiplier = Math.pow(10, Number(decimals || 0))
const sendAmount = '0x' + Number(amount * multiplier).toString(16)
return sendAmount
}
SendTokenScreen.prototype.submit = function () {
const {
to,
amount,
gasPrice,
gasLimit,
} = this.state
const {
identities,
selectedAddress,
selectedTokenAddress,
hideWarning,
addToAddressBook,
signTokenTx,
selectedToken,
} = this.props
const { nickname = ' ' } = identities[to] || {}
hideWarning()
addToAddressBook(to, nickname)
const txParams = {
from: selectedAddress,
value: '0',
gas: gasLimit,
gasPrice: gasPrice,
}
const sendAmount = this.getAmountToSend(amount, selectedToken)
signTokenTx(selectedTokenAddress, to, sendAmount, txParams)
}
SendTokenScreen.prototype.renderToAddressInput = function () {
const {
identities,
addressBook,
} = this.props
const {
to,
errors: { to: errorMessage },
} = this.state
return h('div', {
className: classnames('send-screen-input-wrapper', {
'send-screen-input-wrapper--error': errorMessage,
}),
}, [
h('div', [t('to') + ':']),
h('input.large-input.send-screen-input', {
name: 'address',
list: 'addresses',
placeholder: t('address'),
value: to,
onChange: e => this.setState({
to: e.target.value,
errors: {},
}),
onBlur: () => {
this.setErrorsFor('to')
},
onFocus: event => {
if (to) event.target.select()
this.clearErrorsFor('to')
},
}),
h('datalist#addresses', [
// Corresponds to the addresses owned.
Object.entries(identities).map(([key, { address, name }]) => {
return h('option', {
value: address,
label: name,
key: address,
})
}),
addressBook.map(({ address, name }) => {
return h('option', {
value: address,
label: name,
key: address,
})
}),
]),
h('div.send-screen-input-wrapper__error-message', [ errorMessage ]),
])
}
SendTokenScreen.prototype.renderAmountInput = function () {
const {
selectedCurrency,
amount,
errors: { amount: errorMessage },
} = this.state
const {
tokenExchangeRate,
selectedToken: {symbol},
} = this.props
return h('div.send-screen-input-wrapper', {
className: classnames('send-screen-input-wrapper', {
'send-screen-input-wrapper--error': errorMessage,
}),
}, [
h('div.send-screen-amount-labels', [
h('span', [t('amount')]),
h(CurrencyToggle, {
currentCurrency: tokenExchangeRate ? selectedCurrency : 'USD',
currencies: tokenExchangeRate ? [ symbol, 'USD' ] : [],
onClick: currency => this.setState({ selectedCurrency: currency }),
}),
]),
h('input.large-input.send-screen-input', {
placeholder: `0 ${symbol}`,
type: 'number',
value: amount,
onChange: e => this.setState({
amount: e.target.value,
}),
onBlur: () => {
this.setErrorsFor('amount')
},
onFocus: () => this.clearErrorsFor('amount'),
}),
h('div.send-screen-input-wrapper__error-message', [ errorMessage ]),
])
}
SendTokenScreen.prototype.renderGasInput = function () {
const {
isGasTooltipOpen,
gasPrice,
gasLimit,
selectedCurrency,
errors: {
gasPrice: gasPriceErrorMessage,
gasLimit: gasLimitErrorMessage,
},
} = this.state
const {
conversionRate,
tokenExchangeRate,
currentBlockGasLimit,
} = this.props
return h('div.send-screen-input-wrapper', {
className: classnames('send-screen-input-wrapper', {
'send-screen-input-wrapper--error': gasPriceErrorMessage || gasLimitErrorMessage,
}),
}, [
isGasTooltipOpen && h(GasTooltip, {
className: 'send-tooltip',
gasPrice: gasPrice || '0x0',
gasLimit: gasLimit || '0x0',
onClose: () => this.setState({ isGasTooltipOpen: false }),
onFeeChange: ({ gasLimit, gasPrice }) => {
this.setState({ gasLimit, gasPrice, errors: {} })
},
onBlur: () => {
this.setErrorsFor('gasLimit')
this.setErrorsFor('gasPrice')
},
onFocus: () => {
this.clearErrorsFor('gasLimit')
this.clearErrorsFor('gasPrice')
},
}),
h('div.send-screen-gas-labels', {}, [
h('span', [ h('i.fa.fa-bolt'), t('gasFee') + ':']),
h('span', [t('whatsThis')]),
]),
h('div.large-input.send-screen-gas-input', [
h(GasFeeDisplay, {
conversionRate,
tokenExchangeRate,
gasPrice: gasPrice || '0x0',
activeCurrency: selectedCurrency,
gas: gasLimit || '0x0',
blockGasLimit: currentBlockGasLimit,
}),
h(
'div.send-screen-gas-input-customize',
{ onClick: () => this.setState({ isGasTooltipOpen: !isGasTooltipOpen }) },
[t('customize')]
),
]),
h('div.send-screen-input-wrapper__error-message', [
gasPriceErrorMessage || gasLimitErrorMessage,
]),
])
}
SendTokenScreen.prototype.renderMemoInput = function () {
return h('div.send-screen-input-wrapper', [
h('div', {}, [t('transactionMemo')]),
h(
'input.large-input.send-screen-input',
{ onChange: e => this.setState({ memo: e.target.value }) }
),
])
}
SendTokenScreen.prototype.renderButtons = function () {
const { selectedAddress, backToAccountDetail } = this.props
const { isValid } = this.validate()
return h('div.send-token__button-group', [
h('button.send-token__button-next.btn-secondary', {
className: !isValid && 'send-screen__send-button__disabled',
onClick: () => isValid && this.submit(),
}, [t('next')]),
h('button.send-token__button-cancel.btn-tertiary', {
onClick: () => backToAccountDetail(selectedAddress),
}, [t('cancel')]),
])
}
SendTokenScreen.prototype.render = function () {
const {
selectedTokenAddress,
selectedToken,
warning,
} = this.props
return h('div.send-token', [
h('div.send-token__content', [
h(Identicon, {
diameter: 75,
address: selectedTokenAddress,
}),
h('div.send-token__title', [t('sendTokens')]),
h('div.send-token__description', [t('sendTokensAnywhere')]),
h('div.send-token__balance-text', [t('tokenBalance')]),
h('div.send-token__token-balance', [
h(TokenBalance, { token: selectedToken, balanceOnly: true }),
]),
h('div.send-token__token-symbol', [selectedToken.symbol]),
this.renderToAddressInput(),
this.renderAmountInput(),
this.renderGasInput(),
this.renderMemoInput(),
warning && h('div.send-screen-input-wrapper--error', {},
h('div.send-screen-input-wrapper__error-message', [
warning,
])
),
]),
this.renderButtons(),
])
}

44
ui/app/components/send/currency-toggle.js
View File

@ -1,44 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const classnames = require('classnames')
module.exports = CurrencyToggle
inherits(CurrencyToggle, Component)
function CurrencyToggle () {
Component.call(this)
}
const defaultCurrencies = [ 'ETH', 'USD' ]
CurrencyToggle.prototype.renderToggles = function () {
const { onClick, activeCurrency } = this.props
const [currencyA, currencyB] = this.props.currencies || defaultCurrencies
return [
h('span', {
className: classnames('currency-toggle__item', {
'currency-toggle__item--selected': currencyA === activeCurrency,
}),
onClick: () => onClick(currencyA),
}, [ currencyA ]),
'<>',
h('span', {
className: classnames('currency-toggle__item', {
'currency-toggle__item--selected': currencyB === activeCurrency,
}),
onClick: () => onClick(currencyB),
}, [ currencyB ]),
]
}
CurrencyToggle.prototype.render = function () {
const currencies = this.props.currencies || defaultCurrencies
return h('span.currency-toggle', currencies.length
? this.renderToggles()
: []
)
}

37
ui/app/components/send/eth-fee-display.js
View File

@ -1,37 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const EthBalance = require('../eth-balance')
const { getTxFeeBn } = require('../../util')
module.exports = EthFeeDisplay
inherits(EthFeeDisplay, Component)
function EthFeeDisplay () {
Component.call(this)
}
EthFeeDisplay.prototype.render = function () {
const {
activeCurrency,
conversionRate,
gas,
gasPrice,
blockGasLimit,
} = this.props
return h(EthBalance, {
value: getTxFeeBn(gas, gasPrice, blockGasLimit),
currentCurrency: activeCurrency,
conversionRate,
showFiat: false,
hideTooltip: true,
styleOveride: {
color: '#5d5d5d',
fontSize: '16px',
fontFamily: 'DIN OT',
lineHeight: '22.4px',
},
})
}

62
ui/app/components/send/gas-fee-display.js
View File

@ -1,62 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const USDFeeDisplay = require('./usd-fee-display')
const EthFeeDisplay = require('./eth-fee-display')
const { getTxFeeBn, formatBalance, shortenBalance } = require('../../util')
module.exports = GasFeeDisplay
inherits(GasFeeDisplay, Component)
function GasFeeDisplay () {
Component.call(this)
}
GasFeeDisplay.prototype.getTokenValue = function () {
const {
tokenExchangeRate,
gas,
gasPrice,
blockGasLimit,
} = this.props
const value = formatBalance(getTxFeeBn(gas, gasPrice, blockGasLimit), 6, true)
const [ethNumber] = value.split(' ')
return shortenBalance(Number(ethNumber) / tokenExchangeRate, 6)
}
GasFeeDisplay.prototype.render = function () {
const {
activeCurrency,
conversionRate,
gas,
gasPrice,
blockGasLimit,
} = this.props
switch (activeCurrency) {
case 'USD':
return h(USDFeeDisplay, {
activeCurrency,
conversionRate,
gas,
gasPrice,
blockGasLimit,
})
case 'ETH':
return h(EthFeeDisplay, {
activeCurrency,
conversionRate,
gas,
gasPrice,
blockGasLimit,
})
default:
return h('div.token-gas', [
h('div.token-gas__amount', this.getTokenValue()),
h('div.token-gas__symbol', activeCurrency),
])
}
}

35
ui/app/components/send/usd-fee-display.js
View File

@ -1,35 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const FiatValue = require('../fiat-value')
const { getTxFeeBn } = require('../../util')
module.exports = USDFeeDisplay
inherits(USDFeeDisplay, Component)
function USDFeeDisplay () {
Component.call(this)
}
USDFeeDisplay.prototype.render = function () {
const {
activeCurrency,
conversionRate,
gas,
gasPrice,
blockGasLimit,
} = this.props
return h(FiatValue, {
value: getTxFeeBn(gas, gasPrice, blockGasLimit),
conversionRate,
currentCurrency: activeCurrency,
style: {
color: '#5d5d5d',
fontSize: '16px',
fontFamily: 'DIN OT',
lineHeight: '22.4px',
},
})
}

18
ui/app/components/template.js
View File

@ -1,18 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
module.exports = NewComponent
inherits(NewComponent, Component)
function NewComponent () {
Component.call(this)
}
NewComponent.prototype.render = function () {
const props = this.props
return (
h('span', props.message)
)
}

68
ui/app/components/transaction-list-item-icon.js
View File

@ -1,68 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const Tooltip = require('./tooltip')
const Identicon = require('./identicon')
module.exports = TransactionIcon
inherits(TransactionIcon, Component)
function TransactionIcon () {
Component.call(this)
}
TransactionIcon.prototype.render = function () {
const { transaction, txParams, isMsg } = this.props
switch (transaction.status) {
case 'unapproved':
return h(!isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg')
case 'rejected':
return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
style: {
width: '24px',
},
})
case 'failed':
return h('i.fa.fa-exclamation-triangle.fa-lg.error', {
style: {
width: '24px',
},
})
case 'submitted':
return h(Tooltip, {
title: 'Pending',
position: 'right',
}, [
h('i.fa.fa-ellipsis-h', {
style: {
fontSize: '27px',
},
}),
])
}
if (isMsg) {
return h('i.fa.fa-certificate.fa-lg', {
style: {
width: '24px',
},
})
}
if (txParams.to) {
return h(Identicon, {
diameter: 24,
address: txParams.to || transaction.hash,
})
} else {
return h('i.fa.fa-file-text-o.fa-lg', {
style: {
width: '24px',
},
})
}
}

239
ui/app/components/transaction-list-item.js
View File

@ -1,239 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const connect = require('react-redux').connect
const EthBalance = require('./eth-balance')
const addressSummary = require('../util').addressSummary
const explorerLink = require('etherscan-link').createExplorerLink
const CopyButton = require('./copyButton')
const vreme = new (require('vreme'))()
const Tooltip = require('./tooltip')
const numberToBN = require('number-to-bn')
const actions = require('../actions')
const t = require('../../i18n')
const TransactionIcon = require('./transaction-list-item-icon')
const ShiftListItem = require('./shift-list-item')
const mapDispatchToProps = dispatch => {
return {
retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
}
}
module.exports = connect(null, mapDispatchToProps)(TransactionListItem)
inherits(TransactionListItem, Component)
function TransactionListItem () {
Component.call(this)
}
TransactionListItem.prototype.showRetryButton = function () {
const { transaction = {} } = this.props
const { status, time } = transaction
return status === 'submitted' && Date.now() - time > 30000
}
TransactionListItem.prototype.render = function () {
const { transaction, network, conversionRate, currentCurrency } = this.props
const { status } = transaction
if (transaction.key === 'shapeshift') {
if (network === '1') return h(ShiftListItem, transaction)
}
var date = formatDate(transaction.time)
let isLinkable = false
const numericNet = parseInt(network)
isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 4 || numericNet === 42
var isMsg = ('msgParams' in transaction)
var isTx = ('txParams' in transaction)
var isPending = status === 'unapproved'
let txParams
if (isTx) {
txParams = transaction.txParams
} else if (isMsg) {
txParams = transaction.msgParams
}
const nonce = txParams.nonce ? numberToBN(txParams.nonce).toString(10) : ''
const isClickable = ('hash' in transaction && isLinkable) || isPending
return (
h('.transaction-list-item.flex-column', {
onClick: (event) => {
if (isPending) {
this.props.showTx(transaction.id)
}
event.stopPropagation()
if (!transaction.hash || !isLinkable) return
var url = explorerLink(transaction.hash, parseInt(network))
global.platform.openWindow({ url })
},
style: {
padding: '20px 0',
alignItems: 'center',
},
}, [
h(`.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
style: {
width: '100%',
},
}, [
h('.identicon-wrapper.flex-column.flex-center.select-none', [
h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
]),
h(Tooltip, {
title: t('transactionNumber'),
position: 'right',
}, [
h('span', {
style: {
display: 'flex',
cursor: 'normal',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: '10px',
},
}, nonce),
]),
h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
domainField(txParams),
h('div', date),
recipientField(txParams, transaction, isTx, isMsg),
]),
// Places a copy button if tx is successful, else places a placeholder empty div.
transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
isTx ? h(EthBalance, {
value: txParams.value,
conversionRate,
currentCurrency,
width: '55px',
shorten: true,
showFiat: false,
style: {fontSize: '15px'},
}) : h('.flex-column'),
]),
this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover', {
onClick: event => {
event.stopPropagation()
this.resubmit()
},
style: {
height: '22px',
borderRadius: '22px',
color: '#F9881B',
padding: '0 20px',
backgroundColor: '#FFE3C9',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '8px',
cursor: 'pointer',
},
}, [
h('div', {
style: {
paddingRight: '2px',
},
}, t('takesTooLong')),
h('div', {
style: {
textDecoration: 'underline',
},
}, t('retryWithMoreGas')),
]),
])
)
}
TransactionListItem.prototype.resubmit = function () {
const { transaction } = this.props
this.props.retryTransaction(transaction.id)
}
function domainField (txParams) {
return h('div', {
style: {
fontSize: 'x-small',
color: '#ABA9AA',
overflow: 'hidden',
textOverflow: 'ellipsis',
width: '100%',
},
}, [
txParams.origin,
])
}
function recipientField (txParams, transaction, isTx, isMsg) {
let message
if (isMsg) {
message = t('sigRequested')
} else if (txParams.to) {
message = addressSummary(txParams.to)
} else {
message = t('contractDeployment')
}
return h('div', {
style: {
fontSize: 'x-small',
color: '#ABA9AA',
},
}, [
message,
renderErrorOrWarning(transaction),
])
}
function formatDate (date) {
return vreme.format(new Date(date), 'March 16 2014 14:30')
}
function renderErrorOrWarning (transaction) {
const { status } = transaction
// show rejected
if (status === 'rejected') {
return h('span.error', ' (' + t('rejected') + ')')
}
if (transaction.err || transaction.warning) {
const { err, warning = {} } = transaction
const errFirst = !!((err && warning) || err)
errFirst ? err.message : warning.message
// show error
if (err) {
const message = err.message || ''
return (
h(Tooltip, {
title: message,
position: 'bottom',
}, [
h(`span.error`, ` (` + t('failed') + `)`),
])
)
}
// show warning
if (warning) {
const message = warning.message
return h(Tooltip, {
title: message,
position: 'bottom',
}, [
h(`span.warning`, ` (` + t('warning') + `)`),
])
}
}
}

87
ui/app/components/transaction-list.js
View File

@ -1,87 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const TransactionListItem = require('./transaction-list-item')
const t = require('../../i18n')
module.exports = TransactionList
inherits(TransactionList, Component)
function TransactionList () {
Component.call(this)
}
TransactionList.prototype.render = function () {
const { transactions, network, unapprovedMsgs, conversionRate } = this.props
var shapeShiftTxList
if (network === '1') {
shapeShiftTxList = this.props.shapeShiftTxList
}
const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
.sort((a, b) => b.time - a.time)
return (
h('section.transaction-list.full-flex-height', {
style: {
justifyContent: 'center',
},
}, [
h('style', `
.transaction-list .transaction-list-item:not(:last-of-type) {
border-bottom: 1px solid #D4D4D4;
}
.transaction-list .transaction-list-item .ether-balance-label {
display: block !important;
font-size: small;
}
`),
h('.tx-list', {
style: {
overflowY: 'auto',
height: '100%',
padding: '0 20px',
textAlign: 'center',
},
}, [
txsToRender.length
? txsToRender.map((transaction, i) => {
let key
switch (transaction.key) {
case 'shapeshift':
const { depositAddress, time } = transaction
key = `shift-tx-${depositAddress}-${time}-${i}`
break
default:
key = `tx-${transaction.id}-${i}`
}
return h(TransactionListItem, {
transaction, i, network, key,
conversionRate,
showTx: (txId) => {
this.props.viewPendingTx(txId)
},
})
})
: h('.flex-center.full-flex-height', {
style: {
flexDirection: 'column',
justifyContent: 'center',
},
}, [
h('p', {
style: {
marginTop: '50px',
},
}, t('noTransactionHistory')),
]),
]),
])
)
}

42
ui/app/components/typed-message-renderer.js
View File

@ -1,42 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const extend = require('xtend')
module.exports = TypedMessageRenderer
inherits(TypedMessageRenderer, Component)
function TypedMessageRenderer () {
Component.call(this)
}
TypedMessageRenderer.prototype.render = function () {
const props = this.props
const { value, style } = props
const text = renderTypedData(value)
const defaultStyle = extend({
width: '315px',
maxHeight: '210px',
resize: 'none',
border: 'none',
background: 'white',
padding: '3px',
overflow: 'scroll',
}, style)
return (
h('div.font-small', {
style: defaultStyle,
}, text)
)
}
function renderTypedData (values) {
return values.map(function (value) {
return h('div', {}, [
h('strong', {style: {display: 'block', fontWeight: 'bold'}}, String(value.name) + ':'),
h('div', {}, value.value),
])
})
}

56
ui/app/components/wallet-content-display.js
View File

@ -1,56 +0,0 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
module.exports = WalletContentDisplay
inherits(WalletContentDisplay, Component)
function WalletContentDisplay () {
Component.call(this)
}
WalletContentDisplay.prototype.render = function () {
const { title, amount, fiatValue, active, style } = this.props
// TODO: Separate component: wallet-content-account
return h('div.flex-column', {
style: {
marginLeft: '1.3em',
alignItems: 'flex-start',
...style,
},
}, [
h('span', {
style: {
fontSize: '1.1em',
},
}, title),
h('span', {
style: {
fontSize: '1.8em',
margin: '0.4em 0em',
},
}, amount),
h('span', {
style: {
fontSize: '1.3em',
},
}, fiatValue),
active && h('div', {
style: {
position: 'absolute',
marginLeft: '-1.3em',
height: '6em',
width: '0.3em',
background: '#D8D8D8', // $alto
},
}, [
]),
])
}

154
ui/app/info.js
View File

@ -1,154 +0,0 @@
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 () {
const state = this.props
const version = global.platform.getVersion()
return (
h('.flex-column.flex-grow', {
style: {
maxWidth: '400px',
},
}, [
// 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.goHome())
},
}),
h('h2.page-subtitle', 'Info'),
]),
// main view
h('.flex-column.flex-justify-center.flex-grow.select-none', [
h('.flex-space-around', {
style: {
padding: '20px',
},
}, [
// current version number
h('.info.info-gray', [
h('div', 'Metamask'),
h('div', {
style: {
marginBottom: '10px',
},
}, `Version: ${version}`),
]),
h('div', {
style: {
marginBottom: '5px',
}},
[
h('div', [
h('a', {
href: 'https://metamask.io/privacy.html',
target: '_blank',
onClick (event) { this.navigateTo(event.target.href) },
}, [
h('div.info', 'Privacy Policy'),
]),
]),
h('div', [
h('a', {
href: 'https://metamask.io/terms.html',
target: '_blank',
onClick (event) { this.navigateTo(event.target.href) },
}, [
h('div.info', 'Terms of Use'),
]),
]),
h('div', [
h('a', {
href: 'https://metamask.io/attributions.html',
target: '_blank',
onClick (event) { this.navigateTo(event.target.href) },
}, [
h('div.info', 'Attributions'),
]),
]),
]
),
h('hr', {
style: {
margin: '10px 0 ',
width: '7em',
},
}),
h('div', {
style: {
paddingLeft: '30px',
}},
[
h('div.fa.fa-support', [
h('a.info', {
href: 'https://metamask.helpscoutdocs.com/',
target: '_blank',
}, 'Visit our Knowledge Base'),
]),
h('div', [
h('a', {
href: 'https://metamask.io/',
target: '_blank',
}, [
h('img.icon-size', {
src: 'images/icon-128.png',
style: {
// IE6-9
filter: 'grayscale(100%)',
// Microsoft Edge and Firefox 35+
WebkitFilter: 'grayscale(100%)',
},
}),
h('div.info', 'Visit our web site'),
]),
]),
h('div', [
h('.fa.fa-twitter', [
h('a.info', {
href: 'https://twitter.com/metamask_io',
target: '_blank',
}, 'Follow us on Twitter'),
]),
]),
h('div.fa.fa-envelope', [
h('a.info', {
target: '_blank',
href: 'mailto:support@metamask.io?subject=MetaMask Support',
}, 'Email us!'),
]),
]),
]),
]),
])
)
}
InfoScreen.prototype.navigateTo = function (url) {
global.platform.openWindow({ url })
}

547
ui/app/send.js
View File

@ -1,547 +0,0 @@
// const { inherits } = require('util')
// const PersistentForm = require('../lib/persistent-form')
// const h = require('react-hyperscript')
// const connect = require('react-redux').connect
// const Identicon = require('./components/identicon')
// const EnsInput = require('./components/ens-input')
// const GasTooltip = require('./components/send/gas-tooltip')
// const CurrencyToggle = require('./components/send/currency-toggle')
// const GasFeeDisplay = require('./components/send/gas-fee-display')
// const { getSelectedIdentity } = require('./selectors')
// const {
// showAccountsPage,
// backToAccountDetail,
// displayWarning,
// hideWarning,
// addToAddressBook,
// signTx,
// estimateGas,
// getGasPrice,
// } = require('./actions')
// const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util')
// const { isHex, numericBalance, isValidAddress, allNull } = require('./util')
// const { conversionUtil, conversionGreaterThan } = require('./conversion-util')
// module.exports = connect(mapStateToProps)(SendTransactionScreen)
// function mapStateToProps (state) {
// const {
// selectedAddress: address,
// accounts,
// identities,
// network,
// addressBook,
// conversionRate,
// currentBlockGasLimit: blockGasLimit,
// } = state.metamask
// const { warning } = state.appState
// const selectedIdentity = getSelectedIdentity(state)
// const account = accounts[address]
// return {
// address,
// accounts,
// identities,
// network,
// addressBook,
// conversionRate,
// blockGasLimit,
// warning,
// selectedIdentity,
// error: warning && warning.split('.')[0],
// account,
// identity: identities[address],
// balance: account ? account.balance : null,
// }
// }
// inherits(SendTransactionScreen, PersistentForm)
// function SendTransactionScreen () {
// PersistentForm.call(this)
// // [WIP] These are the bare minimum of tx props needed to sign a transaction
// // We will need a few more for contract-related interactions
// this.state = {
// newTx: {
// from: '',
// to: '',
// amountToSend: '0x0',
// gasPrice: null,
// gas: null,
// amount: '0x0',
// txData: null,
// memo: '',
// },
// activeCurrency: 'USD',
// tooltipIsOpen: false,
// errors: {},
// isValid: false,
// }
// this.back = this.back.bind(this)
// this.closeTooltip = this.closeTooltip.bind(this)
// this.onSubmit = this.onSubmit.bind(this)
// this.setActiveCurrency = this.setActiveCurrency.bind(this)
// this.toggleTooltip = this.toggleTooltip.bind(this)
// this.validate = this.validate.bind(this)
// this.getAmountToSend = this.getAmountToSend.bind(this)
// this.setErrorsFor = this.setErrorsFor.bind(this)
// this.clearErrorsFor = this.clearErrorsFor.bind(this)
// this.renderFromInput = this.renderFromInput.bind(this)
// this.renderToInput = this.renderToInput.bind(this)
// this.renderAmountInput = this.renderAmountInput.bind(this)
// this.renderGasInput = this.renderGasInput.bind(this)
// this.renderMemoInput = this.renderMemoInput.bind(this)
// this.renderErrorMessage = this.renderErrorMessage.bind(this)
// }
// SendTransactionScreen.prototype.componentWillMount = function () {
// const { newTx } = this.state
// const { address } = this.props
// Promise.all([
// this.props.dispatch(getGasPrice()),
// this.props.dispatch(estimateGas({
// from: address,
// gas: '746a528800',
// })),
// ])
// .then(([blockGasPrice, estimatedGas]) => {
// console.log({ blockGasPrice, estimatedGas})
// this.setState({
// newTx: {
// ...newTx,
// gasPrice: blockGasPrice,
// gas: estimatedGas,
// },
// })
// })
// }
// SendTransactionScreen.prototype.renderErrorMessage = function(errorType, warning) {
// const { errors } = this.state
// const errorMessage = errors[errorType];
// return errorMessage || warning
// ? h('div.send-screen-input-wrapper__error-message', [ errorMessage || warning ])
// : null
// }
// SendTransactionScreen.prototype.renderFromInput = function (from, identities) {
// return h('div.send-screen-input-wrapper', [
// h('div', 'From:'),
// h('input.large-input.send-screen-input', {
// list: 'accounts',
// placeholder: 'Account',
// value: from,
// onChange: (event) => {
// this.setState({
// newTx: {
// ...this.state.newTx,
// from: event.target.value,
// },
// })
// },
// onBlur: () => this.setErrorsFor('from'),
// onFocus: event => {
// this.clearErrorsFor('from')
// this.state.newTx.from && event.target.select()
// },
// }),
// h('datalist#accounts', [
// Object.entries(identities).map(([key, { address, name }]) => {
// return h('option', {
// value: address,
// label: name,
// key: address,
// })
// }),
// ]),
// this.renderErrorMessage('from'),
// ])
// }
// SendTransactionScreen.prototype.renderToInput = function (to, identities, addressBook) {
// return h('div.send-screen-input-wrapper', [
// h('div', 'To:'),
// h('input.large-input.send-screen-input', {
// name: 'address',
// list: 'addresses',
// placeholder: 'Address',
// value: to,
// onChange: (event) => {
// this.setState({
// newTx: {
// ...this.state.newTx,
// to: event.target.value,
// },
// })
// },
// onBlur: () => {
// this.setErrorsFor('to')
// },
// onFocus: event => {
// this.clearErrorsFor('to')
// this.state.newTx.to && event.target.select()
// },
// }),
// h('datalist#addresses', [
// // Corresponds to the addresses owned.
// ...Object.entries(identities).map(([key, { address, name }]) => {
// return h('option', {
// value: address,
// label: name,
// key: address,
// })
// }),
// // Corresponds to previously sent-to addresses.
// ...addressBook.map(({ address, name }) => {
// return h('option', {
// value: address,
// label: name,
// key: address,
// })
// }),
// ]),
// this.renderErrorMessage('to'),
// ])
// }
// SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) {
// return h('div.send-screen-input-wrapper', [
// h('div.send-screen-amount-labels', [
// h('span', 'Amount'),
// h(CurrencyToggle, {
// activeCurrency,
// onClick: (newCurrency) => this.setActiveCurrency(newCurrency),
// }), // holding on icon from design
// ]),
// h('input.large-input.send-screen-input', {
// placeholder: `0 ${activeCurrency}`,
// type: 'number',
// onChange: (event) => {
// const amountToSend = event.target.value
// ? this.getAmountToSend(event.target.value)
// : '0x0'
// this.setState({
// newTx: Object.assign(
// this.state.newTx,
// {
// amount: event.target.value,
// amountToSend: amountToSend,
// }
// ),
// })
// },
// onBlur: () => {
// this.setErrorsFor('amount')
// },
// onFocus: () => this.clearErrorsFor('amount'),
// }),
// this.renderErrorMessage('amount'),
// ])
// }
// SendTransactionScreen.prototype.renderGasInput = function (gasPrice, gas, activeCurrency, conversionRate, blockGasLimit) {
// return h('div.send-screen-input-wrapper', [
// this.state.tooltipIsOpen && h(GasTooltip, {
// className: 'send-tooltip',
// gasPrice,
// gasLimit: gas,
// onClose: this.closeTooltip,
// onFeeChange: ({gasLimit, gasPrice}) => {
// this.setState({
// newTx: {
// ...this.state.newTx,
// gas: gasLimit,
// gasPrice,
// },
// })
// },
// }),
// h('div.send-screen-gas-labels', [
// h('span', [
// h('i.fa.fa-bolt'),
// 'Gas fee:',
// ]),
// h('span', 'What\'s this?'),
// ]),
// // TODO: handle loading time when switching to USD
// h('div.large-input.send-screen-gas-input', {}, [
// h(GasFeeDisplay, {
// activeCurrency,
// conversionRate,
// gas,
// gasPrice,
// blockGasLimit,
// }),
// h('div.send-screen-gas-input-customize', {
// onClick: this.toggleTooltip,
// }, [
// 'Customize',
// ]),
// ]),
// ])
// }
// SendTransactionScreen.prototype.renderMemoInput = function () {
// return h('div.send-screen-input-wrapper', [
// h('div', 'Transaction memo (optional)'),
// h('input.large-input.send-screen-input', {
// onChange: () => {
// this.setState({
// newTx: Object.assign(
// this.state.newTx,
// {
// memo: event.target.value,
// }
// ),
// })
// },
// }),
// ])
// }
// SendTransactionScreen.prototype.render = function () {
// this.persistentFormParentId = 'send-tx-form'
// const props = this.props
// const {
// warning,
// identities,
// addressBook,
// conversionRate,
// } = props
// const {
// blockGasLimit,
// newTx,
// activeCurrency,
// isValid,
// } = this.state
// const { gas, gasPrice } = newTx
// return (
// h('div.send-screen-wrapper', [
// // Main Send token Card
// h('div.send-screen-card', [
// h('img.send-eth-icon', { src: '../images/eth_logo.svg' }),
// h('div.send-screen__title', 'Send'),
// h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'),
// this.renderFromInput(this.state.newTx.from, identities),
// this.renderToInput(this.state.newTx.to, identities, addressBook),
// this.renderAmountInput(activeCurrency),
// this.renderGasInput(
// gasPrice || '0x0',
// gas || '0x0',
// activeCurrency,
// conversionRate,
// blockGasLimit
// ),
// this.renderMemoInput(),
// this.renderErrorMessage(null, warning),
// ]),
// // Buttons underneath card
// h('section.flex-column.flex-center', [
// h('button.btn-secondary.send-screen__send-button', {
// className: !isValid && 'send-screen__send-button__disabled',
// onClick: (event) => isValid && this.onSubmit(event),
// }, 'Next'),
// h('button.btn-tertiary.send-screen__cancel-button', {
// onClick: this.back,
// }, 'Cancel'),
// ]),
// ])
// )
// }
// SendTransactionScreen.prototype.toggleTooltip = function () {
// this.setState({ tooltipIsOpen: !this.state.tooltipIsOpen })
// }
// SendTransactionScreen.prototype.closeTooltip = function () {
// this.setState({ tooltipIsOpen: false })
// }
// SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) {
// this.setState({ activeCurrency: newCurrency })
// }
// SendTransactionScreen.prototype.back = function () {
// var address = this.props.address
// this.props.dispatch(backToAccountDetail(address))
// }
// SendTransactionScreen.prototype.validate = function (balance, amountToSend, { to, from }) {
// const sufficientBalance = conversionGreaterThan(
// {
// value: balance,
// fromNumericBase: 'hex',
// },
// {
// value: amountToSend,
// fromNumericBase: 'hex',
// },
// )
// const amountLessThanZero = conversionGreaterThan(
// {
// value: 0,
// fromNumericBase: 'dec',
// },
// {
// value: amountToSend,
// fromNumericBase: 'hex',
// },
// )
// const errors = {}
// if (!sufficientBalance) {
// errors.amount = 'Insufficient funds.'
// }
// if (amountLessThanZero) {
// errors.amount = 'Can not send negative amounts of ETH.'
// }
// if (!from) {
// errors.from = 'Required'
// }
// if (from && !isValidAddress(from)) {
// errors.from = 'Sender address is invalid.'
// }
// if (!to) {
// errors.to = 'Required'
// }
// if (to && !isValidAddress(to)) {
// errors.to = 'Recipient address is invalid.'
// }
// // if (txData && !isHex(stripHexPrefix(txData))) {
// // message = 'Transaction data must be hex string.'
// // return this.props.dispatch(displayWarning(message))
// // }
// return {
// isValid: allNull(errors),
// errors,
// }
// }
// SendTransactionScreen.prototype.getAmountToSend = function (amount) {
// const { activeCurrency } = this.state
// const { conversionRate } = this.props
// return conversionUtil(amount, {
// fromNumericBase: 'dec',
// toNumericBase: 'hex',
// fromCurrency: activeCurrency,
// toCurrency: 'ETH',
// toDenomination: 'WEI',
// conversionRate,
// invertConversionRate: activeCurrency !== 'ETH',
// })
// }
// SendTransactionScreen.prototype.setErrorsFor = function (field) {
// const { balance } = this.props
// const { newTx, errors: previousErrors } = this.state
// const { amountToSend } = newTx
// const {
// isValid,
// errors: newErrors
// } = this.validate(balance, amountToSend, newTx)
// const nextErrors = Object.assign({}, previousErrors, {
// [field]: newErrors[field] || null
// })
// if (!isValid) {
// this.setState({
// errors: nextErrors,
// isValid,
// })
// }
// }
// SendTransactionScreen.prototype.clearErrorsFor = function (field) {
// const { errors: previousErrors } = this.state
// const nextErrors = Object.assign({}, previousErrors, {
// [field]: null
// })
// this.setState({
// errors: nextErrors,
// isValid: allNull(nextErrors),
// })
// }
// SendTransactionScreen.prototype.onSubmit = function (event) {
// event.preventDefault()
// const { warning, balance } = this.props
// const state = this.state || {}
// const recipient = state.newTx.to
// const sender = state.newTx.from
// const nickname = state.nickname || ' '
// // TODO: convert this to hex when created and include it in send
// const txData = state.newTx.memo
// this.props.dispatch(hideWarning())
// this.props.dispatch(addToAddressBook(recipient, nickname))
// var txParams = {
// from: this.state.newTx.from,
// to: this.state.newTx.to,
// value: this.state.newTx.amountToSend,
// gas: this.state.newTx.gas,
// gasPrice: this.state.newTx.gasPrice,
// }
// if (recipient) txParams.to = addHexPrefix(recipient)
// if (txData) txParams.data = txData
// this.props.dispatch(signTx(txParams))
// }

30
ui/app/template.js
View File

@ -1,30 +0,0 @@
const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
const connect = require('react-redux').connect
module.exports = connect(mapStateToProps)(COMPONENTNAME)
function mapStateToProps (state) {
return {}
}
inherits(COMPONENTNAME, Component)
function COMPONENTNAME () {
Component.call(this)
}
COMPONENTNAME.prototype.render = function () {
const props = this.props
return (
h('div', {
style: {
background: 'blue',
},
}, [
`Hello, ${props.sender}`,
])
)
}

0
ui/app/token-tracker.js
View File

33
ui/lib/contract-namer.js
View File

@ -1,33 +0,0 @@
/* CONTRACT NAMER
*
* Takes an address,
* Returns a nicname if we have one stored,
* otherwise returns null.
*/
const contractMap = require('eth-contract-metadata')
const ethUtil = require('ethereumjs-util')
module.exports = function (addr, identities = {}) {
const checksummed = ethUtil.toChecksumAddress(addr)
if (contractMap[checksummed] && contractMap[checksummed].name) {
return contractMap[checksummed].name
}
const address = addr.toLowerCase()
const ids = hashFromIdentities(identities)
return addrFromHash(address, ids)
}
function hashFromIdentities (identities) {
const result = {}
for (const key in identities) {
result[key] = identities[key].name
}
return result
}
function addrFromHash (addr, hash) {
const address = addr.toLowerCase()
return hash[address] || null
}