fix(clerk-js): cleanup solana authentication flow and improve error handling

Signed-off-by: Kenton Duprey <kenton@clerk.dev>

Author: kduprey

packages/clerk-js/src/core/resources/SignIn.ts

@@ -475,7 +475,7 @@ export class SignIn extends BaseResource implements SignInResource {
       identifier,
       generateSignature: generateSignatureWithSolana,
       strategy: 'web3_solana_signature',
-      walletName: params?.walletName,
+      walletName: params.walletName,
     });
   };
 
@@ -1006,9 +1006,6 @@ class SignInFuture implements SignInFutureResource {
           generateSignature = generateSignatureWithOKXWallet;
           break;
         case 'solana':
-          if (!params.walletName) {
-            throw new Error('walletName is required for solana web3 authentication');
-          }
           identifier = await getSolanaIdentifier(params.walletName);
           generateSignature = generateSignatureWithSolana;
           break;

packages/clerk-js/src/ui/components/SignIn/SignInFactorOneSolanaWalletsCard.tsx

@@ -7,7 +7,7 @@ import { Card } from '@/ui/elements/Card';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Header } from '@/ui/elements/Header';
 import { Web3WalletButtons } from '@/ui/elements/Web3WalletButtons';
-import { handleError } from '@/ui/utils/errorHandler';
+import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';
 
 import { useSignInContext } from '../../contexts';
 import { useRouter } from '../../router';
@@ -18,23 +18,6 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
   const router = useRouter();
   const ctx = useSignInContext();
 
-  const onSelect = async ({ walletName }: { walletName: string }) => {
-    card.setLoading(walletName);
-    try {
-      await clerk.authenticateWithWeb3({
-        strategy: 'web3_solana_signature',
-        redirectUrl: ctx.afterSignInUrl || '/',
-        signUpContinueUrl: ctx.isCombinedFlow ? '../create/continue' : ctx.signUpContinueUrl,
-        customNavigate: router.navigate,
-        secondFactorUrl: 'factor-two',
-        walletName,
-      });
-    } catch (err) {
-      handleError(err as Error, [], card.setError);
-      card.setIdle();
-    }
-  };
-
   const onBackLinkClick = () => {
     void router.navigate('../');
   };
@@ -52,7 +35,20 @@ const SignInFactorOneSolanaWalletsCardInner = () => {
             direction='col'
             gap={4}
           >
-            <Web3WalletButtons onSelect={onSelect} />
+            <Web3WalletButtons
+              web3AuthCallback={({ walletName }) => {
+                return clerk
+                  .authenticateWithWeb3({
+                    customNavigate: router.navigate,
+                    redirectUrl: ctx.afterSignInUrl || '/',
+                    secondFactorUrl: 'factor-two',
+                    signUpContinueUrl: ctx.isCombinedFlow ? '../create/continue' : ctx.signUpContinueUrl,
+                    strategy: 'web3_solana_signature',
+                    walletName,
+                  })
+                  .catch(err => web3CallbackErrorHandler(err, card.setError));
+              }}
+            />
 
             <BackLink
               boxElementDescriptor={descriptors.backRow}

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

@@ -7,8 +7,7 @@ import { Card } from '@/ui/elements/Card';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Header } from '@/ui/elements/Header';
 import { Web3WalletButtons } from '@/ui/elements/Web3WalletButtons';
-import { handleError } from '@/ui/utils/errorHandler';
-import { sleep } from '@/ui/utils/sleep';
+import { web3CallbackErrorHandler } from '@/ui/utils/web3CallbackErrorHandler';
 
 import { useSignUpContext } from '../../contexts';
 import { useRouter } from '../../router';
@@ -19,28 +18,6 @@ const SignUpStartSolanaWalletsCardInner = () => {
   const router = useRouter();
   const ctx = useSignUpContext();
 
-  const onSelect = async ({ walletName }: { walletName: string }) => {
-    card.setLoading(walletName);
-    try {
-      await clerk.authenticateWithWeb3({
-        customNavigate: router.navigate,
-        redirectUrl: ctx.afterSignUpUrl || '/',
-        signUpContinueUrl: '../continue',
-        unsafeMetadata: ctx.unsafeMetadata,
-        strategy: 'web3_solana_signature',
-        // TODO: Add support to pass legalAccepted status
-        // legalAccepted: ,
-        walletName,
-      });
-    } catch (err) {
-      await sleep(1000);
-      handleError(err as Error, [], card.setError);
-      card.setIdle();
-    }
-    await sleep(5000);
-    card.setIdle();
-  };
-
   const onBackLinkClick = () => {
     void router.navigate('../');
   };
@@ -58,7 +35,22 @@ const SignUpStartSolanaWalletsCardInner = () => {
             direction='col'
             gap={4}
           >
-            <Web3WalletButtons onSelect={onSelect} />
+            <Web3WalletButtons
+              web3AuthCallback={({ walletName }) => {
+                return clerk
+                  .authenticateWithWeb3({
+                    customNavigate: router.navigate,
+                    redirectUrl: ctx.afterSignUpUrl || '/',
+                    signUpContinueUrl: '../continue',
+                    strategy: 'web3_solana_signature',
+                    unsafeMetadata: ctx.unsafeMetadata,
+                    // TODO: Add support to pass legalAccepted status
+                    // legalAccepted: ,
+                    walletName,
+                  })
+                  .catch(err => web3CallbackErrorHandler(err, card.setError));
+              }}
+            />
             <BackLink
               boxElementDescriptor={descriptors.backRow}
               linkElementDescriptor={descriptors.backLink}