Accounts.tsx 1.04 KiB
Newer Older
Andrei Eres's avatar
Andrei Eres committed
import { useStore } from 'nanostores/react'
Andrei Eres's avatar
Andrei Eres committed
import React, { useEffect } from 'react'
Andrei Eres's avatar
Andrei Eres committed
import styled from 'styled-components'
Andrei Eres's avatar
Andrei Eres committed
import Key from '../components/Key'
Andrei Eres's avatar
Andrei Eres committed
import { hierarchy as hierarchyStore } from '../stores/accounts'
Andrei Eres's avatar
Andrei Eres committed
import {
  addHeaderAction,
  importHeaderAction,
  resetHeaderActions,
} from '../stores/headerActions'
Andrei Eres's avatar
Andrei Eres committed
import { BaseProps } from '../types'
Andrei Eres's avatar
Andrei Eres committed
import NoAccounts from './NoAccounts'
Andrei Eres's avatar
Andrei Eres committed

Andrei Eres's avatar
Andrei Eres committed
const Accounts: React.FC<BaseProps> = ({ className }) => {
  const hierarchy = useStore(hierarchyStore)
Andrei Eres's avatar
Andrei Eres committed

Andrei Eres's avatar
Andrei Eres committed
  useEffect(() => {
    if (hierarchy.length > 0) addHeaderAction(importHeaderAction)
    return () => resetHeaderActions()
  }, [hierarchy.length])

Andrei Eres's avatar
Andrei Eres committed
  if (hierarchy.length === 0) return <NoAccounts />
Andrei Eres's avatar
Andrei Eres committed

  return (
Andrei Eres's avatar
Andrei Eres committed
    <div className={className}>
Andrei Eres's avatar
Andrei Eres committed
      <h1>All keys</h1>
      {hierarchy.map((account) => (
        <Key
          address={account.address}
          genesisHash={account.genesisHash}
          name={account.name}
          key={account.address}
        />
Andrei Eres's avatar
Andrei Eres committed
      ))}
    </div>
Andrei Eres's avatar
Andrei Eres committed
  )
}

export default styled(Accounts)`
Andrei Eres's avatar
Andrei Eres committed
  height: 100%;
Andrei Eres's avatar
Andrei Eres committed
`