mirror of
https://github.com/kremalicious/blowfish.git
synced 2024-06-16 09:03:09 +02:00
154 lines
3.9 KiB
JavaScript
154 lines
3.9 KiB
JavaScript
import React, { PureComponent } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { toDataUrl } from 'ethereum-blockies'
|
|
import posed, { PoseGroup } from 'react-pose'
|
|
import Store from 'electron-store'
|
|
import ethereum_address from 'ethereum-address'
|
|
import { AppContext } from '../../store/createContext'
|
|
import { fadeIn } from '../../components/Animations'
|
|
|
|
const Item = posed.li(fadeIn)
|
|
|
|
const AccountsList = ({ accounts, handleDelete }) => (
|
|
<PoseGroup>
|
|
{accounts.map(account => {
|
|
const identicon = account && toDataUrl(account)
|
|
|
|
return (
|
|
<Item key={account}>
|
|
<div>
|
|
<img className="identicon" src={identicon} alt="Blockies" />
|
|
{account}
|
|
</div>
|
|
|
|
<button
|
|
className="delete"
|
|
onClick={e => handleDelete(e, account)}
|
|
title="Remove account"
|
|
>
|
|
×
|
|
</button>
|
|
</Item>
|
|
)
|
|
})}
|
|
</PoseGroup>
|
|
)
|
|
|
|
AccountsList.propTypes = {
|
|
accounts: PropTypes.array.isRequired,
|
|
handleDelete: PropTypes.func.isRequired
|
|
}
|
|
|
|
const AccountNew = ({ input, handleInputChange, handleSave, accentColor }) => (
|
|
<li>
|
|
<input
|
|
type="text"
|
|
placeholder="0xxxxxxxx"
|
|
value={input}
|
|
onChange={e => handleInputChange(e)}
|
|
className="preference__input"
|
|
/>
|
|
|
|
<button
|
|
className="preference__input__add"
|
|
onClick={e => handleSave(e)}
|
|
style={{ color: accentColor }}
|
|
>
|
|
Add
|
|
</button>
|
|
</li>
|
|
)
|
|
|
|
AccountNew.propTypes = {
|
|
input: PropTypes.string.isRequired,
|
|
handleInputChange: PropTypes.func.isRequired,
|
|
handleSave: PropTypes.func.isRequired,
|
|
accentColor: PropTypes.string.isRequired
|
|
}
|
|
|
|
export default class Accounts extends PureComponent {
|
|
static contextType = AppContext
|
|
|
|
store = new Store()
|
|
|
|
state = { accounts: [], input: '', error: '' }
|
|
|
|
componentDidMount() {
|
|
if (this.store.has('accounts')) {
|
|
this.setState({ accounts: this.store.get('accounts') })
|
|
}
|
|
}
|
|
|
|
handleInputChange = e => {
|
|
this.setState({ input: e.target.value })
|
|
}
|
|
|
|
handleSave = e => {
|
|
e.preventDefault()
|
|
|
|
const { accounts, input } = this.state
|
|
|
|
const isEmpty = input === ''
|
|
const isDuplicate = accounts.includes(input)
|
|
const isAddress = ethereum_address.isAddress(input)
|
|
|
|
if (isEmpty) {
|
|
this.setState({ error: 'Please enter an address.' })
|
|
return
|
|
} else if (isDuplicate) {
|
|
this.setState({ error: 'Address already added. Try another one.' })
|
|
return
|
|
} else if (!isAddress) {
|
|
this.setState({ error: 'Not an Ethereum address. Try another one.' })
|
|
return
|
|
} else {
|
|
const joined = [...accounts, input]
|
|
|
|
this.store.set('accounts', joined)
|
|
this.setState({ accounts: joined, input: '', error: '' })
|
|
this.context.setBalances()
|
|
}
|
|
}
|
|
|
|
handleDelete = (e, account) => {
|
|
e.preventDefault()
|
|
|
|
let array = this.state.accounts
|
|
array = array.filter(item => account !== item)
|
|
|
|
const index = array.indexOf(account)
|
|
if (index > -1) {
|
|
array.splice(index, 1)
|
|
}
|
|
|
|
this.store.set('accounts', array)
|
|
this.setState({ accounts: array })
|
|
this.context.setBalances()
|
|
}
|
|
|
|
render() {
|
|
const { accentColor } = this.context
|
|
const { accounts, input, error } = this.state
|
|
|
|
return (
|
|
<div className="preference box">
|
|
<h2 className="preference__title">Accounts</h2>
|
|
<p className="preference__help">
|
|
Add Ethereum account addresses holding Ocean Tokens.
|
|
</p>
|
|
<ul className="preference__list">
|
|
<AccountsList accounts={accounts} handleDelete={this.handleDelete} />
|
|
|
|
<AccountNew
|
|
input={input}
|
|
handleInputChange={this.handleInputChange}
|
|
accentColor={accentColor}
|
|
handleSave={this.handleSave}
|
|
/>
|
|
</ul>
|
|
{error !== '' && <div className="preference__error">{error}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
}
|