git.stevedylan.dev

chore: added style props 816cbfad

Steve · 2025-09-20 01:12 1 file(s) · +46 −12

src/components/connect-wallet.js +46 −12

	}

	static get observedAttributes() {
		return ["chain-id"];
		return [
			"chain-id",
			"background",
			"foreground",
			"primary",
			"secondary",
			"border-radius",
		];
	}

	attributeChangedCallback(name, oldValue, newValue) {

			if (this.connected) {
				this.checkAndSwitchChain();
			}
		} else if (
			[
				"background",
				"foreground",
				"primary",
				"secondary",
				"border-radius",
			].includes(name) &&
			oldValue !== newValue
		) {
			this.render();
		}
	}


		}
	}

	// Color helper methods
	getCSSVariable(name, defaultValue) {
		return this.getAttribute(name) || defaultValue;
	}

	// Render methods and styling
	render() {
		const background = this.getCSSVariable("background", "#232323");
		const foreground = this.getCSSVariable("foreground", "#ffffff");
		const primary = this.getCSSVariable("primary", "#5F8787");
		const secondary = this.getCSSVariable("secondary", "#6F9797");
		const borderRadius = this.getCSSVariable("border-radius", "4px");

		this.shadowRoot.innerHTML = `
			<style>
				:host {
					--bg-color: ${this.connected ? "#232323" : "#5F8787"};
					--bg-hover-color: ${this.connected ? "#262626" : "#6F9797"};
					--color-background: ${background};
					--color-foreground: ${foreground};
					--color-primary: ${primary};
					--color-secondary: ${secondary};
					--border-radius: ${borderRadius};
					--bg-color: ${this.connected ? "var(--color-background)" : "var(--color-primary)"};
					--bg-hover-color: ${this.connected ? "var(--color-background)" : "var(--color-secondary)"};
					display: inline-block;
				}

				button {
					padding: 10px 20px;
					background: var(--bg-color);
					color: white;
					color: var(--color-foreground);
					border: none;
					border-radius: 4px;
					border-radius: var(--border-radius);
					cursor: pointer;
					font-size: 16px;
					transition: background-color 0.3s ease;

					gap: 8px;
					padding: 10px 20px;
					background: var(--bg-color);
					border-radius: 4px;
					border-radius: var(--border-radius);
					border: 1px solid rgba(255, 255, 255, 0.1);
					color: white;
					color: var(--color-foreground);
					min-width: auto;
					transition: background-color 0.3s ease;
					cursor: pointer;

					right: 0;
					background: var(--bg-color);
					border: 1px solid rgba(255, 255, 255, 0.1);
					border-radius: 4px;
					border-radius: var(--border-radius);
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
					z-index: 1000;
					margin-top: 4px;

					padding: 10px 16px;
					background: var(--bg-color);
					border: none;
					color: white;
					color: var(--color-foreground);
					font-size: 14px;
					cursor: pointer;
					transition: background-color 0.2s ease;

					width: 24px;
					height: 24px;
					border-radius: 50%;
					background: linear-gradient(45deg, #667eea, #764ba2);
					background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					color: var(--color-foreground);
					font-weight: bold;
					font-size: 12px;
				}

					width: 16px;
					height: 16px;
					border: 2px solid rgba(255, 255, 255, 0.3);
					border-top: 2px solid white;
					border-top: 2px solid var(--color-foreground);
					border-radius: 50%;
					animation: spin 1s linear infinite;
				}

15	15		}
16	16
17	17		static get observedAttributes() {
18		-	return ["chain-id"];
	18	+	return [
	19	+	"chain-id",
	20	+	"background",
	21	+	"foreground",
	22	+	"primary",
	23	+	"secondary",
	24	+	"border-radius",
	25	+	];
19	26		}
20	27
21	28		attributeChangedCallback(name, oldValue, newValue) {

24	31		if (this.connected) {
25	32		this.checkAndSwitchChain();
26	33		}
	34	+	} else if (
	35	+	[
	36	+	"background",
	37	+	"foreground",
	38	+	"primary",
	39	+	"secondary",
	40	+	"border-radius",
	41	+	].includes(name) &&
	42	+	oldValue !== newValue
	43	+	) {
	44	+	this.render();
27	45		}
28	46		}
29	47

277	295		}
278	296		}
279	297
	298	+	// Color helper methods
	299	+	getCSSVariable(name, defaultValue) {
	300	+	return this.getAttribute(name) \|\| defaultValue;
	301	+	}
	302	+
280	303		// Render methods and styling
281	304		render() {
	305	+	const background = this.getCSSVariable("background", "#232323");
	306	+	const foreground = this.getCSSVariable("foreground", "#ffffff");
	307	+	const primary = this.getCSSVariable("primary", "#5F8787");
	308	+	const secondary = this.getCSSVariable("secondary", "#6F9797");
	309	+	const borderRadius = this.getCSSVariable("border-radius", "4px");
	310	+
282	311		this.shadowRoot.innerHTML = `
283	312		<style>
284	313		:host {
285		-	--bg-color: ${this.connected ? "#232323" : "#5F8787"};
286		-	--bg-hover-color: ${this.connected ? "#262626" : "#6F9797"};
	314	+	--color-background: ${background};
	315	+	--color-foreground: ${foreground};
	316	+	--color-primary: ${primary};
	317	+	--color-secondary: ${secondary};
	318	+	--border-radius: ${borderRadius};
	319	+	--bg-color: ${this.connected ? "var(--color-background)" : "var(--color-primary)"};
	320	+	--bg-hover-color: ${this.connected ? "var(--color-background)" : "var(--color-secondary)"};
287	321		display: inline-block;
288	322		}
289	323
290	324		button {
291	325		padding: 10px 20px;
292	326		background: var(--bg-color);
293		-	color: white;
	327	+	color: var(--color-foreground);
294	328		border: none;
295		-	border-radius: 4px;
	329	+	border-radius: var(--border-radius);
296	330		cursor: pointer;
297	331		font-size: 16px;
298	332		transition: background-color 0.3s ease;

318	352		gap: 8px;
319	353		padding: 10px 20px;
320	354		background: var(--bg-color);
321		-	border-radius: 4px;
	355	+	border-radius: var(--border-radius);
322	356		border: 1px solid rgba(255, 255, 255, 0.1);
323		-	color: white;
	357	+	color: var(--color-foreground);
324	358		min-width: auto;
325	359		transition: background-color 0.3s ease;
326	360		cursor: pointer;

337	371		right: 0;
338	372		background: var(--bg-color);
339	373		border: 1px solid rgba(255, 255, 255, 0.1);
340		-	border-radius: 4px;
	374	+	border-radius: var(--border-radius);
341	375		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
342	376		z-index: 1000;
343	377		margin-top: 4px;

352	386		padding: 10px 16px;
353	387		background: var(--bg-color);
354	388		border: none;
355		-	color: white;
	389	+	color: var(--color-foreground);
356	390		font-size: 14px;
357	391		cursor: pointer;
358	392		transition: background-color 0.2s ease;

382	416		width: 24px;
383	417		height: 24px;
384	418		border-radius: 50%;
385		-	background: linear-gradient(45deg, #667eea, #764ba2);
	419	+	background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
386	420		display: flex;
387	421		align-items: center;
388	422		justify-content: center;
389		-	color: white;
	423	+	color: var(--color-foreground);
390	424		font-weight: bold;
391	425		font-size: 12px;
392	426		}

424	458		width: 16px;
425	459		height: 16px;
426	460		border: 2px solid rgba(255, 255, 255, 0.3);
427		-	border-top: 2px solid white;
	461	+	border-top: 2px solid var(--color-foreground);
428	462		border-radius: 50%;
429	463		animation: spin 1s linear infinite;
430	464		}