Merge pull request #84 from public-awesome/improve-base-minter-ui

Base Minter UI improvements

components/collections/actions/actions.ts

@@ -42,8 +42,8 @@ export interface ActionListItem {
 export const BASE_ACTION_LIST: ActionListItem[] = [
   {
     id: 'mint_token_uri',
-    name: 'Mint Token URI',
+    name: 'Append New Token',
-    description: `Mint a token with the given token URI`,
+    description: `Mint a new token and append it to the collection`,
   },
   {
     id: 'update_start_trading_time',

components/collections/creation/BaseMinterDetails.tsx

@@ -4,6 +4,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { toUtf8 } from '@cosmjs/encoding'
 import axios from 'axios'
+import clsx from 'clsx'
+import { Alert } from 'components/Alert'
+import { Conditional } from 'components/Conditional'
 import { useInputState } from 'components/forms/FormInput.hooks'
 import { useWallet } from 'contexts/wallet'
 import React, { useCallback, useEffect, useState } from 'react'
@@ -73,7 +76,6 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
   }
 
   const filterBaseMinterContracts = async () => {
-    setMyBaseMinterContracts([])
     await fetchMinterContracts()
       .then((minterContracts) =>
         minterContracts.map(async (minterContract: any) => {
@@ -107,19 +109,24 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
     })
   }, [debouncedMyBaseMinterContracts])
 
-  const debouncedWalletAddress = useDebounce(wallet.address, 500)
+  const debouncedWalletAddress = useDebounce(wallet.address, 300)
 
   const displayToast = async () => {
     await toast.promise(filterBaseMinterContracts(), {
-      loading: 'Fetching Base Minter contracts...',
+      loading: 'Retrieving previous 1/1 collections...',
-      success: 'Base Minter contracts retrieved.',
+      success: 'Collection retrieval finalized.',
-      error: 'Unable to retrieve Base Minter contracts.',
+      error: 'Unable to retrieve any 1/1 collections.',
     })
   }
 
   useEffect(() => {
     if (debouncedWalletAddress && baseMinterAcquisitionMethod === 'existing') {
+      setMyBaseMinterContracts([])
+      existingBaseMinterState.onChange('')
       void displayToast()
+    } else if (baseMinterAcquisitionMethod === 'new' || !wallet.initialized) {
+      setMyBaseMinterContracts([])
+      existingBaseMinterState.onChange('')
     }
   }, [debouncedWalletAddress, baseMinterAcquisitionMethod])
 
@@ -130,7 +137,7 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
     }
     onChange(data)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [existingBaseMinterState.value, baseMinterAcquisitionMethod])
+  }, [existingBaseMinterState.value, baseMinterAcquisitionMethod, wallet.initialized])
 
   return (
     <div className="mx-10 mb-4 rounded border-2 border-white/20">
@@ -151,7 +158,7 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
             className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2  peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
             htmlFor="inlineRadio5"
           >
-            Create a New Base Minter Contract
+            Create a New 1/1 Collection
           </label>
         </div>
         <div className="mt-3 ml-2 font-bold form-check form-check-inline">
@@ -170,27 +177,49 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
             className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2  peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
             htmlFor="inlineRadio6"
           >
-            Use an Existing Base Minter Contract
+            Append a New Token to an Existing 1/1 Collection
           </label>
         </div>
       </div>
 
       {baseMinterAcquisitionMethod === 'existing' && (
         <div>
-          <div className="grid grid-cols-2 grid-flow-col my-4 mx-10">
+          <div className={clsx('my-4 mx-10')}>
-            <select
+            <Conditional test={myBaseMinterContracts.length !== 0}>
-              className="mt-8 w-full max-w-lg text-sm bg-white/10 select select-bordered"
+              <select
-              onChange={(e) => {
+                className="mt-4 w-full max-w-3xl text-base bg-white/10 select select-bordered"
-                existingBaseMinterState.onChange(e.target.value.slice(e.target.value.indexOf('stars1')))
+                onChange={(e) => {
-                e.preventDefault()
+                  existingBaseMinterState.onChange(e.target.value.slice(e.target.value.indexOf('stars1')))
-              }}
+                  e.preventDefault()
-            >
+                }}
-              <option className="mt-2 text-lg bg-[#1A1A1A]" disabled selected>
+              >
-                Select one of your existing Base Minter contracts
+                <option className="mt-2 text-lg bg-[#1A1A1A]" disabled selected>
-              </option>
+                  Select one of your existing 1/1 collections
-              {renderBaseMinterContracts()}
+                </option>
-            </select>
+                {renderBaseMinterContracts()}
-            <TextInput defaultValue={existingBaseMinterState.value} {...existingBaseMinterState} isRequired />
+              </select>
+            </Conditional>
+            <Conditional test={myBaseMinterContracts.length === 0}>
+              <div className="flex flex-col">
+                <Conditional test={wallet.initialized}>
+                  <Alert className="my-2 w-[90%]" type="info">
+                    No previous 1/1 collections were found. You may create a new 1/1 collection or fill in the minter
+                    contract address manually.
+                  </Alert>
+                  <TextInput
+                    className="w-3/5"
+                    defaultValue={existingBaseMinterState.value}
+                    {...existingBaseMinterState}
+                    isRequired
+                  />
+                </Conditional>
+                <Conditional test={!wallet.initialized}>
+                  <Alert className="my-2 w-[90%]" type="warning">
+                    Please connect your wallet first.
+                  </Alert>
+                </Conditional>
+              </div>
+            </Conditional>
           </div>
         </div>
       )}

contracts/baseMinter/contract.ts

@@ -141,8 +141,12 @@ export const baseMinter = (client: SigningCosmWasmClient, txSigner: string): Bas
       })
       console.log(factoryParameters.params.mint_fee_bps)
 
-      const price = (await getConfig()).config.mint_price.amount
+      const price = (await getConfig()).config?.mint_price.amount
-      console.log(price)
+      if (!price) {
+        throw new Error(
+          'Unable to retrieve a valid mint price. It may be that the given contract address does not belong to a Base Minter contract.',
+        )
+      }
       console.log((Number(price) * Number(factoryParameters.params.mint_fee_bps)) / 100)
       const res = await client.execute(
         senderAddress,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stargaze-studio",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "workspaces": [
     "packages/*"
   ],

pages/collections/actions.tsx

@@ -88,7 +88,7 @@ const CollectionActionsPage: NextPage = () => {
             toUtf8(Buffer.from(Buffer.from('contract_info').toString('hex'), 'hex').toString()),
           ),
           {
-            loading: 'Retrieving Minter type...',
+            loading: 'Retrieving minter type...',
             error: 'Minter type retrieval failed.',
             success: 'Minter type retrieved.',
           },

pages/collections/create.tsx

@@ -935,9 +935,9 @@ const CollectionCreationPage: NextPage = () => {
                 }}
                 type="button"
               >
-                <h4 className="font-bold">Vending Minter</h4>
+                <h4 className="font-bold">Standard Collection</h4>
                 <span className="text-sm text-white/80 line-clamp-2">
-                  Vending Minter contract facilitates primary market vending machine style minting
+                  A non-appendable collection that facilitates primary market vending machine style minting
                 </span>
               </button>
             </div>
@@ -957,8 +957,10 @@ const CollectionCreationPage: NextPage = () => {
                 }}
                 type="button"
               >
-                <h4 className="font-bold">Base Minter</h4>
+                <h4 className="font-bold">1/1 Collection</h4>
-                <span className="text-sm text-white/80 line-clamp-2">Base Minter contract enables 1/1 minting</span>
+                <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>
           </div>