bee-dashboard/src/pages/stamps/StampsTable.tsx

import { ReactElement, useContext } from 'react'
import TimerFlashFill from 'remixicon-react/TimerFlashFillIcon'
import TimerFlashLine from 'remixicon-react/TimerFlashLineIcon'

import ExpandableElement from '../../components/ExpandableElement'
import ExpandableList from '../../components/ExpandableList'
import ExpandableListItem from '../../components/ExpandableListItem'
import ExpandableListItemActions from '../../components/ExpandableListItemActions'
import ExpandableListItemKey from '../../components/ExpandableListItemKey'
import StampExtensionModal, { StampExtensionType } from '../../components/StampExtensionModal'
import { Context as BeeContext } from '../../providers/Bee'
import { Context as SettingsContext } from '../../providers/Settings'
import { EnrichedPostageBatch } from '../../providers/Stamps'
import { secondsToTimeString } from '../../utils'
import { getHumanReadableFileSize } from '../../utils/file'

import { PostageStamp } from './PostageStamp'

interface Props {
  postageStamps: EnrichedPostageBatch[] | null
}

function StampsTable({ postageStamps }: Props): ReactElement | null {
  const { beeApi } = useContext(SettingsContext)
  const { status } = useContext(BeeContext)

  if (!postageStamps || !beeApi) {
    return null
  }

  return (
    <ExpandableList label="Postage Stamps" defaultOpen>
      {postageStamps.map(stamp => (
        <ExpandableElement
          key={stamp.batchID.toHex()}
          expandable={
            <>
              <ExpandableListItemKey label="Batch ID" value={stamp.batchID.toHex()} />
              <ExpandableListItem label="Depth" value={String(stamp.depth)} />
              <ExpandableListItem
                label="Capacity"
                value={`${getHumanReadableFileSize(stamp.size.toBytes() - stamp.remainingSize.toBytes())} / ${getHumanReadableFileSize(
                  stamp.size.toBytes(),
                )}`}
              />
              <ExpandableListItem label="Amount" value={parseInt(stamp.amount, 10).toLocaleString()} />
              <ExpandableListItem label="Expires in" value={secondsToTimeString(stamp.duration.toSeconds())} />
              <ExpandableListItem label="Label" value={stamp.label} />
              <ExpandableListItem label="Usable" value={stamp.usable ? 'yes' : 'no'} />
              <ExpandableListItem label="Immutable" value={stamp.immutableFlag ? 'yes' : 'no'} />
              <ExpandableListItem label="Purchase Block Number" value={stamp.blockNumber} />
              <ExpandableListItemActions>
                <StampExtensionModal
                  type={StampExtensionType.Topup}
                  icon={<TimerFlashFill size="1rem" />}
                  bee={beeApi}
                  stamp={stamp}
                  status={status.all}
                />
                <StampExtensionModal
                  type={StampExtensionType.Dilute}
                  icon={<TimerFlashLine size="1rem" />}
                  bee={beeApi}
                  stamp={stamp}
                  status={status.all}
                />
              </ExpandableListItemActions>
            </>
          }
        >
          <PostageStamp stamp={stamp} shorten={true} />
        </ExpandableElement>
      ))}
    </ExpandableList>
  )
}

export default StampsTable