From 8a79f5c51b30613d63508719c53c5a87415e28c1 Mon Sep 17 00:00:00 2001 From: zerosnacks Date: Tue, 28 Oct 2025 16:05:43 +0100 Subject: [PATCH 1/2] clean up --- src/App.tsx | 86 +++++++++++++++++--------------------- src/{ => styles}/App.css | 0 src/{ => utils}/helpers.ts | 0 src/{ => utils}/types.ts | 15 ++++--- 4 files changed, 49 insertions(+), 52 deletions(-) rename src/{ => styles}/App.css (100%) rename src/{ => utils}/helpers.ts (100%) rename src/{ => utils}/types.ts (72%) diff --git a/src/App.tsx b/src/App.tsx index 00e8061..bb27062 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,15 @@ -import "./App.css"; +import "./styles/App.css"; import { Porto } from "porto"; import { useEffect, useMemo, useState } from "react"; import { type Address, type Chain, createWalletClient, custom } from "viem"; import { getAddresses, requestAddresses } from "viem/actions"; -import { applyChainId } from "./helpers.ts"; -import type { AnnounceEvent, EIP1193, EIP6963ProviderInfo } from "./types.ts"; +import { applyChainId } from "./utils/helpers.ts"; +import type { + EIP1193, + EIP6963AnnounceProviderEvent, + EIP6963ProviderInfo, +} from "./utils/types.ts"; declare global { interface Window { @@ -20,34 +24,30 @@ export function App() { } }, []); - const [providers, setProviders] = useState<{ info: EIP6963ProviderInfo; provider: EIP1193 }[]>( - [], - ); + const [providers, setProviders] = useState< + { info: EIP6963ProviderInfo; provider: EIP1193 }[] + >([]); useEffect(() => { - const onAnnounce = (e: Event) => { - const ev = e as AnnounceEvent; + const onAnnounce = (ev: EIP6963AnnounceProviderEvent) => { const { info, provider } = ev.detail; + setProviders((prev) => - prev.some((p) => p.info.uuid === info.uuid) ? prev : [...prev, { info, provider }], + prev.some((p) => p.info.uuid === info.uuid) + ? prev + : [...prev, { info, provider }] ); }; - window.addEventListener("eip6963:announceProvider", onAnnounce as EventListener); + window.addEventListener("eip6963:announceProvider", onAnnounce); window.dispatchEvent(new Event("eip6963:requestProvider")); return () => { - window.removeEventListener("eip6963:announceProvider", onAnnounce as EventListener); + window.removeEventListener("eip6963:announceProvider", onAnnounce); }; }, []); const [selectedUuid, setSelectedUuid] = useState(null); - useEffect(() => { - if (providers.length === 1 && !selectedUuid) { - setSelectedUuid(providers[0].info.uuid); - } - }, [providers, selectedUuid]); - const selected = providers.find((p) => p.info.uuid === selectedUuid) ?? null; const [account, setAccount] = useState
(); @@ -58,18 +58,17 @@ export function App() { () => selected ? createWalletClient({ - chain, transport: custom(selected.provider), }) : undefined, - [selected, chain], + [selected] ); useEffect(() => { if (!selected) return; const onAccountsChanged = (accounts: readonly string[]) => - setAccount(accounts?.[0] as Address | undefined); + setAccount((accounts[0] as Address) ?? undefined); const onChainChanged = (raw: unknown) => { applyChainId(raw, setChainId, setChain); @@ -89,7 +88,9 @@ export function App() { if (!selected) return; try { - const raw = await selected.provider.request({ method: "eth_chainId" }); + const raw = await selected.provider.request({ + method: "eth_chainId", + }); applyChainId(raw, setChainId, setChain); } catch { setChainId(undefined); @@ -113,7 +114,9 @@ export function App() { setAccount(addrs[0] as Address | undefined); try { - const raw = await selected.provider.request({ method: "eth_chainId" }); + const raw = await selected.provider.request({ + method: "eth_chainId", + }); applyChainId(raw, setChainId, setChain); } catch { setChainId(undefined); @@ -121,19 +124,6 @@ export function App() { } }; - const disconnect = async () => { - setAccount(undefined); - setChainId(undefined); - setChain(undefined); - - try { - await walletClient?.transport.request({ - method: "wallet_revokePermissions", - params: [{ eth_accounts: {} }], - }); - } catch {} - }; - return (

Foundry

@@ -163,24 +153,26 @@ export function App() { {selected && account && ( 
           {`\
-chain:  ${chain ? `${chain.name} (${chainId})` : (chainId ?? "unknown")}
-rpc:    ${chain?.rpcUrls?.default?.http?.[0] ?? chain?.rpcUrls?.public?.http?.[0] ?? "unknown"}`}
+chain:  ${chain ? `${chain.name} (${chainId})` : chainId ?? "unknown"}
+rpc:    ${
+            chain?.rpcUrls?.default?.http?.[0] ??
+            chain?.rpcUrls?.public?.http?.[0] ??
+            "unknown"
+          }`}
)} - {selected && - (account ? ( - <> -
Connected: {account}
- - + {selected ? ( + account ? ( +
Connected: {account}
) : ( - - ))} + ) + ) : ( +

Please select a wallet

+ )}
); } diff --git a/src/App.css b/src/styles/App.css similarity index 100% rename from src/App.css rename to src/styles/App.css diff --git a/src/helpers.ts b/src/utils/helpers.ts similarity index 100% rename from src/helpers.ts rename to src/utils/helpers.ts diff --git a/src/types.ts b/src/utils/types.ts similarity index 72% rename from src/types.ts rename to src/utils/types.ts index b2fdadc..7cedf8e 100644 --- a/src/types.ts +++ b/src/utils/types.ts @@ -18,8 +18,14 @@ export interface EIP1193 { method: string; params?: readonly unknown[] | Record; }): Promise; - on?(event: K, listener: EIP1193Events[K]): void; - removeListener?(event: K, listener: EIP1193Events[K]): void; + on?( + event: K, + listener: EIP1193Events[K] + ): void; + removeListener?( + event: K, + listener: EIP1193Events[K] + ): void; } export type EIP6963ProviderDetail = { @@ -27,12 +33,11 @@ export type EIP6963ProviderDetail = { provider: EIP1193; }; -export interface EIP6963AnnounceProviderEvent extends CustomEvent { +export interface EIP6963AnnounceProviderEvent + extends CustomEvent { type: "eip6963:announceProvider"; } -export type AnnounceEvent = EIP6963AnnounceProviderEvent; - declare global { interface WindowEventMap { "eip6963:announceProvider": EIP6963AnnounceProviderEvent; From f1eef5e9cc0679d0fde0d014fe7675855687587e Mon Sep 17 00:00:00 2001 From: zerosnacks Date: Tue, 28 Oct 2025 16:06:44 +0100 Subject: [PATCH 2/2] clean up --- src/App.tsx | 26 ++++++++------------------ src/utils/types.ts | 13 +++---------- 2 files changed, 11 insertions(+), 28 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index bb27062..6aae4b4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,11 +5,7 @@ import { useEffect, useMemo, useState } from "react"; import { type Address, type Chain, createWalletClient, custom } from "viem"; import { getAddresses, requestAddresses } from "viem/actions"; import { applyChainId } from "./utils/helpers.ts"; -import type { - EIP1193, - EIP6963AnnounceProviderEvent, - EIP6963ProviderInfo, -} from "./utils/types.ts"; +import type { EIP1193, EIP6963AnnounceProviderEvent, EIP6963ProviderInfo } from "./utils/types.ts"; declare global { interface Window { @@ -24,18 +20,16 @@ export function App() { } }, []); - const [providers, setProviders] = useState< - { info: EIP6963ProviderInfo; provider: EIP1193 }[] - >([]); + const [providers, setProviders] = useState<{ info: EIP6963ProviderInfo; provider: EIP1193 }[]>( + [], + ); useEffect(() => { const onAnnounce = (ev: EIP6963AnnounceProviderEvent) => { const { info, provider } = ev.detail; setProviders((prev) => - prev.some((p) => p.info.uuid === info.uuid) - ? prev - : [...prev, { info, provider }] + prev.some((p) => p.info.uuid === info.uuid) ? prev : [...prev, { info, provider }], ); }; @@ -61,7 +55,7 @@ export function App() { transport: custom(selected.provider), }) : undefined, - [selected] + [selected], ); useEffect(() => { @@ -153,12 +147,8 @@ export function App() { {selected && account && ( 
           {`\
-chain:  ${chain ? `${chain.name} (${chainId})` : chainId ?? "unknown"}
-rpc:    ${
-            chain?.rpcUrls?.default?.http?.[0] ??
-            chain?.rpcUrls?.public?.http?.[0] ??
-            "unknown"
-          }`}
+chain:  ${chain ? `${chain.name} (${chainId})` : (chainId ?? "unknown")}
+rpc:    ${chain?.rpcUrls?.default?.http?.[0] ?? chain?.rpcUrls?.public?.http?.[0] ?? "unknown"}`}
)} diff --git a/src/utils/types.ts b/src/utils/types.ts index 7cedf8e..b88f6b9 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -18,14 +18,8 @@ export interface EIP1193 { method: string; params?: readonly unknown[] | Record; }): Promise; - on?( - event: K, - listener: EIP1193Events[K] - ): void; - removeListener?( - event: K, - listener: EIP1193Events[K] - ): void; + on?(event: K, listener: EIP1193Events[K]): void; + removeListener?(event: K, listener: EIP1193Events[K]): void; } export type EIP6963ProviderDetail = { @@ -33,8 +27,7 @@ export type EIP6963ProviderDetail = { provider: EIP1193; }; -export interface EIP6963AnnounceProviderEvent - extends CustomEvent { +export interface EIP6963AnnounceProviderEvent extends CustomEvent { type: "eip6963:announceProvider"; }