From b33ce313d7df91166eecd9e7f1bad0c10f5de020 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Tue, 3 Sep 2024 14:24:19 -0700 Subject: [PATCH 1/5] fix(clerk-js): Ensure we do not attempt to access event listener in non-browser environments --- .../interactive/OrganizationProfile/OrganizationProfile.astro | 0 .../astro-components/interactive/OrganizationProfile/index.ts | 0 packages/clerk-js/src/utils/injectedWeb3Providers.ts | 4 +--- packages/clerk-js/src/utils/web3.ts | 4 +++- 4 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro create mode 100644 packages/astro/src/astro-components/interactive/OrganizationProfile/index.ts diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro b/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile/index.ts b/packages/astro/src/astro-components/interactive/OrganizationProfile/index.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/clerk-js/src/utils/injectedWeb3Providers.ts b/packages/clerk-js/src/utils/injectedWeb3Providers.ts index 0874952af88..3c5ba1c51bb 100644 --- a/packages/clerk-js/src/utils/injectedWeb3Providers.ts +++ b/packages/clerk-js/src/utils/injectedWeb3Providers.ts @@ -29,7 +29,7 @@ interface EIP6963ProviderDetail { type EIP6963AnnounceProviderEvent = CustomEvent; type InjectedWeb3Provider = MetamaskWeb3Provider | CoinbaseWeb3Provider; -class InjectedWeb3Providers { +export class InjectedWeb3Providers { #providers: EIP6963ProviderDetail[] = []; #providerIdMap: Record = { coinbase: 'Coinbase Wallet', @@ -55,5 +55,3 @@ class InjectedWeb3Providers { this.#providers.push(event.detail); }; } - -export const injectedWeb3Providers = new InjectedWeb3Providers(); diff --git a/packages/clerk-js/src/utils/web3.ts b/packages/clerk-js/src/utils/web3.ts index 31a6699bfcf..9e623673af1 100644 --- a/packages/clerk-js/src/utils/web3.ts +++ b/packages/clerk-js/src/utils/web3.ts @@ -1,7 +1,7 @@ import type { Web3Provider } from '@clerk/types'; import { toHex } from './hex'; -import { injectedWeb3Providers } from './injectedWeb3Providers'; +import { InjectedWeb3Providers } from './injectedWeb3Providers'; type GetWeb3IdentifierParams = { provider: Web3Provider; @@ -80,5 +80,7 @@ async function getEthereumProvider(provider: Web3Provider) { const sdk = new CoinbaseWalletSDK({}); return sdk.makeWeb3Provider({ options: 'all' }); } + + const injectedWeb3Providers = new InjectedWeb3Providers(); return injectedWeb3Providers.get(provider); } From 5c4720c1a14b80311d94cb471ff9865e1ccee884 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Tue, 3 Sep 2024 14:24:56 -0700 Subject: [PATCH 2/5] remove unused files --- .../interactive/OrganizationProfile/OrganizationProfile.astro | 0 .../src/astro-components/interactive/OrganizationProfile/index.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro delete mode 100644 packages/astro/src/astro-components/interactive/OrganizationProfile/index.ts diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro b/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile/index.ts b/packages/astro/src/astro-components/interactive/OrganizationProfile/index.ts deleted file mode 100644 index e69de29bb2d..00000000000 From 3052b411834e98f891368d54d7efaab3e3ef155e Mon Sep 17 00:00:00 2001 From: Robert Soriano Date: Tue, 3 Sep 2024 14:32:15 -0700 Subject: [PATCH 3/5] chore(clerk-js): Add changeset --- .changeset/modern-foxes-run.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/modern-foxes-run.md diff --git a/.changeset/modern-foxes-run.md b/.changeset/modern-foxes-run.md new file mode 100644 index 00000000000..f9ee64840dd --- /dev/null +++ b/.changeset/modern-foxes-run.md @@ -0,0 +1,5 @@ +--- +"@clerk/clerk-js": patch +--- + +Ensure we don't access `window.addEventListener()` and `window.dispatchEvent` in non-browser environments. From 0f34dd87b9556f11a51b4f48d12a582e0d81c450 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Tue, 3 Sep 2024 14:42:33 -0700 Subject: [PATCH 4/5] chore(clerk-js): Instantiate web3 listeners only once --- packages/clerk-js/src/utils/injectedWeb3Providers.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/utils/injectedWeb3Providers.ts b/packages/clerk-js/src/utils/injectedWeb3Providers.ts index 3c5ba1c51bb..c2dabe526cd 100644 --- a/packages/clerk-js/src/utils/injectedWeb3Providers.ts +++ b/packages/clerk-js/src/utils/injectedWeb3Providers.ts @@ -35,13 +35,18 @@ export class InjectedWeb3Providers { coinbase: 'Coinbase Wallet', metamask: 'MetaMask', } as const; + #hasSetupEventListeners = false; constructor() { if (typeof window === 'undefined') { return; } - window.addEventListener('eip6963:announceProvider', this.#onAnnouncement as EventListener); - window.dispatchEvent(new Event('eip6963:requestProvider')); + + if (!this.#hasSetupEventListeners) { + window.addEventListener('eip6963:announceProvider', this.#onAnnouncement as EventListener); + window.dispatchEvent(new Event('eip6963:requestProvider')); + this.#hasSetupEventListeners = true; + } } get = (provider: InjectedWeb3Provider) => { From 846c8cdb3d292b10bce9f7bba0183afa7f1e4089 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Tue, 3 Sep 2024 14:59:05 -0700 Subject: [PATCH 5/5] chore(clerk-js): Instantiate web3 listeners only once --- .../src/utils/injectedWeb3Providers.ts | 19 ++++++++++++------- packages/clerk-js/src/utils/web3.ts | 4 ++-- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/clerk-js/src/utils/injectedWeb3Providers.ts b/packages/clerk-js/src/utils/injectedWeb3Providers.ts index c2dabe526cd..006d07b3207 100644 --- a/packages/clerk-js/src/utils/injectedWeb3Providers.ts +++ b/packages/clerk-js/src/utils/injectedWeb3Providers.ts @@ -29,24 +29,27 @@ interface EIP6963ProviderDetail { type EIP6963AnnounceProviderEvent = CustomEvent; type InjectedWeb3Provider = MetamaskWeb3Provider | CoinbaseWeb3Provider; -export class InjectedWeb3Providers { +class InjectedWeb3Providers { #providers: EIP6963ProviderDetail[] = []; #providerIdMap: Record = { coinbase: 'Coinbase Wallet', metamask: 'MetaMask', } as const; - #hasSetupEventListeners = false; + static #instance: InjectedWeb3Providers | null = null; - constructor() { + private constructor() { if (typeof window === 'undefined') { return; } + window.addEventListener('eip6963:announceProvider', this.#onAnnouncement as EventListener); + window.dispatchEvent(new Event('eip6963:requestProvider')); + } - if (!this.#hasSetupEventListeners) { - window.addEventListener('eip6963:announceProvider', this.#onAnnouncement as EventListener); - window.dispatchEvent(new Event('eip6963:requestProvider')); - this.#hasSetupEventListeners = true; + public static getInstance(): InjectedWeb3Providers { + if (!InjectedWeb3Providers.#instance) { + InjectedWeb3Providers.#instance = new InjectedWeb3Providers(); } + return InjectedWeb3Providers.#instance; } get = (provider: InjectedWeb3Provider) => { @@ -60,3 +63,5 @@ export class InjectedWeb3Providers { this.#providers.push(event.detail); }; } + +export const getInjectedWeb3Providers = () => InjectedWeb3Providers.getInstance(); diff --git a/packages/clerk-js/src/utils/web3.ts b/packages/clerk-js/src/utils/web3.ts index 9e623673af1..e1d0587cefc 100644 --- a/packages/clerk-js/src/utils/web3.ts +++ b/packages/clerk-js/src/utils/web3.ts @@ -1,7 +1,7 @@ import type { Web3Provider } from '@clerk/types'; import { toHex } from './hex'; -import { InjectedWeb3Providers } from './injectedWeb3Providers'; +import { getInjectedWeb3Providers } from './injectedWeb3Providers'; type GetWeb3IdentifierParams = { provider: Web3Provider; @@ -81,6 +81,6 @@ async function getEthereumProvider(provider: Web3Provider) { return sdk.makeWeb3Provider({ options: 'all' }); } - const injectedWeb3Providers = new InjectedWeb3Providers(); + const injectedWeb3Providers = getInjectedWeb3Providers(); return injectedWeb3Providers.get(provider); }