From 3a080daf25a6873903a367fad37a18594f9313d3 Mon Sep 17 00:00:00 2001
From: Serkan Reis <serkanreis@gmail.com>
Date: Mon, 13 Feb 2023 19:59:16 +0300
Subject: [PATCH] Update confirmation modal

---
 components/BadgeConfirmationModal.tsx | 67 +++++++++++++++++++++++++++
 pages/badges/create.tsx               | 67 ++++++++++-----------------
 2 files changed, 92 insertions(+), 42 deletions(-)
 create mode 100644 components/BadgeConfirmationModal.tsx

diff --git a/components/BadgeConfirmationModal.tsx b/components/BadgeConfirmationModal.tsx
new file mode 100644
index 0000000..1bc6489
--- /dev/null
+++ b/components/BadgeConfirmationModal.tsx
@@ -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>
+  )
+}
diff --git a/pages/badges/create.tsx b/pages/badges/create.tsx
index 5573ce8..3ba053a 100644
--- a/pages/badges/create.tsx
+++ b/pages/badges/create.tsx
@@ -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