fix(clerk-js): Handle gracefully yet unknown to our components Web3 providers (#4263)

Author: chanioxaris

.changeset/hot-pants-change.md

@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Handle gracefully yet unknown to our components Web3 providers

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,