fix(unlock-app): Membership check after connecting wallet (#13846)

* Membership check after connecting wallet

* Update Connected.tsx

unlock-app/src/components/interface/checkout/Connected.tsx

@@ -5,6 +5,8 @@ import { useSIWE } from '~/hooks/useSIWE'
 import { CheckoutService } from './main/checkoutMachine'
 import { Stepper } from './Stepper'
 import { ConnectPage } from './main/ConnectPage'
+import { useWeb3Service } from '~/utils/withWeb3Service'
+import { useMembership } from '~/hooks/useMembership'
 
 interface ConnectedCheckoutProps {
   service: CheckoutService
@@ -16,9 +18,21 @@ export function Connected({ service }: ConnectedCheckoutProps) {
   const [signing, _] = useState(false)
   const { signIn, isSignedIn } = useSIWE()
 
+  const web3Service = useWeb3Service()
+
   const useDelegatedProvider =
     state.context?.paywallConfig?.useDelegatedProvider
 
+  const { data: memberships } = useMembership({
+    account,
+    paywallConfig: state.context.paywallConfig,
+    web3Service,
+  })
+
+  const membership = memberships?.find(
+    (item) => item.lock === state.context.lock?.address
+  )
+
   useEffect(() => {
     // Skip Connect if already signed in
     const autoSignIn = async () => {
@@ -29,14 +43,31 @@ export function Connected({ service }: ConnectedCheckoutProps) {
 
       if (isConnectedAsUnlockAccount || isConnectedWithWallet) {
         await signIn()
-        service.send({ type: 'SELECT_LOCK' })
+        service.send({
+          type: 'SELECT_LOCK',
+          existingMember: !!membership?.member,
+          expiredMember: isUnlockAccount ? false : !!membership?.expired,
+        })
       } else if (account && connected) {
-        service.send({ type: 'SELECT_LOCK' })
+        service.send({
+          type: 'SELECT_LOCK',
+          existingMember: !!membership?.member,
+          expiredMember: isUnlockAccount ? false : !!membership?.expired,
+        })
       }
     }
-    autoSignIn()
+    if (memberships) {
+      autoSignIn()
+    }
     // adding signIn creates an inifnite loop for some reason
-  }, [connected, useDelegatedProvider, isUnlockAccount, signing, isSignedIn])
+  }, [
+    connected,
+    useDelegatedProvider,
+    isUnlockAccount,
+    signing,
+    isSignedIn,
+    memberships,
+  ])
 
   useEffect(() => {
     if (!account) {

unlock-app/src/components/interface/checkout/main/Returning.tsx

@@ -183,7 +183,7 @@ export function Returning({ checkoutService, communication, onClose }: Props) {
                 returnLabel="Return"
                 checkoutService={checkoutService}
               />
-              {!lock?.isSoldOut && (
+              {!lock?.isSoldOut && !paywallConfig.skipRecipient && (
                 <Button
                   className="w-full"
                   onClick={() =>

unlock-app/src/components/interface/checkout/main/Select.tsx

@@ -30,6 +30,7 @@ import { AiFillWarning as WarningIcon } from 'react-icons/ai'
 import { useGetLockProps } from '~/hooks/useGetLockProps'
 import Disconnect from './Disconnect'
 import { useSIWE } from '~/hooks/useSIWE'
+import { useMembership } from '~/hooks/useMembership'
 interface Props {
   checkoutService: CheckoutService
 }
@@ -278,34 +279,11 @@ export function Select({ checkoutService }: Props) {
   )
 
   const { isInitialLoading: isMembershipsLoading, data: memberships } =
-    useQuery(
-      ['memberships', account, JSON.stringify(paywallConfig)],
-      async () => {
-        const memberships = await Promise.all(
-          Object.entries(paywallConfig.locks).map(
-            async ([lockAddress, props]) => {
-              const lockNetwork = props.network || paywallConfig.network || 1
-              const [member, total] = await Promise.all([
-                web3Service.getHasValidKey(lockAddress, account!, lockNetwork),
-                web3Service.totalKeys(lockAddress, account!, lockNetwork),
-              ])
-              // if not member but total is above 0
-              const expired = !member && total > 0
-              return {
-                lock: lockAddress,
-                expired,
-                member,
-                network: lockNetwork,
-              }
-            }
-          )
-        )
-        return memberships
-      },
-      {
-        enabled: !!account,
-      }
-    )
+    useMembership({
+      account,
+      paywallConfig: paywallConfig,
+      web3Service,
+    })
 
   const membership = memberships?.find((item) => item.lock === lock?.address)
   const { isLoading: isLoadingHook, lockHookMapping } =

unlock-app/src/components/interface/checkout/main/checkoutMachine.ts

@@ -48,6 +48,8 @@ export interface LockState extends Lock, Required<PaywallConfigLock> {
 
 export interface SelectLockEvent {
   type: 'SELECT_LOCK'
+  existingMember: boolean
+  expiredMember: boolean
 }
 
 export interface ConnectEvent {
@@ -272,19 +274,19 @@ export const checkoutMachine = createMachine(
           SELECT_LOCK: [
             {
               target: 'RETURNING',
-              guard: ({ context }) => context.existingMember,
+              guard: ({ event }) => event.existingMember,
             },
             {
               target: 'QUANTITY',
-              guard: ({ context }) =>
-                !context.skipQuantity && !context.expiredMember,
+              guard: ({ context, event }) =>
+                !context.skipQuantity && !event.expiredMember,
             },
             {
               target: 'METADATA',
-              guard: ({ context }) => {
+              guard: ({ context, event }) => {
                 // For expired memberships we do not offer the ability
                 // to change the metadadata and recipient...
-                return !context.skipRecipient && !context.expiredMember
+                return !context.skipRecipient && !event.expiredMember
               },
             },
             {

unlock-app/src/hooks/useMembership.ts

@@ -0,0 +1,44 @@
+import { useQuery } from '@tanstack/react-query'
+
+interface MembershipOptions {
+  account: string | undefined
+  paywallConfig: any
+  web3Service: any
+}
+
+export const useMembership = ({
+  account,
+  paywallConfig,
+  web3Service,
+}: MembershipOptions) => {
+  const query = useQuery(
+    ['memberships', account, JSON.stringify(paywallConfig)],
+    async () => {
+      const memberships = await Promise.all(
+        Object.entries(paywallConfig.locks).map(
+          async ([lockAddress, props]) => {
+            // @ts-expect-error 'props' is of type 'unknown'
+            const lockNetwork = props.network || paywallConfig.network || 1
+            const [member, total] = await Promise.all([
+              web3Service.getHasValidKey(lockAddress, account!, lockNetwork),
+              web3Service.totalKeys(lockAddress, account!, lockNetwork),
+            ])
+            // if not member but total is above 0
+            const expired = !member && total > 0
+            return {
+              lock: lockAddress,
+              expired,
+              member,
+              network: lockNetwork,
+            }
+          }
+        )
+      )
+      return memberships
+    },
+    {
+      enabled: !!account,
+    }
+  )
+  return query
+}