RecentSupporters.tsx raw

   1  import { formatAmount } from '@/lib/lightning'
   2  import lightning, { TRecentSupporter } from '@/services/lightning.service'
   3  import { useEffect, useState } from 'react'
   4  import { useTranslation } from 'react-i18next'
   5  import UserAvatar from '../UserAvatar'
   6  import Username from '../Username'
   7  
   8  export default function RecentSupporters() {
   9    const { t } = useTranslation()
  10    const [supporters, setSupporters] = useState<TRecentSupporter[]>([])
  11  
  12    useEffect(() => {
  13      const init = async () => {
  14        const items = await lightning.fetchRecentSupporters()
  15        setSupporters(items)
  16      }
  17      init()
  18    }, [])
  19  
  20    if (!supporters.length) return null
  21  
  22    return (
  23      <div className="space-y-2">
  24        <div className="font-semibold text-center">{t('Named and Shamed')}</div>
  25        <div className="flex flex-col gap-2">
  26          {supporters.map((item, index) => (
  27            <div
  28              key={index}
  29              className="flex items-center justify-between rounded-md border p-2 sm:p-4 gap-2"
  30            >
  31              <div className="flex items-center gap-2 flex-1 w-0">
  32                <UserAvatar userId={item.pubkey} />
  33                <div className="flex-1 w-0">
  34                  <Username className="font-semibold w-fit" userId={item.pubkey} />
  35                  <div className="text-xs text-muted-foreground line-clamp-3 select-text">
  36                    {item.comment}
  37                  </div>
  38                </div>
  39              </div>
  40              <div className="font-semibold text-yellow-400 shrink-0">
  41                {formatAmount(item.amount)} {t('sats')}
  42              </div>
  43            </div>
  44          ))}
  45        </div>
  46      </div>
  47    )
  48  }
  49