diff --git a/unlock-app/src/components/content/event/LockDeploying.tsx b/unlock-app/src/components/content/event/LockDeploying.tsx index c302469469c..440a728fe88 100644 --- a/unlock-app/src/components/content/event/LockDeploying.tsx +++ b/unlock-app/src/components/content/event/LockDeploying.tsx @@ -2,10 +2,7 @@ import { Button } from '@unlock-protocol/ui' import Link from 'next/link' import { useRouter } from 'next/navigation' import { FiExternalLink as ExternalLinkIcon } from 'react-icons/fi' -import { - AnimationContent, - DeployStatus, -} from '~/components/interface/locks/Create/elements/CreateLockFormSummary' +import { AnimationContent } from '~/components/interface/locks/Create/elements/CreateLockFormSummary' import { useConfig } from '~/utils/withConfig' import { TransactionDetails } from './NewEvent' import { useEffect, useState } from 'react' @@ -33,84 +30,108 @@ export const LockDeploying = ({ }) const { hash: transactionHash, network, slug } = transactionDetails - // Poll for event status every 2 seconds - useInterval(async () => { - if (slug) { - const { data: event } = await locksmith.getEvent(slug) - setEventData({ - status: event.data?.status as EventStatus, - }) + const [title, setTitle] = useState('Waiting for your transaction to be mined') + const [message, setMessage] = useState( + compact + ? 'Please do not close this drawer' + : 'Please do not close this window' + ) + + // Update title and message when event is deployed + useEffect(() => { + if (eventData.status === EventStatus.DEPLOYED) { + setTitle('🚀​ Your contract was successfully deployed') + setMessage( + 'Did you know that you can airdrop tickets to your fren by sending them email?' + ) } - }, 2000) + }, [eventData.status]) - let status: DeployStatus = 'progress' - let title = 'Waiting for your transaction to be mined' - let message = compact - ? 'Please do not close this drawer' - : 'Please do not close this window' + // Poll for event status every 5 seconds + useInterval( + async () => { + if (!slug) return + try { + const { data: event } = await locksmith.getEvent(slug) + setEventData({ + status: event.status as EventStatus, + }) + } catch (error) { + console.error('Failed to fetch event status:', error) + } + }, + eventData.status === EventStatus.DEPLOYED ? null : 5000 + ) + // Scroll to top on mount useEffect(() => { window?.scrollTo(0, 0) }, []) - if (eventData.status === EventStatus.DEPLOYED) { - status = 'deployed' - title = '🚀​ Your contract was successfully deployed' - message = - 'Did you know that you can airdrop tickets to your fren by sending them email?' + const goToEventPage = () => { + if (!slug) return + setLoadingEventPage(true) + router.push( + getEventPath({ + event: { slug }, + }) + ) } - const goToEventPage = () => { - if (slug) { - setLoadingEventPage(true) - router.push( - getEventPath({ - event: { - slug, - }, - }) - ) - } + const renderBlockExplorerLink = () => { + const explorerUrl = config.networks[network].explorer?.urls?.transaction + if (!explorerUrl) return null + + return ( + + View on block explorer + + + ) } return (
- +
Status - {status === 'progress' ? 'In progress...' : 'Deployed'} + {eventData.status === EventStatus.DEPLOYED + ? 'Deployed' + : 'In progress...'}
- {config.networks[network].explorer?.urls?.transaction && ( - - View on block explorer - - - )} + {renderBlockExplorerLink()}
+

{title}

{message} - {status === 'deployed' && !compact && ( + {eventData.status === EventStatus.DEPLOYED && !compact && (

We made a page for your event! Go check it out!