feat(unlock-app): Support ENS in checkout builder for Referrer field

unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCard.tsx

@@ -7,7 +7,7 @@ import { loadStripe } from '@stripe/stripe-js'
 import { useSelector } from '@xstate/react'
 import { PoweredByUnlock } from '../../PoweredByUnlock'
 import { Pricing } from '../../Lock'
-import { getReferrer, lockTickerSymbol } from '~/utils/checkoutLockUtils'
+import { lockTickerSymbol } from '~/utils/checkoutLockUtils'
 import { Lock } from '~/unlockTypes'
 import { RiErrorWarningFill as ErrorIcon } from 'react-icons/ri'
 import { usePurchase } from '~/hooks/usePurchase'
@@ -22,6 +22,7 @@ import { useGetLockSettings } from '~/hooks/useLockSettings'
 import { getCurrencySymbol } from '~/utils/currency'
 import Disconnect from '../Disconnect'
 import { ToastHelper } from '~/components/helpers/toast.helper'
+import { useGetReferrers } from '~/hooks/useGetReferrers'
 
 interface Props {
   checkoutService: CheckoutService
@@ -171,6 +172,11 @@ export function ConfirmCard({ checkoutService, onConfirmed, onError }: Props) {
     network: lock!.network,
     purchaseData: purchaseData || [],
   })
+  const { data: referrers } = useGetReferrers(
+    recipients,
+    paywallConfig,
+    lockAddress
+  )
 
   const { mutateAsync: capturePayment } = useCapturePayment({
     network: lock!.network,
@@ -191,10 +197,6 @@ export function ConfirmCard({ checkoutService, onConfirmed, onError }: Props) {
   const onConfirmCard = async () => {
     setIsConfirming(true)
     try {
-      const referrers: string[] = recipients.map((recipient) => {
-        return getReferrer(recipient, paywallConfig, lockAddress)
-      })
-
       const stripeIntent = await createPurchaseIntent({
         pricing: totalPricing!.total * 100, //
         // @ts-expect-error - generated types don't narrow down to the right type

unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCrossmint.tsx

@@ -7,7 +7,7 @@ import { Fragment, useCallback, useState } from 'react'
 import { useSelector } from '@xstate/react'
 import { PoweredByUnlock } from '../../PoweredByUnlock'
 import { Pricing } from '../../Lock'
-import { getReferrer, lockTickerSymbol } from '~/utils/checkoutLockUtils'
+import { lockTickerSymbol } from '~/utils/checkoutLockUtils'
 import { Lock } from '~/unlockTypes'
 import { RiErrorWarningFill as ErrorIcon } from 'react-icons/ri'
 import { usePricing } from '~/hooks/usePricing'
@@ -19,6 +19,7 @@ import { TransactionAnimation } from '../../Shell'
 import { config } from '~/config/app'
 import { useGetTokenIdForOwner } from '~/hooks/useGetTokenIdForOwner'
 import Disconnect from '../Disconnect'
+import { useGetReferrers } from '~/hooks/useGetReferrers'
 
 interface Props {
   checkoutService: CheckoutService
@@ -46,7 +47,6 @@ export function ConfirmCrossmint({
     useSelector(checkoutService, (state) => state.context)
   const [isConfirming, setIsConfirming] = useState(false)
   const [quote, setQuote] = useState<CrossmintQuote | null>(null)
-
   const crossmintEnv = config.env === 'prod' ? 'production' : 'staging'
 
   const {
@@ -73,6 +73,12 @@ export function ConfirmCrossmint({
     environment: crossmintEnv,
   })
 
+  const { data: referrers } = useGetReferrers(
+    recipients,
+    paywallConfig,
+    lock!.address
+  )
+
   // Handling payment events
   const onCrossmintPaymentEvent = useCallback(
     (paymentEvent: any) => {
@@ -133,10 +139,6 @@ export function ConfirmCrossmint({
       crossmintLoading ||
       (!tokenId && renew))
 
-  const referrers: string[] = recipients.map((recipient) => {
-    return getReferrer(recipient, paywallConfig, lock!.address)
-  })
-
   const values = pricingData
     ? [
         ethers.parseUnits(
@@ -170,7 +172,7 @@ export function ConfirmCrossmint({
     crossmintConfig.mintConfig = {
       totalPrice: pricingData?.total.toString(),
       _values: values,
-      _referrers: referrers,
+      _referrers: referrers?.[0],
       _keyManagers: keyManagers || recipients,
       _data: purchaseData,
     }
@@ -180,7 +182,7 @@ export function ConfirmCrossmint({
       totalPrice: pricingData?.total.toString(),
       _tokenId: tokenId,
       _value: values[0],
-      _referrer: referrers[0],
+      _referrer: referrers?.[0],
       _data: purchaseData ? purchaseData[0] : '',
     }
   }

unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCrypto.tsx

@@ -9,7 +9,7 @@ import { getAccountTokenBalance } from '~/hooks/useAccount'
 import { useSelector } from '@xstate/react'
 import { useWeb3Service } from '~/utils/withWeb3Service'
 import { Pricing } from '../../Lock'
-import { getReferrer, lockTickerSymbol } from '~/utils/checkoutLockUtils'
+import { getReferrers, lockTickerSymbol } from '~/utils/checkoutLockUtils'
 import { Lock } from '~/unlockTypes'
 import ReCaptcha from 'react-google-recaptcha'
 import { RiErrorWarningFill as ErrorIcon } from 'react-icons/ri'
@@ -146,10 +146,6 @@ export function ConfirmCrypto({
         pricingData?.prices.map((item) => item.amount.toString()) ||
         new Array(recipients!.length).fill(keyPrice)
 
-      const referrers: string[] = recipients.map((recipient) => {
-        return getReferrer(recipient, paywallConfig, lockAddress)
-      })
-
       const onErrorCallback = (error: Error | null, hash: string | null) => {
         setIsConfirming(false)
         if (error) {
@@ -165,11 +161,16 @@ export function ConfirmCrypto({
 
       const walletService = await getWalletService(lockNetwork)
       if (renew) {
+        const referrers = await getReferrers(
+          [account!],
+          paywallConfig,
+          lockAddress
+        )
         await walletService.extendKey(
           {
             lockAddress,
             owner: recipients?.[0],
-            referrer: getReferrer(account!, paywallConfig, lockAddress),
+            referrer: referrers[0],
             data: purchaseData?.[0],
             recurringPayment: recurringPayments
               ? recurringPayments[0]
@@ -179,6 +180,11 @@ export function ConfirmCrypto({
           onErrorCallback
         )
       } else {
+        const referrers = await getReferrers(
+          recipients,
+          paywallConfig,
+          lockAddress
+        )
         await walletService.purchaseKeys(
           {
             lockAddress,

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

@@ -228,7 +228,6 @@ export function Select({ checkoutService }: Props) {
               props.network || paywallConfig.network || 1
 
             const lockData = await web3Service.getLock(lock, networkId)
-
             let price
 
             if (account) {

unlock-app/src/components/interface/keychain/Extend.tsx

@@ -19,7 +19,7 @@ import { config } from '~/config/app'
 import { useWeb3Service } from '~/utils/withWeb3Service'
 import { Placeholder } from '@unlock-protocol/ui'
 import { Key } from '~/hooks/useKeys'
-import { getReferrer } from '~/utils/checkoutLockUtils'
+import { getReferrers } from '~/utils/checkoutLockUtils'
 
 const ExtendMembershipPlaceholder = () => {
   return (
@@ -121,10 +121,11 @@ export const ExtendMembershipModal = ({
         walletService.signer
       )
     } else {
+      const referrers = await getReferrers([account!])
       await walletService.extendKey({
         lockAddress: lock?.address,
         tokenId: ownedKey.tokenId,
-        referrer: getReferrer(account!),
+        referrer: referrers[0],
         recurringPayment: renewal ? renewal : undefined,
         totalApproval: unlimited ? MAX_UINT : undefined,
       })

unlock-app/src/hooks/useCrossChainRoutes.ts

@@ -4,7 +4,7 @@ import { useWeb3Service } from '~/utils/withWeb3Service'
 import { Lock } from '~/unlockTypes'
 import { useAuth } from '~/contexts/AuthenticationContext'
 import { purchasePriceFor } from './usePricing'
-import { getReferrer } from '~/utils/checkoutLockUtils'
+import { getReferrers } from '~/utils/checkoutLockUtils'
 import { CrossChainRoute, getCrossChainRoute } from '~/utils/theBox'
 import { networks } from '@unlock-protocol/networks'
 import { BoxEvmChains } from '@decent.xyz/box-common'
@@ -150,15 +150,18 @@ export const useCrossChainRoutes = ({
             ) {
               return null
             }
+            const referrers = await getReferrers(
+              [account!],
+              paywallConfig,
+              lock.address
+            )
             const route = await getCrossChainRoute({
               sender: account!,
               lock,
               prices,
               recipients,
               keyManagers: keyManagers || recipients,
-              referrers: recipients.map(() =>
-                getReferrer(account!, paywallConfig, lock.address)
-              ),
+              referrers: recipients.map(() => referrers[0]),
               purchaseData: purchaseData || recipients.map(() => '0x'),
               srcToken: token.address,
               srcChainId: network,

unlock-app/src/hooks/useGetReferrers.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query'
+import { PaywallConfigType } from '@unlock-protocol/core'
+
+import { getReferrers } from '~/utils/checkoutLockUtils'
+
+export const useGetReferrers = (
+  recipients: string[],
+  paywallConfig: PaywallConfigType,
+  lockAddress?: string
+) => {
+  return useQuery({
+    queryKey: ['getReferrers', paywallConfig, lockAddress, recipients],
+    queryFn: async () => {
+      return getReferrers(recipients, paywallConfig, lockAddress)
+    },
+  })
+}

unlock-app/src/hooks/usePricing.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import { PaywallConfigType } from '@unlock-protocol/core'
 import { networks } from '@unlock-protocol/networks'
 import { ethers } from 'ethers'
-import { getReferrer } from '~/utils/checkoutLockUtils'
+import { getReferrers } from '~/utils/checkoutLockUtils'
 import { useWeb3Service } from '~/utils/withWeb3Service'
 
 interface Options {
@@ -33,14 +33,14 @@ export const purchasePriceFor = async (
     ? await web3Service.getTokenDecimals(currencyContractAddress!, network)
     : networks[network].nativeCurrency?.decimals || 18
 
+  const referrers = await getReferrers(recipients, paywallConfig, lockAddress)
   const prices = await Promise.all(
     recipients.map(async (userAddress, index) => {
-      const referrer = getReferrer(userAddress, paywallConfig, lockAddress)
       const options = {
         lockAddress,
         network,
         userAddress,
-        referrer,
+        referrer: referrers[index],
         data: data?.[index] || '0x',
       }
       const price = await web3Service.purchasePriceFor(options)

unlock-app/src/utils/checkoutLockUtils.ts

@@ -3,11 +3,14 @@
 // type so that it at least includes as optional all possible
 // properties on a lock. These are all compatible with RawLock insofar
 
+import { PaywallConfigType } from '@unlock-protocol/core'
+import { isEns } from '@unlock-protocol/ui'
+
 import { Lock } from '~/unlockTypes'
 import { isAccount } from '../utils/checkoutValidators'
 import { locksmith } from '~/config/locksmith'
 import { getCurrencySymbol } from './currency'
-import { PaywallConfigType } from '@unlock-protocol/core'
+import { onResolveName } from './resolvers'
 
 // as they only extend it with properties that may be undefined.
 interface LockKeysAvailableLock {
@@ -145,29 +148,61 @@ export const inClaimDisallowList = (address: string) => {
   return claimDisallowList.indexOf(address) > -1
 }
 
-/**
- * Helper function that returns a valid referrer address
- * @param recipient
- * @param paywallConfig
- * @param lockAddress
- * @returns
- */
-export const getReferrer = (
-  recipient: string,
+export const shouldReferrerResolveForENS = (
   paywallConfig?: PaywallConfigType,
   lockAddress?: string
-): string => {
+) => {
   if (paywallConfig) {
     if (
       lockAddress &&
       paywallConfig.locks[lockAddress] &&
       isAccount(paywallConfig.locks[lockAddress].referrer)
     ) {
-      return paywallConfig.locks[lockAddress].referrer!
+      return false
     }
-    if (paywallConfig.referrer && isAccount(paywallConfig.referrer)) {
-      return paywallConfig.referrer
+    if (paywallConfig.referrer && isEns(paywallConfig.referrer)) {
+      return true
     }
   }
-  return recipient
+  return false
+}
+
+export const getReferrers = async (
+  recipients: string[],
+  paywallConfig?: PaywallConfigType,
+  lockAddress?: string
+): Promise<string[]> => {
+  const isReferrerAddressEns = shouldReferrerResolveForENS(
+    paywallConfig,
+    lockAddress
+  )
+  if (isReferrerAddressEns) {
+    if (isReferrerAddressEns && paywallConfig && paywallConfig.referrer) {
+      try {
+        // paywallConfig.referrer is always a string if isReferrerAddressEns is true
+        const response = await onResolveName(paywallConfig.referrer)
+        if (response && response.address && response.address !== null) {
+          return recipients.map(() => response.address as string)
+        }
+      } catch (e) {
+        console.log('Error resolving referrer ENS', e)
+      }
+    }
+  }
+
+  return recipients.map((recipient) => {
+    if (paywallConfig) {
+      if (
+        lockAddress &&
+        paywallConfig.locks[lockAddress] &&
+        isAccount(paywallConfig.locks[lockAddress].referrer)
+      ) {
+        return paywallConfig.locks[lockAddress].referrer!
+      }
+      if (paywallConfig.referrer && isAccount(paywallConfig.referrer)) {
+        return paywallConfig.referrer
+      }
+    }
+    return recipient
+  })
 }