fix(unlock-app):minting fixes (#14018)

* minting fixes * more cleanup * restored emiting the checkout change * removed exta unneeded dep
unlock-protocol · Jun 6, 2024 · 17edcdf · 17edcdf
1 parent 475c057
commit 17edcdf
Show file tree

Hide file tree

Showing 17 changed files with 82 additions and 153 deletions.
diff --git a/unlock-app/src/components/content/certification/CertificationDetails.tsx b/unlock-app/src/components/content/certification/CertificationDetails.tsx
@@ -25,8 +25,6 @@ import LinkedinShareButton from './LinkedInShareButton'
 import { useCertification } from '~/hooks/useCertification'
 import { useState } from 'react'
 import { Checkout } from '~/components/interface/checkout/main'
-import { selectProvider } from '~/hooks/useAuthenticate'
-import { useConfig } from '~/utils/withConfig'
 import { useValidKey } from '~/hooks/useKey'
 import { useTransferFee } from '~/hooks/useTransferFee'
 import { useQuery } from '@tanstack/react-query'
@@ -128,7 +126,6 @@ export const CertificationDetails = ({
   tokenId,
 }: CertificationDetailsProps) => {
   const { account } = useAuth()
-  const config = useConfig()
   const [isCheckoutOpen, setCheckoutOpen] = useState(false)
 
   const { lock, isLockLoading: isLockDataLoading } = useLockData({
@@ -324,7 +321,6 @@ export const CertificationDetails = ({
 
   const showCertification = key || (tokenId && key)
 
-  const injectedProvider = selectProvider(config)
   const paywallConfig = {
     locks: {
       [lockAddress]: {
@@ -346,7 +342,6 @@ export const CertificationDetails = ({
     <main className="mt-8">
       <Modal isOpen={isCheckoutOpen} setIsOpen={setCheckoutOpen} empty={true}>
         <Checkout
-          injectedProvider={injectedProvider as any}
           paywallConfig={paywallConfig}
           handleClose={() => setCheckoutOpen(false)}
         />

diff --git a/unlock-app/src/components/content/event/Registration/EmbeddedCheckout.tsx b/unlock-app/src/components/content/event/Registration/EmbeddedCheckout.tsx
@@ -1,15 +1,11 @@
 import { Button, Modal } from '@unlock-protocol/ui'
 import { Checkout } from '~/components/interface/checkout/main'
 import { useMemo, useState } from 'react'
-import { selectProvider } from '~/hooks/useAuthenticate'
-import { useConfig } from '~/utils/withConfig'
 import { useRouter } from 'next/router'
 
 export const EmbeddedCheckout = ({ checkoutConfig, refresh }: any) => {
   const [isCheckoutOpen, setCheckoutOpen] = useState(false)
-  const config = useConfig()
   const { query } = useRouter()
-  const injectedProvider = selectProvider(config)
   const paywallConfig = useMemo(() => {
     if (query.referrer) {
       return {
@@ -24,7 +20,6 @@ export const EmbeddedCheckout = ({ checkoutConfig, refresh }: any) => {
     <>
       <Modal isOpen={isCheckoutOpen} setIsOpen={setCheckoutOpen} empty={true}>
         <Checkout
-          injectedProvider={injectedProvider as any}
           paywallConfig={paywallConfig}
           handleClose={() => {
             refresh()

diff --git a/unlock-app/src/components/content/event/Registration/WalletlessRegistration.tsx b/unlock-app/src/components/content/event/Registration/WalletlessRegistration.tsx
@@ -89,6 +89,7 @@ const WalletlessRegistrationClaiming = ({
         <div className="m-auto mt-20 h-72 mb-36">
           <MintingScreen
             mint={{
+              network: network,
               status: transactionStatus,
               transactionHash: claimResult.hash,
             }}

diff --git a/unlock-app/src/components/interface/checkout/Connect/index.tsx b/unlock-app/src/components/interface/checkout/Connect/index.tsx
@@ -10,14 +10,11 @@ import { useMachine } from '@xstate/react'
 interface Props {
   oauthConfig: OAuthConfig
   injectedProvider: unknown
-  communication: ReturnType<typeof useCheckoutCommunication>
 }
 
-export function Connect({
-  injectedProvider,
-  oauthConfig,
-  communication,
-}: Props) {
+export function Connect({ injectedProvider, oauthConfig }: Props) {
+  const communication = useCheckoutCommunication()
+
   // @ts-expect-error - The types returned by 'resolveState(...)' are incompatible between these types
   const [state, send, connectService] = useMachine(connectMachine)
   const matched = state.value.toString()

diff --git a/unlock-app/src/components/interface/checkout/index.tsx b/unlock-app/src/components/interface/checkout/index.tsx
@@ -90,7 +90,6 @@ export function CheckoutPage() {
       <Container>
         <Connect
           injectedProvider={injectedProvider}
-          communication={communication}
           oauthConfig={oauthConfig}
         />
       </Container>
@@ -100,8 +99,6 @@ export function CheckoutPage() {
     return (
       <Container>
         <Checkout
-          injectedProvider={injectedProvider}
-          communication={communication}
           paywallConfig={paywallConfig}
           redirectURI={
             checkoutRedirectURI ? new URL(checkoutRedirectURI) : undefined

diff --git a/unlock-app/src/components/interface/checkout/main/Confirm.tsx b/unlock-app/src/components/interface/checkout/main/Confirm.tsx
@@ -1,7 +1,7 @@
 import { CheckoutService } from './checkoutMachine'
 import { Fragment } from 'react'
 import { useSelector } from '@xstate/react'
-import { CheckoutCommunication } from '~/hooks/useCheckoutCommunication'
+import { useCheckoutCommunication } from '~/hooks/useCheckoutCommunication'
 import { Stepper } from '../Stepper'
 import { ToastHelper } from '~/components/helpers/toast.helper'
 import { ConfirmClaim } from './Confirm/ConfirmClaim'
@@ -14,10 +14,10 @@ import { ConfirmCrossChainPurchase } from './Confirm/ConfirmCrossChainPurchase'
 
 interface Props {
   checkoutService: CheckoutService
-  communication?: CheckoutCommunication
 }
 
-export function Confirm({ checkoutService, communication }: Props) {
+export function Confirm({ checkoutService }: Props) {
+  const communication = useCheckoutCommunication()
   const { payment, paywallConfig, messageToSign, metadata } = useSelector(
     checkoutService,
     (state) => state.context
@@ -28,7 +28,7 @@ export function Confirm({ checkoutService, communication }: Props) {
     ToastHelper.error(message)
   }
 
-  const onConfirmed = (lock: string, hash?: string, network?: number) => {
+  const onConfirmed = (lock: string, network: number, hash?: string) => {
     // If not pessimistic, we can emit the transaction info right away
     // and pass the signed message as well
     if (!paywallConfig.pessimistic && hash) {

diff --git a/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCard.tsx b/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCard.tsx
@@ -26,7 +26,7 @@ import Disconnect from '../Disconnect'
 
 interface Props {
   checkoutService: CheckoutService
-  onConfirmed: (lock: string, hash?: string) => void
+  onConfirmed: (lock: string, network: number, hash?: string) => void
   onError: (message: string) => void
 }
 
@@ -264,7 +264,7 @@ export function ConfirmCard({ checkoutService, onConfirmed, onError }: Props) {
       paymentIntent: paymentIntent.id,
     })
       .then((transactionHash) => {
-        onConfirmed(lockAddress, transactionHash)
+        onConfirmed(lockAddress, lockNetwork, transactionHash)
         setIsConfirming(false)
       })
       .catch((error) => {

diff --git a/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmClaim.tsx b/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmClaim.tsx
@@ -18,7 +18,7 @@ import Disconnect from '../Disconnect'
 
 interface Props {
   checkoutService: CheckoutService
-  onConfirmed: (lock: string, hash?: string) => void
+  onConfirmed: (lock: string, network: number, hash?: string) => void
   onError: (message: string) => void
 }
 
@@ -82,7 +82,7 @@ export function ConfirmClaim({ checkoutService, onConfirmed, onError }: Props) {
     })
 
     if (hash) {
-      onConfirmed(lockAddress, hash)
+      onConfirmed(lockAddress, lockNetwork, hash)
     } else {
       onError('No transaction hash returned. Failed to claim membership.')
     }

diff --git a/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCrossChainPurchase.tsx b/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCrossChainPurchase.tsx
@@ -20,7 +20,7 @@ import Disconnect from '../Disconnect'
 
 interface Props {
   checkoutService: CheckoutService
-  onConfirmed: (lock: string, hash?: string, network?: number) => void
+  onConfirmed: (lock: string, network: number, hash?: string) => void
   onError: (message: string) => void
 }
 
@@ -96,7 +96,7 @@ export function ConfirmCrossChainPurchase({
       setIsConfirming(true)
       const walletService = await getWalletService(route.network)
       const tx = await walletService.signer.sendTransaction(route.tx)
-      onConfirmed(lockAddress, tx.hash, route.network)
+      onConfirmed(lockAddress, route.network, tx.hash)
     } catch (error: any) {
       setIsConfirming(false)
       onError(error)

diff --git a/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCrossmint.tsx b/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCrossmint.tsx
@@ -22,7 +22,7 @@ import Disconnect from '../Disconnect'
 
 interface Props {
   checkoutService: CheckoutService
-  onConfirmed: (lock: string, hash?: string) => void
+  onConfirmed: (lock: string, network: number, hash?: string) => void
   onError: (message: string) => void
 }
 
@@ -92,7 +92,7 @@ export function ConfirmCrossmint({
         setIsConfirming(true)
         listenToMintingEvents(paymentEvent.payload, (mintingEvent) => {
           if (mintingEvent.type === 'transaction:fulfillment.succeeded') {
-            onConfirmed(lock!.address, mintingEvent.payload.txId)
+            onConfirmed(lock!.address, lock!.network, mintingEvent.payload.txId)
           }
         })
       }

diff --git a/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCrypto.tsx b/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCrypto.tsx
@@ -24,7 +24,7 @@ import Disconnect from '../Disconnect'
 
 interface Props {
   checkoutService: CheckoutService
-  onConfirmed: (lock: string, hash?: string) => void
+  onConfirmed: (lock: string, network: number, hash?: string) => void
   onError: (message: string) => void
 }
 
@@ -168,7 +168,7 @@ export function ConfirmCrypto({
             transactionHash: hash!,
           })
         } else if (hash) {
-          onConfirmed(lockAddress, hash)
+          onConfirmed(lockAddress, lockNetwork, hash)
         }
       }
 

diff --git a/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmSwapAndPurchase.tsx b/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmSwapAndPurchase.tsx
@@ -22,7 +22,7 @@ import Disconnect from '../Disconnect'
 
 interface Props {
   checkoutService: CheckoutService
-  onConfirmed: (lock: string, hash?: string) => void
+  onConfirmed: (lock: string, network: number, hash?: string) => void
   onError: (message: string) => void
 }
 
@@ -144,7 +144,7 @@ export function ConfirmSwapAndPurchase({
             transactionHash: hash!,
           })
         } else if (hash) {
-          onConfirmed(lockAddress, hash)
+          onConfirmed(lockAddress, lock!.network, hash)
         }
       }
       const swap = {

diff --git a/unlock-app/src/components/interface/checkout/main/MessageToSign.tsx b/unlock-app/src/components/interface/checkout/main/MessageToSign.tsx
@@ -11,10 +11,10 @@ import Disconnect from './Disconnect'
 
 interface Props {
   checkoutService: CheckoutService
-  communication?: ReturnType<typeof useCheckoutCommunication>
 }
 
-export function MessageToSign({ communication, checkoutService }: Props) {
+export function MessageToSign({ checkoutService }: Props) {
+  const communication = useCheckoutCommunication()
   const { messageToSign } = useSelector(
     checkoutService,
     (state) => state.context.paywallConfig