Newer
Older
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
import React, { Component } from 'react';
import { AccountCard, Header } from 'fether-ui';
import { accountsInfo$, withoutLoading } from '@parity/light.js';
import light from '@parity/light.js-react';
accountsInfo: () => accountsInfo$().pipe(withoutLoading())
@observer
class AccountsList extends Component {
handleClick = ({
currentTarget: {
dataset: { address }
}
}) => {
const accountsList = Object.keys(accountsInfo);
<Header
title={<h1>Accounts</h1>}
right={
<div className='window_content'>
<div className='box -scroller'>
<ul className='list'>
{accountsList.length ? (
<ul>
{accountsList.map(address => (
<li
key={address}
data-address={address} // Using data- to avoid creating a new item Component
onClick={this.handleClick}
>
<AccountCard
address={address}
className='-clickable'
name={
accountsInfo &&
accountsInfo[address] &&
(accountsInfo[address].name
? accountsInfo[address].name
: '(No name)')
}
shortAddress
/>
</li>
))}
</ul>
<p className='create-hint'>
Nothing here yet!
<br />
<br />
Click the + icon to add a new account.