From 373e3ecfb7c0d70fd9dfd9579895f01b6061a3bd Mon Sep 17 00:00:00 2001 From: Muhammad-Altabba <24407834+Muhammad-Altabba@users.noreply.github.com> Date: Sun, 23 Jun 2024 03:37:38 +0200 Subject: [PATCH 1/4] let user sign message directly after connect wallet --- .../src/components/SignIn/SignIn.tsx | 5 +- .../src/hooks/auth/useAuth.ts | 49 ++++++++++++------- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/packages/messenger-widget/src/components/SignIn/SignIn.tsx b/packages/messenger-widget/src/components/SignIn/SignIn.tsx index b9c8a67e5..9d3e64aad 100644 --- a/packages/messenger-widget/src/components/SignIn/SignIn.tsx +++ b/packages/messenger-widget/src/components/SignIn/SignIn.tsx @@ -24,6 +24,7 @@ export function SignIn() { const handleConnectWithWallet = () => { openConnectionModal(); + cleanSignIn(); }; const handleSignIn = async () => { @@ -80,14 +81,14 @@ export function SignIn() { {!isConnected ? ( ) : ( { const [isLoading, setIsLoading] = useState(false); const [hasError, setHasError] = useState(false); + const [cleanSignInRequested, setCleanSignInRequested] = + useState(false); + //The account name that should be displayed to the user. Takes alias profiles and Crosschain names into account const [displayName, setDisplayName] = useState( undefined, @@ -86,27 +89,35 @@ 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(() => { + (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 () => { From 03755cfe4623466014e0df67336448f48865c181 Mon Sep 17 00:00:00 2001 From: Muhammad-Altabba <24407834+Muhammad-Altabba@users.noreply.github.com> Date: Sun, 23 Jun 2024 04:29:53 +0200 Subject: [PATCH 2/4] add a comment --- packages/messenger-widget/src/hooks/auth/useAuth.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/messenger-widget/src/hooks/auth/useAuth.ts b/packages/messenger-widget/src/hooks/auth/useAuth.ts index afe54be6a..988ceb77c 100644 --- a/packages/messenger-widget/src/hooks/auth/useAuth.ts +++ b/packages/messenger-widget/src/hooks/auth/useAuth.ts @@ -92,6 +92,8 @@ export const useAuth = () => { setCleanSignInRequested(true); }; + // useEffect is needed to give sometime to the wallet connect variables to be initialized. + // without utilizing it the variable `walletClient` would be undefined. useEffect(() => { (async () => { if (cleanSignInRequested && walletClient) { From 1e2e8ecda5df0f47009652bc3146614ddc4915f6 Mon Sep 17 00:00:00 2001 From: Muhammad-Altabba <24407834+Muhammad-Altabba@users.noreply.github.com> Date: Sun, 23 Jun 2024 04:39:48 +0200 Subject: [PATCH 3/4] enable signing directly if provided in the query string --- .../src/components/SignIn/SignIn.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/messenger-widget/src/components/SignIn/SignIn.tsx b/packages/messenger-widget/src/components/SignIn/SignIn.tsx index 9d3e64aad..1ae8fa9dd 100644 --- a/packages/messenger-widget/src/components/SignIn/SignIn.tsx +++ b/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(signInDirectly); + const { isConnected } = useAccount(); const { cleanSignIn, isLoading } = useContext(AuthContext); @@ -41,6 +51,13 @@ export function SignIn() { openConnectModal && openConnectModal(); }; + // useEffect is needed to give sometime to the components to be fully rendered first to avoid exceptions inside `changeSignInButtonStyle` function. + useEffect(() => { + if (shouldSignInDirectly) { + handleConnectWithWallet(); + } + }, [shouldSignInDirectly]); + return (
From c9082eef89dc39b1a18107fa8eedfdc8d9f4a369 Mon Sep 17 00:00:00 2001 From: Muhammad-Altabba <24407834+Muhammad-Altabba@users.noreply.github.com> Date: Sun, 23 Jun 2024 16:35:18 +0200 Subject: [PATCH 4/4] tiny spelling correction in comments --- packages/messenger-widget/src/components/SignIn/SignIn.tsx | 2 +- packages/messenger-widget/src/hooks/auth/useAuth.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/messenger-widget/src/components/SignIn/SignIn.tsx b/packages/messenger-widget/src/components/SignIn/SignIn.tsx index 1ae8fa9dd..b5b9f6bf8 100644 --- a/packages/messenger-widget/src/components/SignIn/SignIn.tsx +++ b/packages/messenger-widget/src/components/SignIn/SignIn.tsx @@ -51,7 +51,7 @@ export function SignIn() { openConnectModal && openConnectModal(); }; - // useEffect is needed to give sometime to the components to be fully rendered first to avoid exceptions inside `changeSignInButtonStyle` function. + // 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(); diff --git a/packages/messenger-widget/src/hooks/auth/useAuth.ts b/packages/messenger-widget/src/hooks/auth/useAuth.ts index 988ceb77c..ec89b6b31 100644 --- a/packages/messenger-widget/src/hooks/auth/useAuth.ts +++ b/packages/messenger-widget/src/hooks/auth/useAuth.ts @@ -92,7 +92,7 @@ export const useAuth = () => { setCleanSignInRequested(true); }; - // useEffect is needed to give sometime to the wallet connect variables to be initialized. + // 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 () => {