feat(clerk-js): Remove web3 providers from sign up continue step (clerk#5036)

Author: alexcarpenter

.changeset/new-adults-admire.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Removes web3 provider options from progressive sign up step. web3 providers don't have the ability to fill in missing fields.

packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx

@@ -109,7 +109,6 @@ function _SignUpContinue() {
 
   const hasEmail = !!formState.emailAddress.value;
   const hasVerifiedExternalAccount = signUp.verifications?.externalAccount?.status == 'verified';
-  const hasVerifiedWeb3 = signUp.verifications?.web3Wallet?.status == 'verified';
 
   const fields = determineActiveFields({
     attributes,
@@ -122,7 +121,6 @@ function _SignUpContinue() {
   minimizeFieldsForExistingSignup(fields, signUp);
 
   const oauthOptions = userSettings.authenticatableSocialStrategies;
-  const web3Options = userSettings.web3FirstFactors;
 
   const handleChangeActive = (type: ActiveIdentifier) => {
     if (!emailOrPhone(attributes, isProgressiveSignUp)) {
@@ -184,7 +182,6 @@ function _SignUpContinue() {
 
   const canToggleEmailPhone = emailOrPhone(attributes, isProgressiveSignUp);
   const showOauthProviders = !hasVerifiedExternalAccount && oauthOptions.length > 0;
-  const showWeb3Providers = !hasVerifiedWeb3 && web3Options.length > 0;
 
   const headerTitle = !onlyLegalConsentMissing
     ? localizationKeys('signUp.continue.title')
@@ -209,10 +206,10 @@ function _SignUpContinue() {
             gap={8}
           >
             <SocialButtonsReversibleContainerWithDivider>
-              {(showOauthProviders || showWeb3Providers) && !onlyLegalConsentMissing && (
+              {showOauthProviders && !onlyLegalConsentMissing && (
                 <SignUpSocialButtons
                   enableOAuthProviders={showOauthProviders}
-                  enableWeb3Providers={showWeb3Providers}
+                  enableWeb3Providers={false}
                   continueSignUp
                 />
               )}

packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx

@@ -108,6 +108,18 @@ describe('SignUpContinue', () => {
     screen.getByText(`Continue with ${name}`);
   });
 
+  it('does not render web3 providers', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withUsername({ required: true });
+      f.startSignUpWithEmailAddress();
+      f.withSocialProvider({ provider: 'google' });
+      f.withWeb3Wallet();
+    });
+
+    const { queryByAltText } = render(<SignUpContinue />, { wrapper });
+    expect(queryByAltText(/sign in with metamask/i)).not.toBeInTheDocument();
+  });
+
   it('renders error for invalid username length', async () => {
     const { wrapper, fixtures } = await createFixtures(f => {
       f.withEmailAddress({ required: true });