PendingPaymentAlert.tsx raw

   1  import dayjs from "dayjs";
   2  import { InfoIcon } from "lucide-react";
   3  import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
   4  import { LinkButton } from "src/components/ui/custom/link-button";
   5  import { useBalances } from "src/hooks/useBalances";
   6  import { useChannels } from "src/hooks/useChannels";
   7  import { useTransactions } from "src/hooks/useTransactions";
   8  import { cn } from "src/lib/utils";
   9  
  10  export function PendingPaymentAlert({ className }: { className?: string }) {
  11    const { data: balances } = useBalances();
  12    const { data: channels } = useChannels();
  13    const { data: transactionData } = useTransactions();
  14  
  15    if (!balances || !channels || !transactionData) {
  16      return null;
  17    }
  18  
  19    if (
  20      !transactionData.transactions.some(
  21        (tx) =>
  22          tx.state === "pending" &&
  23          dayjs().diff(dayjs(tx.createdAt)) <
  24            1000 * 60 * 60 * 24 /* payment pending in last 24h */
  25        /* TODO: remove diff check when expired transactions are marked as failed */
  26      )
  27    ) {
  28      return null;
  29    }
  30  
  31    return (
  32      <Alert className={cn("md:max-w-lg", className)}>
  33        <InfoIcon className="h-4 w-4" />
  34        <AlertTitle>Pending Payment</AlertTitle>
  35        <AlertDescription>
  36          You have one or more payments that have not settled.
  37          <LinkButton to="/wallet" size="sm">
  38            View Payments
  39          </LinkButton>
  40        </AlertDescription>
  41      </Alert>
  42    );
  43  }
  44