OnchainSuccess.tsx raw

   1  import { ArrowLeftIcon, ExternalLinkIcon, HandCoinsIcon } from "lucide-react";
   2  import { useLocation } from "react-router";
   3  import { FormattedBitcoinAmount } from "src/components/FormattedBitcoinAmount";
   4  import FormattedFiatAmount from "src/components/FormattedFiatAmount";
   5  import {
   6    Card,
   7    CardContent,
   8    CardFooter,
   9    CardHeader,
  10    CardTitle,
  11  } from "src/components/ui/card";
  12  
  13  import AppHeader from "src/components/AppHeader";
  14  import Loading from "src/components/Loading";
  15  import LottieLoading from "src/components/LottieLoading";
  16  import LottieSuccess from "src/components/LottieSuccess";
  17  import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
  18  import { LinkButton } from "src/components/ui/custom/link-button";
  19  import { useInfo } from "src/hooks/useInfo";
  20  import { useMempoolApi } from "src/hooks/useMempoolApi";
  21  import { MempoolTransaction } from "src/types";
  22  
  23  export default function OnchainSuccess() {
  24    const { state } = useLocation();
  25    const { data: info } = useInfo();
  26  
  27    const amountSat = state?.amountSat as number;
  28    const txId = state?.txId as string;
  29  
  30    const { data: mempoolTx } = useMempoolApi<MempoolTransaction>(
  31      `/tx/${txId}`,
  32      3000
  33    );
  34  
  35    if (!info) {
  36      return <Loading />;
  37    }
  38  
  39    return (
  40      <div className="grid gap-4">
  41        <AppHeader pageTitle="Send to On-chain" title="Send to On-chain" />
  42        <div className="w-full md:max-w-lg">
  43          <Card className="w-full">
  44            <CardHeader>
  45              <CardTitle className="text-center">
  46                {mempoolTx?.status.confirmed
  47                  ? "Payment Successful"
  48                  : "Awaiting Confirmation"}
  49              </CardTitle>
  50            </CardHeader>
  51            <CardContent className="flex flex-col items-center gap-6">
  52              {mempoolTx?.status.confirmed ? (
  53                <LottieSuccess />
  54              ) : (
  55                <LottieLoading size={288} />
  56              )}
  57              <div className="flex flex-col gap-1 items-center">
  58                <p className="text-2xl font-medium slashed-zero">
  59                  <FormattedBitcoinAmount amountMsat={amountSat * 1000} />
  60                </p>
  61                <FormattedFiatAmount amountSat={amountSat} className="text-xl" />
  62              </div>
  63            </CardContent>
  64            <CardFooter className="flex flex-col gap-2 pt-2">
  65              <ExternalLinkButton
  66                to={`${info?.mempoolUrl}/tx/${txId}`}
  67                variant="outline"
  68                className="w-full"
  69              >
  70                <ExternalLinkIcon className="w-4 h-4 mr-2" />
  71                View on Mempool
  72              </ExternalLinkButton>
  73              <LinkButton to="/wallet/send" variant="outline" className="w-full">
  74                <HandCoinsIcon className="w-4 h-4 mr-2" />
  75                Make Another Payment
  76              </LinkButton>
  77              <LinkButton to="/wallet" variant="link" className="w-full">
  78                <ArrowLeftIcon className="w-4 h-4 mr-2" />
  79                Back to Wallet
  80              </LinkButton>
  81            </CardFooter>
  82          </Card>
  83        </div>
  84      </div>
  85    );
  86  }
  87