Remove unused files from ui folder. (#3577)
* 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
Dan J Miller
parent
9b38a77f46
commit
a1db40047c
|
|
@ -1,5 +1,5 @@
|
|||
var assert = require('assert')
|
||||
var BinaryRenderer = require('../../../ui/app/components/binary-renderer')
|
||||
var BinaryRenderer = require('../../../old-ui/app/components/binary-renderer')
|
||||
|
||||
describe('BinaryRenderer', function () {
|
||||
let binaryRenderer
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const ReactTestUtils = require('react-addons-test-utils')
|
|||
const ethUtil = require('ethereumjs-util')
|
||||
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 () {
|
||||
it('can tolerate a gas decimal number at a high precision', function (done) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ var assert = require('assert')
|
|||
var sinon = require('sinon')
|
||||
|
||||
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 () {
|
||||
beforeEach(function () {
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -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,
|
||||
]))
|
||||
)
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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 || {},
|
||||
}, [])
|
||||
}
|
||||
|
|
@ -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 || {},
|
||||
}, [])
|
||||
}
|
||||
|
|
@ -1,17 +1,11 @@
|
|||
// Reusable Dropdown Components
|
||||
// TODO: Refactor into separate components
|
||||
const Dropdown = require('./components/dropdown').Dropdown
|
||||
const AccountDropdowns = require('./components/account-dropdowns')
|
||||
|
||||
// App-Specific Instances
|
||||
const AccountSelectionDropdown = require('./account-selection-dropdown')
|
||||
const AccountOptionsDropdown = require('./account-options-dropdown')
|
||||
const NetworkDropdown = require('./network-dropdown').default
|
||||
|
||||
module.exports = {
|
||||
AccountSelectionDropdown,
|
||||
AccountOptionsDropdown,
|
||||
NetworkDropdown,
|
||||
Dropdown,
|
||||
AccountDropdowns,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}),
|
||||
])
|
||||
}
|
||||
|
||||
|
|
@ -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',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
|
||||
])
|
||||
)
|
||||
}
|
||||
|
|
@ -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',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
|
||||
])
|
||||
)
|
||||
}
|
||||
|
|
@ -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')),
|
||||
]),
|
||||
])
|
||||
|
||||
)
|
||||
}
|
||||
|
|
@ -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})
|
||||
}
|
||||
|
|
@ -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(),
|
||||
])
|
||||
}
|
||||
|
|
@ -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()
|
||||
: []
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -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',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -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),
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -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)
|
||||
)
|
||||
}
|
||||
|
|
@ -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',
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -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') + `)`),
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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')),
|
||||
]),
|
||||
]),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
|
@ -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),
|
||||
])
|
||||
})
|
||||
}
|
||||
|
|
@ -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
154
ui/app/info.js
|
|
@ -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
547
ui/app/send.js
|
|
@ -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))
|
||||
// }
|
||||
|
|
@ -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}`,
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
}
|
||||
Loading…
Reference in New Issue