feature(locksmith): adding temporary handling of filbangalore tickets (…

…#12997)

* feature(locksmith): adding temporary handling of filbangalore tickets

* Apply suggestions from code review

* Update locksmith/src/utils/ticket.tsx

* larger QRCode

* reviewer feedback

locksmith/src/controllers/lockController.ts

@@ -5,7 +5,11 @@ import { LockIcons } from '../models'
 import { Request, RequestHandler, Response } from 'express'
 import logger from '../logger'
 import { SubgraphService } from '@unlock-protocol/unlock-js'
-import { getGeneratedLockIcon, getLockIcon } from '../operations/lockOperations'
+import {
+  getGeneratedLockIcon,
+  getLockIcon,
+  getKeyIcon,
+} from '../operations/lockOperations'
 
 export const connectStripe = async (req: Request, res: Response) => {
   const { message } = JSON.parse(decodeURIComponent(req.query.data!.toString()))
@@ -76,18 +80,32 @@ export const stripeConnected = async (req: Request, res: Response) => {
  */
 export const lockIcon = async (req: Request, res: Response) => {
   const lockAddress = Normalizer.ethereumAddress(req.params.lockAddress)
+  const network = parseInt(req.params.network) || 1 // defaults to mainnet
   const { original } = req.query
-  const lockIcon = await getLockIcon({
+
+  let icon = await getLockIcon({
     lockAddress,
     original: original === '1',
     requestUrl: Normalizer.getRequestURL(req).toString(),
   })
 
-  if (lockIcon.isURL) {
-    return res.redirect(lockIcon.icon)
+  if (req.query.id) {
+    // Check if there is a custom icon for this key
+    const keyIcon = await getKeyIcon({
+      network,
+      lockAddress,
+      keyId: String(req.query.id || ''),
+    })
+    if (keyIcon) {
+      icon = keyIcon
+    }
+  }
+
+  if (icon.isURL) {
+    return res.redirect(icon.icon)
   } else {
-    res.setHeader('Content-Type', lockIcon.type)
-    return res.send(lockIcon.icon)
+    res.setHeader('Content-Type', icon.type!)
+    return res.send(icon.icon)
   }
 }
 
@@ -131,7 +149,7 @@ export const getTokenURIImage: RequestHandler<{
     if (lockIcon.isURL) {
       return response.redirect(lockIcon.icon)
     } else {
-      response.setHeader('Content-Type', lockIcon.type)
+      response.setHeader('Content-Type', lockIcon.type!)
       return response.send(lockIcon.icon)
     }
   } catch (error) {

locksmith/src/operations/lockOperations.ts

@@ -5,6 +5,13 @@ import { Op } from 'sequelize'
 import { UserTokenMetadata, LockMetadata, LockIcons } from '../models'
 import parseDataUri from 'parse-data-uri'
 import lockIconUtils from '../utils/lockIcon'
+import { ticketForFilBangalore } from '../utils/ticket'
+
+interface IconType {
+  icon: string
+  type: string | null
+  isURL: boolean
+}
 
 export async function getKeyHolderMetadata(
   address: string,
@@ -36,7 +43,7 @@ export async function isSoldOut(
   return keysAvailable.lt(keysNeeded) // true of keysAvailable smaller than keysNeeded
 }
 
-export const getGeneratedLockIcon = (lockAddress: string) => {
+export const getGeneratedLockIcon = (lockAddress: string): IconType => {
   const svg = lockIconUtils.lockIcon(lockAddress)
   return {
     icon: svg,
@@ -53,7 +60,7 @@ export const getLockIcon = async ({
   lockAddress: string
   original?: boolean
   requestUrl: string
-}) => {
+}): Promise<IconType> => {
   if (original) {
     return getGeneratedLockIcon(lockAddress)
   }
@@ -106,6 +113,33 @@ export const getLockIcon = async ({
   }
 }
 
+export const getKeyIcon = async ({
+  network,
+  lockAddress,
+  keyId,
+}: {
+  network: number
+  lockAddress: string
+  keyId: string
+}): Promise<IconType | null> => {
+  console.log({ lockAddress, keyId })
+
+  // Temporary icon for FilBangalore
+  if (
+    network == 42161 &&
+    lockAddress.toLowerCase() === '0x02c510be69fe87e052e065d8a40b437d55907b48'
+  ) {
+    const icon = await ticketForFilBangalore({
+      network,
+      lockAddress,
+      tokenId: keyId,
+    })
+
+    return { type: 'image/svg+xml', icon, isURL: false }
+  }
+  return null
+}
+
 const lockOperations = {
   isSoldOut,
   getKeyHolderMetadata,

locksmith/src/operations/metadataOperations.ts

@@ -89,7 +89,6 @@ export const generateKeyMetadata = async (
     lockAddress: address,
     network,
   }
-
   return data
 }
 
@@ -113,6 +112,16 @@ export const getBaseTokenData = async (
     ...baseMetadata,
   }
 
+  // Temporary for FilBangalore
+  // Ok to remove after 03/31/2024
+  // Uncoment for reveal!
+  // if (
+  //   address.toLowerCase() == '0x02c510be69fe87e052e065d8a40b437d55907b48' &&
+  //   network == 42161
+  // ) {
+  //   result.image = `${host}/${network}/lock/${address}/icon?id=${keyId}`
+  // }
+
   return result
 }
 

locksmith/src/routes/lock.ts

@@ -28,6 +28,12 @@ router.get(
   lockController.lockIcon
 )
 
+router.get(
+  '/:network/lock/:lockAddress/icon',
+  createCacheMiddleware(),
+  lockController.lockIcon
+)
+
 router.get(
   '/image/:network/:lockAddress/:keyId?',
   lockController.getTokenURIImage

locksmith/src/utils/ticket.tsx

@@ -8,6 +8,7 @@ const inter700 = readFileSync('src/fonts/inter-700.woff')
 import { Ticket } from '@unlock-protocol/ui'
 import normalizer from './normalizer'
 import { imageUrlToBase64 } from './image'
+import FilBangalore from '../assets/FilBangalore'
 
 interface Options {
   network: number
@@ -106,3 +107,23 @@ export const createTicket = async ({
   )
   return ticket
 }
+
+export const ticketForFilBangalore = async ({
+  network,
+  lockAddress,
+  tokenId,
+}: {
+  network: number
+  lockAddress: string
+  tokenId: string
+}) => {
+  // We need to generate the icon from SVG + QR code!
+  const qrCode = await generateQrCode({
+    network,
+    lockAddress,
+    tokenId,
+  })
+
+  // Let's now generate the SVG
+  return FilBangalore(qrCode)
+}