Merge pull request #6166 from whymarrh/bye-bye-old-ui
Delete the old UIfeature/default_network_editable
Whymarrh Whitby
6 years ago
committed by
GitHub
commit
65bfdeedc7
@ -1,6 +0,0 @@ |
|||||||
# Running UI Dev Mode |
|
||||||
|
|
||||||
You can run `npm run ui`, and your browser should open a live-reloading demo version of the plugin UI. |
|
||||||
|
|
||||||
Some actions will crash the app, so this is only for tuning aesthetics, but it allows live-reloading styles, which is a much faster feedback loop than reloading the full extension. |
|
||||||
|
|
||||||
@ -1,8 +0,0 @@ |
|||||||
### Developing on UI with Mocked Background Process |
|
||||||
|
|
||||||
You can run `npm run mock` and your browser should open a live-reloading demo version of the plugin UI, just like the `npm run ui`, except that it tries to actually perform all normal operations. |
|
||||||
|
|
||||||
It does not yet connect to a real blockchain (this could be a good test feature later, connecting to a test blockchain), so only local operations work. |
|
||||||
|
|
||||||
You can reset the mock ui at any time with the `Reset` button at the top of the screen. |
|
||||||
|
|
||||||
@ -1,66 +0,0 @@ |
|||||||
|
|
||||||
# Created by https://www.gitignore.io/api/osx,node |
|
||||||
|
|
||||||
### OSX ### |
|
||||||
.DS_Store |
|
||||||
.AppleDouble |
|
||||||
.LSOverride |
|
||||||
|
|
||||||
# Icon must end with two \r |
|
||||||
Icon
|
|
||||||
|
|
||||||
# Thumbnails |
|
||||||
._* |
|
||||||
|
|
||||||
# Files that might appear in the root of a volume |
|
||||||
.DocumentRevisions-V100 |
|
||||||
.fseventsd |
|
||||||
.Spotlight-V100 |
|
||||||
.TemporaryItems |
|
||||||
.Trashes |
|
||||||
.VolumeIcon.icns |
|
||||||
|
|
||||||
# Directories potentially created on remote AFP share |
|
||||||
.AppleDB |
|
||||||
.AppleDesktop |
|
||||||
Network Trash Folder |
|
||||||
Temporary Items |
|
||||||
.apdisk |
|
||||||
|
|
||||||
|
|
||||||
### Node ### |
|
||||||
# Logs |
|
||||||
logs |
|
||||||
*.log |
|
||||||
npm-debug.log* |
|
||||||
|
|
||||||
# Runtime data |
|
||||||
pids |
|
||||||
*.pid |
|
||||||
*.seed |
|
||||||
|
|
||||||
# Directory for instrumented libs generated by jscoverage/JSCover |
|
||||||
lib-cov |
|
||||||
|
|
||||||
# Coverage directory used by tools like istanbul |
|
||||||
coverage |
|
||||||
|
|
||||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) |
|
||||||
.grunt |
|
||||||
|
|
||||||
# node-waf configuration |
|
||||||
.lock-wscript |
|
||||||
|
|
||||||
# Compiled binary addons (http://nodejs.org/api/addons.html) |
|
||||||
build/Release |
|
||||||
|
|
||||||
# Dependency directory |
|
||||||
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git |
|
||||||
node_modules |
|
||||||
|
|
||||||
# Optional npm cache directory |
|
||||||
.npm |
|
||||||
|
|
||||||
# Optional REPL history |
|
||||||
.node_repl_history |
|
||||||
|
|
||||||
@ -1,297 +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('../../ui/app/actions') |
|
||||||
const valuesFor = require('./util').valuesFor |
|
||||||
const Identicon = require('./components/identicon') |
|
||||||
const EthBalance = require('./components/eth-balance') |
|
||||||
const TransactionList = require('./components/transaction-list') |
|
||||||
const ExportAccountView = require('./components/account-export') |
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
const EditableLabel = require('./components/editable-label') |
|
||||||
const TabBar = require('./components/tab-bar') |
|
||||||
const TokenList = require('./components/token-list') |
|
||||||
const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns |
|
||||||
|
|
||||||
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, |
|
||||||
suggestedTokens: state.metamask.suggestedTokens, |
|
||||||
computedBalances: state.metamask.computedBalances, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(AccountDetailScreen, Component) |
|
||||||
function AccountDetailScreen () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
AccountDetailScreen.prototype.render = function () { |
|
||||||
var props = this.props |
|
||||||
var selected = props.address || Object.keys(props.accounts)[0] |
|
||||||
var checksumAddress = selected && ethUtil.toChecksumAddress(selected) |
|
||||||
var identity = props.identities[selected] |
|
||||||
var account = props.accounts[selected] |
|
||||||
const { network, conversionRate, currentCurrency } = props |
|
||||||
|
|
||||||
if (Object.keys(props.suggestedTokens).length > 0) { |
|
||||||
this.props.dispatch(actions.showAddSuggestedTokenPage()) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('.account-detail-section.full-flex-height', [ |
|
||||||
|
|
||||||
// identicon, label, balance, etc
|
|
||||||
h('.account-data-subsection', { |
|
||||||
style: { |
|
||||||
margin: '0 20px', |
|
||||||
flex: '1 0 auto', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
// header - identicon + nav
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
paddingTop: '20px', |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'flex-start', |
|
||||||
alignItems: 'flex-start', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
// large identicon and addresses
|
|
||||||
h('.identicon-wrapper.select-none', [ |
|
||||||
h(Identicon, { |
|
||||||
diameter: 62, |
|
||||||
address: selected, |
|
||||||
}), |
|
||||||
]), |
|
||||||
h('flex-column', { |
|
||||||
style: { |
|
||||||
lineHeight: '10px', |
|
||||||
marginLeft: '15px', |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(EditableLabel, { |
|
||||||
textValue: identity ? identity.name : '', |
|
||||||
state: { |
|
||||||
isEditingLabel: false, |
|
||||||
}, |
|
||||||
saveText: (text) => { |
|
||||||
props.dispatch(actions.setAccountLabel(selected, text)) |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
// What is shown when not editing + edit text:
|
|
||||||
h('label.editing-label', [h('.edit-text', 'edit')]), |
|
||||||
h( |
|
||||||
'div', |
|
||||||
{ |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'flex-start', |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, |
|
||||||
[ |
|
||||||
h( |
|
||||||
'div.font-medium.color-forest', |
|
||||||
{ |
|
||||||
name: 'edit', |
|
||||||
style: { |
|
||||||
}, |
|
||||||
}, |
|
||||||
[ |
|
||||||
h('h2', { |
|
||||||
style: { |
|
||||||
maxWidth: '180px', |
|
||||||
overflow: 'hidden', |
|
||||||
textOverflow: 'ellipsis', |
|
||||||
padding: '5px 0px', |
|
||||||
lineHeight: '25px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
identity && identity.name, |
|
||||||
]), |
|
||||||
] |
|
||||||
), |
|
||||||
h( |
|
||||||
AccountDropdowns, |
|
||||||
{ |
|
||||||
style: { |
|
||||||
marginRight: '8px', |
|
||||||
marginLeft: 'auto', |
|
||||||
cursor: 'pointer', |
|
||||||
}, |
|
||||||
selected, |
|
||||||
network, |
|
||||||
identities: props.identities, |
|
||||||
enableAccountOptions: true, |
|
||||||
}, |
|
||||||
), |
|
||||||
] |
|
||||||
), |
|
||||||
]), |
|
||||||
h('.flex-row', { |
|
||||||
style: { |
|
||||||
width: '15em', |
|
||||||
justifyContent: 'space-between', |
|
||||||
alignItems: 'baseline', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
// address
|
|
||||||
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
overflow: 'hidden', |
|
||||||
textOverflow: 'ellipsis', |
|
||||||
paddingTop: '3px', |
|
||||||
width: '5em', |
|
||||||
height: '15px', |
|
||||||
fontSize: '13px', |
|
||||||
fontFamily: 'Montserrat Light', |
|
||||||
textRendering: 'geometricPrecision', |
|
||||||
marginBottom: '15px', |
|
||||||
color: '#AEAEAE', |
|
||||||
}, |
|
||||||
}, checksumAddress), |
|
||||||
]), |
|
||||||
|
|
||||||
// account ballence
|
|
||||||
|
|
||||||
]), |
|
||||||
]), |
|
||||||
h('.flex-row', { |
|
||||||
style: { |
|
||||||
justifyContent: 'space-between', |
|
||||||
alignItems: 'flex-start', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h(EthBalance, { |
|
||||||
value: account && account.balance, |
|
||||||
conversionRate, |
|
||||||
currentCurrency, |
|
||||||
style: { |
|
||||||
lineHeight: '7px', |
|
||||||
marginTop: '10px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
h('.flex-grow'), |
|
||||||
|
|
||||||
h('button', { |
|
||||||
onClick: () => props.dispatch(actions.buyEthView(selected)), |
|
||||||
style: { marginRight: '10px' }, |
|
||||||
}, 'BUY'), |
|
||||||
|
|
||||||
h('button', { |
|
||||||
onClick: () => props.dispatch(actions.showSendPage()), |
|
||||||
style: { |
|
||||||
marginBottom: '20px', |
|
||||||
marginRight: '8px', |
|
||||||
}, |
|
||||||
}, 'SEND'), |
|
||||||
|
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
// subview (tx history, pk export confirm, buy eth warning)
|
|
||||||
this.subview(), |
|
||||||
|
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
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,86 +0,0 @@ |
|||||||
const PropTypes = require('prop-types') |
|
||||||
const {PureComponent} = require('react') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const {qrcode: qrCode} = require('qrcode-npm') |
|
||||||
const {connect} = require('react-redux') |
|
||||||
const {isHexPrefixed} = require('ethereumjs-util') |
|
||||||
const actions = require('../../ui/app/actions') |
|
||||||
const CopyButton = require('./components/copyButton') |
|
||||||
|
|
||||||
class AccountQrScreen extends PureComponent { |
|
||||||
static defaultProps = { |
|
||||||
warning: null, |
|
||||||
} |
|
||||||
|
|
||||||
static propTypes = { |
|
||||||
dispatch: PropTypes.func.isRequired, |
|
||||||
buyView: PropTypes.any.isRequired, |
|
||||||
Qr: PropTypes.object.isRequired, |
|
||||||
selectedAddress: PropTypes.string.isRequired, |
|
||||||
warning: PropTypes.node, |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
const {dispatch, Qr, selectedAddress, warning} = this.props |
|
||||||
const address = `${isHexPrefixed(Qr.data) ? 'ethereum:' : ''}${Qr.data}` |
|
||||||
const qrImage = qrCode(4, 'M') |
|
||||||
|
|
||||||
qrImage.addData(address) |
|
||||||
qrImage.make() |
|
||||||
|
|
||||||
return h('div.flex-column.full-width', { |
|
||||||
style: { |
|
||||||
alignItems: 'center', |
|
||||||
boxSizing: 'border-box', |
|
||||||
padding: '50px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('div.flex-row.full-width', { |
|
||||||
style: { |
|
||||||
alignItems: 'flex-start', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { |
|
||||||
onClick () { |
|
||||||
dispatch(actions.backToAccountDetail(selectedAddress)) |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
h('div.qr-header', Qr.message), |
|
||||||
warning && h('span.error.flex-center', { |
|
||||||
style: { |
|
||||||
textAlign: 'center', |
|
||||||
width: '229px', |
|
||||||
height: '82px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
this.props.warning, |
|
||||||
]), |
|
||||||
h('div#qr-container.flex-column', { |
|
||||||
style: { |
|
||||||
marginTop: '25px', |
|
||||||
marginBottom: '15px', |
|
||||||
}, |
|
||||||
dangerouslySetInnerHTML: { |
|
||||||
__html: qrImage.createTableTag(4), |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('div.flex-row.full-width', [ |
|
||||||
h('h3.ellip-address.grow-tenx', Qr.data), |
|
||||||
h(CopyButton, { |
|
||||||
value: Qr.data, |
|
||||||
}), |
|
||||||
]), |
|
||||||
]) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
Qr: state.appState.Qr, |
|
||||||
buyView: state.appState.buyView, |
|
||||||
warning: state.appState.warning, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(AccountQrScreen) |
|
||||||
@ -1,119 +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('../../../../ui/app/actions') |
|
||||||
import Select from 'react-select' |
|
||||||
|
|
||||||
// Subviews
|
|
||||||
const JsonImportView = require('./json.js') |
|
||||||
const PrivateKeyImportView = require('./private-key.js') |
|
||||||
|
|
||||||
const menuItems = [ |
|
||||||
'Private Key', |
|
||||||
'JSON File', |
|
||||||
] |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(AccountImportSubview) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
menuItems, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(AccountImportSubview, Component) |
|
||||||
function AccountImportSubview () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
AccountImportSubview.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const state = this.state || {} |
|
||||||
const { menuItems } = props |
|
||||||
const { type } = state |
|
||||||
|
|
||||||
return ( |
|
||||||
h('div', [ |
|
||||||
h('.section-title.flex-row.flex-center', [ |
|
||||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { |
|
||||||
onClick: (event) => { |
|
||||||
props.dispatch(actions.goHome()) |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('h2.page-subtitle', 'Import Accounts'), |
|
||||||
]), |
|
||||||
h('.error', { |
|
||||||
style: { |
|
||||||
display: 'inline-block', |
|
||||||
alignItems: 'center', |
|
||||||
padding: '5px 15px 0px 15px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('span', 'Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts '), |
|
||||||
h('span', { |
|
||||||
style: { |
|
||||||
color: 'rgba(247, 134, 28, 1)', |
|
||||||
cursor: 'pointer', |
|
||||||
textDecoration: 'underline', |
|
||||||
}, |
|
||||||
onClick: () => { |
|
||||||
global.platform.openWindow({ |
|
||||||
url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289592-What-Are-Loose-Accounts-', |
|
||||||
}) |
|
||||||
}, |
|
||||||
}, 'here.'), |
|
||||||
]), |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
padding: '10px', |
|
||||||
color: 'rgb(174, 174, 174)', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('h3', { style: { padding: '3px' } }, 'SELECT TYPE'), |
|
||||||
|
|
||||||
h('style', ` |
|
||||||
.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label { |
|
||||||
color: rgb(174,174,174); |
|
||||||
} |
|
||||||
`),
|
|
||||||
|
|
||||||
h(Select, { |
|
||||||
name: 'import-type-select', |
|
||||||
clearable: false, |
|
||||||
value: type || menuItems[0], |
|
||||||
options: menuItems.map((type) => { |
|
||||||
return { |
|
||||||
value: type, |
|
||||||
label: type, |
|
||||||
} |
|
||||||
}), |
|
||||||
onChange: (opt) => { |
|
||||||
props.dispatch(actions.showImportPage()) |
|
||||||
this.setState({ type: opt.value }) |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
this.renderImportView(), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
AccountImportSubview.prototype.renderImportView = function () { |
|
||||||
const props = this.props |
|
||||||
const state = this.state || {} |
|
||||||
const { type } = state |
|
||||||
const { menuItems } = props |
|
||||||
const current = type || menuItems[0] |
|
||||||
|
|
||||||
switch (current) { |
|
||||||
case 'Private Key': |
|
||||||
return h(PrivateKeyImportView) |
|
||||||
case 'JSON File': |
|
||||||
return h(JsonImportView) |
|
||||||
default: |
|
||||||
return h(JsonImportView) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,124 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const actions = require('../../../../ui/app/actions') |
|
||||||
const FileInput = require('react-simple-file-input').default |
|
||||||
const PropTypes = require('prop-types') |
|
||||||
|
|
||||||
const HELP_LINK = 'https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file' |
|
||||||
|
|
||||||
class JsonImportSubview extends Component { |
|
||||||
constructor (props) { |
|
||||||
super(props) |
|
||||||
|
|
||||||
this.state = { |
|
||||||
file: null, |
|
||||||
fileContents: '', |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
const { error } = this.props |
|
||||||
|
|
||||||
return ( |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
flexDirection: 'column', |
|
||||||
alignItems: 'center', |
|
||||||
padding: '5px 15px 0px 15px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('p', 'Used by a variety of different clients'), |
|
||||||
h('a.warning', { |
|
||||||
href: HELP_LINK, |
|
||||||
target: '_blank', |
|
||||||
}, 'File import not working? Click here!'), |
|
||||||
|
|
||||||
h(FileInput, { |
|
||||||
readAs: 'text', |
|
||||||
onLoad: this.onLoad.bind(this), |
|
||||||
style: { |
|
||||||
margin: '20px 0px 12px 20px', |
|
||||||
fontSize: '15px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
h('input.large-input.letter-spacey', { |
|
||||||
type: 'password', |
|
||||||
placeholder: 'Enter password', |
|
||||||
id: 'json-password-box', |
|
||||||
onKeyPress: this.createKeyringOnEnter.bind(this), |
|
||||||
style: { |
|
||||||
width: 260, |
|
||||||
marginTop: 12, |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
h('button.primary', { |
|
||||||
onClick: this.createNewKeychain.bind(this), |
|
||||||
style: { |
|
||||||
margin: 12, |
|
||||||
}, |
|
||||||
}, 'Import'), |
|
||||||
|
|
||||||
error ? h('span.error', error) : null, |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
onLoad (event, file) { |
|
||||||
this.setState({file: file, fileContents: event.target.result}) |
|
||||||
} |
|
||||||
|
|
||||||
createKeyringOnEnter (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
event.preventDefault() |
|
||||||
this.createNewKeychain() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
createNewKeychain () { |
|
||||||
const { fileContents } = this.state |
|
||||||
|
|
||||||
if (!fileContents) { |
|
||||||
const message = 'You must select a file to import.' |
|
||||||
return this.props.displayWarning(message) |
|
||||||
} |
|
||||||
|
|
||||||
const passwordInput = document.getElementById('json-password-box') |
|
||||||
const password = passwordInput.value |
|
||||||
|
|
||||||
if (!password) { |
|
||||||
const message = 'You must enter a password for the selected file.' |
|
||||||
return this.props.displayWarning(message) |
|
||||||
} |
|
||||||
|
|
||||||
this.props.importNewAccount([ fileContents, password ]) |
|
||||||
// JS runtime requires caught rejections but failures are handled by Redux
|
|
||||||
.catch() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
JsonImportSubview.propTypes = { |
|
||||||
error: PropTypes.string, |
|
||||||
displayWarning: PropTypes.func, |
|
||||||
importNewAccount: PropTypes.func, |
|
||||||
} |
|
||||||
|
|
||||||
const mapStateToProps = state => { |
|
||||||
return { |
|
||||||
error: state.appState.warning, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => { |
|
||||||
return { |
|
||||||
goHome: () => dispatch(actions.goHome()), |
|
||||||
displayWarning: warning => dispatch(actions.displayWarning(warning)), |
|
||||||
importNewAccount: options => dispatch(actions.importNewAccount('JSON File', options)), |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview) |
|
||||||
@ -1,69 +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('../../../../ui/app/actions') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(PrivateKeyImportView) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
error: state.appState.warning, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(PrivateKeyImportView, Component) |
|
||||||
function PrivateKeyImportView () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
PrivateKeyImportView.prototype.render = function () { |
|
||||||
const { error } = this.props |
|
||||||
|
|
||||||
return ( |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
flexDirection: 'column', |
|
||||||
alignItems: 'center', |
|
||||||
padding: '5px 15px 0px 15px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('span', 'Paste your private key string here'), |
|
||||||
|
|
||||||
h('input.large-input.letter-spacey', { |
|
||||||
type: 'password', |
|
||||||
id: 'private-key-box', |
|
||||||
onKeyPress: this.createKeyringOnEnter.bind(this), |
|
||||||
style: { |
|
||||||
width: 260, |
|
||||||
marginTop: 12, |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
h('button.primary', { |
|
||||||
onClick: this.createNewKeychain.bind(this), |
|
||||||
style: { |
|
||||||
margin: 12, |
|
||||||
}, |
|
||||||
}, 'Import'), |
|
||||||
|
|
||||||
error ? h('span.error', error) : null, |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
event.preventDefault() |
|
||||||
this.createNewKeychain() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
PrivateKeyImportView.prototype.createNewKeychain = function () { |
|
||||||
const input = document.getElementById('private-key-box') |
|
||||||
const privateKey = input.value |
|
||||||
this.props.dispatch(actions.importNewAccount('Private Key', [ privateKey ])) |
|
||||||
// JS runtime requires caught rejections but failures are handled by Redux
|
|
||||||
.catch() |
|
||||||
} |
|
||||||
@ -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)(SeedImportSubview) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return {} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(SeedImportSubview, Component) |
|
||||||
function SeedImportSubview () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
SeedImportSubview.prototype.render = function () { |
|
||||||
return ( |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
`Paste your seed phrase here!`, |
|
||||||
h('textarea'), |
|
||||||
h('br'), |
|
||||||
h('button', 'Submit'), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,202 +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('../../ui/app/actions') |
|
||||||
const Tooltip = require('./components/tooltip.js') |
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
const Copyable = require('./components/copyable') |
|
||||||
const addressSummary = require('./util').addressSummary |
|
||||||
|
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(AddSuggestedTokenScreen) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
identities: state.metamask.identities, |
|
||||||
suggestedTokens: state.metamask.suggestedTokens, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(AddSuggestedTokenScreen, Component) |
|
||||||
function AddSuggestedTokenScreen () { |
|
||||||
this.state = { |
|
||||||
warning: null, |
|
||||||
} |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
AddSuggestedTokenScreen.prototype.render = function () { |
|
||||||
const state = this.state |
|
||||||
const props = this.props |
|
||||||
const { warning } = state |
|
||||||
const key = Object.keys(props.suggestedTokens)[0] |
|
||||||
const { address, symbol, decimals } = props.suggestedTokens[key] |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.flex-column.flex-grow', [ |
|
||||||
|
|
||||||
// subtitle and nav
|
|
||||||
h('.section-title.flex-row.flex-center', [ |
|
||||||
h('h2.page-subtitle', 'Add Suggested Token'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('.error', { |
|
||||||
style: { |
|
||||||
display: warning ? 'block' : 'none', |
|
||||||
padding: '0 20px', |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, warning), |
|
||||||
|
|
||||||
// conf view
|
|
||||||
h('.flex-column.flex-justify-center.flex-grow.select-none', [ |
|
||||||
h('.flex-space-around', { |
|
||||||
style: { |
|
||||||
padding: '20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('div', [ |
|
||||||
h(Tooltip, { |
|
||||||
position: 'top', |
|
||||||
title: 'The contract of the actual token contract. Click for more info.', |
|
||||||
}, [ |
|
||||||
h('a', { |
|
||||||
style: { fontWeight: 'bold', paddingRight: '10px'}, |
|
||||||
href: 'https://support.metamask.io/kb/article/24-what-is-a-token-contract-address', |
|
||||||
target: '_blank', |
|
||||||
}, [ |
|
||||||
h('span', 'Token Contract Address '), |
|
||||||
h('i.fa.fa-question-circle'), |
|
||||||
]), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div', { |
|
||||||
style: { display: 'flex' }, |
|
||||||
}, [ |
|
||||||
h(Copyable, { |
|
||||||
value: ethUtil.toChecksumAddress(address), |
|
||||||
}, [ |
|
||||||
h('span#token-address', { |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
flex: '1 0 auto', |
|
||||||
height: '30px', |
|
||||||
margin: '8px', |
|
||||||
display: 'flex', |
|
||||||
}, |
|
||||||
}, addressSummary(address, 24, 4, false)), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div', [ |
|
||||||
h('span', { |
|
||||||
style: { fontWeight: 'bold', paddingRight: '10px'}, |
|
||||||
}, 'Token Symbol'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div', { style: {display: 'flex'} }, [ |
|
||||||
h('p#token_symbol', { |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
flex: '1 0 auto', |
|
||||||
height: '30px', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
}, symbol), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div', [ |
|
||||||
h('span', { |
|
||||||
style: { fontWeight: 'bold', paddingRight: '10px'}, |
|
||||||
}, 'Decimals of Precision'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div', { style: {display: 'flex'} }, [ |
|
||||||
h('p#token_decimals', { |
|
||||||
type: 'number', |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
flex: '1 0 auto', |
|
||||||
height: '30px', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
}, decimals), |
|
||||||
]), |
|
||||||
|
|
||||||
h('button', { |
|
||||||
style: { |
|
||||||
alignSelf: 'center', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
onClick: (event) => { |
|
||||||
this.props.dispatch(actions.removeSuggestedTokens()) |
|
||||||
}, |
|
||||||
}, 'Cancel'), |
|
||||||
|
|
||||||
h('button', { |
|
||||||
style: { |
|
||||||
alignSelf: 'center', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
onClick: (event) => { |
|
||||||
const valid = this.validateInputs({ address, symbol, decimals }) |
|
||||||
if (!valid) return |
|
||||||
|
|
||||||
this.props.dispatch(actions.addToken(address.trim(), symbol.trim(), decimals)) |
|
||||||
.then(() => { |
|
||||||
this.props.dispatch(actions.removeSuggestedTokens()) |
|
||||||
}) |
|
||||||
}, |
|
||||||
}, 'Add'), |
|
||||||
]), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
AddSuggestedTokenScreen.prototype.componentWillMount = function () { |
|
||||||
if (typeof global.ethereumProvider === 'undefined') return |
|
||||||
} |
|
||||||
|
|
||||||
AddSuggestedTokenScreen.prototype.validateInputs = function (opts) { |
|
||||||
let msg = '' |
|
||||||
const identitiesList = Object.keys(this.props.identities) |
|
||||||
const { address, symbol, decimals } = opts |
|
||||||
const standardAddress = ethUtil.addHexPrefix(address).toLowerCase() |
|
||||||
|
|
||||||
const validAddress = ethUtil.isValidAddress(address) |
|
||||||
if (!validAddress) { |
|
||||||
msg += 'Address is invalid.' |
|
||||||
} |
|
||||||
|
|
||||||
const validDecimals = decimals >= 0 && decimals <= 36 |
|
||||||
if (!validDecimals) { |
|
||||||
msg += 'Decimals must be at least 0, and not over 36. ' |
|
||||||
} |
|
||||||
|
|
||||||
const symbolLen = symbol.trim().length |
|
||||||
const validSymbol = symbolLen > 0 && symbolLen < 10 |
|
||||||
if (!validSymbol) { |
|
||||||
msg += 'Symbol must be between 0 and 10 characters.' |
|
||||||
} |
|
||||||
|
|
||||||
const ownAddress = identitiesList.includes(standardAddress) |
|
||||||
if (ownAddress) { |
|
||||||
msg = 'Personal address detected. Input the token contract address.' |
|
||||||
} |
|
||||||
|
|
||||||
const isValid = validAddress && validDecimals && !ownAddress |
|
||||||
|
|
||||||
if (!isValid) { |
|
||||||
this.setState({ |
|
||||||
warning: msg, |
|
||||||
}) |
|
||||||
} else { |
|
||||||
this.setState({ warning: null }) |
|
||||||
} |
|
||||||
|
|
||||||
return isValid |
|
||||||
} |
|
||||||
@ -1,241 +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('../../ui/app/actions') |
|
||||||
const Tooltip = require('./components/tooltip.js') |
|
||||||
|
|
||||||
|
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
const abi = require('human-standard-token-abi') |
|
||||||
const Eth = require('ethjs-query') |
|
||||||
const EthContract = require('ethjs-contract') |
|
||||||
|
|
||||||
const emptyAddr = '0x0000000000000000000000000000000000000000' |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(AddTokenScreen) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
identities: state.metamask.identities, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(AddTokenScreen, Component) |
|
||||||
function AddTokenScreen () { |
|
||||||
this.state = { |
|
||||||
warning: null, |
|
||||||
address: '', |
|
||||||
symbol: 'TOKEN', |
|
||||||
decimals: 18, |
|
||||||
} |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
AddTokenScreen.prototype.render = function () { |
|
||||||
const state = this.state |
|
||||||
const props = this.props |
|
||||||
const { warning, symbol, decimals } = state |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.flex-column.flex-grow', [ |
|
||||||
|
|
||||||
// subtitle and nav
|
|
||||||
h('.section-title.flex-row.flex-center', [ |
|
||||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { |
|
||||||
onClick: (event) => { |
|
||||||
props.dispatch(actions.goHome()) |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('h2.page-subtitle', 'Add Token'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('.error', { |
|
||||||
style: { |
|
||||||
display: warning ? 'block' : 'none', |
|
||||||
padding: '0 20px', |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, warning), |
|
||||||
|
|
||||||
// conf view
|
|
||||||
h('.flex-column.flex-justify-center.flex-grow.select-none', [ |
|
||||||
h('.flex-space-around', { |
|
||||||
style: { |
|
||||||
padding: '20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('div', [ |
|
||||||
h(Tooltip, { |
|
||||||
position: 'top', |
|
||||||
title: 'The contract of the actual token contract. Click for more info.', |
|
||||||
}, [ |
|
||||||
h('a', { |
|
||||||
style: { fontWeight: 'bold', paddingRight: '10px'}, |
|
||||||
href: 'https://support.metamask.io/kb/article/24-what-is-a-token-contract-address', |
|
||||||
target: '_blank', |
|
||||||
}, [ |
|
||||||
h('span', 'Token Contract Address '), |
|
||||||
h('i.fa.fa-question-circle'), |
|
||||||
]), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
h('section.flex-row.flex-center', [ |
|
||||||
h('input#token-address', { |
|
||||||
name: 'address', |
|
||||||
placeholder: 'Token Contract Address', |
|
||||||
onChange: this.tokenAddressDidChange.bind(this), |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
flex: '1 0 auto', |
|
||||||
height: '30px', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div', [ |
|
||||||
h('span', { |
|
||||||
style: { fontWeight: 'bold', paddingRight: '10px'}, |
|
||||||
}, 'Token Symbol'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div', { style: {display: 'flex'} }, [ |
|
||||||
h('input#token_symbol', { |
|
||||||
placeholder: `Like "ETH"`, |
|
||||||
value: symbol, |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
flex: '1 0 auto', |
|
||||||
height: '30px', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
onChange: (event) => { |
|
||||||
var element = event.target |
|
||||||
var symbol = element.value |
|
||||||
this.setState({ symbol }) |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div', [ |
|
||||||
h('span', { |
|
||||||
style: { fontWeight: 'bold', paddingRight: '10px'}, |
|
||||||
}, 'Decimals of Precision'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('div', { style: {display: 'flex'} }, [ |
|
||||||
h('input#token_decimals', { |
|
||||||
value: decimals, |
|
||||||
type: 'number', |
|
||||||
min: 0, |
|
||||||
max: 36, |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
flex: '1 0 auto', |
|
||||||
height: '30px', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
onChange: (event) => { |
|
||||||
var element = event.target |
|
||||||
var decimals = element.value.trim() |
|
||||||
this.setState({ decimals }) |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
h('button', { |
|
||||||
style: { |
|
||||||
alignSelf: 'center', |
|
||||||
}, |
|
||||||
onClick: (event) => { |
|
||||||
const valid = this.validateInputs() |
|
||||||
if (!valid) return |
|
||||||
|
|
||||||
const { address, symbol, decimals } = this.state |
|
||||||
this.props.dispatch(actions.addToken(address.trim(), symbol.trim(), decimals)) |
|
||||||
.then(() => { |
|
||||||
this.props.dispatch(actions.goHome()) |
|
||||||
}) |
|
||||||
}, |
|
||||||
}, 'Add'), |
|
||||||
]), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
AddTokenScreen.prototype.componentWillMount = function () { |
|
||||||
if (typeof global.ethereumProvider === 'undefined') return |
|
||||||
|
|
||||||
this.eth = new Eth(global.ethereumProvider) |
|
||||||
this.contract = new EthContract(this.eth) |
|
||||||
this.TokenContract = this.contract(abi) |
|
||||||
} |
|
||||||
|
|
||||||
AddTokenScreen.prototype.tokenAddressDidChange = function (event) { |
|
||||||
const el = event.target |
|
||||||
const address = el.value.trim() |
|
||||||
if (ethUtil.isValidAddress(address) && address !== emptyAddr) { |
|
||||||
this.setState({ address }) |
|
||||||
this.attemptToAutoFillTokenParams(address) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
AddTokenScreen.prototype.validateInputs = function () { |
|
||||||
let msg = '' |
|
||||||
const state = this.state |
|
||||||
const identitiesList = Object.keys(this.props.identities) |
|
||||||
const { address, symbol, decimals } = state |
|
||||||
const standardAddress = ethUtil.addHexPrefix(address).toLowerCase() |
|
||||||
|
|
||||||
const validAddress = ethUtil.isValidAddress(address) |
|
||||||
if (!validAddress) { |
|
||||||
msg += 'Address is invalid.' |
|
||||||
} |
|
||||||
|
|
||||||
const validDecimals = decimals >= 0 && decimals <= 36 |
|
||||||
if (!validDecimals) { |
|
||||||
msg += 'Decimals must be at least 0, and not over 36. ' |
|
||||||
} |
|
||||||
|
|
||||||
const symbolLen = symbol.trim().length |
|
||||||
const validSymbol = symbolLen > 0 && symbolLen < 10 |
|
||||||
if (!validSymbol) { |
|
||||||
msg += 'Symbol must be between 0 and 10 characters.' |
|
||||||
} |
|
||||||
|
|
||||||
const ownAddress = identitiesList.includes(standardAddress) |
|
||||||
if (ownAddress) { |
|
||||||
msg = 'Personal address detected. Input the token contract address.' |
|
||||||
} |
|
||||||
|
|
||||||
const isValid = validAddress && validDecimals && !ownAddress |
|
||||||
|
|
||||||
if (!isValid) { |
|
||||||
this.setState({ |
|
||||||
warning: msg, |
|
||||||
}) |
|
||||||
} else { |
|
||||||
this.setState({ warning: null }) |
|
||||||
} |
|
||||||
|
|
||||||
return isValid |
|
||||||
} |
|
||||||
|
|
||||||
AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address) { |
|
||||||
const contract = this.TokenContract.at(address) |
|
||||||
|
|
||||||
const results = await Promise.all([ |
|
||||||
contract.symbol(), |
|
||||||
contract.decimals(), |
|
||||||
]) |
|
||||||
|
|
||||||
const [ symbol, decimals ] = results |
|
||||||
if (symbol && decimals) { |
|
||||||
console.log('SETTING SYMBOL AND DECIMALS', { symbol, decimals }) |
|
||||||
this.setState({ symbol: symbol[0], decimals: decimals[0].toString() }) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,315 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const Component = require('react').Component |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const actions = require('../../ui/app/actions') |
|
||||||
const log = require('loglevel') |
|
||||||
// mascara
|
|
||||||
const FirstTime = require('../../ui/app/components/pages/first-time-flow').default |
|
||||||
// init
|
|
||||||
const InitializeMenuScreen = require('./first-time/init-menu') |
|
||||||
const NewKeyChainScreen = require('./new-keychain') |
|
||||||
// unlock
|
|
||||||
const UnlockScreen = require('./unlock') |
|
||||||
// accounts
|
|
||||||
const AccountDetailScreen = require('./account-detail') |
|
||||||
const AccountQrScreen = require('./account-qr') |
|
||||||
const SendTransactionScreen = require('./send') |
|
||||||
const ConfirmTxScreen = require('./conf-tx') |
|
||||||
// notice
|
|
||||||
const NoticeScreen = require('./components/notice') |
|
||||||
const generateLostAccountsNotice = require('../lib/lost-accounts-notice') |
|
||||||
// other views
|
|
||||||
const ConfigScreen = require('./config') |
|
||||||
const AddTokenScreen = require('./add-token') |
|
||||||
const AddSuggestedTokenScreen = require('./add-suggested-token') |
|
||||||
const Import = require('./accounts/import') |
|
||||||
const InfoScreen = require('./info') |
|
||||||
const NewUiAnnouncement = require('./new-ui-annoucement') |
|
||||||
const AppBar = require('./components/app-bar') |
|
||||||
const Loading = require('./components/loading') |
|
||||||
const BuyView = require('./components/buy-button-subview') |
|
||||||
const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') |
|
||||||
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') |
|
||||||
const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') |
|
||||||
const ProviderApproval = require('./provider-approval') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(App) |
|
||||||
|
|
||||||
inherits(App, Component) |
|
||||||
function App () { Component.call(this) } |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
const { |
|
||||||
identities, |
|
||||||
accounts, |
|
||||||
address, |
|
||||||
keyrings, |
|
||||||
isInitialized, |
|
||||||
noActiveNotices, |
|
||||||
seedWords, |
|
||||||
featureFlags, |
|
||||||
providerRequests, |
|
||||||
} = state.metamask |
|
||||||
const selected = address || Object.keys(accounts)[0] |
|
||||||
|
|
||||||
return { |
|
||||||
// state from plugin
|
|
||||||
isLoading: state.appState.isLoading, |
|
||||||
loadingMessage: state.appState.loadingMessage, |
|
||||||
noActiveNotices: state.metamask.noActiveNotices, |
|
||||||
isInitialized: state.metamask.isInitialized, |
|
||||||
isUnlocked: state.metamask.isUnlocked, |
|
||||||
currentView: state.appState.currentView, |
|
||||||
selectedAddress: state.metamask.selectedAddress, |
|
||||||
transForward: state.appState.transForward, |
|
||||||
isMascara: state.metamask.isMascara, |
|
||||||
isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), |
|
||||||
seedWords: state.metamask.seedWords, |
|
||||||
unapprovedTxs: state.metamask.unapprovedTxs, |
|
||||||
unapprovedMsgs: state.metamask.unapprovedMsgs, |
|
||||||
menuOpen: state.appState.menuOpen, |
|
||||||
network: state.metamask.network, |
|
||||||
provider: state.metamask.provider, |
|
||||||
forgottenPassword: state.appState.forgottenPassword, |
|
||||||
nextUnreadNotice: state.metamask.nextUnreadNotice, |
|
||||||
lostAccounts: state.metamask.lostAccounts, |
|
||||||
frequentRpcListDetail: state.metamask.frequentRpcListDetail || [], |
|
||||||
featureFlags, |
|
||||||
providerRequests, |
|
||||||
suggestedTokens: state.metamask.suggestedTokens, |
|
||||||
|
|
||||||
// state needed to get account dropdown temporarily rendering from app bar
|
|
||||||
identities, |
|
||||||
selected, |
|
||||||
keyrings, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
App.prototype.render = function () { |
|
||||||
const { |
|
||||||
currentView, |
|
||||||
dispatch, |
|
||||||
isLoading, |
|
||||||
loadingMessage, |
|
||||||
transForward, |
|
||||||
network, |
|
||||||
featureFlags, |
|
||||||
} = this.props |
|
||||||
const isLoadingNetwork = network === 'loading' && currentView.name !== 'config' |
|
||||||
const loadMessage = loadingMessage || isLoadingNetwork |
|
||||||
? `Connecting to ${this.getNetworkName()}` |
|
||||||
: null |
|
||||||
log.debug('Main ui render function') |
|
||||||
|
|
||||||
if (!featureFlags.skipAnnounceBetaUI) { |
|
||||||
return ( |
|
||||||
h(NewUiAnnouncement, { |
|
||||||
dispatch, |
|
||||||
}) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.flex-column.full-height', { |
|
||||||
style: { |
|
||||||
// Windows was showing a vertical scroll bar:
|
|
||||||
overflow: 'hidden', |
|
||||||
position: 'relative', |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(AppBar, { |
|
||||||
...this.props, |
|
||||||
}), |
|
||||||
this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), |
|
||||||
|
|
||||||
// panel content
|
|
||||||
h('.app-primary' + (transForward ? '.from-right' : '.from-left'), { |
|
||||||
style: { |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
this.renderPrimary(), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) { |
|
||||||
const { isMascara } = this.props |
|
||||||
|
|
||||||
return isMascara |
|
||||||
? null |
|
||||||
: h(Loading, { |
|
||||||
isLoading: isLoading || isLoadingNetwork, |
|
||||||
loadingMessage: loadMessage, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
App.prototype.renderPrimary = function () { |
|
||||||
log.debug('rendering primary') |
|
||||||
var props = this.props |
|
||||||
const {isMascara, isOnboarding, providerRequests} = props |
|
||||||
|
|
||||||
if (isMascara && isOnboarding) { |
|
||||||
return h(FirstTime) |
|
||||||
} |
|
||||||
|
|
||||||
// notices
|
|
||||||
if (!props.noActiveNotices) { |
|
||||||
log.debug('rendering notice screen for unread notices.') |
|
||||||
return h('div', { |
|
||||||
style: { width: '100%' }, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h(NoticeScreen, { |
|
||||||
notice: props.nextUnreadNotice, |
|
||||||
key: 'NoticeScreen', |
|
||||||
onConfirm: () => props.dispatch(actions.markNoticeRead(props.nextUnreadNotice)), |
|
||||||
}), |
|
||||||
]) |
|
||||||
} else if (props.lostAccounts && props.lostAccounts.length > 0) { |
|
||||||
log.debug('rendering notice screen for lost accounts view.') |
|
||||||
return h(NoticeScreen, { |
|
||||||
notice: generateLostAccountsNotice(props.lostAccounts), |
|
||||||
key: 'LostAccountsNotice', |
|
||||||
onConfirm: () => props.dispatch(actions.markAccountsFound()), |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
// show initialize screen
|
|
||||||
if (!props.isInitialized || props.forgottenPassword) { |
|
||||||
// show current view
|
|
||||||
log.debug('rendering an initialize screen') |
|
||||||
switch (props.currentView.name) { |
|
||||||
|
|
||||||
case 'restoreVault': |
|
||||||
log.debug('rendering restore vault screen') |
|
||||||
return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) |
|
||||||
|
|
||||||
default: |
|
||||||
log.debug('rendering menu screen') |
|
||||||
return h(InitializeMenuScreen, {key: 'menuScreenInit'}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// show unlock screen
|
|
||||||
if (!props.isUnlocked) { |
|
||||||
switch (props.currentView.name) { |
|
||||||
|
|
||||||
case 'restoreVault': |
|
||||||
log.debug('rendering restore vault screen') |
|
||||||
return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) |
|
||||||
|
|
||||||
case 'config': |
|
||||||
log.debug('rendering config screen from unlock screen.') |
|
||||||
return h(ConfigScreen, {key: 'config'}) |
|
||||||
|
|
||||||
default: |
|
||||||
log.debug('rendering locked screen') |
|
||||||
return h(UnlockScreen, {key: 'locked'}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// show seed words screen
|
|
||||||
if (props.seedWords) { |
|
||||||
log.debug('rendering seed words') |
|
||||||
return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) |
|
||||||
} |
|
||||||
|
|
||||||
if (providerRequests && providerRequests.length > 0) { |
|
||||||
log.debug('rendering provider API approval screen') |
|
||||||
return h(ProviderApproval, { origin: providerRequests[0].origin, tabID: providerRequests[0].tabID }) |
|
||||||
} |
|
||||||
|
|
||||||
// show current view
|
|
||||||
switch (props.currentView.name) { |
|
||||||
|
|
||||||
case 'accountDetail': |
|
||||||
log.debug('rendering account detail screen') |
|
||||||
return h(AccountDetailScreen, {key: 'account-detail'}) |
|
||||||
|
|
||||||
case 'sendTransaction': |
|
||||||
log.debug('rendering send tx screen') |
|
||||||
return h(SendTransactionScreen, {key: 'send-transaction'}) |
|
||||||
|
|
||||||
case 'newKeychain': |
|
||||||
log.debug('rendering new keychain screen') |
|
||||||
return h(NewKeyChainScreen, {key: 'new-keychain'}) |
|
||||||
|
|
||||||
case 'confTx': |
|
||||||
log.debug('rendering confirm tx screen') |
|
||||||
return h(ConfirmTxScreen, {key: 'confirm-tx'}) |
|
||||||
|
|
||||||
case 'add-token': |
|
||||||
log.debug('rendering add-token screen from unlock screen.') |
|
||||||
return h(AddTokenScreen, {key: 'add-token'}) |
|
||||||
|
|
||||||
case 'add-suggested-token': |
|
||||||
log.debug('rendering add-suggested-token screen from unlock screen.') |
|
||||||
return h(AddSuggestedTokenScreen, {key: 'add-suggested-token'}) |
|
||||||
|
|
||||||
case 'config': |
|
||||||
log.debug('rendering config screen') |
|
||||||
return h(ConfigScreen, {key: 'config'}) |
|
||||||
|
|
||||||
case 'import-menu': |
|
||||||
log.debug('rendering import screen') |
|
||||||
return h(Import, {key: 'import-menu'}) |
|
||||||
|
|
||||||
case 'reveal-seed-conf': |
|
||||||
log.debug('rendering reveal seed confirmation screen') |
|
||||||
return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) |
|
||||||
|
|
||||||
case 'info': |
|
||||||
log.debug('rendering info screen') |
|
||||||
return h(InfoScreen, {key: 'info'}) |
|
||||||
|
|
||||||
case 'buyEth': |
|
||||||
log.debug('rendering buy ether screen') |
|
||||||
return h(BuyView, {key: 'buyEthView'}) |
|
||||||
|
|
||||||
case 'qr': |
|
||||||
log.debug('rendering show qr screen') |
|
||||||
return h(AccountQrScreen, { |
|
||||||
key: 'account-qr', |
|
||||||
selectedAddress: props.selectedAddress, |
|
||||||
}) |
|
||||||
|
|
||||||
default: |
|
||||||
log.debug('rendering default, account detail screen') |
|
||||||
return h(AccountDetailScreen, {key: 'account-detail'}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
App.prototype.toggleMetamaskActive = function () { |
|
||||||
if (!this.props.isUnlocked) { |
|
||||||
// currently inactive: redirect to password box
|
|
||||||
var passwordBox = document.querySelector('input[type=password]') |
|
||||||
if (!passwordBox) return |
|
||||||
passwordBox.focus() |
|
||||||
} else { |
|
||||||
// currently active: deactivate
|
|
||||||
this.props.dispatch(actions.lockMetamask(false)) |
|
||||||
} |
|
||||||
} |
|
||||||
App.prototype.getNetworkName = function () { |
|
||||||
const { provider } = this.props |
|
||||||
const providerName = provider.type |
|
||||||
|
|
||||||
let name |
|
||||||
|
|
||||||
if (providerName === 'mainnet') { |
|
||||||
name = 'Main Ethereum Network' |
|
||||||
} else if (providerName === 'ropsten') { |
|
||||||
name = 'Ropsten Test Network' |
|
||||||
} else if (providerName === 'kovan') { |
|
||||||
name = 'Kovan Test Network' |
|
||||||
} else if (providerName === 'rinkeby') { |
|
||||||
name = 'Rinkeby Test Network' |
|
||||||
} else { |
|
||||||
name = 'Unknown Private Network' |
|
||||||
} |
|
||||||
|
|
||||||
return name |
|
||||||
} |
|
||||||
@ -1,321 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const PropTypes = require('prop-types') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const actions = require('../../../ui/app/actions') |
|
||||||
const genAccountLink = require('etherscan-link').createAccountLink |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const Dropdown = require('./dropdown').Dropdown |
|
||||||
const DropdownMenuItem = require('./dropdown').DropdownMenuItem |
|
||||||
const Identicon = require('./identicon') |
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
const copyToClipboard = require('copy-to-clipboard') |
|
||||||
|
|
||||||
class AccountDropdowns extends Component { |
|
||||||
constructor (props) { |
|
||||||
super(props) |
|
||||||
this.state = { |
|
||||||
accountSelectorActive: false, |
|
||||||
optionsMenuActive: false, |
|
||||||
} |
|
||||||
this.accountSelectorToggleClassName = 'accounts-selector' |
|
||||||
this.optionsMenuToggleClassName = 'fa-ellipsis-h' |
|
||||||
} |
|
||||||
|
|
||||||
renderAccounts () { |
|
||||||
const { identities, selected, keyrings } = this.props |
|
||||||
const accountOrder = keyrings.reduce((list, keyring) => list.concat(keyring.accounts), []) |
|
||||||
|
|
||||||
return accountOrder.map((address, index) => { |
|
||||||
const identity = identities[address] |
|
||||||
const isSelected = identity.address === selected |
|
||||||
|
|
||||||
const simpleAddress = identity.address.substring(2).toLowerCase() |
|
||||||
|
|
||||||
const keyring = keyrings.find((kr) => { |
|
||||||
return kr.accounts.includes(simpleAddress) || |
|
||||||
kr.accounts.includes(identity.address) |
|
||||||
}) |
|
||||||
|
|
||||||
return h( |
|
||||||
DropdownMenuItem, |
|
||||||
{ |
|
||||||
closeMenu: () => {}, |
|
||||||
onClick: () => { |
|
||||||
this.props.actions.showAccountDetail(identity.address) |
|
||||||
}, |
|
||||||
style: { |
|
||||||
marginTop: index === 0 ? '5px' : '', |
|
||||||
fontSize: '24px', |
|
||||||
}, |
|
||||||
}, |
|
||||||
[ |
|
||||||
h( |
|
||||||
Identicon, |
|
||||||
{ |
|
||||||
address: identity.address, |
|
||||||
diameter: 32, |
|
||||||
style: { |
|
||||||
marginLeft: '10px', |
|
||||||
}, |
|
||||||
}, |
|
||||||
), |
|
||||||
this.indicateIfLoose(keyring), |
|
||||||
h('span', { |
|
||||||
style: { |
|
||||||
marginLeft: '20px', |
|
||||||
fontSize: '24px', |
|
||||||
maxWidth: '145px', |
|
||||||
whiteSpace: 'nowrap', |
|
||||||
overflow: 'hidden', |
|
||||||
textOverflow: 'ellipsis', |
|
||||||
}, |
|
||||||
}, identity.name || ''), |
|
||||||
h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null), |
|
||||||
] |
|
||||||
) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
indicateIfLoose (keyring) { |
|
||||||
try { // Sometimes keyrings aren't loaded yet:
|
|
||||||
const type = keyring.type |
|
||||||
const isLoose = type !== 'HD Key Tree' |
|
||||||
return isLoose ? h('.keyring-label', 'IMPORTED') : null |
|
||||||
} catch (e) { return } |
|
||||||
} |
|
||||||
|
|
||||||
renderAccountSelector () { |
|
||||||
const { actions } = this.props |
|
||||||
const { accountSelectorActive } = this.state |
|
||||||
|
|
||||||
return h( |
|
||||||
Dropdown, |
|
||||||
{ |
|
||||||
useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
|
|
||||||
style: { |
|
||||||
marginLeft: '-238px', |
|
||||||
marginTop: '38px', |
|
||||||
minWidth: '180px', |
|
||||||
overflowY: 'auto', |
|
||||||
maxHeight: '300px', |
|
||||||
width: '300px', |
|
||||||
}, |
|
||||||
innerStyle: { |
|
||||||
padding: '8px 25px', |
|
||||||
}, |
|
||||||
isOpen: accountSelectorActive, |
|
||||||
onClickOutside: (event) => { |
|
||||||
const { classList } = event.target |
|
||||||
const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName) |
|
||||||
if (accountSelectorActive && isNotToggleElement) { |
|
||||||
this.setState({ accountSelectorActive: false }) |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
[ |
|
||||||
...this.renderAccounts(), |
|
||||||
h( |
|
||||||
DropdownMenuItem, |
|
||||||
{ |
|
||||||
closeMenu: () => {}, |
|
||||||
onClick: () => actions.addNewAccount(), |
|
||||||
}, |
|
||||||
[ |
|
||||||
h( |
|
||||||
Identicon, |
|
||||||
{ |
|
||||||
style: { |
|
||||||
marginLeft: '10px', |
|
||||||
}, |
|
||||||
diameter: 32, |
|
||||||
}, |
|
||||||
), |
|
||||||
h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'), |
|
||||||
], |
|
||||||
), |
|
||||||
h( |
|
||||||
DropdownMenuItem, |
|
||||||
{ |
|
||||||
closeMenu: () => {}, |
|
||||||
onClick: () => actions.showImportPage(), |
|
||||||
}, |
|
||||||
[ |
|
||||||
h( |
|
||||||
Identicon, |
|
||||||
{ |
|
||||||
style: { |
|
||||||
marginLeft: '10px', |
|
||||||
}, |
|
||||||
diameter: 32, |
|
||||||
}, |
|
||||||
), |
|
||||||
h('span', { |
|
||||||
style: { |
|
||||||
marginLeft: '20px', |
|
||||||
fontSize: '24px', |
|
||||||
marginBottom: '5px', |
|
||||||
}, |
|
||||||
}, 'Import Account'), |
|
||||||
] |
|
||||||
), |
|
||||||
] |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
renderAccountOptions () { |
|
||||||
const { actions } = this.props |
|
||||||
const { optionsMenuActive } = this.state |
|
||||||
|
|
||||||
return h( |
|
||||||
Dropdown, |
|
||||||
{ |
|
||||||
style: { |
|
||||||
marginLeft: '-215px', |
|
||||||
minWidth: '180px', |
|
||||||
}, |
|
||||||
isOpen: optionsMenuActive, |
|
||||||
onClickOutside: (event) => { |
|
||||||
const { classList } = event.target |
|
||||||
const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName) |
|
||||||
if (optionsMenuActive && isNotToggleElement) { |
|
||||||
this.setState({ optionsMenuActive: false }) |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
[ |
|
||||||
h( |
|
||||||
DropdownMenuItem, |
|
||||||
{ |
|
||||||
closeMenu: () => {}, |
|
||||||
onClick: () => { |
|
||||||
const { selected, network } = this.props |
|
||||||
const url = genAccountLink(selected, network) |
|
||||||
global.platform.openWindow({ url }) |
|
||||||
}, |
|
||||||
}, |
|
||||||
'View account on Etherscan', |
|
||||||
), |
|
||||||
h( |
|
||||||
DropdownMenuItem, |
|
||||||
{ |
|
||||||
closeMenu: () => {}, |
|
||||||
onClick: () => { |
|
||||||
const { selected, identities } = this.props |
|
||||||
var identity = identities[selected] |
|
||||||
actions.showQrView(selected, identity ? identity.name : '') |
|
||||||
}, |
|
||||||
}, |
|
||||||
'Show QR Code', |
|
||||||
), |
|
||||||
h( |
|
||||||
DropdownMenuItem, |
|
||||||
{ |
|
||||||
closeMenu: () => {}, |
|
||||||
onClick: () => { |
|
||||||
const { selected } = this.props |
|
||||||
const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) |
|
||||||
copyToClipboard(checkSumAddress) |
|
||||||
}, |
|
||||||
}, |
|
||||||
'Copy Address to clipboard', |
|
||||||
), |
|
||||||
h( |
|
||||||
DropdownMenuItem, |
|
||||||
{ |
|
||||||
closeMenu: () => {}, |
|
||||||
onClick: () => { |
|
||||||
actions.requestAccountExport() |
|
||||||
}, |
|
||||||
}, |
|
||||||
'Export Private Key', |
|
||||||
), |
|
||||||
] |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
const { style, enableAccountsSelector, enableAccountOptions } = this.props |
|
||||||
const { optionsMenuActive, accountSelectorActive } = this.state |
|
||||||
|
|
||||||
return h( |
|
||||||
'span', |
|
||||||
{ |
|
||||||
style: style, |
|
||||||
}, |
|
||||||
[ |
|
||||||
enableAccountsSelector && h( |
|
||||||
// 'i.fa.fa-angle-down',
|
|
||||||
'div.cursor-pointer.color-orange.accounts-selector', |
|
||||||
{ |
|
||||||
style: { |
|
||||||
// fontSize: '1.8em',
|
|
||||||
background: 'url(images/switch_acc.svg) white center center no-repeat', |
|
||||||
height: '25px', |
|
||||||
width: '25px', |
|
||||||
transform: 'scale(0.75)', |
|
||||||
marginRight: '3px', |
|
||||||
}, |
|
||||||
onClick: (event) => { |
|
||||||
event.stopPropagation() |
|
||||||
this.setState({ |
|
||||||
accountSelectorActive: !accountSelectorActive, |
|
||||||
optionsMenuActive: false, |
|
||||||
}) |
|
||||||
}, |
|
||||||
}, |
|
||||||
this.renderAccountSelector(), |
|
||||||
), |
|
||||||
enableAccountOptions && h( |
|
||||||
'i.fa.fa-ellipsis-h', |
|
||||||
{ |
|
||||||
style: { |
|
||||||
margin: '0.5em', |
|
||||||
fontSize: '1.8em', |
|
||||||
}, |
|
||||||
onClick: (event) => { |
|
||||||
event.stopPropagation() |
|
||||||
this.setState({ |
|
||||||
accountSelectorActive: false, |
|
||||||
optionsMenuActive: !optionsMenuActive, |
|
||||||
}) |
|
||||||
}, |
|
||||||
}, |
|
||||||
this.renderAccountOptions() |
|
||||||
), |
|
||||||
] |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
AccountDropdowns.defaultProps = { |
|
||||||
enableAccountsSelector: false, |
|
||||||
enableAccountOptions: false, |
|
||||||
} |
|
||||||
|
|
||||||
AccountDropdowns.propTypes = { |
|
||||||
identities: PropTypes.objectOf(PropTypes.object), |
|
||||||
selected: PropTypes.string, |
|
||||||
keyrings: PropTypes.array, |
|
||||||
actions: PropTypes.objectOf(PropTypes.func), |
|
||||||
network: PropTypes.string, |
|
||||||
style: PropTypes.object, |
|
||||||
enableAccountOptions: PropTypes.bool, |
|
||||||
enableAccountsSelector: PropTypes.bool, |
|
||||||
} |
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch) => { |
|
||||||
return { |
|
||||||
actions: { |
|
||||||
showConfigPage: () => dispatch(actions.showConfigPage()), |
|
||||||
requestAccountExport: () => dispatch(actions.requestExportAccount()), |
|
||||||
showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)), |
|
||||||
addNewAccount: () => dispatch(actions.addNewAccount()), |
|
||||||
showImportPage: () => dispatch(actions.showImportPage()), |
|
||||||
showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), |
|
||||||
}, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = { |
|
||||||
AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns), |
|
||||||
} |
|
||||||
@ -1,132 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const exportAsFile = require('../util').exportAsFile |
|
||||||
const copyToClipboard = require('copy-to-clipboard') |
|
||||||
const actions = require('../../../ui/app/actions') |
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(ExportAccountView) |
|
||||||
|
|
||||||
inherits(ExportAccountView, Component) |
|
||||||
function ExportAccountView () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
warning: state.appState.warning, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ExportAccountView.prototype.render = function () { |
|
||||||
const state = this.props |
|
||||||
const accountDetail = state.accountDetail |
|
||||||
const nickname = state.identities[state.address].name |
|
||||||
|
|
||||||
if (!accountDetail) return h('div') |
|
||||||
const accountExport = accountDetail.accountExport |
|
||||||
|
|
||||||
const notExporting = accountExport === 'none' |
|
||||||
const exportRequested = accountExport === 'requested' |
|
||||||
const accountExported = accountExport === 'completed' |
|
||||||
|
|
||||||
if (notExporting) return h('div') |
|
||||||
|
|
||||||
if (exportRequested) { |
|
||||||
const warning = `Export private keys at your own risk.` |
|
||||||
return ( |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
display: 'inline-block', |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, |
|
||||||
[ |
|
||||||
h('div', { |
|
||||||
key: 'exporting', |
|
||||||
style: { |
|
||||||
margin: '0 20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('p.error', warning), |
|
||||||
h('input#exportAccount.sizing-input', { |
|
||||||
type: 'password', |
|
||||||
placeholder: 'confirm password', |
|
||||||
onKeyPress: this.onExportKeyPress.bind(this), |
|
||||||
style: { |
|
||||||
position: 'relative', |
|
||||||
top: '1.5px', |
|
||||||
marginBottom: '7px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
h('div', { |
|
||||||
key: 'buttons', |
|
||||||
style: { |
|
||||||
margin: '0 20px', |
|
||||||
}, |
|
||||||
}, |
|
||||||
[ |
|
||||||
h('button', { |
|
||||||
onClick: () => this.onExportKeyPress({ key: 'Enter', preventDefault: () => {} }), |
|
||||||
style: { |
|
||||||
marginRight: '10px', |
|
||||||
}, |
|
||||||
}, 'Submit'), |
|
||||||
h('button', { |
|
||||||
onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)), |
|
||||||
}, 'Cancel'), |
|
||||||
]), |
|
||||||
(this.props.warning) && ( |
|
||||||
h('span.error', { |
|
||||||
style: { |
|
||||||
margin: '20px', |
|
||||||
}, |
|
||||||
}, this.props.warning.split('-')) |
|
||||||
), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
if (accountExported) { |
|
||||||
const plainKey = ethUtil.stripHexPrefix(accountDetail.privateKey) |
|
||||||
|
|
||||||
return h('div.privateKey', { |
|
||||||
style: { |
|
||||||
margin: '0 20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('label', 'Your private key (click to copy):'), |
|
||||||
h('p.error.cursor-pointer', { |
|
||||||
style: { |
|
||||||
textOverflow: 'ellipsis', |
|
||||||
overflow: 'hidden', |
|
||||||
webkitUserSelect: 'text', |
|
||||||
maxWidth: '275px', |
|
||||||
}, |
|
||||||
onClick: function (event) { |
|
||||||
copyToClipboard(ethUtil.stripHexPrefix(accountDetail.privateKey)) |
|
||||||
}, |
|
||||||
}, plainKey), |
|
||||||
h('button', { |
|
||||||
onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)), |
|
||||||
}, 'Done'), |
|
||||||
h('button', { |
|
||||||
style: { |
|
||||||
marginLeft: '10px', |
|
||||||
}, |
|
||||||
onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey), |
|
||||||
}, 'Save as File'), |
|
||||||
]) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ExportAccountView.prototype.onExportKeyPress = function (event) { |
|
||||||
if (event.key !== 'Enter') return |
|
||||||
event.preventDefault() |
|
||||||
|
|
||||||
const input = document.getElementById('exportAccount').value |
|
||||||
this.props.dispatch(actions.exportAccount(input, this.props.address)) |
|
||||||
} |
|
||||||
@ -1,86 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const Identicon = require('./identicon') |
|
||||||
const formatBalance = require('../util').formatBalance |
|
||||||
const addressSummary = require('../util').addressSummary |
|
||||||
|
|
||||||
module.exports = AccountPanel |
|
||||||
|
|
||||||
|
|
||||||
inherits(AccountPanel, Component) |
|
||||||
function AccountPanel () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
AccountPanel.prototype.render = function () { |
|
||||||
var state = this.props |
|
||||||
var identity = state.identity || {} |
|
||||||
var account = state.account || {} |
|
||||||
var isFauceting = state.isFauceting |
|
||||||
|
|
||||||
var panelState = { |
|
||||||
key: `accountPanel${identity.address}`, |
|
||||||
identiconKey: identity.address, |
|
||||||
identiconLabel: identity.name || '', |
|
||||||
attributes: [ |
|
||||||
{ |
|
||||||
key: 'ADDRESS', |
|
||||||
value: addressSummary(identity.address), |
|
||||||
}, |
|
||||||
balanceOrFaucetingIndication(account, isFauceting), |
|
||||||
], |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('.identity-panel.flex-row.flex-space-between', { |
|
||||||
style: { |
|
||||||
flex: '1 0 auto', |
|
||||||
cursor: panelState.onClick ? 'pointer' : undefined, |
|
||||||
}, |
|
||||||
onClick: panelState.onClick, |
|
||||||
}, [ |
|
||||||
|
|
||||||
// account identicon
|
|
||||||
h('.identicon-wrapper.flex-column.select-none', [ |
|
||||||
h(Identicon, { |
|
||||||
address: panelState.identiconKey, |
|
||||||
imageify: state.imageifyIdenticons, |
|
||||||
}), |
|
||||||
h('span.font-small', panelState.identiconLabel.substring(0, 7) + '...'), |
|
||||||
]), |
|
||||||
|
|
||||||
// account address, balance
|
|
||||||
h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ |
|
||||||
|
|
||||||
panelState.attributes.map((attr) => { |
|
||||||
return h('.flex-row.flex-space-between', { |
|
||||||
key: '' + Math.round(Math.random() * 1000000), |
|
||||||
}, [ |
|
||||||
h('label.font-small.no-select', attr.key), |
|
||||||
h('span.font-small', attr.value), |
|
||||||
]) |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
]) |
|
||||||
|
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
function balanceOrFaucetingIndication (account, isFauceting) { |
|
||||||
// Temporarily deactivating isFauceting indication
|
|
||||||
// because it shows fauceting for empty restored accounts.
|
|
||||||
if (/* isFauceting*/ false) { |
|
||||||
return { |
|
||||||
key: 'Account is auto-funding.', |
|
||||||
value: 'Please wait.', |
|
||||||
} |
|
||||||
} else { |
|
||||||
return { |
|
||||||
key: 'BALANCE', |
|
||||||
value: formatBalance(account.balance), |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,436 +0,0 @@ |
|||||||
const PropTypes = require('prop-types') |
|
||||||
const {Component} = require('react') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const actions = require('../../../ui/app/actions') |
|
||||||
const SandwichExpando = require('sandwich-expando') |
|
||||||
const {Dropdown} = require('./dropdown') |
|
||||||
const {DropdownMenuItem} = require('./dropdown') |
|
||||||
const NetworkIndicator = require('./network') |
|
||||||
const {AccountDropdowns} = require('./account-dropdowns') |
|
||||||
|
|
||||||
const LOCALHOST_RPC_URL = 'http://localhost:8545' |
|
||||||
|
|
||||||
module.exports = class AppBar extends Component { |
|
||||||
static defaultProps = { |
|
||||||
selectedAddress: undefined, |
|
||||||
} |
|
||||||
|
|
||||||
static propTypes = { |
|
||||||
dispatch: PropTypes.func.isRequired, |
|
||||||
frequentRpcListDetail: PropTypes.array.isRequired, |
|
||||||
isMascara: PropTypes.bool.isRequired, |
|
||||||
isOnboarding: PropTypes.bool.isRequired, |
|
||||||
identities: PropTypes.any.isRequired, |
|
||||||
selectedAddress: PropTypes.string, |
|
||||||
isUnlocked: PropTypes.bool.isRequired, |
|
||||||
network: PropTypes.any.isRequired, |
|
||||||
keyrings: PropTypes.any.isRequired, |
|
||||||
provider: PropTypes.any.isRequired, |
|
||||||
} |
|
||||||
|
|
||||||
static renderSpace () { |
|
||||||
return ( |
|
||||||
h('span', { |
|
||||||
dangerouslySetInnerHTML: { |
|
||||||
__html: ' ', |
|
||||||
}, |
|
||||||
}) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
state = { |
|
||||||
isNetworkMenuOpen: false, |
|
||||||
} |
|
||||||
|
|
||||||
renderAppBar () { |
|
||||||
if (window.METAMASK_UI_TYPE === 'notification') { |
|
||||||
return null |
|
||||||
} |
|
||||||
|
|
||||||
const props = this.props |
|
||||||
const {isMascara, isOnboarding} = props |
|
||||||
|
|
||||||
// Do not render header if user is in mascara onboarding
|
|
||||||
if (isMascara && isOnboarding) { |
|
||||||
return null |
|
||||||
} |
|
||||||
|
|
||||||
// Do not render header if user is in mascara buy ether
|
|
||||||
if (isMascara && props.currentView.name === 'buyEth') { |
|
||||||
return null |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
h('div.app-bar', [ |
|
||||||
this.renderAppBarNewUiNotice(), |
|
||||||
this.renderAppBarAppHeader(), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
renderAppBarNewUiNotice () { |
|
||||||
const {dispatch} = this.props |
|
||||||
|
|
||||||
return ( |
|
||||||
h('div.app-bar__new-ui-banner', { |
|
||||||
style: { |
|
||||||
height: '28px', |
|
||||||
zIndex: 12, |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'Try the New MetaMask', |
|
||||||
AppBar.renderSpace(), |
|
||||||
h('span.banner__link', { |
|
||||||
async onClick () { |
|
||||||
await dispatch(actions.setFeatureFlag('betaUI', true)) |
|
||||||
global.platform.openExtensionInBrowser() |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'Now', |
|
||||||
]), |
|
||||||
AppBar.renderSpace(), |
|
||||||
'or', |
|
||||||
AppBar.renderSpace(), |
|
||||||
h('span.banner__link', { |
|
||||||
onClick () { |
|
||||||
global.platform.openWindow({ |
|
||||||
url: 'https://medium.com/metamask/74dba32cc7f7', |
|
||||||
}) |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'Learn More', |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
renderAppBarAppHeader () { |
|
||||||
const { |
|
||||||
identities, |
|
||||||
selectedAddress, |
|
||||||
isUnlocked, |
|
||||||
network, |
|
||||||
keyrings, |
|
||||||
provider, |
|
||||||
} = this.props |
|
||||||
const { |
|
||||||
isNetworkMenuOpen, |
|
||||||
isMainMenuOpen, |
|
||||||
} = this.state |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.full-width', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
flexDirection: 'column', |
|
||||||
height: '38px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.app-header.flex-row.flex-space-between', { |
|
||||||
style: { |
|
||||||
alignItems: 'center', |
|
||||||
visibility: isUnlocked ? 'visible' : 'none', |
|
||||||
background: isUnlocked ? 'white' : 'none', |
|
||||||
height: '38px', |
|
||||||
position: 'relative', |
|
||||||
zIndex: 12, |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('div.left-menu-section', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
flexDirection: 'row', |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
// mini logo
|
|
||||||
h('img', { |
|
||||||
height: 24, |
|
||||||
width: 24, |
|
||||||
src: './images/icon-128.png', |
|
||||||
}), |
|
||||||
h(NetworkIndicator, { |
|
||||||
network: network, |
|
||||||
provider: provider, |
|
||||||
onClick: (event) => { |
|
||||||
event.preventDefault() |
|
||||||
event.stopPropagation() |
|
||||||
this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
isUnlocked && h('div', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
flexDirection: 'row', |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(AccountDropdowns, { |
|
||||||
style: {}, |
|
||||||
enableAccountsSelector: true, |
|
||||||
identities: identities, |
|
||||||
selected: selectedAddress, |
|
||||||
network, |
|
||||||
keyrings, |
|
||||||
}, []), |
|
||||||
h(SandwichExpando, { |
|
||||||
className: 'sandwich-expando', |
|
||||||
width: 16, |
|
||||||
barHeight: 2, |
|
||||||
padding: 0, |
|
||||||
isOpen: isMainMenuOpen, |
|
||||||
color: 'rgb(247,146,30)', |
|
||||||
onClick: () => { |
|
||||||
this.setState({ |
|
||||||
isMainMenuOpen: !isMainMenuOpen, |
|
||||||
}) |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
renderNetworkDropdown () { |
|
||||||
const { |
|
||||||
dispatch, |
|
||||||
frequentRpcListDetail: rpcList, |
|
||||||
provider, |
|
||||||
} = this.props |
|
||||||
const { |
|
||||||
type: providerType, |
|
||||||
rpcTarget: activeNetwork, |
|
||||||
} = provider |
|
||||||
const isOpen = this.state.isNetworkMenuOpen |
|
||||||
|
|
||||||
return h(Dropdown, { |
|
||||||
useCssTransition: true, |
|
||||||
isOpen, |
|
||||||
onClickOutside: (event) => { |
|
||||||
const { classList } = event.target |
|
||||||
const isNotToggleElement = [ |
|
||||||
classList.contains('menu-icon'), |
|
||||||
classList.contains('network-name'), |
|
||||||
classList.contains('network-indicator'), |
|
||||||
].filter(bool => bool).length === 0 |
|
||||||
// classes from three constituent nodes of the toggle element
|
|
||||||
|
|
||||||
if (isNotToggleElement) { |
|
||||||
this.setState({ isNetworkMenuOpen: false }) |
|
||||||
} |
|
||||||
}, |
|
||||||
zIndex: 11, |
|
||||||
style: { |
|
||||||
position: 'absolute', |
|
||||||
left: '2px', |
|
||||||
top: '64px', |
|
||||||
}, |
|
||||||
innerStyle: { |
|
||||||
padding: '2px 16px 2px 0px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(DropdownMenuItem, { |
|
||||||
key: 'main', |
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), |
|
||||||
onClick: () => dispatch(actions.setProviderType('mainnet')), |
|
||||||
style: { |
|
||||||
fontSize: '18px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.menu-icon.diamond'), |
|
||||||
'Main Ethereum Network', |
|
||||||
providerType === 'mainnet' |
|
||||||
? h('.check', '✓') |
|
||||||
: null, |
|
||||||
]), |
|
||||||
h(DropdownMenuItem, { |
|
||||||
key: 'ropsten', |
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), |
|
||||||
onClick: () => dispatch(actions.setProviderType('ropsten')), |
|
||||||
style: { |
|
||||||
fontSize: '18px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.menu-icon.red-dot'), |
|
||||||
'Ropsten Test Network', |
|
||||||
providerType === 'ropsten' |
|
||||||
? h('.check', '✓') |
|
||||||
: null, |
|
||||||
]), |
|
||||||
h(DropdownMenuItem, { |
|
||||||
key: 'kovan', |
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), |
|
||||||
onClick: () => dispatch(actions.setProviderType('kovan')), |
|
||||||
style: { |
|
||||||
fontSize: '18px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.menu-icon.hollow-diamond'), |
|
||||||
'Kovan Test Network', |
|
||||||
providerType === 'kovan' |
|
||||||
? h('.check', '✓') |
|
||||||
: null, |
|
||||||
]), |
|
||||||
h(DropdownMenuItem, { |
|
||||||
key: 'rinkeby', |
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), |
|
||||||
onClick: () => dispatch(actions.setProviderType('rinkeby')), |
|
||||||
style: { |
|
||||||
fontSize: '18px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.menu-icon.golden-square'), |
|
||||||
'Rinkeby Test Network', |
|
||||||
providerType === 'rinkeby' |
|
||||||
? h('.check', '✓') |
|
||||||
: null, |
|
||||||
]), |
|
||||||
h(DropdownMenuItem, { |
|
||||||
key: 'default', |
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), |
|
||||||
onClick: () => dispatch(actions.setProviderType('localhost')), |
|
||||||
style: { |
|
||||||
fontSize: '18px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'), |
|
||||||
'Localhost 8545', |
|
||||||
activeNetwork === LOCALHOST_RPC_URL |
|
||||||
? h('.check', '✓') |
|
||||||
: null, |
|
||||||
]), |
|
||||||
|
|
||||||
this.renderCustomOption(provider), |
|
||||||
this.renderCommonRpc(rpcList, provider), |
|
||||||
|
|
||||||
h(DropdownMenuItem, { |
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), |
|
||||||
onClick: () => dispatch(actions.showConfigPage()), |
|
||||||
style: { |
|
||||||
fontSize: '18px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'), |
|
||||||
'Custom RPC', |
|
||||||
activeNetwork === 'custom' |
|
||||||
? h('.check', '✓') |
|
||||||
: null, |
|
||||||
]), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
renderCustomOption ({ rpcTarget, type, ticker }) { |
|
||||||
const {dispatch, network} = this.props |
|
||||||
|
|
||||||
if (type !== 'rpc') { |
|
||||||
return null |
|
||||||
} |
|
||||||
|
|
||||||
// Concatenate long URLs
|
|
||||||
let label = rpcTarget |
|
||||||
if (rpcTarget.length > 31) { |
|
||||||
label = label.substr(0, 34) + '...' |
|
||||||
} |
|
||||||
|
|
||||||
switch (rpcTarget) { |
|
||||||
case LOCALHOST_RPC_URL: |
|
||||||
return null |
|
||||||
default: |
|
||||||
return h(DropdownMenuItem, { |
|
||||||
key: rpcTarget, |
|
||||||
onClick: () => dispatch(actions.setRpcTarget(rpcTarget, network, ticker)), |
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'), |
|
||||||
label, |
|
||||||
h('.check', '✓'), |
|
||||||
]) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
renderCommonRpc (rpcList, provider) { |
|
||||||
const {dispatch} = this.props |
|
||||||
const reversedRpcList = rpcList.slice().reverse() |
|
||||||
|
|
||||||
return reversedRpcList.map((entry) => { |
|
||||||
const rpc = entry.rpcUrl |
|
||||||
const currentRpcTarget = provider.type === 'rpc' && rpc === provider.rpcTarget |
|
||||||
|
|
||||||
if ((rpc === LOCALHOST_RPC_URL) || currentRpcTarget) { |
|
||||||
return null |
|
||||||
} else { |
|
||||||
return h(DropdownMenuItem, { |
|
||||||
key: `common${rpc}`, |
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), |
|
||||||
onClick: () => dispatch(actions.setRpcTarget(rpc, entry.chainId, entry.ticker)), |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'), |
|
||||||
rpc, |
|
||||||
currentRpcTarget |
|
||||||
? h('.check', '✓') |
|
||||||
: null, |
|
||||||
]) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
renderDropdown () { |
|
||||||
const {dispatch} = this.props |
|
||||||
const isOpen = this.state.isMainMenuOpen |
|
||||||
|
|
||||||
return h(Dropdown, { |
|
||||||
useCssTransition: true, |
|
||||||
isOpen: isOpen, |
|
||||||
zIndex: 11, |
|
||||||
onClickOutside: (event) => { |
|
||||||
const classList = event.target.classList |
|
||||||
const parentClassList = event.target.parentElement.classList |
|
||||||
|
|
||||||
const isToggleElement = classList.contains('sandwich-expando') || |
|
||||||
parentClassList.contains('sandwich-expando') |
|
||||||
|
|
||||||
if (isOpen && !isToggleElement) { |
|
||||||
this.setState({ isMainMenuOpen: false }) |
|
||||||
} |
|
||||||
}, |
|
||||||
style: { |
|
||||||
position: 'absolute', |
|
||||||
right: '2px', |
|
||||||
top: '66px', |
|
||||||
}, |
|
||||||
innerStyle: {}, |
|
||||||
}, [ |
|
||||||
h(DropdownMenuItem, { |
|
||||||
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), |
|
||||||
onClick: () => { dispatch(actions.showConfigPage()) }, |
|
||||||
}, 'Settings'), |
|
||||||
|
|
||||||
h(DropdownMenuItem, { |
|
||||||
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), |
|
||||||
onClick: () => { dispatch(actions.lockMetamask()) }, |
|
||||||
}, 'Log Out'), |
|
||||||
|
|
||||||
h(DropdownMenuItem, { |
|
||||||
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), |
|
||||||
onClick: () => { dispatch(actions.showInfoPage()) }, |
|
||||||
}, 'Info/Help'), |
|
||||||
|
|
||||||
h(DropdownMenuItem, { |
|
||||||
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), |
|
||||||
onClick: () => { |
|
||||||
dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) |
|
||||||
}, |
|
||||||
}, 'Try New UI!'), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
return h('div.full-width', [ |
|
||||||
this.renderAppBar(), |
|
||||||
this.renderNetworkDropdown(), |
|
||||||
this.renderDropdown(), |
|
||||||
]) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,96 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
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 = connect(mapStateToProps)(EthBalanceComponent) |
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
ticker: state.metamask.ticker, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(EthBalanceComponent, Component) |
|
||||||
function EthBalanceComponent () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
EthBalanceComponent.prototype.render = function () { |
|
||||||
var props = this.props |
|
||||||
let { value } = props |
|
||||||
const { ticker } = props |
|
||||||
var style = props.style |
|
||||||
var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true |
|
||||||
value = value ? formatBalance(value, 6, needsParse, ticker) : '...' |
|
||||||
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,181 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
const BN = ethUtil.BN |
|
||||||
const extend = require('xtend') |
|
||||||
|
|
||||||
module.exports = BnAsDecimalInput |
|
||||||
|
|
||||||
inherits(BnAsDecimalInput, Component) |
|
||||||
function BnAsDecimalInput () { |
|
||||||
this.state = { invalid: null } |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
/* Bn as Decimal Input |
|
||||||
* |
|
||||||
* A component for allowing easy, decimal editing |
|
||||||
* of a passed in bn string value. |
|
||||||
* |
|
||||||
* On change, calls back its `onChange` function parameter |
|
||||||
* and passes it an updated bn string. |
|
||||||
*/ |
|
||||||
|
|
||||||
BnAsDecimalInput.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const state = this.state |
|
||||||
|
|
||||||
const { value, scale, precision, onChange, min, max } = props |
|
||||||
|
|
||||||
const suffix = props.suffix |
|
||||||
const style = props.style |
|
||||||
const valueString = value.toString(10) |
|
||||||
const newMin = min && this.downsize(min.toString(10), scale) |
|
||||||
const newMax = max && this.downsize(max.toString(10), scale) |
|
||||||
const newValue = this.downsize(valueString, scale) |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.flex-column', [ |
|
||||||
h('.flex-row', { |
|
||||||
style: { |
|
||||||
alignItems: 'flex-end', |
|
||||||
lineHeight: '13px', |
|
||||||
fontFamily: 'Montserrat Light', |
|
||||||
textRendering: 'geometricPrecision', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('input.hex-input', { |
|
||||||
type: 'number', |
|
||||||
step: 'any', |
|
||||||
required: true, |
|
||||||
min: newMin, |
|
||||||
max: newMax, |
|
||||||
style: extend({ |
|
||||||
display: 'block', |
|
||||||
textAlign: 'right', |
|
||||||
backgroundColor: 'transparent', |
|
||||||
border: '1px solid #bdbdbd', |
|
||||||
|
|
||||||
}, style), |
|
||||||
value: newValue, |
|
||||||
onBlur: (event) => { |
|
||||||
this.updateValidity(event) |
|
||||||
}, |
|
||||||
onChange: (event) => { |
|
||||||
this.updateValidity(event) |
|
||||||
const value = (event.target.value === '') ? '' : event.target.value |
|
||||||
|
|
||||||
|
|
||||||
const scaledNumber = this.upsize(value, scale, precision) |
|
||||||
const precisionBN = new BN(scaledNumber, 10) |
|
||||||
onChange(precisionBN, event.target.checkValidity()) |
|
||||||
}, |
|
||||||
onInvalid: (event) => { |
|
||||||
const msg = this.constructWarning() |
|
||||||
if (msg === state.invalid) { |
|
||||||
return |
|
||||||
} |
|
||||||
this.setState({ invalid: msg }) |
|
||||||
event.preventDefault() |
|
||||||
return false |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
color: ' #AEAEAE', |
|
||||||
fontSize: '12px', |
|
||||||
marginLeft: '5px', |
|
||||||
marginRight: '6px', |
|
||||||
width: '20px', |
|
||||||
}, |
|
||||||
}, suffix), |
|
||||||
]), |
|
||||||
|
|
||||||
state.invalid ? h('span.error', { |
|
||||||
style: { |
|
||||||
position: 'absolute', |
|
||||||
right: '0px', |
|
||||||
textAlign: 'right', |
|
||||||
transform: 'translateY(26px)', |
|
||||||
padding: '3px', |
|
||||||
background: 'rgba(255,255,255,0.85)', |
|
||||||
zIndex: '1', |
|
||||||
textTransform: 'capitalize', |
|
||||||
border: '2px solid #E20202', |
|
||||||
}, |
|
||||||
}, state.invalid) : null, |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
BnAsDecimalInput.prototype.setValid = function (message) { |
|
||||||
this.setState({ invalid: null }) |
|
||||||
} |
|
||||||
|
|
||||||
BnAsDecimalInput.prototype.updateValidity = function (event) { |
|
||||||
const target = event.target |
|
||||||
const value = this.props.value |
|
||||||
const newValue = target.value |
|
||||||
|
|
||||||
if (value === newValue) { |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
const valid = target.checkValidity() |
|
||||||
|
|
||||||
if (valid) { |
|
||||||
this.setState({ invalid: null }) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
BnAsDecimalInput.prototype.constructWarning = function () { |
|
||||||
const { name, min, max, scale, suffix } = this.props |
|
||||||
const newMin = min && this.downsize(min.toString(10), scale) |
|
||||||
const newMax = max && this.downsize(max.toString(10), scale) |
|
||||||
let message = name ? name + ' ' : '' |
|
||||||
|
|
||||||
if (min && max) { |
|
||||||
message += `must be greater than or equal to ${newMin} ${suffix} and less than or equal to ${newMax} ${suffix}.` |
|
||||||
} else if (min) { |
|
||||||
message += `must be greater than or equal to ${newMin} ${suffix}.` |
|
||||||
} else if (max) { |
|
||||||
message += `must be less than or equal to ${newMax} ${suffix}.` |
|
||||||
} else { |
|
||||||
message += 'Invalid input.' |
|
||||||
} |
|
||||||
|
|
||||||
return message |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
BnAsDecimalInput.prototype.downsize = function (number, scale) { |
|
||||||
// if there is no scaling, simply return the number
|
|
||||||
if (scale === 0) { |
|
||||||
return Number(number) |
|
||||||
} else { |
|
||||||
// if the scale is the same as the precision, account for this edge case.
|
|
||||||
var adjustedNumber = number |
|
||||||
while (adjustedNumber.length < scale) { |
|
||||||
adjustedNumber = '0' + adjustedNumber |
|
||||||
} |
|
||||||
return Number(adjustedNumber.slice(0, -scale) + '.' + adjustedNumber.slice(-scale)) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
BnAsDecimalInput.prototype.upsize = function (number, scale, precision) { |
|
||||||
var stringArray = number.toString().split('.') |
|
||||||
var decimalLength = stringArray[1] ? stringArray[1].length : 0 |
|
||||||
var newString = stringArray[0] |
|
||||||
|
|
||||||
// If there is scaling and decimal parts exist, integrate them in.
|
|
||||||
if ((scale !== 0) && (decimalLength !== 0)) { |
|
||||||
newString += stringArray[1].slice(0, precision) |
|
||||||
} |
|
||||||
|
|
||||||
// Add 0s to account for the upscaling.
|
|
||||||
for (var i = decimalLength; i < scale; i++) { |
|
||||||
newString += '0' |
|
||||||
} |
|
||||||
return newString |
|
||||||
} |
|
||||||
@ -1,261 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const actions = require('../../../ui/app/actions') |
|
||||||
const CoinbaseForm = require('./coinbase-form') |
|
||||||
const ShapeshiftForm = require('./shapeshift-form') |
|
||||||
const Loading = require('./loading') |
|
||||||
const AccountPanel = require('./account-panel') |
|
||||||
const RadioList = require('./custom-radio-list') |
|
||||||
const { getNetworkDisplayName } = require('../../../app/scripts/controllers/network/util') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(BuyButtonSubview) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
identity: state.appState.identity, |
|
||||||
account: state.metamask.accounts[state.appState.buyView.buyAddress], |
|
||||||
warning: state.appState.warning, |
|
||||||
buyView: state.appState.buyView, |
|
||||||
network: state.metamask.network, |
|
||||||
provider: state.metamask.provider, |
|
||||||
context: state.appState.currentView.context, |
|
||||||
isSubLoading: state.appState.isSubLoading, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(BuyButtonSubview, Component) |
|
||||||
function BuyButtonSubview () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
BuyButtonSubview.prototype.render = function () { |
|
||||||
return ( |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
this.headerSubview(), |
|
||||||
this.primarySubview(), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
BuyButtonSubview.prototype.headerSubview = function () { |
|
||||||
const props = this.props |
|
||||||
const isLoading = props.isSubLoading |
|
||||||
return ( |
|
||||||
|
|
||||||
h('.flex-column', { |
|
||||||
style: { |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
// header bar (back button, label)
|
|
||||||
h('.flex-row', { |
|
||||||
style: { |
|
||||||
alignItems: 'center', |
|
||||||
justifyContent: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { |
|
||||||
onClick: this.backButtonContext.bind(this), |
|
||||||
style: { |
|
||||||
position: 'absolute', |
|
||||||
left: '10px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('h2.text-transform-uppercase.flex-center', { |
|
||||||
style: { |
|
||||||
width: '100vw', |
|
||||||
background: 'rgb(235, 235, 235)', |
|
||||||
color: 'rgb(174, 174, 174)', |
|
||||||
paddingTop: '4px', |
|
||||||
paddingBottom: '4px', |
|
||||||
}, |
|
||||||
}, 'Buy Eth'), |
|
||||||
]), |
|
||||||
|
|
||||||
// loading indication
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
position: 'absolute', |
|
||||||
top: '57vh', |
|
||||||
left: '49vw', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(Loading, { isLoading }), |
|
||||||
]), |
|
||||||
|
|
||||||
// account panel
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
width: '80%', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(AccountPanel, { |
|
||||||
showFullAddress: true, |
|
||||||
identity: props.identity, |
|
||||||
account: props.account, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
h('.flex-row', { |
|
||||||
style: { |
|
||||||
alignItems: 'center', |
|
||||||
justifyContent: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('h3.text-transform-uppercase.flex-center', { |
|
||||||
style: { |
|
||||||
paddingLeft: '15px', |
|
||||||
width: '100vw', |
|
||||||
background: 'rgb(235, 235, 235)', |
|
||||||
color: 'rgb(174, 174, 174)', |
|
||||||
paddingTop: '4px', |
|
||||||
paddingBottom: '4px', |
|
||||||
}, |
|
||||||
}, 'Select Service'), |
|
||||||
]), |
|
||||||
|
|
||||||
]) |
|
||||||
|
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
BuyButtonSubview.prototype.primarySubview = function () { |
|
||||||
const props = this.props |
|
||||||
const network = props.network |
|
||||||
|
|
||||||
switch (network) { |
|
||||||
case 'loading': |
|
||||||
return |
|
||||||
|
|
||||||
case '1': |
|
||||||
return this.mainnetSubview() |
|
||||||
|
|
||||||
// Ropsten, Rinkeby, Kovan
|
|
||||||
case '3': |
|
||||||
case '4': |
|
||||||
case '42': |
|
||||||
const networkName = getNetworkDisplayName(network) |
|
||||||
const label = `${networkName} Test Faucet` |
|
||||||
return ( |
|
||||||
h('div.flex-column', { |
|
||||||
style: { |
|
||||||
alignItems: 'center', |
|
||||||
margin: '20px 50px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('button.text-transform-uppercase', { |
|
||||||
onClick: () => this.props.dispatch(actions.buyEth({ network })), |
|
||||||
style: { |
|
||||||
marginTop: '15px', |
|
||||||
}, |
|
||||||
}, label), |
|
||||||
// Kovan only: Dharma loans beta
|
|
||||||
network === '42' ? ( |
|
||||||
h('button.text-transform-uppercase', { |
|
||||||
onClick: () => this.navigateTo('https://borrow.dharma.io/'), |
|
||||||
style: { |
|
||||||
marginTop: '15px', |
|
||||||
}, |
|
||||||
}, 'Borrow With Dharma (Beta)') |
|
||||||
) : null, |
|
||||||
]) |
|
||||||
) |
|
||||||
|
|
||||||
default: |
|
||||||
return ( |
|
||||||
h('h2.error', 'Unknown network ID') |
|
||||||
) |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
BuyButtonSubview.prototype.mainnetSubview = function () { |
|
||||||
const props = this.props |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('.flex-column', { |
|
||||||
style: { |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('.flex-row.selected-exchange', { |
|
||||||
style: { |
|
||||||
position: 'relative', |
|
||||||
right: '35px', |
|
||||||
marginTop: '20px', |
|
||||||
marginBottom: '20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(RadioList, { |
|
||||||
defaultFocus: props.buyView.subview, |
|
||||||
labels: [ |
|
||||||
'Coinbase', |
|
||||||
'ShapeShift', |
|
||||||
], |
|
||||||
subtext: { |
|
||||||
'Coinbase': 'Crypto/FIAT (USA only)', |
|
||||||
'ShapeShift': 'Crypto', |
|
||||||
}, |
|
||||||
onClick: this.radioHandler.bind(this), |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
h('h3.text-transform-uppercase', { |
|
||||||
style: { |
|
||||||
paddingLeft: '15px', |
|
||||||
fontFamily: 'Montserrat Light', |
|
||||||
width: '100vw', |
|
||||||
background: 'rgb(235, 235, 235)', |
|
||||||
color: 'rgb(174, 174, 174)', |
|
||||||
paddingTop: '4px', |
|
||||||
paddingBottom: '4px', |
|
||||||
}, |
|
||||||
}, props.buyView.subview), |
|
||||||
|
|
||||||
this.formVersionSubview(), |
|
||||||
]) |
|
||||||
|
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
BuyButtonSubview.prototype.formVersionSubview = function () { |
|
||||||
const network = this.props.network |
|
||||||
if (network === '1') { |
|
||||||
if (this.props.buyView.formView.coinbase) { |
|
||||||
return h(CoinbaseForm, this.props) |
|
||||||
} else if (this.props.buyView.formView.shapeshift) { |
|
||||||
return h(ShapeshiftForm, this.props) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
BuyButtonSubview.prototype.navigateTo = function (url) { |
|
||||||
global.platform.openWindow({ url }) |
|
||||||
} |
|
||||||
|
|
||||||
BuyButtonSubview.prototype.backButtonContext = function () { |
|
||||||
if (this.props.context === 'confTx') { |
|
||||||
this.props.dispatch(actions.showConfTxPage(false)) |
|
||||||
} else { |
|
||||||
this.props.dispatch(actions.goHome()) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
BuyButtonSubview.prototype.radioHandler = function (event) { |
|
||||||
switch (event.target.title) { |
|
||||||
case 'Coinbase': |
|
||||||
return this.props.dispatch(actions.coinBaseSubview()) |
|
||||||
case 'ShapeShift': |
|
||||||
return this.props.dispatch(actions.shapeShiftSubview(this.props.provider.type)) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,63 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const actions = require('../../../ui/app/actions') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(CoinbaseForm) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
warning: state.appState.warning, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(CoinbaseForm, Component) |
|
||||||
|
|
||||||
function CoinbaseForm () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
CoinbaseForm.prototype.render = function () { |
|
||||||
var props = this.props |
|
||||||
|
|
||||||
return h('.flex-column', { |
|
||||||
style: { |
|
||||||
marginTop: '35px', |
|
||||||
padding: '25px', |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.flex-row', { |
|
||||||
style: { |
|
||||||
justifyContent: 'space-around', |
|
||||||
margin: '33px', |
|
||||||
marginTop: '0px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('button.btn-green', { |
|
||||||
onClick: this.toCoinbase.bind(this), |
|
||||||
}, 'Continue to Coinbase'), |
|
||||||
|
|
||||||
h('button.btn-red', { |
|
||||||
onClick: () => props.dispatch(actions.goHome()), |
|
||||||
}, 'Cancel'), |
|
||||||
]), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
CoinbaseForm.prototype.toCoinbase = function () { |
|
||||||
const props = this.props |
|
||||||
const address = props.buyView.buyAddress |
|
||||||
props.dispatch(actions.buyEth({ network: '1', address, amount: 0 })) |
|
||||||
} |
|
||||||
|
|
||||||
CoinbaseForm.prototype.renderLoading = function () { |
|
||||||
return h('img', { |
|
||||||
style: { |
|
||||||
width: '27px', |
|
||||||
marginRight: '-27px', |
|
||||||
}, |
|
||||||
src: 'images/loading.svg', |
|
||||||
}) |
|
||||||
} |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const copyToClipboard = require('copy-to-clipboard') |
|
||||||
|
|
||||||
const Tooltip = require('./tooltip') |
|
||||||
|
|
||||||
module.exports = CopyButton |
|
||||||
|
|
||||||
inherits(CopyButton, Component) |
|
||||||
function CopyButton () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
// As parameters, accepts:
|
|
||||||
// "value", which is the value to copy (mandatory)
|
|
||||||
// "title", which is the text to show on hover (optional, defaults to 'Copy')
|
|
||||||
CopyButton.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const state = this.state || {} |
|
||||||
|
|
||||||
const value = props.value |
|
||||||
const copied = state.copied |
|
||||||
|
|
||||||
const message = copied ? 'Copied' : props.title || ' Copy ' |
|
||||||
|
|
||||||
return h('.copy-button', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h(Tooltip, { |
|
||||||
title: message, |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-clipboard.cursor-pointer.color-orange', { |
|
||||||
style: { |
|
||||||
margin: '5px', |
|
||||||
}, |
|
||||||
onClick: (event) => { |
|
||||||
event.preventDefault() |
|
||||||
event.stopPropagation() |
|
||||||
copyToClipboard(value) |
|
||||||
this.debounceRestore() |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
CopyButton.prototype.debounceRestore = function () { |
|
||||||
this.setState({ copied: true }) |
|
||||||
clearTimeout(this.timeout) |
|
||||||
this.timeout = setTimeout(() => { |
|
||||||
this.setState({ copied: false }) |
|
||||||
}, 850) |
|
||||||
} |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
|
|
||||||
const Tooltip = require('./tooltip') |
|
||||||
const copyToClipboard = require('copy-to-clipboard') |
|
||||||
|
|
||||||
module.exports = Copyable |
|
||||||
|
|
||||||
inherits(Copyable, Component) |
|
||||||
function Copyable () { |
|
||||||
Component.call(this) |
|
||||||
this.state = { |
|
||||||
copied: false, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
Copyable.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const state = this.state |
|
||||||
const { value, children } = props |
|
||||||
const { copied } = state |
|
||||||
|
|
||||||
return h(Tooltip, { |
|
||||||
title: copied ? 'Copied!' : 'Copy', |
|
||||||
position: 'bottom', |
|
||||||
}, h('span', { |
|
||||||
style: { |
|
||||||
cursor: 'pointer', |
|
||||||
}, |
|
||||||
onClick: (event) => { |
|
||||||
event.preventDefault() |
|
||||||
event.stopPropagation() |
|
||||||
copyToClipboard(value) |
|
||||||
this.debounceRestore() |
|
||||||
}, |
|
||||||
}, children)) |
|
||||||
} |
|
||||||
|
|
||||||
Copyable.prototype.debounceRestore = function () { |
|
||||||
this.setState({ copied: true }) |
|
||||||
clearTimeout(this.timeout) |
|
||||||
this.timeout = setTimeout(() => { |
|
||||||
this.setState({ copied: false }) |
|
||||||
}, 850) |
|
||||||
} |
|
||||||
@ -1,60 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
|
|
||||||
module.exports = RadioList |
|
||||||
|
|
||||||
inherits(RadioList, Component) |
|
||||||
function RadioList () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
RadioList.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const activeClass = '.custom-radio-selected' |
|
||||||
const inactiveClass = '.custom-radio-inactive' |
|
||||||
const { |
|
||||||
labels, |
|
||||||
defaultFocus, |
|
||||||
} = props |
|
||||||
|
|
||||||
|
|
||||||
return ( |
|
||||||
h('.flex-row', { |
|
||||||
style: { |
|
||||||
fontSize: '12px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.flex-column.custom-radios', { |
|
||||||
style: { |
|
||||||
marginRight: '5px', |
|
||||||
}, |
|
||||||
}, |
|
||||||
labels.map((lable, i) => { |
|
||||||
let isSelcted = (this.state !== null) |
|
||||||
isSelcted = isSelcted ? (this.state.selected === lable) : (defaultFocus === lable) |
|
||||||
return h(isSelcted ? activeClass : inactiveClass, { |
|
||||||
title: lable, |
|
||||||
onClick: (event) => { |
|
||||||
this.setState({selected: event.target.title}) |
|
||||||
props.onClick(event) |
|
||||||
}, |
|
||||||
}) |
|
||||||
}) |
|
||||||
), |
|
||||||
h('.text', {}, |
|
||||||
labels.map((lable) => { |
|
||||||
if (props.subtext) { |
|
||||||
return h('.flex-row', {}, [ |
|
||||||
h('.radio-titles', lable), |
|
||||||
h('.radio-titles-subtext', `- ${props.subtext[lable]}`), |
|
||||||
]) |
|
||||||
} else { |
|
||||||
return h('.radio-titles', lable) |
|
||||||
} |
|
||||||
}) |
|
||||||
), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,98 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const PropTypes = require('prop-types') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const MenuDroppo = require('./menu-droppo') |
|
||||||
const extend = require('xtend') |
|
||||||
|
|
||||||
const noop = () => {} |
|
||||||
|
|
||||||
class Dropdown extends Component { |
|
||||||
render () { |
|
||||||
const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props |
|
||||||
|
|
||||||
const innerStyleDefaults = extend({ |
|
||||||
borderRadius: '4px', |
|
||||||
padding: '8px 16px', |
|
||||||
background: 'rgba(0, 0, 0, 0.8)', |
|
||||||
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', |
|
||||||
}, innerStyle) |
|
||||||
|
|
||||||
return h( |
|
||||||
MenuDroppo, |
|
||||||
{ |
|
||||||
useCssTransition, |
|
||||||
isOpen, |
|
||||||
zIndex: 11, |
|
||||||
onClickOutside, |
|
||||||
style, |
|
||||||
innerStyle: innerStyleDefaults, |
|
||||||
}, |
|
||||||
[ |
|
||||||
h( |
|
||||||
'style', |
|
||||||
` |
|
||||||
li.dropdown-menu-item:hover { color:rgb(225, 225, 225); } |
|
||||||
li.dropdown-menu-item { color: rgb(185, 185, 185); position: relative } |
|
||||||
` |
|
||||||
), |
|
||||||
...children, |
|
||||||
] |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
Dropdown.defaultProps = { |
|
||||||
isOpen: false, |
|
||||||
onClick: noop, |
|
||||||
useCssTransition: false, |
|
||||||
} |
|
||||||
|
|
||||||
Dropdown.propTypes = { |
|
||||||
isOpen: PropTypes.bool.isRequired, |
|
||||||
onClick: PropTypes.func.isRequired, |
|
||||||
children: PropTypes.node, |
|
||||||
style: PropTypes.object.isRequired, |
|
||||||
onClickOutside: PropTypes.func, |
|
||||||
innerStyle: PropTypes.object, |
|
||||||
useCssTransition: PropTypes.bool, |
|
||||||
} |
|
||||||
|
|
||||||
class DropdownMenuItem extends Component { |
|
||||||
render () { |
|
||||||
const { onClick, closeMenu, children, style } = this.props |
|
||||||
|
|
||||||
return h( |
|
||||||
'li.dropdown-menu-item', |
|
||||||
{ |
|
||||||
onClick: () => { |
|
||||||
onClick() |
|
||||||
closeMenu() |
|
||||||
}, |
|
||||||
style: Object.assign({ |
|
||||||
listStyle: 'none', |
|
||||||
padding: '8px 0px 8px 0px', |
|
||||||
fontSize: '18px', |
|
||||||
fontStyle: 'normal', |
|
||||||
fontFamily: 'Montserrat Regular', |
|
||||||
cursor: 'pointer', |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'flex-start', |
|
||||||
alignItems: 'center', |
|
||||||
}, style), |
|
||||||
}, |
|
||||||
children |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
DropdownMenuItem.propTypes = { |
|
||||||
closeMenu: PropTypes.func.isRequired, |
|
||||||
onClick: PropTypes.func.isRequired, |
|
||||||
children: PropTypes.node, |
|
||||||
style: PropTypes.object, |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = { |
|
||||||
Dropdown, |
|
||||||
DropdownMenuItem, |
|
||||||
} |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const findDOMNode = require('react-dom').findDOMNode |
|
||||||
|
|
||||||
module.exports = EditableLabel |
|
||||||
|
|
||||||
inherits(EditableLabel, Component) |
|
||||||
function EditableLabel () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
EditableLabel.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const state = this.state |
|
||||||
|
|
||||||
if (state && state.isEditingLabel) { |
|
||||||
return h('div.editable-label', [ |
|
||||||
h('input.sizing-input', { |
|
||||||
defaultValue: props.textValue, |
|
||||||
maxLength: '20', |
|
||||||
onKeyPress: (event) => { |
|
||||||
this.saveIfEnter(event) |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('button.editable-button', { |
|
||||||
onClick: () => this.saveText(), |
|
||||||
}, 'Save'), |
|
||||||
]) |
|
||||||
} else { |
|
||||||
return h('div.name-label', { |
|
||||||
onClick: (event) => { |
|
||||||
const nameAttribute = event.target.getAttribute('name') |
|
||||||
// checks for class to handle smaller CTA above the account name
|
|
||||||
const classAttribute = event.target.getAttribute('class') |
|
||||||
if (nameAttribute === 'edit' || classAttribute === 'edit-text') { |
|
||||||
this.setState({ isEditingLabel: true }) |
|
||||||
} |
|
||||||
}, |
|
||||||
}, this.props.children) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
EditableLabel.prototype.saveIfEnter = function (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
this.saveText() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
EditableLabel.prototype.saveText = function () { |
|
||||||
// eslint-disable-next-line react/no-find-dom-node
|
|
||||||
var container = findDOMNode(this) |
|
||||||
var text = container.querySelector('.editable-label input').value |
|
||||||
var truncatedText = text.substring(0, 20) |
|
||||||
this.props.saveText(truncatedText) |
|
||||||
this.setState({ isEditingLabel: false, textLabel: truncatedText }) |
|
||||||
} |
|
||||||
@ -1,176 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const debounce = require('debounce') |
|
||||||
const copyToClipboard = require('copy-to-clipboard') |
|
||||||
const ENS = require('ethjs-ens') |
|
||||||
const networkMap = require('ethjs-ens/lib/network-map.json') |
|
||||||
const ensRE = /.+\..+$/ |
|
||||||
const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' |
|
||||||
const log = require('loglevel') |
|
||||||
|
|
||||||
|
|
||||||
module.exports = EnsInput |
|
||||||
|
|
||||||
inherits(EnsInput, Component) |
|
||||||
function EnsInput () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
EnsInput.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
|
|
||||||
function onInputChange () { |
|
||||||
const network = this.props.network |
|
||||||
const networkHasEnsSupport = getNetworkEnsSupport(network) |
|
||||||
if (!networkHasEnsSupport) return |
|
||||||
|
|
||||||
const recipient = document.querySelector('input[name="address"]').value |
|
||||||
if (recipient.match(ensRE) === null) { |
|
||||||
return this.setState({ |
|
||||||
loadingEns: false, |
|
||||||
ensResolution: null, |
|
||||||
ensFailure: null, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
this.setState({ |
|
||||||
loadingEns: true, |
|
||||||
}) |
|
||||||
this.checkName() |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
h('div', { |
|
||||||
style: { width: '100%' }, |
|
||||||
}, [ |
|
||||||
h('input.large-input', { |
|
||||||
name: props.name, |
|
||||||
placeholder: props.placeholder, |
|
||||||
list: 'addresses', |
|
||||||
onChange: onInputChange.bind(this), |
|
||||||
}), |
|
||||||
// The address book functionality.
|
|
||||||
h('datalist#addresses', |
|
||||||
[ |
|
||||||
// Corresponds to the addresses owned.
|
|
||||||
Object.keys(props.identities).map((key) => { |
|
||||||
const identity = props.identities[key] |
|
||||||
return h('option', { |
|
||||||
value: identity.address, |
|
||||||
label: identity.name, |
|
||||||
key: identity.address, |
|
||||||
}) |
|
||||||
}), |
|
||||||
// Corresponds to previously sent-to addresses.
|
|
||||||
props.addressBook.map((identity) => { |
|
||||||
return h('option', { |
|
||||||
value: identity.address, |
|
||||||
label: identity.name, |
|
||||||
key: identity.address, |
|
||||||
}) |
|
||||||
}), |
|
||||||
]), |
|
||||||
this.ensIcon(), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
EnsInput.prototype.componentDidMount = function () { |
|
||||||
const network = this.props.network |
|
||||||
const networkHasEnsSupport = getNetworkEnsSupport(network) |
|
||||||
this.setState({ ensResolution: ZERO_ADDRESS }) |
|
||||||
|
|
||||||
if (networkHasEnsSupport) { |
|
||||||
const provider = global.ethereumProvider |
|
||||||
this.ens = new ENS({ provider, network }) |
|
||||||
this.checkName = debounce(this.lookupEnsName.bind(this), 200) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
EnsInput.prototype.lookupEnsName = function () { |
|
||||||
const recipient = document.querySelector('input[name="address"]').value |
|
||||||
const { ensResolution } = this.state |
|
||||||
|
|
||||||
log.info(`ENS attempting to resolve name: ${recipient}`) |
|
||||||
this.ens.lookup(recipient.trim()) |
|
||||||
.then((address) => { |
|
||||||
if (address === ZERO_ADDRESS) throw new Error('No address has been set for this name.') |
|
||||||
if (address !== ensResolution) { |
|
||||||
this.setState({ |
|
||||||
loadingEns: false, |
|
||||||
ensResolution: address, |
|
||||||
nickname: recipient.trim(), |
|
||||||
hoverText: address + '\nClick to Copy', |
|
||||||
ensFailure: false, |
|
||||||
}) |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((reason) => { |
|
||||||
log.error(reason) |
|
||||||
return this.setState({ |
|
||||||
loadingEns: false, |
|
||||||
ensResolution: ZERO_ADDRESS, |
|
||||||
ensFailure: true, |
|
||||||
hoverText: reason.message, |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) { |
|
||||||
const state = this.state || {} |
|
||||||
const ensResolution = state.ensResolution |
|
||||||
// If an address is sent without a nickname, meaning not from ENS or from
|
|
||||||
// the user's own accounts, a default of a one-space string is used.
|
|
||||||
const nickname = state.nickname || ' ' |
|
||||||
if (prevState && ensResolution && this.props.onChange && |
|
||||||
ensResolution !== prevState.ensResolution) { |
|
||||||
this.props.onChange(ensResolution, nickname) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
EnsInput.prototype.ensIcon = function (recipient) { |
|
||||||
const { hoverText } = this.state || {} |
|
||||||
return h('span', { |
|
||||||
title: hoverText, |
|
||||||
style: { |
|
||||||
position: 'absolute', |
|
||||||
padding: '9px', |
|
||||||
transform: 'translatex(-40px)', |
|
||||||
}, |
|
||||||
}, this.ensIconContents(recipient)) |
|
||||||
} |
|
||||||
|
|
||||||
EnsInput.prototype.ensIconContents = function (recipient) { |
|
||||||
const { loadingEns, ensFailure, ensResolution } = this.state || { ensResolution: ZERO_ADDRESS} |
|
||||||
|
|
||||||
if (loadingEns) { |
|
||||||
return h('img', { |
|
||||||
src: 'images/loading.svg', |
|
||||||
style: { |
|
||||||
width: '30px', |
|
||||||
height: '30px', |
|
||||||
transform: 'translateY(-6px)', |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
if (ensFailure) { |
|
||||||
return h('i.fa.fa-warning.fa-lg.warning') |
|
||||||
} |
|
||||||
|
|
||||||
if (ensResolution && (ensResolution !== ZERO_ADDRESS)) { |
|
||||||
return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', { |
|
||||||
style: { color: 'green' }, |
|
||||||
onClick: (event) => { |
|
||||||
event.preventDefault() |
|
||||||
event.stopPropagation() |
|
||||||
copyToClipboard(ensResolution) |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function getNetworkEnsSupport (network) { |
|
||||||
return Boolean(networkMap[network]) |
|
||||||
} |
|
||||||
@ -1,95 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
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 = connect(mapStateToProps)(EthBalanceComponent) |
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
ticker: state.metamask.ticker, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(EthBalanceComponent, Component) |
|
||||||
function EthBalanceComponent () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
EthBalanceComponent.prototype.render = function () { |
|
||||||
var props = this.props |
|
||||||
let { value } = props |
|
||||||
const { ticker, style, width } = props |
|
||||||
var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true |
|
||||||
value = value ? formatBalance(value, 6, needsParse, ticker) : '...' |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('.ether-balance.ether-balance-amount', { |
|
||||||
style, |
|
||||||
}, [ |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
display: 'inline', |
|
||||||
width, |
|
||||||
}, |
|
||||||
}, this.renderBalance(value)), |
|
||||||
]) |
|
||||||
|
|
||||||
) |
|
||||||
} |
|
||||||
EthBalanceComponent.prototype.renderBalance = function (value) { |
|
||||||
var props = this.props |
|
||||||
const { conversionRate, shorten, incoming, currentCurrency } = props |
|
||||||
if (value === 'None') return value |
|
||||||
if (value === '...') return value |
|
||||||
var balanceObj = generateBalanceObject(value, 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 (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', |
|
||||||
}, |
|
||||||
}, incoming ? `+${balance}` : balance), |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
color: ' #AEAEAE', |
|
||||||
fontSize: '12px', |
|
||||||
marginLeft: '5px', |
|
||||||
}, |
|
||||||
}, label), |
|
||||||
]), |
|
||||||
|
|
||||||
showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null, |
|
||||||
])) |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,64 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const formatBalance = require('../util').formatBalance |
|
||||||
|
|
||||||
module.exports = FiatValue |
|
||||||
|
|
||||||
inherits(FiatValue, Component) |
|
||||||
function FiatValue () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
FiatValue.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const { conversionRate, currentCurrency } = props |
|
||||||
const renderedCurrency = currentCurrency || '' |
|
||||||
|
|
||||||
const value = formatBalance(props.value, 6) |
|
||||||
|
|
||||||
if (value === 'None') return value |
|
||||||
var fiatDisplayNumber, fiatTooltipNumber |
|
||||||
var splitBalance = value.split(' ') |
|
||||||
|
|
||||||
if (conversionRate !== 0) { |
|
||||||
fiatTooltipNumber = Number(splitBalance[0]) * conversionRate |
|
||||||
fiatDisplayNumber = fiatTooltipNumber.toFixed(2) |
|
||||||
} else { |
|
||||||
fiatDisplayNumber = 'N/A' |
|
||||||
fiatTooltipNumber = 'Unknown' |
|
||||||
} |
|
||||||
|
|
||||||
return fiatDisplay(fiatDisplayNumber, renderedCurrency.toUpperCase()) |
|
||||||
} |
|
||||||
|
|
||||||
function fiatDisplay (fiatDisplayNumber, fiatSuffix) { |
|
||||||
if (fiatDisplayNumber !== 'N/A') { |
|
||||||
return h('.flex-row', { |
|
||||||
style: { |
|
||||||
alignItems: 'flex-end', |
|
||||||
lineHeight: '13px', |
|
||||||
fontFamily: 'Montserrat Light', |
|
||||||
textRendering: 'geometricPrecision', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
width: '100%', |
|
||||||
textAlign: 'right', |
|
||||||
fontSize: '12px', |
|
||||||
color: '#333333', |
|
||||||
}, |
|
||||||
}, fiatDisplayNumber), |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
color: '#AEAEAE', |
|
||||||
marginLeft: '5px', |
|
||||||
fontSize: '12px', |
|
||||||
}, |
|
||||||
}, fiatSuffix), |
|
||||||
]) |
|
||||||
} else { |
|
||||||
return h('div') |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,154 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
const BN = ethUtil.BN |
|
||||||
const extend = require('xtend') |
|
||||||
|
|
||||||
module.exports = HexAsDecimalInput |
|
||||||
|
|
||||||
inherits(HexAsDecimalInput, Component) |
|
||||||
function HexAsDecimalInput () { |
|
||||||
this.state = { invalid: null } |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
/* Hex as Decimal Input |
|
||||||
* |
|
||||||
* A component for allowing easy, decimal editing |
|
||||||
* of a passed in hex string value. |
|
||||||
* |
|
||||||
* On change, calls back its `onChange` function parameter |
|
||||||
* and passes it an updated hex string. |
|
||||||
*/ |
|
||||||
|
|
||||||
HexAsDecimalInput.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const state = this.state |
|
||||||
|
|
||||||
const { value, onChange, min, max } = props |
|
||||||
|
|
||||||
const toEth = props.toEth |
|
||||||
const suffix = props.suffix |
|
||||||
const decimalValue = decimalize(value, toEth) |
|
||||||
const style = props.style |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.flex-column', [ |
|
||||||
h('.flex-row', { |
|
||||||
style: { |
|
||||||
alignItems: 'flex-end', |
|
||||||
lineHeight: '13px', |
|
||||||
fontFamily: 'Montserrat Light', |
|
||||||
textRendering: 'geometricPrecision', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('input.hex-input', { |
|
||||||
type: 'number', |
|
||||||
required: true, |
|
||||||
min: min, |
|
||||||
max: max, |
|
||||||
style: extend({ |
|
||||||
display: 'block', |
|
||||||
textAlign: 'right', |
|
||||||
backgroundColor: 'transparent', |
|
||||||
border: '1px solid #bdbdbd', |
|
||||||
|
|
||||||
}, style), |
|
||||||
value: parseInt(decimalValue), |
|
||||||
onBlur: (event) => { |
|
||||||
this.updateValidity(event) |
|
||||||
}, |
|
||||||
onChange: (event) => { |
|
||||||
this.updateValidity(event) |
|
||||||
const hexString = (event.target.value === '') ? '' : hexify(event.target.value) |
|
||||||
onChange(hexString) |
|
||||||
}, |
|
||||||
onInvalid: (event) => { |
|
||||||
const msg = this.constructWarning() |
|
||||||
if (msg === state.invalid) { |
|
||||||
return |
|
||||||
} |
|
||||||
this.setState({ invalid: msg }) |
|
||||||
event.preventDefault() |
|
||||||
return false |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
color: ' #AEAEAE', |
|
||||||
fontSize: '12px', |
|
||||||
marginLeft: '5px', |
|
||||||
marginRight: '6px', |
|
||||||
width: '20px', |
|
||||||
}, |
|
||||||
}, suffix), |
|
||||||
]), |
|
||||||
|
|
||||||
state.invalid ? h('span.error', { |
|
||||||
style: { |
|
||||||
position: 'absolute', |
|
||||||
right: '0px', |
|
||||||
textAlign: 'right', |
|
||||||
transform: 'translateY(26px)', |
|
||||||
padding: '3px', |
|
||||||
background: 'rgba(255,255,255,0.85)', |
|
||||||
zIndex: '1', |
|
||||||
textTransform: 'capitalize', |
|
||||||
border: '2px solid #E20202', |
|
||||||
}, |
|
||||||
}, state.invalid) : null, |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
HexAsDecimalInput.prototype.setValid = function (message) { |
|
||||||
this.setState({ invalid: null }) |
|
||||||
} |
|
||||||
|
|
||||||
HexAsDecimalInput.prototype.updateValidity = function (event) { |
|
||||||
const target = event.target |
|
||||||
const value = this.props.value |
|
||||||
const newValue = target.value |
|
||||||
|
|
||||||
if (value === newValue) { |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
const valid = target.checkValidity() |
|
||||||
if (valid) { |
|
||||||
this.setState({ invalid: null }) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
HexAsDecimalInput.prototype.constructWarning = function () { |
|
||||||
const { name, min, max } = this.props |
|
||||||
let message = name ? name + ' ' : '' |
|
||||||
|
|
||||||
if (min && max) { |
|
||||||
message += `must be greater than or equal to ${min} and less than or equal to ${max}.` |
|
||||||
} else if (min) { |
|
||||||
message += `must be greater than or equal to ${min}.` |
|
||||||
} else if (max) { |
|
||||||
message += `must be less than or equal to ${max}.` |
|
||||||
} else { |
|
||||||
message += 'Invalid input.' |
|
||||||
} |
|
||||||
|
|
||||||
return message |
|
||||||
} |
|
||||||
|
|
||||||
function hexify (decimalString) { |
|
||||||
const hexBN = new BN(parseInt(decimalString), 10) |
|
||||||
return '0x' + hexBN.toString('hex') |
|
||||||
} |
|
||||||
|
|
||||||
function decimalize (input, toEth) { |
|
||||||
if (input === '') { |
|
||||||
return '' |
|
||||||
} else { |
|
||||||
const strippedInput = ethUtil.stripHexPrefix(input) |
|
||||||
const inputBN = new BN(strippedInput, 'hex') |
|
||||||
return inputBN.toString(10) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,74 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const isNode = require('detect-node') |
|
||||||
const findDOMNode = require('react-dom').findDOMNode |
|
||||||
const jazzicon = require('jazzicon') |
|
||||||
const iconFactoryGen = require('../../lib/icon-factory') |
|
||||||
const iconFactory = iconFactoryGen(jazzicon) |
|
||||||
|
|
||||||
module.exports = IdenticonComponent |
|
||||||
|
|
||||||
inherits(IdenticonComponent, Component) |
|
||||||
function IdenticonComponent () { |
|
||||||
Component.call(this) |
|
||||||
|
|
||||||
this.defaultDiameter = 46 |
|
||||||
} |
|
||||||
|
|
||||||
IdenticonComponent.prototype.render = function () { |
|
||||||
var props = this.props |
|
||||||
var diameter = props.diameter || this.defaultDiameter |
|
||||||
return ( |
|
||||||
h('div', { |
|
||||||
key: 'identicon-' + this.props.address, |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
alignItems: 'center', |
|
||||||
justifyContent: 'center', |
|
||||||
height: diameter, |
|
||||||
width: diameter, |
|
||||||
borderRadius: diameter / 2, |
|
||||||
overflow: 'hidden', |
|
||||||
}, |
|
||||||
}) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
IdenticonComponent.prototype.componentDidMount = function () { |
|
||||||
var props = this.props |
|
||||||
const { address } = props |
|
||||||
|
|
||||||
if (!address) return |
|
||||||
|
|
||||||
// eslint-disable-next-line react/no-find-dom-node
|
|
||||||
var container = findDOMNode(this) |
|
||||||
|
|
||||||
var diameter = props.diameter || this.defaultDiameter |
|
||||||
if (!isNode) { |
|
||||||
var img = iconFactory.iconForAddress(address, diameter) |
|
||||||
container.appendChild(img) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
IdenticonComponent.prototype.componentDidUpdate = function () { |
|
||||||
var props = this.props |
|
||||||
const { address } = props |
|
||||||
|
|
||||||
if (!address) return |
|
||||||
|
|
||||||
// eslint-disable-next-line react/no-find-dom-node
|
|
||||||
var container = findDOMNode(this) |
|
||||||
|
|
||||||
var children = container.children |
|
||||||
for (var i = 0; i < children.length; i++) { |
|
||||||
container.removeChild(children[i]) |
|
||||||
} |
|
||||||
|
|
||||||
var diameter = props.diameter || this.defaultDiameter |
|
||||||
if (!isNode) { |
|
||||||
var img = iconFactory.iconForAddress(address, diameter) |
|
||||||
container.appendChild(img) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,55 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
|
|
||||||
|
|
||||||
inherits(LoadingIndicator, Component) |
|
||||||
module.exports = LoadingIndicator |
|
||||||
|
|
||||||
function LoadingIndicator () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
LoadingIndicator.prototype.render = function () { |
|
||||||
const { isLoading, loadingMessage, canBypass, bypass } = this.props |
|
||||||
|
|
||||||
return ( |
|
||||||
isLoading ? h('.full-flex-height', { |
|
||||||
style: { |
|
||||||
left: '0px', |
|
||||||
zIndex: 10, |
|
||||||
position: 'absolute', |
|
||||||
flexDirection: 'column', |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'center', |
|
||||||
alignItems: 'center', |
|
||||||
height: '100%', |
|
||||||
width: '100%', |
|
||||||
background: 'rgba(255, 255, 255, 0.8)', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
canBypass ? h('i.fa.fa-close.cursor-pointer.close-loading', { |
|
||||||
style: { |
|
||||||
position: 'absolute', |
|
||||||
top: '1px', |
|
||||||
right: '15px', |
|
||||||
color: '#AEAEAE', |
|
||||||
}, |
|
||||||
onClick: bypass, |
|
||||||
}) : null, |
|
||||||
|
|
||||||
h('img', { |
|
||||||
src: 'images/loading.svg', |
|
||||||
}), |
|
||||||
|
|
||||||
h('br'), |
|
||||||
|
|
||||||
showMessageIfAny(loadingMessage), |
|
||||||
]) : null |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
function showMessageIfAny (loadingMessage) { |
|
||||||
if (!loadingMessage) return null |
|
||||||
return h('span', loadingMessage) |
|
||||||
} |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const metamaskLogo = require('metamask-logo') |
|
||||||
const debounce = require('debounce') |
|
||||||
|
|
||||||
module.exports = Mascot |
|
||||||
|
|
||||||
inherits(Mascot, Component) |
|
||||||
function Mascot () { |
|
||||||
Component.call(this) |
|
||||||
this.logo = metamaskLogo({ |
|
||||||
followMouse: true, |
|
||||||
pxNotRatio: true, |
|
||||||
width: 200, |
|
||||||
height: 200, |
|
||||||
}) |
|
||||||
|
|
||||||
this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000) |
|
||||||
this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false) |
|
||||||
} |
|
||||||
|
|
||||||
Mascot.prototype.render = function () { |
|
||||||
// this is a bit hacky
|
|
||||||
// the event emitter is on `this.props`
|
|
||||||
// and we dont get that until render
|
|
||||||
this.handleAnimationEvents() |
|
||||||
|
|
||||||
return h('#metamask-mascot-container', { |
|
||||||
style: { zIndex: 0 }, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
Mascot.prototype.componentDidMount = function () { |
|
||||||
var targetDivId = 'metamask-mascot-container' |
|
||||||
var container = document.getElementById(targetDivId) |
|
||||||
container.appendChild(this.logo.container) |
|
||||||
} |
|
||||||
|
|
||||||
Mascot.prototype.componentWillUnmount = function () { |
|
||||||
this.animations = this.props.animationEventEmitter |
|
||||||
this.animations.removeAllListeners() |
|
||||||
this.logo.container.remove() |
|
||||||
this.logo.stopAnimation() |
|
||||||
} |
|
||||||
|
|
||||||
Mascot.prototype.handleAnimationEvents = function () { |
|
||||||
// only setup listeners once
|
|
||||||
if (this.animations) return |
|
||||||
this.animations = this.props.animationEventEmitter |
|
||||||
this.animations.on('point', this.lookAt.bind(this)) |
|
||||||
this.animations.on('setFollowMouse', this.logo.setFollowMouse.bind(this.logo)) |
|
||||||
} |
|
||||||
|
|
||||||
Mascot.prototype.lookAt = function (target) { |
|
||||||
this.unfollowMouse() |
|
||||||
this.logo.lookAt(target) |
|
||||||
this.refollowMouse() |
|
||||||
} |
|
||||||
@ -1,132 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const findDOMNode = require('react-dom').findDOMNode |
|
||||||
const ReactCSSTransitionGroup = require('react-addons-css-transition-group') |
|
||||||
|
|
||||||
module.exports = MenuDroppoComponent |
|
||||||
|
|
||||||
|
|
||||||
inherits(MenuDroppoComponent, Component) |
|
||||||
function MenuDroppoComponent () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.render = function () { |
|
||||||
const speed = this.props.speed || '300ms' |
|
||||||
const useCssTransition = this.props.useCssTransition |
|
||||||
const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0 |
|
||||||
|
|
||||||
this.manageListeners() |
|
||||||
|
|
||||||
const style = this.props.style || {} |
|
||||||
if (!('position' in style)) { |
|
||||||
style.position = 'fixed' |
|
||||||
} |
|
||||||
style.zIndex = zIndex |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.menu-droppo-container', { |
|
||||||
style, |
|
||||||
}, [ |
|
||||||
h('style', ` |
|
||||||
.menu-droppo-enter { |
|
||||||
transition: transform ${speed} ease-in-out; |
|
||||||
transform: translateY(-200%); |
|
||||||
} |
|
||||||
|
|
||||||
.menu-droppo-enter.menu-droppo-enter-active { |
|
||||||
transition: transform ${speed} ease-in-out; |
|
||||||
transform: translateY(0%); |
|
||||||
} |
|
||||||
|
|
||||||
.menu-droppo-leave { |
|
||||||
transition: transform ${speed} ease-in-out; |
|
||||||
transform: translateY(0%); |
|
||||||
} |
|
||||||
|
|
||||||
.menu-droppo-leave.menu-droppo-leave-active { |
|
||||||
transition: transform ${speed} ease-in-out; |
|
||||||
transform: translateY(-200%); |
|
||||||
} |
|
||||||
`),
|
|
||||||
|
|
||||||
useCssTransition |
|
||||||
? h(ReactCSSTransitionGroup, { |
|
||||||
className: 'css-transition-group', |
|
||||||
transitionName: 'menu-droppo', |
|
||||||
transitionEnterTimeout: parseInt(speed), |
|
||||||
transitionLeaveTimeout: parseInt(speed), |
|
||||||
}, this.renderPrimary()) |
|
||||||
: this.renderPrimary(), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.renderPrimary = function () { |
|
||||||
const isOpen = this.props.isOpen |
|
||||||
if (!isOpen) { |
|
||||||
return null |
|
||||||
} |
|
||||||
|
|
||||||
const innerStyle = this.props.innerStyle || {} |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.menu-droppo', { |
|
||||||
key: 'menu-droppo-drawer', |
|
||||||
style: innerStyle, |
|
||||||
}, |
|
||||||
[ this.props.children ]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.manageListeners = function () { |
|
||||||
const isOpen = this.props.isOpen |
|
||||||
const onClickOutside = this.props.onClickOutside |
|
||||||
|
|
||||||
if (isOpen) { |
|
||||||
this.outsideClickHandler = onClickOutside |
|
||||||
} else if (isOpen) { |
|
||||||
this.outsideClickHandler = null |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.componentDidMount = function () { |
|
||||||
if (this && document.body) { |
|
||||||
this.globalClickHandler = this.globalClickOccurred.bind(this) |
|
||||||
document.body.addEventListener('click', this.globalClickHandler) |
|
||||||
// eslint-disable-next-line react/no-find-dom-node
|
|
||||||
var container = findDOMNode(this) |
|
||||||
this.container = container |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.componentWillUnmount = function () { |
|
||||||
if (this && document.body) { |
|
||||||
document.body.removeEventListener('click', this.globalClickHandler) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.globalClickOccurred = function (event) { |
|
||||||
const target = event.target |
|
||||||
// eslint-disable-next-line react/no-find-dom-node
|
|
||||||
const container = findDOMNode(this) |
|
||||||
|
|
||||||
if (target !== container && |
|
||||||
!isDescendant(this.container, event.target) && |
|
||||||
this.outsideClickHandler) { |
|
||||||
this.outsideClickHandler(event) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function isDescendant (parent, child) { |
|
||||||
var node = child.parentNode |
|
||||||
while (node !== null) { |
|
||||||
if (node === parent) { |
|
||||||
return true |
|
||||||
} |
|
||||||
node = node.parentNode |
|
||||||
} |
|
||||||
|
|
||||||
return false |
|
||||||
} |
|
||||||
@ -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,131 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
|
|
||||||
module.exports = Network |
|
||||||
|
|
||||||
inherits(Network, Component) |
|
||||||
|
|
||||||
function Network () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
Network.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const networkNumber = props.network |
|
||||||
let providerName |
|
||||||
try { |
|
||||||
providerName = props.provider.type |
|
||||||
} catch (e) { |
|
||||||
providerName = null |
|
||||||
} |
|
||||||
let iconName, hoverText |
|
||||||
|
|
||||||
if (networkNumber === 'loading') { |
|
||||||
return h('span.pointer', { |
|
||||||
className: props.onClick && 'pointer', |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
alignItems: 'center', |
|
||||||
flexDirection: 'row', |
|
||||||
}, |
|
||||||
onClick: (event) => props.onClick && props.onClick(event), |
|
||||||
}, [ |
|
||||||
props.onClick && h('img', { |
|
||||||
title: 'Attempting to connect to blockchain.', |
|
||||||
style: { |
|
||||||
width: '27px', |
|
||||||
}, |
|
||||||
src: 'images/loading.svg', |
|
||||||
}), |
|
||||||
h('i.fa.fa-caret-down'), |
|
||||||
]) |
|
||||||
} else if (providerName === 'mainnet') { |
|
||||||
hoverText = 'Main Ethereum Network' |
|
||||||
iconName = 'ethereum-network' |
|
||||||
} else if (providerName === 'ropsten') { |
|
||||||
hoverText = 'Ropsten Test Network' |
|
||||||
iconName = 'ropsten-test-network' |
|
||||||
} else if (parseInt(networkNumber) === 3) { |
|
||||||
hoverText = 'Ropsten Test Network' |
|
||||||
iconName = 'ropsten-test-network' |
|
||||||
} else if (providerName === 'kovan') { |
|
||||||
hoverText = 'Kovan Test Network' |
|
||||||
iconName = 'kovan-test-network' |
|
||||||
} else if (providerName === 'rinkeby') { |
|
||||||
hoverText = 'Rinkeby Test Network' |
|
||||||
iconName = 'rinkeby-test-network' |
|
||||||
} else { |
|
||||||
hoverText = 'Unknown Private Network' |
|
||||||
iconName = 'unknown-private-network' |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
h('#network_component', { |
|
||||||
className: props.onClick && 'pointer', |
|
||||||
title: hoverText, |
|
||||||
onClick: (event) => props.onClick && props.onClick(event), |
|
||||||
}, [ |
|
||||||
(function () { |
|
||||||
switch (iconName) { |
|
||||||
case 'ethereum-network': |
|
||||||
return h('.network-indicator', [ |
|
||||||
h('.menu-icon.diamond'), |
|
||||||
h('.network-name', { |
|
||||||
style: { |
|
||||||
color: '#039396', |
|
||||||
}}, |
|
||||||
'Main Network'), |
|
||||||
props.onClick && h('i.fa.fa-caret-down.fa-lg'), |
|
||||||
]) |
|
||||||
case 'ropsten-test-network': |
|
||||||
return h('.network-indicator', [ |
|
||||||
h('.menu-icon.red-dot'), |
|
||||||
h('.network-name', { |
|
||||||
style: { |
|
||||||
color: '#ff6666', |
|
||||||
}}, |
|
||||||
'Ropsten Test Net'), |
|
||||||
props.onClick && h('i.fa.fa-caret-down.fa-lg'), |
|
||||||
]) |
|
||||||
case 'kovan-test-network': |
|
||||||
return h('.network-indicator', [ |
|
||||||
h('.menu-icon.hollow-diamond'), |
|
||||||
h('.network-name', { |
|
||||||
style: { |
|
||||||
color: '#690496', |
|
||||||
}}, |
|
||||||
'Kovan Test Net'), |
|
||||||
props.onClick && h('i.fa.fa-caret-down.fa-lg'), |
|
||||||
]) |
|
||||||
case 'rinkeby-test-network': |
|
||||||
return h('.network-indicator', [ |
|
||||||
h('.menu-icon.golden-square'), |
|
||||||
h('.network-name', { |
|
||||||
style: { |
|
||||||
color: '#e7a218', |
|
||||||
}}, |
|
||||||
'Rinkeby Test Net'), |
|
||||||
props.onClick && h('i.fa.fa-caret-down.fa-lg'), |
|
||||||
]) |
|
||||||
default: |
|
||||||
return h('.network-indicator', [ |
|
||||||
h('i.fa.fa-question-circle.fa-lg', { |
|
||||||
style: { |
|
||||||
margin: '10px', |
|
||||||
color: 'rgb(125, 128, 130)', |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
h('.network-name', { |
|
||||||
style: { |
|
||||||
color: '#AEAEAE', |
|
||||||
}}, |
|
||||||
'Private Network'), |
|
||||||
props.onClick && h('i.fa.fa-caret-down.fa-lg'), |
|
||||||
]) |
|
||||||
} |
|
||||||
})(), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,145 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const ReactMarkdown = require('react-markdown') |
|
||||||
const linker = require('extension-link-enabler') |
|
||||||
const findDOMNode = require('react-dom').findDOMNode |
|
||||||
|
|
||||||
module.exports = Notice |
|
||||||
|
|
||||||
inherits(Notice, Component) |
|
||||||
function Notice () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
Notice.prototype.render = function () { |
|
||||||
const { notice, onConfirm } = this.props |
|
||||||
const { title, date, body } = notice |
|
||||||
const state = this.state || { disclaimerDisabled: true } |
|
||||||
const disabled = state.disclaimerDisabled |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.flex-column.flex-center.flex-grow', { |
|
||||||
style: { |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('h3.flex-center.text-transform-uppercase.terms-header', { |
|
||||||
style: { |
|
||||||
background: '#EBEBEB', |
|
||||||
color: '#AEAEAE', |
|
||||||
width: '100%', |
|
||||||
fontSize: '20px', |
|
||||||
textAlign: 'center', |
|
||||||
padding: 6, |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
title, |
|
||||||
]), |
|
||||||
|
|
||||||
h('h5.flex-center.text-transform-uppercase.terms-header', { |
|
||||||
style: { |
|
||||||
background: '#EBEBEB', |
|
||||||
color: '#AEAEAE', |
|
||||||
marginBottom: 24, |
|
||||||
width: '100%', |
|
||||||
fontSize: '20px', |
|
||||||
textAlign: 'center', |
|
||||||
padding: 6, |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
date, |
|
||||||
]), |
|
||||||
|
|
||||||
h('style', ` |
|
||||||
|
|
||||||
.markdown { |
|
||||||
overflow-x: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.markdown h1, .markdown h2, .markdown h3 { |
|
||||||
margin: 10px 0; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
.markdown strong { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
.markdown em { |
|
||||||
font-style: italic; |
|
||||||
} |
|
||||||
|
|
||||||
.markdown p { |
|
||||||
margin: 10px 0; |
|
||||||
} |
|
||||||
|
|
||||||
.markdown a { |
|
||||||
color: #df6b0e; |
|
||||||
} |
|
||||||
|
|
||||||
`),
|
|
||||||
|
|
||||||
h('div.markdown', { |
|
||||||
onScroll: (e) => { |
|
||||||
var object = e.currentTarget |
|
||||||
if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) { |
|
||||||
this.setState({disclaimerDisabled: false}) |
|
||||||
} |
|
||||||
}, |
|
||||||
style: { |
|
||||||
background: 'rgb(235, 235, 235)', |
|
||||||
height: '310px', |
|
||||||
padding: '6px', |
|
||||||
width: '90%', |
|
||||||
overflowY: 'scroll', |
|
||||||
scroll: 'auto', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(ReactMarkdown, { |
|
||||||
className: 'notice-box', |
|
||||||
source: body, |
|
||||||
skipHtml: true, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
h('button', { |
|
||||||
disabled, |
|
||||||
onClick: () => { |
|
||||||
this.setState({disclaimerDisabled: true}) |
|
||||||
onConfirm() |
|
||||||
}, |
|
||||||
style: { |
|
||||||
marginTop: '18px', |
|
||||||
}, |
|
||||||
}, 'Accept'), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
Notice.prototype.setInitialDisclaimerState = function () { |
|
||||||
if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) { |
|
||||||
this.setState({disclaimerDisabled: false}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
Notice.prototype.componentDidMount = function () { |
|
||||||
// eslint-disable-next-line react/no-find-dom-node
|
|
||||||
var node = findDOMNode(this) |
|
||||||
linker.setupListener(node) |
|
||||||
this.setInitialDisclaimerState() |
|
||||||
} |
|
||||||
|
|
||||||
Notice.prototype.componentDidUpdate = function (prevProps) { |
|
||||||
const { notice: { id } = {} } = this.props |
|
||||||
const { notice: { id: prevNoticeId } = {} } = prevProps |
|
||||||
|
|
||||||
if (id !== prevNoticeId) { |
|
||||||
this.setInitialDisclaimerState() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
Notice.prototype.componentWillUnmount = function () { |
|
||||||
// eslint-disable-next-line react/no-find-dom-node
|
|
||||||
var node = findDOMNode(this) |
|
||||||
linker.teardownListener(node) |
|
||||||
} |
|
||||||
@ -1,50 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
|
|
||||||
const AccountPanel = require('./account-panel') |
|
||||||
|
|
||||||
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 } |
|
||||||
|
|
||||||
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('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ |
|
||||||
h('.flex-column.flex-space-between', [ |
|
||||||
h('label.font-small', 'MESSAGE'), |
|
||||||
h('span.font-small', msgParams.data), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,70 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const PendingTxDetails = require('./pending-msg-details') |
|
||||||
|
|
||||||
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, |
|
||||||
style: { |
|
||||||
maxWidth: '350px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
// header
|
|
||||||
h('h3', { |
|
||||||
style: { |
|
||||||
fontWeight: 'bold', |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, 'Sign Message'), |
|
||||||
|
|
||||||
h('.error', { |
|
||||||
style: { |
|
||||||
margin: '10px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
`Signing this message can have
|
|
||||||
dangerous side effects. Only sign messages from |
|
||||||
sites you fully trust with your entire account. |
|
||||||
This dangerous method will be removed in a future version. `,
|
|
||||||
h('a', { |
|
||||||
href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527', |
|
||||||
style: { color: 'rgb(247, 134, 28)' }, |
|
||||||
onClick: (event) => { |
|
||||||
event.preventDefault() |
|
||||||
const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527' |
|
||||||
global.platform.openWindow({ url }) |
|
||||||
}, |
|
||||||
}, 'Read more here.'), |
|
||||||
]), |
|
||||||
|
|
||||||
// message details
|
|
||||||
h(PendingTxDetails, state), |
|
||||||
|
|
||||||
// sign + cancel
|
|
||||||
h('.flex-row.flex-space-around', [ |
|
||||||
h('button', { |
|
||||||
onClick: state.cancelMessage, |
|
||||||
}, 'Cancel'), |
|
||||||
h('button', { |
|
||||||
onClick: state.signMessage, |
|
||||||
}, 'Sign'), |
|
||||||
]), |
|
||||||
]) |
|
||||||
|
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -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 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', { style: { display: 'block' } }, 'MESSAGE'), |
|
||||||
h(BinaryRenderer, { |
|
||||||
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-personal-msg-details') |
|
||||||
|
|
||||||
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', |
|
||||||
}, |
|
||||||
}, 'Sign Message'), |
|
||||||
|
|
||||||
// message details
|
|
||||||
h(PendingTxDetails, state), |
|
||||||
|
|
||||||
// sign + cancel
|
|
||||||
h('.flex-row.flex-space-around', [ |
|
||||||
h('button', { |
|
||||||
onClick: state.cancelPersonalMessage, |
|
||||||
}, 'Cancel'), |
|
||||||
h('button', { |
|
||||||
onClick: state.signPersonalMessage, |
|
||||||
}, 'Sign'), |
|
||||||
]), |
|
||||||
]) |
|
||||||
|
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,519 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const actions = require('../../../ui/app/actions') |
|
||||||
const clone = require('clone') |
|
||||||
const log = require('loglevel') |
|
||||||
|
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
const BN = ethUtil.BN |
|
||||||
const hexToBn = require('../../../app/scripts/lib/hex-to-bn') |
|
||||||
const util = require('../util') |
|
||||||
const MiniAccountPanel = require('./mini-account-panel') |
|
||||||
const Copyable = require('./copyable') |
|
||||||
const EthBalance = require('./eth-balance') |
|
||||||
const addressSummary = util.addressSummary |
|
||||||
const nameForAddress = require('../../lib/contract-namer') |
|
||||||
const BNInput = require('./bn-as-decimal-input') |
|
||||||
|
|
||||||
const MIN_GAS_PRICE_BN = new BN('0') |
|
||||||
const MIN_GAS_LIMIT_BN = new BN('21000') |
|
||||||
|
|
||||||
module.exports = connect()(PendingTx) |
|
||||||
|
|
||||||
|
|
||||||
inherits(PendingTx, Component) |
|
||||||
function PendingTx () { |
|
||||||
Component.call(this) |
|
||||||
this.state = { |
|
||||||
valid: true, |
|
||||||
txData: null, |
|
||||||
submitting: false, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const { currentCurrency, blockGasLimit } = props |
|
||||||
|
|
||||||
const conversionRate = props.conversionRate |
|
||||||
const txMeta = this.gatherTxMeta() |
|
||||||
const txParams = txMeta.txParams || {} |
|
||||||
|
|
||||||
// Allow retry txs
|
|
||||||
const { lastGasPrice } = txMeta |
|
||||||
let forceGasMin |
|
||||||
if (lastGasPrice) { |
|
||||||
const stripped = ethUtil.stripHexPrefix(lastGasPrice) |
|
||||||
const lastGas = new BN(stripped, 16) |
|
||||||
const priceBump = lastGas.divn('10') |
|
||||||
forceGasMin = lastGas.add(priceBump) |
|
||||||
} |
|
||||||
|
|
||||||
// Account Details
|
|
||||||
const address = txParams.from || props.selectedAddress |
|
||||||
const identity = props.identities[address] || { address: address } |
|
||||||
const account = props.accounts[address] |
|
||||||
const balance = account ? account.balance : '0x0' |
|
||||||
|
|
||||||
// recipient check
|
|
||||||
const isValidAddress = !txParams.to || util.isValidAddress(txParams.to) |
|
||||||
|
|
||||||
// Gas
|
|
||||||
const gas = txParams.gas |
|
||||||
const gasBn = hexToBn(gas) |
|
||||||
// default to 8MM gas limit
|
|
||||||
const gasLimit = new BN(parseInt(blockGasLimit) || '8000000') |
|
||||||
const safeGasLimitBN = this.bnMultiplyByFraction(gasLimit, 99, 100) |
|
||||||
const saferGasLimitBN = this.bnMultiplyByFraction(gasLimit, 98, 100) |
|
||||||
const safeGasLimit = safeGasLimitBN.toString(10) |
|
||||||
|
|
||||||
// Gas Price
|
|
||||||
const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16) |
|
||||||
const gasPriceBn = hexToBn(gasPrice) |
|
||||||
|
|
||||||
const txFeeBn = gasBn.mul(gasPriceBn) |
|
||||||
const valueBn = hexToBn(txParams.value) |
|
||||||
const maxCost = txFeeBn.add(valueBn) |
|
||||||
|
|
||||||
const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0 |
|
||||||
|
|
||||||
const balanceBn = hexToBn(balance) |
|
||||||
const insufficientBalance = balanceBn.lt(maxCost) |
|
||||||
const dangerousGasLimit = gasBn.gte(saferGasLimitBN) |
|
||||||
const gasLimitSpecified = txMeta.gasLimitSpecified |
|
||||||
const buyDisabled = insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting |
|
||||||
const showRejectAll = props.unconfTxListLength > 1 |
|
||||||
|
|
||||||
this.inputs = [] |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('div', { |
|
||||||
key: txMeta.id, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('form#pending-tx-form', { |
|
||||||
onSubmit: this.onSubmit.bind(this), |
|
||||||
|
|
||||||
}, [ |
|
||||||
|
|
||||||
// tx info
|
|
||||||
h('div', [ |
|
||||||
|
|
||||||
h('.flex-row.flex-center', { |
|
||||||
style: { |
|
||||||
maxWidth: '100%', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h(MiniAccountPanel, { |
|
||||||
imageSeed: address, |
|
||||||
picOrder: 'right', |
|
||||||
}, [ |
|
||||||
h('span.font-small', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Bold, Montserrat, sans-serif', |
|
||||||
}, |
|
||||||
}, identity.name), |
|
||||||
|
|
||||||
h(Copyable, { |
|
||||||
value: ethUtil.toChecksumAddress(address), |
|
||||||
}, [ |
|
||||||
h('span.font-small', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Light, Montserrat, sans-serif', |
|
||||||
}, |
|
||||||
}, addressSummary(address, 6, 4, false)), |
|
||||||
]), |
|
||||||
|
|
||||||
h('span.font-small', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Light, Montserrat, sans-serif', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(EthBalance, { |
|
||||||
value: balance, |
|
||||||
conversionRate, |
|
||||||
currentCurrency, |
|
||||||
inline: true, |
|
||||||
labelColor: '#F7861C', |
|
||||||
}), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
forwardCarrat(), |
|
||||||
|
|
||||||
this.miniAccountPanelForRecipient(), |
|
||||||
]), |
|
||||||
|
|
||||||
h('style', ` |
|
||||||
.table-box { |
|
||||||
margin: 7px 0px 0px 0px; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.table-box .row { |
|
||||||
margin: 0px; |
|
||||||
background: rgb(236,236,236); |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
font-family: Montserrat Light, sans-serif; |
|
||||||
font-size: 13px; |
|
||||||
padding: 5px 25px; |
|
||||||
} |
|
||||||
.table-box .row .value { |
|
||||||
font-family: Montserrat Regular; |
|
||||||
} |
|
||||||
`),
|
|
||||||
|
|
||||||
h('.table-box', [ |
|
||||||
|
|
||||||
// Ether Value
|
|
||||||
// Currently not customizable, but easily modified
|
|
||||||
// in the way that gas and gasLimit currently are.
|
|
||||||
h('.row', [ |
|
||||||
h('.cell.label', 'Amount'), |
|
||||||
h(EthBalance, { value: txParams.value, currentCurrency, conversionRate }), |
|
||||||
]), |
|
||||||
|
|
||||||
// Gas Limit (customizable)
|
|
||||||
h('.cell.row', [ |
|
||||||
h('.cell.label', 'Gas Limit'), |
|
||||||
h('.cell.value', { |
|
||||||
}, [ |
|
||||||
h(BNInput, { |
|
||||||
name: 'Gas Limit', |
|
||||||
value: gasBn, |
|
||||||
precision: 0, |
|
||||||
scale: 0, |
|
||||||
// The hard lower limit for gas.
|
|
||||||
min: MIN_GAS_LIMIT_BN, |
|
||||||
max: safeGasLimit, |
|
||||||
suffix: 'UNITS', |
|
||||||
style: { |
|
||||||
position: 'relative', |
|
||||||
top: '5px', |
|
||||||
}, |
|
||||||
onChange: this.gasLimitChanged.bind(this), |
|
||||||
|
|
||||||
ref: (hexInput) => { this.inputs.push(hexInput) }, |
|
||||||
}), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
// Gas Price (customizable)
|
|
||||||
h('.cell.row', [ |
|
||||||
h('.cell.label', 'Gas Price'), |
|
||||||
h('.cell.value', { |
|
||||||
}, [ |
|
||||||
h(BNInput, { |
|
||||||
name: 'Gas Price', |
|
||||||
value: gasPriceBn, |
|
||||||
precision: 9, |
|
||||||
scale: 9, |
|
||||||
suffix: 'GWEI', |
|
||||||
min: forceGasMin || MIN_GAS_PRICE_BN, |
|
||||||
style: { |
|
||||||
position: 'relative', |
|
||||||
top: '5px', |
|
||||||
}, |
|
||||||
onChange: this.gasPriceChanged.bind(this), |
|
||||||
ref: (hexInput) => { this.inputs.push(hexInput) }, |
|
||||||
}), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
// Max Transaction Fee (calculated)
|
|
||||||
h('.cell.row', [ |
|
||||||
h('.cell.label', 'Max Transaction Fee'), |
|
||||||
h(EthBalance, { value: txFeeBn.toString(16), currentCurrency, conversionRate }), |
|
||||||
]), |
|
||||||
|
|
||||||
h('.cell.row', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Regular', |
|
||||||
background: 'white', |
|
||||||
padding: '10px 25px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.cell.label', 'Max Total'), |
|
||||||
h('.cell.value', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(EthBalance, { |
|
||||||
value: maxCost.toString(16), |
|
||||||
currentCurrency, |
|
||||||
conversionRate, |
|
||||||
inline: true, |
|
||||||
labelColor: 'black', |
|
||||||
fontSize: '16px', |
|
||||||
}), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
// Data size row:
|
|
||||||
h('.cell.row', { |
|
||||||
style: { |
|
||||||
background: '#f7f7f7', |
|
||||||
paddingBottom: '0px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.cell.label'), |
|
||||||
h('.cell.value', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Light', |
|
||||||
fontSize: '11px', |
|
||||||
}, |
|
||||||
}, `Data included: ${dataLength} bytes`), |
|
||||||
]), |
|
||||||
]), // End of Table
|
|
||||||
|
|
||||||
]), |
|
||||||
|
|
||||||
h('style', ` |
|
||||||
.conf-buttons button { |
|
||||||
margin-left: 10px; |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
`),
|
|
||||||
h('.cell.row', { |
|
||||||
style: { |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
txMeta.simulationFails ? |
|
||||||
h('.error', { |
|
||||||
style: { |
|
||||||
fontSize: '0.9em', |
|
||||||
}, |
|
||||||
}, 'Transaction Error. Exception thrown in contract code.') |
|
||||||
: null, |
|
||||||
|
|
||||||
!isValidAddress ? |
|
||||||
h('.error', { |
|
||||||
style: { |
|
||||||
fontSize: '0.9em', |
|
||||||
}, |
|
||||||
}, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.') |
|
||||||
: null, |
|
||||||
|
|
||||||
insufficientBalance ? |
|
||||||
h('span.error', { |
|
||||||
style: { |
|
||||||
fontSize: '0.9em', |
|
||||||
}, |
|
||||||
}, 'Insufficient balance for transaction') |
|
||||||
: null, |
|
||||||
|
|
||||||
(dangerousGasLimit && !gasLimitSpecified) ? |
|
||||||
h('span.error', { |
|
||||||
style: { |
|
||||||
fontSize: '0.9em', |
|
||||||
}, |
|
||||||
}, 'Gas limit set dangerously high. Approving this transaction is liable to fail.') |
|
||||||
: null, |
|
||||||
]), |
|
||||||
|
|
||||||
|
|
||||||
// send + cancel
|
|
||||||
h('.flex-row.flex-space-around.conf-buttons', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'flex-end', |
|
||||||
margin: '14px 25px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('button', { |
|
||||||
onClick: (event) => { |
|
||||||
this.resetGasFields() |
|
||||||
event.preventDefault() |
|
||||||
}, |
|
||||||
}, 'Reset'), |
|
||||||
|
|
||||||
// Accept Button or Buy Button
|
|
||||||
insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') : |
|
||||||
h('input.confirm.btn-green', { |
|
||||||
type: 'submit', |
|
||||||
value: 'SUBMIT', |
|
||||||
style: { marginLeft: '10px' }, |
|
||||||
disabled: buyDisabled, |
|
||||||
}), |
|
||||||
|
|
||||||
h('button.cancel.btn-red', { |
|
||||||
onClick: props.cancelTransaction, |
|
||||||
}, 'Reject'), |
|
||||||
]), |
|
||||||
showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'flex-end', |
|
||||||
margin: '14px 25px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('button.cancel.btn-red', { |
|
||||||
onClick: props.cancelAllTransactions, |
|
||||||
}, 'Reject All'), |
|
||||||
]) : null, |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.miniAccountPanelForRecipient = function () { |
|
||||||
const props = this.props |
|
||||||
const txData = props.txData |
|
||||||
const txParams = txData.txParams || {} |
|
||||||
const isContractDeploy = !('to' in txParams) |
|
||||||
|
|
||||||
// If it's not a contract deploy, send to the account
|
|
||||||
if (!isContractDeploy) { |
|
||||||
return h(MiniAccountPanel, { |
|
||||||
imageSeed: txParams.to, |
|
||||||
picOrder: 'left', |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('span.font-small', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Bold, Montserrat, sans-serif', |
|
||||||
}, |
|
||||||
}, nameForAddress(txParams.to, props.identities)), |
|
||||||
|
|
||||||
h(Copyable, { |
|
||||||
value: ethUtil.toChecksumAddress(txParams.to), |
|
||||||
}, [ |
|
||||||
h('span.font-small', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Light, Montserrat, sans-serif', |
|
||||||
}, |
|
||||||
}, addressSummary(txParams.to, 6, 4, false)), |
|
||||||
]), |
|
||||||
|
|
||||||
]) |
|
||||||
} else { |
|
||||||
return h(MiniAccountPanel, { |
|
||||||
picOrder: 'left', |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('span.font-small', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Bold, Montserrat, sans-serif', |
|
||||||
}, |
|
||||||
}, 'New Contract'), |
|
||||||
|
|
||||||
]) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.gasPriceChanged = function (newBN, valid) { |
|
||||||
log.info(`Gas price changed to: ${newBN.toString(10)}`) |
|
||||||
const txMeta = this.gatherTxMeta() |
|
||||||
txMeta.txParams.gasPrice = '0x' + newBN.toString('hex') |
|
||||||
this.setState({ |
|
||||||
txData: clone(txMeta), |
|
||||||
valid, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.gasLimitChanged = function (newBN, valid) { |
|
||||||
log.info(`Gas limit changed to ${newBN.toString(10)}`) |
|
||||||
const txMeta = this.gatherTxMeta() |
|
||||||
txMeta.txParams.gas = '0x' + newBN.toString('hex') |
|
||||||
this.setState({ |
|
||||||
txData: clone(txMeta), |
|
||||||
valid, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.resetGasFields = function () { |
|
||||||
log.debug(`pending-tx resetGasFields`) |
|
||||||
|
|
||||||
this.inputs.forEach((hexInput) => { |
|
||||||
if (hexInput) { |
|
||||||
hexInput.setValid() |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
this.setState({ |
|
||||||
txData: null, |
|
||||||
valid: true, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.onSubmit = function (event) { |
|
||||||
event.preventDefault() |
|
||||||
const txMeta = this.gatherTxMeta() |
|
||||||
const valid = this.checkValidity() |
|
||||||
this.setState({ valid, submitting: true }) |
|
||||||
const validGasParams = this.verifyGasParams() |
|
||||||
if (valid && validGasParams) { |
|
||||||
this.props.sendTransaction(txMeta, event) |
|
||||||
} else { |
|
||||||
this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) |
|
||||||
this.setState({ submitting: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.checkValidity = function () { |
|
||||||
const form = this.getFormEl() |
|
||||||
const valid = form.checkValidity() |
|
||||||
return valid |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.getFormEl = function () { |
|
||||||
const form = document.querySelector('form#pending-tx-form') |
|
||||||
// Stub out form for unit tests:
|
|
||||||
if (!form) { |
|
||||||
return { checkValidity () { return true } } |
|
||||||
} |
|
||||||
return form |
|
||||||
} |
|
||||||
|
|
||||||
// After a customizable state value has been updated,
|
|
||||||
PendingTx.prototype.gatherTxMeta = function () { |
|
||||||
log.debug(`pending-tx gatherTxMeta`) |
|
||||||
const props = this.props |
|
||||||
const state = this.state |
|
||||||
const txData = clone(state.txData) || clone(props.txData) |
|
||||||
|
|
||||||
log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) |
|
||||||
return txData |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.verifyGasParams = function () { |
|
||||||
// We call this in case the gas has not been modified at all
|
|
||||||
if (!this.state) { return true } |
|
||||||
return ( |
|
||||||
this._notZeroOrEmptyString(this.state.gas) && |
|
||||||
this._notZeroOrEmptyString(this.state.gasPrice) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype._notZeroOrEmptyString = function (value) { |
|
||||||
// allow undefined values
|
|
||||||
if (value === undefined) return true |
|
||||||
// Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
|
|
||||||
const valueIsEmpty = !value || value === '0x' || value === '0x0' |
|
||||||
return !valueIsEmpty |
|
||||||
} |
|
||||||
|
|
||||||
PendingTx.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { |
|
||||||
const numBN = new BN(numerator) |
|
||||||
const denomBN = new BN(denominator) |
|
||||||
return targetBN.mul(numBN).div(denomBN) |
|
||||||
} |
|
||||||
|
|
||||||
function forwardCarrat () { |
|
||||||
return ( |
|
||||||
h('img', { |
|
||||||
src: 'images/forward-carrat.svg', |
|
||||||
style: { |
|
||||||
padding: '5px 6px 0px 10px', |
|
||||||
height: '37px', |
|
||||||
}, |
|
||||||
}) |
|
||||||
) |
|
||||||
} |
|
||||||
@ -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') |
|
||||||
|
|
||||||
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, version } = 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', { style: { display: 'block' } }, 'YOU ARE SIGNING'), |
|
||||||
h(TypedMessageRenderer, { |
|
||||||
value: data, |
|
||||||
version, |
|
||||||
style: { |
|
||||||
height: '215px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const PendingTxDetails = require('./pending-typed-msg-details') |
|
||||||
|
|
||||||
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', |
|
||||||
}, |
|
||||||
}, 'Sign Message'), |
|
||||||
|
|
||||||
// message details
|
|
||||||
h(PendingTxDetails, state), |
|
||||||
|
|
||||||
// sign + cancel
|
|
||||||
h('.flex-row.flex-space-around', [ |
|
||||||
h('button', { |
|
||||||
onClick: state.cancelTypedMessage, |
|
||||||
}, 'Cancel'), |
|
||||||
h('button', { |
|
||||||
onClick: state.signTypedMessage, |
|
||||||
}, '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) : 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), |
|
||||||
}) : null, |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
RangeSlider.prototype.mirrorInputs = function (event) { |
|
||||||
this.setState({value: event.target.value}) |
|
||||||
} |
|
||||||
@ -1,306 +0,0 @@ |
|||||||
const PersistentForm = require('../../lib/persistent-form') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const actions = require('../../../ui/app/actions') |
|
||||||
const isValidAddress = require('../util').isValidAddress |
|
||||||
module.exports = connect(mapStateToProps)(ShapeshiftForm) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
warning: state.appState.warning, |
|
||||||
isSubLoading: state.appState.isSubLoading, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(ShapeshiftForm, PersistentForm) |
|
||||||
|
|
||||||
function ShapeshiftForm () { |
|
||||||
PersistentForm.call(this) |
|
||||||
this.persistentFormParentId = 'shapeshift-buy-form' |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.render = function () { |
|
||||||
return this.renderMain() |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.renderMain = function () { |
|
||||||
const marketinfo = this.props.buyView.formView.marketinfo |
|
||||||
const coinOptions = this.props.buyView.formView.coinOptions |
|
||||||
var coin = marketinfo.pair.split('_')[0].toUpperCase() |
|
||||||
|
|
||||||
return h('.flex-column', { |
|
||||||
style: { |
|
||||||
position: 'relative', |
|
||||||
padding: '25px', |
|
||||||
paddingTop: '5px', |
|
||||||
width: '90%', |
|
||||||
minHeight: '215px', |
|
||||||
alignItems: 'center', |
|
||||||
overflowY: 'auto', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.flex-row', { |
|
||||||
style: { |
|
||||||
justifyContent: 'center', |
|
||||||
alignItems: 'baseline', |
|
||||||
height: '42px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('img', { |
|
||||||
src: coinOptions[coin].image, |
|
||||||
width: '25px', |
|
||||||
height: '25px', |
|
||||||
style: { |
|
||||||
marginRight: '5px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
h('.input-container', { |
|
||||||
position: 'relative', |
|
||||||
}, [ |
|
||||||
h('input#fromCoin.buy-inputs.ex-coins', { |
|
||||||
type: 'text', |
|
||||||
list: 'coinList', |
|
||||||
autoFocus: true, |
|
||||||
dataset: { |
|
||||||
persistentFormId: 'input-coin', |
|
||||||
}, |
|
||||||
style: { |
|
||||||
boxSizing: 'border-box', |
|
||||||
}, |
|
||||||
onChange: this.handleLiveInput.bind(this), |
|
||||||
defaultValue: 'BTC', |
|
||||||
}), |
|
||||||
|
|
||||||
this.renderCoinList(), |
|
||||||
|
|
||||||
h('i.fa.fa-pencil-square-o.edit-text', { |
|
||||||
style: { |
|
||||||
fontSize: '12px', |
|
||||||
color: '#F7861C', |
|
||||||
position: 'absolute', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
h('.icon-control', { |
|
||||||
style: { |
|
||||||
position: 'relative', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
// Not visible on the screen, can't see it on master.
|
|
||||||
|
|
||||||
// h('i.fa.fa-refresh.fa-4.orange', {
|
|
||||||
// style: {
|
|
||||||
// bottom: '5px',
|
|
||||||
// left: '5px',
|
|
||||||
// color: '#F7861C',
|
|
||||||
// },
|
|
||||||
// onClick: this.updateCoin.bind(this),
|
|
||||||
// }),
|
|
||||||
h('i.fa.fa-chevron-right.fa-4.orange', { |
|
||||||
style: { |
|
||||||
position: 'absolute', |
|
||||||
bottom: '35%', |
|
||||||
left: '0%', |
|
||||||
color: '#F7861C', |
|
||||||
}, |
|
||||||
onClick: this.updateCoin.bind(this), |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
h('#toCoin.ex-coins', marketinfo.pair.split('_')[1].toUpperCase()), |
|
||||||
|
|
||||||
h('img', { |
|
||||||
src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image, |
|
||||||
width: '25px', |
|
||||||
height: '25px', |
|
||||||
style: { |
|
||||||
marginLeft: '5px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
h('.flex-column', { |
|
||||||
style: { |
|
||||||
marginTop: '1%', |
|
||||||
alignItems: 'flex-start', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
this.props.warning ? |
|
||||||
this.props.warning && |
|
||||||
h('span.error.flex-center', { |
|
||||||
style: { |
|
||||||
textAlign: 'center', |
|
||||||
width: '229px', |
|
||||||
height: '82px', |
|
||||||
}, |
|
||||||
}, this.props.warning + '') |
|
||||||
: this.renderInfo(), |
|
||||||
|
|
||||||
this.renderRefundAddressForCoin(coin), |
|
||||||
]), |
|
||||||
|
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) { |
|
||||||
return h(this.activeToggle('.input-container'), { |
|
||||||
style: { |
|
||||||
marginTop: '1%', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('div', `${coin} Address:`), |
|
||||||
|
|
||||||
h('input#fromCoinAddress.buy-inputs', { |
|
||||||
type: 'text', |
|
||||||
placeholder: `Your ${coin} Refund Address`, |
|
||||||
dataset: { |
|
||||||
persistentFormId: 'refund-address', |
|
||||||
|
|
||||||
}, |
|
||||||
style: { |
|
||||||
boxSizing: 'border-box', |
|
||||||
width: '227px', |
|
||||||
height: '30px', |
|
||||||
padding: ' 5px ', |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
h('i.fa.fa-pencil-square-o.edit-text', { |
|
||||||
style: { |
|
||||||
fontSize: '12px', |
|
||||||
color: '#F7861C', |
|
||||||
position: 'absolute', |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('div.flex-row', { |
|
||||||
style: { |
|
||||||
justifyContent: 'flex-start', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('button', { |
|
||||||
onClick: this.shift.bind(this), |
|
||||||
style: { |
|
||||||
marginTop: '1%', |
|
||||||
}, |
|
||||||
}, |
|
||||||
'Submit'), |
|
||||||
]), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.shift = function () { |
|
||||||
var props = this.props |
|
||||||
var withdrawal = this.props.buyView.buyAddress |
|
||||||
var returnAddress = document.getElementById('fromCoinAddress').value |
|
||||||
var pair = this.props.buyView.formView.marketinfo.pair |
|
||||||
var data = { |
|
||||||
'withdrawal': withdrawal, |
|
||||||
'pair': pair, |
|
||||||
'returnAddress': returnAddress, |
|
||||||
// Public api key
|
|
||||||
'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6', |
|
||||||
} |
|
||||||
var message = [ |
|
||||||
`Deposit Limit: ${props.buyView.formView.marketinfo.limit}`, |
|
||||||
`Deposit Minimum:${props.buyView.formView.marketinfo.minimum}`, |
|
||||||
] |
|
||||||
if (isValidAddress(withdrawal)) { |
|
||||||
this.props.dispatch(actions.coinShiftRquest(data, message)) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.renderCoinList = function () { |
|
||||||
var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => { |
|
||||||
return h('option', { |
|
||||||
value: item, |
|
||||||
}, item) |
|
||||||
}) |
|
||||||
|
|
||||||
return h('datalist#coinList', { |
|
||||||
onClick: (event) => { |
|
||||||
event.preventDefault() |
|
||||||
}, |
|
||||||
}, list) |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.updateCoin = function (event) { |
|
||||||
event.preventDefault() |
|
||||||
const props = this.props |
|
||||||
var coinOptions = this.props.buyView.formView.coinOptions |
|
||||||
var coin = document.getElementById('fromCoin').value |
|
||||||
|
|
||||||
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') { |
|
||||||
var message = 'Not a valid coin' |
|
||||||
return props.dispatch(actions.displayWarning(message)) |
|
||||||
} else { |
|
||||||
return props.dispatch(actions.pairUpdate(coin)) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.handleLiveInput = function () { |
|
||||||
const props = this.props |
|
||||||
var coinOptions = this.props.buyView.formView.coinOptions |
|
||||||
var coin = document.getElementById('fromCoin').value |
|
||||||
|
|
||||||
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') { |
|
||||||
return null |
|
||||||
} else { |
|
||||||
return props.dispatch(actions.pairUpdate(coin)) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.renderInfo = function () { |
|
||||||
const marketinfo = this.props.buyView.formView.marketinfo |
|
||||||
const coinOptions = this.props.buyView.formView.coinOptions |
|
||||||
var coin = marketinfo.pair.split('_')[0].toUpperCase() |
|
||||||
|
|
||||||
return h('span', { |
|
||||||
style: { |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('h3.flex-row.text-transform-uppercase', { |
|
||||||
style: { |
|
||||||
color: '#868686', |
|
||||||
paddingTop: '4px', |
|
||||||
justifyContent: 'space-around', |
|
||||||
textAlign: 'center', |
|
||||||
fontSize: '17px', |
|
||||||
}, |
|
||||||
}, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`), |
|
||||||
h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]), |
|
||||||
h('.marketinfo', ['Exchange Rate: ', `${marketinfo.rate}`]), |
|
||||||
h('.marketinfo', ['Limit: ', `${marketinfo.limit}`]), |
|
||||||
h('.marketinfo', ['Minimum : ', `${marketinfo.minimum}`]), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.activeToggle = function (elementType) { |
|
||||||
if (!this.props.buyView.formView.response || this.props.warning) return elementType |
|
||||||
return `${elementType}.inactive` |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.renderLoading = function () { |
|
||||||
return h('span', { |
|
||||||
style: { |
|
||||||
position: 'absolute', |
|
||||||
left: '70px', |
|
||||||
bottom: '194px', |
|
||||||
background: 'transparent', |
|
||||||
width: '229px', |
|
||||||
height: '82px', |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('img', { |
|
||||||
style: { |
|
||||||
width: '60px', |
|
||||||
}, |
|
||||||
src: 'images/loading.svg', |
|
||||||
}), |
|
||||||
]) |
|
||||||
} |
|
||||||
@ -1,204 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const { DateTime } = require('luxon') |
|
||||||
const explorerLink = require('etherscan-link').createExplorerLink |
|
||||||
const actions = require('../../../ui/app/actions') |
|
||||||
const addressSummary = require('../util').addressSummary |
|
||||||
|
|
||||||
const CopyButton = require('./copyButton') |
|
||||||
const EthBalance = require('./eth-balance') |
|
||||||
const Tooltip = require('./tooltip') |
|
||||||
|
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(ShiftListItem) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
conversionRate: state.metamask.conversionRate, |
|
||||||
currentCurrency: state.metamask.currentCurrency, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(ShiftListItem, Component) |
|
||||||
|
|
||||||
function ShiftListItem () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
ShiftListItem.prototype.render = function () { |
|
||||||
return ( |
|
||||||
h('.transaction-list-item.flex-row', { |
|
||||||
style: { |
|
||||||
paddingTop: '20px', |
|
||||||
paddingBottom: '20px', |
|
||||||
justifyContent: 'space-around', |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
width: '0px', |
|
||||||
position: 'relative', |
|
||||||
bottom: '19px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('img', { |
|
||||||
src: 'https://info.shapeshift.io/sites/default/files/logo.png', |
|
||||||
style: { |
|
||||||
height: '35px', |
|
||||||
width: '132px', |
|
||||||
position: 'absolute', |
|
||||||
clip: 'rect(0px,23px,34px,0px)', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
this.renderInfo(), |
|
||||||
this.renderUtilComponents(), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
function formatDate (date) { |
|
||||||
return DateTime.fromMillis(date).toFormat('MMMM d y T') |
|
||||||
} |
|
||||||
|
|
||||||
ShiftListItem.prototype.renderUtilComponents = function () { |
|
||||||
var props = this.props |
|
||||||
const { conversionRate, currentCurrency } = props |
|
||||||
|
|
||||||
switch (props.response.status) { |
|
||||||
case 'no_deposits': |
|
||||||
return h('.flex-row', [ |
|
||||||
h(CopyButton, { |
|
||||||
value: this.props.depositAddress, |
|
||||||
}), |
|
||||||
h(Tooltip, { |
|
||||||
title: 'QR Code', |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-qrcode.pointer.pop-hover', { |
|
||||||
onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)), |
|
||||||
style: { |
|
||||||
margin: '5px', |
|
||||||
marginLeft: '23px', |
|
||||||
marginRight: '12px', |
|
||||||
fontSize: '20px', |
|
||||||
color: '#F7861C', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
]) |
|
||||||
case 'received': |
|
||||||
return h('.flex-row') |
|
||||||
|
|
||||||
case 'complete': |
|
||||||
return h('.flex-row', [ |
|
||||||
h(CopyButton, { |
|
||||||
value: this.props.response.transaction, |
|
||||||
}), |
|
||||||
h(EthBalance, { |
|
||||||
value: `${props.response.outgoingCoin}`, |
|
||||||
conversionRate, |
|
||||||
currentCurrency, |
|
||||||
width: '55px', |
|
||||||
shorten: true, |
|
||||||
needsParse: false, |
|
||||||
incoming: true, |
|
||||||
style: { |
|
||||||
fontSize: '15px', |
|
||||||
color: '#01888C', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]) |
|
||||||
|
|
||||||
case 'failed': |
|
||||||
return '' |
|
||||||
default: |
|
||||||
return '' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ShiftListItem.prototype.renderInfo = function () { |
|
||||||
var props = this.props |
|
||||||
switch (props.response.status) { |
|
||||||
case 'no_deposits': |
|
||||||
return h('.flex-column', { |
|
||||||
style: { |
|
||||||
width: '200px', |
|
||||||
overflow: 'hidden', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
fontSize: 'x-small', |
|
||||||
color: '#ABA9AA', |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, `${props.depositType} to ETH via ShapeShift`), |
|
||||||
h('div', 'No deposits received'), |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
fontSize: 'x-small', |
|
||||||
color: '#ABA9AA', |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, formatDate(props.time)), |
|
||||||
]) |
|
||||||
case 'received': |
|
||||||
return h('.flex-column', { |
|
||||||
style: { |
|
||||||
width: '200px', |
|
||||||
overflow: 'hidden', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
fontSize: 'x-small', |
|
||||||
color: '#ABA9AA', |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, `${props.depositType} to ETH via ShapeShift`), |
|
||||||
h('div', 'Conversion in progress'), |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
fontSize: 'x-small', |
|
||||||
color: '#ABA9AA', |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, formatDate(props.time)), |
|
||||||
]) |
|
||||||
case 'complete': |
|
||||||
var url = explorerLink(props.response.transaction, parseInt('1')) |
|
||||||
|
|
||||||
return h('.flex-column.pointer', { |
|
||||||
style: { |
|
||||||
width: '200px', |
|
||||||
overflow: 'hidden', |
|
||||||
}, |
|
||||||
onClick: () => global.platform.openWindow({ url }), |
|
||||||
}, [ |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
fontSize: 'x-small', |
|
||||||
color: '#ABA9AA', |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, 'From ShapeShift'), |
|
||||||
h('div', formatDate(props.time)), |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
fontSize: 'x-small', |
|
||||||
color: '#ABA9AA', |
|
||||||
width: '100%', |
|
||||||
}, |
|
||||||
}, addressSummary(props.response.transaction)), |
|
||||||
]) |
|
||||||
|
|
||||||
case 'failed': |
|
||||||
return h('span.error', '(Failed)') |
|
||||||
default: |
|
||||||
return '' |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,37 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
|
|
||||||
module.exports = TabBar |
|
||||||
|
|
||||||
inherits(TabBar, Component) |
|
||||||
function TabBar () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
TabBar.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const state = this.state || {} |
|
||||||
const { tabs = [], defaultTab, tabSelected } = props |
|
||||||
const { subview = defaultTab } = state |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.flex-row.space-around.text-transform-uppercase', { |
|
||||||
style: { |
|
||||||
background: '#EBEBEB', |
|
||||||
color: '#AEAEAE', |
|
||||||
paddingTop: '4px', |
|
||||||
minHeight: '30px', |
|
||||||
}, |
|
||||||
}, tabs.map((tab) => { |
|
||||||
const { key, content } = tab |
|
||||||
return h(subview === key ? '.activeForm' : '.inactiveForm.pointer', { |
|
||||||
onClick: () => { |
|
||||||
this.setState({ subview: key }) |
|
||||||
tabSelected(key) |
|
||||||
}, |
|
||||||
}, content) |
|
||||||
})) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -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,72 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const Identicon = require('./identicon') |
|
||||||
const prefixForNetwork = require('../../lib/etherscan-prefix-for-network') |
|
||||||
|
|
||||||
module.exports = TokenCell |
|
||||||
|
|
||||||
inherits(TokenCell, Component) |
|
||||||
function TokenCell () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
TokenCell.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const { address, symbol, string, network, userAddress } = props |
|
||||||
|
|
||||||
return ( |
|
||||||
h('li.token-cell', { |
|
||||||
style: { cursor: network === '1' ? 'pointer' : 'default' }, |
|
||||||
onClick: this.view.bind(this, address, userAddress, network), |
|
||||||
}, [ |
|
||||||
|
|
||||||
h(Identicon, { |
|
||||||
diameter: 50, |
|
||||||
address, |
|
||||||
network, |
|
||||||
}), |
|
||||||
|
|
||||||
h('h3', `${string || 0} ${symbol}`), |
|
||||||
|
|
||||||
h('span', { style: { flex: '1 0 auto' } }), |
|
||||||
|
|
||||||
/* |
|
||||||
h('button', { |
|
||||||
onClick: this.send.bind(this, address), |
|
||||||
}, 'SEND'), |
|
||||||
*/ |
|
||||||
|
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
TokenCell.prototype.send = function (address, event) { |
|
||||||
event.preventDefault() |
|
||||||
event.stopPropagation() |
|
||||||
const url = tokenFactoryFor(address) |
|
||||||
if (url) { |
|
||||||
navigateTo(url) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
TokenCell.prototype.view = function (address, userAddress, network, event) { |
|
||||||
const url = etherscanLinkFor(address, userAddress, network) |
|
||||||
if (url) { |
|
||||||
navigateTo(url) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function navigateTo (url) { |
|
||||||
global.platform.openWindow({ url }) |
|
||||||
} |
|
||||||
|
|
||||||
function etherscanLinkFor (tokenAddress, address, network) { |
|
||||||
const prefix = prefixForNetwork(network) |
|
||||||
return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}` |
|
||||||
} |
|
||||||
|
|
||||||
function tokenFactoryFor (tokenAddress) { |
|
||||||
return `https://tokenfactory.surge.sh/#/token/${tokenAddress}` |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,205 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const TokenTracker = require('eth-token-tracker') |
|
||||||
const TokenCell = require('./token-cell.js') |
|
||||||
const log = require('loglevel') |
|
||||||
|
|
||||||
module.exports = TokenList |
|
||||||
|
|
||||||
inherits(TokenList, Component) |
|
||||||
function TokenList () { |
|
||||||
this.state = { |
|
||||||
tokens: [], |
|
||||||
isLoading: true, |
|
||||||
network: null, |
|
||||||
} |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
TokenList.prototype.render = function () { |
|
||||||
const state = this.state |
|
||||||
const { tokens, isLoading, error } = state |
|
||||||
const { userAddress, network } = this.props |
|
||||||
|
|
||||||
if (isLoading) { |
|
||||||
return this.message('Loading') |
|
||||||
} |
|
||||||
|
|
||||||
if (error) { |
|
||||||
log.error(error) |
|
||||||
return h('.hotFix', { |
|
||||||
style: { |
|
||||||
padding: '80px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'We had trouble loading your token balances. You can view them ', |
|
||||||
h('span.hotFix', { |
|
||||||
style: { |
|
||||||
color: 'rgba(247, 134, 28, 1)', |
|
||||||
cursor: 'pointer', |
|
||||||
}, |
|
||||||
onClick: () => { |
|
||||||
global.platform.openWindow({ |
|
||||||
url: `https://ethplorer.io/address/${userAddress}`, |
|
||||||
}) |
|
||||||
}, |
|
||||||
}, 'here'), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
const tokenViews = tokens.map((tokenData) => { |
|
||||||
tokenData.network = network |
|
||||||
tokenData.userAddress = userAddress |
|
||||||
return h(TokenCell, tokenData) |
|
||||||
}) |
|
||||||
|
|
||||||
return h('.full-flex-height', [ |
|
||||||
this.renderTokenStatusBar(), |
|
||||||
|
|
||||||
h('ol.full-flex-height.flex-column', { |
|
||||||
style: { |
|
||||||
overflowY: 'auto', |
|
||||||
display: 'flex', |
|
||||||
flexDirection: 'column', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('style', ` |
|
||||||
|
|
||||||
li.token-cell { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
align-items: center; |
|
||||||
padding: 10px; |
|
||||||
min-height: 50px; |
|
||||||
} |
|
||||||
|
|
||||||
li.token-cell > h3 { |
|
||||||
margin-left: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
li.token-cell:hover { |
|
||||||
background: white; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
`),
|
|
||||||
...tokenViews, |
|
||||||
h('.flex-grow'), |
|
||||||
]), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
TokenList.prototype.renderTokenStatusBar = function () { |
|
||||||
const { tokens } = this.state |
|
||||||
|
|
||||||
let msg |
|
||||||
if (tokens.length === 1) { |
|
||||||
msg = `You own 1 token` |
|
||||||
} else if (tokens.length > 1) { |
|
||||||
msg = `You own ${tokens.length} tokens` |
|
||||||
} else { |
|
||||||
msg = `No tokens found` |
|
||||||
} |
|
||||||
|
|
||||||
return h('div', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'space-between', |
|
||||||
alignItems: 'center', |
|
||||||
minHeight: '70px', |
|
||||||
padding: '10px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('span', msg), |
|
||||||
h('button', { |
|
||||||
key: 'reveal-account-bar', |
|
||||||
onClick: (event) => { |
|
||||||
event.preventDefault() |
|
||||||
this.props.addToken() |
|
||||||
}, |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
height: '40px', |
|
||||||
padding: '10px', |
|
||||||
justifyContent: 'center', |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'ADD TOKEN', |
|
||||||
]), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
TokenList.prototype.message = function (body) { |
|
||||||
return h('div', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
height: '250px', |
|
||||||
alignItems: 'center', |
|
||||||
justifyContent: 'center', |
|
||||||
padding: '30px', |
|
||||||
}, |
|
||||||
}, body) |
|
||||||
} |
|
||||||
|
|
||||||
TokenList.prototype.componentDidMount = function () { |
|
||||||
this.createFreshTokenTracker() |
|
||||||
} |
|
||||||
|
|
||||||
TokenList.prototype.createFreshTokenTracker = function () { |
|
||||||
if (this.tracker) { |
|
||||||
// Clean up old trackers when refreshing:
|
|
||||||
this.tracker.stop() |
|
||||||
this.tracker.removeListener('update', this.balanceUpdater) |
|
||||||
this.tracker.removeListener('error', this.showError) |
|
||||||
} |
|
||||||
|
|
||||||
if (!global.ethereumProvider) return |
|
||||||
const { userAddress } = this.props |
|
||||||
this.tracker = new TokenTracker({ |
|
||||||
userAddress, |
|
||||||
provider: global.ethereumProvider, |
|
||||||
tokens: this.props.tokens, |
|
||||||
pollingInterval: 8000, |
|
||||||
}) |
|
||||||
|
|
||||||
|
|
||||||
// Set up listener instances for cleaning up
|
|
||||||
this.balanceUpdater = this.updateBalances.bind(this) |
|
||||||
this.showError = (error) => { |
|
||||||
this.setState({ error, isLoading: false }) |
|
||||||
} |
|
||||||
this.tracker.on('update', this.balanceUpdater) |
|
||||||
this.tracker.on('error', this.showError) |
|
||||||
|
|
||||||
this.tracker.updateBalances() |
|
||||||
.then(() => { |
|
||||||
this.updateBalances(this.tracker.serialize()) |
|
||||||
}) |
|
||||||
.catch((reason) => { |
|
||||||
log.error(`Problem updating balances`, reason) |
|
||||||
this.setState({ isLoading: false }) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
TokenList.prototype.componentWillUpdate = function (nextProps) { |
|
||||||
if (nextProps.network === 'loading') return |
|
||||||
const oldNet = this.props.network |
|
||||||
const newNet = nextProps.network |
|
||||||
|
|
||||||
if (oldNet && newNet && newNet !== oldNet) { |
|
||||||
this.setState({ isLoading: true }) |
|
||||||
this.createFreshTokenTracker() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
TokenList.prototype.updateBalances = function (tokens) { |
|
||||||
this.setState({ tokens, isLoading: false }) |
|
||||||
} |
|
||||||
|
|
||||||
TokenList.prototype.componentWillUnmount = function () { |
|
||||||
if (!this.tracker) return |
|
||||||
this.tracker.stop() |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,22 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const ReactTooltip = require('react-tooltip-component') |
|
||||||
|
|
||||||
module.exports = Tooltip |
|
||||||
|
|
||||||
inherits(Tooltip, Component) |
|
||||||
function Tooltip () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
Tooltip.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const { position, title, children } = props |
|
||||||
|
|
||||||
return h(ReactTooltip, { |
|
||||||
position: position || 'left', |
|
||||||
title, |
|
||||||
fixed: true, |
|
||||||
}, children) |
|
||||||
} |
|
||||||
@ -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,258 +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 { DateTime } = require('luxon') |
|
||||||
const Tooltip = require('./tooltip') |
|
||||||
const numberToBN = require('number-to-bn') |
|
||||||
const actions = require('../../../ui/app/actions') |
|
||||||
|
|
||||||
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 = {}, transactions } = this.props |
|
||||||
const { submittedTime, txParams } = transaction |
|
||||||
|
|
||||||
if (!txParams) { |
|
||||||
return false |
|
||||||
} |
|
||||||
|
|
||||||
let currentTxSharesEarliestNonce = false |
|
||||||
const currentNonce = txParams.nonce |
|
||||||
const currentNonceTxs = transactions.filter(tx => tx.txParams.nonce === currentNonce) |
|
||||||
const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted') |
|
||||||
const currentSubmittedTxs = transactions.filter(tx => tx.status === 'submitted') |
|
||||||
const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[0] |
|
||||||
const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce && |
|
||||||
lastSubmittedTxWithCurrentNonce.id === transaction.id |
|
||||||
if (currentSubmittedTxs.length > 0) { |
|
||||||
const earliestSubmitted = currentSubmittedTxs.reduce((tx1, tx2) => { |
|
||||||
if (tx1.submittedTime < tx2.submittedTime) return tx1 |
|
||||||
return tx2 |
|
||||||
}) |
|
||||||
currentTxSharesEarliestNonce = currentNonce === earliestSubmitted.txParams.nonce |
|
||||||
} |
|
||||||
|
|
||||||
return currentTxSharesEarliestNonce && currentTxIsLatestWithNonce && Date.now() - submittedTime > 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: 'Transaction Number', |
|
||||||
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', |
|
||||||
}, |
|
||||||
}, 'Taking too long?'), |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
textDecoration: 'underline', |
|
||||||
}, |
|
||||||
}, 'Retry with a higher gas price here'), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
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 = 'Signature Requested' |
|
||||||
} else if (txParams.to) { |
|
||||||
message = addressSummary(txParams.to) |
|
||||||
} else { |
|
||||||
message = 'Contract Deployment' |
|
||||||
} |
|
||||||
|
|
||||||
return h('div', { |
|
||||||
style: { |
|
||||||
fontSize: 'x-small', |
|
||||||
color: '#ABA9AA', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
message, |
|
||||||
renderErrorOrWarning(transaction), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
function formatDate (date) { |
|
||||||
return DateTime.fromMillis(date).toFormat('MMMM d y T') |
|
||||||
} |
|
||||||
|
|
||||||
function renderErrorOrWarning (transaction) { |
|
||||||
const { status, err, warning } = transaction |
|
||||||
|
|
||||||
// show dropped
|
|
||||||
if (status === 'dropped') { |
|
||||||
return h('span.dropped', ' (Dropped)') |
|
||||||
} |
|
||||||
|
|
||||||
// show rejected
|
|
||||||
if (status === 'rejected') { |
|
||||||
return h('span.error', ' (Rejected)') |
|
||||||
} |
|
||||||
|
|
||||||
// show error
|
|
||||||
if (err) { |
|
||||||
const message = err.message || '' |
|
||||||
return ( |
|
||||||
h(Tooltip, { |
|
||||||
title: message, |
|
||||||
position: 'bottom', |
|
||||||
}, [ |
|
||||||
h(`span.error`, ` (Failed)`), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
// show warning
|
|
||||||
if (warning) { |
|
||||||
const message = warning.message |
|
||||||
return h(Tooltip, { |
|
||||||
title: message, |
|
||||||
position: 'bottom', |
|
||||||
}, [ |
|
||||||
h(`span.warning`, ` (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') |
|
||||||
|
|
||||||
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 25px 0 15px', |
|
||||||
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, transactions, |
|
||||||
showTx: (txId) => { |
|
||||||
this.props.viewPendingTx(txId) |
|
||||||
}, |
|
||||||
}) |
|
||||||
}) |
|
||||||
: h('.flex-center.full-flex-height', { |
|
||||||
style: { |
|
||||||
flexDirection: 'column', |
|
||||||
justifyContent: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('p', { |
|
||||||
style: { |
|
||||||
marginTop: '50px', |
|
||||||
}, |
|
||||||
}, 'No transaction history.'), |
|
||||||
]), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,69 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const extend = require('xtend') |
|
||||||
const { ObjectInspector } = require('react-inspector') |
|
||||||
|
|
||||||
module.exports = TypedMessageRenderer |
|
||||||
|
|
||||||
inherits(TypedMessageRenderer, Component) |
|
||||||
function TypedMessageRenderer () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
TypedMessageRenderer.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const { value, version, style } = props |
|
||||||
let text |
|
||||||
switch (version) { |
|
||||||
case 'V1': |
|
||||||
text = renderTypedData(value) |
|
||||||
break |
|
||||||
case 'V3': |
|
||||||
text = renderTypedDataV3(value) |
|
||||||
break |
|
||||||
} |
|
||||||
|
|
||||||
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) { |
|
||||||
let v = value.value |
|
||||||
if (typeof v === 'boolean') { |
|
||||||
v = v.toString() |
|
||||||
} |
|
||||||
return h('div', {}, [ |
|
||||||
h('strong', {style: {display: 'block', fontWeight: 'bold'}}, String(value.name) + ':'), |
|
||||||
h('div', {}, v), |
|
||||||
]) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function renderTypedDataV3 (values) { |
|
||||||
const { domain, message } = JSON.parse(values) |
|
||||||
return [ |
|
||||||
domain ? h('div', [ |
|
||||||
h('h1', 'Domain'), |
|
||||||
h(ObjectInspector, { data: domain, expandLevel: 1, name: 'domain' }), |
|
||||||
]) : '', |
|
||||||
message ? h('div', [ |
|
||||||
h('h1', 'Message'), |
|
||||||
h(ObjectInspector, { data: message, expandLevel: 1, name: 'message' }), |
|
||||||
]) : '', |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,247 +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('../../ui/app/actions') |
|
||||||
const NetworkIndicator = require('./components/network') |
|
||||||
const LoadingIndicator = require('./components/loading') |
|
||||||
const txHelper = require('../lib/tx-helper') |
|
||||||
const log = require('loglevel') |
|
||||||
const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../app/scripts/lib/enums') |
|
||||||
const { getEnvironmentType } = require('../../app/scripts/lib/util') |
|
||||||
|
|
||||||
const PendingTx = require('./components/pending-tx') |
|
||||||
const PendingMsg = require('./components/pending-msg') |
|
||||||
const PendingPersonalMsg = require('./components/pending-personal-msg') |
|
||||||
const PendingTypedMsg = require('./components/pending-typed-msg') |
|
||||||
const Loading = require('./components/loading') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(ConfirmTxScreen) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
identities: state.metamask.identities, |
|
||||||
accounts: state.metamask.accounts, |
|
||||||
selectedAddress: state.metamask.selectedAddress, |
|
||||||
unapprovedTxs: state.metamask.unapprovedTxs, |
|
||||||
unapprovedMsgs: state.metamask.unapprovedMsgs, |
|
||||||
unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs, |
|
||||||
unapprovedTypedMessages: state.metamask.unapprovedTypedMessages, |
|
||||||
index: state.appState.currentView.context, |
|
||||||
warning: state.appState.warning, |
|
||||||
network: state.metamask.network, |
|
||||||
provider: state.metamask.provider, |
|
||||||
conversionRate: state.metamask.conversionRate, |
|
||||||
currentCurrency: state.metamask.currentCurrency, |
|
||||||
blockGasLimit: state.metamask.currentBlockGasLimit, |
|
||||||
computedBalances: state.metamask.computedBalances, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(ConfirmTxScreen, Component) |
|
||||||
function ConfirmTxScreen () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const { network, provider, unapprovedTxs, currentCurrency, computedBalances, |
|
||||||
unapprovedMsgs, unapprovedPersonalMsgs, unapprovedTypedMessages, conversionRate, blockGasLimit } = props |
|
||||||
|
|
||||||
var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, unapprovedTypedMessages, network) |
|
||||||
|
|
||||||
var txData = unconfTxList[props.index] || {} |
|
||||||
var txParams = txData.params || {} |
|
||||||
var isNotification = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_NOTIFICATION |
|
||||||
|
|
||||||
log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`) |
|
||||||
if (unconfTxList.length === 0) return h(Loading, { isLoading: true }) |
|
||||||
|
|
||||||
const unconfTxListLength = unconfTxList.length |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('.flex-column.flex-grow', [ |
|
||||||
|
|
||||||
h(LoadingIndicator, { |
|
||||||
isLoading: this.state ? !this.state.bypassLoadingScreen : txData.loadingDefaults, |
|
||||||
loadingMessage: 'Estimating transaction cost…', |
|
||||||
canBypass: true, |
|
||||||
bypass: () => { |
|
||||||
this.setState({bypassLoadingScreen: true}) |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
// subtitle and nav
|
|
||||||
h('.section-title.flex-row.flex-center', [ |
|
||||||
!isNotification ? h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { |
|
||||||
onClick: this.goHome.bind(this), |
|
||||||
}) : null, |
|
||||||
h('h2.page-subtitle', 'Confirm Transaction'), |
|
||||||
isNotification ? h(NetworkIndicator, { |
|
||||||
network: network, |
|
||||||
provider: provider, |
|
||||||
}) : null, |
|
||||||
]), |
|
||||||
|
|
||||||
h('h3', { |
|
||||||
style: { |
|
||||||
alignSelf: 'center', |
|
||||||
display: unconfTxList.length > 1 ? 'block' : 'none', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { |
|
||||||
style: { |
|
||||||
display: props.index === 0 ? 'none' : 'inline-block', |
|
||||||
}, |
|
||||||
onClick: () => props.dispatch(actions.previousTx()), |
|
||||||
}), |
|
||||||
` ${props.index + 1} of ${unconfTxList.length} `, |
|
||||||
h('i.fa.fa-arrow-right.fa-lg.cursor-pointer', { |
|
||||||
style: { |
|
||||||
display: props.index + 1 === unconfTxList.length ? 'none' : 'inline-block', |
|
||||||
}, |
|
||||||
onClick: () => props.dispatch(actions.nextTx()), |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
warningIfExists(props.warning), |
|
||||||
|
|
||||||
currentTxView({ |
|
||||||
// Properties
|
|
||||||
txData: txData, |
|
||||||
key: txData.id, |
|
||||||
selectedAddress: props.selectedAddress, |
|
||||||
accounts: props.accounts, |
|
||||||
identities: props.identities, |
|
||||||
conversionRate, |
|
||||||
currentCurrency, |
|
||||||
blockGasLimit, |
|
||||||
unconfTxListLength, |
|
||||||
computedBalances, |
|
||||||
// Actions
|
|
||||||
buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress), |
|
||||||
sendTransaction: this.sendTransaction.bind(this), |
|
||||||
cancelTransaction: this.cancelTransaction.bind(this, txData), |
|
||||||
cancelAllTransactions: this.cancelAllTransactions.bind(this, unconfTxList), |
|
||||||
signMessage: this.signMessage.bind(this, txData), |
|
||||||
signPersonalMessage: this.signPersonalMessage.bind(this, txData), |
|
||||||
signTypedMessage: this.signTypedMessage.bind(this, txData), |
|
||||||
cancelMessage: this.cancelMessage.bind(this, txData), |
|
||||||
cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData), |
|
||||||
cancelTypedMessage: this.cancelTypedMessage.bind(this, txData), |
|
||||||
}), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
function currentTxView (opts) { |
|
||||||
log.info('rendering current tx view') |
|
||||||
const { txData } = opts |
|
||||||
const { txParams, msgParams, type } = txData |
|
||||||
|
|
||||||
if (txParams) { |
|
||||||
log.debug('txParams detected, rendering pending tx') |
|
||||||
return h(PendingTx, opts) |
|
||||||
} else if (msgParams) { |
|
||||||
log.debug('msgParams detected, rendering pending msg') |
|
||||||
|
|
||||||
if (type === 'eth_sign') { |
|
||||||
log.debug('rendering eth_sign message') |
|
||||||
return h(PendingMsg, opts) |
|
||||||
} else if (type === 'personal_sign') { |
|
||||||
log.debug('rendering personal_sign message') |
|
||||||
return h(PendingPersonalMsg, opts) |
|
||||||
} else if (type === 'eth_signTypedData') { |
|
||||||
log.debug('rendering eth_signTypedData message') |
|
||||||
return h(PendingTypedMsg, opts) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.buyEth = function (address, event) { |
|
||||||
event.preventDefault() |
|
||||||
this.props.dispatch(actions.buyEthView(address)) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.sendTransaction = function (txData, event) { |
|
||||||
this.stopPropagation(event) |
|
||||||
this.props.dispatch(actions.updateAndApproveTx(txData)) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) { |
|
||||||
this.stopPropagation(event) |
|
||||||
event.preventDefault() |
|
||||||
this.props.dispatch(actions.cancelTx(txData)) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.cancelAllTransactions = function (unconfTxList, event) { |
|
||||||
this.stopPropagation(event) |
|
||||||
event.preventDefault() |
|
||||||
this.props.dispatch(actions.cancelAllTx(unconfTxList)) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.signMessage = function (msgData, event) { |
|
||||||
log.info('conf-tx.js: signing message') |
|
||||||
var params = msgData.msgParams |
|
||||||
params.metamaskId = msgData.id |
|
||||||
this.stopPropagation(event) |
|
||||||
this.props.dispatch(actions.signMsg(params)) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.stopPropagation = function (event) { |
|
||||||
if (event.stopPropagation) { |
|
||||||
event.stopPropagation() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) { |
|
||||||
log.info('conf-tx.js: signing personal message') |
|
||||||
var params = msgData.msgParams |
|
||||||
params.metamaskId = msgData.id |
|
||||||
this.stopPropagation(event) |
|
||||||
this.props.dispatch(actions.signPersonalMsg(params)) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) { |
|
||||||
log.info('conf-tx.js: signing typed message') |
|
||||||
var params = msgData.msgParams |
|
||||||
params.metamaskId = msgData.id |
|
||||||
this.stopPropagation(event) |
|
||||||
this.props.dispatch(actions.signTypedMsg(params)) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) { |
|
||||||
log.info('canceling message') |
|
||||||
this.stopPropagation(event) |
|
||||||
this.props.dispatch(actions.cancelMsg(msgData)) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) { |
|
||||||
log.info('canceling personal message') |
|
||||||
this.stopPropagation(event) |
|
||||||
this.props.dispatch(actions.cancelPersonalMsg(msgData)) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.cancelTypedMessage = function (msgData, event) { |
|
||||||
log.info('canceling typed message') |
|
||||||
this.stopPropagation(event) |
|
||||||
this.props.dispatch(actions.cancelTypedMsg(msgData)) |
|
||||||
} |
|
||||||
|
|
||||||
ConfirmTxScreen.prototype.goHome = function (event) { |
|
||||||
this.stopPropagation(event) |
|
||||||
this.props.dispatch(actions.goHome()) |
|
||||||
} |
|
||||||
|
|
||||||
function warningIfExists (warning) { |
|
||||||
if (warning && |
|
||||||
// Do not display user rejections on this screen:
|
|
||||||
warning.indexOf('User denied transaction signature') === -1) { |
|
||||||
return h('.error', { |
|
||||||
style: { |
|
||||||
margin: 'auto', |
|
||||||
}, |
|
||||||
}, warning) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,383 +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('../../ui/app/actions') |
|
||||||
const infuraCurrencies = require('./infura-conversion.json').objects.sort((a, b) => { |
|
||||||
return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase()) |
|
||||||
}) |
|
||||||
const validUrl = require('valid-url') |
|
||||||
const exportAsFile = require('./util').exportAsFile |
|
||||||
const Modal = require('../../ui/app/components/modals/index').Modal |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(ConfigScreen) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
metamask: state.metamask, |
|
||||||
warning: state.appState.warning, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(ConfigScreen, Component) |
|
||||||
function ConfigScreen () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
ConfigScreen.prototype.render = function () { |
|
||||||
var state = this.props |
|
||||||
var metamaskState = state.metamask |
|
||||||
var warning = state.warning |
|
||||||
|
|
||||||
return ( |
|
||||||
h('.flex-column.flex-grow', { |
|
||||||
style: { |
|
||||||
maxHeight: '585px', |
|
||||||
overflowY: 'auto', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h(Modal, {}, []), |
|
||||||
|
|
||||||
// subtitle and nav
|
|
||||||
h('.section-title.flex-row.flex-center', [ |
|
||||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { |
|
||||||
onClick: () => { |
|
||||||
state.dispatch(actions.goHome()) |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('h2.page-subtitle', 'Settings'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('.error', { |
|
||||||
style: { |
|
||||||
display: warning ? 'block' : 'none', |
|
||||||
padding: '0 20px', |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, warning), |
|
||||||
|
|
||||||
// conf view
|
|
||||||
h('.flex-column.flex-justify-center.flex-grow.select-none', [ |
|
||||||
h('.flex-space-around', { |
|
||||||
style: { |
|
||||||
padding: '20px', |
|
||||||
overflow: 'auto', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
currentProviderDisplay(metamaskState), |
|
||||||
|
|
||||||
h('div', { style: {display: 'block'} }, [ |
|
||||||
h('input#new_rpc', { |
|
||||||
placeholder: 'New RPC URL', |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
flex: '1 0 auto', |
|
||||||
height: '30px', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
onKeyPress (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
var element = event.target |
|
||||||
var newRpc = element.value |
|
||||||
var chainid = document.querySelector('input#chainid') |
|
||||||
var ticker = document.querySelector('input#ticker') |
|
||||||
var nickname = document.querySelector('input#nickname') |
|
||||||
rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state) |
|
||||||
} |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('br'), |
|
||||||
h('input#chainid', { |
|
||||||
placeholder: 'ChainId (optional)', |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
flex: '1 0 auto', |
|
||||||
height: '30px', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
onKeyPress (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
var element = document.querySelector('input#new_rpc') |
|
||||||
var newRpc = element.value |
|
||||||
var chainid = document.querySelector('input#chainid') |
|
||||||
var ticker = document.querySelector('input#ticker') |
|
||||||
var nickname = document.querySelector('input#nickname') |
|
||||||
rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state) |
|
||||||
} |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('br'), |
|
||||||
h('input#ticker', { |
|
||||||
placeholder: 'Symbol (optional)', |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
flex: '1 0 auto', |
|
||||||
height: '30px', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
onKeyPress (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
var element = document.querySelector('input#new_rpc') |
|
||||||
var newRpc = element.value |
|
||||||
var chainid = document.querySelector('input#chainid') |
|
||||||
var ticker = document.querySelector('input#ticker') |
|
||||||
var nickname = document.querySelector('input#nickname') |
|
||||||
rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state) |
|
||||||
} |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('br'), |
|
||||||
h('input#nickname', { |
|
||||||
placeholder: 'Nickname (optional)', |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
flex: '1 0 auto', |
|
||||||
height: '30px', |
|
||||||
margin: '8px', |
|
||||||
}, |
|
||||||
onKeyPress (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
var element = document.querySelector('input#new_rpc') |
|
||||||
var newRpc = element.value |
|
||||||
var chainid = document.querySelector('input#chainid') |
|
||||||
var ticker = document.querySelector('input#ticker') |
|
||||||
var nickname = document.querySelector('input#nickname') |
|
||||||
rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state) |
|
||||||
} |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('button', { |
|
||||||
style: { |
|
||||||
alignSelf: 'center', |
|
||||||
}, |
|
||||||
onClick (event) { |
|
||||||
event.preventDefault() |
|
||||||
var element = document.querySelector('input#new_rpc') |
|
||||||
var newRpc = element.value |
|
||||||
var chainid = document.querySelector('input#chainid') |
|
||||||
var ticker = document.querySelector('input#ticker') |
|
||||||
var nickname = document.querySelector('input#nickname') |
|
||||||
rpcValidation(newRpc, chainid.value, ticker.value, nickname.value, state) |
|
||||||
}, |
|
||||||
}, 'Save'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('hr.horizontal-line'), |
|
||||||
|
|
||||||
currentConversionInformation(metamaskState, state), |
|
||||||
|
|
||||||
h('hr.horizontal-line'), |
|
||||||
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
marginTop: '20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('p', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Light', |
|
||||||
fontSize: '13px', |
|
||||||
}, |
|
||||||
}, `State logs contain your public account addresses and sent transactions.`), |
|
||||||
h('br'), |
|
||||||
h('button', { |
|
||||||
style: { |
|
||||||
alignSelf: 'center', |
|
||||||
}, |
|
||||||
onClick (event) { |
|
||||||
window.logStateString((err, result) => { |
|
||||||
if (err) { |
|
||||||
state.dispatch(actions.displayWarning('Error in retrieving state logs.')) |
|
||||||
} else { |
|
||||||
exportAsFile('MetaMask State Logs.json', result) |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
}, 'Download State Logs'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('hr.horizontal-line'), |
|
||||||
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
marginTop: '20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('p', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Light', |
|
||||||
fontSize: '13px', |
|
||||||
}, |
|
||||||
}, 'Clear privacy data so all websites must request access to view account information again.'), |
|
||||||
h('br'), |
|
||||||
h('button', { |
|
||||||
style: { |
|
||||||
alignSelf: 'center', |
|
||||||
}, |
|
||||||
onClick (event) { |
|
||||||
event.preventDefault() |
|
||||||
state.dispatch(actions.clearApprovedOrigins()) |
|
||||||
}, |
|
||||||
}, 'Clear privacy data'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('hr.horizontal-line'), |
|
||||||
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
marginTop: '20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('p', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Light', |
|
||||||
fontSize: '13px', |
|
||||||
}, |
|
||||||
}, metamaskState.featureFlags.privacyMode ? |
|
||||||
'Websites will be able to view your account information.' : |
|
||||||
'Websites must request access to view your account information.' |
|
||||||
), |
|
||||||
h('br'), |
|
||||||
h('button', { |
|
||||||
style: { |
|
||||||
alignSelf: 'center', |
|
||||||
}, |
|
||||||
onClick (event) { |
|
||||||
event.preventDefault() |
|
||||||
state.dispatch(actions.setFeatureFlag('privacyMode', !metamaskState.featureFlags.privacyMode)) |
|
||||||
}, |
|
||||||
}, metamaskState.featureFlags.privacyMode ? |
|
||||||
'Disable privacy mode' : |
|
||||||
'Enable privacy mode' |
|
||||||
), |
|
||||||
]), |
|
||||||
|
|
||||||
h('hr.horizontal-line'), |
|
||||||
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
marginTop: '20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('button', { |
|
||||||
style: { |
|
||||||
alignSelf: 'center', |
|
||||||
}, |
|
||||||
onClick (event) { |
|
||||||
event.preventDefault() |
|
||||||
state.dispatch(actions.revealSeedConfirmation()) |
|
||||||
}, |
|
||||||
}, 'Reveal Seed Words'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('hr.horizontal-line'), |
|
||||||
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
marginTop: '20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('p', { |
|
||||||
style: { |
|
||||||
fontFamily: 'Montserrat Light', |
|
||||||
fontSize: '13px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'Resetting is for developer use only. ', |
|
||||||
h('a', { |
|
||||||
href: 'https://metamask.zendesk.com/hc/en-us/articles/360015489231-Resetting-an-Account-Old-UI-', |
|
||||||
target: '_blank', |
|
||||||
}, 'Read more.'), |
|
||||||
]), |
|
||||||
h('br'), |
|
||||||
|
|
||||||
h('button', { |
|
||||||
style: { |
|
||||||
alignSelf: 'center', |
|
||||||
}, |
|
||||||
onClick (event) { |
|
||||||
event.preventDefault() |
|
||||||
state.dispatch(actions.resetAccount()) |
|
||||||
}, |
|
||||||
}, 'Reset Account'), |
|
||||||
]), |
|
||||||
|
|
||||||
]), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
function rpcValidation (newRpc, chainid, ticker = 'ETH', nickname = '', state) { |
|
||||||
if (validUrl.isWebUri(newRpc)) { |
|
||||||
state.dispatch(actions.setRpcTarget(newRpc, chainid, ticker, nickname)) |
|
||||||
} else { |
|
||||||
var appendedRpc = `http://${newRpc}` |
|
||||||
if (validUrl.isWebUri(appendedRpc)) { |
|
||||||
state.dispatch(actions.displayWarning('URIs require the appropriate HTTP/HTTPS prefix.')) |
|
||||||
} else { |
|
||||||
state.dispatch(actions.displayWarning('Invalid RPC URI')) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function currentConversionInformation (metamaskState, state) { |
|
||||||
var currentCurrency = metamaskState.currentCurrency |
|
||||||
var conversionDate = metamaskState.conversionDate |
|
||||||
return h('div', [ |
|
||||||
h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, 'Current Conversion'), |
|
||||||
h('span', {style: { fontWeight: 'bold', paddingRight: '10px', fontSize: '13px'}}, `Updated ${Date(conversionDate)}`), |
|
||||||
h('select#currentCurrency', { |
|
||||||
onChange (event) { |
|
||||||
event.preventDefault() |
|
||||||
var element = document.getElementById('currentCurrency') |
|
||||||
var newCurrency = element.value |
|
||||||
state.dispatch(actions.setCurrentCurrency(newCurrency)) |
|
||||||
}, |
|
||||||
defaultValue: currentCurrency, |
|
||||||
}, infuraCurrencies.map((currency) => { |
|
||||||
return h('option', {key: currency.quote.code, value: currency.quote.code}, `${currency.quote.code.toUpperCase()} - ${currency.quote.name}`) |
|
||||||
}) |
|
||||||
), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
function currentProviderDisplay (metamaskState) { |
|
||||||
var provider = metamaskState.provider |
|
||||||
var title, value |
|
||||||
|
|
||||||
switch (provider.type) { |
|
||||||
|
|
||||||
case 'mainnet': |
|
||||||
title = 'Current Network' |
|
||||||
value = 'Main Ethereum Network' |
|
||||||
break |
|
||||||
|
|
||||||
case 'ropsten': |
|
||||||
title = 'Current Network' |
|
||||||
value = 'Ropsten Test Network' |
|
||||||
break |
|
||||||
|
|
||||||
case 'kovan': |
|
||||||
title = 'Current Network' |
|
||||||
value = 'Kovan Test Network' |
|
||||||
break |
|
||||||
|
|
||||||
case 'rinkeby': |
|
||||||
title = 'Current Network' |
|
||||||
value = 'Rinkeby Test Network' |
|
||||||
break |
|
||||||
|
|
||||||
default: |
|
||||||
title = 'Current RPC' |
|
||||||
value = metamaskState.provider.rpcTarget |
|
||||||
} |
|
||||||
|
|
||||||
return h('div', [ |
|
||||||
h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, title), |
|
||||||
h('span', value), |
|
||||||
]) |
|
||||||
} |
|
||||||
@ -1,21 +0,0 @@ |
|||||||
/* |
|
||||||
debug / dev |
|
||||||
*/ |
|
||||||
|
|
||||||
#app-content { |
|
||||||
border: 2px solid green; |
|
||||||
} |
|
||||||
|
|
||||||
#design-container { |
|
||||||
position: absolute; |
|
||||||
left: 360px; |
|
||||||
top: -42px; |
|
||||||
width: calc(100vw - 360px); |
|
||||||
height: 100vh; |
|
||||||
overflow: scroll; |
|
||||||
} |
|
||||||
|
|
||||||
#design-container img { |
|
||||||
width: 2000px; |
|
||||||
margin-right: 600px; |
|
||||||
} |
|
||||||
@ -1,372 +0,0 @@ |
|||||||
/* cyrillic-ext */ |
|
||||||
@import url('/fonts/Font_Awesome/font-awesome.min.css'); |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 100; |
|
||||||
src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); |
|
||||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; |
|
||||||
} |
|
||||||
/* cyrillic */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 100; |
|
||||||
src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); |
|
||||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
|
||||||
} |
|
||||||
/* greek-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 100; |
|
||||||
src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); |
|
||||||
unicode-range: U+1F00-1FFF; |
|
||||||
} |
|
||||||
/* greek */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 100; |
|
||||||
src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); |
|
||||||
unicode-range: U+0370-03FF; |
|
||||||
} |
|
||||||
/* vietnamese */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 100; |
|
||||||
src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); |
|
||||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; |
|
||||||
} |
|
||||||
/* latin-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 100; |
|
||||||
src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); |
|
||||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|
||||||
} |
|
||||||
/* latin */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 100; |
|
||||||
src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype'); |
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|
||||||
} |
|
||||||
/* cyrillic-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 300; |
|
||||||
src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); |
|
||||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; |
|
||||||
} |
|
||||||
/* cyrillic */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 300; |
|
||||||
src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); |
|
||||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
|
||||||
} |
|
||||||
/* greek-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 300; |
|
||||||
src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); |
|
||||||
unicode-range: U+1F00-1FFF; |
|
||||||
} |
|
||||||
/* greek */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 300; |
|
||||||
src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); |
|
||||||
unicode-range: U+0370-03FF; |
|
||||||
} |
|
||||||
/* vietnamese */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 300; |
|
||||||
src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); |
|
||||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; |
|
||||||
} |
|
||||||
/* latin-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 300; |
|
||||||
src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); |
|
||||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|
||||||
} |
|
||||||
/* latin */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 300; |
|
||||||
src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype'); |
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|
||||||
} |
|
||||||
/* cyrillic-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 400; |
|
||||||
src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); |
|
||||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; |
|
||||||
} |
|
||||||
/* cyrillic */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 400; |
|
||||||
src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); |
|
||||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
|
||||||
} |
|
||||||
/* greek-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 400; |
|
||||||
src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); |
|
||||||
unicode-range: U+1F00-1FFF; |
|
||||||
} |
|
||||||
/* greek */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 400; |
|
||||||
src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); |
|
||||||
unicode-range: U+0370-03FF; |
|
||||||
} |
|
||||||
/* vietnamese */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 400; |
|
||||||
src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); |
|
||||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; |
|
||||||
} |
|
||||||
/* latin-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 400; |
|
||||||
src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); |
|
||||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|
||||||
} |
|
||||||
/* latin */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 400; |
|
||||||
src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'); |
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|
||||||
} |
|
||||||
/* cyrillic-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 500; |
|
||||||
src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); |
|
||||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; |
|
||||||
} |
|
||||||
/* cyrillic */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 500; |
|
||||||
src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); |
|
||||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
|
||||||
} |
|
||||||
/* greek-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 500; |
|
||||||
src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); |
|
||||||
unicode-range: U+1F00-1FFF; |
|
||||||
} |
|
||||||
/* greek */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 500; |
|
||||||
src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); |
|
||||||
unicode-range: U+0370-03FF; |
|
||||||
} |
|
||||||
/* vietnamese */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 500; |
|
||||||
src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); |
|
||||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; |
|
||||||
} |
|
||||||
/* latin-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 500; |
|
||||||
src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); |
|
||||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|
||||||
} |
|
||||||
/* latin */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 500; |
|
||||||
src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'); |
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|
||||||
} |
|
||||||
/* cyrillic-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 700; |
|
||||||
src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); |
|
||||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; |
|
||||||
} |
|
||||||
/* cyrillic */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 700; |
|
||||||
src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); |
|
||||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
|
||||||
} |
|
||||||
/* greek-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 700; |
|
||||||
src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); |
|
||||||
unicode-range: U+1F00-1FFF; |
|
||||||
} |
|
||||||
/* greek */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 700; |
|
||||||
src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); |
|
||||||
unicode-range: U+0370-03FF; |
|
||||||
} |
|
||||||
/* vietnamese */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 700; |
|
||||||
src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); |
|
||||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; |
|
||||||
} |
|
||||||
/* latin-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 700; |
|
||||||
src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); |
|
||||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|
||||||
} |
|
||||||
/* latin */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 700; |
|
||||||
src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'); |
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|
||||||
} |
|
||||||
/* cyrillic-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 900; |
|
||||||
src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); |
|
||||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; |
|
||||||
} |
|
||||||
/* cyrillic */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 900; |
|
||||||
src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); |
|
||||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; |
|
||||||
} |
|
||||||
/* greek-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 900; |
|
||||||
src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); |
|
||||||
unicode-range: U+1F00-1FFF; |
|
||||||
} |
|
||||||
/* greek */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 900; |
|
||||||
src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); |
|
||||||
unicode-range: U+0370-03FF; |
|
||||||
} |
|
||||||
/* vietnamese */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 900; |
|
||||||
src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); |
|
||||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; |
|
||||||
} |
|
||||||
/* latin-ext */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 900; |
|
||||||
src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); |
|
||||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; |
|
||||||
} |
|
||||||
/* latin */ |
|
||||||
@font-face { |
|
||||||
font-family: 'Roboto'; |
|
||||||
font-style: normal; |
|
||||||
font-weight: 900; |
|
||||||
src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype'); |
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Montserrat Regular'; |
|
||||||
src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff'); |
|
||||||
src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
font-size: 'small'; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Montserrat Bold'; |
|
||||||
src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff'); |
|
||||||
src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Montserrat Light'; |
|
||||||
src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff'); |
|
||||||
src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype'); |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: 'Montserrat UltraLight'; |
|
||||||
src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff'); |
|
||||||
src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype'); |
|
||||||
font-weight: normal; |
|
||||||
font-style: normal; |
|
||||||
} |
|
||||||
@ -1,939 +0,0 @@ |
|||||||
/* |
|
||||||
faint orange (textfield shades) #FAF6F0 |
|
||||||
light orange (button shades): #F5C26D |
|
||||||
dark orange (text): #F5A623 |
|
||||||
borders/font/any gray: #4A4A4A |
|
||||||
*/ |
|
||||||
|
|
||||||
/* |
|
||||||
application specific styles |
|
||||||
*/ |
|
||||||
|
|
||||||
* { |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
html, body { |
|
||||||
font-family: 'Montserrat Regular', Arial; |
|
||||||
color: #4D4D4D; |
|
||||||
font-weight: 300; |
|
||||||
line-height: 1.4em; |
|
||||||
background: #F7F7F7; |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
html { |
|
||||||
min-height: 500px; |
|
||||||
} |
|
||||||
|
|
||||||
.app-root { |
|
||||||
overflow: hidden; |
|
||||||
position: relative |
|
||||||
} |
|
||||||
|
|
||||||
.app-primary { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
input:focus, textarea:focus { |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
|
|
||||||
.full-size { |
|
||||||
height: 100%; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.full-width { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.full-height { |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.full-flex-height { |
|
||||||
display: flex; |
|
||||||
flex: 1 1 auto; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
#app-content { |
|
||||||
overflow-x: hidden; |
|
||||||
height: 100%; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
button, input[type="submit"] { |
|
||||||
font-family: 'Montserrat Bold'; |
|
||||||
outline: none; |
|
||||||
cursor: pointer; |
|
||||||
padding: 8px 12px; |
|
||||||
border: none; |
|
||||||
color: white; |
|
||||||
transform-origin: center center; |
|
||||||
transition: transform 50ms ease-in; |
|
||||||
/* default orange */ |
|
||||||
background: rgba(247, 134, 28, 1); |
|
||||||
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); |
|
||||||
} |
|
||||||
|
|
||||||
.btn-green, input[type="submit"].btn-green { |
|
||||||
background: rgba(106, 195, 96, 1); |
|
||||||
box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); |
|
||||||
} |
|
||||||
|
|
||||||
.btn-red { |
|
||||||
background: rgba(254, 35, 17, 1); |
|
||||||
box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); |
|
||||||
} |
|
||||||
|
|
||||||
button[disabled], input[type="submit"][disabled] { |
|
||||||
cursor: not-allowed; |
|
||||||
background: rgba(197, 197, 197, 1); |
|
||||||
box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); |
|
||||||
} |
|
||||||
|
|
||||||
button.spaced { |
|
||||||
margin: 2px; |
|
||||||
} |
|
||||||
|
|
||||||
button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { |
|
||||||
transform: scale(1.1); |
|
||||||
} |
|
||||||
button:not([disabled]):active, input[type="submit"]:not([disabled]):active { |
|
||||||
transform: scale(0.95); |
|
||||||
} |
|
||||||
|
|
||||||
.grow-on-hover:hover { |
|
||||||
transform: scale(1.05); |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
text-decoration: none; |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
a:hover{ |
|
||||||
color: #df6b0e; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
app |
|
||||||
*/ |
|
||||||
|
|
||||||
.active { |
|
||||||
color: #909090; |
|
||||||
} |
|
||||||
|
|
||||||
button.primary { |
|
||||||
padding: 8px 12px; |
|
||||||
background: #F7861C; |
|
||||||
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); |
|
||||||
color: white; |
|
||||||
font-size: 1.1em; |
|
||||||
font-family: 'Montserrat Regular'; |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
|
|
||||||
button.btn-thin { |
|
||||||
border: 1px solid; |
|
||||||
border-color: #4D4D4D; |
|
||||||
color: #4D4D4D; |
|
||||||
background: rgb(255, 174, 41); |
|
||||||
border-radius: 4px; |
|
||||||
min-width: 200px; |
|
||||||
margin: 12px 0; |
|
||||||
padding: 6px; |
|
||||||
font-size: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
.app-header { |
|
||||||
padding: 6px 8px; |
|
||||||
} |
|
||||||
|
|
||||||
.app-header h1 { |
|
||||||
font-family: 'Montserrat Regular'; |
|
||||||
text-transform: uppercase; |
|
||||||
color: #AEAEAE; |
|
||||||
} |
|
||||||
|
|
||||||
h2.page-subtitle { |
|
||||||
font-family: 'Montserrat Regular'; |
|
||||||
text-transform: uppercase; |
|
||||||
color: #AEAEAE; |
|
||||||
font-size: 1em; |
|
||||||
margin: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.app-footer { |
|
||||||
padding-bottom: 10px; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.identicon { |
|
||||||
height: 46px; |
|
||||||
width: 46px; |
|
||||||
background-size: cover; |
|
||||||
border-radius: 100%; |
|
||||||
border: 3px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
textarea.twelve-word-phrase { |
|
||||||
padding: 12px; |
|
||||||
width: 300px; |
|
||||||
height: 140px; |
|
||||||
font-size: 16px; |
|
||||||
background: white; |
|
||||||
resize: none; |
|
||||||
} |
|
||||||
|
|
||||||
.network-indicator { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
font-size: 0.6em; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.network-name { |
|
||||||
width: 5.2em; |
|
||||||
line-height: 9px; |
|
||||||
text-rendering: geometricPrecision; |
|
||||||
} |
|
||||||
|
|
||||||
.check { |
|
||||||
margin-left: 12px; |
|
||||||
color: #F7861C; |
|
||||||
flex: 1 0 auto; |
|
||||||
display: flex; |
|
||||||
justify-content: flex-end; |
|
||||||
} |
|
||||||
/* |
|
||||||
app sections |
|
||||||
*/ |
|
||||||
|
|
||||||
/* initialize */ |
|
||||||
|
|
||||||
.initialize-screen hr { |
|
||||||
width: 60px; |
|
||||||
margin: 12px; |
|
||||||
border-color: #F7861C; |
|
||||||
border-style: solid; |
|
||||||
} |
|
||||||
|
|
||||||
.initialize-screen label { |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.initialize-screen button.create-vault { |
|
||||||
margin-top: 40px; |
|
||||||
} |
|
||||||
|
|
||||||
.initialize-screen .warning { |
|
||||||
font-size: 14px; |
|
||||||
margin: 0 16px; |
|
||||||
} |
|
||||||
|
|
||||||
/* unlock */ |
|
||||||
.error { |
|
||||||
color: #f7861c; |
|
||||||
margin-bottom: 9px; |
|
||||||
} |
|
||||||
|
|
||||||
.warning { |
|
||||||
color: #FFAE00; |
|
||||||
} |
|
||||||
|
|
||||||
.dropped { |
|
||||||
color: #6195ED; |
|
||||||
} |
|
||||||
|
|
||||||
.lock { |
|
||||||
width: 50px; |
|
||||||
height: 50px; |
|
||||||
} |
|
||||||
|
|
||||||
.lock.locked { |
|
||||||
transform: scale(1.5); |
|
||||||
opacity: 0.0; |
|
||||||
transition: opacity 400ms ease-in, transform 400ms ease-in; |
|
||||||
} |
|
||||||
.lock.unlocked { |
|
||||||
transform: scale(1); |
|
||||||
opacity: 1; |
|
||||||
transition: opacity 500ms ease-out, transform 500ms ease-out, background 200ms ease-in; |
|
||||||
} |
|
||||||
|
|
||||||
.lock.locked .lock-top { |
|
||||||
transform: scaleX(1) translateX(0); |
|
||||||
transition: transform 250ms ease-in; |
|
||||||
} |
|
||||||
.lock.unlocked .lock-top { |
|
||||||
transform: scaleX(-1) translateX(-12px); |
|
||||||
transition: transform 250ms ease-in; |
|
||||||
} |
|
||||||
.lock.unlocked:hover { |
|
||||||
border-radius: 4px; |
|
||||||
background: #e5e5e5; |
|
||||||
border: 1px solid #b1b1b1; |
|
||||||
} |
|
||||||
.lock.unlocked:active { |
|
||||||
background: #c3c3c3; |
|
||||||
} |
|
||||||
|
|
||||||
.section-title .fa-arrow-left { |
|
||||||
margin: -2px 8px 0px -8px; |
|
||||||
} |
|
||||||
|
|
||||||
.unlock-screen #metamask-mascot-container { |
|
||||||
margin-top: 80px; |
|
||||||
} |
|
||||||
|
|
||||||
.unlock-screen h1 { |
|
||||||
margin-top: -28px; |
|
||||||
margin-bottom: 42px; |
|
||||||
} |
|
||||||
|
|
||||||
.unlock-screen input[type=password] { |
|
||||||
width: 260px; |
|
||||||
/*height: 36px; |
|
||||||
margin-bottom: 24px; |
|
||||||
padding: 8px;*/ |
|
||||||
} |
|
||||||
|
|
||||||
.sizing-input{ |
|
||||||
font-size: 14px; |
|
||||||
height: 30px; |
|
||||||
padding-left: 5px; |
|
||||||
} |
|
||||||
.editable-label{ |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
/* Webkit */ |
|
||||||
.unlock-screen input::-webkit-input-placeholder { |
|
||||||
text-align: center; |
|
||||||
font-size: 1.2em; |
|
||||||
} |
|
||||||
/* Firefox 18- */ |
|
||||||
.unlock-screen input:-moz-placeholder { |
|
||||||
text-align: center; |
|
||||||
font-size: 1.2em; |
|
||||||
} |
|
||||||
/* Firefox 19+ */ |
|
||||||
.unlock-screen input::-moz-placeholder { |
|
||||||
text-align: center; |
|
||||||
font-size: 1.2em; |
|
||||||
} |
|
||||||
/* IE */ |
|
||||||
.unlock-screen input:-ms-input-placeholder { |
|
||||||
text-align: center; |
|
||||||
font-size: 1.2em; |
|
||||||
} |
|
||||||
|
|
||||||
input.large-input, textarea.large-input { |
|
||||||
/*margin-bottom: 24px;*/ |
|
||||||
padding: 8px; |
|
||||||
} |
|
||||||
|
|
||||||
input.large-input { |
|
||||||
height: 36px; |
|
||||||
} |
|
||||||
|
|
||||||
.letter-spacey { |
|
||||||
letter-spacing: 0.1em; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* accounts */ |
|
||||||
|
|
||||||
.accounts-section { |
|
||||||
margin: 0 0px; |
|
||||||
} |
|
||||||
|
|
||||||
.accounts-section .horizontal-line { |
|
||||||
margin: 0px 18px; |
|
||||||
} |
|
||||||
|
|
||||||
.accounts-list-option { |
|
||||||
height: 120px; |
|
||||||
} |
|
||||||
|
|
||||||
.accounts-list-option .identicon-wrapper { |
|
||||||
width: 100px; |
|
||||||
} |
|
||||||
|
|
||||||
.unconftx-link { |
|
||||||
margin-top: 24px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.unconftx-link .fa-arrow-right { |
|
||||||
margin: 0px -8px 0px 8px; |
|
||||||
} |
|
||||||
|
|
||||||
/* identity panel */ |
|
||||||
|
|
||||||
.identity-panel { |
|
||||||
font-weight: 500; |
|
||||||
} |
|
||||||
|
|
||||||
.identity-panel .identicon-wrapper { |
|
||||||
margin: 4px; |
|
||||||
margin-top: 8px; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.identity-panel .identicon-wrapper span { |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
.identity-panel .identity-data { |
|
||||||
margin: 8px 8px 8px 18px; |
|
||||||
} |
|
||||||
|
|
||||||
.identity-panel i { |
|
||||||
margin-top: 32px; |
|
||||||
margin-right: 6px; |
|
||||||
color: #B9B9B9; |
|
||||||
} |
|
||||||
|
|
||||||
.identity-panel .arrow-right { |
|
||||||
padding-left: 18px; |
|
||||||
width: 42px; |
|
||||||
min-width: 18px; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.identity-copy.flex-column { |
|
||||||
flex: 0.25 0 auto; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
/* accounts screen */ |
|
||||||
|
|
||||||
.identity-section { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.identity-section .identity-panel { |
|
||||||
background: #E9E9E9; |
|
||||||
border-bottom: 1px solid #B1B1B1; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.identity-section .identity-panel.selected { |
|
||||||
background: white; |
|
||||||
color: #F3C83E; |
|
||||||
} |
|
||||||
|
|
||||||
.identity-section .identity-panel.selected .identicon { |
|
||||||
border-color: orange; |
|
||||||
} |
|
||||||
|
|
||||||
.identity-section .accounts-list-option:hover, |
|
||||||
.identity-section .accounts-list-option.selected { |
|
||||||
background:white; |
|
||||||
} |
|
||||||
|
|
||||||
/* account detail screen */ |
|
||||||
|
|
||||||
.account-detail-section { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
overflow-x: hidden; |
|
||||||
overflow-y: auto; |
|
||||||
max-height: 585px; |
|
||||||
flex-direction: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
.account-detail-section .name-label { |
|
||||||
margin-left: 15px; |
|
||||||
} |
|
||||||
|
|
||||||
.grow-tenx { |
|
||||||
flex-grow: 10; |
|
||||||
} |
|
||||||
|
|
||||||
.name-label{ |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.unapproved-tx-icon { |
|
||||||
height: 16px; |
|
||||||
width: 16px; |
|
||||||
background: rgb(47, 174, 244); |
|
||||||
border-color: #AEAEAE; |
|
||||||
border-radius: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
.edit-text { |
|
||||||
height: 100%; |
|
||||||
visibility: hidden; |
|
||||||
} |
|
||||||
.editing-label { |
|
||||||
display: flex; |
|
||||||
justify-content: flex-start; |
|
||||||
margin-left: 50px; |
|
||||||
margin-bottom: 2px; |
|
||||||
font-size: 11px; |
|
||||||
text-rendering: geometricPrecision; |
|
||||||
color: #F7861C; |
|
||||||
} |
|
||||||
.name-label:hover .edit-text { |
|
||||||
visibility: visible; |
|
||||||
} |
|
||||||
/* tx confirm */ |
|
||||||
|
|
||||||
.unconftx-section input[type=password] { |
|
||||||
height: 22px; |
|
||||||
padding: 2px; |
|
||||||
margin: 12px; |
|
||||||
margin-bottom: 24px; |
|
||||||
border-radius: 4px; |
|
||||||
border: 2px solid #F3C83E; |
|
||||||
background: #FAF6F0; |
|
||||||
} |
|
||||||
|
|
||||||
/* Send Screen */ |
|
||||||
|
|
||||||
.send-screen { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.send-screen section { |
|
||||||
margin: 8px 16px; |
|
||||||
} |
|
||||||
|
|
||||||
.send-screen input { |
|
||||||
width: 100%; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
/* Ether Balance Widget */ |
|
||||||
|
|
||||||
.ether-balance-amount { |
|
||||||
color: #F7861C; |
|
||||||
} |
|
||||||
|
|
||||||
.ether-balance-label { |
|
||||||
color: #ABA9AA; |
|
||||||
} |
|
||||||
|
|
||||||
/* Info screen */ |
|
||||||
.info-gray{ |
|
||||||
font-family: 'Montserrat Regular'; |
|
||||||
text-transform: uppercase; |
|
||||||
color: #AEAEAE; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-size{ |
|
||||||
width: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.info{ |
|
||||||
font-family: 'Montserrat Regular', Arial; |
|
||||||
padding-bottom: 10px; |
|
||||||
display: inline-block; |
|
||||||
padding-left: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
/* buy eth warning screen */ |
|
||||||
.custom-radios { |
|
||||||
justify-content: space-around; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.custom-radio-selected { |
|
||||||
width: 17px; |
|
||||||
height: 17px; |
|
||||||
border: solid; |
|
||||||
border-style: double; |
|
||||||
border-radius: 15px; |
|
||||||
border-width: 5px; |
|
||||||
background: rgba(247, 134, 28, 1); |
|
||||||
border-color: #F7F7F7; |
|
||||||
} |
|
||||||
|
|
||||||
.custom-radio-inactive { |
|
||||||
width: 14px; |
|
||||||
height: 14px; |
|
||||||
border: solid; |
|
||||||
border-width: 1px; |
|
||||||
border-radius: 24px; |
|
||||||
border-color: #AEAEAE; |
|
||||||
} |
|
||||||
|
|
||||||
.radio-titles { |
|
||||||
color: rgba(247, 134, 28, 1); |
|
||||||
} |
|
||||||
|
|
||||||
.radio-titles-subtext { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.selected-exchange { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.buy-radio { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.eth-warning{ |
|
||||||
transition: opacity 400ms ease-in, transform 400ms ease-in; |
|
||||||
} |
|
||||||
|
|
||||||
.buy-subview{ |
|
||||||
transition: opacity 400ms ease-in, transform 400ms ease-in; |
|
||||||
} |
|
||||||
|
|
||||||
.input-container:hover .edit-text{ |
|
||||||
visibility: visible; |
|
||||||
} |
|
||||||
|
|
||||||
.buy-inputs{ |
|
||||||
font-family: 'Montserrat Light'; |
|
||||||
font-size: 13px; |
|
||||||
height: 20px; |
|
||||||
background: transparent; |
|
||||||
box-sizing: border-box; |
|
||||||
border: solid; |
|
||||||
border-color: transparent; |
|
||||||
border-width: 0.5px; |
|
||||||
border-radius: 2px; |
|
||||||
|
|
||||||
} |
|
||||||
.input-container:hover .buy-inputs{ |
|
||||||
box-sizing: inherit; |
|
||||||
border: solid; |
|
||||||
border-color: #F7861C; |
|
||||||
border-width: 0.5px; |
|
||||||
border-radius: 2px; |
|
||||||
} |
|
||||||
|
|
||||||
.buy-inputs:focus{ |
|
||||||
border: solid; |
|
||||||
border-color: #F7861C; |
|
||||||
border-width: 0.5px; |
|
||||||
border-radius: 2px; |
|
||||||
} |
|
||||||
|
|
||||||
.activeForm { |
|
||||||
background: #F7F7F7; |
|
||||||
border: none; |
|
||||||
border-radius: 8px 8px 0px 0px; |
|
||||||
width: 50%; |
|
||||||
text-align: center; |
|
||||||
padding-bottom: 4px; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.inactiveForm { |
|
||||||
border: none; |
|
||||||
border-radius: 8px 8px 0px 0px; |
|
||||||
width: 50%; |
|
||||||
text-align: center; |
|
||||||
padding-bottom: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.ex-coins { |
|
||||||
font-family: 'Montserrat Regular'; |
|
||||||
text-transform: uppercase; |
|
||||||
text-align: center; |
|
||||||
font-size: 33px; |
|
||||||
width: 118px; |
|
||||||
height: 42px; |
|
||||||
padding: 1px; |
|
||||||
color: #4D4D4D; |
|
||||||
} |
|
||||||
|
|
||||||
.marketinfo{ |
|
||||||
font-family: 'Montserrat light'; |
|
||||||
color: #AEAEAE; |
|
||||||
font-size: 15px; |
|
||||||
line-height: 17px; |
|
||||||
} |
|
||||||
|
|
||||||
#fromCoin::-webkit-calendar-picker-indicator { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
#coinList { |
|
||||||
width: 400px; |
|
||||||
height: 500px; |
|
||||||
overflow: scroll; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-control .fa-refresh{ |
|
||||||
visibility: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-control:hover .fa-refresh{ |
|
||||||
visibility: visible; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-control:hover .fa-chevron-right{ |
|
||||||
visibility: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.inactive { |
|
||||||
color: #AEAEAE; |
|
||||||
} |
|
||||||
|
|
||||||
.inactive button{ |
|
||||||
background: #AEAEAE; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
.ellip-address { |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
width: 5em; |
|
||||||
font-size: 14px; |
|
||||||
font-family: "Montserrat Light"; |
|
||||||
margin-left: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.qr-header { |
|
||||||
font-size: 25px; |
|
||||||
margin-top: 40px; |
|
||||||
} |
|
||||||
|
|
||||||
.qr-message { |
|
||||||
font-size: 12px; |
|
||||||
color: #F7861C; |
|
||||||
} |
|
||||||
|
|
||||||
div.message-container > div:first-child { |
|
||||||
margin-top: 18px; |
|
||||||
font-size: 15px; |
|
||||||
color: #4D4D4D; |
|
||||||
} |
|
||||||
|
|
||||||
.pop-hover:hover { |
|
||||||
transform: scale(1.1); |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
height: 100%; |
|
||||||
background: white; |
|
||||||
color: #4D4D4D; |
|
||||||
font-family: Roboto, Arial, sans-serif; |
|
||||||
padding: 1.5rem; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__announcement-header { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
justify-content: space-between; |
|
||||||
padding-bottom: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__announcement-header a.close { |
|
||||||
cursor: pointer; |
|
||||||
font-size: 32px; |
|
||||||
line-height: 17px; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__announcement-header a.close:hover { |
|
||||||
color: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__announcement-header h1 { |
|
||||||
color: #33A4E7; |
|
||||||
text-transform: uppercase; |
|
||||||
font-size: 18px; |
|
||||||
font-weight: 400; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__body { |
|
||||||
display: flex; |
|
||||||
flex: 1; |
|
||||||
flex-direction: column; |
|
||||||
font-size: 10.5pt; |
|
||||||
font-weight: 300; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__body h1 { |
|
||||||
font-size: 22px; |
|
||||||
font-weight: 600; |
|
||||||
padding-bottom: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__body a { |
|
||||||
color: #33A4E7; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__body .updates-list { |
|
||||||
padding: .5rem 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__body .updates-list h2 { |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__body .updates-list ul { |
|
||||||
list-style: disc inside; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__footer { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__footer h1 { |
|
||||||
font-family: inherit; |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__footer button:hover { |
|
||||||
transform: none; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__footer button.positive { |
|
||||||
padding: 1rem; |
|
||||||
margin: 1rem; |
|
||||||
background: #33A4E7; |
|
||||||
color: white; |
|
||||||
text-transform: uppercase; |
|
||||||
box-shadow: none; |
|
||||||
border-radius: 5px; |
|
||||||
font-family: inherit; |
|
||||||
font-size: 13px; |
|
||||||
font-weight: 400; |
|
||||||
width: 90%; |
|
||||||
} |
|
||||||
|
|
||||||
.new-ui-announcement__footer button.negative { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
background: white; |
|
||||||
color: #33A4E7; |
|
||||||
font-family: inherit; |
|
||||||
font-size: 13px; |
|
||||||
font-weight: 400; |
|
||||||
box-shadow: none; |
|
||||||
} |
|
||||||
|
|
||||||
.app-bar { |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
.app-bar__new-ui-banner { |
|
||||||
background: #33A4E7; |
|
||||||
color: white; |
|
||||||
font-size: 12px; |
|
||||||
line-height: 12px; |
|
||||||
padding: 8px; |
|
||||||
font-family: Roboto, Arial, sans-serif; |
|
||||||
font-weight: 400; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.banner__link { |
|
||||||
cursor: pointer; |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
|
|
||||||
.notification-modal-wrapper { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: flex-start; |
|
||||||
align-items: center; |
|
||||||
position: relative; |
|
||||||
border: 1px solid #dedede; |
|
||||||
box-shadow: 0 0 2px 2px #dedede; |
|
||||||
font-family: Roboto; |
|
||||||
} |
|
||||||
|
|
||||||
.notification-modal-header { |
|
||||||
background: #f6f6f6; |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
padding: 30px; |
|
||||||
font-size: 22px; |
|
||||||
color: #1b344d; |
|
||||||
height: 79px; |
|
||||||
} |
|
||||||
|
|
||||||
.notification-modal-message { |
|
||||||
padding: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.notification-modal-message { |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
font-size: 17px; |
|
||||||
color: #1b344d; |
|
||||||
} |
|
||||||
|
|
||||||
.modal-close-x::after { |
|
||||||
content: '\00D7'; |
|
||||||
font-size: 2em; |
|
||||||
color: #9b9b9b; |
|
||||||
position: absolute; |
|
||||||
top: 25px; |
|
||||||
right: 17.5px; |
|
||||||
font-family: sans-serif; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.notification-modal__wrapper { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: flex-start; |
|
||||||
align-items: center; |
|
||||||
position: relative; |
|
||||||
border: 1px solid #dedede; |
|
||||||
box-shadow: 0 0 2px 2px #dedede; |
|
||||||
font-family: Roboto; |
|
||||||
} |
|
||||||
|
|
||||||
.notification-modal__header { |
|
||||||
background: #f6f6f6; |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
padding: 30px; |
|
||||||
font-size: 22px; |
|
||||||
color: #1b344d; |
|
||||||
height: 79px; |
|
||||||
} |
|
||||||
|
|
||||||
.notification-modal__message { |
|
||||||
padding: 20px; |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
font-size: 17px; |
|
||||||
color: #1b344d; |
|
||||||
} |
|
||||||
|
|
||||||
.notification-modal__buttons { |
|
||||||
display: flex; |
|
||||||
justify-content: space-evenly; |
|
||||||
width: 100%; |
|
||||||
margin-bottom: 24px; |
|
||||||
padding: 0px 42px; |
|
||||||
} |
|
||||||
|
|
||||||
.notification-modal__buttons__btn { |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.notification-modal__link { |
|
||||||
color: #2f9ae0; |
|
||||||
} |
|
||||||
@ -1,306 +0,0 @@ |
|||||||
/* color */ |
|
||||||
|
|
||||||
.color-orange { |
|
||||||
color: #F7861C; |
|
||||||
} |
|
||||||
|
|
||||||
.color-forest { |
|
||||||
color: #0A5448; |
|
||||||
} |
|
||||||
|
|
||||||
/* lib */ |
|
||||||
|
|
||||||
.full-width { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.full-height { |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-column { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
.space-between { |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.space-around { |
|
||||||
justify-content: space-around; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-column-bottom { |
|
||||||
display: flex; |
|
||||||
flex-direction: column-reverse; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-space-between { |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-space-around { |
|
||||||
justify-content: space-around; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-right { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
justify-content: flex-end; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-left { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
justify-content: flex-start; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-fixed { |
|
||||||
flex: none; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-basis-auto { |
|
||||||
flex-basis: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-grow { |
|
||||||
flex: 1 1 auto; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-wrap { |
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-center { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-justify-center { |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-align-center { |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-self-end { |
|
||||||
align-self: flex-end; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-self-stretch { |
|
||||||
align-self: stretch; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-vertical { |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
.z-bump { |
|
||||||
z-index: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.select-none { |
|
||||||
cursor: inherit; |
|
||||||
-moz-user-select: none; |
|
||||||
-webkit-user-select: none; |
|
||||||
-ms-user-select: none; |
|
||||||
user-select: none; |
|
||||||
} |
|
||||||
|
|
||||||
.pointer { |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.cursor-pointer { |
|
||||||
cursor: pointer; |
|
||||||
transform-origin: center center; |
|
||||||
transition: transform 50ms ease-in-out; |
|
||||||
} |
|
||||||
.cursor-pointer:hover { |
|
||||||
transform: scale(1.1); |
|
||||||
} |
|
||||||
.cursor-pointer:active { |
|
||||||
transform: scale(0.95); |
|
||||||
} |
|
||||||
|
|
||||||
.cursor-disabled { |
|
||||||
cursor: not-allowed; |
|
||||||
} |
|
||||||
|
|
||||||
.margin-bottom-sml { |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.margin-bottom-med { |
|
||||||
margin-bottom: 40px; |
|
||||||
} |
|
||||||
|
|
||||||
.margin-right-left { |
|
||||||
margin: 0 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.bold { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
.text-transform-uppercase { |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
|
|
||||||
.font-small { |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.font-medium { |
|
||||||
font-size: 1.2em; |
|
||||||
} |
|
||||||
|
|
||||||
hr.horizontal-line { |
|
||||||
display: block; |
|
||||||
height: 1px; |
|
||||||
border: 0; |
|
||||||
border-top: 1px solid #ccc; |
|
||||||
margin: 1em 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.hover-white:hover { |
|
||||||
background: white; |
|
||||||
} |
|
||||||
|
|
||||||
.red-dot { |
|
||||||
background: #E91550; |
|
||||||
color: white; |
|
||||||
border-radius: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.diamond { |
|
||||||
transform: rotate(45deg); |
|
||||||
background: #038789; |
|
||||||
} |
|
||||||
|
|
||||||
.hollow-diamond { |
|
||||||
transform: rotate(45deg); |
|
||||||
border: 3px solid #690496; |
|
||||||
} |
|
||||||
|
|
||||||
.golden-square { |
|
||||||
background: #EBB33F; |
|
||||||
} |
|
||||||
|
|
||||||
.pending-dot { |
|
||||||
background: red; |
|
||||||
left: 14px; |
|
||||||
top: 14px; |
|
||||||
color: white; |
|
||||||
border-radius: 10px; |
|
||||||
height: 20px; |
|
||||||
min-width: 20px; |
|
||||||
position: relative; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
padding: 4px; |
|
||||||
z-index: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.keyring-label { |
|
||||||
z-index: 1; |
|
||||||
font-size: 11px; |
|
||||||
background: rgba(255,0,0,0.8); |
|
||||||
color: white; |
|
||||||
bottom: 0px; |
|
||||||
left: -18px; |
|
||||||
border-radius: 10px; |
|
||||||
height: 20px; |
|
||||||
min-width: 20px; |
|
||||||
position: absolute; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
padding: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.ether-balance { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.tabSection { |
|
||||||
min-width: 350px; |
|
||||||
} |
|
||||||
|
|
||||||
.menu-icon { |
|
||||||
display: inline-block; |
|
||||||
height: 12px; |
|
||||||
min-width: 12px; |
|
||||||
margin: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
i.fa.fa-question-circle.fa-lg.menu-icon { |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
|
|
||||||
.ether-icon { |
|
||||||
background: rgb(0, 163, 68); |
|
||||||
border-radius: 20px; |
|
||||||
} |
|
||||||
.testnet-icon { |
|
||||||
background: #2465E1; |
|
||||||
} |
|
||||||
|
|
||||||
.drop-menu-item { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.invisible { |
|
||||||
visibility: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.one-line-concat { |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
|
|
||||||
.critical-error { |
|
||||||
text-align: center; |
|
||||||
margin-top: 20px; |
|
||||||
color: red; |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
Hacky breakpoint fix for account + tab sections |
|
||||||
Resolves issue from @frankiebee in |
|
||||||
https://github.com/MetaMask/metamask-extension/pull/1835 |
|
||||||
Please remove this when integrating new designs |
|
||||||
*/ |
|
||||||
|
|
||||||
@media screen and (min-width: 575px) and (max-width: 800px) { |
|
||||||
.account-data-subsection { |
|
||||||
flex: 0 0 auto !important; // reset flex |
|
||||||
margin-left: 10px !important; // create additional horizontal space |
|
||||||
margin-right: 10px !important; |
|
||||||
width: 40%; |
|
||||||
} |
|
||||||
|
|
||||||
.tabSection { |
|
||||||
flex: 0 0 auto !important; |
|
||||||
margin-left: 10px !important; |
|
||||||
margin-right: 10px !important; |
|
||||||
min-width: 285px; |
|
||||||
width: 49%; |
|
||||||
} |
|
||||||
|
|
||||||
.name-label { |
|
||||||
width: 80%; |
|
||||||
} |
|
||||||
} |
|
||||||
File diff suppressed because one or more lines are too long
@ -1,48 +0,0 @@ |
|||||||
/* http://meyerweb.com/eric/tools/css/reset/ |
|
||||||
v2.0 | 20110126 |
|
||||||
License: none (public domain) |
|
||||||
*/ |
|
||||||
|
|
||||||
html, body, div, span, applet, object, iframe, |
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|
||||||
a, abbr, acronym, address, big, cite, code, |
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp, |
|
||||||
small, strike, strong, sub, sup, tt, var, |
|
||||||
b, u, i, center, |
|
||||||
dl, dt, dd, ol, ul, li, |
|
||||||
fieldset, form, label, legend, |
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td, |
|
||||||
article, aside, canvas, details, embed, |
|
||||||
figure, figcaption, footer, header, hgroup, |
|
||||||
menu, nav, output, ruby, section, summary, |
|
||||||
time, mark, audio, video { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
border: 0; |
|
||||||
font-size: 100%; |
|
||||||
font: inherit; |
|
||||||
vertical-align: baseline; |
|
||||||
} |
|
||||||
/* HTML5 display-role reset for older browsers */ |
|
||||||
article, aside, details, figcaption, figure, |
|
||||||
footer, header, hgroup, menu, nav, section { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
body { |
|
||||||
line-height: 1; |
|
||||||
} |
|
||||||
ol, ul { |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
blockquote, q { |
|
||||||
quotes: none; |
|
||||||
} |
|
||||||
blockquote:before, blockquote:after, |
|
||||||
q:before, q:after { |
|
||||||
content: ''; |
|
||||||
content: none; |
|
||||||
} |
|
||||||
table { |
|
||||||
border-collapse: collapse; |
|
||||||
border-spacing: 0; |
|
||||||
} |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
/* universal */ |
|
||||||
.app-primary .main-enter { |
|
||||||
position: absolute; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
/* center position */ |
|
||||||
.app-primary.from-right .main-enter-active, |
|
||||||
.app-primary.from-left .main-enter-active { |
|
||||||
overflow-x: hidden; |
|
||||||
transform: translateX(0px); |
|
||||||
transition: transform 300ms ease-in; |
|
||||||
} |
|
||||||
|
|
||||||
/* exited positions */ |
|
||||||
.app-primary.from-left .main-leave-active { |
|
||||||
transform: translateX(360px); |
|
||||||
transition: transform 300ms ease-in; |
|
||||||
} |
|
||||||
.app-primary.from-right .main-leave-active { |
|
||||||
transform: translateX(-360px); |
|
||||||
transition: transform 300ms ease-in; |
|
||||||
} |
|
||||||
|
|
||||||
/* loader transitions */ |
|
||||||
.loader-enter, .loader-leave-active { |
|
||||||
opacity: 0.0; |
|
||||||
transition: opacity 150 ease-in; |
|
||||||
} |
|
||||||
.loader-enter-active, .loader-leave { |
|
||||||
opacity: 1.0; |
|
||||||
transition: opacity 150 ease-in; |
|
||||||
} |
|
||||||
|
|
||||||
/* entering positions */ |
|
||||||
.app-primary.from-right .main-enter:not(.main-enter-active) { |
|
||||||
transform: translateX(360px); |
|
||||||
} |
|
||||||
.app-primary.from-left .main-enter:not(.main-enter-active) { |
|
||||||
transform: translateX(-360px); |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,179 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const EventEmitter = require('events').EventEmitter |
|
||||||
const Component = require('react').Component |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const Mascot = require('../components/mascot') |
|
||||||
const actions = require('../../../ui/app/actions') |
|
||||||
const Tooltip = require('../components/tooltip') |
|
||||||
const getCaretCoordinates = require('textarea-caret') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(InitializeMenuScreen) |
|
||||||
|
|
||||||
inherits(InitializeMenuScreen, Component) |
|
||||||
function InitializeMenuScreen () { |
|
||||||
Component.call(this) |
|
||||||
this.animationEventEmitter = new EventEmitter() |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
// state from plugin
|
|
||||||
currentView: state.appState.currentView, |
|
||||||
warning: state.appState.warning, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
InitializeMenuScreen.prototype.render = function () { |
|
||||||
var state = this.props |
|
||||||
|
|
||||||
switch (state.currentView.name) { |
|
||||||
|
|
||||||
default: |
|
||||||
return this.renderMenu(state) |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// InitializeMenuScreen.prototype.componentDidMount = function(){
|
|
||||||
// document.getElementById('password-box').focus()
|
|
||||||
// }
|
|
||||||
|
|
||||||
InitializeMenuScreen.prototype.renderMenu = function (state) { |
|
||||||
return ( |
|
||||||
|
|
||||||
h('.initialize-screen.flex-column.flex-center.flex-grow', [ |
|
||||||
|
|
||||||
h(Mascot, { |
|
||||||
animationEventEmitter: this.animationEventEmitter, |
|
||||||
}), |
|
||||||
|
|
||||||
h('h1', { |
|
||||||
style: { |
|
||||||
fontSize: '1.3em', |
|
||||||
textTransform: 'uppercase', |
|
||||||
color: '#7F8082', |
|
||||||
marginBottom: 10, |
|
||||||
}, |
|
||||||
}, 'MetaMask'), |
|
||||||
|
|
||||||
|
|
||||||
h('div', [ |
|
||||||
h('h3', { |
|
||||||
style: { |
|
||||||
fontSize: '0.8em', |
|
||||||
color: '#7F8082', |
|
||||||
display: 'inline', |
|
||||||
}, |
|
||||||
}, 'Encrypt your new DEN'), |
|
||||||
|
|
||||||
h(Tooltip, { |
|
||||||
title: 'Your DEN is your password-encrypted storage within MetaMask.', |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-question-circle.pointer', { |
|
||||||
style: { |
|
||||||
fontSize: '18px', |
|
||||||
position: 'relative', |
|
||||||
color: 'rgb(247, 134, 28)', |
|
||||||
top: '2px', |
|
||||||
marginLeft: '4px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
h('span.in-progress-notification', state.warning), |
|
||||||
|
|
||||||
// password
|
|
||||||
h('input.large-input.letter-spacey', { |
|
||||||
type: 'password', |
|
||||||
id: 'password-box', |
|
||||||
placeholder: 'New Password (min 8 chars)', |
|
||||||
onInput: this.inputChanged.bind(this), |
|
||||||
style: { |
|
||||||
width: 260, |
|
||||||
marginTop: 12, |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
// confirm password
|
|
||||||
h('input.large-input.letter-spacey', { |
|
||||||
type: 'password', |
|
||||||
id: 'password-box-confirm', |
|
||||||
placeholder: 'Confirm Password', |
|
||||||
onKeyPress: this.createVaultOnEnter.bind(this), |
|
||||||
onInput: this.inputChanged.bind(this), |
|
||||||
style: { |
|
||||||
width: 260, |
|
||||||
marginTop: 16, |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
|
|
||||||
h('button.primary', { |
|
||||||
onClick: this.createNewVaultAndKeychain.bind(this), |
|
||||||
style: { |
|
||||||
margin: 12, |
|
||||||
}, |
|
||||||
}, 'Create'), |
|
||||||
|
|
||||||
h('.flex-row.flex-center.flex-grow', [ |
|
||||||
h('p.pointer', { |
|
||||||
onClick: this.showRestoreVault.bind(this), |
|
||||||
style: { |
|
||||||
fontSize: '0.8em', |
|
||||||
color: 'rgb(247, 134, 28)', |
|
||||||
textDecoration: 'underline', |
|
||||||
}, |
|
||||||
}, 'Import Existing DEN'), |
|
||||||
]), |
|
||||||
|
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
InitializeMenuScreen.prototype.createVaultOnEnter = function (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
event.preventDefault() |
|
||||||
this.createNewVaultAndKeychain() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
InitializeMenuScreen.prototype.componentDidMount = function () { |
|
||||||
document.getElementById('password-box').focus() |
|
||||||
} |
|
||||||
|
|
||||||
InitializeMenuScreen.prototype.showRestoreVault = function () { |
|
||||||
this.props.dispatch(actions.showRestoreVault()) |
|
||||||
} |
|
||||||
|
|
||||||
InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () { |
|
||||||
var passwordBox = document.getElementById('password-box') |
|
||||||
var password = passwordBox.value |
|
||||||
var passwordConfirmBox = document.getElementById('password-box-confirm') |
|
||||||
var passwordConfirm = passwordConfirmBox.value |
|
||||||
|
|
||||||
if (password.length < 8) { |
|
||||||
this.warning = 'password not long enough' |
|
||||||
this.props.dispatch(actions.displayWarning(this.warning)) |
|
||||||
return |
|
||||||
} |
|
||||||
if (password !== passwordConfirm) { |
|
||||||
this.warning = 'passwords don\'t match' |
|
||||||
this.props.dispatch(actions.displayWarning(this.warning)) |
|
||||||
return |
|
||||||
} |
|
||||||
|
|
||||||
this.props.dispatch(actions.createNewVaultAndKeychain(password)) |
|
||||||
} |
|
||||||
|
|
||||||
InitializeMenuScreen.prototype.inputChanged = function (event) { |
|
||||||
// tell mascot to look at page action
|
|
||||||
var element = event.target |
|
||||||
var boundingRect = element.getBoundingClientRect() |
|
||||||
var coordinates = getCaretCoordinates(element, element.selectionEnd) |
|
||||||
this.animationEventEmitter.emit('point', { |
|
||||||
x: boundingRect.left + coordinates.left - element.scrollLeft, |
|
||||||
y: boundingRect.top + coordinates.top - element.scrollTop, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 380 KiB |
@ -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('../../ui/app/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://support.metamask.io', |
|
||||||
target: '_blank', |
|
||||||
}, 'Visit our Support Center'), |
|
||||||
]), |
|
||||||
|
|
||||||
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:help@metamask.io?subject=Feedback', |
|
||||||
}, 'Email us!'), |
|
||||||
]), |
|
||||||
]), |
|
||||||
]), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
InfoScreen.prototype.navigateTo = function (url) { |
|
||||||
global.platform.openWindow({ url }) |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,653 +0,0 @@ |
|||||||
{ |
|
||||||
"objects": [ |
|
||||||
{ |
|
||||||
"symbol": "ethaud", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "aud", |
|
||||||
"name": "Australian Dollar" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethhkd", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "hkd", |
|
||||||
"name": "Hong Kong Dollar" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethsgd", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "sgd", |
|
||||||
"name": "Singapore Dollar" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethidr", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "idr", |
|
||||||
"name": "Indonesian Rupiah" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethphp", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "php", |
|
||||||
"name": "Philippine Peso" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "eth1st", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "1st", |
|
||||||
"name": "FirstBlood" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethadt", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "adt", |
|
||||||
"name": "adToken" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethadx", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "adx", |
|
||||||
"name": "AdEx" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethant", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "ant", |
|
||||||
"name": "Aragon" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethbat", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "bat", |
|
||||||
"name": "Basic Attention Token" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethbnt", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "bnt", |
|
||||||
"name": "Bancor" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethbtc", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "btc", |
|
||||||
"name": "Bitcoin" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethcad", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "cad", |
|
||||||
"name": "Canadian Dollar" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethcfi", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "cfi", |
|
||||||
"name": "Cofound.it" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethcrb", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "crb", |
|
||||||
"name": "CreditBit" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethcvc", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "cvc", |
|
||||||
"name": "Civic" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethdash", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "dash", |
|
||||||
"name": "Dash" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethdgd", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "dgd", |
|
||||||
"name": "DigixDAO" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethetc", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "etc", |
|
||||||
"name": "Ethereum Classic" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "etheur", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "eur", |
|
||||||
"name": "Euro" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethfun", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "fun", |
|
||||||
"name": "FunFair" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethgbp", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "gbp", |
|
||||||
"name": "Pound Sterling" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethgno", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "gno", |
|
||||||
"name": "Gnosis" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethgnt", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "gnt", |
|
||||||
"name": "Golem" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethgup", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "gup", |
|
||||||
"name": "Matchpool" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethhmq", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "hmq", |
|
||||||
"name": "Humaniq" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethjpy", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "jpy", |
|
||||||
"name": "Japanese Yen" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethlgd", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "lgd", |
|
||||||
"name": "Legends Room" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethlsk", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "lsk", |
|
||||||
"name": "Lisk" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethltc", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "ltc", |
|
||||||
"name": "Litecoin" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethlun", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "lun", |
|
||||||
"name": "Lunyr" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethmco", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "mco", |
|
||||||
"name": "Monaco" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethmtl", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "mtl", |
|
||||||
"name": "Metal" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethmyst", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "myst", |
|
||||||
"name": "Mysterium" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethnmr", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "nmr", |
|
||||||
"name": "Numeraire" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethomg", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "omg", |
|
||||||
"name": "OmiseGO" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethpay", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "pay", |
|
||||||
"name": "TenX" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethptoy", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "ptoy", |
|
||||||
"name": "Patientory" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethqrl", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "qrl", |
|
||||||
"name": "Quantum-Resistant Ledger" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethqtum", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "qtum", |
|
||||||
"name": "Qtum" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethrep", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "rep", |
|
||||||
"name": "Augur" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethrlc", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "rlc", |
|
||||||
"name": "iEx.ec" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethrub", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "rub", |
|
||||||
"name": "Russian Ruble" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethsc", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "sc", |
|
||||||
"name": "Siacoin" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethsngls", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "sngls", |
|
||||||
"name": "SingularDTV" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethsnt", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "snt", |
|
||||||
"name": "Status" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethsteem", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "steem", |
|
||||||
"name": "Steem" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethstorj", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "storj", |
|
||||||
"name": "Storj" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethtime", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "time", |
|
||||||
"name": "ChronoBank" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethtkn", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "tkn", |
|
||||||
"name": "TokenCard" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethtrst", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "trst", |
|
||||||
"name": "WeTrust" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethuah", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "uah", |
|
||||||
"name": "Ukrainian Hryvnia" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethusd", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "usd", |
|
||||||
"name": "United States Dollar" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethwings", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "wings", |
|
||||||
"name": "Wings" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethxem", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "xem", |
|
||||||
"name": "NEM" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethxlm", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "xlm", |
|
||||||
"name": "Stellar Lumen" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethxmr", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "xmr", |
|
||||||
"name": "Monero" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethxrp", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "xrp", |
|
||||||
"name": "Ripple" |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
"symbol": "ethzec", |
|
||||||
"base": { |
|
||||||
"code": "eth", |
|
||||||
"name": "Ethereum" |
|
||||||
}, |
|
||||||
"quote": { |
|
||||||
"code": "zec", |
|
||||||
"name": "Zcash" |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,91 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const Component = require('react').Component |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const actions = require('../../../../ui/app/actions') |
|
||||||
const exportAsFile = require('../../util').exportAsFile |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(CreateVaultCompleteScreen) |
|
||||||
|
|
||||||
inherits(CreateVaultCompleteScreen, Component) |
|
||||||
function CreateVaultCompleteScreen () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
seed: state.appState.currentView.seedWords, |
|
||||||
cachedSeed: state.metamask.seedWords, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
CreateVaultCompleteScreen.prototype.render = function () { |
|
||||||
var state = this.props |
|
||||||
var seed = state.seed || state.cachedSeed || '' |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('.initialize-screen.flex-column.flex-center.flex-grow', [ |
|
||||||
|
|
||||||
// // subtitle and nav
|
|
||||||
// h('.section-title.flex-row.flex-center', [
|
|
||||||
// h('h2.page-subtitle', 'Vault Created'),
|
|
||||||
// ]),
|
|
||||||
|
|
||||||
h('h3.flex-center.text-transform-uppercase', { |
|
||||||
style: { |
|
||||||
background: '#EBEBEB', |
|
||||||
color: '#AEAEAE', |
|
||||||
marginTop: 36, |
|
||||||
marginBottom: 8, |
|
||||||
width: '100%', |
|
||||||
fontSize: '20px', |
|
||||||
padding: 6, |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'Vault Created', |
|
||||||
]), |
|
||||||
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
fontSize: '1em', |
|
||||||
marginTop: '10px', |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('textarea.twelve-word-phrase', { |
|
||||||
readOnly: true, |
|
||||||
value: seed, |
|
||||||
}), |
|
||||||
|
|
||||||
h('button.primary', { |
|
||||||
onClick: () => this.confirmSeedWords() |
|
||||||
.then(account => this.showAccountDetail(account)), |
|
||||||
style: { |
|
||||||
margin: '24px', |
|
||||||
fontSize: '0.9em', |
|
||||||
marginBottom: '10px', |
|
||||||
}, |
|
||||||
}, 'I\'ve copied it somewhere safe'), |
|
||||||
|
|
||||||
h('button.primary', { |
|
||||||
onClick: () => exportAsFile(`MetaMask Seed Words`, seed), |
|
||||||
style: { |
|
||||||
margin: '10px', |
|
||||||
fontSize: '0.9em', |
|
||||||
}, |
|
||||||
}, 'Save Seed Words As File'), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
CreateVaultCompleteScreen.prototype.confirmSeedWords = function () { |
|
||||||
return this.props.dispatch(actions.confirmSeedWords()) |
|
||||||
} |
|
||||||
|
|
||||||
CreateVaultCompleteScreen.prototype.showAccountDetail = function (account) { |
|
||||||
return this.props.dispatch(actions.showAccountDetail(account)) |
|
||||||
} |
|
||||||
@ -1,121 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
|
|
||||||
const Component = require('react').Component |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const actions = require('../../../../../ui/app/actions') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(RevealSeedConfirmation) |
|
||||||
|
|
||||||
inherits(RevealSeedConfirmation, Component) |
|
||||||
function RevealSeedConfirmation () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
warning: state.appState.warning, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
RevealSeedConfirmation.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('.initialize-screen.flex-column.flex-center.flex-grow', { |
|
||||||
style: { maxWidth: '420px' }, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('h3.flex-center.text-transform-uppercase', { |
|
||||||
style: { |
|
||||||
background: '#EBEBEB', |
|
||||||
color: '#AEAEAE', |
|
||||||
marginBottom: 24, |
|
||||||
width: '100%', |
|
||||||
fontSize: '20px', |
|
||||||
padding: 6, |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'Reveal Seed Words', |
|
||||||
]), |
|
||||||
|
|
||||||
h('.div', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
flexDirection: 'column', |
|
||||||
padding: '20px', |
|
||||||
justifyContent: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'), |
|
||||||
|
|
||||||
// confirmation
|
|
||||||
h('input.large-input.letter-spacey', { |
|
||||||
type: 'password', |
|
||||||
id: 'password-box', |
|
||||||
placeholder: 'Enter your password to confirm', |
|
||||||
onKeyPress: this.checkConfirmation.bind(this), |
|
||||||
style: { |
|
||||||
width: 260, |
|
||||||
marginTop: '12px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
h('.flex-row.flex-start', { |
|
||||||
style: { |
|
||||||
marginTop: 30, |
|
||||||
width: '50%', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
// cancel
|
|
||||||
h('button.primary', { |
|
||||||
onClick: this.goHome.bind(this), |
|
||||||
}, 'CANCEL'), |
|
||||||
|
|
||||||
// submit
|
|
||||||
h('button.primary', { |
|
||||||
style: { marginLeft: '10px' }, |
|
||||||
onClick: this.revealSeedWords.bind(this), |
|
||||||
}, 'OK'), |
|
||||||
|
|
||||||
]), |
|
||||||
|
|
||||||
(props.warning) && ( |
|
||||||
h('span.error', { |
|
||||||
style: { |
|
||||||
margin: '20px', |
|
||||||
}, |
|
||||||
}, props.warning.split('-')) |
|
||||||
), |
|
||||||
|
|
||||||
props.inProgress && ( |
|
||||||
h('span.in-progress-notification', 'Generating Seed...') |
|
||||||
), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
RevealSeedConfirmation.prototype.componentDidMount = function () { |
|
||||||
document.getElementById('password-box').focus() |
|
||||||
} |
|
||||||
|
|
||||||
RevealSeedConfirmation.prototype.goHome = function () { |
|
||||||
this.props.dispatch(actions.showConfigPage(false)) |
|
||||||
} |
|
||||||
|
|
||||||
// create vault
|
|
||||||
|
|
||||||
RevealSeedConfirmation.prototype.checkConfirmation = function (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
event.preventDefault() |
|
||||||
this.revealSeedWords() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
RevealSeedConfirmation.prototype.revealSeedWords = function () { |
|
||||||
var password = document.getElementById('password-box').value |
|
||||||
this.props.dispatch(actions.requestRevealSeed(password)) |
|
||||||
} |
|
||||||
@ -1,162 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const PersistentForm = require('../../../lib/persistent-form') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const actions = require('../../../../ui/app/actions') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(RestoreVaultScreen) |
|
||||||
|
|
||||||
inherits(RestoreVaultScreen, PersistentForm) |
|
||||||
function RestoreVaultScreen () { |
|
||||||
PersistentForm.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
warning: state.appState.warning, |
|
||||||
forgottenPassword: state.appState.forgottenPassword, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
RestoreVaultScreen.prototype.render = function () { |
|
||||||
var state = this.props |
|
||||||
this.persistentFormParentId = 'restore-vault-form' |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('.initialize-screen.flex-column.flex-center.flex-grow', [ |
|
||||||
|
|
||||||
h('h3.flex-center.text-transform-uppercase', { |
|
||||||
style: { |
|
||||||
background: '#EBEBEB', |
|
||||||
color: '#AEAEAE', |
|
||||||
marginBottom: 24, |
|
||||||
width: '100%', |
|
||||||
fontSize: '20px', |
|
||||||
padding: 6, |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'Restore Vault', |
|
||||||
]), |
|
||||||
|
|
||||||
// wallet seed entry
|
|
||||||
h('h3', 'Wallet Seed'), |
|
||||||
h('textarea.twelve-word-phrase.letter-spacey', { |
|
||||||
placeholder: 'Enter your secret twelve word phrase here to restore your vault.', |
|
||||||
}), |
|
||||||
|
|
||||||
// password
|
|
||||||
h('input.large-input.letter-spacey', { |
|
||||||
type: 'password', |
|
||||||
id: 'password-box', |
|
||||||
placeholder: 'New Password (min 8 chars)', |
|
||||||
dataset: { |
|
||||||
persistentFormId: 'password', |
|
||||||
}, |
|
||||||
style: { |
|
||||||
width: 260, |
|
||||||
marginTop: 12, |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
// confirm password
|
|
||||||
h('input.large-input.letter-spacey', { |
|
||||||
type: 'password', |
|
||||||
id: 'password-box-confirm', |
|
||||||
placeholder: 'Confirm Password', |
|
||||||
onKeyPress: this.createOnEnter.bind(this), |
|
||||||
dataset: { |
|
||||||
persistentFormId: 'password-confirmation', |
|
||||||
}, |
|
||||||
style: { |
|
||||||
width: 260, |
|
||||||
marginTop: 16, |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
(state.warning) && ( |
|
||||||
h('span.error.in-progress-notification', state.warning) |
|
||||||
), |
|
||||||
|
|
||||||
// submit
|
|
||||||
|
|
||||||
h('.flex-row.flex-space-between', { |
|
||||||
style: { |
|
||||||
marginTop: 30, |
|
||||||
width: '50%', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
// cancel
|
|
||||||
h('button.primary', { |
|
||||||
onClick: this.showInitializeMenu.bind(this), |
|
||||||
}, 'CANCEL'), |
|
||||||
|
|
||||||
// submit
|
|
||||||
h('button.primary', { |
|
||||||
onClick: this.createNewVaultAndRestore.bind(this), |
|
||||||
}, 'OK'), |
|
||||||
|
|
||||||
]), |
|
||||||
]) |
|
||||||
|
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
RestoreVaultScreen.prototype.showInitializeMenu = function () { |
|
||||||
if (this.props.forgottenPassword) { |
|
||||||
this.props.dispatch(actions.backToUnlockView()) |
|
||||||
} else { |
|
||||||
this.props.dispatch(actions.showInitializeMenu()) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
RestoreVaultScreen.prototype.createOnEnter = function (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
this.createNewVaultAndRestore() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { |
|
||||||
// check password
|
|
||||||
var passwordBox = document.getElementById('password-box') |
|
||||||
var password = passwordBox.value |
|
||||||
var passwordConfirmBox = document.getElementById('password-box-confirm') |
|
||||||
var passwordConfirm = passwordConfirmBox.value |
|
||||||
if (password.length < 8) { |
|
||||||
this.warning = 'Password not long enough' |
|
||||||
|
|
||||||
this.props.dispatch(actions.displayWarning(this.warning)) |
|
||||||
return |
|
||||||
} |
|
||||||
if (password !== passwordConfirm) { |
|
||||||
this.warning = 'Passwords don\'t match' |
|
||||||
this.props.dispatch(actions.displayWarning(this.warning)) |
|
||||||
return |
|
||||||
} |
|
||||||
// check seed
|
|
||||||
var seedBox = document.querySelector('textarea.twelve-word-phrase') |
|
||||||
var seed = seedBox.value.trim() |
|
||||||
|
|
||||||
// true if the string has more than a space between words.
|
|
||||||
if (seed.split(' ').length > 1) { |
|
||||||
this.warning = 'there can only be a space between words' |
|
||||||
this.props.dispatch(actions.displayWarning(this.warning)) |
|
||||||
return |
|
||||||
} |
|
||||||
// true if seed contains a character that is not between a-z or a space
|
|
||||||
if (!seed.match(/^[a-z ]+$/)) { |
|
||||||
this.warning = 'seed words only have lowercase characters' |
|
||||||
this.props.dispatch(actions.displayWarning(this.warning)) |
|
||||||
return |
|
||||||
} |
|
||||||
if (seed.split(' ').length !== 12) { |
|
||||||
this.warning = 'seed phrases are 12 words long' |
|
||||||
this.props.dispatch(actions.displayWarning(this.warning)) |
|
||||||
return |
|
||||||
} |
|
||||||
// submit
|
|
||||||
this.warning = null |
|
||||||
this.props.dispatch(actions.displayWarning(this.warning)) |
|
||||||
this.props.dispatch(actions.createNewVaultAndRestore(password, seed)) |
|
||||||
} |
|
||||||
@ -1,29 +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)(NewKeychain) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return {} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(NewKeychain, Component) |
|
||||||
function NewKeychain () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
NewKeychain.prototype.render = function () { |
|
||||||
// const props = this.props
|
|
||||||
|
|
||||||
return ( |
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
background: 'blue', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('h1', `Here's a list!!!!`), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,85 +0,0 @@ |
|||||||
const PropTypes = require('prop-types') |
|
||||||
const {PureComponent} = require('react') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const actions = require('../../ui/app/actions') |
|
||||||
|
|
||||||
module.exports = class NewUiAnnouncement extends PureComponent { |
|
||||||
static propTypes = { |
|
||||||
dispatch: PropTypes.func.isRequired, |
|
||||||
}; |
|
||||||
|
|
||||||
close = async () => { |
|
||||||
await this.props.dispatch(actions.setFeatureFlag('skipAnnounceBetaUI', true)) |
|
||||||
} |
|
||||||
|
|
||||||
switchToNewUi = async () => { |
|
||||||
const flag = 'betaUI' |
|
||||||
const enabled = true |
|
||||||
await this.props.dispatch(actions.setFeatureFlag( |
|
||||||
flag, |
|
||||||
enabled, |
|
||||||
)) |
|
||||||
await this.close() |
|
||||||
global.platform.openExtensionInBrowser() |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
return ( |
|
||||||
h('div.new-ui-announcement', [ |
|
||||||
h('section.new-ui-announcement__announcement-header', [ |
|
||||||
h('h1', 'Announcement'), |
|
||||||
h('a.close', { |
|
||||||
onClick: this.close, |
|
||||||
}, '×'), |
|
||||||
]), |
|
||||||
h('section.new-ui-announcement__body', [ |
|
||||||
h('h1', 'A New Version of MetaMask'), |
|
||||||
h('p', [ |
|
||||||
"We're excited to announce a brand-new version of MetaMask with enhanced features and functionality.", |
|
||||||
]), |
|
||||||
h('div.updates-list', [ |
|
||||||
h('h2', 'Updates include'), |
|
||||||
h('ul', [ |
|
||||||
h('li', 'New user interface'), |
|
||||||
h('li', 'Full-screen mode'), |
|
||||||
h('li', 'Better token support'), |
|
||||||
h('li', 'Better gas controls'), |
|
||||||
h('li', 'Advanced features for developers'), |
|
||||||
h('li', 'New confirmation screens'), |
|
||||||
h('li', 'And more!'), |
|
||||||
]), |
|
||||||
]), |
|
||||||
h('p', [ |
|
||||||
'You can still use the current version of MetaMask. The new version is still in beta, ' + |
|
||||||
'however we encourage you to try it out as we transition into this exciting new update.', |
|
||||||
h('span', { |
|
||||||
dangerouslySetInnerHTML: { |
|
||||||
__html: ' ', |
|
||||||
}, |
|
||||||
}), |
|
||||||
h('a', { |
|
||||||
href: 'https://medium.com/metamask/74dba32cc7f7', |
|
||||||
onClick ({target}) { |
|
||||||
const url = target.href |
|
||||||
global.platform.openWindow({ |
|
||||||
url, |
|
||||||
}) |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'Learn more.', |
|
||||||
]), |
|
||||||
]), |
|
||||||
]), |
|
||||||
h('section.new-ui-announcement__footer', [ |
|
||||||
h('h1', 'Ready to try the new MetaMask?'), |
|
||||||
h('button.positive', { |
|
||||||
onClick: this.switchToNewUi, |
|
||||||
}, 'Try it now'), |
|
||||||
h('button.negative', { |
|
||||||
onClick: this.close, |
|
||||||
}, 'No thanks, maybe later'), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,65 +0,0 @@ |
|||||||
import PropTypes from 'prop-types' |
|
||||||
import React, { Component } from 'react' |
|
||||||
import { approveProviderRequest, rejectProviderRequest } from '../../ui/app/actions' |
|
||||||
import { connect } from 'react-redux' |
|
||||||
class ProviderApproval extends Component { |
|
||||||
render () { |
|
||||||
const { approveProviderRequest, origin, tabID, rejectProviderRequest } = this.props |
|
||||||
return ( |
|
||||||
<div className="flex-column flex-grow"> |
|
||||||
<style dangerouslySetInnerHTML={{__html: ` |
|
||||||
.provider_approval_actions { |
|
||||||
display: flex; |
|
||||||
justify-content: flex-end; |
|
||||||
margin: 14px 25px; |
|
||||||
} |
|
||||||
.provider_approval_actions button { |
|
||||||
margin-left: 10px; |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
.provider_approval_content { |
|
||||||
padding: 0 25px; |
|
||||||
} |
|
||||||
.provider_approval_origin { |
|
||||||
font-weight: bold; |
|
||||||
margin: 14px 0; |
|
||||||
} |
|
||||||
`}} />
|
|
||||||
<div className="section-title flex-row flex-center"> |
|
||||||
<i |
|
||||||
className="fa fa-arrow-left fa-lg cursor-pointer" |
|
||||||
onClick={() => { rejectProviderRequest(tabID) }} /> |
|
||||||
<h2 className="page-subtitle">Web3 API Request</h2> |
|
||||||
</div> |
|
||||||
<div className="provider_approval_content"> |
|
||||||
{"The domain listed below is requesting access to the Ethereum blockchain and to view your current account. Always double check that you're on the correct site before approving access."} |
|
||||||
<div className="provider_approval_origin">{origin}</div> |
|
||||||
</div> |
|
||||||
<div className="provider_approval_actions"> |
|
||||||
<button |
|
||||||
className="btn-green" |
|
||||||
onClick={() => { approveProviderRequest(tabID) }}>APPROVE</button> |
|
||||||
<button |
|
||||||
className="cancel btn-red" |
|
||||||
onClick={() => { rejectProviderRequest(tabID) }}>REJECT</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ProviderApproval.propTypes = { |
|
||||||
approveProviderRequest: PropTypes.func, |
|
||||||
origin: PropTypes.string, |
|
||||||
tabID: PropTypes.string, |
|
||||||
rejectProviderRequest: PropTypes.func, |
|
||||||
} |
|
||||||
|
|
||||||
function mapDispatchToProps (dispatch) { |
|
||||||
return { |
|
||||||
approveProviderRequest: tabID => dispatch(approveProviderRequest(tabID)), |
|
||||||
rejectProviderRequest: tabID => dispatch(rejectProviderRequest(tabID)), |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = connect(null, mapDispatchToProps)(ProviderApproval) |
|
||||||
@ -1,309 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const PersistentForm = require('../lib/persistent-form') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const Identicon = require('./components/identicon') |
|
||||||
const actions = require('../../ui/app/actions') |
|
||||||
const util = require('./util') |
|
||||||
const numericBalance = require('./util').numericBalance |
|
||||||
const addressSummary = require('./util').addressSummary |
|
||||||
const isHex = require('./util').isHex |
|
||||||
const EthBalance = require('./components/eth-balance') |
|
||||||
const EnsInput = require('./components/ens-input') |
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
module.exports = connect(mapStateToProps)(SendTransactionScreen) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
var result = { |
|
||||||
address: state.metamask.selectedAddress, |
|
||||||
accounts: state.metamask.accounts, |
|
||||||
identities: state.metamask.identities, |
|
||||||
warning: state.appState.warning, |
|
||||||
network: state.metamask.network, |
|
||||||
addressBook: state.metamask.addressBook, |
|
||||||
conversionRate: state.metamask.conversionRate, |
|
||||||
currentCurrency: state.metamask.currentCurrency, |
|
||||||
} |
|
||||||
|
|
||||||
result.error = result.warning && result.warning.split('.')[0] |
|
||||||
|
|
||||||
result.account = result.accounts[result.address] |
|
||||||
result.identity = result.identities[result.address] |
|
||||||
result.balance = result.account ? numericBalance(result.account.balance) : null |
|
||||||
|
|
||||||
return result |
|
||||||
} |
|
||||||
|
|
||||||
inherits(SendTransactionScreen, PersistentForm) |
|
||||||
function SendTransactionScreen () { |
|
||||||
PersistentForm.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
SendTransactionScreen.prototype.render = function () { |
|
||||||
this.persistentFormParentId = 'send-tx-form' |
|
||||||
|
|
||||||
const props = this.props |
|
||||||
const { |
|
||||||
address, |
|
||||||
account, |
|
||||||
identity, |
|
||||||
network, |
|
||||||
identities, |
|
||||||
addressBook, |
|
||||||
conversionRate, |
|
||||||
currentCurrency, |
|
||||||
} = props |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('.send-screen.flex-column.flex-grow', [ |
|
||||||
|
|
||||||
//
|
|
||||||
// Sender Profile
|
|
||||||
//
|
|
||||||
|
|
||||||
h('.account-data-subsection.flex-row.flex-grow', { |
|
||||||
style: { |
|
||||||
margin: '0 20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
// header - identicon + nav
|
|
||||||
h('.flex-row.flex-space-between', { |
|
||||||
style: { |
|
||||||
marginTop: '15px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
// back button
|
|
||||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { |
|
||||||
onClick: this.back.bind(this), |
|
||||||
}), |
|
||||||
|
|
||||||
// large identicon
|
|
||||||
h('.identicon-wrapper.flex-column.flex-center.select-none', [ |
|
||||||
h(Identicon, { |
|
||||||
diameter: 62, |
|
||||||
address: address, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
// invisible place holder
|
|
||||||
h('i.fa.fa-users.fa-lg.invisible', { |
|
||||||
style: { |
|
||||||
marginTop: '28px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
]), |
|
||||||
|
|
||||||
// account label
|
|
||||||
|
|
||||||
h('.flex-column', { |
|
||||||
style: { |
|
||||||
marginTop: '10px', |
|
||||||
alignItems: 'flex-start', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('h2.font-medium.color-forest.flex-center', { |
|
||||||
style: { |
|
||||||
paddingTop: '8px', |
|
||||||
marginBottom: '8px', |
|
||||||
}, |
|
||||||
}, identity && identity.name), |
|
||||||
|
|
||||||
// address and getter actions
|
|
||||||
h('.flex-row.flex-center', { |
|
||||||
style: { |
|
||||||
marginBottom: '8px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('div', { |
|
||||||
style: { |
|
||||||
lineHeight: '16px', |
|
||||||
}, |
|
||||||
}, addressSummary(address)), |
|
||||||
|
|
||||||
]), |
|
||||||
|
|
||||||
// balance
|
|
||||||
h('.flex-row.flex-center', [ |
|
||||||
|
|
||||||
h(EthBalance, { |
|
||||||
value: account && account.balance, |
|
||||||
conversionRate, |
|
||||||
currentCurrency, |
|
||||||
}), |
|
||||||
|
|
||||||
]), |
|
||||||
]), |
|
||||||
]), |
|
||||||
|
|
||||||
//
|
|
||||||
// Required Fields
|
|
||||||
//
|
|
||||||
|
|
||||||
h('h3.flex-center.text-transform-uppercase', { |
|
||||||
style: { |
|
||||||
background: '#EBEBEB', |
|
||||||
color: '#AEAEAE', |
|
||||||
marginTop: '15px', |
|
||||||
marginBottom: '16px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'Send Transaction', |
|
||||||
]), |
|
||||||
|
|
||||||
// error message
|
|
||||||
props.error && h('span.error.flex-center', props.error), |
|
||||||
|
|
||||||
// 'to' field
|
|
||||||
h('section.flex-row.flex-center', [ |
|
||||||
h(EnsInput, { |
|
||||||
name: 'address', |
|
||||||
placeholder: 'Recipient Address', |
|
||||||
onChange: this.recipientDidChange.bind(this), |
|
||||||
network, |
|
||||||
identities, |
|
||||||
addressBook, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
// 'amount' and send button
|
|
||||||
h('section.flex-row.flex-center', [ |
|
||||||
|
|
||||||
h('input.large-input', { |
|
||||||
name: 'amount', |
|
||||||
placeholder: 'Amount', |
|
||||||
type: 'number', |
|
||||||
style: { |
|
||||||
marginRight: '6px', |
|
||||||
}, |
|
||||||
dataset: { |
|
||||||
persistentFormId: 'tx-amount', |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
h('button.primary', { |
|
||||||
onClick: this.onSubmit.bind(this), |
|
||||||
style: { |
|
||||||
textTransform: 'uppercase', |
|
||||||
}, |
|
||||||
}, 'Next'), |
|
||||||
|
|
||||||
]), |
|
||||||
|
|
||||||
//
|
|
||||||
// Optional Fields
|
|
||||||
//
|
|
||||||
h('h3.flex-center.text-transform-uppercase', { |
|
||||||
style: { |
|
||||||
background: '#EBEBEB', |
|
||||||
color: '#AEAEAE', |
|
||||||
marginTop: '16px', |
|
||||||
marginBottom: '16px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
'Transaction Data (optional)', |
|
||||||
]), |
|
||||||
|
|
||||||
// 'data' field
|
|
||||||
h('section.flex-column.flex-center', [ |
|
||||||
h('input.large-input', { |
|
||||||
name: 'txData', |
|
||||||
placeholder: '0x01234', |
|
||||||
style: { |
|
||||||
width: '100%', |
|
||||||
resize: 'none', |
|
||||||
}, |
|
||||||
dataset: { |
|
||||||
persistentFormId: 'tx-data', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
SendTransactionScreen.prototype.navigateToAccounts = function (event) { |
|
||||||
event.stopPropagation() |
|
||||||
this.props.dispatch(actions.showAccountsPage()) |
|
||||||
} |
|
||||||
|
|
||||||
SendTransactionScreen.prototype.back = function () { |
|
||||||
var address = this.props.address |
|
||||||
this.props.dispatch(actions.backToAccountDetail(address)) |
|
||||||
} |
|
||||||
|
|
||||||
SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickname) { |
|
||||||
this.setState({ |
|
||||||
recipient: recipient, |
|
||||||
nickname: nickname, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
SendTransactionScreen.prototype.onSubmit = function () { |
|
||||||
const state = this.state || {} |
|
||||||
const recipient = state.recipient || document.querySelector('input[name="address"]').value.replace(/^[.\s]+|[.\s]+$/g, '') |
|
||||||
const nickname = state.nickname || ' ' |
|
||||||
const input = document.querySelector('input[name="amount"]').value |
|
||||||
const parts = input.split('') |
|
||||||
|
|
||||||
let message |
|
||||||
|
|
||||||
if (isNaN(input) || input === '') { |
|
||||||
message = 'Invalid ether value.' |
|
||||||
return this.props.dispatch(actions.displayWarning(message)) |
|
||||||
} |
|
||||||
|
|
||||||
if (parts[1]) { |
|
||||||
var decimal = parts[1] |
|
||||||
if (decimal.length > 18) { |
|
||||||
message = 'Ether amount is too precise.' |
|
||||||
return this.props.dispatch(actions.displayWarning(message)) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const value = util.normalizeEthStringToWei(input) |
|
||||||
const txData = document.querySelector('input[name="txData"]').value |
|
||||||
const balance = this.props.balance |
|
||||||
|
|
||||||
if (value.gt(balance)) { |
|
||||||
message = 'Insufficient funds.' |
|
||||||
return this.props.dispatch(actions.displayWarning(message)) |
|
||||||
} |
|
||||||
|
|
||||||
if (input < 0) { |
|
||||||
message = 'Can not send negative amounts of ETH.' |
|
||||||
return this.props.dispatch(actions.displayWarning(message)) |
|
||||||
} |
|
||||||
|
|
||||||
if ((util.isInvalidChecksumAddress(recipient))) { |
|
||||||
message = 'Recipient address checksum is invalid.' |
|
||||||
return this.props.dispatch(actions.displayWarning(message)) |
|
||||||
} |
|
||||||
|
|
||||||
if ((!util.isValidAddress(recipient) && !txData) || (!recipient && !txData)) { |
|
||||||
message = 'Recipient address is invalid.' |
|
||||||
return this.props.dispatch(actions.displayWarning(message)) |
|
||||||
} |
|
||||||
|
|
||||||
if (!isHex(ethUtil.stripHexPrefix(txData)) && txData) { |
|
||||||
message = 'Transaction data must be hex string.' |
|
||||||
return this.props.dispatch(actions.displayWarning(message)) |
|
||||||
} |
|
||||||
|
|
||||||
this.props.dispatch(actions.hideWarning()) |
|
||||||
|
|
||||||
this.props.dispatch(actions.addToAddressBook(recipient, nickname)) |
|
||||||
|
|
||||||
var txParams = { |
|
||||||
from: this.props.address, |
|
||||||
value: '0x' + value.toString(16), |
|
||||||
} |
|
||||||
|
|
||||||
if (recipient) txParams.to = ethUtil.addHexPrefix(recipient) |
|
||||||
if (txData) txParams.data = txData |
|
||||||
|
|
||||||
this.props.dispatch(actions.signTx(txParams)) |
|
||||||
} |
|
||||||
@ -1,59 +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('../../ui/app/actions') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(AppSettingsPage) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return {} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(AppSettingsPage, Component) |
|
||||||
function AppSettingsPage () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
AppSettingsPage.prototype.render = function () { |
|
||||||
return ( |
|
||||||
|
|
||||||
h('.account-detail-section.flex-column.flex-grow', [ |
|
||||||
|
|
||||||
// subtitle and nav
|
|
||||||
h('.flex-row.flex-center', [ |
|
||||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { |
|
||||||
onClick: this.navigateToAccounts.bind(this), |
|
||||||
}), |
|
||||||
h('h2.page-subtitle', 'Settings'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('label', { |
|
||||||
htmlFor: 'settings-rpc-endpoint', |
|
||||||
}, 'RPC Endpoint:'), |
|
||||||
h('input', { |
|
||||||
type: 'url', |
|
||||||
id: 'settings-rpc-endpoint', |
|
||||||
onKeyPress: this.onKeyPress.bind(this), |
|
||||||
}), |
|
||||||
|
|
||||||
]) |
|
||||||
|
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
AppSettingsPage.prototype.componentDidMount = function () { |
|
||||||
document.querySelector('input').focus() |
|
||||||
} |
|
||||||
|
|
||||||
AppSettingsPage.prototype.onKeyPress = function (event) { |
|
||||||
// get submit event
|
|
||||||
if (event.key === 'Enter') { |
|
||||||
// this.submitPassword(event)
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
AppSettingsPage.prototype.navigateToAccounts = function (event) { |
|
||||||
event.stopPropagation() |
|
||||||
this.props.dispatch(actions.showAccountsPage()) |
|
||||||
} |
|
||||||
@ -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,122 +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('../../ui/app/actions') |
|
||||||
const getCaretCoordinates = require('textarea-caret') |
|
||||||
const EventEmitter = require('events').EventEmitter |
|
||||||
|
|
||||||
const Mascot = require('./components/mascot') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(UnlockScreen) |
|
||||||
|
|
||||||
inherits(UnlockScreen, Component) |
|
||||||
function UnlockScreen () { |
|
||||||
Component.call(this) |
|
||||||
this.animationEventEmitter = new EventEmitter() |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
warning: state.appState.warning, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.render = function () { |
|
||||||
const state = this.props |
|
||||||
const warning = state.warning |
|
||||||
return ( |
|
||||||
h('.flex-column', { |
|
||||||
style: { |
|
||||||
width: 'inherit', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('.unlock-screen.flex-column.flex-center.flex-grow', [ |
|
||||||
|
|
||||||
h(Mascot, { |
|
||||||
animationEventEmitter: this.animationEventEmitter, |
|
||||||
}), |
|
||||||
|
|
||||||
h('h1', { |
|
||||||
style: { |
|
||||||
fontSize: '1.4em', |
|
||||||
textTransform: 'uppercase', |
|
||||||
color: '#7F8082', |
|
||||||
}, |
|
||||||
}, 'MetaMask'), |
|
||||||
|
|
||||||
h('input.large-input', { |
|
||||||
type: 'password', |
|
||||||
id: 'password-box', |
|
||||||
placeholder: 'enter password', |
|
||||||
style: { |
|
||||||
|
|
||||||
}, |
|
||||||
onKeyPress: this.onKeyPress.bind(this), |
|
||||||
onInput: this.inputChanged.bind(this), |
|
||||||
}), |
|
||||||
|
|
||||||
h('.error', { |
|
||||||
style: { |
|
||||||
display: warning ? 'block' : 'none', |
|
||||||
padding: '0 20px', |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, warning), |
|
||||||
|
|
||||||
h('button.primary.cursor-pointer', { |
|
||||||
onClick: this.onSubmit.bind(this), |
|
||||||
style: { |
|
||||||
margin: 10, |
|
||||||
}, |
|
||||||
}, 'Log In'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('.flex-row.flex-center.flex-grow', [ |
|
||||||
h('p.pointer', { |
|
||||||
onClick: () => this.props.dispatch(actions.forgotPassword()), |
|
||||||
style: { |
|
||||||
fontSize: '0.8em', |
|
||||||
color: 'rgb(247, 134, 28)', |
|
||||||
textDecoration: 'underline', |
|
||||||
}, |
|
||||||
}, 'Restore from seed phrase'), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.componentDidMount = function () { |
|
||||||
document.getElementById('password-box').focus() |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.onSubmit = function (event) { |
|
||||||
const input = document.getElementById('password-box') |
|
||||||
const password = input.value |
|
||||||
this.props.dispatch(actions.tryUnlockMetamask(password)) |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.onKeyPress = function (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
this.submitPassword(event) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.submitPassword = function (event) { |
|
||||||
var element = event.target |
|
||||||
var password = element.value |
|
||||||
// reset input
|
|
||||||
element.value = '' |
|
||||||
this.props.dispatch(actions.tryUnlockMetamask(password)) |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.inputChanged = function (event) { |
|
||||||
// tell mascot to look at page action
|
|
||||||
var element = event.target |
|
||||||
var boundingRect = element.getBoundingClientRect() |
|
||||||
var coordinates = getCaretCoordinates(element, element.selectionEnd) |
|
||||||
this.animationEventEmitter.emit('point', { |
|
||||||
x: boundingRect.left + coordinates.left - element.scrollLeft, |
|
||||||
y: boundingRect.top + coordinates.top - element.scrollTop, |
|
||||||
}) |
|
||||||
} |
|
||||||
@ -1,241 +0,0 @@ |
|||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
|
|
||||||
var valueTable = { |
|
||||||
wei: '1000000000000000000', |
|
||||||
kwei: '1000000000000000', |
|
||||||
mwei: '1000000000000', |
|
||||||
gwei: '1000000000', |
|
||||||
szabo: '1000000', |
|
||||||
finney: '1000', |
|
||||||
ether: '1', |
|
||||||
kether: '0.001', |
|
||||||
mether: '0.000001', |
|
||||||
gether: '0.000000001', |
|
||||||
tether: '0.000000000001', |
|
||||||
} |
|
||||||
var bnTable = {} |
|
||||||
for (var currency in valueTable) { |
|
||||||
bnTable[currency] = new ethUtil.BN(valueTable[currency], 10) |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = { |
|
||||||
valuesFor: valuesFor, |
|
||||||
addressSummary: addressSummary, |
|
||||||
miniAddressSummary: miniAddressSummary, |
|
||||||
isAllOneCase: isAllOneCase, |
|
||||||
isValidAddress: isValidAddress, |
|
||||||
numericBalance: numericBalance, |
|
||||||
parseBalance: parseBalance, |
|
||||||
formatBalance: formatBalance, |
|
||||||
generateBalanceObject: generateBalanceObject, |
|
||||||
dataSize: dataSize, |
|
||||||
readableDate: readableDate, |
|
||||||
normalizeToWei: normalizeToWei, |
|
||||||
normalizeEthStringToWei: normalizeEthStringToWei, |
|
||||||
normalizeNumberToWei: normalizeNumberToWei, |
|
||||||
valueTable: valueTable, |
|
||||||
bnTable: bnTable, |
|
||||||
isHex: isHex, |
|
||||||
exportAsFile: exportAsFile, |
|
||||||
isInvalidChecksumAddress, |
|
||||||
} |
|
||||||
|
|
||||||
function valuesFor (obj) { |
|
||||||
if (!obj) return [] |
|
||||||
return Object.keys(obj) |
|
||||||
.map(function (key) { return obj[key] }) |
|
||||||
} |
|
||||||
|
|
||||||
function addressSummary (address, firstSegLength = 10, lastSegLength = 4, includeHex = true) { |
|
||||||
if (!address) return '' |
|
||||||
let checked = ethUtil.toChecksumAddress(address) |
|
||||||
if (!includeHex) { |
|
||||||
checked = ethUtil.stripHexPrefix(checked) |
|
||||||
} |
|
||||||
return checked ? checked.slice(0, firstSegLength) + '...' + checked.slice(checked.length - lastSegLength) : '...' |
|
||||||
} |
|
||||||
|
|
||||||
function miniAddressSummary (address) { |
|
||||||
if (!address) return '' |
|
||||||
var checked = ethUtil.toChecksumAddress(address) |
|
||||||
return checked ? checked.slice(0, 4) + '...' + checked.slice(-4) : '...' |
|
||||||
} |
|
||||||
|
|
||||||
function isValidAddress (address) { |
|
||||||
var prefixed = ethUtil.addHexPrefix(address) |
|
||||||
if (address === '0x0000000000000000000000000000000000000000') return false |
|
||||||
return (isAllOneCase(prefixed) && ethUtil.isValidAddress(prefixed)) || ethUtil.isValidChecksumAddress(prefixed) |
|
||||||
} |
|
||||||
|
|
||||||
function isInvalidChecksumAddress (address) { |
|
||||||
var prefixed = ethUtil.addHexPrefix(address) |
|
||||||
if (address === '0x0000000000000000000000000000000000000000') return false |
|
||||||
return !isAllOneCase(prefixed) && !ethUtil.isValidChecksumAddress(prefixed) && ethUtil.isValidAddress(prefixed) |
|
||||||
} |
|
||||||
|
|
||||||
function isAllOneCase (address) { |
|
||||||
if (!address) return true |
|
||||||
var lower = address.toLowerCase() |
|
||||||
var upper = address.toUpperCase() |
|
||||||
return address === lower || address === upper |
|
||||||
} |
|
||||||
|
|
||||||
// Takes wei Hex, returns wei BN, even if input is null
|
|
||||||
function numericBalance (balance) { |
|
||||||
if (!balance) return new ethUtil.BN(0, 16) |
|
||||||
var stripped = ethUtil.stripHexPrefix(balance) |
|
||||||
return new ethUtil.BN(stripped, 16) |
|
||||||
} |
|
||||||
|
|
||||||
// Takes hex, returns [beforeDecimal, afterDecimal]
|
|
||||||
function parseBalance (balance) { |
|
||||||
var beforeDecimal, afterDecimal |
|
||||||
const wei = numericBalance(balance) |
|
||||||
var weiString = wei.toString() |
|
||||||
const trailingZeros = /0+$/ |
|
||||||
|
|
||||||
beforeDecimal = weiString.length > 18 ? weiString.slice(0, weiString.length - 18) : '0' |
|
||||||
afterDecimal = ('000000000000000000' + wei).slice(-18).replace(trailingZeros, '') |
|
||||||
if (afterDecimal === '') { afterDecimal = '0' } |
|
||||||
return [beforeDecimal, afterDecimal] |
|
||||||
} |
|
||||||
|
|
||||||
// Takes wei hex, returns an object with three properties.
|
|
||||||
// Its "formatted" property is what we generally use to render values.
|
|
||||||
function formatBalance (balance, decimalsToKeep, needsParse = true, ticker = 'ETH') { |
|
||||||
var parsed = needsParse ? parseBalance(balance) : balance.split('.') |
|
||||||
var beforeDecimal = parsed[0] |
|
||||||
var afterDecimal = parsed[1] |
|
||||||
var formatted = 'None' |
|
||||||
if (decimalsToKeep === undefined) { |
|
||||||
if (beforeDecimal === '0') { |
|
||||||
if (afterDecimal !== '0') { |
|
||||||
var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits
|
|
||||||
if (sigFigs) { afterDecimal = sigFigs[0] } |
|
||||||
formatted = '0.' + afterDecimal + ` ${ticker}` |
|
||||||
} |
|
||||||
} else { |
|
||||||
formatted = beforeDecimal + '.' + afterDecimal.slice(0, 3) + ` ${ticker}` |
|
||||||
} |
|
||||||
} else { |
|
||||||
afterDecimal += Array(decimalsToKeep).join('0') |
|
||||||
formatted = beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep) + ` ${ticker}` |
|
||||||
} |
|
||||||
return formatted |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
function generateBalanceObject (formattedBalance, decimalsToKeep = 1) { |
|
||||||
var balance = formattedBalance.split(' ')[0] |
|
||||||
var label = formattedBalance.split(' ')[1] |
|
||||||
var beforeDecimal = balance.split('.')[0] |
|
||||||
var afterDecimal = balance.split('.')[1] |
|
||||||
var shortBalance = shortenBalance(balance, decimalsToKeep) |
|
||||||
|
|
||||||
if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') { |
|
||||||
// eslint-disable-next-line eqeqeq
|
|
||||||
if (afterDecimal == 0) { |
|
||||||
balance = '0' |
|
||||||
} else { |
|
||||||
balance = '<1.0e-5' |
|
||||||
} |
|
||||||
} else if (beforeDecimal !== '0') { |
|
||||||
balance = `${beforeDecimal}.${afterDecimal.slice(0, decimalsToKeep)}` |
|
||||||
} |
|
||||||
|
|
||||||
return { balance, label, shortBalance } |
|
||||||
} |
|
||||||
|
|
||||||
function shortenBalance (balance, decimalsToKeep = 1) { |
|
||||||
var truncatedValue |
|
||||||
var convertedBalance = parseFloat(balance) |
|
||||||
if (convertedBalance > 1000000) { |
|
||||||
truncatedValue = (balance / 1000000).toFixed(decimalsToKeep) |
|
||||||
return `${truncatedValue}m` |
|
||||||
} else if (convertedBalance > 1000) { |
|
||||||
truncatedValue = (balance / 1000).toFixed(decimalsToKeep) |
|
||||||
return `${truncatedValue}k` |
|
||||||
} else if (convertedBalance === 0) { |
|
||||||
return '0' |
|
||||||
} else if (convertedBalance < 0.001) { |
|
||||||
return '<0.001' |
|
||||||
} else if (convertedBalance < 1) { |
|
||||||
var stringBalance = convertedBalance.toString() |
|
||||||
if (stringBalance.split('.')[1].length > 3) { |
|
||||||
return convertedBalance.toFixed(3) |
|
||||||
} else { |
|
||||||
return stringBalance |
|
||||||
} |
|
||||||
} else { |
|
||||||
return convertedBalance.toFixed(decimalsToKeep) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function dataSize (data) { |
|
||||||
var size = data ? ethUtil.stripHexPrefix(data).length : 0 |
|
||||||
return size + ' bytes' |
|
||||||
} |
|
||||||
|
|
||||||
// Takes a BN and an ethereum currency name,
|
|
||||||
// returns a BN in wei
|
|
||||||
function normalizeToWei (amount, currency) { |
|
||||||
try { |
|
||||||
return amount.mul(bnTable.wei).div(bnTable[currency]) |
|
||||||
} catch (e) {} |
|
||||||
return amount |
|
||||||
} |
|
||||||
|
|
||||||
function normalizeEthStringToWei (str) { |
|
||||||
const parts = str.split('.') |
|
||||||
let eth = new ethUtil.BN(parts[0], 10).mul(bnTable.wei) |
|
||||||
if (parts[1]) { |
|
||||||
var decimal = parts[1] |
|
||||||
while (decimal.length < 18) { |
|
||||||
decimal += '0' |
|
||||||
} |
|
||||||
const decimalBN = new ethUtil.BN(decimal, 10) |
|
||||||
eth = eth.add(decimalBN) |
|
||||||
} |
|
||||||
return eth |
|
||||||
} |
|
||||||
|
|
||||||
var multiple = new ethUtil.BN('10000', 10) |
|
||||||
function normalizeNumberToWei (n, currency) { |
|
||||||
var enlarged = n * 10000 |
|
||||||
var amount = new ethUtil.BN(String(enlarged), 10) |
|
||||||
return normalizeToWei(amount, currency).div(multiple) |
|
||||||
} |
|
||||||
|
|
||||||
function readableDate (ms) { |
|
||||||
var date = new Date(ms) |
|
||||||
var month = date.getMonth() |
|
||||||
var day = date.getDate() |
|
||||||
var year = date.getFullYear() |
|
||||||
var hours = date.getHours() |
|
||||||
var minutes = '0' + date.getMinutes() |
|
||||||
var seconds = '0' + date.getSeconds() |
|
||||||
|
|
||||||
var dateStr = `${month}/${day}/${year}` |
|
||||||
var time = `${hours}:${minutes.substr(-2)}:${seconds.substr(-2)}` |
|
||||||
return `${dateStr} ${time}` |
|
||||||
} |
|
||||||
|
|
||||||
function isHex (str) { |
|
||||||
return Boolean(str.match(/^(0x)?[0-9a-fA-F]+$/)) |
|
||||||
} |
|
||||||
|
|
||||||
function exportAsFile (filename, data) { |
|
||||||
// source: https://stackoverflow.com/a/33542499 by Ludovic Feltz
|
|
||||||
const blob = new Blob([data], {type: 'text/csv'}) |
|
||||||
if (window.navigator.msSaveOrOpenBlob) { |
|
||||||
window.navigator.msSaveBlob(blob, filename) |
|
||||||
} else { |
|
||||||
const elem = window.document.createElement('a') |
|
||||||
elem.target = '_blank' |
|
||||||
elem.href = window.URL.createObjectURL(blob) |
|
||||||
elem.download = filename |
|
||||||
document.body.appendChild(elem) |
|
||||||
elem.click() |
|
||||||
document.body.removeChild(elem) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,29 +0,0 @@ |
|||||||
const fs = require('fs') |
|
||||||
const path = require('path') |
|
||||||
|
|
||||||
module.exports = bundleCss |
|
||||||
|
|
||||||
var cssFiles = { |
|
||||||
'fonts.css': fs.readFileSync(path.join(__dirname, '/app/css/fonts.css'), 'utf8'), |
|
||||||
'reset.css': fs.readFileSync(path.join(__dirname, '/app/css/reset.css'), 'utf8'), |
|
||||||
'lib.css': fs.readFileSync(path.join(__dirname, '/app/css/lib.css'), 'utf8'), |
|
||||||
'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'), |
|
||||||
'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'), |
|
||||||
'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'), |
|
||||||
'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8'), |
|
||||||
} |
|
||||||
|
|
||||||
function bundleCss () { |
|
||||||
var cssBundle = Object.keys(cssFiles).reduce(function (bundle, fileName) { |
|
||||||
var fileContent = cssFiles[fileName] |
|
||||||
var output = String() |
|
||||||
|
|
||||||
output += '/*========== ' + fileName + ' ==========*/\n\n' |
|
||||||
output += fileContent |
|
||||||
output += '\n\n' |
|
||||||
|
|
||||||
return bundle + output |
|
||||||
}, String()) |
|
||||||
|
|
||||||
return cssBundle |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 244 KiB |
|
Before Width: | Height: | Size: 215 KiB |
|
Before Width: | Height: | Size: 209 KiB |
|
Before Width: | Height: | Size: 247 KiB |
|
Before Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue