Update confirmation modal
This commit is contained in:
Serkan Reis
parent
007c0127ad
commit
3a080daf25
67
components/BadgeConfirmationModal.tsx
Normal file
67
components/BadgeConfirmationModal.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
import { Button } from './Button'
|
||||
|
||||
export interface BadgeConfirmationModalProps {
|
||||
confirm: () => void
|
||||
}
|
||||
export const BadgeConfirmationModal = (props: BadgeConfirmationModalProps) => {
|
||||
const [isChecked, setIsChecked] = useState(false)
|
||||
return (
|
||||
<div>
|
||||
<input className="modal-toggle" defaultChecked id="my-modal-2" type="checkbox" />
|
||||
<label className="cursor-pointer modal" htmlFor="my-modal-2">
|
||||
<label
|
||||
className="absolute top-[25%] bottom-5 left-1/3 max-w-[600px] max-h-[400px] border-2 no-scrollbar modal-box"
|
||||
htmlFor="temp"
|
||||
>
|
||||
{/* <Alert type="warning"></Alert> */}
|
||||
<div className="text-xl font-bold">
|
||||
<div className="text-sm font-thin">
|
||||
You represent and warrant that you have, or have obtained, all rights, licenses, consents, permissions,
|
||||
power and/or authority necessary to grant the rights granted herein for any content that you create,
|
||||
submit, post, promote, or display on or through the Service. You represent and warrant that such contain
|
||||
material subject to copyright, trademark, publicity rights, or other intellectual property rights, unless
|
||||
you have necessary permission or are otherwise legally entitled to post the material and to grant Stargaze
|
||||
Parties the license described above, and that the content does not violate any laws.
|
||||
</div>
|
||||
<br />
|
||||
<div className="flex flex-row pb-4">
|
||||
<label className="flex flex-col space-y-1" htmlFor="terms">
|
||||
<span className="text-sm font-light text-white">I agree with the terms above.</span>
|
||||
</label>
|
||||
<input
|
||||
checked={isChecked}
|
||||
className="p-2 mb-1 ml-2"
|
||||
id="terms"
|
||||
name="terms"
|
||||
onClick={() => setIsChecked(!isChecked)}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
Are you sure to proceed with creating a new badge?
|
||||
</div>
|
||||
<div className="flex justify-end w-full">
|
||||
<Button className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-600">
|
||||
<label
|
||||
className="w-full h-full text-white bg-gray-600 hover:bg-gray-600 rounded border-0 btn modal-button"
|
||||
htmlFor="my-modal-2"
|
||||
>
|
||||
Go Back
|
||||
</label>
|
||||
</Button>
|
||||
<Button className="px-0 mt-4 mb-4 max-h-12" isDisabled={!isChecked} onClick={props.confirm}>
|
||||
<label
|
||||
className="w-full h-full text-white bg-plumbus hover:bg-plumbus-light border-0 btn modal-button"
|
||||
htmlFor="my-modal-2"
|
||||
>
|
||||
Confirm
|
||||
</label>
|
||||
</Button>
|
||||
</div>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -6,14 +6,16 @@
|
||||
import clsx from 'clsx'
|
||||
import { Alert } from 'components/Alert'
|
||||
import { Anchor } from 'components/Anchor'
|
||||
import { BadgeConfirmationModal } from 'components/BadgeConfirmationModal'
|
||||
import { BadgeLoadingModal } from 'components/BadgeLoadingModal'
|
||||
import type { BadgeDetailsDataProps } from 'components/badges/creation/BadgeDetails'
|
||||
import { BadgeDetails } from 'components/badges/creation/BadgeDetails'
|
||||
import type { ImageUploadDetailsDataProps, MintRule } from 'components/badges/creation/ImageUploadDetails'
|
||||
import { ImageUploadDetails } from 'components/badges/creation/ImageUploadDetails'
|
||||
import { Button } from 'components/Button'
|
||||
import { Conditional } from 'components/Conditional'
|
||||
import { TextInput } from 'components/forms/FormInput'
|
||||
import { useInputState } from 'components/forms/FormInput.hooks'
|
||||
import { LoadingModal } from 'components/LoadingModal'
|
||||
import { useContracts } from 'contexts/contracts'
|
||||
import { useWallet } from 'contexts/wallet'
|
||||
import type { DispatchExecuteArgs as BadgeHubDispatchExecuteArgs } from 'contracts/badgeHub/messages/execute'
|
||||
@ -32,12 +34,6 @@ import { BADGE_HUB_ADDRESS, BLOCK_EXPLORER_URL, NETWORK } from 'utils/constants'
|
||||
import { withMetadata } from 'utils/layout'
|
||||
import { links } from 'utils/links'
|
||||
|
||||
import { TextInput } from '../../components/forms/FormInput'
|
||||
|
||||
// import { ConfirmationModal } from '../../components/ConfirmationModal'
|
||||
// import { badgeHub } from '../../contracts/badgeHub/contract'
|
||||
// import { isValidAddress } from '../../utils/isValidAddress'
|
||||
|
||||
const BadgeCreationPage: NextPage = () => {
|
||||
const wallet = useWallet()
|
||||
const { badgeHub: badgeHubContract } = useContracts()
|
||||
@ -70,8 +66,10 @@ const BadgeCreationPage: NextPage = () => {
|
||||
try {
|
||||
setReadyToCreateBadge(false)
|
||||
checkImageUploadDetails()
|
||||
// checkMetadataDetails()
|
||||
setReadyToCreateBadge(true)
|
||||
checkBadgeDetails()
|
||||
setTimeout(() => {
|
||||
setReadyToCreateBadge(true)
|
||||
}, 100)
|
||||
} catch (error: any) {
|
||||
toast.error(error.message, { style: { maxWidth: 'none' } })
|
||||
setUploading(false)
|
||||
@ -180,32 +178,17 @@ const BadgeCreationPage: NextPage = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// const checkBadgeDetails = () => {
|
||||
// if (!metadataDetails) throw new Error('Please fill out the collection details')
|
||||
// if (collectionDetails.name === '') throw new Error('Collection name is required')
|
||||
// if (collectionDetails.description === '') throw new Error('Collection description is required')
|
||||
// if (collectionDetails.description.length > 512)
|
||||
// throw new Error('Collection description cannot exceed 512 characters')
|
||||
// if (uploadDetails?.uploadMethod === 'new' && collectionDetails.imageFile.length === 0)
|
||||
// throw new Error('Collection cover image is required')
|
||||
// if (
|
||||
// collectionDetails.startTradingTime &&
|
||||
// Number(collectionDetails.startTradingTime) < new Date().getTime() * 1000000
|
||||
// )
|
||||
// throw new Error('Invalid trading start time')
|
||||
// if (
|
||||
// collectionDetails.startTradingTime &&
|
||||
// Number(collectionDetails.startTradingTime) < Number(mintingDetails?.startTime)
|
||||
// )
|
||||
// throw new Error('Trading start time must be after minting start time')
|
||||
// if (collectionDetails.externalLink) {
|
||||
// try {
|
||||
// const url = new URL(collectionDetails.externalLink)
|
||||
// } catch (e: any) {
|
||||
// throw new Error(`Invalid external link: Make sure to include the protocol (e.g. https://)`)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
const checkBadgeDetails = () => {
|
||||
if (!badgeDetails) throw new Error('Please fill out the required fields')
|
||||
if (keyState.value === '' || !createdBadgeKey) throw new Error('Please generate a key')
|
||||
if (badgeDetails.external_url) {
|
||||
try {
|
||||
const url = new URL(badgeDetails.external_url)
|
||||
} catch (e: any) {
|
||||
throw new Error(`Invalid external url: Make sure to include the protocol (e.g. https://)`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleGenerateKey = () => {
|
||||
let privKey: Buffer
|
||||
@ -218,7 +201,7 @@ const BadgeCreationPage: NextPage = () => {
|
||||
console.log('Private Key: ', privateKey)
|
||||
|
||||
const publicKey = Buffer.from(secp256k1.publicKeyCreate(privKey)).toString('hex')
|
||||
|
||||
setBadgeId(null)
|
||||
keyState.onChange(publicKey)
|
||||
}
|
||||
|
||||
@ -265,7 +248,7 @@ const BadgeCreationPage: NextPage = () => {
|
||||
<h1 className="font-heading text-4xl font-bold">Create Badge</h1>
|
||||
|
||||
<Conditional test={uploading}>
|
||||
<LoadingModal />
|
||||
<BadgeLoadingModal />
|
||||
</Conditional>
|
||||
|
||||
<p>
|
||||
@ -442,7 +425,7 @@ const BadgeCreationPage: NextPage = () => {
|
||||
<ImageUploadDetails mintRule={mintRule} onChange={setImageUploadDetails} />
|
||||
|
||||
<div className="flex flex-row justify-start py-3 px-8 mb-3 w-full rounded border-2 border-white/20">
|
||||
<TextInput className="ml-4 w-full max-w-2xl" {...keyState} />
|
||||
<TextInput className="ml-4 w-full max-w-2xl" {...keyState} disabled required />
|
||||
<Button className="mt-14 ml-4" isDisabled={creatingBadge} onClick={handleGenerateKey}>
|
||||
Generate Key
|
||||
</Button>
|
||||
@ -456,15 +439,15 @@ const BadgeCreationPage: NextPage = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <Conditional test={readyToCreateBadge}>
|
||||
<ConfirmationModal confirm={createNewBadge} />
|
||||
</Conditional> */}
|
||||
<Conditional test={readyToCreateBadge}>
|
||||
<BadgeConfirmationModal confirm={createNewBadge} />
|
||||
</Conditional>
|
||||
|
||||
<div className="flex justify-end w-full">
|
||||
<Button
|
||||
className="relative justify-center p-2 mt-2 mb-6 max-h-12 text-white bg-plumbus hover:bg-plumbus-light border-0"
|
||||
isLoading={creatingBadge}
|
||||
onClick={() => createNewBadge()}
|
||||
onClick={() => performBadgeCreationChecks()}
|
||||
variant="solid"
|
||||
>
|
||||
Create Badge
|
||||
|
||||
Loading…
Reference in New Issue
Block a user