fix(unlock-app): checkout frame errors

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

@@ -0,0 +1,37 @@
+import { Abi, encodeFunctionData } from 'viem'
+import { frames } from '../frames'
+import { transaction } from 'frames.js/core'
+import { erc20Abi, getKeyPrice } from '../components/utils'
+
+export const POST = frames(async (ctx) => {
+  if (!ctx?.message) {
+    throw new Error('Invalid frame message')
+  }
+
+  const userAddress = ctx.message.address!
+  const network = Number(ctx.state.lock!.network)
+  const lockAddress = ctx.state.lock!.address
+
+  const keyPrice = await getKeyPrice({
+    lockAddress,
+    network,
+    userAddress,
+  })
+
+  const calldata = encodeFunctionData({
+    abi: erc20Abi,
+    functionName: 'approve',
+    args: [lockAddress, keyPrice],
+  })
+
+  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/defaultFrame.tsx

@@ -1,11 +1,15 @@
 /* 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 || !isErc20
+  const buttonText = approved
+    ? 'Purchase a key'
+    : `Approve ${lock.currencySymbol} spending`
 
   return {
     image: <DefaultImage lock={lock} />,
@@ -18,10 +22,14 @@ export function getDefaultFrame(state: State) {
       },
     },
     buttons: [
-      <Button action="tx" target="/txdata" post_url="?success=true">
-        Purchase a key
+      <Button
+        action="tx"
+        target={approved ? '/txdata' : '/approve'}
+        post_url={approved ? '?success=true' : '?approved=true'}
+      >
+        {buttonText}
       </Button>,
     ],
-    state,
+    state: ctx.state,
   }
 }

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

@@ -3,6 +3,37 @@ import { locksmith } from '../../../../src/config/locksmith'
 import networks from '@unlock-protocol/networks'
 import { config as appConfig } from '~/config/app'
 
+interface GetKeyPriceParams {
+  lockAddress: string
+  network: number
+  userAddress: string
+}
+
+export const erc20Abi = [
+  {
+    type: 'function',
+    name: 'approve',
+    constant: false,
+    inputs: [
+      {
+        name: 'spender',
+        type: 'address',
+      },
+      {
+        name: 'amount',
+        type: 'uint256',
+      },
+    ],
+    outputs: [
+      {
+        name: '',
+        type: 'bool',
+      },
+    ],
+    stateMutability: 'nonpayable',
+  },
+]
+
 export async function getConfig(id: string) {
   const { config } = await fetch(
     `${appConfig.locksmithHost}/v2/checkout/${id}`
@@ -42,6 +73,16 @@ export async function getLockDataFromCheckout(id: string) {
   const res = await web3Service.getLock(lockAddress, network)
   const price = `${res.keyPrice} ${res.currencySymbol}`
 
+  let tokenAddress
+  if (res.currencySymbol !== 'ETH') {
+    const tokens = networks[network].tokens
+    const matches = tokens!.filter(
+      (token) => token.symbol === res.currencySymbol
+    )
+    tokenAddress = matches.find((token) => token.featured) || matches[0] || null
+    tokenAddress = tokenAddress.address
+  }
+
   const redirectUri = config.redirectUri
   const redirectText = config.endingCallToAction
 
@@ -53,9 +94,29 @@ export async function getLockDataFromCheckout(id: string) {
     defaultImage,
     description,
     price,
+    currencySymbol: res.currencySymbol,
+    tokenAddress,
     redirectUri,
     redirectText,
   }
 
   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
+}

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

@@ -8,6 +8,8 @@ export type Lock = {
   defaultImage?: string
   description: string
   price: string
+  currencySymbol: string
+  tokenAddress?: string
   redirectUri?: string
   redirectText?: string
 }

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/txdata/route.ts

@@ -2,8 +2,7 @@ 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'
+import { getKeyPrice } from '../components/utils'
 
 const abi = PublicLockV14.abi
 
@@ -12,25 +11,15 @@ export const POST = frames(async (ctx) => {
     throw new Error('Invalid frame message')
   }
 
-  const userAddress = ctx.message.connectedAddress!
+  const userAddress = ctx.message.address!
   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 keyPrice = await getKeyPrice({
+    lockAddress,
+    network,
+    userAddress,
+  })
 
   const calldata = encodeFunctionData({
     abi,