add alby price component

packages/atoms/EventTypeList/components/price/AlbyPriceComponent.tsx

@@ -0,0 +1,34 @@
+import { fiat } from "@getalby/lightning-tools";
+import React from "react";
+
+import { Tooltip } from "@calcom/ui";
+import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol";
+
+type AlbyPriceComponentProps = {
+  displaySymbol: boolean;
+  price: number;
+  formattedPrice: string;
+};
+
+export default function AlbyPriceComponent({
+  displaySymbol,
+  price,
+  formattedPrice,
+}: AlbyPriceComponentProps) {
+  const [fiatValue, setFiatValue] = React.useState<string>("loading...");
+  React.useEffect(() => {
+    (async () => {
+      const unformattedFiatValue = await fiat.getFiatValue({ satoshi: price, currency: "USD" });
+      setFiatValue(`$${unformattedFiatValue.toFixed(2)}`);
+    })();
+  }, [price]);
+
+  return (
+    <Tooltip content={fiatValue}>
+      <div className="inline-flex items-center justify-center">
+        {displaySymbol && <SatSymbol className="h-4 w-4" />}
+        {formattedPrice}
+      </div>
+    </Tooltip>
+  );
+}

packages/atoms/EventTypeList/components/price/index.tsx

@@ -0,0 +1,25 @@
+import { lazy, Suspense } from "react";
+
+import { formatPrice } from "@calcom/lib/price";
+
+type EventPrice = { currency: string; price: number; displayAlternateSymbol?: boolean };
+
+const AlbyPriceComponent = lazy(() => import("./AlbyPriceComponent"));
+
+export function Price({ price, currency, displayAlternateSymbol = true }: EventPrice) {
+  const formattedPrice = formatPrice(price, currency);
+
+  if (price === 0) return null;
+
+  return currency !== "BTC" ? (
+    <>{formattedPrice}</>
+  ) : (
+    <Suspense>
+      <AlbyPriceComponent
+        displaySymbol={displayAlternateSymbol}
+        price={price}
+        formattedPrice={formattedPrice}
+      />
+    </Suspense>
+  );
+}