miniwallet 0.1.7 → 0.1.8

package/dist/miniwallet.js

@@ -1,26 +1,32 @@
 import "./miniwallet.css";
-import { createContext as e, useCallback as t, useContext as n, useEffect as r, useMemo as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/MiniWalletContext.tsx
-var c = e(null);
+var MiniWalletContext = createContext(null);
 //#endregion
 //#region src/utils/formatUnits.ts
-function l(e) {
-	if (typeof e == "bigint") return e;
-	let t = e.trim();
-	if (!t) throw Error("value must not be empty");
-	return BigInt(t);
+function parseUnitValue(value) {
+	if (typeof value === "bigint") return value;
+	const trimmed = value.trim();
+	if (!trimmed) throw new Error("value must not be empty");
+	return BigInt(trimmed);
 }
-function u(e, t) {
-	if (!Number.isInteger(t) || t < 0) throw Error("decimals must be a non-negative integer");
-	let n = l(e);
-	if (t === 0) return n.toString();
-	let r = 10n ** BigInt(t), i = n / r, a = n % r;
-	return a === 0n ? i.toString() : `${i}.${a.toString().padStart(t, "0").replace(/0+$/, "")}`;
+/**
+* Convert smallest-unit amount (e.g. wei) to a human-readable decimal string.
+*/
+function formatUnits(value, decimals) {
+	if (!Number.isInteger(decimals) || decimals < 0) throw new Error("decimals must be a non-negative integer");
+	const amount = parseUnitValue(value);
+	if (decimals === 0) return amount.toString();
+	const divisor = 10n ** BigInt(decimals);
+	const integer = amount / divisor;
+	const fraction = amount % divisor;
+	if (fraction === 0n) return integer.toString();
+	return `${integer}.${fraction.toString().padStart(decimals, "0").replace(/0+$/, "")}`;
 }
 //#endregion
 //#region src/constants.ts
-var d = [
+var WALLETS = [
 	{
 		id: "metamask",
 		name: "MetaMask",
@@ -41,13 +47,16 @@ var d = [
 		name: "Coinbase",
 		icon: "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='1783439807758'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='13209'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='32'%20height='32'%3e%3cpath%20d='M1024%20186.181818a186.181818%20186.181818%200%200%200-186.181818-186.181818H186.181818a186.181818%20186.181818%200%200%200-186.181818%20186.181818v651.636364a186.181818%20186.181818%200%200%200%20186.181818%20186.181818h651.636364a186.181818%20186.181818%200%200%200%20186.181818-186.181818V186.181818z'%20fill='%232C5FF6'%20p-id='13210'%3e%3c/path%3e%3cpath%20d='M512%20870.4a358.4%20358.4%200%201%200%200-716.8%20358.4%20358.4%200%200%200%200%20716.8zM422.4%20394.984727h179.2a27.461818%2027.461818%200%200%201%2027.461818%2027.415273v179.2a27.461818%2027.461818%200%200%201-27.461818%2027.461818h-179.2a27.461818%2027.461818%200%200%201-27.461818-27.461818v-179.2a27.461818%2027.461818%200%200%201%2027.461818-27.461818z'%20fill='%23FFFFFF'%20p-id='13211'%3e%3c/path%3e%3c/svg%3e"
 	}
-], f = {
+];
+/** EIP-6963 rdns → wallet id */
+var RDNS_TO_WALLET_ID = {
 	"io.metamask": "metamask",
 	"com.okex.wallet": "okx",
 	"com.okx.wallet": "okx",
 	"app.phantom": "phantom",
 	"com.coinbase.wallet": "coinbase"
-}, p = [
+};
+var DEFAULT_CHAINS = [
 	{
 		id: 1,
 		name: "Ethereum",
@@ -69,260 +78,343 @@ 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, 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;
+function MiniWalletProvider({ children, chains = [] }) {
+	const [account, setAccount] = useState("");
+	const [selectedWalletId, setSelectedWalletId] = useState("");
+	const [selectedChainId, setSelectedChainId] = useState(0);
+	const [balanceValue, setBalanceValue] = useState("");
+	const [connectingWallet, setConnectingWallet] = useState(null);
+	const eip6963ProvidersRef = useRef({});
+	const [providersVersion, setProvidersVersion] = useState(0);
+	const chainsList = useMemo(() => {
+		return chains.length > 0 ? chains : DEFAULT_CHAINS;
+	}, [chains]);
+	const curWalletProvider = useMemo(() => {
+		return eip6963ProvidersRef.current[selectedWalletId] ?? null;
+	}, [providersVersion, selectedWalletId]);
+	const wallet = useMemo(() => {
+		return WALLETS.find((w) => w.id === selectedWalletId);
+	}, [selectedWalletId]);
+	const isConnected = useMemo(() => {
+		return !!account;
+	}, [account]);
+	const selectedChain = useMemo(() => {
+		return chainsList.find((c) => c.id === selectedChainId) || null;
+	}, [chainsList, selectedChainId]);
+	const balance = useMemo(() => {
+		if (!selectedChain || !balanceValue || !selectedChain?.decimals) return "0";
+		return Number(formatUnits(balanceValue, selectedChain.decimals)).toFixed(3);
+	}, [balanceValue, selectedChain]);
+	const connect = useCallback(async (w) => {
+		const { id } = w;
 		try {
-			console.log("eip6963Providers: ", S);
-			let e = S[t];
-			if (!e) {
+			console.log("eip6963Providers: ", eip6963ProvidersRef.current);
+			const provider = eip6963ProvidersRef.current[id];
+			if (!provider || typeof provider.request !== "function") {
 				alert("请安装钱包");
 				return;
 			}
-			console.log("provider: ", e);
-			let n = await e.request({ method: "eth_requestAccounts" });
-			console.log("accounts: ", n), console.log("provider.chainId: ", e.chainId);
-			let r = parseInt(e.chainId, 16);
-			l(n[0]), h(t), _(r), localStorage.setItem("miniwallet:lastWalletId", t);
-		} catch (e) {
-			console.log("error: ", e);
-			let t = e, n = t?.code ?? "", r = t?.message ?? "";
-			if (n === -32002) {
-				alert("连接已发起，请在扩展中确认连接");
+			setConnectingWallet(w);
+			console.log("provider: ", provider);
+			const accounts = await provider.request({ method: "eth_requestAccounts" });
+			console.log("accounts: ", accounts);
+			console.log("provider.chainId: ", provider.chainId);
+			const chainId = parseInt(String(provider.chainId ?? "0x0"), 16);
+			setAccount(accounts[0]);
+			setSelectedWalletId(id);
+			setSelectedChainId(chainId);
+			localStorage.setItem("miniwallet:lastWalletId", id);
+			setConnectingWallet(null);
+		} catch (error) {
+			console.log("error: ", error);
+			const e = error;
+			const errCode = e?.code ?? "";
+			const errMsg = e?.message ?? "";
+			if (errCode === -32002) {
+				alert(`连接已发起，请在扩展中确认连接`);
 				return;
 			}
-			alert(`Connect failed${n && `\n${n}`}${r && `\n${r}`}`), x(null);
+			alert(`Connect failed${errCode && `\n${errCode}`}${errMsg && `\n${errMsg}`}`);
+			setConnectingWallet(null);
 		}
-	}, [S]), j = t(async () => {
+	}, []);
+	const disconnect = useCallback(async () => {
 		try {
-			if (!T || !m) {
+			if (!curWalletProvider || !selectedWalletId) {
 				alert("请安装钱包");
 				return;
 			}
-			m !== "okx" && await T.request({
+			if (selectedWalletId !== "okx") await curWalletProvider.request({
 				method: "wallet_revokePermissions",
 				params: [{ eth_accounts: {} }]
 			});
 		} catch (e) {
 			console.error("disconnect error: ", e);
 		} finally {
-			l(""), h(""), _(0), localStorage.removeItem("miniwallet:lastWalletId");
+			setAccount("");
+			setSelectedWalletId("");
+			setSelectedChainId(0);
+			localStorage.removeItem("miniwallet:lastWalletId");
 		}
-	}, [T, m]), M = t(async (e) => {
-		if (!T) {
+	}, [curWalletProvider, selectedWalletId]);
+	const switchChain = useCallback(async (chain) => {
+		if (!curWalletProvider) {
 			alert("钱包不存在");
 			return;
 		}
 		try {
-			await T.request({
+			await curWalletProvider.request({
 				method: "wallet_switchEthereumChain",
-				params: [{ chainId: `0x${e.id.toString(16)}` }]
-			}), _(e.id);
-		} catch (e) {
-			console.log("switchError: ", e);
-			let t = e, n = t?.code ?? "", r = t?.message ?? "";
-			alert(`Switch failed${n && `\n${n}`}${r && `\n${r}`}`);
+				params: [{ chainId: `0x${chain.id.toString(16)}` }]
+			});
+			setSelectedChainId(chain.id);
+		} catch (switchError) {
+			console.log("switchError: ", switchError);
+			const e = switchError;
+			const errCode = e?.code ?? "";
+			const errMsg = e?.message ?? "";
+			alert(`Switch failed${errCode && `\n${errCode}`}${errMsg && `\n${errMsg}`}`);
 		}
-	}, [T]), N = t(async () => {
+	}, [curWalletProvider]);
+	const getBalance = useCallback(async () => {
 		try {
-			if (!s || !T) return;
-			let e = await T.request({
+			if (!account || !curWalletProvider) return;
+			const balanceRes = await curWalletProvider.request({
 				method: "eth_getBalance",
-				params: [s, "latest"]
+				params: [account, "latest"]
 			});
-			y(BigInt(e).toString());
+			setBalanceValue(BigInt(balanceRes).toString());
 		} catch (e) {
 			console.error("getBalance error: ", e);
 		}
-	}, [s, T]), P = i(() => ({
-		account: s,
-		balance: k,
-		isConnected: D,
-		connectingWallet: b,
-		selectedChain: O,
-		wallet: E,
-		chains: w,
-		connect: A,
-		switchChain: M,
-		disconnect: j
+	}, [account, curWalletProvider]);
+	const value = useMemo(() => ({
+		account,
+		balance,
+		isConnected,
+		connectingWallet,
+		selectedChain,
+		wallet,
+		chains: chainsList,
+		connect,
+		switchChain,
+		disconnect
 	}), [
-		s,
-		k,
-		D,
-		b,
-		O,
-		E,
-		w,
-		A,
-		M,
-		j
+		account,
+		balance,
+		isConnected,
+		connectingWallet,
+		selectedChain,
+		wallet,
+		chainsList,
+		connect,
+		switchChain,
+		disconnect
 	]);
-	return r(() => {
-		let e = ((e) => {
-			let { info: t, provider: n } = e.detail ?? {}, r = f[t?.rdns];
-			!r || !n?.request || C((e) => e[r] === n ? e : {
-				...e,
-				[r]: n
-			});
+	useEffect(() => {
+		const handler = ((event) => {
+			const { info, provider } = event.detail ?? {};
+			const walletId = RDNS_TO_WALLET_ID[info?.rdns];
+			if (!walletId || typeof provider?.request !== "function") return;
+			if (eip6963ProvidersRef.current[walletId] === provider) return;
+			eip6963ProvidersRef.current = {
+				...eip6963ProvidersRef.current,
+				[walletId]: provider
+			};
+			setProvidersVersion((v) => v + 1);
 		});
-		return window.addEventListener("eip6963:announceProvider", e), window.dispatchEvent(new Event("eip6963:requestProvider")), () => {
-			window.removeEventListener("eip6963:announceProvider", e), C({});
+		window.addEventListener("eip6963:announceProvider", handler);
+		window.dispatchEvent(new Event("eip6963:requestProvider"));
+		return () => {
+			window.removeEventListener("eip6963:announceProvider", handler);
 		};
-	}, []), r(() => {
-		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]);
+	}, []);
+	useEffect(() => {
+		if (selectedChainId) getBalance();
+	}, [getBalance, selectedChainId]);
+	useEffect(() => {
+		if (!isConnected || !curWalletProvider?.on) return;
+		const handleChainChanged = (chainId) => {
+			console.log("ChainChanged chainId: ", chainId);
+			setSelectedChainId(parseInt(chainId, 16));
 		};
-		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);
+		const handleAccountsChanged = (accounts) => {
+			console.log("AccountsChanged accounts: ", accounts);
+			setAccount(accounts[0] ?? "");
 		};
-	}, [T, D]), r(() => {
-		if (!s) return;
-		let e = setInterval(N, 1e4);
-		return () => clearInterval(e);
-	}, [s, N]), r(() => {
-		let e = localStorage.getItem("miniwallet:lastWalletId");
-		if (!e) return;
-		let t = S[e];
-		if (!t) return;
-		let n = !1;
-		return (async () => {
-			let r = await t.request({ method: "eth_accounts" });
-			if (!n) {
-				if (!r?.length) {
-					localStorage.removeItem("miniwallet:lastWalletId");
-					return;
-				}
-				l(r[0]), h(e), _(parseInt(t.chainId, 16));
+		console.log("Listen chainChanged and accountsChanged");
+		curWalletProvider.on("chainChanged", handleChainChanged);
+		curWalletProvider.on("accountsChanged", handleAccountsChanged);
+		return () => {
+			console.log("RemoveListener chainChanged and accountsChanged");
+			curWalletProvider.removeListener?.("chainChanged", handleChainChanged);
+			curWalletProvider.removeListener?.("accountsChanged", handleAccountsChanged);
+		};
+	}, [curWalletProvider, isConnected]);
+	useEffect(() => {
+		if (!account) return;
+		const timer = setInterval(getBalance, 1e4);
+		return () => clearInterval(timer);
+	}, [account, getBalance]);
+	useEffect(() => {
+		const lastWalletId = localStorage.getItem("miniwallet:lastWalletId");
+		if (!lastWalletId) return;
+		const provider = eip6963ProvidersRef.current[lastWalletId];
+		if (!provider) return;
+		let cancelled = false;
+		(async () => {
+			const accounts = await provider.request({ method: "eth_accounts" });
+			if (cancelled) return;
+			if (!accounts?.length) {
+				localStorage.removeItem("miniwallet:lastWalletId");
+				return;
 			}
-		})(), () => {
-			n = !0;
+			setAccount(accounts[0]);
+			setSelectedWalletId(lastWalletId);
+			setSelectedChainId(parseInt(String(provider.chainId ?? "0x0"), 16));
+		})();
+		return () => {
+			cancelled = true;
 		};
-	}, [S]), /* @__PURE__ */ o(c.Provider, {
-		value: P,
-		children: e
+	}, [providersVersion]);
+	return /* @__PURE__ */ jsx(MiniWalletContext.Provider, {
+		value,
+		children
 	});
 }
 //#endregion
 //#region src/useMiniWallet.ts
-function h() {
-	let e = n(c);
-	if (!e) throw Error("useMiniWallet 必须在 MiniWalletProvider 内使用");
-	return e;
+function useMiniWallet() {
+	const ctx = useContext(MiniWalletContext);
+	if (!ctx) throw new Error("useMiniWallet 必须在 MiniWalletProvider 内使用");
+	return ctx;
 }
 //#endregion
 //#region src/icons/disconnect.svg
-var g = "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='1783575961451'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='5071'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='32'%20height='32'%3e%3cpath%20d='M512.922%2063.583c248.335%200%20449.712%20201.384%20449.712%20449.71%200%20248.333-201.377%20449.702-449.712%20449.702-248.333%200-449.71-201.369-449.71-449.702%200-248.326%20201.377-449.71%20449.71-449.71z%20m148.683%20213.634l-35.351%2061.247a206.8%20206.8%200%200%201%2034.37%2027.739c37.359%2037.351%2060.475%2088.96%2060.475%20145.955%200%2057.004-23.117%20108.607-60.475%20145.965-37.344%2037.352-88.945%2060.469-145.949%2060.469-56.987%200-108.606-23.117-145.965-60.469-37.359-37.359-60.461-88.962-60.461-145.965%200-56.995%2023.117-108.605%2060.461-145.955a209.04%20209.04%200%200%201%2027.762-23.286l-35.43-61.359a278.69%20278.69%200%200%200-42.279%2034.69c-50.156%2050.148-81.18%20119.417-81.18%20195.91%200%2076.504%2031.041%20145.773%2081.18%20195.929%2050.139%2050.139%20119.408%2081.166%20195.912%2081.166%2076.502%200%20145.771-31.026%20195.91-81.166%2050.156-50.156%2081.182-119.425%2081.182-195.929%200-76.494-31.026-145.763-81.182-195.91a277.704%20277.704%200%200%200-48.98-39.031zM473.618%20128.865v337.849h75.458V128.865h-75.458z'%20fill='%23e6523f'%20p-id='5072'%3e%3c/path%3e%3c/svg%3e";
+var disconnect_default = "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='1783575961451'%20class='icon'%20viewBox='0%200%201024%201024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20p-id='5071'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='32'%20height='32'%3e%3cpath%20d='M512.922%2063.583c248.335%200%20449.712%20201.384%20449.712%20449.71%200%20248.333-201.377%20449.702-449.712%20449.702-248.333%200-449.71-201.369-449.71-449.702%200-248.326%20201.377-449.71%20449.71-449.71z%20m148.683%20213.634l-35.351%2061.247a206.8%20206.8%200%200%201%2034.37%2027.739c37.359%2037.351%2060.475%2088.96%2060.475%20145.955%200%2057.004-23.117%20108.607-60.475%20145.965-37.344%2037.352-88.945%2060.469-145.949%2060.469-56.987%200-108.606-23.117-145.965-60.469-37.359-37.359-60.461-88.962-60.461-145.965%200-56.995%2023.117-108.605%2060.461-145.955a209.04%20209.04%200%200%201%2027.762-23.286l-35.43-61.359a278.69%20278.69%200%200%200-42.279%2034.69c-50.156%2050.148-81.18%20119.417-81.18%20195.91%200%2076.504%2031.041%20145.773%2081.18%20195.929%2050.139%2050.139%20119.408%2081.166%20195.912%2081.166%2076.502%200%20145.771-31.026%20195.91-81.166%2050.156-50.156%2081.182-119.425%2081.182-195.929%200-76.494-31.026-145.763-81.182-195.91a277.704%20277.704%200%200%200-48.98-39.031zM473.618%20128.865v337.849h75.458V128.865h-75.458z'%20fill='%23e6523f'%20p-id='5072'%3e%3c/path%3e%3c/svg%3e";
 //#endregion
 //#region src/MiniWalletButton.tsx
-function _({ label: e = "Connect Wallet" }) {
-	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 () => {
+function MiniWalletButton({ label = "Connect Wallet" }) {
+	const { account, balance, isConnected, connectingWallet, selectedChain, wallet, switchChain, chains, connect, disconnect } = useMiniWallet();
+	const [modalOpen, setModalOpen] = useState(false);
+	const [isConnectCalled, setIsConnectCalled] = useState(false);
+	const [accountModalOpen, setAccountModalOpen] = useState(false);
+	const [copyLabel, setCopyLabel] = useState("复制地址");
+	const accountText = useMemo(() => {
+		if (account) return `${account.slice(0, 6)}...${account.slice(-4)}`;
+		return "";
+	}, [account]);
+	const openModal = useCallback(() => {
+		setModalOpen(true);
+	}, []);
+	const closeModal = useCallback(() => {
+		setModalOpen(false);
+	}, []);
+	const copyAddress = useCallback(async () => {
 		try {
-			await navigator.clipboard.writeText(n), D("已复制!"), setTimeout(() => {
-				D("复制地址");
+			await navigator.clipboard.writeText(account);
+			setCopyLabel("已复制!");
+			setTimeout(() => {
+				setCopyLabel("复制地址");
 			}, 1e3);
-		} catch (e) {
-			console.error("copy", e);
+		} catch (err) {
+			console.error("copy", err);
+		}
+	}, [account]);
+	useEffect(() => {
+		if (!connectingWallet) {
+			setModalOpen(false);
+			setAccountModalOpen(false);
 		}
-	}, [n]);
-	return r(() => {
-		u || (x(!1), T(!1));
-	}, [u]), l ? /* @__PURE__ */ s("section", {
+	}, [connectingWallet]);
+	return isConnected ? /* @__PURE__ */ jsxs("section", {
 		className: "inline-flex items-center justify-center text-center",
 		children: [
-			/* @__PURE__ */ o("select", {
-				value: f?.id,
-				onChange: (e) => m(_.find((t) => t.id === Number(e.target.value))),
+			/* @__PURE__ */ jsx("select", {
+				value: selectedChain?.id,
+				onChange: (e) => switchChain(chains.find((c) => c.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: _.map((e) => /* @__PURE__ */ o("option", {
-					value: e.id,
-					children: e.name
-				}, e.id))
+				children: chains.map((chain) => /* @__PURE__ */ jsx("option", {
+					value: chain.id,
+					children: chain.name
+				}, chain.id))
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ jsxs("div", {
 				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", {
+				children: [/* @__PURE__ */ jsxs("div", {
 					onClick: () => {
-						T(!0);
+						setAccountModalOpen(true);
 					},
 					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: [
-						p && /* @__PURE__ */ o("img", {
-							src: p.icon,
-							alt: p.name,
+						wallet && /* @__PURE__ */ jsx("img", {
+							src: wallet.icon,
+							alt: wallet.name,
 							className: "h-6 w-6"
 						}),
-						/* @__PURE__ */ o("div", {
+						/* @__PURE__ */ jsx("div", {
 							className: "mr-1",
-							children: O
+							children: accountText
 						}),
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ jsxs("span", {
 							className: "text-sm text-gray-400",
 							children: [
 								"(",
-								c,
+								balance,
 								" ",
-								f?.symbol ?? "",
+								selectedChain?.symbol ?? "",
 								")"
 							]
 						})
 					]
-				}), /* @__PURE__ */ o("button", {
+				}), /* @__PURE__ */ jsx("button", {
 					className: "ml-1 h-6 w-6 cursor-pointer rounded-full",
-					onClick: y,
-					children: /* @__PURE__ */ o("img", {
-						src: g,
+					onClick: disconnect,
+					children: /* @__PURE__ */ jsx("img", {
+						src: disconnect_default,
 						alt: "disconnect",
 						className: "h-[22px] w-6"
 					})
 				})]
 			}),
-			w && /* @__PURE__ */ o("div", {
+			accountModalOpen && /* @__PURE__ */ jsx("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", {
+				children: /* @__PURE__ */ jsxs("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",
 					children: [
-						/* @__PURE__ */ o("div", {
+						/* @__PURE__ */ jsx("div", {
 							className: "mb-[-12px] w-full text-right",
-							children: /* @__PURE__ */ o("button", {
+							children: /* @__PURE__ */ jsx("button", {
 								className: "mr-[-20px] cursor-pointer rounded-full p-1 hover:bg-gray-100",
 								onClick: () => {
-									T(!1);
+									setAccountModalOpen(false);
 								},
-								children: /* @__PURE__ */ s("svg", {
+								children: /* @__PURE__ */ jsxs("svg", {
 									xmlns: "http://www.w3.org/2000/svg",
 									viewBox: "0 0 24 24",
 									fill: "none",
 									stroke: "currentColor",
 									strokeWidth: "2",
 									className: "h-8 w-8",
-									children: [/* @__PURE__ */ o("path", { d: "M18 6 6 18" }), /* @__PURE__ */ o("path", { d: "m6 6 12 12" })]
+									children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
 								})
 							})
 						}),
-						p && /* @__PURE__ */ o("img", {
-							src: p.icon,
-							alt: p.name,
+						wallet && /* @__PURE__ */ jsx("img", {
+							src: wallet.icon,
+							alt: wallet.name,
 							className: "h-16 w-16"
 						}),
-						/* @__PURE__ */ o("p", { children: O }),
-						/* @__PURE__ */ s("div", {
+						/* @__PURE__ */ jsx("p", { children: accountText }),
+						/* @__PURE__ */ jsxs("div", {
 							className: "mt-2 w-full space-x-10",
-							children: [/* @__PURE__ */ o("button", {
-								onClick: j,
+							children: [/* @__PURE__ */ jsx("button", {
+								onClick: copyAddress,
 								className: "w-[112px] cursor-pointer rounded-xl bg-gray-700 py-2 text-white shadow-md shadow-gray-500/50 outline-none",
-								children: E
-							}), /* @__PURE__ */ o("button", {
+								children: copyLabel
+							}), /* @__PURE__ */ jsx("button", {
 								type: "button",
-								onClick: y,
+								onClick: disconnect,
 								className: "w-[112px] cursor-pointer rounded-xl bg-red-400 py-2 text-white shadow-md shadow-red-500/50 outline-none",
 								children: "断开连接"
 							})]
@@ -331,82 +423,84 @@ function _({ label: e = "Connect Wallet" }) {
 				})
 			})
 		]
-	}) : /* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("button", {
+	}) : /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("button", {
 		type: "button",
-		onClick: k,
+		onClick: openModal,
 		className: "cursor-pointer rounded-xl bg-blue-500 px-4 py-2 text-white shadow-lg shadow-blue-500/50",
-		children: e
-	}), b && /* @__PURE__ */ o("div", {
+		children: label
+	}), modalOpen && /* @__PURE__ */ jsx("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", {
+		children: /* @__PURE__ */ jsxs("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",
-			children: [/* @__PURE__ */ s("div", {
+			children: [/* @__PURE__ */ jsxs("div", {
 				className: "mb-2 flex items-center justify-between",
-				children: [/* @__PURE__ */ o("span", {
+				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-2xl font-bold",
 					children: "Connect Wallet"
-				}), /* @__PURE__ */ o("button", {
+				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					"aria-label": "Close",
 					className: "cursor-pointer rounded-full p-1 hover:bg-gray-100",
 					onClick: () => {
-						C(!1), A();
+						setIsConnectCalled(false);
+						closeModal();
 					},
-					children: /* @__PURE__ */ s("svg", {
+					children: /* @__PURE__ */ jsxs("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						viewBox: "0 0 24 24",
 						fill: "none",
 						stroke: "currentColor",
 						strokeWidth: "2",
 						className: "h-8 w-8",
-						children: [/* @__PURE__ */ o("path", { d: "M18 6 6 18" }), /* @__PURE__ */ o("path", { d: "m6 6 12 12" })]
+						children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
 					})
 				})]
-			}), /* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ jsxs("div", {
 				className: "relative w-full space-y-4",
-				children: [S && u && /* @__PURE__ */ s("div", {
+				children: [isConnectCalled && connectingWallet && /* @__PURE__ */ jsxs("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: [
+						/* @__PURE__ */ jsxs("div", { children: [
 							"正在连接",
-							u.name,
+							connectingWallet.name,
 							"..."
 						] }),
-						/* @__PURE__ */ o("div", {
+						/* @__PURE__ */ jsx("div", {
 							className: "my-1.5 text-xs",
 							children: "请在扩展中确认连接"
 						}),
-						/* @__PURE__ */ o("img", {
+						/* @__PURE__ */ jsx("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", {
+				}), WALLETS.map((w) => /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => {
-						C(!0), v(e);
+						setIsConnectCalled(true);
+						connect(w);
 					},
 					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,
-						alt: e.name,
+					children: [/* @__PURE__ */ jsx("img", {
+						src: w.icon,
+						alt: w.name,
 						className: "h-8 w-8"
-					}), /* @__PURE__ */ s("div", {
+					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col justify-between text-left",
-						children: [/* @__PURE__ */ o("p", { children: e.name }), /* @__PURE__ */ s("span", {
+						children: [/* @__PURE__ */ jsx("p", { children: w.name }), /* @__PURE__ */ jsxs("span", {
 							className: "text-xs text-gray-500",
 							children: [
 								"Connect your ",
-								e.name,
+								w.name,
 								" wallet"
 							]
 						})]
 					})]
-				}, e.id))]
+				}, w.id))]
 			})]
 		})
 	})] });
 }
 //#endregion
-export { _ as MiniWalletButton, m as MiniWalletProvider, h as useMiniWallet };
+export { MiniWalletButton, MiniWalletProvider, useMiniWallet };