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,34 @@
 /* eslint-disable react/jsx-key */
 import React from 'react'
 import { Button } from 'frames.js/next'
-import { State } from '../frames'
 import { DefaultImage } from './DefaultImage'
 
-export function getDefaultFrame(state: State) {
-  const lock = state.lock!
+export function getDefaultFrame(ctx: any) {
+  const lock = ctx.state.lock!
+  const isErc20 = !!ctx.state.lock?.tokenAddress
+  const approved = ctx.searchParams.approved || lock.erc20Approved || !isErc20
+  const userAddress = ctx.message?.address
+  const buttonText = !userAddress
+    ? 'Continue with wallet'
+    : approved
+      ? 'Mint'
+      : `Approve ${lock.currencySymbol} spending`
+  const buttons =
+    !lock.isSoldOut && !lock.isMember
+      ? [
+          <Button
+            action="tx"
+            target={
+              !userAddress ? '/sign_message' : approved ? '/txdata' : '/approve'
+            }
+            post_url={
+              !userAddress ? '/' : approved ? '?success=true' : '?approved=true'
+            }
+          >
+            {buttonText}
+          </Button>,
+        ]
+      : []
 
   return {
     image: <DefaultImage lock={lock} />,
@@ -17,11 +40,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,14 @@ 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'
+
+interface GetKeyPriceParams {
+  lockAddress: string
+  network: number
+  userAddress: string
+}
 
 export async function getConfig(id: string) {
   const { config } = await fetch(
@@ -39,8 +47,13 @@ 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 keysAvailable = await web3Service.keysAvailable(lockAddress, network)
+  const isSoldOut = Number(keysAvailable) < 1
 
   const redirectUri = config.redirectUri
   const redirectText = config.endingCallToAction
@@ -53,9 +66,60 @@ export async function getLockDataFromCheckout(id: string) {
     defaultImage,
     description,
     price,
+    currencySymbol: res.currencySymbol,
+    tokenAddress,
     redirectUri,
     redirectText,
+    isSoldOut,
   }
 
   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,19 @@ 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
 }
 
 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 getDefaultFrame(ctx)
 })
 
 const getOtherFrames = frames(async (ctx) => {
@@ -46,7 +46,7 @@ const getOtherFrames = frames(async (ctx) => {
     }
   }
 
-  return getDefaultFrame(state)
+  return getDefaultFrame(ctx)
 })
 
 export const GET = getInitialFrame

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

@@ -0,0 +1,54 @@
+import { transaction } from 'frames.js/core'
+import {
+  checkAllowance,
+  getKeyPrice,
+  isMember as checkIsMember,
+} from '../components/utils'
+import { frames } from '../frames'
+
+export const POST = frames(async (ctx) => {
+  if (!ctx?.message) {
+    throw new Error('Invalid frame message')
+  }
+
+  const userAddress = ctx.message.address as `0x${string}`
+  const lock = ctx.state.lock!
+  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.erc20Approved = true
+    }
+  }
+
+  return transaction({
+    chainId: `eip155:${network}`,
+    method: 'eth_signTypedData_v4',
+    params: {
+      domain: {},
+      types: {
+        Message: [{ name: 'Signature request', type: 'string' }],
+      },
+      primaryType: 'Message',
+      message: {
+        'Signature request': 'Please sign this message to connect your wallet.',
+      },
+    },
+  })
+})

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

@@ -2,8 +2,6 @@ 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
 
@@ -12,30 +10,14 @@ export const POST = frames(async (ctx) => {
     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 calldata = encodeFunctionData({
     abi,
     functionName: 'purchase',
-    args: [[keyPrice], [userAddress], [userAddress], [userAddress], ['0x']],
+    args: [[priceForUser], [userAddress], [userAddress], [userAddress], ['0x']],
   })
 
   return transaction({
@@ -45,7 +27,7 @@ export const POST = frames(async (ctx) => {
       abi: abi as Abi,
       to: lockAddress as `0x${string}`,
       data: calldata,
-      value: keyPrice.toString(),
+      value: priceForUser,
     },
   })
 })