Payment Widget

1"use client";
2 
3import { type PropsWithChildren, useState } from "react";
4import { Button } from "@/components/ui/button";
5import { ConnectionHandler } from "./components/connection-handler";
6import { Web3Provider } from "./context/web3-context";
7import { PaymentModal } from "./components/payment-modal";
8import { PaymentWidgetProvider } from "./context/payment-widget-context/payment-widget-provider";
9import type { PaymentWidgetProps } from "./payment-widget.types";
10import { ICONS } from "./constants";
11import { usePaymentWidgetContext } from "./context/payment-widget-context/use-payment-widget-context";
12 
13function PaymentWidgetInner({ children }: PropsWithChildren) {
14  const [isModalOpen, setIsModalOpen] = useState(false);
15  const handleModalOpenChange = (open: boolean) => {
16    setIsModalOpen(open);
17  };
18 
19  const {
20    walletAccount,
21    paymentConfig: { rnApiClientId, supportedCurrencies },
22  } = usePaymentWidgetContext();
23 
24  let isButtonDisabled = false;
25 
26  if (!rnApiClientId || rnApiClientId === "") {
27    console.error("PaymentWidget: rnApiClientId is required in paymentConfig");
28 
29    isButtonDisabled = true;
30  }
31 
32  if (supportedCurrencies.length === 0) {
33    console.error(
34      "PaymentWidget: supportedCurrencies is required in paymentConfig",
35    );
36 
37    isButtonDisabled = true;
38  }
39 
40  return (
41    <div className="inline-flex flex-col items-center">
42      <Button
43        disabled={isButtonDisabled}
44        onClick={() => {
45          if (isButtonDisabled) return;
46          setIsModalOpen(true);
47        }}
48        variant="ghost"
49        className="p-0 h-auto bg-transparent hover:bg-transparent"
50      >
51        {children || "Pay with crypto"}
52      </Button>
53 
54      <div className="flex items-center gap-1 mt-2 text-xs text-muted-foreground">
55        {/** biome-ignore lint/performance/noImgElement: This is a ShadCN library, we can't enforce next syntax on everybody */}
56        <img
57          src={ICONS.requestNetwork}
58          alt="Request Network"
59          width={10}
60          height={10}
61          className="flex-shrink-0"
62        />
63        <span>Powered by Request Network</span>
64      </div>
65 
66      {walletAccount !== undefined ? (
67        <PaymentModal
68          isOpen={isModalOpen}
69          handleModalOpenChange={handleModalOpenChange}
70        />
71      ) : (
72        <ConnectionHandler
73          isOpen={isModalOpen}
74          handleModalOpenChange={handleModalOpenChange}
75          paymentModal={
76            <PaymentModal
77// … truncated