Key.tsx 1.32 KiB
Newer Older
Andrei Eres's avatar
Andrei Eres committed
import React, { useEffect } from 'react'
Andrei Eres's avatar
Andrei Eres committed
import { useTimer } from '../../hooks/useTimer'
import { forgetAccount } from '../../messaging/uiActions'
Andrei Eres's avatar
Andrei Eres committed
import cancelIcon from '../assets/cancel.svg'
import { Address } from './Address'
Andrei Eres's avatar
Andrei Eres committed
import { Button } from './Button'

Andrei Eres's avatar
Andrei Eres committed
type Props = {
Andrei Eres's avatar
Andrei Eres committed
  address?: string
  genesisHash?: string | null
  name?: string
}

Andrei Eres's avatar
Andrei Eres committed
export const Key: React.FC<Props> = ({ ...account }) => {
Andrei Eres's avatar
Andrei Eres committed
  const timer = useTimer()
  const removing = timer.started

  useEffect(() => {
    if (timer.fired)
      forgetAccount(account.address as string).catch(console.error)
  }, [timer.fired])

  return (
Andrei Eres's avatar
Andrei Eres committed
    <div className='relative'>
Andrei Eres's avatar
Andrei Eres committed
      {!removing && (
        <Address
          address={account.address}
          genesisHash={account.genesisHash}
          name={account.name}
          key={account.address}
        />
      )}
      {!removing && (
Andrei Eres's avatar
Andrei Eres committed
        <div className='w-4 h-4 absolute top-1 right-1' onClick={timer.start}>
Andrei Eres's avatar
Andrei Eres committed
          <img src={cancelIcon} />
        </div>
      )}
      {removing && (
Andrei Eres's avatar
Andrei Eres committed
        <div className='flex items-center justify-between p-2 border-2 border-_bg-300 border-dashed rounded'>
          <div className='text-_text-400'>
Andrei Eres's avatar
Andrei Eres committed
            Removing &ldquo;{account.name}&rdquo;{timer.value}s
          </div>
          <Button onClick={timer.reset}>Undo</Button>
        </div>
      )}
    </div>
  )
}