@cromix-dev/payment-component 0.0.11 → 0.0.13

package/dist/components/CryptoPayment.js

@@ -0,0 +1,753 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useAccount, useWalletClient, usePublicClient, useSwitchChain, useDisconnect, useChains, useBalance, useReadContract, useEstimateFeesPerGas } from "wagmi";
+import { useAppKit } from "@reown/appkit/react";
+import { mainnet } from "@reown/appkit/networks";
+import { erc20Abi, formatUnits, maxUint256 } from "viem";
+import { toast } from "react-toastify";
+import { PaymentRouterAbi, ETH, mainnetUSDTAbi, USDT_ADDRESSES } from "@cromix-dev/evm";
+import * as styles from "../styles/Crypto.css.js";
+
+// checkers for native coins
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const isNativeCoin = tokenAddress => tokenAddress.toLowerCase() === ETH.toLowerCase();
+
+// checkers for non-standard ERC20 tokens
+const isMainnetUSDT = (chainId, tokenAddress) => chainId === mainnet.id && tokenAddress.toLowerCase() === USDT_ADDRESSES[mainnet.id].toLowerCase();
+export default function CryptoPayment({
+  paymentConfig,
+  usdAmount,
+  onEstimateTokenAmount,
+  onCreatePayment,
+  onGetSignature,
+  onSuccess,
+  onCancel
+}) {
+  const {
+    address,
+    chain,
+    isConnected
+  } = useAccount();
+  const publicClient = usePublicClient();
+  const {
+    data: walletClient
+  } = useWalletClient();
+  const {
+    switchChain
+  } = useSwitchChain();
+  const {
+    disconnect
+  } = useDisconnect();
+  const {
+    open
+  } = useAppKit();
+  const chains = useChains();
+  const [estimatedTokenAmount, setEstimatedTokenAmount] = useState(0);
+  const [status, setStatus] = useState("idle");
+  const [selectedPaymentRouter, setSelectedPaymentRouter] = useState(null);
+  const [selectedPaymentSetting, setSelectedPaymentSetting] = useState(null);
+  const [needsApproval, setNeedsApproval] = useState(null);
+  const [currentAllowance, setCurrentAllowance] = useState(0n);
+  const [error, setError] = useState(null);
+  const availableNetworks = useMemo(() => {
+    if (!selectedPaymentSetting) return [];
+    return paymentConfig.paymentSettings.filter(s => s.tokenSymbol === selectedPaymentSetting.tokenSymbol);
+  }, [paymentConfig.paymentSettings, selectedPaymentSetting]);
+  const {
+    balance,
+    isSupported,
+    isLoading
+  } = useTokenBalance({
+    tokenAddress: selectedPaymentSetting?.tokenAddress,
+    decimals: selectedPaymentSetting?.tokenDecimals,
+    chainId: Number(selectedPaymentSetting?.chainId)
+  }, address);
+  const {
+    data: estimatedFeesPerGas
+  } = useEstimateFeesPerGas({
+    chainId: selectedPaymentSetting ? Number(selectedPaymentSetting.chainId) : undefined,
+    query: {
+      enabled: Boolean(selectedPaymentSetting?.chainId)
+    }
+  });
+  const estimatedFee = useMemo(() => {
+    if (!estimatedFeesPerGas) return "0";
+    const maxFeePerGas = estimatedFeesPerGas.maxFeePerGas ?? estimatedFeesPerGas.gasPrice;
+    if (!maxFeePerGas) return "0";
+    const estimatedGas = 21000n;
+    return formatUnits(estimatedGas * maxFeePerGas, 18);
+  }, [estimatedFeesPerGas]);
+  const nativeCoinSymbol = useMemo(() => {
+    if (!selectedPaymentSetting) return "";
+    const chain = chains.find(c => c.id === Number(selectedPaymentSetting.chainId));
+    return chain?.nativeCurrency?.symbol ?? "ETH";
+  }, [selectedPaymentSetting, chains]);
+  useEffect(() => {
+    const linkPre = document.createElement("link");
+    linkPre.href = "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css";
+    linkPre.rel = "stylesheet";
+    document.head.appendChild(linkPre);
+    const link = document.createElement("link");
+    link.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@600&family=Inter:opsz,wght@14..32,500&display=swap";
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+    return () => {
+      document.head.removeChild(linkPre);
+      document.head.removeChild(link);
+    };
+  }, []);
+  useEffect(() => {
+    if (paymentConfig.paymentSettings.length === 0) {
+      setSelectedPaymentSetting(null);
+      return;
+    }
+    const firstToken = paymentConfig.paymentSettings[0];
+    setSelectedPaymentSetting(firstToken);
+  }, [paymentConfig]);
+  useEffect(() => {
+    if (!selectedPaymentSetting) return;
+    async function fetchEstimatedTokenAmount(paymentSetting) {
+      const estimatedTokenAmount = await onEstimateTokenAmount(Number(usdAmount), {
+        chainId: paymentSetting.chainId,
+        tokenSymbol: paymentSetting.tokenSymbol,
+        tokenAddress: paymentSetting.tokenAddress
+      });
+      setEstimatedTokenAmount(estimatedTokenAmount);
+    }
+    fetchEstimatedTokenAmount(selectedPaymentSetting);
+  }, [selectedPaymentSetting, onEstimateTokenAmount, usdAmount]);
+  useEffect(() => {
+    if (!selectedPaymentSetting) {
+      setSelectedPaymentRouter(null);
+      return;
+    }
+    const selectedRouter = paymentConfig.paymentRouters.find(router => router.chainId === selectedPaymentSetting.chainId);
+    setSelectedPaymentRouter(selectedRouter ?? null);
+  }, [selectedPaymentSetting, paymentConfig.paymentRouters]);
+  useEffect(() => {
+    if (isConnected && address) {
+      toast.success(/*#__PURE__*/_jsxs("div", {
+        className: styles.walletConnectSuccess,
+        children: ["Connected to Wallet ", address.slice(0, 5), "...", address.slice(-5)]
+      }), {
+        containerId: "payment-component"
+      });
+    }
+  }, [isConnected, address]);
+  const getNetworkName = chainId => {
+    const chain = chains.find(c => c.id === Number(chainId));
+    return chain ? chain.name : chainId;
+  };
+  const handleSwitch = async () => {
+    disconnect();
+    await new Promise(res => setTimeout(res, 500));
+    open();
+  };
+  const handleConnectWallet = () => {
+    open();
+  };
+  const checkAllowance = useCallback(async () => {
+    if (!isConnected || !address || !chain || !publicClient || !selectedPaymentRouter || !selectedPaymentSetting || chain.id !== parseInt(selectedPaymentSetting.chainId)) {
+      setNeedsApproval(null);
+      setCurrentAllowance(0n);
+      return;
+    }
+    if (isNativeCoin(selectedPaymentSetting.tokenAddress)) {
+      setNeedsApproval(false);
+      setCurrentAllowance(0n);
+      return;
+    }
+    try {
+      setStatus("checking_allowance");
+      const allowance = await publicClient.readContract({
+        address: selectedPaymentSetting.tokenAddress,
+        abi: erc20Abi,
+        functionName: "allowance",
+        args: [address, selectedPaymentRouter.address]
+      });
+      setNeedsApproval(allowance === 0n);
+      setCurrentAllowance(allowance);
+      setStatus("idle");
+    } catch (err) {
+      console.error("Failed to check allowance:", err);
+      setNeedsApproval(true);
+      setCurrentAllowance(0n);
+      setStatus("idle");
+    }
+  }, [isConnected, address, chain, publicClient, selectedPaymentRouter, selectedPaymentSetting]);
+  useEffect(() => {
+    checkAllowance();
+  }, [checkAllowance]);
+  const handleSwitchNetwork = () => {
+    if (!isConnected) return;
+    if (!selectedPaymentRouter) return;
+    setError(null);
+    try {
+      setStatus("switching");
+      switchChain({
+        chainId: parseInt(selectedPaymentRouter.chainId)
+      });
+      setStatus("idle");
+    } catch (err) {
+      console.error("Failed to switch network:", err);
+      setError(err instanceof Error ? err.message : "Failed to switch network");
+      setStatus("idle");
+    }
+  };
+  const handleApprove = async () => {
+    if (!isConnected) return;
+    if (!address) return;
+    if (!chain) return;
+    if (!publicClient) return;
+    if (!walletClient) return;
+    if (!selectedPaymentRouter) return;
+    if (!selectedPaymentSetting) return;
+    if (chain.id !== parseInt(selectedPaymentRouter.chainId)) {
+      setError(`Please switch to Chain ID ${selectedPaymentRouter.chainId}`);
+      return;
+    }
+
+    // setError(null);
+    try {
+      setStatus("approving");
+      // if the token is ethereum USDT, then revoke existing allowance first
+      if (isMainnetUSDT(chain.id, selectedPaymentSetting.tokenAddress) && currentAllowance > 0n) {
+        const {
+          request: revokeRequest
+        } = await publicClient.simulateContract({
+          account: address,
+          address: selectedPaymentSetting.tokenAddress,
+          abi: mainnetUSDTAbi,
+          functionName: "approve",
+          args: [selectedPaymentRouter.address, 0n]
+        });
+        const revokeHash = await walletClient.writeContract(revokeRequest);
+        await publicClient.waitForTransactionReceipt({
+          hash: revokeHash
+        });
+      }
+
+      // approve infinite
+      const {
+        request: approveRequest
+      } = await publicClient.simulateContract({
+        account: address,
+        address: selectedPaymentSetting.tokenAddress,
+        abi: isMainnetUSDT(chain.id, selectedPaymentSetting.tokenAddress) ? mainnetUSDTAbi : erc20Abi,
+        functionName: "approve",
+        args: [selectedPaymentRouter.address, maxUint256]
+      });
+      const approveHash = await walletClient.writeContract(approveRequest);
+      await publicClient.waitForTransactionReceipt({
+        hash: approveHash
+      });
+      // re-check allowance after approval
+      await checkAllowance();
+      setStatus("idle");
+    } catch (err) {
+      console.error("Failed to approve token:", err);
+      toast.error(`Approval failed. Please ensure your wallet has enough ${selectedPaymentSetting.tokenSymbol} to complete payment and ${chains.find(c => c.id === chain.id)?.nativeCurrency?.symbol ?? "native coin"} to cover gas fees.`, {
+        containerId: "payment-component"
+      });
+      setStatus("idle");
+    }
+  };
+  const handlePay = async () => {
+    if (!isConnected) return;
+    if (!address) return;
+    if (!chain) return;
+    if (!publicClient) return;
+    if (!walletClient) return;
+    if (!selectedPaymentRouter) return;
+    if (!selectedPaymentSetting) return;
+    if (chain.id !== parseInt(selectedPaymentSetting.chainId)) {
+      setError(`Please switch to Chain ID ${selectedPaymentRouter.chainId}`);
+      return;
+    }
+
+    // setError(null);
+    try {
+      setStatus("creating");
+      // Create payment via merchant's API
+      const {
+        id: createdPaymentId
+      } = await onCreatePayment({
+        usdAmount: usdAmount.toString(),
+        chainId: selectedPaymentSetting.chainId,
+        tokenAddress: selectedPaymentSetting.tokenAddress,
+        sender: address
+      });
+      setStatus("signing");
+      // Get signature from merchant's API
+      const {
+        paymentData,
+        signature
+      } = await onGetSignature(createdPaymentId);
+      setStatus("sending");
+      // Send transaction to PaymentRouter contract
+      let hash;
+      if (isNativeCoin(paymentData.erc20)) {
+        const {
+          request
+        } = await publicClient.simulateContract({
+          account: address,
+          address: selectedPaymentRouter.address,
+          abi: PaymentRouterAbi,
+          functionName: "payETH",
+          args: [BigInt(paymentData.id), paymentData.receiver, BigInt(paymentData.feeRate), BigInt(paymentData.expirationTimestamp), signature],
+          value: BigInt(paymentData.amount)
+        });
+        hash = await walletClient.writeContract(request);
+      } else {
+        const {
+          request
+        } = await publicClient.simulateContract({
+          account: address,
+          address: selectedPaymentRouter.address,
+          abi: PaymentRouterAbi,
+          functionName: "payERC20",
+          args: [BigInt(paymentData.id), paymentData.erc20, paymentData.receiver, BigInt(paymentData.amount), BigInt(paymentData.feeRate), BigInt(paymentData.expirationTimestamp), signature]
+        });
+        hash = await walletClient.writeContract(request);
+      }
+      console.debug("Payment transaction sent:", hash);
+      setStatus("confirming");
+      // Confirm payment transaction
+      const receipt = await publicClient.waitForTransactionReceipt({
+        hash
+      });
+      if (!receipt) {
+        throw new Error("Transaction receipt not found");
+      }
+      console.debug("Payment transaction confirmed:", receipt);
+      setStatus("success");
+      // Call onSuccess callback
+      onSuccess(createdPaymentId);
+    } catch (err) {
+      console.error("Failed to process payment:", err);
+      toast.error(`Payment failed. Please ensure your wallet has enough ${selectedPaymentSetting.tokenSymbol} to complete payment and ${chains.find(c => c.id === chain.id)?.nativeCurrency?.symbol ?? "native coin"} to cover gas fees.`, {
+        containerId: "payment-component"
+      });
+      setStatus("idle");
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.overlay,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.wrapper,
+      style: {
+        height: isConnected ? "570px" : "575px"
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.wallet,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: styles.walletInput,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: styles.walletLink,
+            style: {
+              cursor: isConnected ? "pointer" : "default"
+            },
+            onClick: () => isConnected ? disconnect() : undefined,
+            children: isConnected ? /*#__PURE__*/_jsx(UnLinkSVG, {}) : /*#__PURE__*/_jsx(LinkSVG, {})
+          }), /*#__PURE__*/_jsx("div", {
+            className: styles.walletAddress,
+            children: address ? `${address.slice(0, 5)}...${address.slice(-5)}` : "Wallet Not Connected"
+          }), isConnected && /*#__PURE__*/_jsx("div", {
+            className: styles.switchBtn,
+            onClick: handleSwitch,
+            children: "Switch"
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: styles.closeBtn,
+          onClick: onCancel,
+          children: /*#__PURE__*/_jsx(CloseLargeSVG, {})
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.paymentWrapper,
+        children: [/*#__PURE__*/_jsx("h4", {
+          className: styles.paymentTitle,
+          children: "Select Payment Currency"
+        }), /*#__PURE__*/_jsx(Dropdown, {
+          type: "token",
+          chains: chains,
+          active: selectedPaymentSetting,
+          balance: Math.round(Number(balance)).toString(),
+          items: Array.from(new Map(paymentConfig.paymentSettings.map(item => [item.tokenSymbol, item])).values()),
+          onSelect: item => setSelectedPaymentSetting(item)
+        }), /*#__PURE__*/_jsx(Dropdown, {
+          type: "network",
+          chains: chains,
+          active: selectedPaymentSetting,
+          balance: `${estimatedFee} ${nativeCoinSymbol}`,
+          items: availableNetworks,
+          onSelect: item => setSelectedPaymentSetting(item)
+        }), /*#__PURE__*/_jsxs("div", {
+          className: styles.paymentAmountWrapper,
+          children: [/*#__PURE__*/_jsx("p", {
+            className: styles.paymentAmount,
+            children: "Payment amount"
+          }), /*#__PURE__*/_jsx("p", {
+            className: styles.paymentAmountTotal,
+            children: `${usdAmount} $`
+          })]
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.chevronDownLarge,
+        children: /*#__PURE__*/_jsx(ChevronDownLargeSVG, {})
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.summaryWrapper,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: styles.summaryItemWrapper,
+          style: {
+            marginBottom: "4px"
+          },
+          children: [/*#__PURE__*/_jsx("p", {
+            className: styles.summaryItemTitle,
+            children: "Token"
+          }), /*#__PURE__*/_jsx("p", {
+            className: styles.summaryItemValue,
+            children: selectedPaymentSetting?.tokenSymbol
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: styles.summaryItemWrapper,
+          style: {
+            marginBottom: "12px"
+          },
+          children: [/*#__PURE__*/_jsx("p", {
+            className: styles.summaryItemTitle,
+            children: "Network"
+          }), /*#__PURE__*/_jsx("p", {
+            className: styles.summaryItemValue,
+            children: getNetworkName(selectedPaymentSetting?.chainId)
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: styles.summaryItemWrapper,
+          children: [/*#__PURE__*/_jsx("p", {
+            className: styles.summaryItemValue,
+            style: {
+              fontSize: "14px"
+            },
+            children: "Amount"
+          }), /*#__PURE__*/_jsxs("p", {
+            className: styles.summaryTotal,
+            children: [estimatedTokenAmount, " ", selectedPaymentSetting?.tokenSymbol]
+          })]
+        })]
+      }), !isConnected && /*#__PURE__*/_jsx("button", {
+        className: styles.connectWallet,
+        onClick: handleConnectWallet,
+        disabled: status !== "idle",
+        children: "Wallet Connect"
+      }), isConnected && selectedPaymentRouter && selectedPaymentSetting && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [chain && chain.id !== parseInt(selectedPaymentRouter.chainId) && /*#__PURE__*/_jsx("button", {
+          onClick: handleSwitchNetwork,
+          disabled: status === "switching",
+          className: styles.switchNetworkButton,
+          children: status === "switching" ? "Switching..." : "Switch Network"
+        }), chain && chain.id === parseInt(selectedPaymentRouter.chainId) && /*#__PURE__*/_jsx(_Fragment, {
+          children: needsApproval ? /*#__PURE__*/_jsx("button", {
+            onClick: handleApprove,
+            disabled: status !== "idle" || !address || !chain || chain.id !== parseInt(selectedPaymentRouter.chainId),
+            className: styles.payButton,
+            style: {
+              fontFamily: '"Inter", sans-serif',
+              fontWeight: "500",
+              backgroundColor: "#646464",
+              color: "#FFFFFF"
+            },
+            children: status === "idle" ? "Approve" : "Processing..."
+          }) : /*#__PURE__*/_jsx("button", {
+            onClick: handlePay,
+            disabled: status !== "idle" || !address || !chain || chain.id !== parseInt(selectedPaymentRouter.chainId)
+            // ||                  needsApproval === null
+            ,
+            className: styles.payButton,
+            style: {
+              fontFamily: '"IBM Plex Mono", monospace',
+              fontWeight: "600",
+              backgroundColor: "#FFED2B",
+              color: "#000000"
+            },
+            children: status === "idle" ? "Pay" : "Processing..."
+          })
+        })]
+      })]
+    })
+  });
+}
+const useTokenBalance = (token, evmWallet) => {
+  const isErc20 = Boolean(token.tokenAddress) && !isNativeCoin(token.tokenAddress);
+
+  // Native balance
+  const evmNative = useBalance({
+    address: evmWallet,
+    chainId: token.chainId,
+    query: {
+      enabled: !isErc20 && Boolean(evmWallet)
+    }
+  });
+
+  // ERC-20 balance
+  const evmErc20 = useReadContract({
+    address: isErc20 ? token.tokenAddress : undefined,
+    abi: erc20Abi,
+    functionName: "balanceOf",
+    args: evmWallet ? [evmWallet] : undefined,
+    chainId: token.chainId,
+    query: {
+      enabled: isErc20 && Boolean(evmWallet)
+    }
+  });
+  const isLoading = isErc20 ? evmErc20.isLoading : evmNative.isLoading;
+  const raw = isErc20 ? evmErc20.data ?? 0n : evmNative.data?.value ?? 0n;
+  return {
+    isSupported: Boolean(token),
+    isLoading: isLoading,
+    balance: formatUnits(raw, token.decimals)
+  };
+};
+const Dropdown = ({
+  type,
+  chains,
+  active,
+  items,
+  balance,
+  onSelect
+}) => {
+  const [lists, setLists] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const ref = useRef(null);
+  useEffect(() => {
+    setLists(items);
+    const handleClickOutside = e => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+        setSearch("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    setLists(items);
+  }, [items]);
+  useEffect(() => {
+    if (search.trim().length === 0) {
+      setLists(items);
+    }
+  }, [search]);
+  const getNetworkName = chainId => {
+    const chain = chains.find(c => c.id === Number(chainId));
+    return chain ? chain.name : chainId;
+  };
+  const handleSearch = () => {
+    if (search.trim().length === 0) {
+      setLists(items);
+      return;
+    }
+    const q = search.trim().toLowerCase();
+    setLists(items.filter(item => item.tokenSymbol.toLowerCase().includes(q)));
+  };
+  const iconSrc = type === "token" ? active?.tokenIcon : type === "network" ? active?.chainIcon : null;
+  const altText = type === "token" ? active?.tokenName : type === "network" ? getNetworkName(active?.chainId) : "";
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
+    className: styles.paymentTokenNetworkWrapper,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.paymentTokenNetwork,
+      style: {
+        color: open ? "#FFFFFF" : "#8D8D8D"
+      },
+      onClick: () => setOpen(!open),
+      children: active && /*#__PURE__*/_jsxs("div", {
+        className: styles.dropdownItem,
+        style: {
+          height: "auto",
+          paddingLeft: 0,
+          paddingRight: 0
+        },
+        children: [iconSrc && /*#__PURE__*/_jsx("div", {
+          className: styles.icon24,
+          children: /*#__PURE__*/_jsx("img", {
+            src: iconSrc,
+            alt: altText
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: styles.dropdownItemMiddle,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: styles.dropdownItemText,
+            children: type === "token" ? active?.tokenSymbol : getNetworkName(active.chainId).slice(0, 16)
+          }), /*#__PURE__*/_jsx("div", {
+            className: styles.dropdownItemBalance,
+            children: balance
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: styles.chevronDown,
+          style: {
+            transform: open ? "rotate(180deg)" : "rotate(0deg)"
+          },
+          children: /*#__PURE__*/_jsx(ChevronDownSVG, {})
+        })]
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.dropdownWrapper,
+      style: {
+        display: open ? "flex" : "none"
+      },
+      children: [type === "token" && /*#__PURE__*/_jsxs("div", {
+        className: styles.dropdownSearch,
+        children: [/*#__PURE__*/_jsx("input", {
+          type: "text",
+          name: "search",
+          placeholder: "Search Token",
+          value: search,
+          className: styles.dropdownInput,
+          onChange: e => setSearch(e.target.value),
+          onKeyDown: e => {
+            if (e.key === "Enter") {
+              handleSearch();
+            }
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          className: styles.icon24,
+          style: {
+            cursor: "pointer"
+          },
+          onClick: handleSearch,
+          children: /*#__PURE__*/_jsx(SearchSVG, {})
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.dropdownItemWrapper,
+        style: {
+          maxHeight: type === "token" ? "257px" : "202px"
+        },
+        children: lists.map((item, index) => {
+          const iconSrc = type === "token" ? item.tokenIcon : type === "network" ? item.chainIcon : null;
+          const altText = type === "token" ? item.tokenName : type === "network" ? getNetworkName(item.chainId) : "";
+          return /*#__PURE__*/_jsxs("div", {
+            className: styles.dropdownItem,
+            style: {
+              backgroundColor: active?.id === item.id ? "#1D1D1D" : "transparent"
+            },
+            onClick: () => {
+              onSelect?.(item);
+              setOpen(false);
+              setSearch("");
+              setLists(items);
+            },
+            children: [iconSrc && /*#__PURE__*/_jsx("div", {
+              className: styles.icon24,
+              children: /*#__PURE__*/_jsx("img", {
+                src: iconSrc,
+                alt: altText
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              className: styles.dropdownItemText,
+              children: type === "token" ? item.tokenSymbol : getNetworkName(item.chainId)
+            })]
+          }, index);
+        })
+      })]
+    })]
+  });
+};
+const LinkSVG = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M14.8284 9.17158L9.17156 14.8284M12.7071 16.9498L11.2929 18.364C9.73078 19.9261 7.19812 19.9261 5.63603 18.364C4.07393 16.8019 4.07393 14.2692 5.63603 12.7071L7.05024 11.2929M16.9497 12.7071L18.3639 11.2929C19.926 9.7308 19.926 7.19814 18.3639 5.63604C16.8019 4.07395 14.2692 4.07395 12.7071 5.63604L11.2929 7.05026",
+      stroke: "#707070",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })
+  });
+};
+const UnLinkSVG = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M14.8284 9.17158L9.17156 14.8284M12.7071 16.9498L11.2929 18.364C9.73078 19.9261 7.19812 19.9261 5.63603 18.364C4.07393 16.8019 4.07393 14.2692 5.63603 12.7071L7.05024 11.2929M16.9497 12.7071L18.3639 11.2929C19.926 9.7308 19.926 7.19814 18.3639 5.63604C16.8019 4.07395 14.2692 4.07395 12.7071 5.63604L11.2929 7.05026",
+      stroke: "#FFED2B",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })
+  });
+};
+const CloseLargeSVG = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M21 21L12 12M12 12L3 3M12 12L21.0001 3M12 12L3 21.0001",
+      stroke: "white",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })
+  });
+};
+const SearchSVG = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("g", {
+      opacity: "0.2",
+      children: /*#__PURE__*/_jsx("path", {
+        d: "M15 15L21 21M10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z",
+        stroke: "white",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      })
+    })
+  });
+};
+const ChevronDownSVG = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M7.92004 9.75L11.9985 14.511L16.0815 9.75",
+      stroke: "white",
+      "stroke-miterlimit": "10",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })
+  });
+};
+const ChevronDownLargeSVG = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M19 9L12 16L5 9",
+      stroke: "white",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })
+  });
+};
+//# sourceMappingURL=CryptoPayment.js.map