From 4799a32359126d033098b8ef2c9d9e7bd4528d04 Mon Sep 17 00:00:00 2001
From: Serkan Reis <serkanreis@gmail.com>
Date: Tue, 13 Jun 2023 12:04:08 +0300
Subject: [PATCH] Update collection creation tabs

---
 components/collections/actions/Combobox.tsx |   2 +-
 pages/collections/create.tsx                | 126 +++++++++++---------
 2 files changed, 73 insertions(+), 55 deletions(-)

diff --git a/components/collections/actions/Combobox.tsx b/components/collections/actions/Combobox.tsx
index d520d6f..733c703 100644
--- a/components/collections/actions/Combobox.tsx
+++ b/components/collections/actions/Combobox.tsx
@@ -8,7 +8,7 @@ import { FaChevronDown, FaInfoCircle } from 'react-icons/fa'
 import type { ActionListItem } from './actions'
 import { BASE_ACTION_LIST, SG721_UPDATABLE_ACTION_LIST, VENDING_ACTION_LIST } from './actions'
 
-export type MinterType = 'base' | 'vending'
+export type MinterType = 'base' | 'vending' | 'openEdition'
 export type Sg721Type = 'updatable' | 'base'
 
 export interface ActionsComboboxProps {
diff --git a/pages/collections/create.tsx b/pages/collections/create.tsx
index 8e41d69..fbc9c6a 100644
--- a/pages/collections/create.tsx
+++ b/pages/collections/create.tsx
@@ -48,6 +48,7 @@ import {
   BASE_FACTORY_UPDATABLE_ADDRESS,
   BLOCK_EXPLORER_URL,
   NETWORK,
+  OPEN_EDITION_FACTORY_ADDRESS,
   SG721_CODE_ID,
   SG721_UPDATABLE_CODE_ID,
   STARGAZE_URL,
@@ -1289,67 +1290,84 @@ const CollectionCreationPage: NextPage = () => {
         </Conditional>
       </div>
 
-      {/* To be removed */}
-      <Conditional test={BASE_FACTORY_ADDRESS === undefined}>
-        <div className="mx-10 mt-5" />
-      </Conditional>
-      <Conditional test={BASE_FACTORY_ADDRESS !== undefined}>
-        {/* /To be removed */}
-        <div>
+      <div>
+        <div
+          className={clsx(
+            'mx-10 mt-5',
+            'grid before:absolute relative grid-cols-3 grid-flow-col items-stretch rounded',
+            'before:inset-x-0 before:bottom-0 before:border-white/25',
+          )}
+        >
           <div
             className={clsx(
-              'mx-10 mt-5',
-              'grid before:absolute relative grid-cols-2 grid-flow-col items-stretch rounded',
-              'before:inset-x-0 before:bottom-0 before:border-white/25',
+              'isolate space-y-1 border-2',
+              'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
+              minterType === 'vending' ? 'border-stargaze' : 'border-transparent',
+              minterType !== 'vending' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
             )}
           >
-            <div
-              className={clsx(
-                'isolate space-y-1 border-2',
-                'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
-                minterType === 'vending' ? 'border-stargaze' : 'border-transparent',
-                minterType !== 'vending' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
-              )}
+            <button
+              className="p-4 w-full h-full text-left bg-transparent"
+              onClick={() => {
+                setMinterType('vending')
+                resetReadyFlags()
+              }}
+              type="button"
             >
-              <button
-                className="p-4 w-full h-full text-left bg-transparent"
-                onClick={() => {
-                  setMinterType('vending')
-                  resetReadyFlags()
-                }}
-                type="button"
-              >
-                <h4 className="font-bold">Standard Collection</h4>
-                <span className="text-sm text-white/80 line-clamp-2">
-                  A non-appendable collection that facilitates primary market vending machine style minting
-                </span>
-              </button>
-            </div>
-            <div
-              className={clsx(
-                'isolate space-y-1 border-2',
-                'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
-                minterType === 'base' ? 'border-stargaze' : 'border-transparent',
-                minterType !== 'base' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
-              )}
-            >
-              <button
-                className="p-4 w-full h-full text-left bg-transparent"
-                onClick={() => {
-                  setMinterType('base')
-                  resetReadyFlags()
-                }}
-                type="button"
-              >
-                <h4 className="font-bold">1/1 Collection</h4>
-                <span className="text-sm text-white/80 line-clamp-2">
-                  An appendable collection that only allows for direct secondary market listing of tokens
-                </span>
-              </button>
-            </div>
+              <h4 className="font-bold">Standard Collection</h4>
+              <span className="text-sm text-white/80 line-clamp-2">
+                A non-appendable collection that facilitates primary market vending machine style minting
+              </span>
+            </button>
           </div>
+          <div
+            className={clsx(
+              'isolate space-y-1 border-2',
+              'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
+              minterType === 'base' ? 'border-stargaze' : 'border-transparent',
+              minterType !== 'base' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
+            )}
+          >
+            <button
+              className="p-4 w-full h-full text-left bg-transparent"
+              onClick={() => {
+                setMinterType('base')
+                resetReadyFlags()
+              }}
+              type="button"
+            >
+              <h4 className="font-bold">1/1 Collection</h4>
+              <span className="text-sm text-white/80 line-clamp-2">
+                An appendable collection that only allows for direct secondary market listing of tokens
+              </span>
+            </button>
+          </div>
+          <Conditional test={OPEN_EDITION_FACTORY_ADDRESS !== undefined}>
+            <div
+              className={clsx(
+                'isolate space-y-1 border-2',
+                'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
+                minterType === 'openEdition' ? 'border-stargaze' : 'border-transparent',
+                minterType !== 'openEdition' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
+              )}
+            >
+              <button
+                className="p-4 w-full h-full text-left bg-transparent"
+                onClick={() => {
+                  setMinterType('openEdition')
+                  resetReadyFlags()
+                }}
+                type="button"
+              >
+                <h4 className="font-bold">Open Edition Minting</h4>
+                <span className="text-sm text-white/80 line-clamp-2">
+                  Allows multiple copies of a single NFT to be minted for a given time interval.
+                </span>
+              </button>
+            </div>
+          </Conditional>
         </div>
-      </Conditional>
+      </div>
 
       {minterType === 'base' && (
         <div>