git.stevedylan.dev

chore: updated example and connect-wallet for callbacks and types b095e565

Steve · 2025-10-17 21:42 5 file(s) · +89 −14

examples/vite-react/custom-elements-jsx.d.ts → examples/vite-react/src/components/custom-elements-jsx.d.ts +0 −0

examples/vite-react/src/App.tsx +22 −1

import { useEffect, useRef } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import "./components/connect-wallet";

function App() {
	const walletRef = useRef<any>(null);

	// Example of using callbacks
	useEffect(() => {
		const walletElement = walletRef.current;
		if (!walletElement) return;

		walletElement.onWalletConnected = (detail: any) => {
			console.log("connected via callback: ", detail);
		};

		walletElement.onWalletDisconnected = () => {
			console.log("disconnected via callback");
		};

		walletElement.onWalletError = (detail: any) => {
			console.log("error via callback: ", detail);
		};
	}, []);

	return (
		<>
			<div>

			</div>
			<h1>Vite + React</h1>
			<div className="card">
				<connect-wallet></connect-wallet>
				<connect-wallet ref={walletRef}></connect-wallet>
			</div>
			<p className="read-the-docs">
				Click on the Vite and React logos to learn more

examples/vite-react/src/components/connect-wallet.js +33 −6

		this.showPopover = false;
		this.balance = "0";
		this.copySuccess = false;

		// React-friendly callback properties
		this.onWalletConnected = null;
		this.onWalletDisconnected = null;
		this.onWalletError = null;
	}

	static get observedAttributes() {

				this.loading = false;
				this.render();

				const eventDetail = {
					address: this.address,
					ensData: this.ensData,
					chainId: this.currentChainId,
				};

				// Dispatch custom event for vanilla JS and other frameworks
				this.dispatchEvent(
					new CustomEvent("wallet-connected", {
						detail: {
							address: this.address,
							ensData: this.ensData,
							chainId: this.currentChainId,
						},
						detail: eventDetail,
					}),
				);

				// Call callback property if set (React-friendly)
				if (typeof this.onWalletConnected === "function") {
					this.onWalletConnected(eventDetail);
				}
			} catch (error) {
				console.error("Connection failed", error);
				this.loading = false;
				this.render();

				const errorDetail = { error: error.message };

				// Dispatch custom event for vanilla JS and other frameworks
				this.dispatchEvent(
					new CustomEvent("wallet-error", {
						detail: { error: error.message },
						detail: errorDetail,
					}),
				);

				// Call callback property if set (React-friendly)
				if (typeof this.onWalletError === "function") {
					this.onWalletError(errorDetail);
				}
			}
		} else {
			alert("Please install a wallet extension like MetaMask");

		this.copySuccess = false;
		this.render();

		// Dispatch custom event for vanilla JS and other frameworks
		this.dispatchEvent(new CustomEvent("wallet-disconnected"));

		// Call callback property if set (React-friendly)
		if (typeof this.onWalletDisconnected === "function") {
			this.onWalletDisconnected();
		}
	}

	// Chain management methods

examples/vite-react/tsconfig.app.json +1 −1

		"noFallthroughCasesInSwitch": true,
		"noUncheckedSideEffectImports": true
	},
	"include": ["src", "custom-elements-jsx.d.ts"]
	"include": ["src"]
}

src/components/connect-wallet.js +33 −6

		this.showPopover = false;
		this.balance = "0";
		this.copySuccess = false;

		// React-friendly callback properties
		this.onWalletConnected = null;
		this.onWalletDisconnected = null;
		this.onWalletError = null;
	}

	static get observedAttributes() {

				this.loading = false;
				this.render();

				const eventDetail = {
					address: this.address,
					ensData: this.ensData,
					chainId: this.currentChainId,
				};

				// Dispatch custom event for vanilla JS and other frameworks
				this.dispatchEvent(
					new CustomEvent("wallet-connected", {
						detail: {
							address: this.address,
							ensData: this.ensData,
							chainId: this.currentChainId,
						},
						detail: eventDetail,
					}),
				);

				// Call callback property if set (React-friendly)
				if (typeof this.onWalletConnected === "function") {
					this.onWalletConnected(eventDetail);
				}
			} catch (error) {
				console.error("Connection failed", error);
				this.loading = false;
				this.render();

				const errorDetail = { error: error.message };

				// Dispatch custom event for vanilla JS and other frameworks
				this.dispatchEvent(
					new CustomEvent("wallet-error", {
						detail: { error: error.message },
						detail: errorDetail,
					}),
				);

				// Call callback property if set (React-friendly)
				if (typeof this.onWalletError === "function") {
					this.onWalletError(errorDetail);
				}
			}
		} else {
			alert("Please install a wallet extension like MetaMask");

		this.copySuccess = false;
		this.render();

		// Dispatch custom event for vanilla JS and other frameworks
		this.dispatchEvent(new CustomEvent("wallet-disconnected"));

		// Call callback property if set (React-friendly)
		if (typeof this.onWalletDisconnected === "function") {
			this.onWalletDisconnected();
		}
	}

	// Chain management methods

51	51		this.showPopover = false;
52	52		this.balance = "0";
53	53		this.copySuccess = false;
	54	+
	55	+	// React-friendly callback properties
	56	+	this.onWalletConnected = null;
	57	+	this.onWalletDisconnected = null;
	58	+	this.onWalletError = null;
54	59		}
55	60
56	61		static get observedAttributes() {

117	122		this.loading = false;
118	123		this.render();
119	124
	125	+	const eventDetail = {
	126	+	address: this.address,
	127	+	ensData: this.ensData,
	128	+	chainId: this.currentChainId,
	129	+	};
	130	+
	131	+	// Dispatch custom event for vanilla JS and other frameworks
120	132		this.dispatchEvent(
121	133		new CustomEvent("wallet-connected", {
122		-	detail: {
123		-	address: this.address,
124		-	ensData: this.ensData,
125		-	chainId: this.currentChainId,
126		-	},
	134	+	detail: eventDetail,
127	135		}),
128	136		);
	137	+
	138	+	// Call callback property if set (React-friendly)
	139	+	if (typeof this.onWalletConnected === "function") {
	140	+	this.onWalletConnected(eventDetail);
	141	+	}
129	142		} catch (error) {
130	143		console.error("Connection failed", error);
131	144		this.loading = false;
132	145		this.render();
133	146
	147	+	const errorDetail = { error: error.message };
	148	+
	149	+	// Dispatch custom event for vanilla JS and other frameworks
134	150		this.dispatchEvent(
135	151		new CustomEvent("wallet-error", {
136		-	detail: { error: error.message },
	152	+	detail: errorDetail,
137	153		}),
138	154		);
	155	+
	156	+	// Call callback property if set (React-friendly)
	157	+	if (typeof this.onWalletError === "function") {
	158	+	this.onWalletError(errorDetail);
	159	+	}
139	160		}
140	161		} else {
141	162		alert("Please install a wallet extension like MetaMask");

152	173		this.copySuccess = false;
153	174		this.render();
154	175
	176	+	// Dispatch custom event for vanilla JS and other frameworks
155	177		this.dispatchEvent(new CustomEvent("wallet-disconnected"));
	178	+
	179	+	// Call callback property if set (React-friendly)
	180	+	if (typeof this.onWalletDisconnected === "function") {
	181	+	this.onWalletDisconnected();
	182	+	}
156	183		}
157	184
158	185		// Chain management methods

51	51		this.showPopover = false;
52	52		this.balance = "0";
53	53		this.copySuccess = false;
	54	+
	55	+	// React-friendly callback properties
	56	+	this.onWalletConnected = null;
	57	+	this.onWalletDisconnected = null;
	58	+	this.onWalletError = null;
54	59		}
55	60
56	61		static get observedAttributes() {

117	122		this.loading = false;
118	123		this.render();
119	124
	125	+	const eventDetail = {
	126	+	address: this.address,
	127	+	ensData: this.ensData,
	128	+	chainId: this.currentChainId,
	129	+	};
	130	+
	131	+	// Dispatch custom event for vanilla JS and other frameworks
120	132		this.dispatchEvent(
121	133		new CustomEvent("wallet-connected", {
122		-	detail: {
123		-	address: this.address,
124		-	ensData: this.ensData,
125		-	chainId: this.currentChainId,
126		-	},
	134	+	detail: eventDetail,
127	135		}),
128	136		);
	137	+
	138	+	// Call callback property if set (React-friendly)
	139	+	if (typeof this.onWalletConnected === "function") {
	140	+	this.onWalletConnected(eventDetail);
	141	+	}
129	142		} catch (error) {
130	143		console.error("Connection failed", error);
131	144		this.loading = false;
132	145		this.render();
133	146
	147	+	const errorDetail = { error: error.message };
	148	+
	149	+	// Dispatch custom event for vanilla JS and other frameworks
134	150		this.dispatchEvent(
135	151		new CustomEvent("wallet-error", {
136		-	detail: { error: error.message },
	152	+	detail: errorDetail,
137	153		}),
138	154		);
	155	+
	156	+	// Call callback property if set (React-friendly)
	157	+	if (typeof this.onWalletError === "function") {
	158	+	this.onWalletError(errorDetail);
	159	+	}
139	160		}
140	161		} else {
141	162		alert("Please install a wallet extension like MetaMask");

152	173		this.copySuccess = false;
153	174		this.render();
154	175
	176	+	// Dispatch custom event for vanilla JS and other frameworks
155	177		this.dispatchEvent(new CustomEvent("wallet-disconnected"));
	178	+
	179	+	// Call callback property if set (React-friendly)
	180	+	if (typeof this.onWalletDisconnected === "function") {
	181	+	this.onWalletDisconnected();
	182	+	}
156	183		}
157	184
158	185		// Chain management methods

	1	+	import { useEffect, useRef } from "react";
1	2		import reactLogo from "./assets/react.svg";
2	3		import viteLogo from "/vite.svg";
3	4		import "./App.css";
4	5		import "./components/connect-wallet";
5	6
6	7		function App() {
	8	+	const walletRef = useRef<any>(null);
	9	+
	10	+	// Example of using callbacks
	11	+	useEffect(() => {
	12	+	const walletElement = walletRef.current;
	13	+	if (!walletElement) return;
	14	+
	15	+	walletElement.onWalletConnected = (detail: any) => {
	16	+	console.log("connected via callback: ", detail);
	17	+	};
	18	+
	19	+	walletElement.onWalletDisconnected = () => {
	20	+	console.log("disconnected via callback");
	21	+	};
	22	+
	23	+	walletElement.onWalletError = (detail: any) => {
	24	+	console.log("error via callback: ", detail);
	25	+	};
	26	+	}, []);
	27	+
7	28		return (
8	29		<>
9	30		<div>

16	37		</div>
17	38		<h1>Vite + React</h1>
18	39		<div className="card">
19		-	<connect-wallet></connect-wallet>
	40	+	<connect-wallet ref={walletRef}></connect-wallet>
20	41		</div>
21	42		<p className="read-the-docs">
22	43		Click on the Vite and React logos to learn more

22	22		"noFallthroughCasesInSwitch": true,
23	23		"noUncheckedSideEffectImports": true
24	24		},
25		-	"include": ["src", "custom-elements-jsx.d.ts"]
	25	+	"include": ["src"]
26	26		}