ChannelWaitingForConfirmations.tsx raw

   1  import { FootprintsIcon } from "lucide-react";
   2  import EmptyState from "src/components/EmptyState";
   3  import Loading from "src/components/Loading";
   4  import {
   5    Card,
   6    CardContent,
   7    CardDescription,
   8    CardHeader,
   9    CardTitle,
  10  } from "src/components/ui/card";
  11  import { Channel } from "src/types";
  12  
  13  export function ChannelWaitingForConfirmations({
  14    channel,
  15  }: {
  16    channel: Channel | undefined;
  17  }) {
  18    if (!channel?.confirmationsRequired) {
  19      // 0-conf channel or waiting for transaction to be broadcasted, this should only take a few seconds
  20      return (
  21        <>
  22          <title>Your channel is being opened · Alby Hub</title>
  23          <Loading />
  24        </>
  25      );
  26    }
  27  
  28    return (
  29      <>
  30        <title>Your channel is being opened · Alby Hub</title>
  31        <div className="flex flex-col justify-center gap-2">
  32          <Card>
  33            <CardHeader>
  34              <CardTitle>Your channel is being opened</CardTitle>
  35              <CardDescription>
  36                Waiting for {channel.confirmationsRequired} confirmations
  37              </CardDescription>
  38            </CardHeader>
  39            <CardContent>
  40              <div className="flex flex-row gap-2">
  41                <Loading />
  42                {channel.confirmations ?? "0"} /{" "}
  43                {channel.confirmationsRequired ?? "unknown"} confirmations
  44              </div>
  45            </CardContent>
  46          </Card>
  47          <div className="w-full mt-40 flex flex-col items-center justify-center">
  48            <EmptyState
  49              icon={FootprintsIcon}
  50              title="Browse While You Wait"
  51              description="Feel free to leave this page or browse around Alby Hub! We'll send you an email as soon as your channel is active."
  52              variant="dashed"
  53              buttonText="Explore Apps"
  54              buttonLink="/apps?tab=app-store"
  55            />
  56          </div>
  57        </div>
  58      </>
  59    );
  60  }
  61