git.stevedylan.dev

chore: refactored to use standard chain-id 0ae740fe

Steve · 2025-10-17 21:52 5 file(s) · +88 −10

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

			</div>
			<h1>Vite + React</h1>
			<div className="card">
				<connect-wallet ref={walletRef}></connect-wallet>
				<connect-wallet chain-id="1" 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 +28 −2


	attributeChangedCallback(name, oldValue, newValue) {
		if (name === "chain-id" && oldValue !== newValue) {
			this.chainId = newValue;
			this.chainId = this.normalizeChainId(newValue);
			if (this.connected) {
				this.checkAndSwitchChain();
			}

	}

	connectedCallback() {
		this.chainId = this.getAttribute("chain-id") || "0x1";
		const chainIdAttr = this.getAttribute("chain-id");
		this.chainId = this.normalizeChainId(chainIdAttr);
		this.render();
	}


	}

	// Chain management methods
	/**
	 * Converts a numeric chain ID to hex format
	 * @param {string|number} chainId - Chain ID in numeric or hex format
	 * @returns {string} Chain ID in hex format (e.g., "0x2105")
	 */
	normalizeChainId(chainId) {
		if (!chainId) return "0x1";

		const chainIdStr = String(chainId);

		// If it's already in hex format (starts with 0x), return as-is
		if (chainIdStr.startsWith("0x")) {
			return chainIdStr.toLowerCase();
		}

		// Convert numeric string to hex
		const numericChainId = parseInt(chainIdStr, 10);
		if (isNaN(numericChainId)) {
			console.warn(`Invalid chain ID: ${chainId}, defaulting to 0x1`);
			return "0x1";
		}

		return `0x${numericChainId.toString(16)}`;
	}

	async switchChain(chainId) {
		try {
			await window.ethereum.request({

site/index.html +3 −3

    <div class="flex flex-col items-start gap-4">
      <div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] flex items-center justify-center">
        <connect-wallet
          chain-id="0xaa36a7"
          chain-id="11155111"
        ></connect-wallet>
      </div>
      <div class="text-xl text-[#ccc]">connect-wallet</div>

      <div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] p-4 flex flex-col gap-4 items-center justify-center">
        <contract-call
          contract-address="0x8C9EC9c13812C7F9F26AB934d4bF36206240dDA8"
          chain-id="0xaa36a7"
          chain-id="11155111"
          method-name="increment"
          abi='[{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"number","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"newNumber","type":"uint256"}],"name":"setNumber","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
          button-text="Increment"
        ></contract-call>
        <contract-call
          contract-address="0x8C9EC9c13812C7F9F26AB934d4bF36206240dDA8"
          chain-id="0xaa36a7"
          chain-id="11155111"
          method-name="number"
          abi='[{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"number","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"newNumber","type":"uint256"}],"name":"setNumber","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
          button-text="Current Count"

src/components/connect-wallet.js +28 −2


	attributeChangedCallback(name, oldValue, newValue) {
		if (name === "chain-id" && oldValue !== newValue) {
			this.chainId = newValue;
			this.chainId = this.normalizeChainId(newValue);
			if (this.connected) {
				this.checkAndSwitchChain();
			}

	}

	connectedCallback() {
		this.chainId = this.getAttribute("chain-id") || "0x1";
		const chainIdAttr = this.getAttribute("chain-id");
		this.chainId = this.normalizeChainId(chainIdAttr);
		this.render();
	}


	}

	// Chain management methods
	/**
	 * Converts a numeric chain ID to hex format
	 * @param {string|number} chainId - Chain ID in numeric or hex format
	 * @returns {string} Chain ID in hex format (e.g., "0x2105")
	 */
	normalizeChainId(chainId) {
		if (!chainId) return "0x1";

		const chainIdStr = String(chainId);

		// If it's already in hex format (starts with 0x), return as-is
		if (chainIdStr.startsWith("0x")) {
			return chainIdStr.toLowerCase();
		}

		// Convert numeric string to hex
		const numericChainId = parseInt(chainIdStr, 10);
		if (isNaN(numericChainId)) {
			console.warn(`Invalid chain ID: ${chainId}, defaulting to 0x1`);
			return "0x1";
		}

		return `0x${numericChainId.toString(16)}`;
	}

	async switchChain(chainId) {
		try {
			await window.ethereum.request({

src/components/contract-call.js +28 −2

				this.contractAddress = newValue || "";
				break;
			case "chain-id":
				this.chainId = newValue || "0x1";
				this.chainId = this.normalizeChainId(newValue);
				break;
			case "method-name":
				this.methodName = newValue || "";


	connectedCallback() {
		this.contractAddress = this.getAttribute("contract-address") || "";
		this.chainId = this.getAttribute("chain-id") || "0x1";
		const chainIdAttr = this.getAttribute("chain-id");
		this.chainId = this.normalizeChainId(chainIdAttr);
		this.methodName = this.getAttribute("method-name") || "";
		this.buttonText = this.getAttribute("button-text") || "Call Contract";
		this.abiUrl = this.getAttribute("abi-url") || "";

			method.stateMutability === "view" || method.stateMutability === "pure";
		this.error = null;
		this.render();
	}

	/**
	 * Converts a numeric chain ID to hex format
	 * @param {string|number} chainId - Chain ID in numeric or hex format
	 * @returns {string} Chain ID in hex format (e.g., "0x2105")
	 */
	normalizeChainId(chainId) {
		if (!chainId) return "0x1";

		const chainIdStr = String(chainId);

		// If it's already in hex format (starts with 0x), return as-is
		if (chainIdStr.startsWith("0x")) {
			return chainIdStr.toLowerCase();
		}

		// Convert numeric string to hex
		const numericChainId = parseInt(chainIdStr, 10);
		if (isNaN(numericChainId)) {
			console.warn(`Invalid chain ID: ${chainId}, defaulting to 0x1`);
			return "0x1";
		}

		return `0x${numericChainId.toString(16)}`;
	}

	// Contract interaction methods

71	71
72	72		attributeChangedCallback(name, oldValue, newValue) {
73	73		if (name === "chain-id" && oldValue !== newValue) {
74		-	this.chainId = newValue;
	74	+	this.chainId = this.normalizeChainId(newValue);
75	75		if (this.connected) {
76	76		this.checkAndSwitchChain();
77	77		}

90	90		}
91	91
92	92		connectedCallback() {
93		-	this.chainId = this.getAttribute("chain-id") \|\| "0x1";
	93	+	const chainIdAttr = this.getAttribute("chain-id");
	94	+	this.chainId = this.normalizeChainId(chainIdAttr);
94	95		this.render();
95	96		}
96	97

183	184		}
184	185
185	186		// Chain management methods
	187	+	/**
	188	+	* Converts a numeric chain ID to hex format
	189	+	* @param {string\|number} chainId - Chain ID in numeric or hex format
	190	+	* @returns {string} Chain ID in hex format (e.g., "0x2105")
	191	+	*/
	192	+	normalizeChainId(chainId) {
	193	+	if (!chainId) return "0x1";
	194	+
	195	+	const chainIdStr = String(chainId);
	196	+
	197	+	// If it's already in hex format (starts with 0x), return as-is
	198	+	if (chainIdStr.startsWith("0x")) {
	199	+	return chainIdStr.toLowerCase();
	200	+	}
	201	+
	202	+	// Convert numeric string to hex
	203	+	const numericChainId = parseInt(chainIdStr, 10);
	204	+	if (isNaN(numericChainId)) {
	205	+	console.warn(`Invalid chain ID: ${chainId}, defaulting to 0x1`);
	206	+	return "0x1";
	207	+	}
	208	+
	209	+	return `0x${numericChainId.toString(16)}`;
	210	+	}
	211	+
186	212		async switchChain(chainId) {
187	213		try {
188	214		await window.ethereum.request({

42	42		<div class="flex flex-col items-start gap-4">
43	43		<div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] flex items-center justify-center">
44	44		<connect-wallet
45		-	chain-id="0xaa36a7"
	45	+	chain-id="11155111"
46	46		></connect-wallet>
47	47		</div>
48	48		<div class="text-xl text-[#ccc]">connect-wallet</div>

55	55		<div class="border border-white rounded-md sm:w-[400px] sm:h-[400px] h-[300px] w-[300px] p-4 flex flex-col gap-4 items-center justify-center">
56	56		<contract-call
57	57		contract-address="0x8C9EC9c13812C7F9F26AB934d4bF36206240dDA8"
58		-	chain-id="0xaa36a7"
	58	+	chain-id="11155111"
59	59		method-name="increment"
60	60		abi='[{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"number","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"newNumber","type":"uint256"}],"name":"setNumber","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
61	61		button-text="Increment"
62	62		></contract-call>
63	63		<contract-call
64	64		contract-address="0x8C9EC9c13812C7F9F26AB934d4bF36206240dDA8"
65		-	chain-id="0xaa36a7"
	65	+	chain-id="11155111"
66	66		method-name="number"
67	67		abi='[{"inputs":[],"name":"increment","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"number","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"newNumber","type":"uint256"}],"name":"setNumber","outputs":[],"stateMutability":"nonpayable","type":"function"}]'
68	68		button-text="Current Count"

71	71
72	72		attributeChangedCallback(name, oldValue, newValue) {
73	73		if (name === "chain-id" && oldValue !== newValue) {
74		-	this.chainId = newValue;
	74	+	this.chainId = this.normalizeChainId(newValue);
75	75		if (this.connected) {
76	76		this.checkAndSwitchChain();
77	77		}

90	90		}
91	91
92	92		connectedCallback() {
93		-	this.chainId = this.getAttribute("chain-id") \|\| "0x1";
	93	+	const chainIdAttr = this.getAttribute("chain-id");
	94	+	this.chainId = this.normalizeChainId(chainIdAttr);
94	95		this.render();
95	96		}
96	97

183	184		}
184	185
185	186		// Chain management methods
	187	+	/**
	188	+	* Converts a numeric chain ID to hex format
	189	+	* @param {string\|number} chainId - Chain ID in numeric or hex format
	190	+	* @returns {string} Chain ID in hex format (e.g., "0x2105")
	191	+	*/
	192	+	normalizeChainId(chainId) {
	193	+	if (!chainId) return "0x1";
	194	+
	195	+	const chainIdStr = String(chainId);
	196	+
	197	+	// If it's already in hex format (starts with 0x), return as-is
	198	+	if (chainIdStr.startsWith("0x")) {
	199	+	return chainIdStr.toLowerCase();
	200	+	}
	201	+
	202	+	// Convert numeric string to hex
	203	+	const numericChainId = parseInt(chainIdStr, 10);
	204	+	if (isNaN(numericChainId)) {
	205	+	console.warn(`Invalid chain ID: ${chainId}, defaulting to 0x1`);
	206	+	return "0x1";
	207	+	}
	208	+
	209	+	return `0x${numericChainId.toString(16)}`;
	210	+	}
	211	+
186	212		async switchChain(chainId) {
187	213		try {
188	214		await window.ethereum.request({

125	125		this.contractAddress = newValue \|\| "";
126	126		break;
127	127		case "chain-id":
128		-	this.chainId = newValue \|\| "0x1";
	128	+	this.chainId = this.normalizeChainId(newValue);
129	129		break;
130	130		case "method-name":
131	131		this.methodName = newValue \|\| "";

176	176
177	177		connectedCallback() {
178	178		this.contractAddress = this.getAttribute("contract-address") \|\| "";
179		-	this.chainId = this.getAttribute("chain-id") \|\| "0x1";
	179	+	const chainIdAttr = this.getAttribute("chain-id");
	180	+	this.chainId = this.normalizeChainId(chainIdAttr);
180	181		this.methodName = this.getAttribute("method-name") \|\| "";
181	182		this.buttonText = this.getAttribute("button-text") \|\| "Call Contract";
182	183		this.abiUrl = this.getAttribute("abi-url") \|\| "";

261	262		method.stateMutability === "view" \|\| method.stateMutability === "pure";
262	263		this.error = null;
263	264		this.render();
	265	+	}
	266	+
	267	+	/**
	268	+	* Converts a numeric chain ID to hex format
	269	+	* @param {string\|number} chainId - Chain ID in numeric or hex format
	270	+	* @returns {string} Chain ID in hex format (e.g., "0x2105")
	271	+	*/
	272	+	normalizeChainId(chainId) {
	273	+	if (!chainId) return "0x1";
	274	+
	275	+	const chainIdStr = String(chainId);
	276	+
	277	+	// If it's already in hex format (starts with 0x), return as-is
	278	+	if (chainIdStr.startsWith("0x")) {
	279	+	return chainIdStr.toLowerCase();
	280	+	}
	281	+
	282	+	// Convert numeric string to hex
	283	+	const numericChainId = parseInt(chainIdStr, 10);
	284	+	if (isNaN(numericChainId)) {
	285	+	console.warn(`Invalid chain ID: ${chainId}, defaulting to 0x1`);
	286	+	return "0x1";
	287	+	}
	288	+
	289	+	return `0x${numericChainId.toString(16)}`;
264	290		}
265	291
266	292		// Contract interaction methods

37	37		</div>
38	38		<h1>Vite + React</h1>
39	39		<div className="card">
40		-	<connect-wallet ref={walletRef}></connect-wallet>
	40	+	<connect-wallet chain-id="1" ref={walletRef}></connect-wallet>
41	41		</div>
42	42		<p className="read-the-docs">
43	43		Click on the Vite and React logos to learn more