git.stevedylan.dev

chore: removed gas params from contract-call 594ad30e

Steve · 2025-09-21 16:20 1 file(s) · +82 −82

src/components/contract-call.js +82 −82

import { keccak_256 } from "@noble/hashes/sha3.js"
import { keccak_256 } from "@noble/hashes/sha3.js";

class ContractCall extends HTMLElement {
  /**
	* ContractCall Web Component
	*
	* A custom HTML element for interacting with Ethereum smart contracts.
	* Supports both read-only (view/pure) and write operations through wallet integration.
	*
	* @example
	* Basic usage with inline ABI:
	* ```html
	* <contract-call
	*   contract-address="0x1234567890123456789012345678901234567890"
	*   method-name="balanceOf"
	*   method-args='["0xabcdef1234567890123456789012345678901234"]'
	*   abi='[{"type":"function","name":"balanceOf","inputs":[{"type":"address","name":"owner"}],"outputs":[{"type":"uint256","name":""}],"stateMutability":"view"}]'>
	* </contract-call>
	* ```
	*
	* @example
	* Using ABI from URL:
	* ```html
	* <contract-call
	*   contract-address="0x1234567890123456789012345678901234567890"
	*   method-name="transfer"
	*   method-args='["0xrecipient123", "1000000000000000000"]'
	*   abi-url="https://api.example.com/contract-abi.json"
	*   button-text="Send Tokens">
	* </contract-call>
	* ```
	*
	* @example
	* Custom styling:
	* ```html
	* <contract-call
	*   contract-address="0x1234567890123456789012345678901234567890"
	*   method-name="getName"
	*   abi-url="/abi/token.json"
	*   background="#1a1a1a"
	*   foreground="#ffffff"
	*   primary="#00ff88"
	*   secondary="#00cc66"
	*   border-radius="8px"
	*   error-color="#ff4444"
	*   success-color="#44ff44">
	* </contract-call>
	* ```
	*
	* Attributes:
	* - contract-address (required): The Ethereum contract address
	* - method-name (required): The contract method to call
	* - method-args: JSON array of method arguments (default: [])
	* - abi: JSON string of the contract ABI
	* - abi-url: URL to fetch the contract ABI from
	* - chain-id: Ethereum chain ID in hex format (default: "0x1" for mainnet)
	* - button-text: Text displayed on the call button (default: "Call Contract")
	* - background: Background color (default: "#232323")
	* - foreground: Text color (default: "#ffffff")
	* - primary: Primary button color (default: "#5F8787")
	* - secondary: Secondary/hover color (default: "#6F9797")
	* - border-radius: Border radius for UI elements (default: "4px")
	* - error-color: Color for error messages (default: "#E78A53")
	* - success-color: Color for success messages (default: "#5F8787")
	*
	* Events:
	* - abi-loaded: Fired when ABI is successfully loaded from URL
	* - abi-error: Fired when ABI loading fails
	* - contract-call-success: Fired when contract call succeeds
	* - contract-call-error: Fired when contract call fails
	*
	* Requirements:
	* - MetaMask or compatible wallet extension
	* - @noble/hashes library for keccak256 hashing
	*
	* Notes:
	* - Read-only methods (view/pure) use eth_call
	* - Write methods send transactions via eth_sendTransaction
	* - Simplified ABI encoding/decoding (use ethers.js/web3.js for production)
	* - Automatically switches to the specified chain if needed
	*/
	/**
	 * ContractCall Web Component
	 *
	 * A custom HTML element for interacting with Ethereum smart contracts.
	 * Supports both read-only (view/pure) and write operations through wallet integration.
	 *
	 * @example
	 * Basic usage with inline ABI:
	 * ```html
	 * <contract-call
	 *   contract-address="0x1234567890123456789012345678901234567890"
	 *   method-name="balanceOf"
	 *   method-args='["0xabcdef1234567890123456789012345678901234"]'
	 *   abi='[{"type":"function","name":"balanceOf","inputs":[{"type":"address","name":"owner"}],"outputs":[{"type":"uint256","name":""}],"stateMutability":"view"}]'>
	 * </contract-call>
	 * ```
	 *
	 * @example
	 * Using ABI from URL:
	 * ```html
	 * <contract-call
	 *   contract-address="0x1234567890123456789012345678901234567890"
	 *   method-name="transfer"
	 *   method-args='["0xrecipient123", "1000000000000000000"]'
	 *   abi-url="https://api.example.com/contract-abi.json"
	 *   button-text="Send Tokens">
	 * </contract-call>
	 * ```
	 *
	 * @example
	 * Custom styling:
	 * ```html
	 * <contract-call
	 *   contract-address="0x1234567890123456789012345678901234567890"
	 *   method-name="getName"
	 *   abi-url="/abi/token.json"
	 *   background="#1a1a1a"
	 *   foreground="#ffffff"
	 *   primary="#00ff88"
	 *   secondary="#00cc66"
	 *   border-radius="8px"
	 *   error-color="#ff4444"
	 *   success-color="#44ff44">
	 * </contract-call>
	 * ```
	 *
	 * Attributes:
	 * - contract-address (required): The Ethereum contract address
	 * - method-name (required): The contract method to call
	 * - method-args: JSON array of method arguments (default: [])
	 * - abi: JSON string of the contract ABI
	 * - abi-url: URL to fetch the contract ABI from
	 * - chain-id: Ethereum chain ID in hex format (default: "0x1" for mainnet)
	 * - button-text: Text displayed on the call button (default: "Call Contract")
	 * - background: Background color (default: "#232323")
	 * - foreground: Text color (default: "#ffffff")
	 * - primary: Primary button color (default: "#5F8787")
	 * - secondary: Secondary/hover color (default: "#6F9797")
	 * - border-radius: Border radius for UI elements (default: "4px")
	 * - error-color: Color for error messages (default: "#E78A53")
	 * - success-color: Color for success messages (default: "#5F8787")
	 *
	 * Events:
	 * - abi-loaded: Fired when ABI is successfully loaded from URL
	 * - abi-error: Fired when ABI loading fails
	 * - contract-call-success: Fired when contract call succeeds
	 * - contract-call-error: Fired when contract call fails
	 *
	 * Requirements:
	 * - MetaMask or compatible wallet extension
	 * - @noble/hashes library for keccak256 hashing
	 *
	 * Notes:
	 * - Read-only methods (view/pure) use eth_call
	 * - Write methods send transactions via eth_sendTransaction
	 * - Simplified ABI encoding/decoding (use ethers.js/web3.js for production)
	 * - Automatically switches to the specified chain if needed
	 */

	// Constructor and lifecycle methods
	constructor() {

							from: accounts[0],
							to: this.contractAddress,
							data: data,
							gas: "0x30D40", // 200000 in hex - higher gas limit for contract calls
							gasPrice: "0x4A817C800", // 20 gwei in hex
						},
					],
				});

	keccak256(input) {
		const inputBytes = new TextEncoder().encode(input);
		const hashBytes = keccak_256(inputBytes);
		return Array.from(hashBytes).map(b => b.toString(16).padStart(2, '0')).join('');
		return Array.from(hashBytes)
			.map((b) => b.toString(16).padStart(2, "0"))
			.join("");
	}

	// UI helper methods

1		-	import { keccak_256 } from "@noble/hashes/sha3.js"
	1	+	import { keccak_256 } from "@noble/hashes/sha3.js";
2	2
3	3		class ContractCall extends HTMLElement {
4		-	/**
5		-	* ContractCall Web Component
6		-	*
7		-	* A custom HTML element for interacting with Ethereum smart contracts.
8		-	* Supports both read-only (view/pure) and write operations through wallet integration.
9		-	*
10		-	* @example
11		-	* Basic usage with inline ABI:
12		-	* ```html
13		-	* <contract-call
14		-	* contract-address="0x1234567890123456789012345678901234567890"
15		-	* method-name="balanceOf"
16		-	* method-args='["0xabcdef1234567890123456789012345678901234"]'
17		-	* abi='[{"type":"function","name":"balanceOf","inputs":[{"type":"address","name":"owner"}],"outputs":[{"type":"uint256","name":""}],"stateMutability":"view"}]'>
18		-	* </contract-call>
19		-	* ```
20		-	*
21		-	* @example
22		-	* Using ABI from URL:
23		-	* ```html
24		-	* <contract-call
25		-	* contract-address="0x1234567890123456789012345678901234567890"
26		-	* method-name="transfer"
27		-	* method-args='["0xrecipient123", "1000000000000000000"]'
28		-	* abi-url="https://api.example.com/contract-abi.json"
29		-	* button-text="Send Tokens">
30		-	* </contract-call>
31		-	* ```
32		-	*
33		-	* @example
34		-	* Custom styling:
35		-	* ```html
36		-	* <contract-call
37		-	* contract-address="0x1234567890123456789012345678901234567890"
38		-	* method-name="getName"
39		-	* abi-url="/abi/token.json"
40		-	* background="#1a1a1a"
41		-	* foreground="#ffffff"
42		-	* primary="#00ff88"
43		-	* secondary="#00cc66"
44		-	* border-radius="8px"
45		-	* error-color="#ff4444"
46		-	* success-color="#44ff44">
47		-	* </contract-call>
48		-	* ```
49		-	*
50		-	* Attributes:
51		-	* - contract-address (required): The Ethereum contract address
52		-	* - method-name (required): The contract method to call
53		-	* - method-args: JSON array of method arguments (default: [])
54		-	* - abi: JSON string of the contract ABI
55		-	* - abi-url: URL to fetch the contract ABI from
56		-	* - chain-id: Ethereum chain ID in hex format (default: "0x1" for mainnet)
57		-	* - button-text: Text displayed on the call button (default: "Call Contract")
58		-	* - background: Background color (default: "#232323")
59		-	* - foreground: Text color (default: "#ffffff")
60		-	* - primary: Primary button color (default: "#5F8787")
61		-	* - secondary: Secondary/hover color (default: "#6F9797")
62		-	* - border-radius: Border radius for UI elements (default: "4px")
63		-	* - error-color: Color for error messages (default: "#E78A53")
64		-	* - success-color: Color for success messages (default: "#5F8787")
65		-	*
66		-	* Events:
67		-	* - abi-loaded: Fired when ABI is successfully loaded from URL
68		-	* - abi-error: Fired when ABI loading fails
69		-	* - contract-call-success: Fired when contract call succeeds
70		-	* - contract-call-error: Fired when contract call fails
71		-	*
72		-	* Requirements:
73		-	* - MetaMask or compatible wallet extension
74		-	* - @noble/hashes library for keccak256 hashing
75		-	*
76		-	* Notes:
77		-	* - Read-only methods (view/pure) use eth_call
78		-	* - Write methods send transactions via eth_sendTransaction
79		-	* - Simplified ABI encoding/decoding (use ethers.js/web3.js for production)
80		-	* - Automatically switches to the specified chain if needed
81		-	*/
	4	+	/**
	5	+	* ContractCall Web Component
	6	+	*
	7	+	* A custom HTML element for interacting with Ethereum smart contracts.
	8	+	* Supports both read-only (view/pure) and write operations through wallet integration.
	9	+	*
	10	+	* @example
	11	+	* Basic usage with inline ABI:
	12	+	* ```html
	13	+	* <contract-call
	14	+	* contract-address="0x1234567890123456789012345678901234567890"
	15	+	* method-name="balanceOf"
	16	+	* method-args='["0xabcdef1234567890123456789012345678901234"]'
	17	+	* abi='[{"type":"function","name":"balanceOf","inputs":[{"type":"address","name":"owner"}],"outputs":[{"type":"uint256","name":""}],"stateMutability":"view"}]'>
	18	+	* </contract-call>
	19	+	* ```
	20	+	*
	21	+	* @example
	22	+	* Using ABI from URL:
	23	+	* ```html
	24	+	* <contract-call
	25	+	* contract-address="0x1234567890123456789012345678901234567890"
	26	+	* method-name="transfer"
	27	+	* method-args='["0xrecipient123", "1000000000000000000"]'
	28	+	* abi-url="https://api.example.com/contract-abi.json"
	29	+	* button-text="Send Tokens">
	30	+	* </contract-call>
	31	+	* ```
	32	+	*
	33	+	* @example
	34	+	* Custom styling:
	35	+	* ```html
	36	+	* <contract-call
	37	+	* contract-address="0x1234567890123456789012345678901234567890"
	38	+	* method-name="getName"
	39	+	* abi-url="/abi/token.json"
	40	+	* background="#1a1a1a"
	41	+	* foreground="#ffffff"
	42	+	* primary="#00ff88"
	43	+	* secondary="#00cc66"
	44	+	* border-radius="8px"
	45	+	* error-color="#ff4444"
	46	+	* success-color="#44ff44">
	47	+	* </contract-call>
	48	+	* ```
	49	+	*
	50	+	* Attributes:
	51	+	* - contract-address (required): The Ethereum contract address
	52	+	* - method-name (required): The contract method to call
	53	+	* - method-args: JSON array of method arguments (default: [])
	54	+	* - abi: JSON string of the contract ABI
	55	+	* - abi-url: URL to fetch the contract ABI from
	56	+	* - chain-id: Ethereum chain ID in hex format (default: "0x1" for mainnet)
	57	+	* - button-text: Text displayed on the call button (default: "Call Contract")
	58	+	* - background: Background color (default: "#232323")
	59	+	* - foreground: Text color (default: "#ffffff")
	60	+	* - primary: Primary button color (default: "#5F8787")
	61	+	* - secondary: Secondary/hover color (default: "#6F9797")
	62	+	* - border-radius: Border radius for UI elements (default: "4px")
	63	+	* - error-color: Color for error messages (default: "#E78A53")
	64	+	* - success-color: Color for success messages (default: "#5F8787")
	65	+	*
	66	+	* Events:
	67	+	* - abi-loaded: Fired when ABI is successfully loaded from URL
	68	+	* - abi-error: Fired when ABI loading fails
	69	+	* - contract-call-success: Fired when contract call succeeds
	70	+	* - contract-call-error: Fired when contract call fails
	71	+	*
	72	+	* Requirements:
	73	+	* - MetaMask or compatible wallet extension
	74	+	* - @noble/hashes library for keccak256 hashing
	75	+	*
	76	+	* Notes:
	77	+	* - Read-only methods (view/pure) use eth_call
	78	+	* - Write methods send transactions via eth_sendTransaction
	79	+	* - Simplified ABI encoding/decoding (use ethers.js/web3.js for production)
	80	+	* - Automatically switches to the specified chain if needed
	81	+	*/
82	82
83	83		// Constructor and lifecycle methods
84	84		constructor() {

330	330		from: accounts[0],
331	331		to: this.contractAddress,
332	332		data: data,
333		-	gas: "0x30D40", // 200000 in hex - higher gas limit for contract calls
334		-	gasPrice: "0x4A817C800", // 20 gwei in hex
335	333		},
336	334		],
337	335		});

455	453		keccak256(input) {
456	454		const inputBytes = new TextEncoder().encode(input);
457	455		const hashBytes = keccak_256(inputBytes);
458		-	return Array.from(hashBytes).map(b => b.toString(16).padStart(2, '0')).join('');
	456	+	return Array.from(hashBytes)
	457	+	.map((b) => b.toString(16).padStart(2, "0"))
	458	+	.join("");
459	459		}
460	460
461	461		// UI helper methods