From 8568534f4ff08f630dbe0fe1f718eeb8b9af2c1d Mon Sep 17 00:00:00 2001
From: Haris Chaniotakis <haris@clerk.dev>
Date: Tue, 1 Oct 2024 10:31:32 +0300
Subject: [PATCH] fix(clerk-js): Handle gracefully yet unknown to our
 components Web3 providers (#4263)

---
 .changeset/hot-pants-change.md                            | 5 +++++
 .../src/ui/hooks/useEnabledThirdPartyProviders.tsx        | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/hot-pants-change.md

diff --git a/.changeset/hot-pants-change.md b/.changeset/hot-pants-change.md
new file mode 100644
index 00000000000..56ad1cf8453
--- /dev/null
+++ b/.changeset/hot-pants-change.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Handle gracefully yet unknown to our components Web3 providers
diff --git a/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx b/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx
index 3734d547327..00c65c1895c 100644
--- a/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx
+++ b/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx
@@ -23,6 +23,7 @@ type ThirdPartyProviderToDataMap = {
 };
 
 const oauthStrategies = OAUTH_PROVIDERS.map(p => p.strategy);
+const web3Strategies = WEB3_PROVIDERS.map(p => p.strategy);
 
 const providerToDisplayData: ThirdPartyProviderToDataMap = fromEntries(
   [...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(p => {
@@ -89,9 +90,12 @@ export const useEnabledThirdPartyProviders = () => {
     return aName.localeCompare(bName);
   });
 
+  // Filter out any Web3 strategies that are not yet known, they are not included in our types.
+  const knownWeb3Strategies = web3FirstFactors.filter(s => web3Strategies.includes(s));
+
   return {
-    strategies: [...knownSocialProviderStrategies, ...web3FirstFactors, ...customSocialProviderStrategies],
-    web3Strategies: [...web3FirstFactors],
+    strategies: [...knownSocialProviderStrategies, ...knownWeb3Strategies, ...customSocialProviderStrategies],
+    web3Strategies: knownWeb3Strategies,
     authenticatableOauthStrategies,
     strategyToDisplayData: strategyToDisplayData,
     providerToDisplayData: providerToDisplayData,