miniwallet 0.1.14 → 0.1.16

package/dist/miniwallet.js

@@ -70,18 +70,18 @@ var d = [
 //#endregion
 //#region src/MiniWalletProvider.tsx
 function m({ children: e, chains: n = [] }) {
-	let [s, l] = a(""), [m, h] = a(""), [g, _] = a(0), [v, y] = a(""), [b] = a(null), [x, S] = a({}), C = i(() => n.length > 0 ? n : p, [n]), w = i(() => x[m] ?? null, [x, m]), T = i(() => d.find((e) => e.id === m), [m]), E = i(() => !!s, [s]), D = i(() => C.find((e) => e.id === g) || null, [C, g]), O = i(() => !D || !v || !D?.decimals ? "0" : Number(u(v, D.decimals)).toFixed(3), [v, D]), k = t(async (e) => {
-		let { id: t } = e, n = x[t];
+	let [s, l] = a(""), [m, h] = a(""), [g, _] = a(0), [v, y] = a(""), [b, x] = a(null), [S, C] = a({}), w = i(() => n.length > 0 ? n : p, [n]), T = i(() => S[m] ?? null, [S, m]), E = i(() => d.find((e) => e.id === m), [m]), D = i(() => !!s, [s]), O = i(() => w.find((e) => e.id === g) || null, [w, g]), k = i(() => !O || !v || !O?.decimals ? "0" : Number(u(v, O.decimals)).toFixed(3), [v, O]), A = t(async (e) => {
+		let { id: t } = e, n = S[t];
 		if (!n) {
 			alert("请安装钱包");
 			return;
 		}
 		try {
-			console.log("provider: ", n);
-			let e = await n.request({ method: "eth_requestAccounts" });
-			console.log("accounts: ", e), console.log("provider.chainId: ", n.chainId);
-			let r = parseInt(String(n.chainId ?? "0x0"), 16);
-			l(e[0]), h(t), _(r), localStorage.setItem("miniwallet:lastWalletId", t);
+			x(e), console.log("provider: ", n);
+			let r = await n.request({ method: "eth_requestAccounts" });
+			console.log("accounts: ", r), console.log("provider.chainId: ", n.chainId);
+			let i = parseInt(String(n.chainId ?? "0x0"), 16);
+			l(r[0]), h(t), _(i), localStorage.setItem("miniwallet:lastWalletId", t);
 		} catch (e) {
 			console.log("error: ", e);
 			let t = e, n = t?.code ?? "", r = t?.message ?? "";
@@ -90,14 +90,16 @@ function m({ children: e, chains: n = [] }) {
 				return;
 			}
 			alert(`Connect failed${n && `\n${n}`}${r && `\n${r}`}`);
+		} finally {
+			x(null);
 		}
-	}, [x]), A = t(async () => {
+	}, [S]), j = t(async () => {
 		try {
-			if (!w || !m) {
+			if (!T || !m) {
 				alert("请安装钱包");
 				return;
 			}
-			m !== "okx" && await w.request({
+			m !== "okx" && await T.request({
 				method: "wallet_revokePermissions",
 				params: [{ eth_accounts: {} }]
 			});
@@ -106,13 +108,13 @@ function m({ children: e, chains: n = [] }) {
 		} finally {
 			l(""), h(""), _(0), localStorage.removeItem("miniwallet:lastWalletId");
 		}
-	}, [w, m]), j = t(async (e) => {
-		if (!w) {
+	}, [T, m]), M = t(async (e) => {
+		if (!T) {
 			alert("钱包不存在");
 			return;
 		}
 		try {
-			await w.request({
+			await T.request({
 				method: "wallet_switchEthereumChain",
 				params: [{ chainId: `0x${e.id.toString(16)}` }]
 			}), _(e.id);
@@ -121,10 +123,10 @@ function m({ children: e, chains: n = [] }) {
 			let t = e, n = t?.code ?? "", r = t?.message ?? "";
 			alert(`Switch failed${n && `\n${n}`}${r && `\n${r}`}`);
 		}
-	}, [w]), M = t(async () => {
+	}, [T]), N = t(async () => {
 		try {
-			if (!s || !w) return;
-			let e = await w.request({
+			if (!s || !T) return;
+			let e = await T.request({
 				method: "eth_getBalance",
 				params: [s, "latest"]
 			});
@@ -132,60 +134,60 @@ function m({ children: e, chains: n = [] }) {
 		} catch (e) {
 			console.error("getBalance error: ", e);
 		}
-	}, [s, w]), N = i(() => ({
+	}, [s, T]), P = i(() => ({
 		account: s,
-		balance: O,
-		isConnected: E,
+		balance: k,
+		isConnected: D,
 		connectingWallet: b,
-		selectedChain: D,
-		wallet: T,
-		chains: C,
-		connect: k,
-		switchChain: j,
-		disconnect: A
+		selectedChain: O,
+		wallet: E,
+		chains: w,
+		connect: A,
+		switchChain: M,
+		disconnect: j
 	}), [
 		s,
+		k,
+		D,
+		b,
 		O,
 		E,
-		b,
-		D,
-		T,
-		C,
-		k,
-		j,
-		A
+		w,
+		A,
+		M,
+		j
 	]);
 	return r(() => {
 		let e = ((e) => {
 			let { info: t, provider: n } = e.detail ?? {}, r = f[t?.rdns];
-			!r || !n?.request || S((e) => e[r] === n ? e : {
+			!r || !n?.request || C((e) => e[r] === n ? e : {
 				...e,
 				[r]: n
 			});
 		});
 		return window.addEventListener("eip6963:announceProvider", e), window.dispatchEvent(new Event("eip6963:requestProvider")), () => {
-			window.removeEventListener("eip6963:announceProvider", e), S({});
+			window.removeEventListener("eip6963:announceProvider", e), C({});
 		};
 	}, []), r(() => {
-		g && M();
-	}, [M, g]), r(() => {
-		if (!E || !w?.on) return;
+		g && N();
+	}, [N, g]), r(() => {
+		if (!D || !T?.on) return;
 		let e = (e) => {
 			console.log("ChainChanged chainId: ", e), _(parseInt(e, 16));
 		}, t = (e) => {
 			console.log("AccountsChanged accounts: ", e), l(e[0] ?? "");
 		};
-		return console.log("Listen chainChanged and accountsChanged"), w.on("chainChanged", e), w.on("accountsChanged", t), () => {
-			console.log("RemoveListener chainChanged and accountsChanged"), w.removeListener("chainChanged", e), w.removeListener("accountsChanged", t);
+		return console.log("Listen chainChanged and accountsChanged"), T.on("chainChanged", e), T.on("accountsChanged", t), () => {
+			console.log("RemoveListener chainChanged and accountsChanged"), T.removeListener("chainChanged", e), T.removeListener("accountsChanged", t);
 		};
-	}, [E, w]), r(() => {
+	}, [D, T]), r(() => {
 		if (!s) return;
-		let e = setInterval(M, 1e4);
+		let e = setInterval(N, 1e4);
 		return () => clearInterval(e);
-	}, [s, M]), r(() => {
+	}, [s, N]), r(() => {
 		let e = localStorage.getItem("miniwallet:lastWalletId");
 		if (!e) return;
-		let t = x[e];
+		let t = S[e];
 		if (!t) return;
 		let n = !1;
 		return (async () => {
@@ -200,8 +202,8 @@ function m({ children: e, chains: n = [] }) {
 		})(), () => {
 			n = !0;
 		};
-	}, [x]), /* @__PURE__ */ o(c.Provider, {
-		value: N,
+	}, [S]), /* @__PURE__ */ o(c.Provider, {
+		value: P,
 		children: e
 	});
 }
@@ -218,29 +220,29 @@ var g = "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOC
 //#endregion
 //#region src/MiniWalletButton.tsx
 function _({ label: e = "Connect Wallet" }) {
-	let { account: n, balance: c, isConnected: l, selectedChain: u, wallet: f, switchChain: p, chains: m, connect: _, disconnect: v } = h(), [y, b] = a(!1), [x, S] = a(!1), [C, w] = a("复制地址"), T = i(() => n ? `${n.slice(0, 6)}...${n.slice(-4)}` : "", [n]), E = t(() => {
-		b(!0);
-	}, []), D = t(() => {
-		b(!1);
-	}, []), O = t(async () => {
+	let { account: n, balance: c, isConnected: l, connectingWallet: u, selectedChain: f, wallet: p, switchChain: m, chains: _, connect: v, disconnect: y } = h(), [b, x] = a(!1), [S, C] = a(!1), [w, T] = a(!1), [E, D] = a("复制地址"), O = i(() => n ? `${n.slice(0, 6)}...${n.slice(-4)}` : "", [n]), k = t(() => {
+		x(!0);
+	}, []), A = t(() => {
+		x(!1);
+	}, []), j = t(async () => {
 		try {
-			await navigator.clipboard.writeText(n), w("已复制!"), setTimeout(() => {
-				w("复制地址");
+			await navigator.clipboard.writeText(n), D("已复制!"), setTimeout(() => {
+				D("复制地址");
 			}, 1e3);
 		} catch (e) {
 			console.error("copy", e);
 		}
 	}, [n]);
 	return r(() => {
-		l && b(!1);
+		l && x(!1);
 	}, [l]), l ? /* @__PURE__ */ s("section", {
 		className: "inline-flex items-center justify-center text-center",
 		children: [
 			/* @__PURE__ */ o("select", {
-				value: u?.id,
-				onChange: (e) => p(m.find((t) => t.id === Number(e.target.value))),
+				value: f?.id,
+				onChange: (e) => m(_.find((t) => t.id === Number(e.target.value))),
 				className: "bg-transparent1 mr-4 cursor-pointer rounded-sm border-none p-1 text-gray-600 outline-none hover:bg-gray-100",
-				children: m.map((e) => /* @__PURE__ */ o("option", {
+				children: _.map((e) => /* @__PURE__ */ o("option", {
 					value: e.id,
 					children: e.name
 				}, e.id))
@@ -249,18 +251,18 @@ function _({ label: e = "Connect Wallet" }) {
 				className: "flex items-center justify-center rounded-2xl bg-white pr-3 shadow-lg inset-ring-1 shadow-gray-200 inset-ring-gray-100",
 				children: [/* @__PURE__ */ s("div", {
 					onClick: () => {
-						S(!0);
+						T(!0);
 					},
 					className: "flex cursor-pointer items-center justify-center space-x-2 rounded-l-2xl py-2.5 pr-1 pl-3 hover:bg-gray-50",
 					children: [
-						f && /* @__PURE__ */ o("img", {
-							src: f.icon,
-							alt: f.name,
+						p && /* @__PURE__ */ o("img", {
+							src: p.icon,
+							alt: p.name,
 							className: "h-6 w-6"
 						}),
 						/* @__PURE__ */ o("div", {
 							className: "mr-1",
-							children: T
+							children: O
 						}),
 						/* @__PURE__ */ s("span", {
 							className: "text-sm text-gray-400",
@@ -268,14 +270,14 @@ function _({ label: e = "Connect Wallet" }) {
 								"(",
 								c,
 								" ",
-								u?.symbol ?? "",
+								f?.symbol ?? "",
 								")"
 							]
 						})
 					]
 				}), /* @__PURE__ */ o("button", {
 					className: "ml-1 h-6 w-6 cursor-pointer rounded-full",
-					onClick: v,
+					onClick: y,
 					children: /* @__PURE__ */ o("img", {
 						src: g,
 						alt: "disconnect",
@@ -283,7 +285,7 @@ function _({ label: e = "Connect Wallet" }) {
 					})
 				})]
 			}),
-			x && /* @__PURE__ */ o("div", {
+			w && /* @__PURE__ */ o("div", {
 				className: "z-index-10 fixed top-0 right-0 bottom-0 left-0 bg-[rgba(0,0,0,0.5)]",
 				children: /* @__PURE__ */ s("div", {
 					className: "absolute top-1/2 left-1/2 flex h-auto w-[380px] -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-3 rounded-3xl bg-white p-10 pt-5 text-center",
@@ -293,7 +295,7 @@ function _({ label: e = "Connect Wallet" }) {
 							children: /* @__PURE__ */ o("button", {
 								className: "mr-[-20px] cursor-pointer rounded-full p-1 hover:bg-gray-100",
 								onClick: () => {
-									S(!1);
+									T(!1);
 								},
 								children: /* @__PURE__ */ s("svg", {
 									xmlns: "http://www.w3.org/2000/svg",
@@ -306,21 +308,21 @@ function _({ label: e = "Connect Wallet" }) {
 								})
 							})
 						}),
-						f && /* @__PURE__ */ o("img", {
-							src: f.icon,
-							alt: f.name,
+						p && /* @__PURE__ */ o("img", {
+							src: p.icon,
+							alt: p.name,
 							className: "h-16 w-16"
 						}),
-						/* @__PURE__ */ o("p", { children: T }),
+						/* @__PURE__ */ o("p", { children: O }),
 						/* @__PURE__ */ s("div", {
 							className: "mt-2 w-full space-x-10",
 							children: [/* @__PURE__ */ o("button", {
-								onClick: O,
+								onClick: j,
 								className: "w-[112px] cursor-pointer rounded-xl bg-gray-700 py-2 text-white shadow-md shadow-gray-500/50 outline-none",
-								children: C
+								children: E
 							}), /* @__PURE__ */ o("button", {
 								type: "button",
-								onClick: v,
+								onClick: y,
 								className: "w-[112px] cursor-pointer rounded-xl bg-red-400 py-2 text-white shadow-md shadow-red-500/50 outline-none",
 								children: "断开连接"
 							})]
@@ -331,10 +333,10 @@ function _({ label: e = "Connect Wallet" }) {
 		]
 	}) : /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("button", {
 		type: "button",
-		onClick: E,
+		onClick: k,
 		className: "cursor-pointer rounded-xl bg-blue-500 px-4 py-2 text-white shadow-lg shadow-blue-500/50",
 		children: e
-	}), y && /* @__PURE__ */ o("div", {
+	}), b && /* @__PURE__ */ o("div", {
 		className: "z-index-10 fixed top-0 right-0 bottom-0 left-0 bg-[rgba(0,0,0,0.5)]",
 		children: /* @__PURE__ */ s("div", {
 			className: "absolute top-1/2 left-1/2 flex h-auto w-[380px] -translate-x-1/2 -translate-y-1/2 flex-col gap-3 rounded-3xl bg-white p-6",
@@ -347,7 +349,9 @@ function _({ label: e = "Connect Wallet" }) {
 					type: "button",
 					"aria-label": "Close",
 					className: "cursor-pointer rounded-full p-1 hover:bg-gray-100",
-					onClick: D,
+					onClick: () => {
+						C(!1), A();
+					},
 					children: /* @__PURE__ */ s("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						viewBox: "0 0 24 24",
@@ -358,11 +362,31 @@ function _({ label: e = "Connect Wallet" }) {
 						children: [/* @__PURE__ */ o("path", { d: "M18 6 6 18" }), /* @__PURE__ */ o("path", { d: "m6 6 12 12" })]
 					})
 				})]
-			}), /* @__PURE__ */ o("div", {
+			}), /* @__PURE__ */ s("div", {
 				className: "relative w-full space-y-4",
-				children: d.map((e) => /* @__PURE__ */ s("button", {
+				children: [S && u && /* @__PURE__ */ s("div", {
+					className: "absolute inset-0 mb-0 flex flex-col items-center justify-center rounded-xl bg-[rgba(255,255,255,0.9)] text-black",
+					children: [
+						/* @__PURE__ */ s("div", { children: [
+							"正在连接",
+							u.name,
+							"..."
+						] }),
+						/* @__PURE__ */ o("div", {
+							className: "my-1.5 text-xs",
+							children: "请在扩展中确认连接"
+						}),
+						/* @__PURE__ */ o("img", {
+							src: "data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20t='1783646544006'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='78324'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='32'%20height='32'%3e%3cpath%20d='M512%20907c-24.852%200-45-20.148-45-45s20.148-45%2045-45c168.446%200%20305-136.554%20305-305S680.446%20207%20512%20207%20207%20343.554%20207%20512c0%2024.852-20.148%2045-45%2045S117%20536.852%20117%20512c0-218.152%20176.848-395%20395-395S907%20293.848%20907%20512%20730.152%20907%20512%20907z'%20fill='%23444444'%20p-id='78325'%3e%3c/path%3e%3c/svg%3e",
+							alt: "spin",
+							className: "h-8 w-8 animate-[spin_2s_linear_infinite]"
+						})
+					]
+				}), d.map((e) => /* @__PURE__ */ s("button", {
 					type: "button",
-					onClick: () => _(e),
+					onClick: () => {
+						C(!0), v(e);
+					},
 					className: "flex w-full cursor-pointer items-center gap-2 rounded-xl border border-gray-300 px-4 py-2 hover:bg-gray-100",
 					children: [/* @__PURE__ */ o("img", {
 						src: e.icon,
@@ -379,7 +403,7 @@ function _({ label: e = "Connect Wallet" }) {
 							]
 						})]
 					})]
-				}, e.id))
+				}, e.id))]
 			})]
 		})
 	})] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miniwallet",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "React wallet connect button with multi-wallet support via EIP-6963",
   "type": "module",
   "main": "./dist/miniwallet.js",