fix(unlock-app): UI improvements to handle connections better (#12269)

* UI improvements to handle connections better * simplified
unlock-protocol · Jun 30, 2023 · 23c32b4 · 23c32b4
1 parent cd295f5
commit 23c32b4
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 22 deletions.
diff --git a/unlock-app/src/components/interface/checkout/Connected.tsx b/unlock-app/src/components/interface/checkout/Connected.tsx
@@ -189,31 +189,39 @@ export function Connected({
   })
   const { signIn, signOut, isSignedIn } = useSIWE()
   const [isDisconnecting, setIsDisconnecting] = useState(false)
-  const autoconnect = state.context?.paywallConfig?.autoconnect
+  const useDelegatedProvider =
+    state.context?.paywallConfig?.useDelegatedProvider
 
   useEffect(() => {
     const autoSignIn = async () => {
       if (
         !isSignedIn &&
         !signing &&
         connected &&
-        (isUnlockAccount || autoconnect)
+        (isUnlockAccount || useDelegatedProvider)
       ) {
         setSigning(true)
         await signIn()
         setSigning(false)
       }
     }
     autoSignIn()
-  }, [connected, autoconnect, isUnlockAccount, signIn, signing, isSignedIn])
+  }, [
+    connected,
+    useDelegatedProvider,
+    isUnlockAccount,
+    signIn,
+    signing,
+    isSignedIn,
+  ])
 
   useEffect(() => {
     if (!account) {
       console.debug('Not connected')
     } else console.debug(`Connected as ${account}`)
   }, [account])
 
-  if (autoconnect) {
+  if (useDelegatedProvider) {
     return <div className="space-y-2">{children}</div>
   }
 

diff --git a/unlock-app/src/components/interface/checkout/index.tsx b/unlock-app/src/components/interface/checkout/index.tsx
@@ -46,13 +46,19 @@ export function CheckoutPage() {
     paywallConfig.referrer = referrerAddress
   }
 
-  const injectedProvider =
-    communication.providerAdapter || selectProvider(config)
-
   // Autoconnect, provider might change (we could receive the provider from the parent with a delay!)
   useEffect(() => {
-    authenticateWithProvider('DELEGATED_PROVIDER', injectedProvider)
-  }, [authenticateWithProvider, injectedProvider])
+    if (communication.providerAdapter) {
+      authenticateWithProvider(
+        'DELEGATED_PROVIDER',
+        communication.providerAdapter
+      )
+    }
+  }, [authenticateWithProvider, communication.providerAdapter])
+
+  // TODO: do we need to pass it down?
+  const injectedProvider =
+    communication.providerAdapter || selectProvider(config)
 
   const checkoutRedirectURI =
     paywallConfig?.redirectUri ||

diff --git a/unlock-app/src/components/interface/checkout/main/Payment.tsx b/unlock-app/src/components/interface/checkout/main/Payment.tsx
@@ -70,8 +70,6 @@ export function Payment({ injectedProvider, checkoutService }: Props) {
     currencyContractAddress: lock.currencyContractAddress,
   })
 
-  console.log(state)
-
   const { data: purchaseData, isLoading: isPurchaseDataLoading } =
     usePurchaseData({
       lockAddress: lock.address,

diff --git a/unlock-app/src/hooks/useAutoLogin.ts b/unlock-app/src/hooks/useAutoLogin.ts
@@ -1,18 +1,20 @@
 import { useCallback, useState } from 'react'
 import { useAppStorage } from './useAppStorage'
 import { useAuthenticate, WalletProvider } from './useAuthenticate'
+import { useSIWE } from '~/hooks/useSIWE'
 
 export function useAutoLogin() {
   const [isLoading, setLoading] = useState(false)
   const { getStorage } = useAppStorage()
   const { authenticateWithProvider } = useAuthenticate()
+  const { signOut } = useSIWE()
 
   const getAutoLoginData = useCallback(() => {
     const storedProvider: WalletProvider | null = getStorage(
       'provider'
     ) as WalletProvider
-
-    const canAutoLogin = storedProvider !== null
+    const canAutoLogin =
+      storedProvider !== null && storedProvider !== 'DELEGATED_PROVIDER'
 
     return [canAutoLogin, storedProvider] as const
   }, [getStorage])
@@ -33,10 +35,14 @@ export function useAutoLogin() {
       } catch (error: any) {
         console.error('Autologin failed.')
         console.error(error)
+        await signOut()
       }
     }
+    if (!canAutoLogin && storedProvider === 'DELEGATED_PROVIDER') {
+      await signOut()
+    }
     setLoading(false)
-  }, [authenticateWithProvider, getAutoLoginData])
+  }, [authenticateWithProvider, getAutoLoginData, signOut])
 
   return {
     tryAutoLogin,

diff --git a/unlock-app/src/hooks/useSIWE.tsx b/unlock-app/src/hooks/useSIWE.tsx
@@ -27,16 +27,22 @@ export interface SIWEContextType {
   isSignedIn: boolean
 }
 
+const signOut = async () => {
+  const session = getAccessToken()
+  if (session) {
+    await storage.revoke().catch(console.error)
+    removeAccessToken()
+  }
+}
+
 const SIWEContext = createContext<SIWEContextType>({
   siweSign: (_nonce: string, _statement: string) => {
     throw new Error('No SIWE provider found')
   },
   signIn: () => {
     throw new Error('No SIWE provider found')
   },
-  signOut: () => {
-    throw new Error('No SIWE provider found')
-  },
+  signOut,
   session: undefined,
   isSignedIn: false,
 })
@@ -68,11 +74,7 @@ export const SIWEProvider = ({ children }: Props) => {
   const signOut = async () => {
     try {
       setStatus('loading')
-      const session = getAccessToken()
-      if (session) {
-        await storage.revoke().catch(console.error)
-        removeAccessToken()
-      }
+      await signOut()
       await Promise.all([queryClient.invalidateQueries(), refetchSession()])
       setStatus('idle')
     } catch (error) {