2019-05-20 22:32:57 +02:00
|
|
|
import React, { PureComponent } from 'react'
|
|
|
|
import ethereum_address from 'ethereum-address'
|
2020-10-10 15:37:05 +02:00
|
|
|
import electron from 'electron'
|
2020-02-09 03:36:19 +01:00
|
|
|
import Store from 'electron-store'
|
2020-02-25 21:28:17 +01:00
|
|
|
import { AppContext } from '../../../store/createContext'
|
2019-09-09 00:13:38 +02:00
|
|
|
import Saved from './Saved'
|
|
|
|
import New from './New'
|
|
|
|
import styles from './index.module.css'
|
2019-05-20 22:32:57 +02:00
|
|
|
|
2020-02-09 17:16:10 +01:00
|
|
|
export default class AccountsList extends PureComponent {
|
2019-05-20 22:32:57 +02:00
|
|
|
static contextType = AppContext
|
|
|
|
|
2020-10-10 15:37:05 +02:00
|
|
|
store = (electron.remote && new Store()) || false
|
2019-05-20 22:32:57 +02:00
|
|
|
|
|
|
|
state = { accounts: [], input: '', error: '' }
|
|
|
|
|
|
|
|
componentDidMount() {
|
2020-10-10 15:37:05 +02:00
|
|
|
if (this.store && this.store.has('accounts')) {
|
2019-05-20 22:32:57 +02:00
|
|
|
this.setState({ accounts: this.store.get('accounts') })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-03-22 00:49:10 +01:00
|
|
|
handleInputChange = (e) => {
|
2019-05-20 22:32:57 +02:00
|
|
|
this.setState({ input: e.target.value })
|
|
|
|
}
|
|
|
|
|
2020-03-22 00:49:10 +01:00
|
|
|
handleSave = (e) => {
|
2019-05-20 22:32:57 +02:00
|
|
|
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) {
|
2019-09-08 21:47:57 +02:00
|
|
|
this.setState({
|
|
|
|
error: 'Not an Ethereum address. Try another one.'
|
|
|
|
})
|
2019-05-20 22:32:57 +02:00
|
|
|
return
|
|
|
|
} else {
|
|
|
|
const joined = [...accounts, input]
|
|
|
|
|
2020-10-10 15:37:05 +02:00
|
|
|
this.store && this.store.set('accounts', joined)
|
2019-05-20 22:32:57 +02:00
|
|
|
this.setState({ accounts: joined, input: '', error: '' })
|
|
|
|
this.context.setBalances()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
handleDelete = (e, account) => {
|
|
|
|
e.preventDefault()
|
|
|
|
|
|
|
|
let array = this.state.accounts
|
2020-03-22 00:49:10 +01:00
|
|
|
array = array.filter((item) => account !== item)
|
2019-05-20 22:32:57 +02:00
|
|
|
|
|
|
|
const index = array.indexOf(account)
|
|
|
|
if (index > -1) {
|
|
|
|
array.splice(index, 1)
|
|
|
|
}
|
|
|
|
|
2020-10-10 15:37:05 +02:00
|
|
|
this.store && this.store.set('accounts', array)
|
2019-05-20 22:32:57 +02:00
|
|
|
this.setState({ accounts: array })
|
|
|
|
this.context.setBalances()
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { accentColor } = this.context
|
|
|
|
const { accounts, input, error } = this.state
|
|
|
|
|
|
|
|
return (
|
2019-09-09 00:13:38 +02:00
|
|
|
<div className={styles.preference}>
|
|
|
|
<h2 className={styles.title}>Accounts</h2>
|
|
|
|
<p className={styles.help}>
|
2019-05-20 22:32:57 +02:00
|
|
|
Add Ethereum account addresses holding Ocean Tokens.
|
|
|
|
</p>
|
2019-09-09 00:13:38 +02:00
|
|
|
<ul className={styles.list}>
|
|
|
|
<Saved accounts={accounts} handleDelete={this.handleDelete} />
|
2019-05-20 22:32:57 +02:00
|
|
|
|
2019-09-09 00:13:38 +02:00
|
|
|
<New
|
2019-05-20 22:32:57 +02:00
|
|
|
input={input}
|
|
|
|
handleInputChange={this.handleInputChange}
|
|
|
|
accentColor={accentColor}
|
|
|
|
handleSave={this.handleSave}
|
|
|
|
/>
|
|
|
|
</ul>
|
2019-09-09 00:13:38 +02:00
|
|
|
{error !== '' && <div className={styles.error}>{error}</div>}
|
2019-05-20 22:32:57 +02:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|