From 74cf4ed934b0b7e6d3c7af45eec18019042d5ebd Mon Sep 17 00:00:00 2001 From: 0xTxbi Date: Tue, 17 Dec 2024 21:18:07 +0100 Subject: [PATCH 1/5] update unlockjs --- packages/unlock-js/openapi.yml | 33 +++++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/packages/unlock-js/openapi.yml b/packages/unlock-js/openapi.yml index 684a18dcbc8..e8d8f99bfdc 100644 --- a/packages/unlock-js/openapi.yml +++ b/packages/unlock-js/openapi.yml @@ -4686,10 +4686,10 @@ paths: operationId: getEvent parameters: - $ref: '#/components/parameters/Slug' - description: Retrieves an event based on its slug. The event data including status and transactionHash can be accessed through the `data` property. + description: Retrieves an event based on its slug. responses: 200: - description: Successfully retrieves the event along with its checkout config. Event details including status and transactionHash are nested under the `data` property. + description: Successfully retrieves the event along with its checkout config. content: application/json: schema: @@ -4697,12 +4697,33 @@ paths: properties: id: type: number - data: - $ref: '#/components/schemas/Event' - checkoutConfig: - $ref: '#/components/schemas/CheckoutConfig' + name: + type: string slug: type: string + image: + type: string + description: + type: string + status: + type: string + enum: [pending, deployed] + transactionHash: + type: string + attributes: + type: array + items: + type: object + required: + - trait_type + - value + properties: + trait_type: + type: string + value: + type: string + checkoutConfig: + $ref: '#/components/schemas/CheckoutConfig' 400: $ref: '#/components/responses/400.Invalid' From 5dbda6ffe86639dce016272c50ddd840af539c10 Mon Sep 17 00:00:00 2001 From: 0xTxbi Date: Tue, 17 Dec 2024 21:21:44 +0100 Subject: [PATCH 2/5] improve deployment status ux --- .../content/event/LockDeploying.tsx | 121 ++++++++++-------- 1 file changed, 71 insertions(+), 50 deletions(-) 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!