CryptoSwapAlert.tsx raw

   1  import { CoinsIcon, ExternalLinkIcon } from "lucide-react";
   2  import { FixedFloatButton } from "src/components/FixedFloatButton";
   3  import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
   4  
   5  type CryptoSwapAlertProps = {
   6    className?: string;
   7  };
   8  export function CryptoSwapAlert({ className }: CryptoSwapAlertProps) {
   9    return (
  10      <Alert className={className}>
  11        <AlertTitle className="flex items-center gap-2">
  12          <CoinsIcon className="h-4 w-4" />
  13          Looking to pay to other Cryptocurrency?
  14        </AlertTitle>
  15        <AlertDescription className="text-xs gap-2 mt-1">
  16          <p>
  17            If you are trying to pay a non-Bitcoin payment destination, use
  18            FixedFloat to swap and complete the payment across 70+ supported
  19            cryptocurrencies.
  20          </p>
  21          <FixedFloatButton
  22            from="BTCLN"
  23            variant="outline"
  24            className="text-foreground"
  25          >
  26            Pay with FixedFloat
  27            <ExternalLinkIcon className="size-4" />
  28          </FixedFloatButton>
  29        </AlertDescription>
  30      </Alert>
  31    );
  32  }
  33