Let user sign message directly after connect wallet and start Sign In process immediately if a specific query string param was provided

packages/messenger-widget/src/components/SignIn/SignIn.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 /* eslint-disable no-console */
 import { useConnectModal } from '@rainbow-me/rainbowkit';
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
 import { signInImage } from '../../assets/base64/home-image';
 import { AuthContext } from '../../context/AuthContext';
@@ -13,6 +13,16 @@ import './SignIn.css';
 import { changeSignInButtonStyle } from './bl';
 
 export function SignIn() {
+
+    // if `?sign-in-directly=true`, or for short `?sid=1`, is present in the URL, 
+    // the user will be redirected to the wallet connection modal to connect the wallet and sign in directly
+    // especially useful when redirecting from the landing page
+    const signInDirectly = new URLSearchParams(location.search).get("sign-in-directly")?.toLowerCase() === "true"
+        || new URLSearchParams(location.search).get("sid") === "1";
+
+    const [shouldSignInDirectly] =
+        useState<boolean>(signInDirectly);
+
     const { isConnected } = useAccount();
 
     const { cleanSignIn, isLoading } = useContext(AuthContext);
@@ -24,6 +34,7 @@ export function SignIn() {
 
     const handleConnectWithWallet = () => {
         openConnectionModal();
+        cleanSignIn();
     };
 
     const handleSignIn = async () => {
@@ -40,6 +51,13 @@ export function SignIn() {
         openConnectModal && openConnectModal();
     };
 
+    // useEffect is needed to give some time to the components to be fully rendered first to avoid exceptions inside `changeSignInButtonStyle` function.
+    useEffect(() => {
+        if (shouldSignInDirectly) {
+            handleConnectWithWallet();
+        }
+    }, [shouldSignInDirectly]);
+
     return (
         <div className="signin-container-type h-100">
             <div className="row m-0 p-0 h-100">
@@ -80,14 +98,14 @@ export function SignIn() {
 
                         {!isConnected ? (
                             <LoginButton
-                                text="Connect with Wallet"
+                                text="Connect Wallet & Sign"
                                 onClick={handleConnectWithWallet}
                                 buttonState={ButtonState.Ideal}
                             />
                         ) : (
                             <LoginButton
                                 disabled={isLoading}
-                                text={isLoading ? 'Loading' : 'Sign In'}
+                                    text={isLoading ? 'Please sign message and wait' : 'Sign In'}
                                 onClick={handleSignIn}
                                 buttonState={
                                     isLoading

packages/messenger-widget/src/hooks/auth/useAuth.ts

@@ -47,6 +47,9 @@ export const useAuth = () => {
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [hasError, setHasError] = useState<boolean>(false);
 
+    const [cleanSignInRequested, setCleanSignInRequested] =
+        useState<boolean>(false);
+
     //The account name that should be displayed to the user. Takes alias profiles and Crosschain names into account
     const [displayName, setDisplayName] = useState<string | undefined>(
         undefined,
@@ -86,27 +89,37 @@ export const useAuth = () => {
     };
     //The normal sign in function that is used when the user signs in with their own account, using a web3 provider like wallet connect or metamask
     const cleanSignIn = async () => {
-        setIsLoading(true);
-        setHasError(false);
-        //Fetch the Account either from onchain or via CCIP
-        const account = await AccountConnector(
-            walletClient!,
-            mainnetProvider,
-            dm3Configuration.addressEnsSubdomain,
-        ).connect(address!);
-
-        if (!account) {
-            throw Error('error fetching dm3Account');
-        }
-
-        await _login(
-            account.ensName,
-            address!,
-            account.userProfile,
-            (message: string) => walletClient!.signMessage({ message }),
-        );
+        setCleanSignInRequested(true);
     };
 
+    // useEffect is needed to give some time to the wallet connect variables to be initialized.
+    // without utilizing it the variable `walletClient` would be undefined.
+    useEffect(() => {
+        (async () => {
+            if (cleanSignInRequested && walletClient) {
+                setIsLoading(true);
+                setHasError(false);
+                //Fetch the Account either from onchain or via CCIP
+                const account = await AccountConnector(
+                    walletClient!,
+                    mainnetProvider,
+                    dm3Configuration.addressEnsSubdomain,
+                ).connect(address!);
+
+                if (!account) {
+                    throw Error('error fetching dm3Account');
+                }
+
+                await _login(
+                    account.ensName,
+                    address!,
+                    account.userProfile,
+                    (message: string) => walletClient!.signMessage({ message }),
+                );
+            }
+        })();
+    }, [cleanSignInRequested, walletClient]);
+
     //Siwe signin is used when a siwe message has been provided by an app using dm3 as a widget.
     //The user is signed in with a random account based on the provided secret
     const siweSignIn = async () => {