fix(unlock-app): checkout frame errors

unlock-app/app/frames/checkout/approve/route.ts

@@ -0,0 +1,29 @@
+import { Abi, encodeFunctionData, erc20Abi } from 'viem'
+import { frames } from '../frames'
+import { transaction } from 'frames.js/core'
+
+export const POST = frames(async (ctx) => {
+  if (!ctx?.message) {
+    throw new Error('Invalid frame message')
+  }
+
+  const lock = ctx.state.lock!
+  const { address: lockAddress, network, priceForUser } = lock
+
+  const calldata = encodeFunctionData({
+    abi: erc20Abi,
+    functionName: 'approve',
+    args: [lockAddress as `0x${string}`, BigInt(priceForUser!)],
+  })
+
+  return transaction({
+    chainId: `eip155:${network}`,
+    method: 'eth_sendTransaction',
+    params: {
+      abi: erc20Abi as Abi,
+      to: ctx.state.lock?.tokenAddress as `0x${string}`,
+      data: calldata,
+      value: '0x0',
+    },
+  })
+})

unlock-app/app/frames/checkout/components/DefaultImage.tsx

@@ -9,7 +9,8 @@ interface DefaultImageProps {
 }
 
 export function DefaultImage({ lock, rightSideContent }: DefaultImageProps) {
-  const { image, defaultImage, price, name, description } = lock
+  const { image, defaultImage, price, name, description, isSoldOut, isMember } =
+    lock
 
   const defaultRightSideContent = (
     <div tw="flex flex-col">
@@ -22,6 +23,8 @@ export function DefaultImage({ lock, rightSideContent }: DefaultImageProps) {
         </p>
       </div>
       <p tw="m-0 p-0 text-3xl">🏷️ {price}</p>
+      {isSoldOut ? <p tw="text-red-500">SOLD OUT !</p> : null}
+      {isMember ? <p>ALREADY A MEMBER !</p> : null}
     </div>
   )
   const leftImage = (

unlock-app/app/frames/checkout/components/TransactionSuccess.tsx

@@ -4,7 +4,8 @@ import { DefaultImage } from './DefaultImage'
 export function TransactionSuccess({ lock }: any) {
   const rightSideContent = (
     <div tw="flex flex-col">
-      <p tw="text-6xl">Success! Purchased {lock.name} membership!</p>
+      <p>Success !</p>
+      <p tw="text-3xl">Purchased {lock.name} membership !</p>
     </div>
   )
 

unlock-app/app/frames/checkout/components/defaultFrame.tsx

@@ -1,11 +1,69 @@
 /* eslint-disable react/jsx-key */
 import React from 'react'
 import { Button } from 'frames.js/next'
-import { State } from '../frames'
+import { getAddressForFid } from 'frames.js'
 import { DefaultImage } from './DefaultImage'
+import { isMember as checkIsMember, getKeyPrice, checkAllowance } from './utils'
 
-export function getDefaultFrame(state: State) {
-  const lock = state.lock!
+export async function getDefaultFrame(ctx: any) {
+  const lock = ctx.state.lock!
+  const isErc20 = !!ctx.state.lock?.tokenAddress
+  const approved = ctx.searchParams.approved || lock.erc20Approved || !isErc20
+  let userAddress: string
+  const buttonText = approved
+    ? 'Mint'
+    : `Approve ${lock.currencySymbol} spending`
+
+  const fid = ctx.message?.requesterFid
+  if (fid && !lock.priceForUser) {
+    userAddress = await getAddressForFid({
+      fid,
+      options: { fallbackToCustodyAddress: true },
+    })
+
+    const { address: lockAddress, network, tokenAddress } = lock
+
+    const isMember = await checkIsMember(lockAddress, network, userAddress)
+    lock.isMember = isMember
+
+    const keyPrice = await getKeyPrice({
+      lockAddress,
+      network,
+      userAddress,
+    })
+    lock.priceForUser = keyPrice
+
+    if (tokenAddress) {
+      const allowance = await checkAllowance(
+        lockAddress,
+        Number(network),
+        userAddress as string,
+        tokenAddress!
+      )
+      if (Number(allowance) >= Number(keyPrice) && !lock.isRenewable) {
+        lock.erc20Approved = true
+      }
+    }
+  }
+
+  const buttons =
+    !lock.isSoldOut && !lock.isMember
+      ? [
+          fid ? (
+            <Button
+              action="tx"
+              target={approved ? '/txdata' : '/approve'}
+              post_url={approved ? '?success=true' : '?approved=true'}
+            >
+              {buttonText}
+            </Button>
+          ) : (
+            <Button action="post" target="/">
+              Continue
+            </Button>
+          ),
+        ]
+      : []
 
   return {
     image: <DefaultImage lock={lock} />,
@@ -17,11 +75,7 @@ export function getDefaultFrame(state: State) {
         'Cache-Control': 'max-age=1',
       },
     },
-    buttons: [
-      <Button action="tx" target="/txdata" post_url="?success=true">
-        Purchase a key
-      </Button>,
-    ],
-    state,
+    buttons,
+    state: ctx.state,
   }
 }

unlock-app/app/frames/checkout/components/utils.ts

@@ -2,6 +2,15 @@ import { Web3Service } from '@unlock-protocol/unlock-js'
 import { locksmith } from '../../../../src/config/locksmith'
 import networks from '@unlock-protocol/networks'
 import { config as appConfig } from '~/config/app'
+import { erc20Abi } from 'viem'
+import { ethers } from 'ethers'
+import { MAX_UINT } from '~/constants'
+
+interface GetKeyPriceParams {
+  lockAddress: string
+  network: number
+  userAddress: string
+}
 
 export async function getConfig(id: string) {
   const { config } = await fetch(
@@ -39,8 +48,17 @@ export async function getLockDataFromCheckout(id: string) {
   })()
 
   const web3Service = new Web3Service(networks)
+
   const res = await web3Service.getLock(lockAddress, network)
   const price = `${res.keyPrice} ${res.currencySymbol}`
+  const tokenAddress = res.currencyContractAddress
+  const isRenewable =
+    Number(res.publicLockVersion) >= 11 &&
+    res.expirationDuration !== MAX_UINT &&
+    !!tokenAddress
+
+  const keysAvailable = await web3Service.keysAvailable(lockAddress, network)
+  const isSoldOut = Number(keysAvailable) < 1
 
   const redirectUri = config.redirectUri
   const redirectText = config.endingCallToAction
@@ -53,9 +71,61 @@ export async function getLockDataFromCheckout(id: string) {
     defaultImage,
     description,
     price,
+    currencySymbol: res.currencySymbol,
+    tokenAddress,
     redirectUri,
     redirectText,
+    isSoldOut,
+    isRenewable,
   }
 
   return lock
 }
+
+export async function getKeyPrice({
+  lockAddress,
+  network,
+  userAddress,
+}: GetKeyPriceParams) {
+  const web3Service = new Web3Service(networks)
+  const mydata = '0x'
+  let price = await web3Service.purchasePriceFor({
+    lockAddress,
+    userAddress: userAddress,
+    network,
+    data: mydata,
+    referrer: userAddress,
+  })
+  price = price.toString()
+  return price
+}
+
+export async function checkAllowance(
+  lockAddress: string,
+  network: number,
+  userAddress: string,
+  tokenAddress: string
+) {
+  const web3Service = new Web3Service(networks)
+  const contract = new ethers.Contract(
+    tokenAddress,
+    erc20Abi,
+    web3Service.providerForNetwork(network)
+  )
+  const allowance = await contract.allowance(userAddress, lockAddress)
+  return allowance
+}
+
+export async function isMember(
+  lockAddress: string,
+  network: number,
+  userAddress: string
+) {
+  const web3Service = new Web3Service(networks)
+  const isMember = await web3Service.getHasValidKey(
+    lockAddress,
+    userAddress,
+    network
+  )
+  return isMember
+}

unlock-app/app/frames/checkout/frames.ts

@@ -3,13 +3,20 @@ import { createFrames } from 'frames.js/next'
 export type Lock = {
   name: string
   address: string
-  network: string
+  network: number
   image: string
   defaultImage?: string
   description: string
   price: string
+  priceForUser?: string
+  currencySymbol: string
+  tokenAddress?: string
+  erc20Approved?: boolean
   redirectUri?: string
   redirectText?: string
+  isSoldOut: boolean
+  isMember?: boolean
+  isRenewable: boolean
 }
 
 export type State = {

unlock-app/app/frames/checkout/route.tsx

@@ -13,7 +13,7 @@ const getInitialFrame = frames(async (ctx) => {
   const lock = await getLockDataFromCheckout(id)
   state.lock = lock
 
-  return getDefaultFrame(state)
+  return await getDefaultFrame(ctx)
 })
 
 const getOtherFrames = frames(async (ctx) => {
@@ -46,7 +46,7 @@ const getOtherFrames = frames(async (ctx) => {
     }
   }
 
-  return getDefaultFrame(state)
+  return await getDefaultFrame(ctx)
 })
 
 export const GET = getInitialFrame

unlock-app/app/frames/checkout/txdata/route.ts

@@ -1,41 +1,22 @@
 import { Abi, encodeFunctionData } from 'viem'
 import { frames } from '../frames'
 import { transaction } from 'frames.js/core'
-import { PublicLockV14 } from '@unlock-protocol/contracts'
-import { Web3Service } from '@unlock-protocol/unlock-js'
-import networks from '@unlock-protocol/networks'
-
-const abi = PublicLockV14.abi
+import { PublicLock } from '@unlock-protocol/contracts'
 
 export const POST = frames(async (ctx) => {
   if (!ctx?.message) {
     throw new Error('Invalid frame message')
   }
 
-  const userAddress = ctx.message.connectedAddress!
+  const userAddress = ctx.message.address!
+  const { address: lockAddress, priceForUser } = ctx.state.lock!
   const network = Number(ctx.state.lock!.network)
-  const lockAddress = ctx.state.lock!.address
-
-  async function getKeyPrice() {
-    const web3Service = new Web3Service(networks)
-    const mydata = '0x'
-    let price = await web3Service.purchasePriceFor({
-      lockAddress,
-      userAddress: userAddress,
-      network,
-      data: mydata,
-      referrer: userAddress,
-    })
-    price = price.toString()
-    return price
-  }
-
-  const keyPrice = await getKeyPrice()
+  const abi = PublicLock.abi
 
   const calldata = encodeFunctionData({
     abi,
     functionName: 'purchase',
-    args: [[keyPrice], [userAddress], [userAddress], [userAddress], ['0x']],
+    args: [[priceForUser], [userAddress], [userAddress], [userAddress], ['0x']],
   })
 
   return transaction({
@@ -45,7 +26,7 @@ export const POST = frames(async (ctx) => {
       abi: abi as Abi,
       to: lockAddress as `0x${string}`,
       data: calldata,
-      value: keyPrice.toString(),
+      value: priceForUser,
     },
   })
 })