cppay-sdk 0.0.2-beta.20 → 0.0.2-beta.22

package/dist/react.js

@@ -1,13 +1,14 @@
-import { i as __toESM, n as injectStyle, r as payment_dialog_default, t as require_browser } from "./browser-Dm8HHcNy.js";
-import { t as cppay_default } from "./cppay-LnYTnh4d.js";
+import { a as payment_dialog_default, i as injectStyle, n as metamask_default, o as __toESM, r as require_browser, t as walletconnect_default } from "./walletconnect-B0L70Mgc.js";
+import { t as cppay_default } from "./cppay-BcCDwXlg.js";
 import { EMPTY, defer, timer } from "rxjs";
 import { expand, retry, switchMap, tap, timeout } from "rxjs/operators";
+import { createWalletClient, custom, parseUnits } from "viem";
+import { arbitrum, base, bsc, mainnet, optimism, polygon } from "viem/chains";
+import EthereumProvider from "@walletconnect/ethereum-provider";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialog_default = React.memo(({ open: t, onClose: d, apikey: f, plain: p, orderId: b, amount: x, intervalDays: S, onExpired: C, onSuccess: w, onFailed: T, onError: E }) => {
-	let D = useMemo(() => new cppay_default(f), [f]), [O, k] = useState("select"), [A, j] = useState(!1), [M, N] = useState([]), [P, F] = useState(""), [I, L] = useState(""), [R, z] = useState(""), B = useRef(null), V = useMemo(() => M.find((t) => t.chain === P), [M, P]), H = useMemo(() => V?.tokens || [], [V]);
-	useMemo(() => H.find((t) => t.symbol === I), [H, I]);
-	let U = (t) => [
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialog_default = React.memo(({ open: e, onClose: t, apikey: r, plain: i, orderId: l, amount: u, intervalDays: d, onExpired: we, onSuccess: f, onFailed: p, onError: m }) => {
+	let h = useMemo(() => new cppay_default(r), [r]), [g, _] = useState("select"), [v, y] = useState(!1), [b, x] = useState([]), [S, C] = useState(""), [w, T] = useState(""), [E, D] = useState(""), [O, k] = useState(""), [A, j] = useState(!1), [M, N] = useState(null), P = useRef(null), F = useRef(null), I = useMemo(() => b.find((e) => e.chain === S), [b, S]), L = useMemo(() => I?.tokens || [], [I]), R = useMemo(() => L.find((e) => e.symbol === w), [L, w]), z = (e) => [
 		"USDT",
 		"USDC",
 		"BUSD",
@@ -15,98 +16,258 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 		"TUSD",
 		"USDD",
 		"FDUSD"
-	].includes(t.toUpperCase()) ? 2 : 6, W = (t, d) => {
-		let f = parseFloat(t);
-		return isNaN(f) ? "0" : f.toFixed(d).replace(/\.?0+$/, "");
-	}, G = useMemo(() => {
-		if (!I) return "0";
-		let t = U(I);
-		return W((parseFloat(x) / 1).toFixed(t), t);
+	].includes(e.toUpperCase()) ? 2 : 6, B = (e) => ({
+		ETH: mainnet,
+		BSC: bsc,
+		Polygon: polygon,
+		Arbitrum: arbitrum,
+		Optimism: optimism,
+		Base: base
+	})[e] || mainnet, V = (e, t) => {
+		let n = parseFloat(e);
+		return isNaN(n) ? "0" : n.toFixed(t).replace(/\.?0+$/, "");
+	}, H = useMemo(() => {
+		if (!w || !R) return "0";
+		let e = parseFloat(R.price);
+		if (isNaN(e) || e === 0) return "0";
+		let t = z(w);
+		return V((parseFloat(u) / e).toFixed(t), t);
 	}, [
-		x,
-		I,
-		1
-	]), K = async () => {
+		u,
+		w,
+		R
+	]), U = async () => {
 		try {
-			j(!0);
-			let t = await D.getSupportedChains();
-			N(t), t.length > 0 && F(t[0].chain);
-		} catch (t) {
-			E?.(t);
+			y(!0);
+			let e = await h.getSupportedChains();
+			x(e), e.length > 0 && C(e[0].chain);
+		} catch (e) {
+			m?.(e);
+		} finally {
+			y(!1);
+		}
+	}, W = async (e) => {
+		try {
+			if (j(!0), e === "metamask") {
+				if (typeof window < "u" && window.ethereum?.isMetaMask) {
+					let e = await window.ethereum.request({ method: "eth_requestAccounts" });
+					if (e && e.length > 0) {
+						k(e[0]), N("metamask");
+						return;
+					}
+				}
+				throw Error("请安装 MetaMask 扩展");
+			}
+			if (e === "walletconnect") {
+				let e = await EthereumProvider.init({
+					projectId: "8d2e1854d3f1782e45aa15fbd8938894",
+					chains: [1],
+					showQrModal: !0,
+					optionalChains: [
+						56,
+						137,
+						42161,
+						10,
+						8453
+					],
+					methods: [
+						"eth_sendTransaction",
+						"eth_signTransaction",
+						"eth_sign",
+						"personal_sign",
+						"eth_signTypedData"
+					],
+					events: ["chainChanged", "accountsChanged"],
+					metadata: {
+						name: "Cppay",
+						description: "Cppay Payment Gateway",
+						url: typeof window < "u" ? window.location.origin : "https://cppay.com",
+						icons: ["https://cppay.com/icon.png"]
+					},
+					rpcMap: {
+						1: "https://ethereum.publicnode.com",
+						56: "https://bsc-dataseed.binance.org",
+						137: "https://polygon-rpc.com",
+						42161: "https://arb1.arbitrum.io/rpc",
+						10: "https://mainnet.optimism.io",
+						8453: "https://mainnet.base.org"
+					}
+				});
+				await e.enable();
+				let t = await e.request({ method: "eth_accounts" });
+				t && t.length > 0 && (k(t[0]), N("walletconnect"), P.current = e);
+			}
+		} catch (e) {
+			console.error("钱包连接失败:", e), m?.(e);
 		} finally {
 			j(!1);
 		}
-	}, q = useRef(null), J = async () => {
-		if (!(!P || !I)) try {
-			j(!0);
-			let t = "";
-			p === "one-time" ? (q.current = await D.createOnetimePayment({
-				paymentChain: P,
-				paymentToken: I,
-				orderId: b,
-				amount: G
-			}), t = `${P.toLowerCase()}:${q.current.receiveAddress}?amount=${q.current.paymentAmount}`) : p === "subscription" && (q.current = await D.createSubscriptionPayment({
-				paymentChain: P,
-				paymentToken: I,
-				orderId: b,
-				amountOfUsd: G,
-				intervalDays: S || 30
-			}), t = `${P.toLowerCase()}:${q.current.spenderAddress}?amount=${q.current.approveAmount}`), k("payment"), z(await import_browser.toDataURL(t, {
+	}, G = async (e) => {
+		let t;
+		if (t = M === "walletconnect" ? P.current : window.ethereum, t) try {
+			await t.request({
+				method: "wallet_switchEthereumChain",
+				params: [{ chainId: `0x${e.toString(16)}` }]
+			});
+		} catch (e) {
+			throw e.code === 4902 ? Error("请在钱包中添加该网络") : e;
+		}
+	}, K = async () => {
+		if (!(!O || !Y.current || !R)) try {
+			y(!0);
+			let e = Y.current, t = B(S);
+			await G(I.chainId);
+			let n = createWalletClient({
+				account: O,
+				chain: t,
+				transport: custom(M === "walletconnect" ? P.current : window.ethereum)
+			});
+			if (R.address) {
+				let t = await n.writeContract({
+					address: R.address,
+					abi: [{
+						name: "transfer",
+						type: "function",
+						stateMutability: "nonpayable",
+						inputs: [{
+							name: "to",
+							type: "address"
+						}, {
+							name: "amount",
+							type: "uint256"
+						}],
+						outputs: [{ type: "bool" }]
+					}],
+					functionName: "transfer",
+					args: [e.receiveAddress, parseUnits(e.paymentAmount, R.decimals)],
+					chain: null
+				});
+				console.log("转账交易哈希:", t);
+			} else {
+				let t = await n.sendTransaction({
+					to: e.receiveAddress,
+					value: parseUnits(e.paymentAmount, R.decimals),
+					chain: null
+				});
+				console.log("转账交易哈希:", t);
+			}
+			Z(e.paymentId);
+		} catch (e) {
+			console.error("钱包支付失败:", e), m?.(e);
+		} finally {
+			y(!1);
+		}
+	}, q = async () => {
+		if (!(!O || !Y.current || !R)) try {
+			y(!0);
+			let e = Y.current, t = B(S);
+			await G(I.chainId);
+			let n = createWalletClient({
+				account: O,
+				chain: t,
+				transport: custom(M === "walletconnect" ? P.current : window.ethereum)
+			});
+			if (!R.address) throw Error("订阅支付不支持原生代币");
+			let r = await n.writeContract({
+				address: R.address,
+				abi: [{
+					name: "approve",
+					type: "function",
+					stateMutability: "nonpayable",
+					inputs: [{
+						name: "spender",
+						type: "address"
+					}, {
+						name: "amount",
+						type: "uint256"
+					}],
+					outputs: [{ type: "bool" }]
+				}],
+				functionName: "approve",
+				args: [e.spenderAddress, parseUnits(e.approveAmount, R.decimals)],
+				chain: null
+			});
+			console.log("授权交易哈希:", r), Z(e.subscriptionId);
+		} catch (e) {
+			console.error("钱包授权失败:", e), m?.(e);
+		} finally {
+			y(!1);
+		}
+	}, J = async () => {
+		if (!O) {
+			m?.(/* @__PURE__ */ Error("请先连接钱包"));
+			return;
+		}
+		i === "one-time" ? await K() : i === "subscription" && await q();
+	}, Y = useRef(null), X = async () => {
+		if (!(!S || !w)) try {
+			y(!0);
+			let e = "";
+			i === "one-time" ? (Y.current = await h.createOnetimePayment({
+				paymentChain: S,
+				paymentToken: w,
+				orderId: l,
+				amount: H
+			}), e = `${S.toLowerCase()}:${Y.current.receiveAddress}?amount=${Y.current.paymentAmount}`) : i === "subscription" && (Y.current = await h.createSubscriptionPayment({
+				paymentChain: S,
+				paymentToken: w,
+				orderId: l,
+				amountOfUsd: H,
+				intervalDays: d || 30
+			}), e = `${S.toLowerCase()}:${Y.current.spenderAddress}?amount=${Y.current.approveAmount}`), _("payment"), D(await import_browser.toDataURL(e, {
 				width: 200,
 				margin: 2,
 				errorCorrectionLevel: "H"
 			}));
-		} catch (t) {
-			E?.(t);
+		} catch (e) {
+			m?.(e);
 		} finally {
-			j(!1);
+			y(!1);
 		}
-	}, Y = async () => {
-		if (q.current) try {
-			j(!0), p === "one-time" && X(q.current.subscriptionId), p === "subscription" && X(q.current.paymentId);
-		} catch (t) {
-			console.error("支付状态检查错误:", t), E?.(t);
-		} finally {
-			j(!1);
+	}, Te = async () => {
+		if (Y.current) try {
+			y(!0), i === "one-time" ? Z(Y.current.paymentId) : i === "subscription" && Z(Y.current.subscriptionId);
+		} catch (e) {
+			console.error("支付状态检查错误:", e), m?.(e), y(!1);
 		}
-	}, X = (t) => {
-		let d = () => defer(() => p === "subscription" ? D.checkSubscriptionPaymentStatus({ subscriptionId: t }) : D.checkOnetimePaymentStatus({ paymentId: t })).pipe(timeout(15e3), retry({
+	}, Z = (e) => {
+		let t = () => defer(() => i === "subscription" ? h.checkSubscriptionPaymentStatus({ subscriptionId: e }) : h.checkOnetimePaymentStatus({ paymentId: e })).pipe(timeout(15e3), retry({
 			count: 3,
 			delay: 2e3
 		}));
-		B.current?.unsubscribe(), B.current = d().pipe(expand((t) => t.status === "pending" ? timer(2e3).pipe(switchMap(() => d())) : EMPTY), tap((t) => {
-			t.status === "expired" && C?.(t), t.status === "paid" && (w?.(t), Q()), t.status === "failed" && T?.(t), t.status === "approved" && (w?.(t), Q());
-		})).subscribe({ error: (t) => {
-			console.error("支付状态检查错误:", t), E?.(t);
+		F.current?.unsubscribe(), F.current = t().pipe(expand((e) => e.status === "pending" ? timer(2e3).pipe(switchMap(() => t())) : EMPTY), tap((e) => {
+			e.status === "expired" && (y(!1), we?.(e)), e.status === "paid" && (y(!1), _("success"), f?.(e)), e.status === "failed" && (y(!1), p?.(e)), e.status === "approved" && (y(!1), _("success"), f?.(e));
+		})).subscribe({ error: (e) => {
+			console.error("支付状态检查错误:", e), y(!1), m?.(e);
 		} });
-	}, Z = async () => {
-		if (!q.current) return;
-		let t = p === "subscription" ? q.current.spenderAddress : q.current.receiveAddress;
-		t && await navigator.clipboard.writeText(t);
-	}, Q = () => {
-		d(), setTimeout(() => {
-			k("select"), q.current = null;
-		}, 300);
+	}, Q = async () => {
+		if (!Y.current) return;
+		let e = i === "subscription" ? Y.current.spenderAddress : Y.current.receiveAddress;
+		e && await navigator.clipboard.writeText(e);
+	}, $ = () => {
+		v || (t(), setTimeout(() => {
+			_("select"), Y.current = null;
+		}, 300));
 	};
 	return useEffect(() => {
-		t && M.length === 0 && K();
-	}, [t]), useEffect(() => {
-		H.length > 0 && L(H[0].symbol);
-	}, [H]), useEffect(() => () => {
-		B.current?.unsubscribe();
-	}, []), t ? /* @__PURE__ */ jsx("div", {
+		e && b.length === 0 && U();
+	}, [e]), useEffect(() => {
+		L.length > 0 && T(L[0].symbol);
+	}, [L]), useEffect(() => () => {
+		F.current?.unsubscribe();
+	}, []), e ? /* @__PURE__ */ jsx("div", {
 		className: "_cppay-overlay",
-		onClick: (t) => t.target === t.currentTarget && Q(),
+		onClick: (e) => e.target === e.currentTarget && !v && $(),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "_cppay-dialog",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "_cppay-header",
 				children: [/* @__PURE__ */ jsx("h2", {
 					className: "_cppay-title",
-					children: O === "select" ? "选择支付方式" : "完成支付"
+					children: g === "select" ? "选择支付方式" : "完成支付"
 				}), /* @__PURE__ */ jsx("button", {
-					onClick: Q,
-					disabled: A,
+					onClick: $,
+					disabled: v,
 					className: "_cppay-close-btn",
 					children: /* @__PURE__ */ jsx("svg", {
 						fill: "none",
@@ -122,7 +283,37 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 				})]
 			}), /* @__PURE__ */ jsx("div", {
 				className: "_cppay-content",
-				children: O === "select" ? /* @__PURE__ */ jsxs("div", { children: [
+				children: g === "success" ? /* @__PURE__ */ jsxs("div", {
+					style: {
+						textAlign: "center",
+						padding: "2rem 0"
+					},
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: "64px",
+								marginBottom: "1rem"
+							},
+							children: "✅"
+						}),
+						/* @__PURE__ */ jsx("h3", {
+							style: {
+								fontSize: "1.5rem",
+								fontWeight: 600,
+								color: "#10b981",
+								margin: "0 0 0.5rem 0"
+							},
+							children: i === "subscription" ? "授权成功!" : "支付成功!"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							style: {
+								color: "#6b7280",
+								margin: 0
+							},
+							children: i === "subscription" ? "订阅已激活" : "交易已完成"
+						})
+					]
+				}) : g === "select" ? /* @__PURE__ */ jsxs("div", { children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "_cppay-section",
 						children: [/* @__PURE__ */ jsx("label", {
@@ -130,14 +321,14 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 							children: "支付网络"
 						}), /* @__PURE__ */ jsx("div", {
 							className: "_cppay-grid",
-							children: M.map((t) => /* @__PURE__ */ jsxs("button", {
-								onClick: () => F(t.chain),
-								className: `_cppay-select-btn ${P === t.chain ? "_cppay-selected" : ""}`,
-								children: [t.icon && /* @__PURE__ */ jsx("img", {
-									src: t.icon,
-									alt: t.chain
-								}), /* @__PURE__ */ jsx("span", { children: t.chain })]
-							}, t.chain))
+							children: b.map((e) => /* @__PURE__ */ jsxs("button", {
+								onClick: () => C(e.chain),
+								className: `_cppay-select-btn ${S === e.chain ? "_cppay-selected" : ""}`,
+								children: [e.icon && /* @__PURE__ */ jsx("img", {
+									src: e.icon,
+									alt: e.chain
+								}), /* @__PURE__ */ jsx("span", { children: e.chain })]
+							}, e.chain))
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
@@ -147,14 +338,14 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 							children: "支付代币"
 						}), /* @__PURE__ */ jsx("div", {
 							className: "_cppay-grid",
-							children: H.map((t) => /* @__PURE__ */ jsxs("button", {
-								onClick: () => L(t.symbol),
-								className: `_cppay-select-btn ${I === t.symbol ? "_cppay-selected" : ""}`,
-								children: [t.icon && /* @__PURE__ */ jsx("img", {
-									src: t.icon,
-									alt: t.symbol
-								}), /* @__PURE__ */ jsx("span", { children: t.symbol })]
-							}, t.symbol))
+							children: L.map((e) => /* @__PURE__ */ jsxs("button", {
+								onClick: () => T(e.symbol),
+								className: `_cppay-select-btn ${w === e.symbol ? "_cppay-selected" : ""}`,
+								children: [e.icon && /* @__PURE__ */ jsx("img", {
+									src: e.icon,
+									alt: e.symbol
+								}), /* @__PURE__ */ jsx("span", { children: e.symbol })]
+							}, e.symbol))
 						})]
 					}),
 					/* @__PURE__ */ jsx("div", {
@@ -171,13 +362,13 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 									children: [/* @__PURE__ */ jsxs("div", {
 										className: "_cppay-price-main",
 										children: [
-											G,
+											H,
 											" ",
-											I
+											w
 										]
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "_cppay-price-sub",
-										children: ["≈ $", x]
+										children: ["≈ $", u]
 									})]
 								})]
 							})
@@ -186,10 +377,10 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 					/* @__PURE__ */ jsx("div", {
 						className: "_cppay-section",
 						children: /* @__PURE__ */ jsx("button", {
-							onClick: J,
-							disabled: !P || !I || A,
+							onClick: X,
+							disabled: !S || !w || v,
 							className: "_cppay-btn _cppay-btn-primary",
-							children: A ? "处理中..." : "继续支付"
+							children: v ? "处理中..." : "继续支付"
 						})
 					})
 				] }) : /* @__PURE__ */ jsxs("div", { children: [
@@ -197,17 +388,13 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 						className: "_cppay-qr-container",
 						children: /* @__PURE__ */ jsx("div", {
 							className: "_cppay-qr-code",
-							style: {
-								background: "white",
-								padding: "16px",
-								borderRadius: "16px"
-							},
-							children: R && /* @__PURE__ */ jsx("img", {
-								src: R,
+							children: E && /* @__PURE__ */ jsx("img", {
+								src: E,
 								alt: "Payment QR Code",
 								style: {
-									width: "200px",
-									height: "200px"
+									width: "160px",
+									height: "160px",
+									display: "block"
 								}
 							})
 						})
@@ -219,21 +406,21 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 								className: "_cppay-info-box",
 								children: [/* @__PURE__ */ jsx("div", {
 									className: "_cppay-info-label",
-									children: p === "subscription" ? "授权金额" : "支付金额"
+									children: i === "subscription" ? "授权金额" : "支付金额"
 								}), /* @__PURE__ */ jsx("div", {
 									className: "_cppay-info-value",
-									children: p === "subscription" ? `${W(q.current.approveAmount, U(I))} ${I}` : `${W(q.current.paymentAmount, U(I))} ${I}`
+									children: i === "subscription" ? `${V(Y.current.approveAmount, z(w))} ${w}` : `${V(Y.current.paymentAmount, z(w))} ${w}`
 								})]
 							}),
 							/* @__PURE__ */ jsxs("div", {
 								className: "_cppay-info-box",
 								children: [/* @__PURE__ */ jsx("div", {
 									className: "_cppay-info-label",
-									children: p === "subscription" ? "授权合约地址" : "支付地址"
+									children: i === "subscription" ? "授权合约地址" : "支付地址"
 								}), /* @__PURE__ */ jsxs("div", {
 									className: "_cppay-address-row",
-									children: [/* @__PURE__ */ jsx("code", { children: p === "subscription" ? q.current.spenderAddress : q.current.receiveAddress }), /* @__PURE__ */ jsx("button", {
-										onClick: Z,
+									children: [/* @__PURE__ */ jsx("code", { children: i === "subscription" ? Y.current.spenderAddress : Y.current.receiveAddress }), /* @__PURE__ */ jsx("button", {
+										onClick: Q,
 										className: "_cppay-copy-btn",
 										title: "复制地址",
 										children: /* @__PURE__ */ jsx("svg", {
@@ -250,7 +437,7 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 									})]
 								})]
 							}),
-							p === "subscription" && /* @__PURE__ */ jsxs("div", {
+							i === "subscription" && /* @__PURE__ */ jsxs("div", {
 								className: "_cppay-info-box",
 								style: {
 									background: "#fff3cd",
@@ -271,21 +458,93 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 							})
 						]
 					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "_cppay-section",
+						children: O ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+							onClick: J,
+							disabled: v,
+							className: "_cppay-btn _cppay-btn-primary",
+							children: v ? i === "subscription" ? "授权中..." : "支付中..." : i === "subscription" ? "💳 钱包授权" : "💳 钱包支付"
+						}), /* @__PURE__ */ jsxs("div", {
+							style: {
+								textAlign: "center",
+								marginTop: "8px",
+								fontSize: "12px",
+								color: "#666"
+							},
+							children: [
+								"已连接: ",
+								O.slice(0, 6),
+								"...",
+								O.slice(-4)
+							]
+						})] }) : /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								flexDirection: "row",
+								gap: "0.5rem",
+								justifyContent: "center"
+							},
+							children: [/* @__PURE__ */ jsxs("button", {
+								onClick: () => W("metamask"),
+								disabled: A,
+								className: "_cppay-btn _cppay-btn-secondary",
+								style: {
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									gap: "0.5rem",
+									padding: "0.5rem 1rem",
+									fontSize: "14px",
+									flex: "1"
+								},
+								children: [/* @__PURE__ */ jsx("img", {
+									src: metamask_default,
+									alt: "MetaMask",
+									style: {
+										width: "20px",
+										height: "20px"
+									}
+								}), /* @__PURE__ */ jsx("span", { children: "MetaMask" })]
+							}), /* @__PURE__ */ jsxs("button", {
+								onClick: () => W("walletconnect"),
+								disabled: A,
+								className: "_cppay-btn _cppay-btn-secondary",
+								style: {
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									gap: "0.5rem",
+									padding: "0.5rem 1rem",
+									fontSize: "14px",
+									flex: "1"
+								},
+								children: [/* @__PURE__ */ jsx("img", {
+									src: walletconnect_default,
+									alt: "WalletConnect",
+									style: {
+										width: "20px",
+										height: "20px"
+									}
+								}), /* @__PURE__ */ jsx("span", { children: "WalletConnect" })]
+							})]
+						})
+					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "_cppay-section",
 						children: /* @__PURE__ */ jsx("button", {
-							onClick: Y,
-							disabled: A,
+							onClick: Te,
+							disabled: v,
 							className: "_cppay-btn _cppay-btn-primary",
-							children: A ? "检查中..." : "我已完成支付"
+							children: v ? "检查中..." : "我已完成支付"
 						})
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "_cppay-section",
 						children: /* @__PURE__ */ jsx("button", {
-							onClick: () => k("select"),
-							disabled: A,
-							className: "_cppay-btn _cppay-btn-secondary",
+							onClick: () => _("select"),
+							disabled: v,
+							className: "_cppay-btn _cppay-btn-text",
 							children: "更改支付方式"
 						})
 					})
@@ -294,34 +553,34 @@ var import_browser = /* @__PURE__ */ __toESM(require_browser(), 1), PaymentDialo
 		})
 	}) : null;
 }), CppayContext = createContext(null);
-const CppayProvider = ({ apikey: t, children: d }) => {
-	let [f, p] = useState(!1), [m, h] = useState(null), g = useCallback((t) => {
-		h(t), p(!0);
-	}, []), _ = useCallback(() => {
-		p(!1);
-	}, []), v = useCallback((t) => {
-		m?.onSuccess?.(t), p(!1);
-	}, [m]), y = useCallback((t) => {
-		m?.onError?.(t);
-	}, [m]);
+const CppayProvider = ({ apikey: e, children: t }) => {
+	let [n, r] = useState(!1), [i, a] = useState(null), o = useCallback((e) => {
+		a(e), r(!0);
+	}, []), s = useCallback(() => {
+		r(!1);
+	}, []), Ce = useCallback((e) => {
+		i?.onSuccess?.(e), r(!1);
+	}, [i]), c = useCallback((e) => {
+		i?.onError?.(e);
+	}, [i]);
 	return /* @__PURE__ */ jsxs(CppayContext.Provider, {
-		value: { showPayment: g },
-		children: [d, m && /* @__PURE__ */ jsx(PaymentDialog_default, {
-			open: f,
-			onClose: _,
-			apikey: t,
-			plain: m.plain,
-			orderId: m.orderId,
-			amount: m.amount,
-			intervalDays: m.intervalDays,
-			onSuccess: v,
-			onError: y
+		value: { showPayment: o },
+		children: [t, i && /* @__PURE__ */ jsx(PaymentDialog_default, {
+			open: n,
+			onClose: s,
+			apikey: e,
+			plain: i.plain,
+			orderId: i.orderId,
+			amount: i.amount,
+			intervalDays: i.intervalDays,
+			onSuccess: Ce,
+			onError: c
 		})]
 	});
 }, useCppayPayment = () => {
-	let t = useContext(CppayContext);
-	if (!t) throw Error("useCppayPayment must be used within CppayProvider");
-	return t;
+	let e = useContext(CppayContext);
+	if (!e) throw Error("useCppayPayment must be used within CppayProvider");
+	return e;
 };
 injectStyle(payment_dialog_default);
 export { CppayProvider, PaymentDialog_default as PaymentDialog, useCppayPayment };