add: better UX flow

Author: KukretiShubham

src/components/Page/Index.vue

@@ -25,7 +25,7 @@ import {
 	hasWritePermission,
 } from '../../fixtures/memberships'
 import { JsonRpcProvider } from 'ethers'
-import { getSignature, getMessage, consoleWarn } from '../../fixtures/session'
+import { getSignature, getMessage, checkSession, consoleWarn } from '../../fixtures/session'
 import { Strings } from '../../i18n'
 
 type Props = {
@@ -123,20 +123,15 @@ const handleConnection = async (signer: UndefinedOr<Signer>) => {
 	const connectedAddress = signer
 		? await signer.getAddress()
 		: await newSigner.getAddress()
-	// const connectedAddress = '0x57E21bd98612DE0Bd1723F4bf81A944eF7BfF526'
+		
 	walletAddress.value = connectedAddress
-	console.log({ connectedAddress })
 
-	const hash = getMessage(connectedAddress)
-
-	let sig = await getSignature(connectedAddress, signer)
-
-	fetchPosts({ hash, sig })
-
-	hasEditableRole.value = await testPermission(
-		walletAddress.value,
-		new JsonRpcProvider(props.rpcUrl),
-	)
+	if(isVerified.value){
+		hasEditableRole.value = await testPermission(
+			walletAddress.value,
+			new JsonRpcProvider(props.rpcUrl),
+		)
+	}
 }
 
 const fetchPosts = async ({ hash, sig }: { hash?: string; sig?: string }) => {
@@ -182,32 +177,32 @@ onMounted(async () => {
 		'@devprotocol/clubs-core/connection'
 	)
 	connection.value = conct
-	conct().signer.subscribe((signer: UndefinedOr<Signer>) => {
-		walletSigner = signer
-	})
-	const signer = conct().signer.value
-	console.log({ signer })
-	console.log({ walletSigner })
-	if (signer) {
+	conct().signer.subscribe(async(signer: UndefinedOr<Signer>) => {
+		if (signer) {
 		const connectedAddress = await signer.getAddress()
 		walletAddress.value = connectedAddress
-		isVerified.value = true
-	}
-	setTimeout(() => {
-		handleConnection(walletSigner)
-	}, 1000)
-
+		isVerified.value = await checkSession(connectedAddress)
+		console.log( "isverfied", isVerified.value )
+		walletSigner = signer
+		handleConnection(signer)
+		}
+	})
 	i18n.value = i18nBase(navigator.languages)
 })
 
 const isVerified = ref(false)
 
 const handleVerify = async () => {
-	handleConnection(walletSigner)
+	const walletAddres = await walletSigner?.getAddress() as string
+	const hash = getMessage(walletAddres)
+	let sig = await getSignature(walletAddres, walletSigner as Signer)
+	fetchPosts({ hash, sig })
 	//
 	if (connection.value?.().signer.value) {
 		isVerified.value = true
 	}
+
+	handleConnection(walletSigner)
 }
 
 const handlePostSuccess = (post: Posts) => {

src/fixtures/session.ts

@@ -3,6 +3,7 @@ import { type UndefinedOr } from '@devprotocol/util-ts'
 import { type Signer } from 'ethers'
 import { encode, decode } from '@devprotocol/clubs-core'
 import { verifyMessage } from 'ethers'
+import type { Address } from 'cluster'
 
 const maxValidity = 1 * 60 * 60 * 1000 // 1 hour
 
@@ -40,10 +41,39 @@ export const getSignature = async (
 }
 
 export const getSessionAddress = async (hash: string, sig: string) => {
+	console.log('inside getSessionAddress')
 	const address = verifyMessage(hash, sig)
 	return address
 }
 
+export const checkSession = async (address: string) => {
+	console.log('inside checkSession')
+	const hash = sessionStorage.getItem(`hash-of-${address}`)
+	const sigItem = sessionStorage.getItem(`sig-of-${address}`);
+	const sig = sigItem ? decode(sigItem) as string : undefined;
+	console.log({hash, sig})
+
+	if (!hash || !sig) {
+		return false;
+	}
+
+	try{
+		const SessoionAddress = await getSessionAddress(hash, sig)
+		console.log({SessoionAddress, address})
+
+		if (SessoionAddress !== address) {
+			console.log('inside here')
+			return false
+		}
+		return true
+	}
+	catch(error) {
+		console.log('inside catch')
+		console.error('Error checking session:', error);
+		return false
+	}
+}
+
 export const consoleWarn = () => {
 	console.log('%cWarning!!', 'color: red; font-size: 20px; background: yellow;')
 	console.log(